2018-04-01 19:23:56 +08:00
|
|
|
import PropTypes from '../_util/vue-types'
|
|
|
|
import BaseMixin from '../_util/BaseMixin'
|
|
|
|
import { getOptionProps } from '../_util/props-util'
|
|
|
|
import VcSlider from '../vc-slider/src/Slider'
|
|
|
|
import VcRange from '../vc-slider/src/Range'
|
|
|
|
import VcHandle from '../vc-slider/src/Handle'
|
|
|
|
import Tooltip from '../tooltip'
|
|
|
|
|
|
|
|
// export interface SliderMarks {
|
|
|
|
// [key]: React.ReactNode | {
|
|
|
|
// style: React.CSSProperties,
|
|
|
|
// label: React.ReactNode,
|
|
|
|
// };
|
|
|
|
// }
|
|
|
|
// const SliderMarks = PropTypes.shape({
|
|
|
|
// style: PropTypes.object,
|
|
|
|
// label: PropTypes.any,
|
|
|
|
// }).loose
|
|
|
|
|
|
|
|
export const SliderProps = () => ({
|
|
|
|
prefixCls: PropTypes.string,
|
|
|
|
tooltipPrefixCls: PropTypes.string,
|
|
|
|
range: PropTypes.bool,
|
|
|
|
min: PropTypes.number,
|
|
|
|
max: PropTypes.number,
|
|
|
|
step: PropTypes.oneOfType([PropTypes.number, PropTypes.any]),
|
|
|
|
marks: PropTypes.object,
|
|
|
|
dots: PropTypes.bool,
|
|
|
|
value: PropTypes.oneOfType([
|
|
|
|
PropTypes.number,
|
|
|
|
PropTypes.arrayOf(PropTypes.number),
|
|
|
|
]),
|
|
|
|
defaultValue: PropTypes.oneOfType([
|
|
|
|
PropTypes.number,
|
|
|
|
PropTypes.arrayOf(PropTypes.number),
|
|
|
|
]),
|
|
|
|
included: PropTypes.bool,
|
|
|
|
disabled: PropTypes.bool,
|
|
|
|
vertical: PropTypes.bool,
|
|
|
|
tipFormatter: PropTypes.oneOfType([
|
|
|
|
PropTypes.func,
|
|
|
|
PropTypes.object,
|
|
|
|
]),
|
|
|
|
id: PropTypes.string,
|
|
|
|
})
|
|
|
|
|
2018-09-19 13:21:57 +08:00
|
|
|
const Slider = {
|
2018-04-08 21:17:20 +08:00
|
|
|
name: 'ASlider',
|
2018-04-01 19:23:56 +08:00
|
|
|
model: {
|
|
|
|
prop: 'value',
|
|
|
|
event: 'change',
|
|
|
|
},
|
|
|
|
mixins: [BaseMixin],
|
|
|
|
props: {
|
|
|
|
...SliderProps(),
|
|
|
|
prefixCls: PropTypes.string.def('ant-slider'),
|
|
|
|
tooltipPrefixCls: PropTypes.string.def('ant-tooltip'),
|
|
|
|
tipFormatter: PropTypes.oneOfType([
|
|
|
|
PropTypes.func,
|
|
|
|
PropTypes.object,
|
|
|
|
]).def(value => value.toString()),
|
|
|
|
},
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
visibles: {},
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
toggleTooltipVisible (index, visible) {
|
|
|
|
this.setState(({ visibles }) => ({
|
|
|
|
visibles: {
|
|
|
|
...visibles,
|
|
|
|
[index]: visible,
|
|
|
|
},
|
|
|
|
}))
|
|
|
|
},
|
2018-12-08 12:05:10 +08:00
|
|
|
handleWithTooltip ({ value, dragging, index, ref, ...restProps }) {
|
2018-04-01 19:23:56 +08:00
|
|
|
const { tooltipPrefixCls, tipFormatter } = this.$props
|
|
|
|
const { visibles } = this
|
|
|
|
const visible = tipFormatter ? (visibles[index] || dragging) : false
|
|
|
|
|
|
|
|
const tooltipProps = {
|
|
|
|
props: {
|
|
|
|
prefixCls: tooltipPrefixCls,
|
|
|
|
title: tipFormatter ? tipFormatter(value) : '',
|
|
|
|
visible,
|
|
|
|
placement: 'top',
|
2018-04-14 17:27:50 +08:00
|
|
|
transitionName: 'fade',
|
2018-04-01 19:23:56 +08:00
|
|
|
},
|
|
|
|
key: index,
|
|
|
|
}
|
|
|
|
const handleProps = {
|
|
|
|
props: {
|
|
|
|
value,
|
|
|
|
...restProps,
|
|
|
|
},
|
2018-04-14 16:38:08 +08:00
|
|
|
ref,
|
2018-04-01 19:23:56 +08:00
|
|
|
on: {
|
|
|
|
mouseenter: () => this.toggleTooltipVisible(index, true),
|
|
|
|
mouseleave: () => this.toggleTooltipVisible(index, false),
|
|
|
|
},
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<Tooltip
|
|
|
|
{...tooltipProps}
|
|
|
|
>
|
|
|
|
<VcHandle
|
|
|
|
{...handleProps}
|
|
|
|
/>
|
|
|
|
</Tooltip>
|
|
|
|
)
|
|
|
|
},
|
|
|
|
focus () {
|
|
|
|
this.$refs.sliderRef.focus()
|
|
|
|
},
|
|
|
|
blur () {
|
|
|
|
this.$refs.sliderRef.focus()
|
|
|
|
},
|
|
|
|
},
|
|
|
|
render () {
|
|
|
|
const { range, ...restProps } = getOptionProps(this)
|
|
|
|
if (range) {
|
|
|
|
const vcRangeProps = {
|
|
|
|
props: {
|
|
|
|
...restProps,
|
2018-04-14 16:38:08 +08:00
|
|
|
handle: this.handleWithTooltip,
|
2018-04-01 19:23:56 +08:00
|
|
|
},
|
|
|
|
ref: 'sliderRef',
|
|
|
|
on: this.$listeners,
|
|
|
|
}
|
|
|
|
return <VcRange {...vcRangeProps} />
|
|
|
|
}
|
|
|
|
const vcSliderProps = {
|
|
|
|
props: {
|
|
|
|
...restProps,
|
2018-04-14 16:38:08 +08:00
|
|
|
handle: this.handleWithTooltip,
|
2018-04-01 19:23:56 +08:00
|
|
|
},
|
|
|
|
ref: 'sliderRef',
|
|
|
|
on: this.$listeners,
|
|
|
|
}
|
|
|
|
return <VcSlider {...vcSliderProps} />
|
|
|
|
},
|
|
|
|
}
|
2018-09-19 13:21:57 +08:00
|
|
|
|
|
|
|
/* istanbul ignore next */
|
|
|
|
Slider.install = function (Vue) {
|
|
|
|
Vue.component(Slider.name, Slider)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Slider
|