mirror of
https://github.com/wassname/slider.git
synced 2026-09-09 11:35:22 +08:00
update examples at 1429717291407
This commit is contained in:
yiminghe
@@ -1,9 +0,0 @@
|
||||
# top-most EditorConfig file
|
||||
root = true
|
||||
|
||||
# Unix-style newlines with a newline ending every file
|
||||
[*.{js,css}]
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
-28
@@ -1,28 +0,0 @@
|
||||
*.iml
|
||||
*.log
|
||||
.idea/
|
||||
.ipr
|
||||
.iws
|
||||
*~
|
||||
~*
|
||||
*.diff
|
||||
*.patch
|
||||
*.bak
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
.project
|
||||
.*proj
|
||||
.svn/
|
||||
*.swp
|
||||
*.swo
|
||||
*.pyc
|
||||
*.pyo
|
||||
.build
|
||||
node_modules
|
||||
_site
|
||||
sea-modules
|
||||
spm_modules
|
||||
.cache
|
||||
dist
|
||||
assets/**/*.css
|
||||
build/
|
||||
@@ -1,27 +0,0 @@
|
||||
{
|
||||
"requireCurlyBraces": ["if", "else", "for", "while", "do", "try", "catch"],
|
||||
"requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"],
|
||||
"requireSpacesInFunctionExpression": {
|
||||
"beforeOpeningCurlyBrace": true
|
||||
},
|
||||
"disallowSpacesInsideArrayBrackets": true,
|
||||
"disallowSpacesInsideObjectBrackets": true,
|
||||
"disallowSpacesInsideParentheses": true,
|
||||
"disallowQuotedKeysInObjects": "allButReserved",
|
||||
"disallowSpaceAfterObjectKeys": true,
|
||||
"requireSpaceBeforeBinaryOperators": ["-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<=" ],
|
||||
"requireSpacesInConditionalExpression": {
|
||||
"afterTest": true,
|
||||
"beforeConsequent": true,
|
||||
"afterConsequent": true,
|
||||
"beforeAlternate": true
|
||||
},
|
||||
"requireSpaceAfterBinaryOperators": ["/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
|
||||
"disallowKeywords": [ "with" ],
|
||||
"disallowSpaceAfterPrefixUnaryOperators": [ "!" , "++", "--", "+", "-", "~"],
|
||||
"disallowSpaceBeforePostfixUnaryOperators": ["++", "--", ","],
|
||||
"disallowMultipleLineBreaks": true,
|
||||
"disallowKeywordsOnNewLine": ["else"],
|
||||
"safeContextKeyword": "self",
|
||||
"excludeFiles": ["lib/**/parser.js"]
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
{
|
||||
"camelcase": true,
|
||||
"curly": true,
|
||||
"eqeqeq": true,
|
||||
"freeze": true,
|
||||
"indent": 4,
|
||||
"latedef": "nofunc",
|
||||
"quotmark": "false",
|
||||
"nonew": true,
|
||||
"newcap": false,
|
||||
"immed": true,
|
||||
"noarg": true,
|
||||
"eqnull": true,
|
||||
"trailing": true,
|
||||
"undef": true,
|
||||
"unused": true,
|
||||
"browser": true,
|
||||
"node": true,
|
||||
"esnext": true,
|
||||
"globals": {
|
||||
"describe": false,
|
||||
"expect": false,
|
||||
"beforeEach": false,
|
||||
"afterEach": false,
|
||||
"modulex": false,
|
||||
"it": false
|
||||
}
|
||||
}
|
||||
-29
@@ -1,29 +0,0 @@
|
||||
bower_components/
|
||||
build/
|
||||
*.cfg
|
||||
node_modules/
|
||||
nohup.out
|
||||
*.iml
|
||||
.idea/
|
||||
.ipr
|
||||
.iws
|
||||
*~
|
||||
~*
|
||||
*.diff
|
||||
*.log
|
||||
*.patch
|
||||
*.bak
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
.project
|
||||
.*proj
|
||||
.svn/
|
||||
*.swp
|
||||
out/
|
||||
.build
|
||||
node_modules
|
||||
_site
|
||||
sea-modules
|
||||
spm_modules
|
||||
.cache
|
||||
dist
|
||||
-14
@@ -1,14 +0,0 @@
|
||||
language: node_js
|
||||
notifications:
|
||||
email:
|
||||
- yiminghe@gmail.com
|
||||
node_js:
|
||||
- 0.12
|
||||
before_script:
|
||||
- npm start &
|
||||
- npm install mocha-phantomjs -g
|
||||
- phantomjs --version
|
||||
script:
|
||||
- npm test
|
||||
- npm run-script browser-test
|
||||
- npm run-script browser-test-cover
|
||||
@@ -0,0 +1,94 @@
|
||||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // install a JSONP callback for chunk loading
|
||||
/******/ var parentJsonpFunction = window["webpackJsonp"];
|
||||
/******/ window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
|
||||
/******/ // add "moreModules" to the modules object,
|
||||
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||
/******/ var moduleId, chunkId, i = 0, callbacks = [];
|
||||
/******/ for(;i < chunkIds.length; i++) {
|
||||
/******/ chunkId = chunkIds[i];
|
||||
/******/ if(installedChunks[chunkId])
|
||||
/******/ callbacks.push.apply(callbacks, installedChunks[chunkId]);
|
||||
/******/ installedChunks[chunkId] = 0;
|
||||
/******/ }
|
||||
/******/ for(moduleId in moreModules) {
|
||||
/******/ modules[moduleId] = moreModules[moduleId];
|
||||
/******/ }
|
||||
/******/ if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
|
||||
/******/ while(callbacks.length)
|
||||
/******/ callbacks.shift().call(null, __webpack_require__);
|
||||
/******/ if(moreModules[0]) {
|
||||
/******/ installedModules[0] = 0;
|
||||
/******/ return __webpack_require__(0);
|
||||
/******/ }
|
||||
/******/ };
|
||||
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
|
||||
/******/ // object to store loaded and loading chunks
|
||||
/******/ // "0" means "already loaded"
|
||||
/******/ // Array means "loading", array contains callbacks
|
||||
/******/ var installedChunks = {
|
||||
/******/ 1:0
|
||||
/******/ };
|
||||
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId])
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ exports: {},
|
||||
/******/ id: moduleId,
|
||||
/******/ loaded: false
|
||||
/******/ };
|
||||
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.loaded = true;
|
||||
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
|
||||
/******/ // This file contains only the entry chunk.
|
||||
/******/ // The chunk loading function for additional chunks
|
||||
/******/ __webpack_require__.e = function requireEnsure(chunkId, callback) {
|
||||
/******/ // "0" is the signal for "already loaded"
|
||||
/******/ if(installedChunks[chunkId] === 0)
|
||||
/******/ return callback.call(null, __webpack_require__);
|
||||
|
||||
/******/ // an array means "currently loading".
|
||||
/******/ if(installedChunks[chunkId] !== undefined) {
|
||||
/******/ installedChunks[chunkId].push(callback);
|
||||
/******/ } else {
|
||||
/******/ // start chunk loading
|
||||
/******/ installedChunks[chunkId] = [callback];
|
||||
/******/ var head = document.getElementsByTagName('head')[0];
|
||||
/******/ var script = document.createElement('script');
|
||||
/******/ script.type = 'text/javascript';
|
||||
/******/ script.charset = 'utf-8';
|
||||
/******/ script.async = true;
|
||||
|
||||
/******/ script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"simple"}[chunkId]||chunkId) + ".js";
|
||||
/******/ head.appendChild(script);
|
||||
/******/ }
|
||||
/******/ };
|
||||
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "";
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ([]);
|
||||
@@ -0,0 +1 @@
|
||||
<style>li {margin:10px;}</style><h1 style="text-align: center;margin:20px;">rc-slider examples</h1><ul><li><a href="simple.html">simple.js</a></li></ul>
|
||||
@@ -0,0 +1,197 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
color: #333;
|
||||
background: #f8f8f8;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.diff .hljs-header,
|
||||
.hljs-javadoc {
|
||||
color: #998;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.css .rule .hljs-keyword,
|
||||
.hljs-winutils,
|
||||
.nginx .hljs-title,
|
||||
.hljs-subst,
|
||||
.hljs-request,
|
||||
.hljs-status {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-number,
|
||||
.hljs-hexcolor,
|
||||
.ruby .hljs-constant {
|
||||
color: #008080;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-tag .hljs-value,
|
||||
.hljs-phpdoc,
|
||||
.hljs-dartdoc,
|
||||
.tex .hljs-formula {
|
||||
color: #d14;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-id,
|
||||
.scss .hljs-preprocessor {
|
||||
color: #900;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-list .hljs-keyword,
|
||||
.hljs-subst {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.hljs-class .hljs-title,
|
||||
.hljs-type,
|
||||
.vhdl .hljs-literal,
|
||||
.tex .hljs-command {
|
||||
color: #458;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-tag,
|
||||
.hljs-tag .hljs-title,
|
||||
.hljs-rules .hljs-property,
|
||||
.django .hljs-tag .hljs-keyword {
|
||||
color: #000080;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.hljs-attribute,
|
||||
.hljs-variable,
|
||||
.lisp .hljs-body {
|
||||
color: #008080;
|
||||
}
|
||||
|
||||
.hljs-regexp {
|
||||
color: #009926;
|
||||
}
|
||||
|
||||
.hljs-symbol,
|
||||
.ruby .hljs-symbol .hljs-string,
|
||||
.lisp .hljs-keyword,
|
||||
.clojure .hljs-keyword,
|
||||
.scheme .hljs-keyword,
|
||||
.tex .hljs-special,
|
||||
.hljs-prompt {
|
||||
color: #990073;
|
||||
}
|
||||
|
||||
.hljs-built_in {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-preprocessor,
|
||||
.hljs-pragma,
|
||||
.hljs-pi,
|
||||
.hljs-doctype,
|
||||
.hljs-shebang,
|
||||
.hljs-cdata {
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
background: #fdd;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
background: #dfd;
|
||||
}
|
||||
|
||||
.diff .hljs-change {
|
||||
background: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-chunk {
|
||||
color: #aaa;
|
||||
}
|
||||
.highlight {
|
||||
background-color: transparent;
|
||||
padding-top: 1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.highlight pre {
|
||||
font-family: Consolas, "Liberation Mono", Courier, monospace;
|
||||
margin: 6px 0;
|
||||
border: 1px solid #eee;
|
||||
padding: 6px 10px;
|
||||
overflow: auto;
|
||||
border-radius: 2px;
|
||||
background-color: #f8f8f9;
|
||||
line-height: 19px;
|
||||
font-size: 13px;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.highlight pre code {
|
||||
color: #5D6A6A;
|
||||
background-color: transparent;
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<!--[if lt IE 9]>
|
||||
<script>
|
||||
// Console-polyfill. MIT license.
|
||||
// https://github.com/paulmillr/console-polyfill
|
||||
// Make it safe to do console.log() always.
|
||||
(function(global) {
|
||||
'use strict';
|
||||
global.console = global.console || {};
|
||||
var con = global.console;
|
||||
var prop, method;
|
||||
var empty = {};
|
||||
var dummy = function() {};
|
||||
var properties = 'memory'.split(',');
|
||||
var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
|
||||
'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' +
|
||||
'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(',');
|
||||
while (prop = properties.pop()) con[prop] = con[prop] || empty;
|
||||
while (method = methods.pop()) con[method] = con[method] || dummy;
|
||||
})(typeof window === 'undefined' ? this : window);
|
||||
// Using `this` for web workers while maintaining compatibility with browser
|
||||
// targeted script loaders such as Browserify or Webpack where the only way to
|
||||
// get to the global object is via `window`.
|
||||
</script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.0/es5-shim.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.0/es5-sham.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__react-content"></div>
|
||||
<script src="common.js?nowrap"></script>
|
||||
<script src="simple.js?nowrap"></script>
|
||||
<div class="highlight">
|
||||
<pre>
|
||||
/** @jsx React.DOM */
|
||||
// use jsx to render html, <span class="hljs-keyword">do</span> <span class="hljs-keyword">not</span> modify simple.html
|
||||
<span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider/assets/index.css'</span>);
|
||||
var Slider = <span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider'</span>);
|
||||
var React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
|
||||
// React.render(<Sliders marks={[<span class="hljs-string">"一"</span>,<span class="hljs-string">"二"</span>,<span class="hljs-string">"三"</span>,<span class="hljs-string">"四"</span>,<span class="hljs-string">"五"</span>]} index={<span class="hljs-number">3</span>}/>, document.getElementById(<span class="hljs-string">'__react-content'</span>));
|
||||
// React.render(<Slider className=<span class="hljs-string">'rc-slider'</span> step={<span class="hljs-number">20</span>}/>, document.getElementById(<span class="hljs-string">'__react-content'</span>));
|
||||
React.render(<Slider />, document.getElementById(<span class="hljs-string">'__react-content'</span>));
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,740 @@
|
||||
webpackJsonp([0,1],[
|
||||
/* 0 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = __webpack_require__(1);
|
||||
|
||||
|
||||
/***/ },
|
||||
/* 1 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
/** @jsx React.DOM */
|
||||
// use jsx to render html, do not modify simple.html
|
||||
__webpack_require__(4);
|
||||
var Slider = __webpack_require__(3);
|
||||
var React = __webpack_require__(2);
|
||||
// React.render(<Sliders marks={["一","二","三","四","五"]} index={3}/>, document.getElementById('__react-content'));
|
||||
// React.render(<Slider className='rc-slider' step={20}/>, document.getElementById('__react-content'));
|
||||
React.render(React.createElement(Slider, null), document.getElementById('__react-content'));
|
||||
|
||||
|
||||
/***/ },
|
||||
/* 2 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = React;
|
||||
|
||||
/***/ },
|
||||
/* 3 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = __webpack_require__(6);
|
||||
|
||||
|
||||
/***/ },
|
||||
/* 4 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
// style-loader: Adds some css to the DOM by adding a <style> tag
|
||||
|
||||
// load the styles
|
||||
var content = __webpack_require__(5);
|
||||
if(typeof content === 'string') content = [[module.id, content, '']];
|
||||
// add the styles to the DOM
|
||||
var update = __webpack_require__(7)(content, {});
|
||||
// Hot Module Replacement
|
||||
if(false) {
|
||||
// When the styles change, update the <style> tags
|
||||
module.hot.accept("!!/Users/yiminghe/code/react-components/slider/node_modules/css-loader/index.js!/Users/yiminghe/code/react-components/slider/assets/index.css", function() {
|
||||
var newContent = require("!!/Users/yiminghe/code/react-components/slider/node_modules/css-loader/index.js!/Users/yiminghe/code/react-components/slider/assets/index.css");
|
||||
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
|
||||
update(newContent);
|
||||
});
|
||||
// When the module is disposed, remove the <style> tags
|
||||
module.hot.dispose(function() { update(); });
|
||||
}
|
||||
|
||||
/***/ },
|
||||
/* 5 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
exports = module.exports = __webpack_require__(8)();
|
||||
exports.push([module.id, ".rc-slider {\n position: relative;\n height: 4px;\n width: 100%;\n border-radius: 2px;\n background-color: #e9e9e9;\n}\n.rc-slider-track {\n position: absolute;\n left: 0;\n height: 4px;\n border-radius: 2px;\n background-color: #b2e9fd;\n z-index: 1;\n}\n.rc-slider-handle {\n position: absolute;\n margin-left: -7px;\n margin-top: -5px;\n width: 10px;\n height: 10px;\n cursor: default;\n border-radius: 50%;\n border: solid 2px #d9d9d9;\n background-color: #fff;\n z-index: 2;\n}\n.rc-slider-handle:hover {\n border-color: #999;\n}\n.rc-slider-handle-active {\n border-color: #8cddfc;\n}\n.rc-slider-handle-active:active {\n border-color: #2db7f5;\n background-color: #2db7f5;\n box-shadow: 0 0 0 5px rgba(45, 183, 245, 0.3);\n}\n.rc-slider-handle-active:hover {\n border-color: #23c0fa;\n}\n.rc-slider-mark {\n position: absolute;\n top: 10px;\n left: 0px;\n width: 100%;\n height: 20px;\n font-size: 12px;\n z-index: 3;\n}\n.rc-slider-mark-text {\n position: absolute;\n display: inline-block;\n line-height: 1.5;\n height: 20px;\n vertical-align: middle;\n text-align: center;\n cursor: pointer;\n color: #ccc;\n}\n.rc-slider-mark-text:first-child {\n text-align: left;\n}\n.rc-slider-mark-text-active {\n color: #999;\n}\n.rc-slider-step {\n position: absolute;\n width: 100%;\n height: 4px;\n background: transparent;\n z-index: 1;\n}\n.rc-slider-dot {\n position: absolute;\n top: -2px;\n margin-left: -4px;\n width: 4px;\n height: 4px;\n border: 2px solid #fff;\n background-color: #bcbcbc;\n cursor: pointer;\n border-radius: 50%;\n vertical-align: middle;\n}\n.rc-slider-dot:first-child {\n margin-left: -2px;\n}\n.rc-slider-dot:last-child {\n margin-left: -6px;\n}\n.rc-slider-dot-active {\n background-color: #8cddfc;\n}\n.rc-slider-disabled {\n background-color: #e7eaec;\n}\n.rc-slider-disabled .rc-slider-track {\n background-color: #e7eaec;\n}\n.rc-slider-disabled .rc-slider-handle {\n border-color: #e7eaec;\n background-color: #fff;\n cursor: not-allowed;\n}\n.rc-slider-disabled .rc-slider-mark-text,\n.rc-slider-disabled .dot {\n cursor: not-allowed !important;\n}\n", ""]);
|
||||
|
||||
/***/ },
|
||||
/* 6 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
/** @jsx React.DOM */
|
||||
var React = __webpack_require__(2);
|
||||
var EventListener = __webpack_require__(9);
|
||||
|
||||
function pauseEvent(e) {
|
||||
if (e.stopPropagation) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
if (e.preventDefault) {
|
||||
e.preventDefault();
|
||||
}
|
||||
e.cancelBubble = true;
|
||||
e.returnValue = false;
|
||||
return false;
|
||||
}
|
||||
|
||||
function prefixClsFn(prefixCls) {
|
||||
var args = Array.prototype.slice.call(arguments, 1);
|
||||
return args.map(function(s) {
|
||||
return prefixCls + '-' + s;
|
||||
}).join(' ');
|
||||
}
|
||||
|
||||
var Slider = React.createClass({displayName: "Slider",
|
||||
propTypes: {
|
||||
min: React.PropTypes.number,
|
||||
max: React.PropTypes.number,
|
||||
step: React.PropTypes.number,
|
||||
value: React.PropTypes.number,
|
||||
index: React.PropTypes.number,
|
||||
marks: React.PropTypes.array,
|
||||
className: React.PropTypes.string,
|
||||
disabled: React.PropTypes.bool,
|
||||
onBeforeChange: React.PropTypes.func,
|
||||
onChange: React.PropTypes.func,
|
||||
onAfterChange: React.PropTypes.func
|
||||
},
|
||||
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
value: 0,
|
||||
marks: [],
|
||||
className: 'rc-slider',
|
||||
disabled: false,
|
||||
index: 0
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
var props = this.props;
|
||||
var value = this._trimAlignValue(props.value);
|
||||
var marksLen = props.marks.length;
|
||||
if (marksLen > 0) {
|
||||
value = ((props.max - props.min) / (marksLen - 1)) * (props.index);
|
||||
value = value.toFixed(5);
|
||||
}
|
||||
|
||||
return {
|
||||
upperBound: 0,
|
||||
sliderLength: 0,
|
||||
value: value,
|
||||
active: props.disabled ? '' : ((value > props.min || props.index > 0) ? 'active' : '')
|
||||
};
|
||||
},
|
||||
|
||||
componentWillReceiveProps: function(newProps) {
|
||||
var value = newProps.value;
|
||||
this.state.value = this._trimAlignValue(value, newProps);
|
||||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
this._onHandleResizeListener = EventListener.listen(window, 'resize', this.handleResize);
|
||||
this.handleResize();
|
||||
},
|
||||
|
||||
componentWillUnmount: function() {
|
||||
if (this._onHandleResizeListener) {
|
||||
this._onHandleResizeListener.remove();
|
||||
}
|
||||
},
|
||||
|
||||
getValue: function() {
|
||||
return this.state.value;
|
||||
},
|
||||
|
||||
getIndex: function() {
|
||||
var props = this.props;
|
||||
if (props.marks.length === 0) {
|
||||
return;
|
||||
}
|
||||
var value = this.state.value;
|
||||
var unit = (props.max - props.min) / (props.marks.length - 1);
|
||||
return Math.floor(value / unit);
|
||||
},
|
||||
|
||||
_trimAlignValue: function(val, props) {
|
||||
props = props || this.props;
|
||||
|
||||
var step = props.marks.length > 0 ? (props.max - props.min) / (props.marks.length - 1) : props.step;
|
||||
|
||||
if (val <= props.min) {
|
||||
val = props.min;
|
||||
}
|
||||
if (val >= props.max) {
|
||||
val = props.max;
|
||||
}
|
||||
|
||||
var valModStep = (val - props.min) % step;
|
||||
var alignValue = val - valModStep;
|
||||
|
||||
if (Math.abs(valModStep) * 2 >= step) {
|
||||
alignValue += (valModStep > 0) ? step : (-step);
|
||||
}
|
||||
|
||||
return parseFloat(alignValue.toFixed(5));
|
||||
},
|
||||
|
||||
_calcOffset: function(value) {
|
||||
var ratio = (value - this.props.min) / (this.props.max - this.props.min);
|
||||
return ratio * this.state.upperBound;
|
||||
},
|
||||
|
||||
_calcValue: function(offset) {
|
||||
var ratio = offset / this.state.upperBound;
|
||||
return ratio * (this.props.max - this.props.min) + this.props.min;
|
||||
},
|
||||
|
||||
_calValueByPos: function (position, callback) {
|
||||
var pixelOffset = position - this.state.sliderStart;
|
||||
// pixelOffset -= (this.state.handleSize / 2);
|
||||
|
||||
var nextValue = this._trimAlignValue(this._calcValue(pixelOffset));
|
||||
|
||||
this.setState({value: nextValue, active: 'active'}, callback);
|
||||
},
|
||||
|
||||
_getMousePosition: function(e) {
|
||||
return e.pageX || (e.clientX + document.documentElement.scrollLeft);
|
||||
},
|
||||
|
||||
_triggerEvents: function(event) {
|
||||
var props = this.props;
|
||||
var hasMarks = props.marks && props.marks.length > 0;
|
||||
if (props[event]) {
|
||||
props[event](hasMarks ? this.getIndex() : this.state.value);
|
||||
}
|
||||
},
|
||||
|
||||
_addEventHandles: function() {
|
||||
this._onMouseMoveListener = EventListener.listen(document, 'mousemove', this._onMouseMove);
|
||||
this._onMouseUpListener = EventListener.listen(document, 'mouseup', this._onMouseUp);
|
||||
},
|
||||
|
||||
_removeEventHandles: function () {
|
||||
if (this._onMouseMoveListener) {
|
||||
this._onMouseMoveListener.remove();
|
||||
}
|
||||
|
||||
if (this._onMouseUpListener) {
|
||||
this._onMouseUpListener.remove();
|
||||
}
|
||||
},
|
||||
|
||||
_start: function(position) {
|
||||
if (document.activeElement) {
|
||||
document.activeElement.blur();
|
||||
}
|
||||
|
||||
this._triggerEvents('onBeforeChange');
|
||||
|
||||
this.setState({
|
||||
startValue: this.state.value,
|
||||
startPosition: position
|
||||
});
|
||||
},
|
||||
|
||||
_end: function() {
|
||||
this._removeEventHandles();
|
||||
this.setState(this._triggerEvents.bind(this, 'onAfterChange'));
|
||||
},
|
||||
|
||||
_onMouseUp: function() {
|
||||
this._end();
|
||||
},
|
||||
|
||||
_onMouseMove: function(e) {
|
||||
pauseEvent(e);
|
||||
var position = this._getMousePosition(e);
|
||||
var props = this.props;
|
||||
var state = this.state;
|
||||
|
||||
var value = state.value;
|
||||
var oldValue = value;
|
||||
|
||||
var diffPosition = position - state.startPosition;
|
||||
|
||||
var diffValue = diffPosition / (state.sliderLength) * (props.max - props.min);
|
||||
var newValue = this._trimAlignValue(state.startValue + diffValue);
|
||||
|
||||
value = newValue;
|
||||
|
||||
if (newValue !== oldValue) {
|
||||
this.setState({value: value, active: 'active'} ,this._triggerEvents.bind(this, 'onChange'));
|
||||
}
|
||||
},
|
||||
|
||||
handleResize: function() {
|
||||
var slider = this.refs.slider.getDOMNode();
|
||||
var rect = slider.getBoundingClientRect();
|
||||
|
||||
var sliderMin = rect.left;
|
||||
var sliderMax = rect.right;
|
||||
|
||||
this.setState({
|
||||
upperBound: slider.clientWidth,
|
||||
sliderLength: Math.abs(sliderMax - sliderMin),
|
||||
sliderStart: sliderMin
|
||||
});
|
||||
},
|
||||
|
||||
handleMouseDown: function() {
|
||||
return function(e) {
|
||||
if (this.props.disabled) {
|
||||
return;
|
||||
}
|
||||
var position = this._getMousePosition(e);
|
||||
this._start(position);
|
||||
this._addEventHandles();
|
||||
pauseEvent(e);
|
||||
}.bind(this);
|
||||
},
|
||||
|
||||
handleSliderMouseDown: function(e) {
|
||||
if (this.props.disabled) {
|
||||
return;
|
||||
}
|
||||
var position = this._getMousePosition(e);
|
||||
this._calValueByPos(position,
|
||||
function() {
|
||||
this._triggerEvents('onChange');
|
||||
this._start(position);
|
||||
this._addEventHandles();
|
||||
}.bind(this)
|
||||
);
|
||||
pauseEvent(e);
|
||||
},
|
||||
|
||||
renderSteps: function() {
|
||||
var props = this.props;
|
||||
var marksLen = props.marks.length;
|
||||
var stepNum = marksLen > 0 ? marksLen : Math.floor((props.max - props.min) / props.step) + 1;
|
||||
var unit = this.state.sliderLength / (stepNum - 1);
|
||||
|
||||
var prefixCls = props.className;
|
||||
var stepClassName = prefixClsFn(prefixCls, 'step');
|
||||
|
||||
var elements = [];
|
||||
for (var i = 0; i < stepNum; i++) {
|
||||
var offset = unit * i;
|
||||
var style = {
|
||||
left: offset.toFixed(5)
|
||||
};
|
||||
var className = prefixClsFn(prefixCls, 'dot');
|
||||
if (i <= this.getIndex() || (this._calcValue(offset) <= this.getValue())) {
|
||||
className = prefixClsFn(prefixCls, 'dot', 'dot-active');
|
||||
}
|
||||
elements[i] = (
|
||||
React.createElement("span", {className: className, style: style, ref: 'step'+i})
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
React.createElement("div", {className: stepClassName},
|
||||
elements
|
||||
)
|
||||
);
|
||||
},
|
||||
|
||||
renderMark: function(i) {
|
||||
var marks = this.props.marks;
|
||||
var marksLen = marks.length;
|
||||
var unit = this.state.sliderLength / (marksLen - 1);
|
||||
var offset = unit * i;
|
||||
|
||||
var style = {
|
||||
width: (unit / 2).toFixed(5)
|
||||
};
|
||||
|
||||
if (i === (marksLen - 1)) {
|
||||
style.right = '0';
|
||||
style.width = 'auto';
|
||||
}else {
|
||||
style.left = (i > 0 ? (offset - (unit / 4)).toFixed(5) : offset);
|
||||
}
|
||||
|
||||
var prefixCls = this.props.className;
|
||||
var className = prefixClsFn(prefixCls, 'mark-text');
|
||||
|
||||
if (i <= this.getIndex()) {
|
||||
className = prefixClsFn(prefixCls, 'mark-text', 'mark-text-active');
|
||||
}
|
||||
|
||||
return (
|
||||
React.createElement("span", {className: className, style: style}, this.props.marks[i])
|
||||
);
|
||||
},
|
||||
|
||||
renderMarks: function() {
|
||||
var marks = this.props.marks;
|
||||
var marksLen = marks.length;
|
||||
var elements = [];
|
||||
for (var i = 0; i < marksLen; i++) {
|
||||
elements[i] = this.renderMark(i);
|
||||
}
|
||||
|
||||
var prefixCls = this.props.className;
|
||||
var className = prefixClsFn(prefixCls, 'mark');
|
||||
|
||||
return (
|
||||
React.createElement("div", {className: className, onMouseDown: this.handleSliderMouseDown},
|
||||
elements
|
||||
)
|
||||
);
|
||||
},
|
||||
|
||||
renderHandle: function(offset) {
|
||||
var handleStyle = {
|
||||
left: offset
|
||||
};
|
||||
|
||||
var prefixCls = this.props.className;
|
||||
var className = prefixClsFn(prefixCls, 'handle');
|
||||
|
||||
if (this.state.active) {
|
||||
className = prefixClsFn(prefixCls, 'handle', 'handle-active');
|
||||
}
|
||||
|
||||
return (
|
||||
React.createElement("a", {className: className,
|
||||
ref: "handle",
|
||||
style: handleStyle,
|
||||
href: "#",
|
||||
onMouseDown: this.handleMouseDown})
|
||||
);
|
||||
},
|
||||
|
||||
renderTrack: function(offset) {
|
||||
var style = {
|
||||
width: offset
|
||||
};
|
||||
|
||||
var prefixCls = this.props.className;
|
||||
var trackClassName = prefixClsFn(prefixCls, 'track');
|
||||
|
||||
return (
|
||||
React.createElement("div", {className: trackClassName, ref: "track", style: style})
|
||||
);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var state = this.state;
|
||||
var props = this.props;
|
||||
|
||||
var value = state.value;
|
||||
var offset = this._calcOffset(value);
|
||||
|
||||
var track = this.renderTrack(offset);
|
||||
var handles = this.renderHandle(offset);
|
||||
var steps = (props.step > 1 || props.marks.length > 0) ? this.renderSteps() : null;
|
||||
var sliderMarks = (props.marks.length > 0) ? this.renderMarks() : null;
|
||||
|
||||
var prefixCls = props.className;
|
||||
var sliderClassName = props.disabled ? prefixClsFn(prefixCls, 'disabled') : prefixCls;
|
||||
|
||||
return (
|
||||
React.createElement("div", {className: sliderClassName, ref: "slider", onMouseDown: this.handleSliderMouseDown},
|
||||
track,
|
||||
handles,
|
||||
steps,
|
||||
sliderMarks
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = Slider;
|
||||
|
||||
|
||||
/***/ },
|
||||
/* 7 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
/*
|
||||
MIT License http://www.opensource.org/licenses/mit-license.php
|
||||
Author Tobias Koppers @sokra
|
||||
*/
|
||||
var stylesInDom = {},
|
||||
memoize = function(fn) {
|
||||
var memo;
|
||||
return function () {
|
||||
if (typeof memo === "undefined") memo = fn.apply(this, arguments);
|
||||
return memo;
|
||||
};
|
||||
},
|
||||
isIE9 = memoize(function() {
|
||||
return /msie 9\b/.test(window.navigator.userAgent.toLowerCase());
|
||||
}),
|
||||
getHeadElement = memoize(function () {
|
||||
return document.head || document.getElementsByTagName("head")[0];
|
||||
}),
|
||||
singletonElement = null,
|
||||
singletonCounter = 0;
|
||||
|
||||
module.exports = function(list, options) {
|
||||
if(false) {
|
||||
if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
|
||||
}
|
||||
|
||||
options = options || {};
|
||||
// Force single-tag solution on IE9, which has a hard limit on the # of <style>
|
||||
// tags it will allow on a page
|
||||
if (typeof options.singleton === "undefined") options.singleton = isIE9();
|
||||
|
||||
var styles = listToStyles(list);
|
||||
addStylesToDom(styles, options);
|
||||
|
||||
return function update(newList) {
|
||||
var mayRemove = [];
|
||||
for(var i = 0; i < styles.length; i++) {
|
||||
var item = styles[i];
|
||||
var domStyle = stylesInDom[item.id];
|
||||
domStyle.refs--;
|
||||
mayRemove.push(domStyle);
|
||||
}
|
||||
if(newList) {
|
||||
var newStyles = listToStyles(newList);
|
||||
addStylesToDom(newStyles, options);
|
||||
}
|
||||
for(var i = 0; i < mayRemove.length; i++) {
|
||||
var domStyle = mayRemove[i];
|
||||
if(domStyle.refs === 0) {
|
||||
for(var j = 0; j < domStyle.parts.length; j++)
|
||||
domStyle.parts[j]();
|
||||
delete stylesInDom[domStyle.id];
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function addStylesToDom(styles, options) {
|
||||
for(var i = 0; i < styles.length; i++) {
|
||||
var item = styles[i];
|
||||
var domStyle = stylesInDom[item.id];
|
||||
if(domStyle) {
|
||||
domStyle.refs++;
|
||||
for(var j = 0; j < domStyle.parts.length; j++) {
|
||||
domStyle.parts[j](item.parts[j]);
|
||||
}
|
||||
for(; j < item.parts.length; j++) {
|
||||
domStyle.parts.push(addStyle(item.parts[j], options));
|
||||
}
|
||||
} else {
|
||||
var parts = [];
|
||||
for(var j = 0; j < item.parts.length; j++) {
|
||||
parts.push(addStyle(item.parts[j], options));
|
||||
}
|
||||
stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function listToStyles(list) {
|
||||
var styles = [];
|
||||
var newStyles = {};
|
||||
for(var i = 0; i < list.length; i++) {
|
||||
var item = list[i];
|
||||
var id = item[0];
|
||||
var css = item[1];
|
||||
var media = item[2];
|
||||
var sourceMap = item[3];
|
||||
var part = {css: css, media: media, sourceMap: sourceMap};
|
||||
if(!newStyles[id])
|
||||
styles.push(newStyles[id] = {id: id, parts: [part]});
|
||||
else
|
||||
newStyles[id].parts.push(part);
|
||||
}
|
||||
return styles;
|
||||
}
|
||||
|
||||
function createStyleElement() {
|
||||
var styleElement = document.createElement("style");
|
||||
var head = getHeadElement();
|
||||
styleElement.type = "text/css";
|
||||
head.appendChild(styleElement);
|
||||
return styleElement;
|
||||
}
|
||||
|
||||
function addStyle(obj, options) {
|
||||
var styleElement, update, remove;
|
||||
|
||||
if (options.singleton) {
|
||||
var styleIndex = singletonCounter++;
|
||||
styleElement = singletonElement || (singletonElement = createStyleElement());
|
||||
update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);
|
||||
remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);
|
||||
} else {
|
||||
styleElement = createStyleElement();
|
||||
update = applyToTag.bind(null, styleElement);
|
||||
remove = function () {
|
||||
styleElement.parentNode.removeChild(styleElement);
|
||||
};
|
||||
}
|
||||
|
||||
update(obj);
|
||||
|
||||
return function updateStyle(newObj) {
|
||||
if(newObj) {
|
||||
if(newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap)
|
||||
return;
|
||||
update(obj = newObj);
|
||||
} else {
|
||||
remove();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function replaceText(source, id, replacement) {
|
||||
var boundaries = ["/** >>" + id + " **/", "/** " + id + "<< **/"];
|
||||
var start = source.lastIndexOf(boundaries[0]);
|
||||
var wrappedReplacement = replacement
|
||||
? (boundaries[0] + replacement + boundaries[1])
|
||||
: "";
|
||||
if (source.lastIndexOf(boundaries[0]) >= 0) {
|
||||
var end = source.lastIndexOf(boundaries[1]) + boundaries[1].length;
|
||||
return source.slice(0, start) + wrappedReplacement + source.slice(end);
|
||||
} else {
|
||||
return source + wrappedReplacement;
|
||||
}
|
||||
}
|
||||
|
||||
function applyToSingletonTag(styleElement, index, remove, obj) {
|
||||
var css = remove ? "" : obj.css;
|
||||
|
||||
if(styleElement.styleSheet) {
|
||||
styleElement.styleSheet.cssText = replaceText(styleElement.styleSheet.cssText, index, css);
|
||||
} else {
|
||||
var cssNode = document.createTextNode(css);
|
||||
var childNodes = styleElement.childNodes;
|
||||
if (childNodes[index]) styleElement.removeChild(childNodes[index]);
|
||||
if (childNodes.length) {
|
||||
styleElement.insertBefore(cssNode, childNodes[index]);
|
||||
} else {
|
||||
styleElement.appendChild(cssNode);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function applyToTag(styleElement, obj) {
|
||||
var css = obj.css;
|
||||
var media = obj.media;
|
||||
var sourceMap = obj.sourceMap;
|
||||
|
||||
if(sourceMap && typeof btoa === "function") {
|
||||
try {
|
||||
css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(JSON.stringify(sourceMap)) + " */";
|
||||
css = "@import url(\"data:text/css;base64," + btoa(css) + "\")";
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
if(media) {
|
||||
styleElement.setAttribute("media", media)
|
||||
}
|
||||
|
||||
if(styleElement.styleSheet) {
|
||||
styleElement.styleSheet.cssText = css;
|
||||
} else {
|
||||
while(styleElement.firstChild) {
|
||||
styleElement.removeChild(styleElement.firstChild);
|
||||
}
|
||||
styleElement.appendChild(document.createTextNode(css));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/***/ },
|
||||
/* 8 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = function() {
|
||||
var list = [];
|
||||
list.toString = function toString() {
|
||||
var result = [];
|
||||
for(var i = 0; i < this.length; i++) {
|
||||
var item = this[i];
|
||||
if(item[2]) {
|
||||
result.push("@media " + item[2] + "{" + item[1] + "}");
|
||||
} else {
|
||||
result.push(item[1]);
|
||||
}
|
||||
}
|
||||
return result.join("");
|
||||
};
|
||||
return list;
|
||||
}
|
||||
|
||||
/***/ },
|
||||
/* 9 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
/**
|
||||
* Copyright 2013-2014 Facebook, Inc.
|
||||
*
|
||||
* This file contains a modified version of:
|
||||
* https://github.com/facebook/react/blob/v0.12.0/src/vendor/stubs/EventListener.js
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*
|
||||
* TODO: remove in favour of solution provided by:
|
||||
* https://github.com/facebook/react/issues/285
|
||||
*/
|
||||
|
||||
/**
|
||||
* Does not take into account specific nature of platform.
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var EventListener = {
|
||||
/**
|
||||
* Listen to DOM events during the bubble phase.
|
||||
*
|
||||
* @param {DOMEventTarget} target DOM element to register listener on.
|
||||
* @param {string} eventType Event type, e.g. 'click' or 'mouseover'.
|
||||
* @param {function} callback Callback function.
|
||||
* @return {object} Object with a `remove` method.
|
||||
*/
|
||||
listen: function listen(target, eventType, callback) {
|
||||
if (target.addEventListener) {
|
||||
target.addEventListener(eventType, callback, false);
|
||||
return {
|
||||
remove: function remove() {
|
||||
target.removeEventListener(eventType, callback, false);
|
||||
}
|
||||
};
|
||||
} else if (target.attachEvent) {
|
||||
target.attachEvent('on' + eventType, callback);
|
||||
return {
|
||||
remove: function remove() {
|
||||
target.detachEvent('on' + eventType, callback);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = EventListener;
|
||||
|
||||
|
||||
/***/ }
|
||||
]);
|
||||
Reference in New Issue
Block a user