Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

Steps.js 2.5 KiB

3 år sedan
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  2. import _extends from 'babel-runtime/helpers/extends';
  3. import React from 'react';
  4. import PropTypes from 'prop-types';
  5. import classNames from 'classnames';
  6. import warning from 'warning';
  7. var calcPoints = function calcPoints(vertical, marks, dots, step, min, max) {
  8. warning(dots ? step > 0 : true, '`Slider[step]` should be a positive number in order to make Slider[dots] work.');
  9. var points = Object.keys(marks).map(parseFloat).sort(function (a, b) {
  10. return a - b;
  11. });
  12. if (dots && step) {
  13. for (var i = min; i <= max; i += step) {
  14. if (points.indexOf(i) === -1) {
  15. points.push(i);
  16. }
  17. }
  18. }
  19. return points;
  20. };
  21. var Steps = function Steps(_ref) {
  22. var prefixCls = _ref.prefixCls,
  23. vertical = _ref.vertical,
  24. reverse = _ref.reverse,
  25. marks = _ref.marks,
  26. dots = _ref.dots,
  27. step = _ref.step,
  28. included = _ref.included,
  29. lowerBound = _ref.lowerBound,
  30. upperBound = _ref.upperBound,
  31. max = _ref.max,
  32. min = _ref.min,
  33. dotStyle = _ref.dotStyle,
  34. activeDotStyle = _ref.activeDotStyle;
  35. var range = max - min;
  36. var elements = calcPoints(vertical, marks, dots, step, min, max).map(function (point) {
  37. var _classNames;
  38. var offset = Math.abs(point - min) / range * 100 + '%';
  39. var isActived = !included && point === upperBound || included && point <= upperBound && point >= lowerBound;
  40. var style = vertical ? _extends({}, dotStyle, _defineProperty({}, reverse ? 'top' : 'bottom', offset)) : _extends({}, dotStyle, _defineProperty({}, reverse ? 'right' : 'left', offset));
  41. if (isActived) {
  42. style = _extends({}, style, activeDotStyle);
  43. }
  44. var pointClassName = classNames((_classNames = {}, _defineProperty(_classNames, prefixCls + '-dot', true), _defineProperty(_classNames, prefixCls + '-dot-active', isActived), _defineProperty(_classNames, prefixCls + '-dot-reverse', reverse), _classNames));
  45. return React.createElement('span', { className: pointClassName, style: style, key: point });
  46. });
  47. return React.createElement(
  48. 'div',
  49. { className: prefixCls + '-step' },
  50. elements
  51. );
  52. };
  53. Steps.propTypes = {
  54. prefixCls: PropTypes.string,
  55. activeDotStyle: PropTypes.object,
  56. dotStyle: PropTypes.object,
  57. min: PropTypes.number,
  58. max: PropTypes.number,
  59. upperBound: PropTypes.number,
  60. lowerBound: PropTypes.number,
  61. included: PropTypes.bool,
  62. dots: PropTypes.bool,
  63. step: PropTypes.number,
  64. marks: PropTypes.object,
  65. vertical: PropTypes.bool,
  66. reverse: PropTypes.bool
  67. };
  68. export default Steps;