25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.
 
 
 
 

412 satır
14 KiB

  1. import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
  2. import _extends from 'babel-runtime/helpers/extends';
  3. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  4. import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
  5. import _createClass from 'babel-runtime/helpers/createClass';
  6. import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
  7. import _get from 'babel-runtime/helpers/get';
  8. import _inherits from 'babel-runtime/helpers/inherits';
  9. import React from 'react';
  10. import PropTypes from 'prop-types';
  11. import addEventListener from 'rc-util/es/Dom/addEventListener';
  12. import classNames from 'classnames';
  13. import warning from 'warning';
  14. import Steps from './Steps';
  15. import Marks from './Marks';
  16. import Handle from '../Handle';
  17. import * as utils from '../utils';
  18. function noop() {}
  19. export default function createSlider(Component) {
  20. var _class, _temp;
  21. return _temp = _class = function (_Component) {
  22. _inherits(ComponentEnhancer, _Component);
  23. function ComponentEnhancer(props) {
  24. _classCallCheck(this, ComponentEnhancer);
  25. var _this = _possibleConstructorReturn(this, (ComponentEnhancer.__proto__ || Object.getPrototypeOf(ComponentEnhancer)).call(this, props));
  26. _this.onMouseDown = function (e) {
  27. if (e.button !== 0) {
  28. return;
  29. }
  30. var isVertical = _this.props.vertical;
  31. var position = utils.getMousePosition(isVertical, e);
  32. if (!utils.isEventFromHandle(e, _this.handlesRefs)) {
  33. _this.dragOffset = 0;
  34. } else {
  35. var handlePosition = utils.getHandleCenterPosition(isVertical, e.target);
  36. _this.dragOffset = position - handlePosition;
  37. position = handlePosition;
  38. }
  39. _this.removeDocumentEvents();
  40. _this.onStart(position);
  41. _this.addDocumentMouseEvents();
  42. };
  43. _this.onTouchStart = function (e) {
  44. if (utils.isNotTouchEvent(e)) return;
  45. var isVertical = _this.props.vertical;
  46. var position = utils.getTouchPosition(isVertical, e);
  47. if (!utils.isEventFromHandle(e, _this.handlesRefs)) {
  48. _this.dragOffset = 0;
  49. } else {
  50. var handlePosition = utils.getHandleCenterPosition(isVertical, e.target);
  51. _this.dragOffset = position - handlePosition;
  52. position = handlePosition;
  53. }
  54. _this.onStart(position);
  55. _this.addDocumentTouchEvents();
  56. utils.pauseEvent(e);
  57. };
  58. _this.onFocus = function (e) {
  59. var _this$props = _this.props,
  60. onFocus = _this$props.onFocus,
  61. vertical = _this$props.vertical;
  62. if (utils.isEventFromHandle(e, _this.handlesRefs)) {
  63. var handlePosition = utils.getHandleCenterPosition(vertical, e.target);
  64. _this.dragOffset = 0;
  65. _this.onStart(handlePosition);
  66. utils.pauseEvent(e);
  67. if (onFocus) {
  68. onFocus(e);
  69. }
  70. }
  71. };
  72. _this.onBlur = function (e) {
  73. var onBlur = _this.props.onBlur;
  74. _this.onEnd();
  75. if (onBlur) {
  76. onBlur(e);
  77. }
  78. };
  79. _this.onMouseUp = function () {
  80. if (_this.handlesRefs[_this.prevMovedHandleIndex]) {
  81. _this.handlesRefs[_this.prevMovedHandleIndex].clickFocus();
  82. }
  83. };
  84. _this.onMouseMove = function (e) {
  85. if (!_this.sliderRef) {
  86. _this.onEnd();
  87. return;
  88. }
  89. var position = utils.getMousePosition(_this.props.vertical, e);
  90. _this.onMove(e, position - _this.dragOffset);
  91. };
  92. _this.onTouchMove = function (e) {
  93. if (utils.isNotTouchEvent(e) || !_this.sliderRef) {
  94. _this.onEnd();
  95. return;
  96. }
  97. var position = utils.getTouchPosition(_this.props.vertical, e);
  98. _this.onMove(e, position - _this.dragOffset);
  99. };
  100. _this.onKeyDown = function (e) {
  101. if (_this.sliderRef && utils.isEventFromHandle(e, _this.handlesRefs)) {
  102. _this.onKeyboard(e);
  103. }
  104. };
  105. _this.onClickMarkLabel = function (e, value) {
  106. e.stopPropagation();
  107. _this.onChange({ value: value });
  108. _this.setState({ value: value }, function () {
  109. return _this.onEnd(true);
  110. });
  111. };
  112. _this.saveSlider = function (slider) {
  113. _this.sliderRef = slider;
  114. };
  115. var step = props.step,
  116. max = props.max,
  117. min = props.min;
  118. var isPointDiffEven = isFinite(max - min) ? (max - min) % step === 0 : true; // eslint-disable-line
  119. warning(step && Math.floor(step) === step ? isPointDiffEven : true, 'Slider[max] - Slider[min] (%s) should be a multiple of Slider[step] (%s)', max - min, step);
  120. _this.handlesRefs = {};
  121. return _this;
  122. }
  123. _createClass(ComponentEnhancer, [{
  124. key: 'componentDidMount',
  125. value: function componentDidMount() {
  126. // Snapshot testing cannot handle refs, so be sure to null-check this.
  127. this.document = this.sliderRef && this.sliderRef.ownerDocument;
  128. var _props = this.props,
  129. autoFocus = _props.autoFocus,
  130. disabled = _props.disabled;
  131. if (autoFocus && !disabled) {
  132. this.focus();
  133. }
  134. }
  135. }, {
  136. key: 'componentWillUnmount',
  137. value: function componentWillUnmount() {
  138. if (_get(ComponentEnhancer.prototype.__proto__ || Object.getPrototypeOf(ComponentEnhancer.prototype), 'componentWillUnmount', this)) _get(ComponentEnhancer.prototype.__proto__ || Object.getPrototypeOf(ComponentEnhancer.prototype), 'componentWillUnmount', this).call(this);
  139. this.removeDocumentEvents();
  140. }
  141. }, {
  142. key: 'getSliderStart',
  143. value: function getSliderStart() {
  144. var slider = this.sliderRef;
  145. var _props2 = this.props,
  146. vertical = _props2.vertical,
  147. reverse = _props2.reverse;
  148. var rect = slider.getBoundingClientRect();
  149. if (vertical) {
  150. return reverse ? rect.bottom : rect.top;
  151. }
  152. return window.pageXOffset + (reverse ? rect.right : rect.left);
  153. }
  154. }, {
  155. key: 'getSliderLength',
  156. value: function getSliderLength() {
  157. var slider = this.sliderRef;
  158. if (!slider) {
  159. return 0;
  160. }
  161. var coords = slider.getBoundingClientRect();
  162. return this.props.vertical ? coords.height : coords.width;
  163. }
  164. }, {
  165. key: 'addDocumentTouchEvents',
  166. value: function addDocumentTouchEvents() {
  167. // just work for Chrome iOS Safari and Android Browser
  168. this.onTouchMoveListener = addEventListener(this.document, 'touchmove', this.onTouchMove);
  169. this.onTouchUpListener = addEventListener(this.document, 'touchend', this.onEnd);
  170. }
  171. }, {
  172. key: 'addDocumentMouseEvents',
  173. value: function addDocumentMouseEvents() {
  174. this.onMouseMoveListener = addEventListener(this.document, 'mousemove', this.onMouseMove);
  175. this.onMouseUpListener = addEventListener(this.document, 'mouseup', this.onEnd);
  176. }
  177. }, {
  178. key: 'removeDocumentEvents',
  179. value: function removeDocumentEvents() {
  180. /* eslint-disable no-unused-expressions */
  181. this.onTouchMoveListener && this.onTouchMoveListener.remove();
  182. this.onTouchUpListener && this.onTouchUpListener.remove();
  183. this.onMouseMoveListener && this.onMouseMoveListener.remove();
  184. this.onMouseUpListener && this.onMouseUpListener.remove();
  185. /* eslint-enable no-unused-expressions */
  186. }
  187. }, {
  188. key: 'focus',
  189. value: function focus() {
  190. if (!this.props.disabled) {
  191. this.handlesRefs[0].focus();
  192. }
  193. }
  194. }, {
  195. key: 'blur',
  196. value: function blur() {
  197. var _this2 = this;
  198. if (!this.props.disabled) {
  199. Object.keys(this.handlesRefs).forEach(function (key) {
  200. if (_this2.handlesRefs[key] && _this2.handlesRefs[key].blur) {
  201. _this2.handlesRefs[key].blur();
  202. }
  203. });
  204. }
  205. }
  206. }, {
  207. key: 'calcValue',
  208. value: function calcValue(offset) {
  209. var _props3 = this.props,
  210. vertical = _props3.vertical,
  211. min = _props3.min,
  212. max = _props3.max;
  213. var ratio = Math.abs(Math.max(offset, 0) / this.getSliderLength());
  214. var value = vertical ? (1 - ratio) * (max - min) + min : ratio * (max - min) + min;
  215. return value;
  216. }
  217. }, {
  218. key: 'calcValueByPos',
  219. value: function calcValueByPos(position) {
  220. var sign = this.props.reverse ? -1 : +1;
  221. var pixelOffset = sign * (position - this.getSliderStart());
  222. var nextValue = this.trimAlignValue(this.calcValue(pixelOffset));
  223. return nextValue;
  224. }
  225. }, {
  226. key: 'calcOffset',
  227. value: function calcOffset(value) {
  228. var _props4 = this.props,
  229. min = _props4.min,
  230. max = _props4.max;
  231. var ratio = (value - min) / (max - min);
  232. return ratio * 100;
  233. }
  234. }, {
  235. key: 'saveHandle',
  236. value: function saveHandle(index, handle) {
  237. this.handlesRefs[index] = handle;
  238. }
  239. }, {
  240. key: 'render',
  241. value: function render() {
  242. var _classNames;
  243. var _props5 = this.props,
  244. prefixCls = _props5.prefixCls,
  245. className = _props5.className,
  246. marks = _props5.marks,
  247. dots = _props5.dots,
  248. step = _props5.step,
  249. included = _props5.included,
  250. disabled = _props5.disabled,
  251. vertical = _props5.vertical,
  252. reverse = _props5.reverse,
  253. min = _props5.min,
  254. max = _props5.max,
  255. children = _props5.children,
  256. maximumTrackStyle = _props5.maximumTrackStyle,
  257. style = _props5.style,
  258. railStyle = _props5.railStyle,
  259. dotStyle = _props5.dotStyle,
  260. activeDotStyle = _props5.activeDotStyle;
  261. var _get$call = _get(ComponentEnhancer.prototype.__proto__ || Object.getPrototypeOf(ComponentEnhancer.prototype), 'render', this).call(this),
  262. tracks = _get$call.tracks,
  263. handles = _get$call.handles;
  264. var sliderClassName = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, prefixCls + '-with-marks', Object.keys(marks).length), _defineProperty(_classNames, prefixCls + '-disabled', disabled), _defineProperty(_classNames, prefixCls + '-vertical', vertical), _defineProperty(_classNames, className, className), _classNames));
  265. return React.createElement(
  266. 'div',
  267. {
  268. ref: this.saveSlider,
  269. className: sliderClassName,
  270. onTouchStart: disabled ? noop : this.onTouchStart,
  271. onMouseDown: disabled ? noop : this.onMouseDown,
  272. onMouseUp: disabled ? noop : this.onMouseUp,
  273. onKeyDown: disabled ? noop : this.onKeyDown,
  274. onFocus: disabled ? noop : this.onFocus,
  275. onBlur: disabled ? noop : this.onBlur,
  276. style: style
  277. },
  278. React.createElement('div', {
  279. className: prefixCls + '-rail',
  280. style: _extends({}, maximumTrackStyle, railStyle)
  281. }),
  282. tracks,
  283. React.createElement(Steps, {
  284. prefixCls: prefixCls,
  285. vertical: vertical,
  286. reverse: reverse,
  287. marks: marks,
  288. dots: dots,
  289. step: step,
  290. included: included,
  291. lowerBound: this.getLowerBound(),
  292. upperBound: this.getUpperBound(),
  293. max: max,
  294. min: min,
  295. dotStyle: dotStyle,
  296. activeDotStyle: activeDotStyle
  297. }),
  298. handles,
  299. React.createElement(Marks, {
  300. className: prefixCls + '-mark',
  301. onClickLabel: disabled ? noop : this.onClickMarkLabel,
  302. vertical: vertical,
  303. marks: marks,
  304. included: included,
  305. lowerBound: this.getLowerBound(),
  306. upperBound: this.getUpperBound(),
  307. max: max,
  308. min: min,
  309. reverse: reverse
  310. }),
  311. children
  312. );
  313. }
  314. }]);
  315. return ComponentEnhancer;
  316. }(Component), _class.displayName = 'ComponentEnhancer(' + Component.displayName + ')', _class.propTypes = _extends({}, Component.propTypes, {
  317. min: PropTypes.number,
  318. max: PropTypes.number,
  319. step: PropTypes.number,
  320. marks: PropTypes.object,
  321. included: PropTypes.bool,
  322. className: PropTypes.string,
  323. prefixCls: PropTypes.string,
  324. disabled: PropTypes.bool,
  325. children: PropTypes.any,
  326. onBeforeChange: PropTypes.func,
  327. onChange: PropTypes.func,
  328. onAfterChange: PropTypes.func,
  329. handle: PropTypes.func,
  330. dots: PropTypes.bool,
  331. vertical: PropTypes.bool,
  332. style: PropTypes.object,
  333. reverse: PropTypes.bool,
  334. minimumTrackStyle: PropTypes.object, // just for compatibility, will be deperecate
  335. maximumTrackStyle: PropTypes.object, // just for compatibility, will be deperecate
  336. handleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
  337. trackStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
  338. railStyle: PropTypes.object,
  339. dotStyle: PropTypes.object,
  340. activeDotStyle: PropTypes.object,
  341. autoFocus: PropTypes.bool,
  342. onFocus: PropTypes.func,
  343. onBlur: PropTypes.func
  344. }), _class.defaultProps = _extends({}, Component.defaultProps, {
  345. prefixCls: 'rc-slider',
  346. className: '',
  347. min: 0,
  348. max: 100,
  349. step: 1,
  350. marks: {},
  351. handle: function handle(_ref) {
  352. var index = _ref.index,
  353. restProps = _objectWithoutProperties(_ref, ['index']);
  354. delete restProps.dragging;
  355. if (restProps.value === null) {
  356. return null;
  357. }
  358. return React.createElement(Handle, _extends({}, restProps, { key: index }));
  359. },
  360. onBeforeChange: noop,
  361. onChange: noop,
  362. onAfterChange: noop,
  363. included: true,
  364. disabled: false,
  365. dots: false,
  366. vertical: false,
  367. reverse: false,
  368. trackStyle: [{}],
  369. handleStyle: [{}],
  370. railStyle: {},
  371. dotStyle: {},
  372. activeDotStyle: {}
  373. }), _temp;
  374. }