25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

145 lines
4.8 KiB

  1. import _extends from 'babel-runtime/helpers/extends';
  2. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  3. import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
  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 _inherits from 'babel-runtime/helpers/inherits';
  8. import React from 'react';
  9. import PropTypes from 'prop-types';
  10. import classNames from 'classnames';
  11. import addEventListener from 'rc-util/es/Dom/addEventListener';
  12. var Handle = function (_React$Component) {
  13. _inherits(Handle, _React$Component);
  14. function Handle() {
  15. var _ref;
  16. var _temp, _this, _ret;
  17. _classCallCheck(this, Handle);
  18. for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
  19. args[_key] = arguments[_key];
  20. }
  21. return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Handle.__proto__ || Object.getPrototypeOf(Handle)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
  22. clickFocused: false
  23. }, _this.setHandleRef = function (node) {
  24. _this.handle = node;
  25. }, _this.handleMouseUp = function () {
  26. if (document.activeElement === _this.handle) {
  27. _this.setClickFocus(true);
  28. }
  29. }, _this.handleMouseDown = function () {
  30. // fix https://github.com/ant-design/ant-design/issues/15324
  31. _this.focus();
  32. }, _this.handleBlur = function () {
  33. _this.setClickFocus(false);
  34. }, _this.handleKeyDown = function () {
  35. _this.setClickFocus(false);
  36. }, _temp), _possibleConstructorReturn(_this, _ret);
  37. }
  38. _createClass(Handle, [{
  39. key: 'componentDidMount',
  40. value: function componentDidMount() {
  41. // mouseup won't trigger if mouse moved out of handle,
  42. // so we listen on document here.
  43. this.onMouseUpListener = addEventListener(document, 'mouseup', this.handleMouseUp);
  44. }
  45. }, {
  46. key: 'componentWillUnmount',
  47. value: function componentWillUnmount() {
  48. if (this.onMouseUpListener) {
  49. this.onMouseUpListener.remove();
  50. }
  51. }
  52. }, {
  53. key: 'setClickFocus',
  54. value: function setClickFocus(focused) {
  55. this.setState({ clickFocused: focused });
  56. }
  57. }, {
  58. key: 'clickFocus',
  59. value: function clickFocus() {
  60. this.setClickFocus(true);
  61. this.focus();
  62. }
  63. }, {
  64. key: 'focus',
  65. value: function focus() {
  66. this.handle.focus();
  67. }
  68. }, {
  69. key: 'blur',
  70. value: function blur() {
  71. this.handle.blur();
  72. }
  73. }, {
  74. key: 'render',
  75. value: function render() {
  76. var _ref2, _ref3;
  77. var _props = this.props,
  78. prefixCls = _props.prefixCls,
  79. vertical = _props.vertical,
  80. reverse = _props.reverse,
  81. offset = _props.offset,
  82. style = _props.style,
  83. disabled = _props.disabled,
  84. min = _props.min,
  85. max = _props.max,
  86. value = _props.value,
  87. tabIndex = _props.tabIndex,
  88. restProps = _objectWithoutProperties(_props, ['prefixCls', 'vertical', 'reverse', 'offset', 'style', 'disabled', 'min', 'max', 'value', 'tabIndex']);
  89. var className = classNames(this.props.className, _defineProperty({}, prefixCls + '-handle-click-focused', this.state.clickFocused));
  90. var positionStyle = vertical ? (_ref2 = {}, _defineProperty(_ref2, reverse ? 'top' : 'bottom', offset + '%'), _defineProperty(_ref2, reverse ? 'bottom' : 'top', 'auto'), _defineProperty(_ref2, 'transform', 'translateY(+50%)'), _ref2) : (_ref3 = {}, _defineProperty(_ref3, reverse ? 'right' : 'left', offset + '%'), _defineProperty(_ref3, reverse ? 'left' : 'right', 'auto'), _defineProperty(_ref3, 'transform', 'translateX(' + (reverse ? '+' : '-') + '50%)'), _ref3);
  91. var elStyle = _extends({}, style, positionStyle);
  92. var _tabIndex = tabIndex || 0;
  93. if (disabled || tabIndex === null) {
  94. _tabIndex = null;
  95. }
  96. return React.createElement('div', _extends({
  97. ref: this.setHandleRef,
  98. tabIndex: _tabIndex
  99. }, restProps, {
  100. className: className,
  101. style: elStyle,
  102. onBlur: this.handleBlur,
  103. onKeyDown: this.handleKeyDown,
  104. onMouseDown: this.handleMouseDown
  105. // aria attribute
  106. , role: 'slider',
  107. 'aria-valuemin': min,
  108. 'aria-valuemax': max,
  109. 'aria-valuenow': value,
  110. 'aria-disabled': !!disabled
  111. }));
  112. }
  113. }]);
  114. return Handle;
  115. }(React.Component);
  116. export default Handle;
  117. Handle.propTypes = {
  118. prefixCls: PropTypes.string,
  119. className: PropTypes.string,
  120. vertical: PropTypes.bool,
  121. offset: PropTypes.number,
  122. style: PropTypes.object,
  123. disabled: PropTypes.bool,
  124. min: PropTypes.number,
  125. max: PropTypes.number,
  126. value: PropTypes.number,
  127. tabIndex: PropTypes.number,
  128. reverse: PropTypes.bool
  129. };