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

Updates

Browse Source
This commit is contained in:
yiminghe
2016-01-30 18:53:06 +08:00
parent 5c5324e224
commit bd68f5e3da
6 changed files with 317 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/common.js
+285 -105
View File
@@ -1114,7 +1114,7 @@
* will remain to ensure logic does not differ in production.
*/
var invariant = function (condition, format, a, b, c, d, e, f) {
function invariant(condition, format, a, b, c, d, e, f) {
if (process.env.NODE_ENV !== 'production') {
if (format === undefined) {
throw new Error('invariant requires an error message argument');
@@ -1128,15 +1128,16 @@
} else {
var args = [a, b, c, d, e, f];
var argIndex = 0;
error = new Error('Invariant Violation: ' + format.replace(/%s/g, function () {
error = new Error(format.replace(/%s/g, function () {
return args[argIndex++];
}));
error.name = 'Invariant Violation';
}
error.framesToPop = 1; // we don't care about invariant's own frame
throw error;
}
};
}
module.exports = invariant;
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(6)))
@@ -9355,6 +9356,7 @@
*/
var EventInterface = {
type: null,
target: null,
// currentTarget is set when dispatching; no use in copying it here
currentTarget: emptyFunction.thatReturnsNull,
eventPhase: null,
@@ -9388,8 +9390,6 @@
this.dispatchConfig = dispatchConfig;
this.dispatchMarker = dispatchMarker;
this.nativeEvent = nativeEvent;
this.target = nativeEventTarget;
this.currentTarget = nativeEventTarget;
var Interface = this.constructor.Interface;
for (var propName in Interface) {
@@ -9400,7 +9400,11 @@
if (normalize) {
this[propName] = normalize(nativeEvent);
} else {
this[propName] = nativeEvent[propName];
if (propName === 'target') {
this.target = nativeEventTarget;
} else {
this[propName] = nativeEvent[propName];
}
}
}
@@ -10563,8 +10567,8 @@
*/
// autoCapitalize and autoCorrect are supported in Mobile Safari for
// keyboard hints.
autoCapitalize: null,
autoCorrect: null,
autoCapitalize: MUST_USE_ATTRIBUTE,
autoCorrect: MUST_USE_ATTRIBUTE,
// autoSave allows WebKit/Blink to persist values of input fields on page reloads
autoSave: null,
// color is for Safari mask-icon link
@@ -10595,9 +10599,7 @@
httpEquiv: 'http-equiv'
},
DOMPropertyNames: {
autoCapitalize: 'autocapitalize',
autoComplete: 'autocomplete',
autoCorrect: 'autocorrect',
autoFocus: 'autofocus',
autoPlay: 'autoplay',
autoSave: 'autosave',
@@ -13251,7 +13253,10 @@
}
});
nativeProps.children = content;
if (content) {
nativeProps.children = content;
}
return nativeProps;
}
@@ -13676,7 +13681,7 @@
var value = LinkedValueUtils.getValue(props);
if (value != null) {
updateOptions(this, props, value);
updateOptions(this, Boolean(props.multiple), value);
}
}
}
@@ -16711,11 +16716,14 @@
* @typechecks
*/
/* eslint-disable fb-www/typeof-undefined */
/**
* Same as document.activeElement but wraps in a try-catch block. In IE it is
* not safe to call document.activeElement if there is nothing focused.
*
* The activeElement will be null only if the document or document body is not yet defined.
* The activeElement will be null only if the document or document body is not
* yet defined.
*/
'use strict';
@@ -16723,7 +16731,6 @@
if (typeof document === 'undefined') {
return null;
}
try {
return document.activeElement || document.body;
} catch (e) {
@@ -18463,7 +18470,9 @@
'setValueForProperty': 'update attribute',
'setValueForAttribute': 'update attribute',
'deleteValueForProperty': 'remove attribute',
'dangerouslyReplaceNodeWithMarkupByID': 'replace'
'setValueForStyles': 'update styles',
'replaceNodeWithMarkup': 'replace',
'updateTextContent': 'set textContent'
};
function getTotalTime(measurements) {
@@ -18655,19 +18664,24 @@
'use strict';
var performance = __webpack_require__(147);
var curPerformance = performance;
var performanceNow;
/**
* Detect if we can use `window.performance.now()` and gracefully fallback to
* `Date.now()` if it doesn't exist. We need to support Firefox < 15 for now
* because of Facebook's testing infrastructure.
*/
if (!curPerformance || !curPerformance.now) {
curPerformance = Date;
if (performance.now) {
performanceNow = function () {
return performance.now();
};
} else {
performanceNow = function () {
return Date.now();
};
}
var performanceNow = curPerformance.now.bind(curPerformance);
module.exports = performanceNow;
/***/ },
@@ -18715,7 +18729,7 @@
'use strict';
module.exports = '0.14.3';
module.exports = '0.14.7';
/***/ },
/* 149 */
@@ -19787,7 +19801,7 @@
var initialValue = range ? [min, min] : min;
var defaultValue = 'defaultValue' in props ? props.defaultValue : initialValue;
var value = 'value' in props ? props.value : defaultValue;
var value = props.value !== undefined ? props.value : defaultValue;
var upperBound = undefined;
var lowerBound = undefined;
@@ -19842,7 +19856,7 @@
this.props.onChange([nextLowerBound, nextUpperBound]);
}
} else {
var value = 'value' in nextProps ? nextProps.value : upperBound;
var value = nextProps.value !== undefined ? nextProps.value : upperBound;
var nextValue = this.trimAlignValue(value, nextProps);
if (nextValue === upperBound && lowerBound === nextProps.min) return;
@@ -20359,7 +20373,7 @@
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
Copyright (c) 2015 Jed Watson.
Copyright (c) 2016 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
@@ -20371,7 +20385,7 @@
var hasOwn = {}.hasOwnProperty;
function classNames () {
var classes = '';
var classes = [];
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
@@ -20380,19 +20394,19 @@
var argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes += ' ' + arg;
classes.push(arg);
} else if (Array.isArray(arg)) {
classes += ' ' + classNames.apply(null, arg);
classes.push(classNames.apply(null, arg));
} else if (argType === 'object') {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes += ' ' + key;
classes.push(key);
}
}
}
}
return classes.substr(1);
return classes.join(' ');
}
if (typeof module !== 'undefined' && module.exports) {
@@ -21436,40 +21450,37 @@
/* 176 */
/***/ function(module, exports) {
/**
* lodash 3.0.4 (Custom Build) <https://lodash.com/>
* Build: `lodash modern modularize exports="npm" -o ./`
* Copyright 2012-2015 The Dojo Foundation <http://dojofoundation.org/>
/* WEBPACK VAR INJECTION */(function(global) {/**
* lodash 3.0.5 (Custom Build) <https://lodash.com/>
* Build: `lodash modularize exports="npm" -o ./`
* Copyright 2012-2016 The Dojo Foundation <http://dojofoundation.org/>
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
* Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
* Copyright 2009-2016 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
* Available under MIT license <https://lodash.com/license>
*/
/**
* Checks if `value` is object-like.
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is object-like, else `false`.
*/
function isObjectLike(value) {
return !!value && typeof value == 'object';
}
/** Used as references for various `Number` constants. */
var MAX_SAFE_INTEGER = 9007199254740991;
/** Used for native method references. */
var objectProto = Object.prototype;
/** `Object#toString` result references. */
var argsTag = '[object Arguments]',
funcTag = '[object Function]',
genTag = '[object GeneratorFunction]';
/** Used for built-in method references. */
var objectProto = global.Object.prototype;
/** Used to check objects for own properties. */
var hasOwnProperty = objectProto.hasOwnProperty;
/** Native method references. */
var propertyIsEnumerable = objectProto.propertyIsEnumerable;
/**
* Used as the [maximum length](http://ecma-international.org/ecma-262/6.0/#sec-number.max_safe_integer)
* of an array-like value.
* Used to resolve the [`toStringTag`](http://ecma-international.org/ecma-262/6.0/#sec-object.prototype.tostring)
* of values.
*/
var MAX_SAFE_INTEGER = 9007199254740991;
var objectToString = objectProto.toString;
/** Built-in value references. */
var propertyIsEnumerable = objectProto.propertyIsEnumerable;
/**
* The base implementation of `_.property` without support for deep paths.
@@ -21497,31 +21508,7 @@
var getLength = baseProperty('length');
/**
* Checks if `value` is array-like.
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is array-like, else `false`.
*/
function isArrayLike(value) {
return value != null && isLength(getLength(value));
}
/**
* Checks if `value` is a valid array-like length.
*
* **Note:** This function is based on [`ToLength`](http://ecma-international.org/ecma-262/6.0/#sec-tolength).
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a valid length, else `false`.
*/
function isLength(value) {
return typeof value == 'number' && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
}
/**
* Checks if `value` is classified as an `arguments` object.
* Checks if `value` is likely an `arguments` object.
*
* @static
* @memberOf _
@@ -21537,12 +21524,181 @@
* // => false
*/
function isArguments(value) {
return isObjectLike(value) && isArrayLike(value) &&
hasOwnProperty.call(value, 'callee') && !propertyIsEnumerable.call(value, 'callee');
// Safari 8.1 incorrectly makes `arguments.callee` enumerable in strict mode.
return isArrayLikeObject(value) && hasOwnProperty.call(value, 'callee') &&
(!propertyIsEnumerable.call(value, 'callee') || objectToString.call(value) == argsTag);
}
/**
* Checks if `value` is array-like. A value is considered array-like if it's
* not a function and has a `value.length` that's an integer greater than or
* equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.
*
* @static
* @memberOf _
* @type Function
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is array-like, else `false`.
* @example
*
* _.isArrayLike([1, 2, 3]);
* // => true
*
* _.isArrayLike(document.body.children);
* // => true
*
* _.isArrayLike('abc');
* // => true
*
* _.isArrayLike(_.noop);
* // => false
*/
function isArrayLike(value) {
return value != null &&
!(typeof value == 'function' && isFunction(value)) && isLength(getLength(value));
}
/**
* This method is like `_.isArrayLike` except that it also checks if `value`
* is an object.
*
* @static
* @memberOf _
* @type Function
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is an array-like object, else `false`.
* @example
*
* _.isArrayLikeObject([1, 2, 3]);
* // => true
*
* _.isArrayLikeObject(document.body.children);
* // => true
*
* _.isArrayLikeObject('abc');
* // => false
*
* _.isArrayLikeObject(_.noop);
* // => false
*/
function isArrayLikeObject(value) {
return isObjectLike(value) && isArrayLike(value);
}
/**
* Checks if `value` is classified as a `Function` object.
*
* @static
* @memberOf _
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is correctly classified, else `false`.
* @example
*
* _.isFunction(_);
* // => true
*
* _.isFunction(/abc/);
* // => false
*/
function isFunction(value) {
// The use of `Object#toString` avoids issues with the `typeof` operator
// in Safari 8 which returns 'object' for typed array constructors, and
// PhantomJS 1.9 which returns 'function' for `NodeList` instances.
var tag = isObject(value) ? objectToString.call(value) : '';
return tag == funcTag || tag == genTag;
}
/**
* Checks if `value` is a valid array-like length.
*
* **Note:** This function is loosely based on [`ToLength`](http://ecma-international.org/ecma-262/6.0/#sec-tolength).
*
* @static
* @memberOf _
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a valid length, else `false`.
* @example
*
* _.isLength(3);
* // => true
*
* _.isLength(Number.MIN_VALUE);
* // => false
*
* _.isLength(Infinity);
* // => false
*
* _.isLength('3');
* // => false
*/
function isLength(value) {
return typeof value == 'number' && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
}
/**
* Checks if `value` is the [language type](https://es5.github.io/#x8) of `Object`.
* (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
*
* @static
* @memberOf _
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is an object, else `false`.
* @example
*
* _.isObject({});
* // => true
*
* _.isObject([1, 2, 3]);
* // => true
*
* _.isObject(_.noop);
* // => true
*
* _.isObject(null);
* // => false
*/
function isObject(value) {
// Avoid a V8 JIT bug in Chrome 19-20.
// See https://code.google.com/p/v8/issues/detail?id=2291 for more details.
var type = typeof value;
return !!value && (type == 'object' || type == 'function');
}
/**
* Checks if `value` is object-like. A value is object-like if it's not `null`
* and has a `typeof` result of "object".
*
* @static
* @memberOf _
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is object-like, else `false`.
* @example
*
* _.isObjectLike({});
* // => true
*
* _.isObjectLike([1, 2, 3]);
* // => true
*
* _.isObjectLike(_.noop);
* // => false
*
* _.isObjectLike(null);
* // => false
*/
function isObjectLike(value) {
return !!value && typeof value == 'object';
}
module.exports = isArguments;
/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
/***/ },
/* 177 */
@@ -22444,6 +22600,8 @@
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var _react = __webpack_require__(3);
var _react2 = _interopRequireDefault(_react);
@@ -22534,7 +22692,9 @@
var defaultVisible = _props2.defaultVisible;
var getTooltipContainer = _props2.getTooltipContainer;
var extraProps = {};
var restProps = _objectWithoutProperties(_props2, ['overlayClassName', 'trigger', 'mouseEnterDelay', 'mouseLeaveDelay', 'overlayStyle', 'prefixCls', 'children', 'onVisibleChange', 'transitionName', 'animation', 'placement', 'align', 'destroyTooltipOnHide', 'defaultVisible', 'getTooltipContainer']);
var extraProps = _extends({}, restProps);
if ('visible' in this.props) {
extraProps.popupVisible = this.props.visible;
}
@@ -22704,6 +22864,8 @@
return '';
}
var ALL_HANDLERS = ['onClick', 'onMouseDown', 'onTouchStart', 'onMouseEnter', 'onMouseLeave', 'onFocus', 'onBlur'];
var Trigger = _react2['default'].createClass({
displayName: 'Trigger',
@@ -22779,7 +22941,7 @@
var self = _this;
_reactDom2['default'].unstable_renderSubtreeIntoContainer(_this, _this.getPopupElement(), _this.getPopupContainer(), function renderPopup() {
if (this.isMounted()) {
self.popupDomNode = _reactDom2['default'].findDOMNode(this);
self.popupDomNode = (0, _reactDom.findDOMNode)(this);
} else {
self.popupDomNode = null;
}
@@ -22815,7 +22977,7 @@
if (popupContainer) {
_reactDom2['default'].unmountComponentAtNode(popupContainer);
if (this.props.getPopupContainer) {
var mountNode = this.props.getPopupContainer();
var mountNode = this.props.getPopupContainer((0, _reactDom.findDOMNode)(this));
mountNode.removeChild(popupContainer);
} else {
document.body.removeChild(popupContainer);
@@ -22883,7 +23045,7 @@
onDocumentClick: function onDocumentClick(event) {
var target = event.target;
var root = _reactDom2['default'].findDOMNode(this);
var root = (0, _reactDom.findDOMNode)(this);
var popupNode = this.getPopupDomNode();
if (!_rcUtil.Dom.contains(root, target) && !_rcUtil.Dom.contains(popupNode, target)) {
this.setPopupVisible(false);
@@ -22899,7 +23061,7 @@
if (!this.popupContainer) {
this.popupContainer = document.createElement('div');
if (this.props.getPopupContainer) {
var mountNode = this.props.getPopupContainer();
var mountNode = this.props.getPopupContainer((0, _reactDom.findDOMNode)(this));
mountNode.appendChild(this.popupContainer);
} else {
document.body.appendChild(this.popupContainer);
@@ -23013,6 +23175,18 @@
newChildProps.onBlur = (0, _rcUtil.createChainedFunction)(this.onBlur, childProps.onBlur);
}
ALL_HANDLERS.forEach(function (handler) {
var newFn = undefined;
if (props[handler] && newChildProps[handler]) {
newFn = (0, _rcUtil.createChainedFunction)(props[handler], newChildProps[handler]);
} else {
newFn = props[handler] || newChildProps[handler];
}
if (newFn) {
newChildProps[handler] = newFn;
}
});
return _react2['default'].cloneElement(child, newChildProps);
}
});
@@ -24515,13 +24689,19 @@
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
var _this2 = this;
this.nextProps = nextProps;
var nextChildren = (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(nextProps));
var props = this.props;
// exclusive needs immediate response
if (props.exclusive) {
Object.keys(this.currentlyAnimatingKeys).forEach(function (key) {
_this2.stop(key);
});
}
var showProp = props.showProp;
var currentlyAnimatingKeys = this.currentlyAnimatingKeys;
// last props children if exclusive
// exclusive needs immediate response
var currentChildren = this.state.children;
var currentChildren = props.exclusive ? (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(props)) : this.state.children;
// in case destroy in showProp mode
var newChildren = [];
if (showProp) {
@@ -24594,15 +24774,7 @@
});
},
componentDidUpdate: function componentDidUpdate(prevProps) {
var _this3 = this;
// exclusive needs immediate response
if (this.props.exclusive && this.props !== prevProps) {
Object.keys(this.currentlyAnimatingKeys).forEach(function (key) {
_this3.stop(key);
});
}
componentDidUpdate: function componentDidUpdate() {
if (this.isMounted()) {
var keysToEnter = this.keysToEnter;
this.keysToEnter = [];
@@ -24631,6 +24803,10 @@
handleDoneAdding: function handleDoneAdding(key, type) {
var props = this.props;
delete this.currentlyAnimatingKeys[key];
// if update on exclusive mode, skip check
if (props.exclusive && props !== this.nextProps) {
return;
}
var currentChildren = (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(props));
if (!this.isValidChildByKey(currentChildren, key)) {
// exclusive will not need this
@@ -24661,6 +24837,10 @@
handleDoneLeaving: function handleDoneLeaving(key) {
var props = this.props;
delete this.currentlyAnimatingKeys[key];
// if update on exclusive mode, skip check
if (props.exclusive && props !== this.nextProps) {
return;
}
var currentChildren = (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(props));
// in case state change is too fast
if (this.isValidChildByKey(currentChildren, key)) {
@@ -24696,10 +24876,14 @@
render: function render() {
var props = this.props;
this.nextProps = props;
var stateChildren = this.state.children;
var children = null;
if (stateChildren) {
children = stateChildren.map(function (child) {
if (child === null) {
return child;
}
if (!child.key) {
throw new Error('must set key for <rc-animate> children');
}
@@ -25311,29 +25495,25 @@
/***/ },
/* 215 */
/***/ function(module, exports, __webpack_require__) {
/***/ function(module, exports) {
'use strict';
Object.defineProperty(exports, '__esModule', {
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; };
exports.getAlignFromPlacement = getAlignFromPlacement;
exports.getPopupClassNameFromAlign = getPopupClassNameFromAlign;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _objectAssign = __webpack_require__(183);
var _objectAssign2 = _interopRequireDefault(_objectAssign);
function isPointsEq(a1, a2) {
return a1[0] === a2[0] && a1[1] === a2[1];
}
function getAlignFromPlacement(builtinPlacements, placementStr, align) {
var baseAlign = builtinPlacements[placementStr] || {};
return (0, _objectAssign2['default'])({}, baseAlign, align);
return _extends({}, baseAlign, align);
}
function getPopupClassNameFromAlign(builtinPlacements, prefixCls, align) {
examples/common.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
examples/marks.html
+3 -3
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>marks.js - example - rc-slider@3.3.1</title>
<title>marks.js - example - rc-slider@3.3.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.3.1</h1>
<h1>rc-slider@3.3.2</h1>
<p>slider ui component for react</p>
</div>
@@ -280,7 +280,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<span class="hljs-number">100</span>: <span class="hljs-string">'100°C'</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);
}
examples/range.html
+12 -12
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>range.js - example - rc-slider@3.3.1</title>
<title>range.js - example - rc-slider@3.3.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.3.1</h1>
<h1>rc-slider@3.3.2</h1>
<p>slider ui component for react</p>
</div>
@@ -273,23 +273,23 @@ 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> {
value: [<span class="hljs-number">20</span>, <span class="hljs-number">40</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">range</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>
},
});
@@ -301,20 +301,20 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
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>
@@ -325,12 +325,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">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>
examples/slider.html
+14 -14
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>slider.js - example - rc-slider@3.3.1</title>
<title>slider.js - example - rc-slider@3.3.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.3.1</h1>
<h1>rc-slider@3.3.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>
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.3.1 - slider ui component for react</title>
<title>rc-slider@3.3.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.3.1</h1>
<h1>rc-slider@3.3.2</h1>
</div>
<div class="examples">
<h3>EXAMPLES</h3>