1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
3 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
4 | import _inherits from 'babel-runtime/helpers/inherits';
|
5 |
|
6 | var _class, _temp;
|
7 |
|
8 | import React from 'react';
|
9 | import PropTypes from 'prop-types';
|
10 | import { events, func } from '../../util';
|
11 | import Balloon from '../../balloon';
|
12 | import { getPercent } from '../utils';
|
13 |
|
14 | var Tooltip = Balloon.Tooltip;
|
15 | var noop = func.noop;
|
16 |
|
17 |
|
18 | function _getStyle(min, max, value, rtl) {
|
19 | if (rtl) {
|
20 | return {
|
21 | left: getPercent(min, max, max + min - value[1]) + '%',
|
22 | right: getPercent(min, max, value[0]) + '%'
|
23 | };
|
24 | }
|
25 | return {
|
26 | left: getPercent(min, max, value[0]) + '%',
|
27 | right: 100 - getPercent(min, max, value[1]) + '%'
|
28 | };
|
29 | }
|
30 |
|
31 | function sliderFrag(props) {
|
32 | var prefix = props.prefix,
|
33 | min = props.min,
|
34 | max = props.max,
|
35 | value = props.value,
|
36 | disabled = props.disabled,
|
37 | onMouseEnter = props.onMouseEnter,
|
38 | onMouseLeave = props.onMouseLeave,
|
39 | onMouseDown = props.onMouseDown,
|
40 | rtl = props.rtl;
|
41 |
|
42 |
|
43 | var activeClass = !disabled && props.hasMovingClass ? prefix + 'range-active' : '';
|
44 |
|
45 | return React.createElement(
|
46 | 'div',
|
47 | {
|
48 | className: prefix + 'range-frag ' + activeClass,
|
49 | style: _getStyle(min, max, value, rtl),
|
50 | onMouseEnter: onMouseEnter,
|
51 | onMouseLeave: onMouseLeave,
|
52 | onMouseDown: onMouseDown
|
53 | },
|
54 | React.createElement('div', { className: prefix + 'range-selected' }),
|
55 | React.createElement(
|
56 | 'div',
|
57 | { className: prefix + 'range-slider' },
|
58 | React.createElement('div', { className: prefix + 'range-slider-inner' })
|
59 | ),
|
60 | React.createElement(
|
61 | 'div',
|
62 | { className: prefix + 'range-slider' },
|
63 | React.createElement('div', { className: prefix + 'range-slider-inner' })
|
64 | )
|
65 | );
|
66 | }
|
67 |
|
68 | sliderFrag.propTypes = {
|
69 | prefix: PropTypes.string,
|
70 | min: PropTypes.number,
|
71 | max: PropTypes.number,
|
72 | hasMovingClass: PropTypes.bool,
|
73 | onMouseEnter: PropTypes.func,
|
74 | onMouseLeave: PropTypes.func,
|
75 | onMouseDown: PropTypes.func,
|
76 | value: PropTypes.arrayOf(PropTypes.number),
|
77 | disabled: PropTypes.bool,
|
78 | rtl: PropTypes.bool
|
79 | };
|
80 |
|
81 | var FixedSlider = (_temp = _class = function (_React$Component) {
|
82 | _inherits(FixedSlider, _React$Component);
|
83 |
|
84 | function FixedSlider(props) {
|
85 | _classCallCheck(this, FixedSlider);
|
86 |
|
87 | var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
|
88 |
|
89 | _this.state = {
|
90 | hasMovingClass: false,
|
91 | onTooltipVisibleChange: false,
|
92 | tooltipAnimation: true
|
93 | };
|
94 | return _this;
|
95 | }
|
96 |
|
97 | FixedSlider.prototype._onMouseEnter = function _onMouseEnter() {
|
98 | if (!(this.keyState === 'down')) {
|
99 | this.keyState = 'enter';
|
100 | }
|
101 | this.setState({
|
102 | hasMovingClass: true
|
103 | });
|
104 | };
|
105 |
|
106 | FixedSlider.prototype._onMouseLeave = function _onMouseLeave() {
|
107 | if (this.keyState === 'enter') {
|
108 | this.setState({
|
109 | hasMovingClass: false
|
110 | });
|
111 | }
|
112 | };
|
113 |
|
114 | FixedSlider.prototype._onMouseDown = function _onMouseDown() {
|
115 | this.keyState = 'down';
|
116 | this.setState({
|
117 | hasMovingClass: true
|
118 | });
|
119 | this._addDocumentEvents();
|
120 | };
|
121 |
|
122 | FixedSlider.prototype._onMouseUp = function _onMouseUp() {
|
123 | if (this.keyState === 'down') {
|
124 | this.keyState = '';
|
125 | this._removeDocumentEvents();
|
126 | this.setState({
|
127 | hasMovingClass: false
|
128 | });
|
129 | }
|
130 | };
|
131 |
|
132 | FixedSlider.prototype._addDocumentEvents = function _addDocumentEvents() {
|
133 | this._onMouseUpListener = events.on(document, 'mouseup', this._onMouseUp.bind(this));
|
134 | };
|
135 |
|
136 | FixedSlider.prototype._removeDocumentEvents = function _removeDocumentEvents() {
|
137 | if (this._onMouseUpListener) {
|
138 | this._onMouseUpListener.off();
|
139 | this._onMouseUpListener = null;
|
140 | }
|
141 | };
|
142 |
|
143 | FixedSlider.prototype.render = function render() {
|
144 | var _props = this.props,
|
145 | hasTip = _props.hasTip,
|
146 | value = _props.value,
|
147 | tipRender = _props.tipRender,
|
148 | tooltipVisible = _props.tooltipVisible,
|
149 | hasMovingClass = _props.hasMovingClass;
|
150 |
|
151 |
|
152 | var addedProps = {
|
153 | hasMovingClass: hasMovingClass || this.state.hasMovingClass,
|
154 | onMouseEnter: this._onMouseEnter.bind(this),
|
155 | onMouseLeave: this._onMouseLeave.bind(this),
|
156 | onMouseDown: this._onMouseDown.bind(this)
|
157 | };
|
158 |
|
159 | return hasTip ? React.createElement(
|
160 | Tooltip,
|
161 | {
|
162 | popupContainer: function popupContainer(target) {
|
163 | return target.parentNode;
|
164 | },
|
165 | popupProps: {
|
166 | visible: tooltipVisible || hasMovingClass,
|
167 | animation: this.state.tooltipAnimation ? { in: 'expandInUp', out: 'expandOutDown' } : false
|
168 | },
|
169 | trigger: sliderFrag(_extends({}, this.props, addedProps)),
|
170 | align: 't'
|
171 | },
|
172 | tipRender(value[0] + '-' + value[1])
|
173 | ) : sliderFrag(_extends({}, this.props, addedProps));
|
174 | };
|
175 |
|
176 | return FixedSlider;
|
177 | }(React.Component), _class.propTypes = {
|
178 | hasTip: PropTypes.bool,
|
179 | tooltipVisible: PropTypes.bool,
|
180 | onTooltipVisibleChange: PropTypes.func,
|
181 | tooltipAnimation: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
|
182 | value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
|
183 | tipRender: PropTypes.func,
|
184 | disabled: PropTypes.bool,
|
185 | hasMovingClass: PropTypes.bool,
|
186 | rtl: PropTypes.bool
|
187 | }, _class.defaultProps = {
|
188 | disabled: false,
|
189 | hasTip: true,
|
190 | onChange: noop,
|
191 | onProcess: noop,
|
192 | tipRender: function tipRender(value) {
|
193 | return value;
|
194 | },
|
195 | reverse: false,
|
196 | rtl: false
|
197 | }, _temp);
|
198 | FixedSlider.displayName = 'FixedSlider';
|
199 | export { FixedSlider as default }; |
\ | No newline at end of file |