mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-01 19:48:38 +08:00
add vc-slider v0.1
This commit is contained in:
wangxueliang
parent
847bed5bca
commit
263dd3a520
@ -1,74 +1,80 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import addEventListener from 'rc-util/lib/Dom/addEventListener';
|
||||
|
||||
export default class Handle extends React.Component {
|
||||
state = {
|
||||
clickFocused: false,
|
||||
}
|
||||
import classNames from 'classnames'
|
||||
import PropTypes from '../../../_util/vue-types'
|
||||
import addEventListener from '../../../_util/Dom/addEventListener'
|
||||
import BaseMixin from '../../../_util/BaseMixin'
|
||||
|
||||
componentDidMount() {
|
||||
// mouseup won't trigger if mouse moved out of handle,
|
||||
// so we listen on document here.
|
||||
this.onMouseUpListener = addEventListener(document, 'mouseup', this.handleMouseUp);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.onMouseUpListener) {
|
||||
this.onMouseUpListener.remove();
|
||||
export default {
|
||||
mixins: [BaseMixin],
|
||||
props: {
|
||||
prefixCls: PropTypes.string,
|
||||
vertical: PropTypes.bool,
|
||||
offset: PropTypes.number,
|
||||
disabled: PropTypes.bool,
|
||||
min: PropTypes.number,
|
||||
max: PropTypes.number,
|
||||
value: PropTypes.number,
|
||||
tabIndex: PropTypes.number,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
clickFocused: false,
|
||||
}
|
||||
}
|
||||
|
||||
setClickFocus(focused) {
|
||||
this.setState({ clickFocused: focused });
|
||||
}
|
||||
|
||||
handleMouseUp = () => {
|
||||
if (document.activeElement === this.handle) {
|
||||
this.setClickFocus(true);
|
||||
}
|
||||
}
|
||||
|
||||
handleBlur = () => {
|
||||
this.setClickFocus(false);
|
||||
}
|
||||
|
||||
handleKeyDown = () => {
|
||||
this.setClickFocus(false);
|
||||
}
|
||||
|
||||
clickFocus() {
|
||||
this.setClickFocus(true);
|
||||
this.focus();
|
||||
}
|
||||
|
||||
focus() {
|
||||
this.handle.focus();
|
||||
}
|
||||
|
||||
blur() {
|
||||
this.handle.blur();
|
||||
}
|
||||
|
||||
render() {
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.onMouseUpListener = addEventListener(document, 'mouseup', this.handleMouseUp)
|
||||
})
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$nextTick(() => {
|
||||
if (this.onMouseUpListener) {
|
||||
this.onMouseUpListener.remove()
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
setClickFocus (focused) {
|
||||
this.setState({ clickFocused: focused })
|
||||
},
|
||||
handleMouseUp () {
|
||||
if (document.activeElement === this.$refs.handle) {
|
||||
this.setClickFocus(true)
|
||||
}
|
||||
},
|
||||
handleBlur () {
|
||||
this.setClickFocus(false)
|
||||
},
|
||||
handleKeyDown () {
|
||||
this.setClickFocus(false)
|
||||
},
|
||||
clickFocus () {
|
||||
this.setClickFocus(true)
|
||||
this.focus()
|
||||
},
|
||||
focus () {
|
||||
this.$refs.handle.focus()
|
||||
},
|
||||
blur () {
|
||||
this.$refs.handle.blur()
|
||||
},
|
||||
},
|
||||
render () {
|
||||
const {
|
||||
prefixCls, vertical, offset, style, disabled, min, max, value, tabIndex, ...restProps,
|
||||
} = this.props;
|
||||
prefixCls, vertical, offset, disabled, min, max, value, tabIndex, ...restProps
|
||||
} = this.$props
|
||||
|
||||
const className = classNames(
|
||||
this.props.className,
|
||||
{
|
||||
[`${prefixCls}-handle-click-focused`]: this.state.clickFocused,
|
||||
[`${prefixCls}-handle-click-focused`]: this.clickFocused,
|
||||
}
|
||||
);
|
||||
)
|
||||
|
||||
const postionStyle = vertical ? { bottom: `${offset}%` } : { left: `${offset}%` };
|
||||
const postionStyle = vertical ? { bottom: `${offset}%` } : { left: `${offset}%` }
|
||||
const elStyle = {
|
||||
...style,
|
||||
...postionStyle,
|
||||
};
|
||||
let ariaProps = {};
|
||||
}
|
||||
let ariaProps = {}
|
||||
if (value !== undefined) {
|
||||
ariaProps = {
|
||||
...ariaProps,
|
||||
@ -76,34 +82,21 @@ export default class Handle extends React.Component {
|
||||
'aria-valuemax': max,
|
||||
'aria-valuenow': value,
|
||||
'aria-disabled': !!disabled,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={node => (this.handle = node)}
|
||||
role="slider"
|
||||
ref='handle'
|
||||
role='slider'
|
||||
tabIndex= {disabled ? null : (tabIndex || 0)}
|
||||
{...ariaProps}
|
||||
{...restProps}
|
||||
className={className}
|
||||
class={className}
|
||||
style={elStyle}
|
||||
onBlur={this.handleBlur}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
onKeydown={this.handleKeyDown}
|
||||
/>
|
||||
);
|
||||
}
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
Handle.propTypes = {
|
||||
prefixCls: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
vertical: PropTypes.bool,
|
||||
offset: PropTypes.number,
|
||||
style: PropTypes.object,
|
||||
disabled: PropTypes.bool,
|
||||
min: PropTypes.number,
|
||||
max: PropTypes.number,
|
||||
value: PropTypes.number,
|
||||
tabIndex: PropTypes.number,
|
||||
};
|
||||
|
||||
@ -1,327 +1,308 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import shallowEqual from 'shallowequal';
|
||||
import Track from './common/Track';
|
||||
import createSlider from './common/createSlider';
|
||||
import * as utils from './utils';
|
||||
import classNames from 'classnames'
|
||||
import PropTypes from '../../../_util/vue-types'
|
||||
import BaseMixin from '../../../_util/BaseMixin'
|
||||
import { initDefaultProps, hasProp } from '../../../_util/props-util'
|
||||
import Track from './common/Track'
|
||||
import createSlider from './common/createSlider'
|
||||
import * as utils from './utils'
|
||||
|
||||
class Range extends React.Component {
|
||||
static displayName = 'Range';
|
||||
static propTypes = {
|
||||
defaultValue: PropTypes.arrayOf(PropTypes.number),
|
||||
value: PropTypes.arrayOf(PropTypes.number),
|
||||
count: PropTypes.number,
|
||||
pushable: PropTypes.oneOfType([
|
||||
PropTypes.bool,
|
||||
PropTypes.number,
|
||||
]),
|
||||
allowCross: PropTypes.bool,
|
||||
disabled: PropTypes.bool,
|
||||
tabIndex: PropTypes.arrayOf(PropTypes.number),
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
const rangeProps = {
|
||||
defaultValue: PropTypes.arrayOf(PropTypes.number),
|
||||
value: PropTypes.arrayOf(PropTypes.number),
|
||||
count: PropTypes.number,
|
||||
pushable: PropTypes.oneOfType([
|
||||
PropTypes.bool,
|
||||
PropTypes.number,
|
||||
]),
|
||||
allowCross: PropTypes.bool,
|
||||
disabled: PropTypes.bool,
|
||||
tabIndex: PropTypes.arrayOf(PropTypes.number),
|
||||
}
|
||||
const Range = {
|
||||
displayName: 'Range',
|
||||
mixins: [BaseMixin],
|
||||
props: initDefaultProps(rangeProps, {
|
||||
count: 1,
|
||||
allowCross: true,
|
||||
pushable: false,
|
||||
tabIndex: [],
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const { count, min, max } = props;
|
||||
}),
|
||||
data () {
|
||||
const { count, min, max } = this
|
||||
const initialValue = Array.apply(null, Array(count + 1))
|
||||
.map(() => min);
|
||||
const defaultValue = 'defaultValue' in props ?
|
||||
props.defaultValue : initialValue;
|
||||
const value = props.value !== undefined ?
|
||||
props.value : defaultValue;
|
||||
const bounds = value.map((v, i) => this.trimAlignValue(v, i));
|
||||
const recent = bounds[0] === max ? 0 : bounds.length - 1;
|
||||
|
||||
this.state = {
|
||||
.map(() => min)
|
||||
const defaultValue = hasProp(this, 'defaultValue') ? this.defaultValue : initialValue
|
||||
let { value } = this
|
||||
if (value === undefined) {
|
||||
value = defaultValue
|
||||
}
|
||||
const bounds = value.map((v, i) => this.trimAlignValue(v, i))
|
||||
const recent = bounds[0] === max ? 0 : bounds.length - 1
|
||||
return {
|
||||
handle: null,
|
||||
recent,
|
||||
bounds,
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (!('value' in nextProps || 'min' in nextProps || 'max' in nextProps)) return;
|
||||
if (this.props.min === nextProps.min &&
|
||||
this.props.max === nextProps.max &&
|
||||
shallowEqual(this.props.value, nextProps.value)) {
|
||||
return;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler (val) {
|
||||
const { min, max } = this
|
||||
this.setChangeValue(val, min, max)
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
min (val) {
|
||||
const { bounds, max } = this
|
||||
this.setChangeValue(bounds, val, max)
|
||||
},
|
||||
max (val) {
|
||||
const { bounds, min } = this
|
||||
this.setChangeValue(bounds, min, val)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setChangeValue (value, min, max) {
|
||||
const { bounds } = this
|
||||
const newValue = value || bounds
|
||||
const minAmaxProps = {
|
||||
min,
|
||||
max,
|
||||
}
|
||||
const nextBounds = newValue.map((v, i) => this.trimAlignValue(v, i, minAmaxProps))
|
||||
if (nextBounds.length === bounds.length && nextBounds.every((v, i) => v === bounds[i])) return
|
||||
|
||||
const { bounds } = this.state;
|
||||
const value = nextProps.value || bounds;
|
||||
const nextBounds = value.map((v, i) => this.trimAlignValue(v, i, nextProps));
|
||||
if (nextBounds.length === bounds.length && nextBounds.every((v, i) => v === bounds[i])) return;
|
||||
this.setState({ bounds: nextBounds })
|
||||
|
||||
this.setState({ bounds: nextBounds });
|
||||
if (bounds.some(v => utils.isValueOutOfRange(v, minAmaxProps))) {
|
||||
const newValues = newValue.map((v) => {
|
||||
return utils.ensureValueInRange(v, minAmaxProps)
|
||||
})
|
||||
this.$emit('change', newValues)
|
||||
}
|
||||
},
|
||||
onChange (state) {
|
||||
const isNotControlled = !hasProp(this, 'value')
|
||||
if (isNotControlled) {
|
||||
this.setState(state)
|
||||
} else if (state.handle !== undefined) {
|
||||
this.setState({ handle: state.handle })
|
||||
}
|
||||
|
||||
if (bounds.some(v => utils.isValueOutOfRange(v, nextProps))) {
|
||||
const newValues = value.map((v) => {
|
||||
return utils.ensureValueInRange(v, nextProps);
|
||||
});
|
||||
this.props.onChange(newValues);
|
||||
}
|
||||
}
|
||||
const data = { ...this.$data, ...state }
|
||||
const changedValue = data.bounds
|
||||
this.$emit('change', changedValue)
|
||||
},
|
||||
onStart (position) {
|
||||
const { bounds } = this
|
||||
this.$emit('beforeChange', bounds)
|
||||
|
||||
onChange(state) {
|
||||
const props = this.props;
|
||||
const isNotControlled = !('value' in props);
|
||||
if (isNotControlled) {
|
||||
this.setState(state);
|
||||
} else if (state.handle !== undefined) {
|
||||
this.setState({ handle: state.handle });
|
||||
}
|
||||
const value = this.calcValueByPos(position)
|
||||
|
||||
const data = { ...this.state, ...state };
|
||||
const changedValue = data.bounds;
|
||||
props.onChange(changedValue);
|
||||
}
|
||||
const closestBound = this.getClosestBound(value)
|
||||
this.prevMovedHandleIndex = this.getBoundNeedMoving(value, closestBound)
|
||||
|
||||
onStart(position) {
|
||||
const props = this.props;
|
||||
const state = this.state;
|
||||
const bounds = this.getValue();
|
||||
props.onBeforeChange(bounds);
|
||||
this.setState({
|
||||
handle: this.prevMovedHandleIndex,
|
||||
recent: this.prevMovedHandleIndex,
|
||||
})
|
||||
|
||||
const value = this.calcValueByPos(position);
|
||||
this.startValue = value;
|
||||
this.startPosition = position;
|
||||
const prevValue = bounds[this.prevMovedHandleIndex]
|
||||
if (value === prevValue) return
|
||||
|
||||
const closestBound = this.getClosestBound(value);
|
||||
this.prevMovedHandleIndex = this.getBoundNeedMoving(value, closestBound);
|
||||
const nextBounds = [...bounds]
|
||||
nextBounds[this.prevMovedHandleIndex] = value
|
||||
this.$emit('change', { bounds: nextBounds })
|
||||
},
|
||||
onEnd () {
|
||||
this.removeDocumentEvents()
|
||||
this.$emit('afterChange', this.bounds)
|
||||
},
|
||||
onMove (e, position) {
|
||||
utils.pauseEvent(e)
|
||||
const { bounds, handle } = this
|
||||
const value = this.calcValueByPos(position)
|
||||
const oldValue = bounds[handle]
|
||||
if (value === oldValue) return
|
||||
|
||||
this.setState({
|
||||
handle: this.prevMovedHandleIndex,
|
||||
recent: this.prevMovedHandleIndex,
|
||||
});
|
||||
this.moveTo(value)
|
||||
},
|
||||
onKeyboard (e) {
|
||||
const valueMutator = utils.getKeyboardValueMutator(e)
|
||||
|
||||
const prevValue = bounds[this.prevMovedHandleIndex];
|
||||
if (value === prevValue) return;
|
||||
if (valueMutator) {
|
||||
utils.pauseEvent(e)
|
||||
const { bounds, handle } = this
|
||||
const oldValue = bounds[handle]
|
||||
const mutatedValue = valueMutator(oldValue, this.$props)
|
||||
const value = this.trimAlignValue(mutatedValue)
|
||||
if (value === oldValue) return
|
||||
const isFromKeyboardEvent = true
|
||||
this.moveTo(value, isFromKeyboardEvent)
|
||||
}
|
||||
},
|
||||
getClosestBound (value) {
|
||||
const { bounds } = this
|
||||
let closestBound = 0
|
||||
for (let i = 1; i < bounds.length - 1; ++i) {
|
||||
if (value > bounds[i]) { closestBound = i }
|
||||
}
|
||||
if (Math.abs(bounds[closestBound + 1] - value) < Math.abs(bounds[closestBound] - value)) {
|
||||
closestBound = closestBound + 1
|
||||
}
|
||||
return closestBound
|
||||
},
|
||||
getBoundNeedMoving (value, closestBound) {
|
||||
const { bounds, recent } = this
|
||||
let boundNeedMoving = closestBound
|
||||
const isAtTheSamePoint = (bounds[closestBound + 1] === bounds[closestBound])
|
||||
|
||||
const nextBounds = [...state.bounds];
|
||||
nextBounds[this.prevMovedHandleIndex] = value;
|
||||
this.onChange({ bounds: nextBounds });
|
||||
}
|
||||
if (isAtTheSamePoint && bounds[recent] === bounds[closestBound]) {
|
||||
boundNeedMoving = recent
|
||||
}
|
||||
|
||||
onEnd = () => {
|
||||
this.removeDocumentEvents();
|
||||
this.props.onAfterChange(this.getValue());
|
||||
}
|
||||
if (isAtTheSamePoint && (value !== bounds[closestBound + 1])) {
|
||||
boundNeedMoving = value < bounds[closestBound + 1] ? closestBound : closestBound + 1
|
||||
}
|
||||
return boundNeedMoving
|
||||
},
|
||||
getLowerBound () {
|
||||
return this.bounds[0]
|
||||
},
|
||||
getUpperBound () {
|
||||
const { bounds } = this
|
||||
return bounds[bounds.length - 1]
|
||||
},
|
||||
/**
|
||||
* Returns an array of possible slider points, taking into account both
|
||||
* `marks` and `step`. The result is cached.
|
||||
*/
|
||||
getPoints () {
|
||||
const { marks, step, min, max } = this
|
||||
const cache = this._getPointsCache
|
||||
if (!cache || cache.marks !== marks || cache.step !== step) {
|
||||
const pointsObject = { ...marks }
|
||||
if (step !== null) {
|
||||
for (let point = min; point <= max; point += step) {
|
||||
pointsObject[point] = point
|
||||
}
|
||||
}
|
||||
const points = Object.keys(pointsObject).map(parseFloat)
|
||||
points.sort((a, b) => a - b)
|
||||
this._getPointsCache = { marks, step, points }
|
||||
}
|
||||
return this._getPointsCache.points
|
||||
},
|
||||
moveTo (value, isFromKeyboardEvent) {
|
||||
const { bounds, handle } = this
|
||||
const nextBounds = [...bounds]
|
||||
nextBounds[handle] = value
|
||||
let nextHandle = handle
|
||||
if (this.pushable !== false) {
|
||||
this.pushSurroundingHandles(nextBounds, nextHandle)
|
||||
} else if (this.allowCross) {
|
||||
nextBounds.sort((a, b) => a - b)
|
||||
nextHandle = nextBounds.indexOf(value)
|
||||
}
|
||||
this.$emit('change', {
|
||||
handle: nextHandle,
|
||||
bounds: nextBounds,
|
||||
})
|
||||
if (isFromKeyboardEvent) {
|
||||
// known problem: because setState is async,
|
||||
// so trigger focus will invoke handler's onEnd and another handler's onStart too early,
|
||||
// cause onBeforeChange and onAfterChange receive wrong value.
|
||||
// here use setState callback to hack，but not elegant
|
||||
this.setState({}, () => {
|
||||
this.handlesRefs[nextHandle].focus()
|
||||
})
|
||||
}
|
||||
},
|
||||
pushSurroundingHandles (bounds, handle) {
|
||||
const value = bounds[handle]
|
||||
let { pushable: threshold } = this
|
||||
threshold = Number(threshold)
|
||||
|
||||
onMove(e, position) {
|
||||
utils.pauseEvent(e);
|
||||
const state = this.state;
|
||||
let direction = 0
|
||||
if (bounds[handle + 1] - value < threshold) {
|
||||
direction = +1 // push to right
|
||||
}
|
||||
if (value - bounds[handle - 1] < threshold) {
|
||||
direction = -1 // push to left
|
||||
}
|
||||
|
||||
const value = this.calcValueByPos(position);
|
||||
const oldValue = state.bounds[state.handle];
|
||||
if (value === oldValue) return;
|
||||
if (direction === 0) { return }
|
||||
|
||||
this.moveTo(value);
|
||||
}
|
||||
|
||||
onKeyboard(e) {
|
||||
const valueMutator = utils.getKeyboardValueMutator(e);
|
||||
|
||||
if (valueMutator) {
|
||||
utils.pauseEvent(e);
|
||||
const { state, props } = this;
|
||||
const { bounds, handle } = state;
|
||||
const oldValue = bounds[handle];
|
||||
const mutatedValue = valueMutator(oldValue, props);
|
||||
const value = this.trimAlignValue(mutatedValue);
|
||||
if (value === oldValue) return;
|
||||
const isFromKeyboardEvent = true;
|
||||
this.moveTo(value, isFromKeyboardEvent);
|
||||
}
|
||||
}
|
||||
|
||||
getValue() {
|
||||
return this.state.bounds;
|
||||
}
|
||||
|
||||
getClosestBound(value) {
|
||||
const { bounds } = this.state;
|
||||
let closestBound = 0;
|
||||
for (let i = 1; i < bounds.length - 1; ++i) {
|
||||
if (value > bounds[i]) { closestBound = i; }
|
||||
}
|
||||
if (Math.abs(bounds[closestBound + 1] - value) < Math.abs(bounds[closestBound] - value)) {
|
||||
closestBound = closestBound + 1;
|
||||
}
|
||||
return closestBound;
|
||||
}
|
||||
|
||||
getBoundNeedMoving(value, closestBound) {
|
||||
const { bounds, recent } = this.state;
|
||||
let boundNeedMoving = closestBound;
|
||||
const isAtTheSamePoint = (bounds[closestBound + 1] === bounds[closestBound]);
|
||||
|
||||
if (isAtTheSamePoint && bounds[recent] === bounds[closestBound]) {
|
||||
boundNeedMoving = recent;
|
||||
}
|
||||
|
||||
if (isAtTheSamePoint && (value !== bounds[closestBound + 1])) {
|
||||
boundNeedMoving = value < bounds[closestBound + 1] ? closestBound : closestBound + 1;
|
||||
}
|
||||
return boundNeedMoving;
|
||||
}
|
||||
|
||||
getLowerBound() {
|
||||
return this.state.bounds[0];
|
||||
}
|
||||
|
||||
getUpperBound() {
|
||||
const { bounds } = this.state;
|
||||
return bounds[bounds.length - 1];
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns an array of possible slider points, taking into account both
|
||||
* `marks` and `step`. The result is cached.
|
||||
*/
|
||||
getPoints() {
|
||||
const { marks, step, min, max } = this.props;
|
||||
const cache = this._getPointsCache;
|
||||
if (!cache || cache.marks !== marks || cache.step !== step) {
|
||||
const pointsObject = { ...marks };
|
||||
if (step !== null) {
|
||||
for (let point = min; point <= max; point += step) {
|
||||
pointsObject[point] = point;
|
||||
const nextHandle = handle + direction
|
||||
const diffToNext = direction * (bounds[nextHandle] - value)
|
||||
if (!this.pushHandle(bounds, nextHandle, direction, threshold - diffToNext)) {
|
||||
// revert to original value if pushing is impossible
|
||||
bounds[handle] = bounds[nextHandle] - (direction * threshold)
|
||||
}
|
||||
},
|
||||
pushHandle (bounds, handle, direction, amount) {
|
||||
const originalValue = bounds[handle]
|
||||
let currentValue = bounds[handle]
|
||||
while (direction * (currentValue - originalValue) < amount) {
|
||||
if (!this.pushHandleOnePoint(bounds, handle, direction)) {
|
||||
// can't push handle enough to create the needed `amount` gap, so we
|
||||
// revert its position to the original value
|
||||
bounds[handle] = originalValue
|
||||
return false
|
||||
}
|
||||
currentValue = bounds[handle]
|
||||
}
|
||||
// the handle was pushed enough to create the needed `amount` gap
|
||||
return true
|
||||
},
|
||||
pushHandleOnePoint (bounds, handle, direction) {
|
||||
const points = this.getPoints()
|
||||
const pointIndex = points.indexOf(bounds[handle])
|
||||
const nextPointIndex = pointIndex + direction
|
||||
if (nextPointIndex >= points.length || nextPointIndex < 0) {
|
||||
// reached the minimum or maximum available point, can't push anymore
|
||||
return false
|
||||
}
|
||||
const nextHandle = handle + direction
|
||||
const nextValue = points[nextPointIndex]
|
||||
const { pushable: threshold } = this
|
||||
const diffToNext = direction * (bounds[nextHandle] - nextValue)
|
||||
if (!this.pushHandle(bounds, nextHandle, direction, threshold - diffToNext)) {
|
||||
// couldn't push next handle, so we won't push this one either
|
||||
return false
|
||||
}
|
||||
// push the handle
|
||||
bounds[handle] = nextValue
|
||||
return true
|
||||
},
|
||||
trimAlignValue (v, handle, nextProps = {}) {
|
||||
const mergedProps = { ...this, ...nextProps }
|
||||
const valInRange = utils.ensureValueInRange(v, mergedProps)
|
||||
const valNotConflict = this.ensureValueNotConflict(handle, valInRange, mergedProps)
|
||||
return utils.ensureValuePrecision(valNotConflict, mergedProps)
|
||||
},
|
||||
ensureValueNotConflict (handle, val, { allowCross, pushable: thershold }) {
|
||||
const state = this.$data || {}
|
||||
const { bounds } = state
|
||||
handle = handle === undefined ? state.handle : handle
|
||||
thershold = Number(thershold)
|
||||
/* eslint-disable eqeqeq */
|
||||
if (!allowCross && handle != null && bounds !== undefined) {
|
||||
if (handle > 0 && val <= (bounds[handle - 1] + thershold)) {
|
||||
return bounds[handle - 1] + thershold
|
||||
}
|
||||
if (handle < bounds.length - 1 && val >= (bounds[handle + 1] - thershold)) {
|
||||
return bounds[handle + 1] - thershold
|
||||
}
|
||||
}
|
||||
const points = Object.keys(pointsObject).map(parseFloat);
|
||||
points.sort((a, b) => a - b);
|
||||
this._getPointsCache = { marks, step, points };
|
||||
}
|
||||
return this._getPointsCache.points;
|
||||
}
|
||||
|
||||
moveTo(value, isFromKeyboardEvent) {
|
||||
const { state, props } = this;
|
||||
const nextBounds = [...state.bounds];
|
||||
nextBounds[state.handle] = value;
|
||||
let nextHandle = state.handle;
|
||||
if (props.pushable !== false) {
|
||||
this.pushSurroundingHandles(nextBounds, nextHandle);
|
||||
} else if (props.allowCross) {
|
||||
nextBounds.sort((a, b) => a - b);
|
||||
nextHandle = nextBounds.indexOf(value);
|
||||
}
|
||||
this.onChange({
|
||||
handle: nextHandle,
|
||||
bounds: nextBounds,
|
||||
});
|
||||
if (isFromKeyboardEvent) {
|
||||
// known problem: because setState is async,
|
||||
// so trigger focus will invoke handler's onEnd and another handler's onStart too early,
|
||||
// cause onBeforeChange and onAfterChange receive wrong value.
|
||||
// here use setState callback to hack，but not elegant
|
||||
this.setState({}, () => {
|
||||
this.handlesRefs[nextHandle].focus();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
pushSurroundingHandles(bounds, handle) {
|
||||
const value = bounds[handle];
|
||||
let { pushable: threshold } = this.props;
|
||||
threshold = Number(threshold);
|
||||
|
||||
let direction = 0;
|
||||
if (bounds[handle + 1] - value < threshold) {
|
||||
direction = +1; // push to right
|
||||
}
|
||||
if (value - bounds[handle - 1] < threshold) {
|
||||
direction = -1; // push to left
|
||||
}
|
||||
|
||||
if (direction === 0) { return; }
|
||||
|
||||
const nextHandle = handle + direction;
|
||||
const diffToNext = direction * (bounds[nextHandle] - value);
|
||||
if (!this.pushHandle(bounds, nextHandle, direction, threshold - diffToNext)) {
|
||||
// revert to original value if pushing is impossible
|
||||
bounds[handle] = bounds[nextHandle] - (direction * threshold);
|
||||
}
|
||||
}
|
||||
|
||||
pushHandle(bounds, handle, direction, amount) {
|
||||
const originalValue = bounds[handle];
|
||||
let currentValue = bounds[handle];
|
||||
while (direction * (currentValue - originalValue) < amount) {
|
||||
if (!this.pushHandleOnePoint(bounds, handle, direction)) {
|
||||
// can't push handle enough to create the needed `amount` gap, so we
|
||||
// revert its position to the original value
|
||||
bounds[handle] = originalValue;
|
||||
return false;
|
||||
}
|
||||
currentValue = bounds[handle];
|
||||
}
|
||||
// the handle was pushed enough to create the needed `amount` gap
|
||||
return true;
|
||||
}
|
||||
|
||||
pushHandleOnePoint(bounds, handle, direction) {
|
||||
const points = this.getPoints();
|
||||
const pointIndex = points.indexOf(bounds[handle]);
|
||||
const nextPointIndex = pointIndex + direction;
|
||||
if (nextPointIndex >= points.length || nextPointIndex < 0) {
|
||||
// reached the minimum or maximum available point, can't push anymore
|
||||
return false;
|
||||
}
|
||||
const nextHandle = handle + direction;
|
||||
const nextValue = points[nextPointIndex];
|
||||
const { pushable: threshold } = this.props;
|
||||
const diffToNext = direction * (bounds[nextHandle] - nextValue);
|
||||
if (!this.pushHandle(bounds, nextHandle, direction, threshold - diffToNext)) {
|
||||
// couldn't push next handle, so we won't push this one either
|
||||
return false;
|
||||
}
|
||||
// push the handle
|
||||
bounds[handle] = nextValue;
|
||||
return true;
|
||||
}
|
||||
|
||||
trimAlignValue(v, handle, nextProps = {}) {
|
||||
const mergedProps = { ...this.props, ...nextProps };
|
||||
const valInRange = utils.ensureValueInRange(v, mergedProps);
|
||||
const valNotConflict = this.ensureValueNotConflict(handle, valInRange, mergedProps);
|
||||
return utils.ensureValuePrecision(valNotConflict, mergedProps);
|
||||
}
|
||||
|
||||
ensureValueNotConflict(handle, val, { allowCross, pushable: thershold }) {
|
||||
const state = this.state || {};
|
||||
const { bounds } = state;
|
||||
handle = handle === undefined ? state.handle : handle;
|
||||
thershold = Number(thershold);
|
||||
/* eslint-disable eqeqeq */
|
||||
if (!allowCross && handle != null && bounds !== undefined) {
|
||||
if (handle > 0 && val <= (bounds[handle - 1] + thershold)) {
|
||||
return bounds[handle - 1] + thershold;
|
||||
}
|
||||
if (handle < bounds.length - 1 && val >= (bounds[handle + 1] - thershold)) {
|
||||
return bounds[handle + 1] - thershold;
|
||||
}
|
||||
}
|
||||
/* eslint-enable eqeqeq */
|
||||
return val;
|
||||
}
|
||||
|
||||
render() {
|
||||
/* eslint-enable eqeqeq */
|
||||
return val
|
||||
},
|
||||
},
|
||||
render () {
|
||||
const {
|
||||
handle,
|
||||
bounds,
|
||||
} = this.state;
|
||||
const {
|
||||
prefixCls,
|
||||
vertical,
|
||||
included,
|
||||
@ -332,11 +313,11 @@ class Range extends React.Component {
|
||||
trackStyle,
|
||||
handleStyle,
|
||||
tabIndex,
|
||||
} = this.props;
|
||||
} = this
|
||||
|
||||
const offsets = bounds.map(v => this.calcOffset(v));
|
||||
const offsets = bounds.map(v => this.calcOffset(v))
|
||||
|
||||
const handleClassName = `${prefixCls}-handle`;
|
||||
const handleClassName = `${prefixCls}-handle`
|
||||
const handles = bounds.map((v, i) => handleGenerator({
|
||||
className: classNames({
|
||||
[handleClassName]: true,
|
||||
@ -354,14 +335,14 @@ class Range extends React.Component {
|
||||
disabled,
|
||||
style: handleStyle[i],
|
||||
ref: h => this.saveHandle(i, h),
|
||||
}));
|
||||
}))
|
||||
|
||||
const tracks = bounds.slice(0, -1).map((_, index) => {
|
||||
const i = index + 1;
|
||||
const i = index + 1
|
||||
const trackClassName = classNames({
|
||||
[`${prefixCls}-track`]: true,
|
||||
[`${prefixCls}-track-${i}`]: true,
|
||||
});
|
||||
})
|
||||
return (
|
||||
<Track
|
||||
className={trackClassName}
|
||||
@ -372,11 +353,11 @@ class Range extends React.Component {
|
||||
style={trackStyle[index]}
|
||||
key={i}
|
||||
/>
|
||||
);
|
||||
});
|
||||
)
|
||||
})
|
||||
|
||||
return { tracks, handles };
|
||||
}
|
||||
return { tracks, handles }
|
||||
},
|
||||
}
|
||||
|
||||
export default createSlider(Range);
|
||||
export default createSlider(Range)
|
||||
|
||||
@ -1,142 +1,142 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import warning from 'warning'
|
||||
import PropTypes from '../../../_util/vue-types'
|
||||
import warning from '../../../_util/warning'
|
||||
import BaseMixin from '../../../_util/BaseMixin'
|
||||
import { hasProp } from '../../../_util/props-util'
|
||||
import Track from './common/Track'
|
||||
import createSlider from './common/createSlider'
|
||||
import * as utils from './utils'
|
||||
|
||||
class Slider extends React.Component {
|
||||
static propTypes = {
|
||||
const Slider = {
|
||||
mixins: [BaseMixin],
|
||||
props: {
|
||||
defaultValue: PropTypes.number,
|
||||
value: PropTypes.number,
|
||||
disabled: PropTypes.bool,
|
||||
autoFocus: PropTypes.bool,
|
||||
tabIndex: PropTypes.number,
|
||||
};
|
||||
},
|
||||
data () {
|
||||
const defaultValue = this.defaultValue !== undefined
|
||||
? this.defaultValue : this.min
|
||||
const value = this.value !== undefined
|
||||
? this.value : defaultValue
|
||||
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
const defaultValue = props.defaultValue !== undefined
|
||||
? props.defaultValue : props.min
|
||||
const value = props.value !== undefined
|
||||
? props.value : defaultValue
|
||||
|
||||
this.state = {
|
||||
value: this.trimAlignValue(value),
|
||||
dragging: false,
|
||||
}
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
warning(
|
||||
!('minimumTrackStyle' in props),
|
||||
!hasProp(this, 'minimumTrackStyle'),
|
||||
'minimumTrackStyle will be deprecate, please use trackStyle instead.'
|
||||
)
|
||||
warning(
|
||||
!('maximumTrackStyle' in props),
|
||||
!hasProp(this, 'maximumTrackStyle'),
|
||||
'maximumTrackStyle will be deprecate, please use railStyle instead.'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
const { autoFocus, disabled } = this.props
|
||||
if (autoFocus && !disabled) {
|
||||
this.focus()
|
||||
return {
|
||||
sValue: this.trimAlignValue(value),
|
||||
dragging: false,
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
const { autoFocus, disabled } = this
|
||||
if (autoFocus && !disabled) {
|
||||
this.focus()
|
||||
}
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler (val) {
|
||||
const { min, max } = this
|
||||
this.setChangeValue(val, min, max)
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
min (val) {
|
||||
const { sValue, max } = this
|
||||
this.setChangeValue(sValue, val, max)
|
||||
},
|
||||
max (val) {
|
||||
const { sValue, min } = this
|
||||
this.setChangeValue(sValue, min, val)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setChangeValue (value, min, max) {
|
||||
const minAmaxProps = {
|
||||
min,
|
||||
max,
|
||||
}
|
||||
const newValue = value !== undefined
|
||||
? value : this.sValue
|
||||
const nextValue = this.trimAlignValue(newValue, minAmaxProps)
|
||||
if (nextValue === this.sValue) return
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
if (!('value' in nextProps || 'min' in nextProps || 'max' in nextProps)) return
|
||||
this.setState({ sValue: nextValue })
|
||||
if (utils.isValueOutOfRange(newValue, minAmaxProps)) {
|
||||
this.$emit('change', nextValue)
|
||||
}
|
||||
},
|
||||
onChange (state) {
|
||||
const isNotControlled = !hasProp(this, 'value')
|
||||
if (isNotControlled) {
|
||||
this.setState(state)
|
||||
}
|
||||
|
||||
const prevValue = this.state.value
|
||||
const value = nextProps.value !== undefined
|
||||
? nextProps.value : prevValue
|
||||
const nextValue = this.trimAlignValue(value, nextProps)
|
||||
if (nextValue === prevValue) return
|
||||
const changedValue = state.sValue
|
||||
this.$emit('change', changedValue)
|
||||
},
|
||||
onStart (position) {
|
||||
this.setState({ dragging: true })
|
||||
const { sValue } = this
|
||||
this.$emit('beforeChange', sValue)
|
||||
|
||||
this.setState({ value: nextValue })
|
||||
if (utils.isValueOutOfRange(value, nextProps)) {
|
||||
this.props.onChange(nextValue)
|
||||
}
|
||||
}
|
||||
const value = this.calcValueByPos(position)
|
||||
|
||||
onChange (state) {
|
||||
const props = this.props
|
||||
const isNotControlled = !('value' in props)
|
||||
if (isNotControlled) {
|
||||
this.setState(state)
|
||||
}
|
||||
if (value === sValue) return
|
||||
|
||||
const changedValue = state.value
|
||||
props.onChange(changedValue)
|
||||
}
|
||||
this.prevMovedHandleIndex = 0
|
||||
|
||||
onStart (position) {
|
||||
this.setState({ dragging: true })
|
||||
const props = this.props
|
||||
const prevValue = this.getValue()
|
||||
props.onBeforeChange(prevValue)
|
||||
|
||||
const value = this.calcValueByPos(position)
|
||||
this.startValue = value
|
||||
this.startPosition = position
|
||||
|
||||
if (value === prevValue) return
|
||||
|
||||
this.prevMovedHandleIndex = 0
|
||||
|
||||
this.onChange({ value })
|
||||
}
|
||||
|
||||
onEnd = () => {
|
||||
this.setState({ dragging: false })
|
||||
this.removeDocumentEvents()
|
||||
this.props.onAfterChange(this.getValue())
|
||||
}
|
||||
|
||||
onMove (e, position) {
|
||||
utils.pauseEvent(e)
|
||||
const { value: oldValue } = this.state
|
||||
const value = this.calcValueByPos(position)
|
||||
if (value === oldValue) return
|
||||
|
||||
this.onChange({ value })
|
||||
}
|
||||
|
||||
onKeyboard (e) {
|
||||
const valueMutator = utils.getKeyboardValueMutator(e)
|
||||
|
||||
if (valueMutator) {
|
||||
this.onChange({ sValue: value })
|
||||
},
|
||||
onEnd () {
|
||||
this.setState({ dragging: false })
|
||||
this.removeDocumentEvents()
|
||||
this.$emit('afterChange', this.sValue)
|
||||
},
|
||||
onMove (e, position) {
|
||||
utils.pauseEvent(e)
|
||||
const state = this.state
|
||||
const oldValue = state.value
|
||||
const mutatedValue = valueMutator(oldValue, this.props)
|
||||
const value = this.trimAlignValue(mutatedValue)
|
||||
if (value === oldValue) return
|
||||
const { sValue } = this
|
||||
const value = this.calcValueByPos(position)
|
||||
if (value === sValue) return
|
||||
|
||||
this.onChange({ value })
|
||||
}
|
||||
}
|
||||
this.onChange({ sValue: value })
|
||||
},
|
||||
onKeyboard (e) {
|
||||
const valueMutator = utils.getKeyboardValueMutator(e)
|
||||
|
||||
getValue () {
|
||||
return this.state.value
|
||||
}
|
||||
|
||||
getLowerBound () {
|
||||
return this.props.min
|
||||
}
|
||||
|
||||
getUpperBound () {
|
||||
return this.state.value
|
||||
}
|
||||
|
||||
trimAlignValue (v, nextProps = {}) {
|
||||
const mergedProps = { ...this.props, ...nextProps }
|
||||
const val = utils.ensureValueInRange(v, mergedProps)
|
||||
return utils.ensureValuePrecision(val, mergedProps)
|
||||
}
|
||||
if (valueMutator) {
|
||||
utils.pauseEvent(e)
|
||||
const { sValue } = this
|
||||
const mutatedValue = valueMutator(sValue, this.$props)
|
||||
const value = this.trimAlignValue(mutatedValue)
|
||||
if (value === sValue) return
|
||||
|
||||
this.onChange({ sValue: value })
|
||||
}
|
||||
},
|
||||
getLowerBound () {
|
||||
return this.min
|
||||
},
|
||||
getUpperBound () {
|
||||
return this.sValue
|
||||
},
|
||||
trimAlignValue (v, nextProps = {}) {
|
||||
const mergedProps = { ...this.$props, ...nextProps }
|
||||
const val = utils.ensureValueInRange(v, mergedProps)
|
||||
return utils.ensureValuePrecision(val, mergedProps)
|
||||
},
|
||||
},
|
||||
render () {
|
||||
const {
|
||||
prefixCls,
|
||||
@ -150,7 +150,7 @@ class Slider extends React.Component {
|
||||
min,
|
||||
max,
|
||||
handle: handleGenerator,
|
||||
} = this.props
|
||||
} = this
|
||||
const { value, dragging } = this.state
|
||||
const offset = this.calcOffset(value)
|
||||
const handle = handleGenerator({
|
||||
@ -183,9 +183,8 @@ class Slider extends React.Component {
|
||||
}}
|
||||
/>
|
||||
)
|
||||
|
||||
return { tracks: track, handles: handle }
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
export default createSlider(Slider)
|
||||
|
||||
@ -1,66 +1,71 @@
|
||||
import React from 'react'
|
||||
import classNames from 'classnames'
|
||||
|
||||
const Marks = ({
|
||||
className,
|
||||
vertical,
|
||||
marks,
|
||||
included,
|
||||
upperBound,
|
||||
lowerBound,
|
||||
max, min,
|
||||
onClickLabel,
|
||||
}) => {
|
||||
const marksKeys = Object.keys(marks)
|
||||
const marksCount = marksKeys.length
|
||||
const unit = marksCount > 1 ? 100 / (marksCount - 1) : 100
|
||||
const markWidth = unit * 0.9
|
||||
const Marks = {
|
||||
functional: true,
|
||||
render (createElement, context) {
|
||||
const {
|
||||
className,
|
||||
vertical,
|
||||
marks,
|
||||
included,
|
||||
upperBound,
|
||||
lowerBound,
|
||||
max, min,
|
||||
} = context.props
|
||||
const { clickLabel } = context.listeners
|
||||
const marksKeys = Object.keys(marks)
|
||||
const marksCount = marksKeys.length
|
||||
const unit = marksCount > 1 ? 100 / (marksCount - 1) : 100
|
||||
const markWidth = unit * 0.9
|
||||
|
||||
const range = max - min
|
||||
const elements = marksKeys.map(parseFloat).sort((a, b) => a - b).map(point => {
|
||||
const markPoint = marks[point]
|
||||
const markPointIsObject = typeof markPoint === 'object' &&
|
||||
!React.isValidElement(markPoint)
|
||||
const markLabel = markPointIsObject ? markPoint.label : markPoint
|
||||
if (!markLabel && markLabel !== 0) {
|
||||
return null
|
||||
}
|
||||
const range = max - min
|
||||
const elements = marksKeys.map(parseFloat).sort((a, b) => a - b).map(point => {
|
||||
const markPoint = marks[point]
|
||||
// todo
|
||||
// const markPointIsObject = typeof markPoint === 'object' &&
|
||||
// !React.isValidElement(markPoint)
|
||||
const markPointIsObject = typeof markPoint === 'object'
|
||||
const markLabel = markPointIsObject ? markPoint.label : markPoint
|
||||
if (!markLabel && markLabel !== 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
const isActive = (!included && point === upperBound) ||
|
||||
(included && point <= upperBound && point >= lowerBound)
|
||||
const markClassName = classNames({
|
||||
[`${className}-text`]: true,
|
||||
[`${className}-text-active`]: isActive,
|
||||
const isActive = (!included && point === upperBound) ||
|
||||
(included && point <= upperBound && point >= lowerBound)
|
||||
const markClassName = classNames({
|
||||
[`${className}-text`]: true,
|
||||
[`${className}-text-active`]: isActive,
|
||||
})
|
||||
|
||||
const bottomStyle = {
|
||||
marginBottom: '-50%',
|
||||
bottom: `${(point - min) / range * 100}%`,
|
||||
}
|
||||
|
||||
const leftStyle = {
|
||||
width: `${markWidth}%`,
|
||||
marginLeft: `${-markWidth / 2}%`,
|
||||
left: `${(point - min) / range * 100}%`,
|
||||
}
|
||||
|
||||
const style = vertical ? bottomStyle : leftStyle
|
||||
const markStyle = markPointIsObject
|
||||
? { ...style, ...markPoint.style } : style
|
||||
return (
|
||||
<span
|
||||
class={markClassName}
|
||||
style={markStyle}
|
||||
key={point}
|
||||
onMouseDown={(e) => clickLabel(e, point)}
|
||||
onTouchStart={(e) => clickLabel(e, point)}
|
||||
>
|
||||
{markLabel}
|
||||
</span>
|
||||
)
|
||||
})
|
||||
|
||||
const bottomStyle = {
|
||||
marginBottom: '-50%',
|
||||
bottom: `${(point - min) / range * 100}%`,
|
||||
}
|
||||
|
||||
const leftStyle = {
|
||||
width: `${markWidth}%`,
|
||||
marginLeft: `${-markWidth / 2}%`,
|
||||
left: `${(point - min) / range * 100}%`,
|
||||
}
|
||||
|
||||
const style = vertical ? bottomStyle : leftStyle
|
||||
const markStyle = markPointIsObject
|
||||
? { ...style, ...markPoint.style } : style
|
||||
return (
|
||||
<span
|
||||
className={markClassName}
|
||||
style={markStyle}
|
||||
key={point}
|
||||
onMouseDown={(e) => onClickLabel(e, point)}
|
||||
onTouchStart={(e) => onClickLabel(e, point)}
|
||||
>
|
||||
{markLabel}
|
||||
</span>
|
||||
)
|
||||
})
|
||||
|
||||
return <div className={className}>{elements}</div>
|
||||
};
|
||||
return <div class={className}>{elements}</div>
|
||||
},
|
||||
}
|
||||
|
||||
export default Marks
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React from 'react'
|
||||
import classNames from 'classnames'
|
||||
import warning from 'warning'
|
||||
import warning from '../../../_util/warning'
|
||||
|
||||
const calcPoints = (vertical, marks, dots, step, min, max) => {
|
||||
warning(
|
||||
@ -17,28 +16,32 @@ const calcPoints = (vertical, marks, dots, step, min, max) => {
|
||||
return points
|
||||
}
|
||||
|
||||
const Steps = ({ prefixCls, vertical, marks, dots, step, included,
|
||||
lowerBound, upperBound, max, min, dotStyle, activeDotStyle }) => {
|
||||
const range = max - min
|
||||
const elements = calcPoints(vertical, marks, dots, step, min, max).map((point) => {
|
||||
const offset = `${Math.abs(point - min) / range * 100}%`
|
||||
const Steps = {
|
||||
functional: true,
|
||||
render (createElement, context) {
|
||||
const { prefixCls, vertical, marks, dots, step, included,
|
||||
lowerBound, upperBound, max, min, dotStyle, activeDotStyle } = context.data
|
||||
const range = max - min
|
||||
const elements = calcPoints(vertical, marks, dots, step, min, max).map((point) => {
|
||||
const offset = `${Math.abs(point - min) / range * 100}%`
|
||||
|
||||
const isActived = (!included && point === upperBound) ||
|
||||
(included && point <= upperBound && point >= lowerBound)
|
||||
let style = vertical ? { bottom: offset, ...dotStyle } : { left: offset, ...dotStyle }
|
||||
if (isActived) {
|
||||
style = { ...style, ...activeDotStyle }
|
||||
}
|
||||
const isActived = (!included && point === upperBound) ||
|
||||
(included && point <= upperBound && point >= lowerBound)
|
||||
let style = vertical ? { bottom: offset, ...dotStyle } : { left: offset, ...dotStyle }
|
||||
if (isActived) {
|
||||
style = { ...style, ...activeDotStyle }
|
||||
}
|
||||
|
||||
const pointClassName = classNames({
|
||||
[`${prefixCls}-dot`]: true,
|
||||
[`${prefixCls}-dot-active`]: isActived,
|
||||
const pointClassName = classNames({
|
||||
[`${prefixCls}-dot`]: true,
|
||||
[`${prefixCls}-dot-active`]: isActived,
|
||||
})
|
||||
|
||||
return <span className={pointClassName} style={style} key={point} />
|
||||
})
|
||||
|
||||
return <span className={pointClassName} style={style} key={point} />
|
||||
})
|
||||
|
||||
return <div className={`${prefixCls}-step`}>{elements}</div>
|
||||
return <div className={`${prefixCls}-step`}>{elements}</div>
|
||||
},
|
||||
}
|
||||
|
||||
export default Steps
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import addEventListener from 'rc-util/lib/Dom/addEventListener'
|
||||
import classNames from 'classnames'
|
||||
import warning from 'warning'
|
||||
import PropTypes from '../../../_util/vue-types'
|
||||
import addEventListener from '../../../_util/Dom/addEventListener'
|
||||
import warning from '../../../_util/warning'
|
||||
import { initDefaultProps } from '../../../_util/props-util'
|
||||
import Steps from './Steps'
|
||||
import Marks from './Marks'
|
||||
import Handle from '../Handle'
|
||||
@ -11,42 +11,32 @@ import * as utils from '../utils'
|
||||
function noop () {}
|
||||
|
||||
export default function createSlider (Component) {
|
||||
return class ComponentEnhancer extends Component {
|
||||
static displayName = `ComponentEnhancer(${Component.displayName})`;
|
||||
static propTypes = {
|
||||
...Component.propTypes,
|
||||
min: PropTypes.number,
|
||||
max: PropTypes.number,
|
||||
step: PropTypes.number,
|
||||
marks: PropTypes.object,
|
||||
included: PropTypes.bool,
|
||||
className: PropTypes.string,
|
||||
prefixCls: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
children: PropTypes.any,
|
||||
onBeforeChange: PropTypes.func,
|
||||
onChange: PropTypes.func,
|
||||
onAfterChange: PropTypes.func,
|
||||
handle: PropTypes.func,
|
||||
dots: PropTypes.bool,
|
||||
vertical: PropTypes.bool,
|
||||
style: PropTypes.object,
|
||||
minimumTrackStyle: PropTypes.object, // just for compatibility, will be deperecate
|
||||
maximumTrackStyle: PropTypes.object, // just for compatibility, will be deperecate
|
||||
handleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
|
||||
trackStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
|
||||
railStyle: PropTypes.object,
|
||||
dotStyle: PropTypes.object,
|
||||
activeDotStyle: PropTypes.object,
|
||||
autoFocus: PropTypes.bool,
|
||||
onFocus: PropTypes.func,
|
||||
onBlur: PropTypes.func,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
// const displayName = `ComponentEnhancer(${Component.displayName})`
|
||||
const propTypes = {
|
||||
...Component.propTypes,
|
||||
min: PropTypes.number,
|
||||
max: PropTypes.number,
|
||||
step: PropTypes.number,
|
||||
marks: PropTypes.object,
|
||||
included: PropTypes.bool,
|
||||
prefixCls: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
handle: PropTypes.func,
|
||||
dots: PropTypes.bool,
|
||||
vertical: PropTypes.bool,
|
||||
minimumTrackStyle: PropTypes.object, // just for compatibility, will be deperecate
|
||||
maximumTrackStyle: PropTypes.object, // just for compatibility, will be deperecate
|
||||
handleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
|
||||
trackStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
|
||||
railStyle: PropTypes.object,
|
||||
dotStyle: PropTypes.object,
|
||||
activeDotStyle: PropTypes.object,
|
||||
autoFocus: PropTypes.bool,
|
||||
}
|
||||
return {
|
||||
props: initDefaultProps(propTypes, {
|
||||
...Component.defaultProps,
|
||||
prefixCls: 'rc-slider',
|
||||
className: '',
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
@ -55,9 +45,6 @@ export default function createSlider (Component) {
|
||||
delete restProps.dragging
|
||||
return <Handle {...restProps} key={index} />
|
||||
},
|
||||
onBeforeChange: noop,
|
||||
onChange: noop,
|
||||
onAfterChange: noop,
|
||||
included: true,
|
||||
disabled: false,
|
||||
dots: false,
|
||||
@ -67,13 +54,10 @@ export default function createSlider (Component) {
|
||||
railStyle: {},
|
||||
dotStyle: {},
|
||||
activeDotStyle: {},
|
||||
};
|
||||
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
}),
|
||||
data () {
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const { step, max, min } = props
|
||||
const { step, max, min } = this
|
||||
warning(
|
||||
step && Math.floor(step) === step ? (max - min) % step === 0 : true,
|
||||
'Slider[max] - Slider[min] (%s) should be a multiple of Slider[step] (%s)',
|
||||
@ -82,190 +66,163 @@ export default function createSlider (Component) {
|
||||
)
|
||||
}
|
||||
this.handlesRefs = {}
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
if (super.componentWillUnmount) super.componentWillUnmount()
|
||||
this.removeDocumentEvents()
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
// Snapshot testing cannot handle refs, so be sure to null-check this.
|
||||
this.document = this.sliderRef && this.sliderRef.ownerDocument
|
||||
}
|
||||
|
||||
onMouseDown = (e) => {
|
||||
if (e.button !== 0) { return }
|
||||
|
||||
const isVertical = this.props.vertical
|
||||
let position = utils.getMousePosition(isVertical, e)
|
||||
if (!utils.isEventFromHandle(e, this.handlesRefs)) {
|
||||
this.dragOffset = 0
|
||||
} else {
|
||||
const handlePosition = utils.getHandleCenterPosition(isVertical, e.target)
|
||||
this.dragOffset = position - handlePosition
|
||||
position = handlePosition
|
||||
}
|
||||
this.removeDocumentEvents()
|
||||
this.onStart(position)
|
||||
this.addDocumentMouseEvents()
|
||||
}
|
||||
|
||||
onTouchStart = (e) => {
|
||||
if (utils.isNotTouchEvent(e)) return
|
||||
|
||||
const isVertical = this.props.vertical
|
||||
let position = utils.getTouchPosition(isVertical, e)
|
||||
if (!utils.isEventFromHandle(e, this.handlesRefs)) {
|
||||
this.dragOffset = 0
|
||||
} else {
|
||||
const handlePosition = utils.getHandleCenterPosition(isVertical, e.target)
|
||||
this.dragOffset = position - handlePosition
|
||||
position = handlePosition
|
||||
}
|
||||
this.onStart(position)
|
||||
this.addDocumentTouchEvents()
|
||||
utils.pauseEvent(e)
|
||||
}
|
||||
|
||||
onFocus = (e) => {
|
||||
const { onFocus, vertical } = this.props
|
||||
if (utils.isEventFromHandle(e, this.handlesRefs)) {
|
||||
const handlePosition = utils.getHandleCenterPosition(vertical, e.target)
|
||||
this.dragOffset = 0
|
||||
this.onStart(handlePosition)
|
||||
utils.pauseEvent(e)
|
||||
if (onFocus) {
|
||||
onFocus(e)
|
||||
return {}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$nextTick(() => {
|
||||
// if (super.componentWillUnmount) super.componentWillUnmount()
|
||||
this.removeDocumentEvents()
|
||||
})
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
// Snapshot testing cannot handle refs, so be sure to null-check this.
|
||||
this.document = this.$refs.sliderRef && this.$refs.sliderRef.ownerDocument
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
onMouseDown (e) {
|
||||
if (e.button !== 0) { return }
|
||||
const isVertical = this.vertical
|
||||
let position = utils.getMousePosition(isVertical, e)
|
||||
if (!utils.isEventFromHandle(e, this.handlesRefs)) {
|
||||
this.dragOffset = 0
|
||||
} else {
|
||||
const handlePosition = utils.getHandleCenterPosition(isVertical, e.target)
|
||||
this.dragOffset = position - handlePosition
|
||||
position = handlePosition
|
||||
}
|
||||
}
|
||||
}
|
||||
this.removeDocumentEvents()
|
||||
this.onStart(position)
|
||||
this.addDocumentMouseEvents()
|
||||
},
|
||||
onTouchStart (e) {
|
||||
if (utils.isNotTouchEvent(e)) return
|
||||
|
||||
onBlur = (e) => {
|
||||
const { onBlur } = this.props
|
||||
this.onEnd(e)
|
||||
if (onBlur) {
|
||||
onBlur(e)
|
||||
}
|
||||
};
|
||||
const isVertical = this.vertical
|
||||
let position = utils.getTouchPosition(isVertical, e)
|
||||
if (!utils.isEventFromHandle(e, this.handlesRefs)) {
|
||||
this.dragOffset = 0
|
||||
} else {
|
||||
const handlePosition = utils.getHandleCenterPosition(isVertical, e.target)
|
||||
this.dragOffset = position - handlePosition
|
||||
position = handlePosition
|
||||
}
|
||||
this.onStart(position)
|
||||
this.addDocumentTouchEvents()
|
||||
utils.pauseEvent(e)
|
||||
},
|
||||
onFocus (e) {
|
||||
const { vertical } = this
|
||||
if (utils.isEventFromHandle(e, this.handlesRefs)) {
|
||||
const handlePosition = utils.getHandleCenterPosition(vertical, e.target)
|
||||
this.dragOffset = 0
|
||||
this.onStart(handlePosition)
|
||||
utils.pauseEvent(e)
|
||||
this.$emit('focus', e)
|
||||
}
|
||||
},
|
||||
onBlur (e) {
|
||||
this.onEnd(e)
|
||||
this.$emit('blur', e)
|
||||
},
|
||||
addDocumentTouchEvents () {
|
||||
// just work for Chrome iOS Safari and Android Browser
|
||||
this.onTouchMoveListener = addEventListener(this.document, 'touchmove', this.onTouchMove)
|
||||
this.onTouchUpListener = addEventListener(this.document, 'touchend', this.onEnd)
|
||||
},
|
||||
addDocumentMouseEvents () {
|
||||
this.onMouseMoveListener = addEventListener(this.document, 'mousemove', this.onMouseMove)
|
||||
this.onMouseUpListener = addEventListener(this.document, 'mouseup', this.onEnd)
|
||||
},
|
||||
removeDocumentEvents () {
|
||||
/* eslint-disable no-unused-expressions */
|
||||
this.onTouchMoveListener && this.onTouchMoveListener.remove()
|
||||
this.onTouchUpListener && this.onTouchUpListener.remove()
|
||||
|
||||
addDocumentTouchEvents () {
|
||||
// just work for Chrome iOS Safari and Android Browser
|
||||
this.onTouchMoveListener = addEventListener(this.document, 'touchmove', this.onTouchMove)
|
||||
this.onTouchUpListener = addEventListener(this.document, 'touchend', this.onEnd)
|
||||
}
|
||||
this.onMouseMoveListener && this.onMouseMoveListener.remove()
|
||||
this.onMouseUpListener && this.onMouseUpListener.remove()
|
||||
/* eslint-enable no-unused-expressions */
|
||||
},
|
||||
onMouseUp () {
|
||||
if (this.handlesRefs[this.prevMovedHandleIndex]) {
|
||||
this.handlesRefs[this.prevMovedHandleIndex].clickFocus()
|
||||
}
|
||||
},
|
||||
onMouseMove (e) {
|
||||
if (!this.$refs.sliderRef) {
|
||||
this.onEnd()
|
||||
return
|
||||
}
|
||||
const position = utils.getMousePosition(this.vertical, e)
|
||||
this.onMove(e, position - this.dragOffset)
|
||||
},
|
||||
onTouchMove (e) {
|
||||
if (utils.isNotTouchEvent(e) || !this.$refs.sliderRef) {
|
||||
this.onEnd()
|
||||
return
|
||||
}
|
||||
|
||||
addDocumentMouseEvents () {
|
||||
this.onMouseMoveListener = addEventListener(this.document, 'mousemove', this.onMouseMove)
|
||||
this.onMouseUpListener = addEventListener(this.document, 'mouseup', this.onEnd)
|
||||
}
|
||||
const position = utils.getTouchPosition(this.vertical, e)
|
||||
this.onMove(e, position - this.dragOffset)
|
||||
},
|
||||
onKeyDown (e) {
|
||||
if (this.$refs.sliderRef && utils.isEventFromHandle(e, this.handlesRefs)) {
|
||||
this.onKeyboard(e)
|
||||
}
|
||||
},
|
||||
focus () {
|
||||
if (!this.disabled) {
|
||||
this.handlesRefs[0].focus()
|
||||
}
|
||||
},
|
||||
blur () {
|
||||
if (!this.disabled) {
|
||||
this.handlesRefs[0].blur()
|
||||
}
|
||||
},
|
||||
getSliderStart () {
|
||||
const slider = this.$refs.sliderRef
|
||||
const rect = slider.getBoundingClientRect()
|
||||
|
||||
removeDocumentEvents () {
|
||||
/* eslint-disable no-unused-expressions */
|
||||
this.onTouchMoveListener && this.onTouchMoveListener.remove()
|
||||
this.onTouchUpListener && this.onTouchUpListener.remove()
|
||||
|
||||
this.onMouseMoveListener && this.onMouseMoveListener.remove()
|
||||
this.onMouseUpListener && this.onMouseUpListener.remove()
|
||||
/* eslint-enable no-unused-expressions */
|
||||
}
|
||||
|
||||
onMouseUp = () => {
|
||||
if (this.handlesRefs[this.prevMovedHandleIndex]) {
|
||||
this.handlesRefs[this.prevMovedHandleIndex].clickFocus()
|
||||
}
|
||||
}
|
||||
|
||||
onMouseMove = (e) => {
|
||||
if (!this.sliderRef) {
|
||||
this.onEnd()
|
||||
return;
|
||||
}
|
||||
const position = utils.getMousePosition(this.props.vertical, e)
|
||||
this.onMove(e, position - this.dragOffset)
|
||||
}
|
||||
|
||||
onTouchMove = (e) => {
|
||||
if (utils.isNotTouchEvent(e) || !this.sliderRef) {
|
||||
this.onEnd()
|
||||
return;
|
||||
}
|
||||
|
||||
const position = utils.getTouchPosition(this.props.vertical, e)
|
||||
this.onMove(e, position - this.dragOffset)
|
||||
}
|
||||
|
||||
onKeyDown = (e) => {
|
||||
if (this.sliderRef && utils.isEventFromHandle(e, this.handlesRefs)) {
|
||||
this.onKeyboard(e)
|
||||
}
|
||||
}
|
||||
|
||||
focus () {
|
||||
if (!this.props.disabled) {
|
||||
this.handlesRefs[0].focus()
|
||||
}
|
||||
}
|
||||
|
||||
blur () {
|
||||
if (!this.props.disabled) {
|
||||
this.handlesRefs[0].blur()
|
||||
}
|
||||
}
|
||||
|
||||
getSliderStart () {
|
||||
const slider = this.sliderRef
|
||||
const rect = slider.getBoundingClientRect()
|
||||
|
||||
return this.props.vertical ? rect.top : rect.left
|
||||
}
|
||||
|
||||
getSliderLength () {
|
||||
const slider = this.sliderRef
|
||||
if (!slider) {
|
||||
return 0
|
||||
}
|
||||
|
||||
const coords = slider.getBoundingClientRect()
|
||||
return this.props.vertical ? coords.height : coords.width
|
||||
}
|
||||
|
||||
calcValue (offset) {
|
||||
const { vertical, min, max } = this.props
|
||||
const ratio = Math.abs(Math.max(offset, 0) / this.getSliderLength())
|
||||
const value = vertical ? (1 - ratio) * (max - min) + min : ratio * (max - min) + min
|
||||
return value
|
||||
}
|
||||
|
||||
calcValueByPos (position) {
|
||||
const pixelOffset = position - this.getSliderStart()
|
||||
const nextValue = this.trimAlignValue(this.calcValue(pixelOffset))
|
||||
return nextValue
|
||||
}
|
||||
|
||||
calcOffset (value) {
|
||||
const { min, max } = this.props
|
||||
const ratio = (value - min) / (max - min)
|
||||
return ratio * 100
|
||||
}
|
||||
|
||||
saveSlider = (slider) => {
|
||||
this.sliderRef = slider
|
||||
}
|
||||
|
||||
saveHandle (index, handle) {
|
||||
this.handlesRefs[index] = handle
|
||||
}
|
||||
|
||||
onClickMarkLabel = (e, value) => {
|
||||
e.stopPropagation()
|
||||
this.onChange({ value })
|
||||
}
|
||||
return this.vertical ? rect.top : rect.left
|
||||
},
|
||||
getSliderLength () {
|
||||
const slider = this.$refs.sliderRef
|
||||
if (!slider) {
|
||||
return 0
|
||||
}
|
||||
|
||||
const coords = slider.getBoundingClientRect()
|
||||
return this.vertical ? coords.height : coords.width
|
||||
},
|
||||
calcValue (offset) {
|
||||
const { vertical, min, max } = this
|
||||
const ratio = Math.abs(Math.max(offset, 0) / this.getSliderLength())
|
||||
const value = vertical ? (1 - ratio) * (max - min) + min : ratio * (max - min) + min
|
||||
return value
|
||||
},
|
||||
calcValueByPos (position) {
|
||||
const pixelOffset = position - this.getSliderStart()
|
||||
const nextValue = this.trimAlignValue(this.calcValue(pixelOffset))
|
||||
return nextValue
|
||||
},
|
||||
calcOffset (value) {
|
||||
const { min, max } = this.props
|
||||
const ratio = (value - min) / (max - min)
|
||||
return ratio * 100
|
||||
},
|
||||
saveHandle (index, handle) {
|
||||
this.handlesRefs[index] = handle
|
||||
},
|
||||
onClickMarkLabel (e, value) {
|
||||
e.stopPropagation()
|
||||
this.$emit('change', { value })
|
||||
},
|
||||
},
|
||||
render () {
|
||||
const {
|
||||
prefixCls,
|
||||
className,
|
||||
marks,
|
||||
dots,
|
||||
step,
|
||||
@ -274,35 +231,46 @@ export default function createSlider (Component) {
|
||||
vertical,
|
||||
min,
|
||||
max,
|
||||
children,
|
||||
maximumTrackStyle,
|
||||
style,
|
||||
railStyle,
|
||||
dotStyle,
|
||||
activeDotStyle,
|
||||
} = this.props
|
||||
} = this
|
||||
const { tracks, handles } = super.render()
|
||||
|
||||
const sliderClassName = classNames(prefixCls, {
|
||||
[`${prefixCls}-with-marks`]: Object.keys(marks).length,
|
||||
[`${prefixCls}-disabled`]: disabled,
|
||||
[`${prefixCls}-vertical`]: vertical,
|
||||
[className]: className,
|
||||
})
|
||||
const markProps = {
|
||||
props: {
|
||||
vertical,
|
||||
marks,
|
||||
included,
|
||||
lowerBound: this.getLowerBound(),
|
||||
upperBound: this.getUpperBound(),
|
||||
max,
|
||||
min,
|
||||
className: `${prefixCls}-mark`,
|
||||
},
|
||||
on: {
|
||||
clickLabel: disabled ? noop : this.onClickMarkLabel,
|
||||
},
|
||||
}
|
||||
return (
|
||||
<div
|
||||
ref={this.saveSlider}
|
||||
className={sliderClassName}
|
||||
ref='sliderRef'
|
||||
class={sliderClassName}
|
||||
onTouchStart={disabled ? noop : this.onTouchStart}
|
||||
onMouseDown={disabled ? noop : this.onMouseDown}
|
||||
onMouseUp={disabled ? noop : this.onMouseUp}
|
||||
onKeyDown={disabled ? noop : this.onKeyDown}
|
||||
onFocus={disabled ? noop : this.onFocus}
|
||||
onBlur={disabled ? noop : this.onBlur}
|
||||
style={style}
|
||||
>
|
||||
<div
|
||||
className={`${prefixCls}-rail`}
|
||||
class={`${prefixCls}-rail`}
|
||||
style={{
|
||||
...maximumTrackStyle,
|
||||
...railStyle,
|
||||
@ -325,19 +293,11 @@ export default function createSlider (Component) {
|
||||
/>
|
||||
{handles}
|
||||
<Marks
|
||||
className={`${prefixCls}-mark`}
|
||||
onClickLabel={disabled ? noop : this.onClickMarkLabel}
|
||||
vertical={vertical}
|
||||
marks={marks}
|
||||
included={included}
|
||||
lowerBound={this.getLowerBound()}
|
||||
upperBound={this.getUpperBound()}
|
||||
max={max}
|
||||
min={min}
|
||||
{...markProps}
|
||||
/>
|
||||
{children}
|
||||
{this.$slots.default}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,80 +1,91 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Tooltip from 'rc-tooltip';
|
||||
import Handle from './Handle';
|
||||
import PropTypes from '../../../_util/vue-types'
|
||||
import BaseMixin from '../../../_util/BaseMixin'
|
||||
import Tooltip from '../../vc-tooltip'
|
||||
import Handle from './Handle'
|
||||
|
||||
export default function createSliderWithTooltip(Component) {
|
||||
return class ComponentWrapper extends React.Component {
|
||||
static propTypes = {
|
||||
tipFormatter: PropTypes.func,
|
||||
handleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
|
||||
tipProps: PropTypes.object,
|
||||
};
|
||||
static defaultProps = {
|
||||
tipFormatter(value) { return value; },
|
||||
handleStyle: [{}],
|
||||
tipProps: {},
|
||||
};
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { visibles: {} };
|
||||
}
|
||||
handleTooltipVisibleChange = (index, visible) => {
|
||||
this.setState((prevState) => {
|
||||
return {
|
||||
visibles: {
|
||||
...prevState.visibles,
|
||||
[index]: visible,
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
handleWithTooltip = ({ value, dragging, index, disabled, ...restProps }) => {
|
||||
const {
|
||||
tipFormatter,
|
||||
tipProps,
|
||||
handleStyle,
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
prefixCls = 'rc-slider-tooltip',
|
||||
overlay = tipFormatter(value),
|
||||
placement = 'top',
|
||||
visible = visible || false,
|
||||
...restTooltipProps,
|
||||
} = tipProps;
|
||||
|
||||
let handleStyleWithIndex;
|
||||
if (Array.isArray(handleStyle)) {
|
||||
handleStyleWithIndex = handleStyle[index] || handleStyle[0];
|
||||
} else {
|
||||
handleStyleWithIndex = handleStyle;
|
||||
export default function createSliderWithTooltip (Component) {
|
||||
return {
|
||||
mixins: [BaseMixin],
|
||||
props: {
|
||||
tipFormatter: PropTypes.func.def((value) => { return value }),
|
||||
handleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]).def([{}]),
|
||||
tipProps: PropTypes.object.def({}),
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visibles: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTooltipVisibleChange (index, visible) {
|
||||
this.setState((prevState) => {
|
||||
return {
|
||||
visibles: {
|
||||
...prevState.visibles,
|
||||
[index]: visible,
|
||||
},
|
||||
}
|
||||
})
|
||||
},
|
||||
handleWithTooltip ({ value, dragging, index, disabled, ...restProps }) {
|
||||
const {
|
||||
tipFormatter,
|
||||
tipProps,
|
||||
handleStyle,
|
||||
} = this.$props
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
{...restTooltipProps}
|
||||
prefixCls={prefixCls}
|
||||
overlay={overlay}
|
||||
placement={placement}
|
||||
visible={(!disabled && (this.state.visibles[index] || dragging)) || visible}
|
||||
key={index}
|
||||
>
|
||||
const {
|
||||
prefixCls = 'rc-slider-tooltip',
|
||||
overlay = tipFormatter(value),
|
||||
placement = 'top',
|
||||
visible = visible || false,
|
||||
...restTooltipProps } = tipProps
|
||||
|
||||
<Handle
|
||||
{...restProps}
|
||||
style={{
|
||||
...handleStyleWithIndex,
|
||||
}}
|
||||
value={value}
|
||||
onMouseEnter={() => this.handleTooltipVisibleChange(index, true)}
|
||||
onMouseLeave={() => this.handleTooltipVisibleChange(index, false)}
|
||||
/>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
render() {
|
||||
return <Component {...this.props} handle={this.handleWithTooltip} />;
|
||||
}
|
||||
};
|
||||
let handleStyleWithIndex
|
||||
if (Array.isArray(handleStyle)) {
|
||||
handleStyleWithIndex = handleStyle[index] || handleStyle[0]
|
||||
} else {
|
||||
handleStyleWithIndex = handleStyle
|
||||
}
|
||||
|
||||
const tooltipProps = {
|
||||
props: {
|
||||
prefixCls,
|
||||
overlay,
|
||||
placement,
|
||||
visible: (!disabled && (this.visibles[index] || dragging)) || visible,
|
||||
...restTooltipProps,
|
||||
},
|
||||
key: index,
|
||||
}
|
||||
const handleProps = {
|
||||
props: {
|
||||
value,
|
||||
...restProps,
|
||||
},
|
||||
on: {
|
||||
mouseenter: () => this.handleTooltipVisibleChange(index, true),
|
||||
mouseleave: () => this.handleTooltipVisibleChange(index, false),
|
||||
},
|
||||
style: {
|
||||
...handleStyleWithIndex,
|
||||
},
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
{...tooltipProps}
|
||||
>
|
||||
|
||||
<Handle
|
||||
{...handleProps}
|
||||
/>
|
||||
</Tooltip>
|
||||
)
|
||||
},
|
||||
},
|
||||
render () {
|
||||
return <Component {...this.$props} handle={this.handleWithTooltip} />
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import { findDOMNode } from 'react-dom'
|
||||
import keyCode from '../../_util/KeyCode'
|
||||
|
||||
export function isEventFromHandle (e, handles) {
|
||||
return Object.keys(handles)
|
||||
.some(key => e.target === findDOMNode(handles[key]))
|
||||
.some(key => e.target === handles[key])
|
||||
}
|
||||
|
||||
export function isValueOutOfRange (value, { min, max }) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user