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-04-28 09:36:18 +08:00
parent 2a34b28739
commit 0819b6b96f
16 changed files with 600 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/common.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
examples/common.js
+499 -122
View File
@@ -7998,6 +7998,10 @@
}
};
function registerNullComponentID() {
ReactEmptyComponentRegistry.registerNullComponentID(this._rootNodeID);
}
var ReactEmptyComponent = function (instantiate) {
this._currentElement = null;
this._rootNodeID = null;
@@ -8006,7 +8010,7 @@
assign(ReactEmptyComponent.prototype, {
construct: function (element) {},
mountComponent: function (rootID, transaction, context) {
ReactEmptyComponentRegistry.registerNullComponentID(rootID);
transaction.getReactMountReady().enqueue(registerNullComponentID, this);
this._rootNodeID = rootID;
return ReactReconciler.mountComponent(this._renderedComponent, rootID, transaction, context);
},
@@ -18729,7 +18733,7 @@
'use strict';
module.exports = '0.14.7';
module.exports = '0.14.8';
/***/ },
/* 149 */
@@ -19758,11 +19762,11 @@
var _Handle2 = _interopRequireDefault(_Handle);
var _Steps = __webpack_require__(216);
var _Steps = __webpack_require__(217);
var _Steps2 = _interopRequireDefault(_Steps);
var _Marks = __webpack_require__(217);
var _Marks = __webpack_require__(219);
var _Marks2 = _interopRequireDefault(_Marks);
@@ -19812,12 +19816,7 @@
var recent = undefined;
if (props.range && upperBound === lowerBound) {
if (lowerBound === max) {
recent = 'lowerBound';
}
if (upperBound === min) {
recent = 'upperBound';
}
recent = lowerBound === max ? 'lowerBound' : 'upperBound';
} else {
recent = 'upperBound';
}
@@ -20021,9 +20020,8 @@
}
}, {
key: 'getPrecision',
value: function getPrecision() {
var props = this.props;
var stepString = props.step.toString();
value: function getPrecision(step) {
var stepString = step.toString();
var precision = 0;
if (stepString.indexOf('.') >= 0) {
precision = stepString.length - stepString.indexOf('.') - 1;
@@ -20076,7 +20074,7 @@
});
var closestPoint = points[diffs.indexOf(Math.min.apply(Math, diffs))];
return step !== null ? parseFloat(closestPoint.toFixed(this.getPrecision())) : closestPoint;
return step !== null ? parseFloat(closestPoint.toFixed(this.getPrecision(step))) : closestPoint;
}
}, {
key: 'calcOffset',
@@ -22853,7 +22851,7 @@
var _Popup2 = _interopRequireDefault(_Popup);
var _utils = __webpack_require__(215);
var _utils = __webpack_require__(216);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -22885,12 +22883,17 @@
popupAnimation: _react.PropTypes.any,
mouseEnterDelay: _react.PropTypes.number,
mouseLeaveDelay: _react.PropTypes.number,
zIndex: _react.PropTypes.number,
focusDelay: _react.PropTypes.number,
blurDelay: _react.PropTypes.number,
getPopupContainer: _react.PropTypes.func,
destroyPopupOnHide: _react.PropTypes.bool,
mask: _react.PropTypes.bool,
onPopupAlign: _react.PropTypes.func,
popupAlign: _react.PropTypes.object,
popupVisible: _react.PropTypes.bool
popupVisible: _react.PropTypes.bool,
maskTransitionName: _react.PropTypes.string,
maskAnimation: _react.PropTypes.string
},
getDefaultProps: function getDefaultProps() {
@@ -22899,6 +22902,7 @@
getPopupClassNameFromAlign: returnEmptyString,
onPopupVisibleChange: noop,
afterPopupVisibleChange: noop,
onPopupAlign: noop,
popupClassName: '',
mouseEnterDelay: 0,
mouseLeaveDelay: 0.1,
@@ -22908,6 +22912,7 @@
destroyPopupOnHide: false,
popupAlign: {},
defaultPopupVisible: false,
mask: false,
action: [],
showAction: [],
hideAction: []
@@ -22948,7 +22953,7 @@
_reactDom2["default"].unstable_renderSubtreeIntoContainer(_this, _this.getPopupElement(), _this.getPopupContainer(), function renderPopup() {
/* eslint react/no-is-mounted:0 */
if (this.isMounted()) {
self.popupDomNode = (0, _reactDom.findDOMNode)(this);
self.popupDomNode = this.getPopupDomNode();
} else {
self.popupDomNode = null;
}
@@ -22982,12 +22987,7 @@
var popupContainer = this.popupContainer;
if (popupContainer) {
_reactDom2["default"].unmountComponentAtNode(popupContainer);
if (this.props.getPopupContainer) {
var mountNode = this.props.getPopupContainer((0, _reactDom.findDOMNode)(this));
mountNode.removeChild(popupContainer);
} else {
document.body.removeChild(popupContainer);
}
popupContainer.parentNode.removeChild(popupContainer);
this.popupContainer = null;
}
this.clearDelayTimer();
@@ -23053,15 +23053,14 @@
// for test
return this.popupDomNode;
},
getRootDomNode: function getRootDomNode() {
return _reactDom2["default"].findDOMNode(this);
},
getPopupContainer: function getPopupContainer() {
if (!this.popupContainer) {
this.popupContainer = document.createElement('div');
if (this.props.getPopupContainer) {
var mountNode = this.props.getPopupContainer((0, _reactDom.findDOMNode)(this));
mountNode.appendChild(this.popupContainer);
} else {
document.body.appendChild(this.popupContainer);
}
var mountNode = this.props.getPopupContainer ? this.props.getPopupContainer((0, _reactDom.findDOMNode)(this)) : document.body;
mountNode.appendChild(this.popupContainer);
}
return this.popupContainer;
},
@@ -23108,12 +23107,17 @@
className: props.popupClassName,
action: props.action,
align: this.getPopupAlign(),
onAlign: props.onPopupAlign,
animation: props.popupAnimation,
getClassNameFromAlign: this.getPopupClassNameFromAlign
}, mouseProps, {
wrap: this,
getRootDomNode: this.getRootDomNode,
style: props.popupStyle,
transitionName: props.popupTransitionName
mask: props.mask,
zIndex: props.zIndex,
transitionName: props.popupTransitionName,
maskAnimation: props.maskAnimation,
maskTransitionName: props.maskTransitionName
}),
props.popup
);
@@ -23246,6 +23250,8 @@
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _react = __webpack_require__(3);
var _react2 = _interopRequireDefault(_react);
@@ -23262,10 +23268,14 @@
var _rcAnimate2 = _interopRequireDefault(_rcAnimate);
var _PopupInner = __webpack_require__(213);
var _PopupInner = __webpack_require__(214);
var _PopupInner2 = _interopRequireDefault(_PopupInner);
var _LazyRenderBox = __webpack_require__(215);
var _LazyRenderBox2 = _interopRequireDefault(_LazyRenderBox);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var Popup = _react2["default"].createClass({
@@ -23273,9 +23283,10 @@
propTypes: {
visible: _react.PropTypes.bool,
wrap: _react.PropTypes.object,
style: _react.PropTypes.object,
getClassNameFromAlign: _react.PropTypes.func,
onAlign: _react.PropTypes.func,
getRootDomNode: _react.PropTypes.func,
onMouseEnter: _react.PropTypes.func,
align: _react.PropTypes.any,
destroyPopupOnHide: _react.PropTypes.bool,
@@ -23295,12 +23306,22 @@
this.currentAlignClassName = currentAlignClassName;
popupDomNode.className = this.getClassName(currentAlignClassName);
}
props.onAlign(popupDomNode, align);
},
getPopupDomNode: function getPopupDomNode() {
return _reactDom2["default"].findDOMNode(this);
return _reactDom2["default"].findDOMNode(this.refs.popup);
},
getTarget: function getTarget() {
return _reactDom2["default"].findDOMNode(this.props.wrap);
return this.props.getRootDomNode();
},
getMaskTransitionName: function getMaskTransitionName() {
var props = this.props;
var transitionName = props.maskTransitionName;
var animation = props.maskAnimation;
if (!transitionName && animation) {
transitionName = props.prefixCls + '-' + animation;
}
return transitionName;
},
getTransitionName: function getTransitionName() {
var props = this.props;
@@ -23313,7 +23334,7 @@
getClassName: function getClassName(currentAlignClassName) {
return this.props.prefixCls + ' ' + this.props.className + ' ' + currentAlignClassName;
},
render: function render() {
getPopupElement: function getPopupElement() {
var props = this.props;
var align = props.align;
var style = props.style;
@@ -23326,6 +23347,15 @@
if (!visible) {
this.currentAlignClassName = null;
}
var newStyle = _extends({}, style, this.getZIndexStyle());
var popupInnerProps = {
className: className,
prefixCls: prefixCls,
ref: 'popup',
onMouseEnter: props.onMouseEnter,
onMouseLeave: props.onMouseLeave,
style: newStyle
};
if (destroyPopupOnHide) {
return _react2["default"].createElement(
_rcAnimate2["default"],
@@ -23346,14 +23376,9 @@
},
_react2["default"].createElement(
_PopupInner2["default"],
{
className: className,
prefixCls: prefixCls,
visible: true,
onMouseEnter: props.onMouseEnter,
onMouseLeave: props.onMouseLeave,
style: style
},
_extends({
visible: true
}, popupInnerProps),
props.children
)
) : null
@@ -23382,18 +23407,57 @@
},
_react2["default"].createElement(
_PopupInner2["default"],
{
className: className,
hiddenClassName: hiddenClassName,
prefixCls: prefixCls,
onMouseEnter: props.onMouseEnter,
onMouseLeave: props.onMouseLeave,
style: style
},
_extends({
hiddenClassName: hiddenClassName
}, popupInnerProps),
props.children
)
)
);
},
getZIndexStyle: function getZIndexStyle() {
var style = {};
var props = this.props;
if (props.zIndex !== undefined) {
style.zIndex = props.zIndex;
}
return style;
},
getMaskElement: function getMaskElement() {
var props = this.props;
var maskElement = void 0;
if (props.mask) {
var maskTransition = this.getMaskTransitionName();
maskElement = _react2["default"].createElement(_LazyRenderBox2["default"], {
style: this.getZIndexStyle(),
key: 'mask',
className: props.prefixCls + '-mask',
hiddenClassName: props.prefixCls + '-mask-hidden',
visible: props.visible
});
if (maskTransition) {
maskElement = _react2["default"].createElement(
_rcAnimate2["default"],
{
key: 'mask',
showProp: 'visible',
transitionAppear: true,
component: '',
transitionName: maskTransition
},
maskElement
);
}
}
return maskElement;
},
render: function render() {
return _react2["default"].createElement(
'div',
null,
this.getMaskElement(),
this.getPopupElement()
);
}
});
@@ -23628,6 +23692,14 @@
return elFuturePos.top < visibleRect.top || elFuturePos.top + elRegion.height > visibleRect.bottom;
}
function isCompleteFailX(elFuturePos, elRegion, visibleRect) {
return elFuturePos.left > visibleRect.right || elFuturePos.left + elRegion.width < visibleRect.left;
}
function isCompleteFailY(elFuturePos, elRegion, visibleRect) {
return elFuturePos.top > visibleRect.bottom || elFuturePos.top + elRegion.height < visibleRect.top;
}
function flip(points, reg, map) {
var ret = [];
_utils2['default'].each(points, function (p) {
@@ -23690,30 +23762,42 @@
if (overflow.adjustX) {
// 如果横向不能放下
if (isFailX(elFuturePos, elRegion, visibleRect)) {
fail = 1;
// 对齐位置反下
points = flip(points, /[lr]/ig, {
var newPoints = flip(points, /[lr]/ig, {
l: 'r',
r: 'l'
});
// 偏移量也反下
offset = flipOffset(offset, 0);
targetOffset = flipOffset(targetOffset, 0);
var newOffset = flipOffset(offset, 0);
var newTargetOffset = flipOffset(targetOffset, 0);
var newElFuturePos = (0, _getElFuturePos2['default'])(elRegion, refNodeRegion, newPoints, newOffset, newTargetOffset);
if (!isCompleteFailX(newElFuturePos, elRegion, visibleRect)) {
fail = 1;
points = newPoints;
offset = newOffset;
targetOffset = newTargetOffset;
}
}
}
if (overflow.adjustY) {
// 如果纵向不能放下
if (isFailY(elFuturePos, elRegion, visibleRect)) {
fail = 1;
// 对齐位置反下
points = flip(points, /[tb]/ig, {
var newPoints = flip(points, /[tb]/ig, {
t: 'b',
b: 't'
});
// 偏移量也反下
offset = flipOffset(offset, 1);
targetOffset = flipOffset(targetOffset, 1);
var newOffset = flipOffset(offset, 1);
var newTargetOffset = flipOffset(targetOffset, 1);
var newElFuturePos = (0, _getElFuturePos2['default'])(elRegion, refNodeRegion, newPoints, newOffset, newTargetOffset);
if (!isCompleteFailY(newElFuturePos, elRegion, visibleRect)) {
fail = 1;
points = newPoints;
offset = newOffset;
targetOffset = newTargetOffset;
}
}
}
@@ -24656,7 +24740,7 @@
var _AnimateChild2 = _interopRequireDefault(_AnimateChild);
var _util = __webpack_require__(212);
var _util = __webpack_require__(213);
var _util2 = _interopRequireDefault(_util);
@@ -25104,7 +25188,7 @@
var _cssAnimation2 = _interopRequireDefault(_cssAnimation);
var _util = __webpack_require__(212);
var _util = __webpack_require__(213);
var _util2 = _interopRequireDefault(_util);
@@ -25189,13 +25273,31 @@
'use strict';
var Event = __webpack_require__(210);
var Css = __webpack_require__(211);
var isCssAnimationSupported = Event.endEvents.length !== 0;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Event = __webpack_require__(210);
var _Event2 = _interopRequireDefault(_Event);
var _componentClasses = __webpack_require__(211);
var _componentClasses2 = _interopRequireDefault(_componentClasses);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var isCssAnimationSupported = _Event2["default"].endEvents.length !== 0;
var capitalPrefixes = ['Webkit', 'Moz', 'O',
// ms is special .... !
'ms'];
var prefixes = ['-webkit-', '-moz-', '-o-', 'ms-', ''];
function getDuration(node, name) {
var style = window.getComputedStyle(node);
var prefixes = ['-webkit-', '-moz-', '-o-', 'ms-', ''];
var ret = '';
for (var i = 0; i < prefixes.length; i++) {
ret = style.getPropertyValue(prefixes[i] + name);
@@ -25228,9 +25330,19 @@
}
}
var cssAnimation = function cssAnimation(node, transitionName, callback) {
var cssAnimation = function cssAnimation(node, transitionName, endCallback) {
var className = transitionName;
var activeClassName = className + '-active';
var end = endCallback;
var start = void 0;
var active = void 0;
var nodeClasses = (0, _componentClasses2["default"])(node);
if (endCallback && Object.prototype.toString.call(endCallback) === '[object Object]') {
end = endCallback.end;
start = endCallback.start;
active = endCallback.active;
}
if (node.rcEndListener) {
node.rcEndListener();
@@ -25248,26 +25360,33 @@
clearBrowserBugTimeout(node);
Css.removeClass(node, className);
Css.removeClass(node, activeClassName);
nodeClasses.remove(className);
nodeClasses.remove(activeClassName);
Event.removeEndEventListener(node, node.rcEndListener);
_Event2["default"].removeEndEventListener(node, node.rcEndListener);
node.rcEndListener = null;
// Usually this optional callback is used for informing an owner of
// Usually this optional end is used for informing an owner of
// a leave animation and telling it to remove the child.
if (callback) {
callback();
if (end) {
end();
}
};
Event.addEndEventListener(node, node.rcEndListener);
_Event2["default"].addEndEventListener(node, node.rcEndListener);
Css.addClass(node, className);
nodeClasses.add(className);
if (start) {
start();
}
node.rcAnimTimeout = setTimeout(function () {
node.rcAnimTimeout = null;
Css.addClass(node, activeClassName);
nodeClasses.add(activeClassName);
if (active) {
active();
}
fixBrowserByTimeout(node);
}, 0);
@@ -25297,7 +25416,7 @@
clearBrowserBugTimeout(node);
Event.removeEndEventListener(node, node.rcEndListener);
_Event2["default"].removeEndEventListener(node, node.rcEndListener);
node.rcEndListener = null;
// Usually this optional callback is used for informing an owner of
@@ -25307,7 +25426,7 @@
}
};
Event.addEndEventListener(node, node.rcEndListener);
_Event2["default"].addEndEventListener(node, node.rcEndListener);
node.rcAnimTimeout = setTimeout(function () {
for (var s in style) {
@@ -25328,18 +25447,15 @@
property = '';
}
property = property || '';
['Webkit', 'Moz', 'O',
// ms is special .... !
'ms'].forEach(function (prefix) {
capitalPrefixes.forEach(function (prefix) {
node.style[prefix + 'Transition' + property] = v;
});
};
cssAnimation.addClass = Css.addClass;
cssAnimation.removeClass = Css.removeClass;
cssAnimation.isCssAnimationSupported = isCssAnimationSupported;
module.exports = cssAnimation;
exports["default"] = cssAnimation;
module.exports = exports['default'];
/***/ },
/* 210 */
@@ -25347,6 +25463,9 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var EVENT_NAME_MAP = {
transitionend: {
transition: 'transitionend',
@@ -25392,7 +25511,7 @@
}
}
if (typeof window !== 'undefined') {
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
detectEvents();
}
@@ -25415,6 +25534,7 @@
});
},
endEvents: endEvents,
removeEndEventListener: function removeEndEventListener(node, eventListener) {
@@ -25427,41 +25547,220 @@
}
};
module.exports = TransitionEvents;
exports["default"] = TransitionEvents;
module.exports = exports['default'];
/***/ },
/* 211 */
/***/ function(module, exports) {
/***/ function(module, exports, __webpack_require__) {
'use strict';
/**
* Module dependencies.
*/
var SPACE = ' ';
var RE_CLASS = /[\n\t\r]/g;
function norm(elemClass) {
return (SPACE + elemClass + SPACE).replace(RE_CLASS, SPACE);
try {
var index = __webpack_require__(212);
} catch (err) {
var index = __webpack_require__(212);
}
module.exports = {
addClass: function addClass(elem, className) {
elem.className += ' ' + className;
},
/**
* Whitespace regexp.
*/
removeClass: function removeClass(elem, n) {
var elemClass = elem.className.trim();
var className = norm(elemClass);
var needle = n.trim();
needle = SPACE + needle + SPACE;
// 一个 cls 有可能多次出现：'link link2 link link3 link'
while (className.indexOf(needle) >= 0) {
className = className.replace(needle, SPACE);
}
elem.className = className.trim();
}
var re = /\s+/;
/**
* toString reference.
*/
var toString = Object.prototype.toString;
/**
* Wrap `el` in a `ClassList`.
*
* @param {Element} el
* @return {ClassList}
* @api public
*/
module.exports = function(el){
return new ClassList(el);
};
/**
* Initialize a new ClassList for `el`.
*
* @param {Element} el
* @api private
*/
function ClassList(el) {
if (!el || !el.nodeType) {
throw new Error('A DOM element reference is required');
}
this.el = el;
this.list = el.classList;
}
/**
* Add class `name` if not already present.
*
* @param {String} name
* @return {ClassList}
* @api public
*/
ClassList.prototype.add = function(name){
// classList
if (this.list) {
this.list.add(name);
return this;
}
// fallback
var arr = this.array();
var i = index(arr, name);
if (!~i) arr.push(name);
this.el.className = arr.join(' ');
return this;
};
/**
* Remove class `name` when present, or
* pass a regular expression to remove
* any which match.
*
* @param {String|RegExp} name
* @return {ClassList}
* @api public
*/
ClassList.prototype.remove = function(name){
if ('[object RegExp]' == toString.call(name)) {
return this.removeMatching(name);
}
// classList
if (this.list) {
this.list.remove(name);
return this;
}
// fallback
var arr = this.array();
var i = index(arr, name);
if (~i) arr.splice(i, 1);
this.el.className = arr.join(' ');
return this;
};
/**
* Remove all classes matching `re`.
*
* @param {RegExp} re
* @return {ClassList}
* @api private
*/
ClassList.prototype.removeMatching = function(re){
var arr = this.array();
for (var i = 0; i < arr.length; i++) {
if (re.test(arr[i])) {
this.remove(arr[i]);
}
}
return this;
};
/**
* Toggle class `name`, can force state via `force`.
*
* For browsers that support classList, but do not support `force` yet,
* the mistake will be detected and corrected.
*
* @param {String} name
* @param {Boolean} force
* @return {ClassList}
* @api public
*/
ClassList.prototype.toggle = function(name, force){
// classList
if (this.list) {
if ("undefined" !== typeof force) {
if (force !== this.list.toggle(name, force)) {
this.list.toggle(name); // toggle again to correct
}
} else {
this.list.toggle(name);
}
return this;
}
// fallback
if ("undefined" !== typeof force) {
if (!force) {
this.remove(name);
} else {
this.add(name);
}
} else {
if (this.has(name)) {
this.remove(name);
} else {
this.add(name);
}
}
return this;
};
/**
* Return an array of classes.
*
* @return {Array}
* @api public
*/
ClassList.prototype.array = function(){
var className = this.el.getAttribute('class') || '';
var str = className.replace(/^\s+|\s+$/g, '');
var arr = str.split(re);
if ('' === arr[0]) arr.shift();
return arr;
};
/**
* Check if class `name` is present.
*
* @param {String} name
* @return {ClassList}
* @api public
*/
ClassList.prototype.has =
ClassList.prototype.contains = function(name){
return this.list
? this.list.contains(name)
: !! ~index(this.array(), name);
};
/***/ },
/* 212 */
/***/ function(module, exports) {
module.exports = function(arr, obj){
if (arr.indexOf) return arr.indexOf(obj);
for (var i = 0; i < arr.length; ++i) {
if (arr[i] === obj) return i;
}
return -1;
};
/***/ },
/* 213 */
/***/ function(module, exports) {
"use strict";
@@ -25494,7 +25793,7 @@
module.exports = exports["default"];
/***/ },
/* 213 */
/* 214 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -25507,7 +25806,7 @@
var _react2 = _interopRequireDefault(_react);
var _LazyRenderBox = __webpack_require__(214);
var _LazyRenderBox = __webpack_require__(215);
var _LazyRenderBox2 = _interopRequireDefault(_LazyRenderBox);
@@ -25540,7 +25839,7 @@
},
_react2["default"].createElement(
_LazyRenderBox2["default"],
{ prefixCls: props.prefixCls, visible: props.visible },
{ className: props.prefixCls + '-content', visible: props.visible },
props.children
)
);
@@ -25551,7 +25850,7 @@
module.exports = exports['default'];
/***/ },
/* 214 */
/* 215 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -25560,6 +25859,8 @@
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _react = __webpack_require__(3);
var _react2 = _interopRequireDefault(_react);
@@ -25571,19 +25872,23 @@
propTypes: {
children: _react.PropTypes.any,
className: _react.PropTypes.string,
visible: _react.PropTypes.bool,
prefixCls: _react.PropTypes.string
hiddenClassName: _react.PropTypes.string
},
shouldComponentUpdate: function shouldComponentUpdate(nextProps) {
return nextProps.visible;
return nextProps.hiddenClassName || nextProps.visible;
},
render: function render() {
if (this.props.hiddenClassName) {
var className = this.props.className;
if (!this.props.visible) {
className += ' ' + this.props.hiddenClassName;
}
return _react2["default"].createElement('div', _extends({}, this.props, { className: className }));
}
if (_react2["default"].Children.count(this.props.children) > 1) {
return _react2["default"].createElement(
'div',
{ className: this.props.prefixCls + '-content' },
this.props.children
);
return _react2["default"].createElement('div', this.props);
}
return _react2["default"].Children.only(this.props.children);
}
@@ -25593,7 +25898,7 @@
module.exports = exports['default'];
/***/ },
/* 215 */
/* 216 */
/***/ function(module, exports) {
'use strict';
@@ -25628,7 +25933,7 @@
}
/***/ },
/* 216 */
/* 217 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -25649,7 +25954,12 @@
var _classnames2 = _interopRequireDefault(_classnames);
var _warning = __webpack_require__(218);
var _warning2 = _interopRequireDefault(_warning);
function calcPoints(vertical, marks, dots, step, min, max) {
(0, _warning2['default'])(dots ? step > 0 : true, '`Slider[step]` should be a positive number in order to make Slider[dots] work.');
var points = Object.keys(marks).map(parseFloat);
if (dots) {
for (var i = min; i <= max; i = i + step) {
@@ -25696,7 +26006,74 @@
module.exports = exports['default'];
/***/ },
/* 217 */
/* 218 */
/***/ function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(process) {/**
* Copyright 2014-2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
'use strict';
/**
* Similar to invariant but only logs a warning if the condition is not met.
* This can be used to log issues in development environments in critical
* paths. Removing the logging code for production environments will keep the
* same logic and follow the same code paths.
*/
var warning = function() {};
if (process.env.NODE_ENV !== 'production') {
warning = function(condition, format, args) {
var len = arguments.length;
args = new Array(len > 2 ? len - 2 : 0);
for (var key = 2; key < len; key++) {
args[key - 2] = arguments[key];
}
if (format === undefined) {
throw new Error(
'`warning(condition, format, ...args)` requires a warning ' +
'message argument'
);
}
if (format.length < 10 || (/^[s\W]*$/).test(format)) {
throw new Error(
'The warning format should be able to uniquely identify this ' +
'warning. Please, use a more descriptive format than: ' + format
);
}
if (!condition) {
var argIndex = 0;
var message = 'Warning: ' +
format.replace(/%s/g, function() {
return args[argIndex++];
});
if (typeof console !== 'undefined') {
console.error(message);
}
try {
// This error was thrown as a convenience so that you can use this stack
// to find the callsite that caused this warning to fire.
throw new Error(message);
} catch(x) {}
}
};
}
module.exports = warning;
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(6)))
/***/ },
/* 219 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
examples/common.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
examples/marks.html
+2 -2
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>marks.js - example - rc-slider@3.6.0</title>
<title>marks.js - example - rc-slider@3.6.2</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"/>
@@ -257,7 +257,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@3.6.0</h1>
<h1>rc-slider@3.6.2</h1>
<p>slider ui component for react</p>
</div>
examples/range.html
+27 -27
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>range.js - example - rc-slider@3.6.0</title>
<title>range.js - example - rc-slider@3.6.2</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"/>
@@ -257,7 +257,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@3.6.0</h1>
<h1>rc-slider@3.6.2</h1>
<p>slider ui component for react</p>
</div>
@@ -273,35 +273,35 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<span class="hljs-keyword">const</span> style = {width: <span class="hljs-number">400</span>, margin: <span class="hljs-number">50</span>};
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span><span class="hljs-params">(value)</span> </span>{
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span>(<span class="hljs-params">value</span>) </span>{
<span class="hljs-built_in">console</span>.log(value);
}
<span class="hljs-keyword">const</span> CustomizedRange = React.createClass({
getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> {
lowerBound: <span class="hljs-number">20</span>,
upperBound: <span class="hljs-number">40</span>,
value: [<span class="hljs-number">20</span>, <span class="hljs-number">40</span>],
};
},
onLowerBoundChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
onLowerBoundChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
<span class="hljs-keyword">this</span>.setState({ lowerBound: +e.target.value });
},
onUpperBoundChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
onUpperBoundChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
<span class="hljs-keyword">this</span>.setState({ upperBound: +e.target.value });
},
onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span> </span>{
onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value</span>) </span>{
log(value);
<span class="hljs-keyword">this</span>.setState({
value: value,
});
},
handleApply: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
handleApply: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">const</span> { lowerBound, upperBound } = <span class="hljs-keyword">this</span>.state;
<span class="hljs-keyword">this</span>.setState({ value: [lowerBound, upperBound]});
},
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>LowerBound: <span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
@@ -314,33 +314,33 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">allowCross</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.value}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
);
)</span>;
},
});
const DynamicBounds = React.createClass({
<span class="hljs-keyword">const</span> DynamicBounds = React.createClass({
getInitialState() {
return {
min: 0,
max: 100,
<span class="hljs-keyword">return</span> {
min: <span class="hljs-number">0</span>,
max: <span class="hljs-number">100</span>,
};
},
onSliderChange: function(value) {
onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value</span>) </span>{
log(value);
},
onMinChange: function(e) {
this.setState({
min: +e.target.value || 0,
onMinChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
<span class="hljs-keyword">this</span>.setState({
min: +e.target.value || <span class="hljs-number">0</span>,
});
},
onMaxChange: function(e) {
this.setState({
max: +e.target.value || 100,
onMaxChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
<span class="hljs-keyword">this</span>.setState({
max: +e.target.value || <span class="hljs-number">100</span>,
});
},
render: function() {
return (
<span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Min: <span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.min}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onMinChange}</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>
@@ -349,19 +349,19 @@ const DynamicBounds = React.createClass({
<span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">50</span>]} <span class="hljs-attribute">min</span>=<span class="hljs-value">{this.state.min}</span> <span class="hljs-attribute">max</span>=<span class="hljs-value">{this.state.max}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
);
)</span>;
},
});
ReactDOM.render(
<span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
<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>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Basic Range，`allowCross=false`<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">allowCross</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[0,</span> <span class="hljs-attribute">20</span>]} <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<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>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Basic Range，`step=20` <span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{20}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">40</span>]} <span class="hljs-attribute">onBeforeChange</span>=<span class="hljs-value">{log}</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{20}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">20</span>]} <span class="hljs-attribute">onBeforeChange</span>=<span class="hljs-value">{log}</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<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>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Basic Range，`step=20, dots` <span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
examples/range.js
+3 -3
View File
@@ -3,12 +3,12 @@ webpackJsonp([1],{
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(218);
module.exports = __webpack_require__(220);
/***/ },
/***/ 218:
/***/ 220:
/***/ function(module, exports, __webpack_require__) {
/* eslint react/no-multi-comp: 0 */
@@ -152,7 +152,7 @@ webpackJsonp([1],{
null,
'Basic Range，`step=20` '
),
React.createElement(Slider, { range: true, step: 20, defaultValue: [20, 40], onBeforeChange: log })
React.createElement(Slider, { range: true, step: 20, defaultValue: [20, 20], onBeforeChange: log })
),
React.createElement(
'div',
examples/range.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
examples/slider.html
+14 -14
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>slider.js - example - rc-slider@3.6.0</title>
<title>slider.js - example - rc-slider@3.6.2</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"/>
@@ -257,7 +257,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@3.6.0</h1>
<h1>rc-slider@3.6.2</h1>
<p>slider ui component for react</p>
</div>
@@ -273,53 +273,53 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<span class="hljs-keyword">const</span> style = {width: <span class="hljs-number">400</span>, margin: <span class="hljs-number">50</span>};
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span><span class="hljs-params">(value)</span> </span>{
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span>(<span class="hljs-params">value</span>) </span>{
<span class="hljs-built_in">console</span>.log(value);
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">percentFormatter</span><span class="hljs-params">(v)</span> </span>{
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">percentFormatter</span>(<span class="hljs-params">v</span>) </span>{
<span class="hljs-keyword">return</span> v + <span class="hljs-string">' %'</span>;
}
<span class="hljs-keyword">const</span> CustomizedSlider = React.createClass({
getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> {
value: <span class="hljs-number">50</span>,
};
},
onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span> </span>{
onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value</span>) </span>{
log(value);
<span class="hljs-keyword">this</span>.setState({
value: value,
});
},
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.value}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span> /&gt;</span>;</span>
},
});
<span class="hljs-keyword">const</span> DynamicBounds = React.createClass({
getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> {
min: <span class="hljs-number">0</span>,
max: <span class="hljs-number">100</span>,
};
},
onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span> </span>{
onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value</span>) </span>{
log(value);
},
onMinChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
onMinChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
<span class="hljs-keyword">this</span>.setState({
min: +e.target.value || <span class="hljs-number">0</span>,
});
},
onMaxChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
onMaxChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
<span class="hljs-keyword">this</span>.setState({
max: +e.target.value || <span class="hljs-number">100</span>,
});
},
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Min: <span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
@@ -330,12 +330,12 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{50}</span> <span class="hljs-attribute">min</span>=<span class="hljs-value">{this.state.min}</span> <span class="hljs-attribute">max</span>=<span class="hljs-value">{this.state.max}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
);
)</span>;
},
});
ReactDOM.render(
<span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
<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>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Basic Slider<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">tipTransitionName</span>=<span class="hljs-value">"rc-slider-tooltip-zoom-down"</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> /&gt;</span>
examples/slider.js
+2 -2
View File
@@ -3,12 +3,12 @@ webpackJsonp([2],{
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(219);
module.exports = __webpack_require__(221);
/***/ },
/***/ 219:
/***/ 221:
/***/ function(module, exports, __webpack_require__) {
/* eslint react/no-multi-comp: 0 */
examples/v-marks.html
+2 -2
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>v-marks.js - example - rc-slider@3.6.0</title>
<title>v-marks.js - example - rc-slider@3.6.2</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"/>
@@ -257,7 +257,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@3.6.0</h1>
<h1>rc-slider@3.6.2</h1>
<p>slider ui component for react</p>
</div>
examples/v-marks.js
+2 -2
View File
@@ -3,12 +3,12 @@ webpackJsonp([3],{
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(220);
module.exports = __webpack_require__(222);
/***/ },
/***/ 220:
/***/ 222:
/***/ function(module, exports, __webpack_require__) {
'use strict';
examples/v-range.html
+26 -26
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>v-range.js - example - rc-slider@3.6.0</title>
<title>v-range.js - example - rc-slider@3.6.2</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"/>
@@ -257,7 +257,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@3.6.0</h1>
<h1>rc-slider@3.6.2</h1>
<p>slider ui component for react</p>
</div>
@@ -274,35 +274,35 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<span class="hljs-keyword">const</span> style = {float: <span class="hljs-string">'left'</span>, width: <span class="hljs-number">180</span>, height: <span class="hljs-number">400</span>, marginBottom: <span class="hljs-number">160</span>, marginLeft: <span class="hljs-number">50</span>};
<span class="hljs-keyword">const</span> parentStyle = {overflow: <span class="hljs-string">'hidden'</span>};
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span><span class="hljs-params">(value)</span> </span>{
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span>(<span class="hljs-params">value</span>) </span>{
<span class="hljs-built_in">console</span>.log(value);
}
<span class="hljs-keyword">const</span> CustomizedRange = React.createClass({
getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> {
lowerBound: <span class="hljs-number">20</span>,
upperBound: <span class="hljs-number">40</span>,
value: [<span class="hljs-number">20</span>, <span class="hljs-number">40</span>],
};
},
onLowerBoundChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
onLowerBoundChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
<span class="hljs-keyword">this</span>.setState({ lowerBound: +e.target.value });
},
onUpperBoundChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
onUpperBoundChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
<span class="hljs-keyword">this</span>.setState({ upperBound: +e.target.value });
},
onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span> </span>{
onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value</span>) </span>{
log(value);
<span class="hljs-keyword">this</span>.setState({
value: value,
});
},
handleApply: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
handleApply: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">const</span> { lowerBound, upperBound } = <span class="hljs-keyword">this</span>.state;
<span class="hljs-keyword">this</span>.setState({ value: [lowerBound, upperBound]});
},
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<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>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">vertical</span> <span class="hljs-attribute">allowCross</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.value}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span> /&gt;</span>
@@ -314,33 +314,33 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">button</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{this.handleApply}</span>&gt;</span>Apply<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
);
)</span>;
},
});
const DynamicBounds = React.createClass({
<span class="hljs-keyword">const</span> DynamicBounds = React.createClass({
getInitialState() {
return {
min: 0,
max: 100,
<span class="hljs-keyword">return</span> {
min: <span class="hljs-number">0</span>,
max: <span class="hljs-number">100</span>,
};
},
onSliderChange: function(value) {
onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value</span>) </span>{
log(value);
},
onMinChange: function(e) {
this.setState({
min: +e.target.value || 0,
onMinChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
<span class="hljs-keyword">this</span>.setState({
min: +e.target.value || <span class="hljs-number">0</span>,
});
},
onMaxChange: function(e) {
this.setState({
max: +e.target.value || 100,
onMaxChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
<span class="hljs-keyword">this</span>.setState({
max: +e.target.value || <span class="hljs-number">100</span>,
});
},
render: function() {
return (
<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>
render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<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>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">vertical</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">50</span>]} <span class="hljs-attribute">min</span>=<span class="hljs-value">{this.state.min}</span> <span class="hljs-attribute">max</span>=<span class="hljs-value">{this.state.max}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Min: <span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.min}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onMinChange}</span> /&gt;</span>
@@ -348,12 +348,12 @@ const DynamicBounds = React.createClass({
<span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Max: <span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.max}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onMaxChange}</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
);
)</span>;
},
});
ReactDOM.render(
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{parentStyle}</span>&gt;</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">{parentStyle}</span>&gt;</span>
<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>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Basic Range，`allowCross=false`<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">vertical</span> <span class="hljs-attribute">allowCross</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[0,</span> <span class="hljs-attribute">20</span>]} <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> /&gt;</span>
examples/v-range.js
+2 -2
View File
@@ -3,12 +3,12 @@ webpackJsonp([4],{
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(221);
module.exports = __webpack_require__(223);
/***/ },
/***/ 221:
/***/ 223:
/***/ function(module, exports, __webpack_require__) {
/* eslint react/no-multi-comp: 0 */
examples/v-slider.html
+14 -14
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>v-slider.js - example - rc-slider@3.6.0</title>
<title>v-slider.js - example - rc-slider@3.6.2</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"/>
@@ -257,7 +257,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@3.6.0</h1>
<h1>rc-slider@3.6.2</h1>
<p>slider ui component for react</p>
</div>
@@ -274,53 +274,53 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<span class="hljs-keyword">const</span> style = {float: <span class="hljs-string">'left'</span>, width: <span class="hljs-number">200</span>, height: <span class="hljs-number">400</span>, marginBottom: <span class="hljs-number">160</span>, marginLeft: <span class="hljs-number">50</span>};
<span class="hljs-keyword">const</span> parentStyle = {overflow: <span class="hljs-string">'hidden'</span>};
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span><span class="hljs-params">(value)</span> </span>{
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span>(<span class="hljs-params">value</span>) </span>{
<span class="hljs-built_in">console</span>.log(value);
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">percentFormatter</span><span class="hljs-params">(v)</span> </span>{
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">percentFormatter</span>(<span class="hljs-params">v</span>) </span>{
<span class="hljs-keyword">return</span> v + <span class="hljs-string">' %'</span>;
}
<span class="hljs-keyword">const</span> CustomizedSlider = React.createClass({
getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> {
value: <span class="hljs-number">50</span>,
};
},
onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span> </span>{
onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value</span>) </span>{
log(value);
<span class="hljs-keyword">this</span>.setState({
value: value,
});
},
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">vertical</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.value}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span> /&gt;</span>;</span>
},
});
<span class="hljs-keyword">const</span> DynamicBounds = React.createClass({
getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> {
min: <span class="hljs-number">0</span>,
max: <span class="hljs-number">100</span>,
};
},
onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span> </span>{
onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value</span>) </span>{
log(value);
},
onMinChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
onMinChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
<span class="hljs-keyword">this</span>.setState({
min: +e.target.value || <span class="hljs-number">0</span>,
});
},
onMaxChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
onMaxChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
<span class="hljs-keyword">this</span>.setState({
max: +e.target.value || <span class="hljs-number">100</span>,
});
},
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<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>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Slider with dynamic `min` `max`<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
@@ -331,12 +331,12 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Max: <span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.max}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onMaxChange}</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
);
)</span>;
},
});
ReactDOM.render(
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{parentStyle}</span>&gt;</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">{parentStyle}</span>&gt;</span>
<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>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Basic Slider<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">vertical</span> <span class="hljs-attribute">tipTransitionName</span>=<span class="hljs-value">"rc-slider-tooltip-zoom-down"</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> /&gt;</span>
examples/v-slider.js
+2 -2
View File
@@ -3,12 +3,12 @@ webpackJsonp([5],{
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(222);
module.exports = __webpack_require__(224);
/***/ },
/***/ 222:
/***/ 224:
/***/ function(module, exports, __webpack_require__) {
/* eslint react/no-multi-comp: 0 */
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@3.6.0 - slider ui component for react</title>
<title>rc-slider@3.6.2 - slider ui component for react</title>
<style>
@font-face {
font-family: octicons-anchor;
@@ -737,7 +737,7 @@
<body>
<div class="header">
<h1>rc-slider@3.6.0</h1>
<h1>rc-slider@3.6.2</h1>
</div>
<div class="examples">
<h3>EXAMPLES</h3>