94 lines
2.5 KiB
Vue
94 lines
2.5 KiB
Vue
import PropTypes from '../../_util/vue-types';
|
|
import BaseMixin from '../../_util/BaseMixin';
|
|
import Tooltip from '../../vc-tooltip';
|
|
import { getOptionProps } from '../../_util/props-util';
|
|
import Handle from './Handle';
|
|
|
|
export default function createSliderWithTooltip(Component) {
|
|
return {
|
|
mixins: [BaseMixin, Component],
|
|
props: {
|
|
...Component.props,
|
|
tipFormatter: PropTypes.func.def(value => {
|
|
return value;
|
|
}),
|
|
handleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
|
|
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;
|
|
|
|
const {
|
|
prefixCls = 'rc-slider-tooltip',
|
|
overlay = tipFormatter(value),
|
|
placement = 'top',
|
|
visible = false,
|
|
...restTooltipProps
|
|
} = tipProps;
|
|
|
|
let handleStyleWithIndex;
|
|
if (Array.isArray(handleStyle)) {
|
|
handleStyleWithIndex = handleStyle[index] || handleStyle[0];
|
|
} else {
|
|
handleStyleWithIndex = handleStyle;
|
|
}
|
|
|
|
const tooltipProps = {
|
|
props: {
|
|
...restTooltipProps,
|
|
prefixCls,
|
|
overlay,
|
|
placement,
|
|
visible: (!disabled && (this.visibles[index] || dragging)) || visible,
|
|
},
|
|
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() {
|
|
const componentProps = {
|
|
props: {
|
|
...getOptionProps(this),
|
|
handle: this.handleWithTooltip,
|
|
},
|
|
};
|
|
return <Component {...componentProps} />;
|
|
},
|
|
};
|
|
}
|