wassname/slider
1
0
Fork 0
mirror of https://github.com/wassname/slider.git synced 2026-09-09 11:35:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

Updates

Browse Source
This commit is contained in:
Benjy Cui
2016-11-21 15:57:02 +08:00
parent c1a4dc0cc1
commit 3676e86d32
18 changed files with 2444 additions and 2721 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/common.js
+2369 -2654
View File
File diff suppressed because it is too large Load Diff
examples/common.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
examples/custom-handles.html
+15 -12
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>custom-handles.js - example - rc-slider@5.3.4</title>
<title>custom-handles.js - example - rc-slider@5.3.5</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta charset="utf-8"/>
@@ -263,7 +263,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@5.3.4</h1>
<h1>rc-slider@5.3.5</h1>
<p>slider ui component for react</p>
</div>
@@ -289,16 +289,19 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
textAlign: <span class="hljs-string">'center'</span>,
};
<span class="hljs-keyword">const</span> CustomHandle = props =&gt; {
<span class="hljs-keyword">const</span> style = <span class="hljs-built_in">Object</span>.assign({ left: <span class="hljs-string">`<span class="hljs-subst">${props.offset}</span>%`</span> }, handleStyle);
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>val: {props.value}<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
)</span>;
};
CustomHandle.propTypes = {
value: React.PropTypes.any,
offset: React.PropTypes.number,
};
<span class="hljs-keyword">const</span> CustomHandle = React.createClass({
propTypes: {
value: React.PropTypes.any,
offset: React.PropTypes.number,
},
render() {
<span class="hljs-keyword">const</span> props = <span class="hljs-keyword">this</span>.props;
<span class="hljs-keyword">const</span> style = <span class="hljs-built_in">Object</span>.assign({ left: <span class="hljs-string">`<span class="hljs-subst">${props.offset}</span>%`</span> }, handleStyle);
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>val: {props.value}<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
)</span>;
},
});
ReactDOM.render(
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
examples/custom-handles.js
+20 -15
View File
@@ -14,8 +14,8 @@ webpackJsonp([0],[
__webpack_require__(2);
var React = __webpack_require__(3);
var ReactDOM = __webpack_require__(36);
var Slider = __webpack_require__(174);
var ReactDOM = __webpack_require__(34);
var Slider = __webpack_require__(180);
var wrapperStyle = { width: 400, margin: 50 };
@@ -31,19 +31,24 @@ webpackJsonp([0],[
textAlign: 'center'
};
var CustomHandle = function CustomHandle(props) {
var style = Object.assign({ left: props.offset + '%' }, handleStyle);
return React.createElement(
'div',
{ style: style },
'val: ',
props.value
);
};
CustomHandle.propTypes = {
value: React.PropTypes.any,
offset: React.PropTypes.number
};
var CustomHandle = React.createClass({
displayName: 'CustomHandle',
propTypes: {
value: React.PropTypes.any,
offset: React.PropTypes.number
},
render: function render() {
var props = this.props;
var style = Object.assign({ left: props.offset + '%' }, handleStyle);
return React.createElement(
'div',
{ style: style },
'val: ',
props.value
);
}
});
ReactDOM.render(React.createElement(
'div',
examples/custom-handles.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sources":["webpack:///./examples/custom-handles.js"],"names":["require","React","ReactDOM","Slider","wrapperStyle","width","margin","handleStyle","position","transform","cursor","padding","border","borderRadius","background","fontSize","textAlign","CustomHandle","style","Object","assign","left","props","offset","value","propTypes","PropTypes","any","number","render","document","getElementById"],"mappings":";;;;;;;;;;;;;AAAA,oBAAAA,CAAQ,CAAR;;AAEA,KAAMC,QAAQ,mBAAAD,CAAQ,CAAR,CAAd;AACA,KAAME,WAAW,mBAAAF,CAAQ,EAAR,CAAjB;AACA,KAAMG,SAAS,mBAAAH,CAAQ,GAAR,CAAf;;AAEA,KAAMI,eAAe,EAAEC,OAAO,GAAT,EAAcC,QAAQ,EAAtB,EAArB;;AAEA,KAAMC,cAAc;AAClBC,aAAU,UADQ;AAElBC,cAAW,uBAFO;AAGlBC,WAAQ,SAHU;AAIlBC,YAAS,KAJS;AAKlBC,WAAQ,mBALU;AAMlBC,iBAAc,KANI;AAOlBC,eAAY,MAPM;AAQlBC,aAAU,MARQ;AASlBC,cAAW;AATO,EAApB;;AAYA,KAAMC,eAAe,SAAfA,YAAe,QAAS;AAC5B,OAAMC,QAAQC,OAAOC,MAAP,CAAc,EAAEC,MAASC,MAAMC,MAAf,MAAF,EAAd,EAA4ChB,WAA5C,CAAd;AACA,UACE;AAAA;AAAA,OAAK,OAAOW,KAAZ;AAAA;AAAyBI,WAAME;AAA/B,IADF;AAGD,EALD;AAMAP,cAAaQ,SAAb,GAAyB;AACvBD,UAAOvB,MAAMyB,SAAN,CAAgBC,GADA;AAEvBJ,WAAQtB,MAAMyB,SAAN,CAAgBE;AAFD,EAAzB;;AAKA1B,UAAS2B,MAAT,CACE;AAAA;AAAA;AACE;AAAA;AAAA,OAAK,OAAOzB,YAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAb,EAAgB,KAAK,EAArB,EAAyB,cAAc,CAAvC;AAFF,IADF;AAKE;AAAA;AAAA,OAAK,OAAOA,YAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAb,EAAgB,KAAK,EAArB,EAAyB,cAAc,CAAvC,EAA0C,QAAQ,oBAAC,YAAD,OAAlD;AAFF;AALF,EADF,EAWE0B,SAASC,cAAT,CAAwB,iBAAxB,CAXF,E","file":"custom-handles.js","sourcesContent":["require('rc-slider/assets/index.less');\n\nconst React = require('react');\nconst ReactDOM = require('react-dom');\nconst Slider = require('rc-slider');\n\nconst wrapperStyle = { width: 400, margin: 50 };\n\nconst handleStyle = {\n position: 'absolute',\n transform: 'translate(-50%, -50%)',\n cursor: 'pointer',\n padding: '2px',\n border: '2px solid #abe2fb',\n borderRadius: '3px',\n background: '#fff',\n fontSize: '14px',\n textAlign: 'center',\n};\n\nconst CustomHandle = props => {\n const style = Object.assign({ left: `${props.offset}%` }, handleStyle);\n return (\n <div style={style}>val: {props.value}</div>\n );\n};\nCustomHandle.propTypes = {\n value: React.PropTypes.any,\n offset: React.PropTypes.number,\n};\n\nReactDOM.render(\n <div>\n <div style={wrapperStyle}>\n <p>Default slider</p>\n <Slider min={0} max={20} defaultValue={3} />\n </div>\n <div style={wrapperStyle}>\n <p>Slider with custom handle</p>\n <Slider min={0} max={20} defaultValue={3} handle={<CustomHandle />} />\n </div>\n </div>,\n document.getElementById('__react-content')\n);\n\n\n\n// WEBPACK FOOTER //\n// ./examples/custom-handles.js"],"sourceRoot":""}
{"version":3,"sources":["webpack:///./examples/custom-handles.js"],"names":["require","React","ReactDOM","Slider","wrapperStyle","width","margin","handleStyle","position","transform","cursor","padding","border","borderRadius","background","fontSize","textAlign","CustomHandle","createClass","propTypes","value","PropTypes","any","offset","number","render","props","style","Object","assign","left","document","getElementById"],"mappings":";;;;;;;;;;;;;AAAA,oBAAAA,CAAQ,CAAR;;AAEA,KAAMC,QAAQ,mBAAAD,CAAQ,CAAR,CAAd;AACA,KAAME,WAAW,mBAAAF,CAAQ,EAAR,CAAjB;AACA,KAAMG,SAAS,mBAAAH,CAAQ,GAAR,CAAf;;AAEA,KAAMI,eAAe,EAAEC,OAAO,GAAT,EAAcC,QAAQ,EAAtB,EAArB;;AAEA,KAAMC,cAAc;AAClBC,aAAU,UADQ;AAElBC,cAAW,uBAFO;AAGlBC,WAAQ,SAHU;AAIlBC,YAAS,KAJS;AAKlBC,WAAQ,mBALU;AAMlBC,iBAAc,KANI;AAOlBC,eAAY,MAPM;AAQlBC,aAAU,MARQ;AASlBC,cAAW;AATO,EAApB;;AAYA,KAAMC,eAAehB,MAAMiB,WAAN,CAAkB;AAAA;;AACrCC,cAAW;AACTC,YAAOnB,MAAMoB,SAAN,CAAgBC,GADd;AAETC,aAAQtB,MAAMoB,SAAN,CAAgBG;AAFf,IAD0B;AAKrCC,SALqC,oBAK5B;AACP,SAAMC,QAAQ,KAAKA,KAAnB;AACA,SAAMC,QAAQC,OAAOC,MAAP,CAAc,EAAEC,MAASJ,MAAMH,MAAf,MAAF,EAAd,EAA4ChB,WAA5C,CAAd;AACA,YACI;AAAA;AAAA,SAAK,OAAOoB,KAAZ;AAAA;AAAyBD,aAAMN;AAA/B,MADJ;AAGD;AAXoC,EAAlB,CAArB;;AAcAlB,UAASuB,MAAT,CACE;AAAA;AAAA;AACE;AAAA;AAAA,OAAK,OAAOrB,YAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAb,EAAgB,KAAK,EAArB,EAAyB,cAAc,CAAvC;AAFF,IADF;AAKE;AAAA;AAAA,OAAK,OAAOA,YAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAb,EAAgB,KAAK,EAArB,EAAyB,cAAc,CAAvC,EAA0C,QAAQ,oBAAC,YAAD,OAAlD;AAFF;AALF,EADF,EAWE2B,SAASC,cAAT,CAAwB,iBAAxB,CAXF,E","file":"custom-handles.js","sourcesContent":["require('rc-slider/assets/index.less');\n\nconst React = require('react');\nconst ReactDOM = require('react-dom');\nconst Slider = require('rc-slider');\n\nconst wrapperStyle = { width: 400, margin: 50 };\n\nconst handleStyle = {\n position: 'absolute',\n transform: 'translate(-50%, -50%)',\n cursor: 'pointer',\n padding: '2px',\n border: '2px solid #abe2fb',\n borderRadius: '3px',\n background: '#fff',\n fontSize: '14px',\n textAlign: 'center',\n};\n\nconst CustomHandle = React.createClass({\n propTypes: {\n value: React.PropTypes.any,\n offset: React.PropTypes.number,\n },\n render() {\n const props = this.props;\n const style = Object.assign({ left: `${props.offset}%` }, handleStyle);\n return (\n <div style={style}>val: {props.value}</div>\n );\n },\n});\n\nReactDOM.render(\n <div>\n <div style={wrapperStyle}>\n <p>Default slider</p>\n <Slider min={0} max={20} defaultValue={3} />\n </div>\n <div style={wrapperStyle}>\n <p>Slider with custom handle</p>\n <Slider min={0} max={20} defaultValue={3} handle={<CustomHandle />} />\n </div>\n </div>,\n document.getElementById('__react-content')\n);\n\n\n\n// WEBPACK FOOTER //\n// ./examples/custom-handles.js"],"sourceRoot":""}
examples/marks.html
+2 -2
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>marks.js - example - rc-slider@5.3.4</title>
<title>marks.js - example - rc-slider@5.3.5</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta charset="utf-8"/>
@@ -263,7 +263,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@5.3.4</h1>
<h1>rc-slider@5.3.5</h1>
<p>slider ui component for react</p>
</div>
examples/marks.js
+4 -4
View File
@@ -3,12 +3,12 @@ webpackJsonp([1],{
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(317);
module.exports = __webpack_require__(323);
/***/ },
/***/ 317:
/***/ 323:
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -16,8 +16,8 @@ webpackJsonp([1],{
__webpack_require__(2);
var React = __webpack_require__(3);
var ReactDOM = __webpack_require__(36);
var Slider = __webpack_require__(174);
var ReactDOM = __webpack_require__(34);
var Slider = __webpack_require__(180);
var style = { width: 400, margin: 50 };
var marks = {
examples/range.html
+2 -2
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>range.js - example - rc-slider@5.3.4</title>
<title>range.js - example - rc-slider@5.3.5</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta charset="utf-8"/>
@@ -263,7 +263,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@5.3.4</h1>
<h1>rc-slider@5.3.5</h1>
<p>slider ui component for react</p>
</div>
examples/range.js
+4 -4
View File
@@ -3,12 +3,12 @@ webpackJsonp([2],{
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(318);
module.exports = __webpack_require__(324);
/***/ },
/***/ 318:
/***/ 324:
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -17,8 +17,8 @@ webpackJsonp([2],{
__webpack_require__(2);
var React = __webpack_require__(3);
var ReactDOM = __webpack_require__(36);
var Slider = __webpack_require__(174);
var ReactDOM = __webpack_require__(34);
var Slider = __webpack_require__(180);
var style = { width: 400, margin: 50 };
examples/slider.html
+2 -2
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>slider.js - example - rc-slider@5.3.4</title>
<title>slider.js - example - rc-slider@5.3.5</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta charset="utf-8"/>
@@ -263,7 +263,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@5.3.4</h1>
<h1>rc-slider@5.3.5</h1>
<p>slider ui component for react</p>
</div>
examples/slider.js
+4 -4
View File
@@ -3,12 +3,12 @@ webpackJsonp([3],{
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(319);
module.exports = __webpack_require__(325);
/***/ },
/***/ 319:
/***/ 325:
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -17,8 +17,8 @@ webpackJsonp([3],{
__webpack_require__(2);
var React = __webpack_require__(3);
var ReactDOM = __webpack_require__(36);
var Slider = __webpack_require__(174);
var ReactDOM = __webpack_require__(34);
var Slider = __webpack_require__(180);
var style = { width: 400, margin: 50 };
examples/v-marks.html
+2 -2
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>v-marks.js - example - rc-slider@5.3.4</title>
<title>v-marks.js - example - rc-slider@5.3.5</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta charset="utf-8"/>
@@ -263,7 +263,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@5.3.4</h1>
<h1>rc-slider@5.3.5</h1>
<p>slider ui component for react</p>
</div>
examples/v-marks.js
+4 -4
View File
@@ -3,12 +3,12 @@ webpackJsonp([4],{
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(320);
module.exports = __webpack_require__(326);
/***/ },
/***/ 320:
/***/ 326:
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -16,8 +16,8 @@ webpackJsonp([4],{
__webpack_require__(2);
var React = __webpack_require__(3);
var ReactDOM = __webpack_require__(36);
var Slider = __webpack_require__(174);
var ReactDOM = __webpack_require__(34);
var Slider = __webpack_require__(180);
var style = { float: 'left', width: 160, height: 400, marginBottom: 160, marginLeft: 50 };
var parentStyle = { overflow: 'hidden' };
examples/v-range.html
+2 -2
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>v-range.js - example - rc-slider@5.3.4</title>
<title>v-range.js - example - rc-slider@5.3.5</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta charset="utf-8"/>
@@ -263,7 +263,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@5.3.4</h1>
<h1>rc-slider@5.3.5</h1>
<p>slider ui component for react</p>
</div>
examples/v-range.js
+4 -4
View File
@@ -3,12 +3,12 @@ webpackJsonp([5],{
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(321);
module.exports = __webpack_require__(327);
/***/ },
/***/ 321:
/***/ 327:
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -17,8 +17,8 @@ webpackJsonp([5],{
__webpack_require__(2);
var React = __webpack_require__(3);
var ReactDOM = __webpack_require__(36);
var Slider = __webpack_require__(174);
var ReactDOM = __webpack_require__(34);
var Slider = __webpack_require__(180);
var style = { float: 'left', width: 180, height: 400, marginBottom: 160, marginLeft: 50 };
var parentStyle = { overflow: 'hidden' };
examples/v-slider.html
+2 -2
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>v-slider.js - example - rc-slider@5.3.4</title>
<title>v-slider.js - example - rc-slider@5.3.5</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta charset="utf-8"/>
@@ -263,7 +263,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@5.3.4</h1>
<h1>rc-slider@5.3.5</h1>
<p>slider ui component for react</p>
</div>
examples/v-slider.js
+4 -4
View File
@@ -3,12 +3,12 @@ webpackJsonp([6],{
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(322);
module.exports = __webpack_require__(328);
/***/ },
/***/ 322:
/***/ 328:
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -17,8 +17,8 @@ webpackJsonp([6],{
__webpack_require__(2);
var React = __webpack_require__(3);
var ReactDOM = __webpack_require__(36);
var Slider = __webpack_require__(174);
var ReactDOM = __webpack_require__(34);
var Slider = __webpack_require__(180);
var style = { float: 'left', width: 200, height: 400, marginBottom: 160, marginLeft: 50 };
var parentStyle = { overflow: 'hidden' };
index.html
+2 -2
View File
@@ -7,7 +7,7 @@
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<title>rc-slider@5.3.4 - slider ui component for react</title>
<title>rc-slider@5.3.5 - slider ui component for react</title>
<style>
@font-face {
font-family: octicons-anchor;
@@ -737,7 +737,7 @@
<body>
<div class="header">
<h1>rc-slider@5.3.4</h1>
<h1>rc-slider@5.3.5</h1>
</div>
<div class="examples">
<h3>EXAMPLES</h3>