You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

85 lines
2.6 KiB

  1. import _extends from 'babel-runtime/helpers/extends';
  2. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  3. import React from 'react';
  4. import PropTypes from 'prop-types';
  5. import classNames from 'classnames';
  6. var Marks = function Marks(_ref) {
  7. var className = _ref.className,
  8. vertical = _ref.vertical,
  9. reverse = _ref.reverse,
  10. marks = _ref.marks,
  11. included = _ref.included,
  12. upperBound = _ref.upperBound,
  13. lowerBound = _ref.lowerBound,
  14. max = _ref.max,
  15. min = _ref.min,
  16. onClickLabel = _ref.onClickLabel;
  17. var marksKeys = Object.keys(marks);
  18. var range = max - min;
  19. var elements = marksKeys.map(parseFloat).sort(function (a, b) {
  20. return a - b;
  21. }).map(function (point) {
  22. var _classNames;
  23. var markPoint = marks[point];
  24. var markPointIsObject = typeof markPoint === 'object' && !React.isValidElement(markPoint);
  25. var markLabel = markPointIsObject ? markPoint.label : markPoint;
  26. if (!markLabel && markLabel !== 0) {
  27. return null;
  28. }
  29. var isActive = !included && point === upperBound || included && point <= upperBound && point >= lowerBound;
  30. var markClassName = classNames((_classNames = {}, _defineProperty(_classNames, className + '-text', true), _defineProperty(_classNames, className + '-text-active', isActive), _classNames));
  31. var bottomStyle = _defineProperty({
  32. marginBottom: '-50%'
  33. }, reverse ? 'top' : 'bottom', (point - min) / range * 100 + '%');
  34. var leftStyle = _defineProperty({
  35. transform: 'translateX(-50%)',
  36. msTransform: 'translateX(-50%)'
  37. }, reverse ? 'right' : 'left', reverse ? (point - min / 4) / range * 100 + '%' : (point - min) / range * 100 + '%');
  38. var style = vertical ? bottomStyle : leftStyle;
  39. var markStyle = markPointIsObject ? _extends({}, style, markPoint.style) : style;
  40. return React.createElement(
  41. 'span',
  42. {
  43. className: markClassName,
  44. style: markStyle,
  45. key: point,
  46. onMouseDown: function onMouseDown(e) {
  47. return onClickLabel(e, point);
  48. },
  49. onTouchStart: function onTouchStart(e) {
  50. return onClickLabel(e, point);
  51. }
  52. },
  53. markLabel
  54. );
  55. });
  56. return React.createElement(
  57. 'div',
  58. { className: className },
  59. elements
  60. );
  61. };
  62. Marks.propTypes = {
  63. className: PropTypes.string,
  64. vertical: PropTypes.bool,
  65. reverse: PropTypes.bool,
  66. marks: PropTypes.object,
  67. included: PropTypes.bool,
  68. upperBound: PropTypes.number,
  69. lowerBound: PropTypes.number,
  70. max: PropTypes.number,
  71. min: PropTypes.number,
  72. onClickLabel: PropTypes.func
  73. };
  74. export default Marks;