|
- 'use strict';
-
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
-
- var _extends2 = require('babel-runtime/helpers/extends');
-
- var _extends3 = _interopRequireDefault(_extends2);
-
- var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
-
- var _defineProperty3 = _interopRequireDefault(_defineProperty2);
-
- var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
-
- var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
-
- var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
-
- var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
-
- var _createClass2 = require('babel-runtime/helpers/createClass');
-
- var _createClass3 = _interopRequireDefault(_createClass2);
-
- var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
-
- var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
-
- var _inherits2 = require('babel-runtime/helpers/inherits');
-
- var _inherits3 = _interopRequireDefault(_inherits2);
-
- var _react = require('react');
-
- var _react2 = _interopRequireDefault(_react);
-
- var _propTypes = require('prop-types');
-
- var _propTypes2 = _interopRequireDefault(_propTypes);
-
- var _classnames = require('classnames');
-
- var _classnames2 = _interopRequireDefault(_classnames);
-
- var _addEventListener = require('rc-util/lib/Dom/addEventListener');
-
- var _addEventListener2 = _interopRequireDefault(_addEventListener);
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
- var Handle = function (_React$Component) {
- (0, _inherits3['default'])(Handle, _React$Component);
-
- function Handle() {
- var _ref;
-
- var _temp, _this, _ret;
-
- (0, _classCallCheck3['default'])(this, Handle);
-
- for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
- args[_key] = arguments[_key];
- }
-
- return _ret = (_temp = (_this = (0, _possibleConstructorReturn3['default'])(this, (_ref = Handle.__proto__ || Object.getPrototypeOf(Handle)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
- clickFocused: false
- }, _this.setHandleRef = function (node) {
- _this.handle = node;
- }, _this.handleMouseUp = function () {
- if (document.activeElement === _this.handle) {
- _this.setClickFocus(true);
- }
- }, _this.handleMouseDown = function () {
- // fix https://github.com/ant-design/ant-design/issues/15324
- _this.focus();
- }, _this.handleBlur = function () {
- _this.setClickFocus(false);
- }, _this.handleKeyDown = function () {
- _this.setClickFocus(false);
- }, _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret);
- }
-
- (0, _createClass3['default'])(Handle, [{
- key: 'componentDidMount',
- value: function componentDidMount() {
- // mouseup won't trigger if mouse moved out of handle,
- // so we listen on document here.
- this.onMouseUpListener = (0, _addEventListener2['default'])(document, 'mouseup', this.handleMouseUp);
- }
- }, {
- key: 'componentWillUnmount',
- value: function componentWillUnmount() {
- if (this.onMouseUpListener) {
- this.onMouseUpListener.remove();
- }
- }
- }, {
- key: 'setClickFocus',
- value: function setClickFocus(focused) {
- this.setState({ clickFocused: focused });
- }
- }, {
- key: 'clickFocus',
- value: function clickFocus() {
- this.setClickFocus(true);
- this.focus();
- }
- }, {
- key: 'focus',
- value: function focus() {
- this.handle.focus();
- }
- }, {
- key: 'blur',
- value: function blur() {
- this.handle.blur();
- }
- }, {
- key: 'render',
- value: function render() {
- var _ref2, _ref3;
-
- var _props = this.props,
- prefixCls = _props.prefixCls,
- vertical = _props.vertical,
- reverse = _props.reverse,
- offset = _props.offset,
- style = _props.style,
- disabled = _props.disabled,
- min = _props.min,
- max = _props.max,
- value = _props.value,
- tabIndex = _props.tabIndex,
- restProps = (0, _objectWithoutProperties3['default'])(_props, ['prefixCls', 'vertical', 'reverse', 'offset', 'style', 'disabled', 'min', 'max', 'value', 'tabIndex']);
-
-
- var className = (0, _classnames2['default'])(this.props.className, (0, _defineProperty3['default'])({}, prefixCls + '-handle-click-focused', this.state.clickFocused));
- var positionStyle = vertical ? (_ref2 = {}, (0, _defineProperty3['default'])(_ref2, reverse ? 'top' : 'bottom', offset + '%'), (0, _defineProperty3['default'])(_ref2, reverse ? 'bottom' : 'top', 'auto'), (0, _defineProperty3['default'])(_ref2, 'transform', 'translateY(+50%)'), _ref2) : (_ref3 = {}, (0, _defineProperty3['default'])(_ref3, reverse ? 'right' : 'left', offset + '%'), (0, _defineProperty3['default'])(_ref3, reverse ? 'left' : 'right', 'auto'), (0, _defineProperty3['default'])(_ref3, 'transform', 'translateX(' + (reverse ? '+' : '-') + '50%)'), _ref3);
- var elStyle = (0, _extends3['default'])({}, style, positionStyle);
-
- var _tabIndex = tabIndex || 0;
- if (disabled || tabIndex === null) {
- _tabIndex = null;
- }
-
- return _react2['default'].createElement('div', (0, _extends3['default'])({
- ref: this.setHandleRef,
- tabIndex: _tabIndex
- }, restProps, {
- className: className,
- style: elStyle,
- onBlur: this.handleBlur,
- onKeyDown: this.handleKeyDown,
- onMouseDown: this.handleMouseDown
-
- // aria attribute
- , role: 'slider',
- 'aria-valuemin': min,
- 'aria-valuemax': max,
- 'aria-valuenow': value,
- 'aria-disabled': !!disabled
- }));
- }
- }]);
- return Handle;
- }(_react2['default'].Component);
-
- exports['default'] = Handle;
-
-
- Handle.propTypes = {
- prefixCls: _propTypes2['default'].string,
- className: _propTypes2['default'].string,
- vertical: _propTypes2['default'].bool,
- offset: _propTypes2['default'].number,
- style: _propTypes2['default'].object,
- disabled: _propTypes2['default'].bool,
- min: _propTypes2['default'].number,
- max: _propTypes2['default'].number,
- value: _propTypes2['default'].number,
- tabIndex: _propTypes2['default'].number,
- reverse: _propTypes2['default'].bool
- };
- module.exports = exports['default'];
|