336 lines
10 KiB
JavaScript
336 lines
10 KiB
JavaScript
import classNames from 'classnames'
|
|
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'
|
|
import * as utils from '../utils'
|
|
|
|
function noop () {}
|
|
|
|
export default function createSlider (Component) {
|
|
// 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 {
|
|
name: 'createSlider',
|
|
mixins: [Component],
|
|
props: initDefaultProps(propTypes, {
|
|
...Component.defaultProps,
|
|
prefixCls: 'rc-slider',
|
|
min: 0,
|
|
max: 100,
|
|
step: 1,
|
|
marks: {},
|
|
handle (h, { index, refStr, className, style, ...restProps }) {
|
|
delete restProps.dragging
|
|
const handleProps = {
|
|
props: {
|
|
...restProps,
|
|
},
|
|
attrs: {
|
|
refStr,
|
|
},
|
|
class: className,
|
|
style,
|
|
key: index,
|
|
}
|
|
return <Handle {...handleProps} />
|
|
},
|
|
included: true,
|
|
disabled: false,
|
|
dots: false,
|
|
vertical: false,
|
|
trackStyle: [{}],
|
|
handleStyle: [{}],
|
|
railStyle: {},
|
|
dotStyle: {},
|
|
activeDotStyle: {},
|
|
}),
|
|
model: {
|
|
prop: 'value',
|
|
event: 'change',
|
|
},
|
|
data () {
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
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)',
|
|
max - min,
|
|
step
|
|
)
|
|
}
|
|
this.handlesRefs = []
|
|
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
|
|
this.setHandleRefs()
|
|
})
|
|
},
|
|
methods: {
|
|
setHandleRefs () {
|
|
const refs = this.$refs.handleRef
|
|
const children = Array.prototype.slice.call(refs.children)
|
|
children.map((item) => {
|
|
const refStr = item.getAttribute('refStr')
|
|
if (refStr.indexOf('handleRef') > -1) {
|
|
const handleArr = refStr.split('handleRef')
|
|
this.handlesRefs[handleArr[1]] = item
|
|
}
|
|
})
|
|
},
|
|
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
|
|
|
|
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) {
|
|
console.dir(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()
|
|
|
|
this.onMouseMoveListener && this.onMouseMoveListener.remove()
|
|
this.onMouseUpListener && this.onMouseUpListener.remove()
|
|
/* eslint-enable no-unused-expressions */
|
|
},
|
|
onMouseUp () {
|
|
if (this.$children && this.$children[this.prevMovedHandleIndex]) {
|
|
const handleCom = utils.getComponentProps(this.$children[this.prevMovedHandleIndex], 'clickFocus')
|
|
if (handleCom) {
|
|
handleCom.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
|
|
}
|
|
|
|
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()
|
|
|
|
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
|
|
const ratio = (value - min) / (max - min)
|
|
return ratio * 100
|
|
},
|
|
onClickMarkLabel (e, value) {
|
|
e.stopPropagation()
|
|
this.$emit('change', { value })
|
|
},
|
|
},
|
|
render (h) {
|
|
const {
|
|
prefixCls,
|
|
marks,
|
|
dots,
|
|
step,
|
|
included,
|
|
disabled,
|
|
vertical,
|
|
min,
|
|
max,
|
|
maximumTrackStyle,
|
|
railStyle,
|
|
dotStyle,
|
|
activeDotStyle,
|
|
} = this
|
|
const { tracks, handles } = this.renderSlider(h)
|
|
|
|
const sliderClassName = classNames(prefixCls, {
|
|
[`${prefixCls}-with-marks`]: Object.keys(marks).length,
|
|
[`${prefixCls}-disabled`]: disabled,
|
|
[`${prefixCls}-vertical`]: vertical,
|
|
})
|
|
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='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}
|
|
>
|
|
<div
|
|
class={`${prefixCls}-rail`}
|
|
style={{
|
|
...maximumTrackStyle,
|
|
...railStyle,
|
|
}}
|
|
/>
|
|
{tracks}
|
|
<Steps
|
|
prefixCls={prefixCls}
|
|
vertical={vertical}
|
|
marks={marks}
|
|
dots={dots}
|
|
step={step}
|
|
included={included}
|
|
lowerBound={this.getLowerBound()}
|
|
upperBound={this.getUpperBound()}
|
|
max={max}
|
|
min={min}
|
|
dotStyle={dotStyle}
|
|
activeDotStyle={activeDotStyle}
|
|
/>
|
|
<div ref='handleRef'>
|
|
{handles}
|
|
</div>
|
|
<Marks
|
|
{...markProps}
|
|
/>
|
|
{this.$slots.default}
|
|
</div>
|
|
)
|
|
},
|
|
}
|
|
}
|