ant-design-vue/components/slider/index.jsx

151 lines
3.6 KiB
Vue
Raw Normal View History

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,
})
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,
},
}))
},
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} />
},
}
/* istanbul ignore next */
Slider.install = function (Vue) {
Vue.component(Slider.name, Slider)
}
export default Slider