192 lines
6.1 KiB
Java
192 lines
6.1 KiB
Java
![]() |
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
||
|
import _defineProperty from 'babel-runtime/helpers/defineProperty';
|
||
|
import _extends from 'babel-runtime/helpers/extends';
|
||
|
import PropTypes from '../_util/vue-types';
|
||
|
import BaseMixin from '../_util/BaseMixin';
|
||
|
import { getOptionProps, getListeners } 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';
|
||
|
import Base from '../base';
|
||
|
import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
|
||
|
import abstractTooltipProps from '../tooltip/abstractTooltipProps';
|
||
|
|
||
|
// export interface SliderMarks {
|
||
|
// [key]: React.ReactNode | {
|
||
|
// style: React.CSSProperties,
|
||
|
// label: React.ReactNode,
|
||
|
// };
|
||
|
// }
|
||
|
// const SliderMarks = PropTypes.shape({
|
||
|
// style: PropTypes.object,
|
||
|
// label: PropTypes.any,
|
||
|
// }).loose
|
||
|
var tooltipProps = abstractTooltipProps();
|
||
|
export var SliderProps = function SliderProps() {
|
||
|
return {
|
||
|
prefixCls: PropTypes.string,
|
||
|
tooltipPrefixCls: PropTypes.string,
|
||
|
range: PropTypes.bool,
|
||
|
reverse: 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]),
|
||
|
tooltipVisible: PropTypes.bool,
|
||
|
tooltipPlacement: tooltipProps.placement,
|
||
|
getTooltipPopupContainer: PropTypes.func
|
||
|
};
|
||
|
};
|
||
|
|
||
|
var Slider = {
|
||
|
name: 'ASlider',
|
||
|
model: {
|
||
|
prop: 'value',
|
||
|
event: 'change'
|
||
|
},
|
||
|
mixins: [BaseMixin],
|
||
|
inject: {
|
||
|
configProvider: { 'default': function _default() {
|
||
|
return ConfigConsumerProps;
|
||
|
} }
|
||
|
},
|
||
|
props: _extends({}, SliderProps(), {
|
||
|
tipFormatter: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).def(function (value) {
|
||
|
return value.toString();
|
||
|
})
|
||
|
}),
|
||
|
data: function data() {
|
||
|
return {
|
||
|
visibles: {}
|
||
|
};
|
||
|
},
|
||
|
|
||
|
methods: {
|
||
|
toggleTooltipVisible: function toggleTooltipVisible(index, visible) {
|
||
|
this.setState(function (_ref) {
|
||
|
var visibles = _ref.visibles;
|
||
|
return {
|
||
|
visibles: _extends({}, visibles, _defineProperty({}, index, visible))
|
||
|
};
|
||
|
});
|
||
|
},
|
||
|
handleWithTooltip: function handleWithTooltip(tooltipPrefixCls, prefixCls, _ref2) {
|
||
|
var _this = this;
|
||
|
|
||
|
var value = _ref2.value,
|
||
|
dragging = _ref2.dragging,
|
||
|
index = _ref2.index,
|
||
|
directives = _ref2.directives,
|
||
|
on = _ref2.on,
|
||
|
restProps = _objectWithoutProperties(_ref2, ['value', 'dragging', 'index', 'directives', 'on']);
|
||
|
|
||
|
var h = this.$createElement;
|
||
|
var _$props = this.$props,
|
||
|
tipFormatter = _$props.tipFormatter,
|
||
|
tooltipVisible = _$props.tooltipVisible,
|
||
|
tooltipPlacement = _$props.tooltipPlacement,
|
||
|
getTooltipPopupContainer = _$props.getTooltipPopupContainer;
|
||
|
var visibles = this.visibles;
|
||
|
|
||
|
var isTipFormatter = tipFormatter ? visibles[index] || dragging : false;
|
||
|
var visible = tooltipVisible || tooltipVisible === undefined && isTipFormatter;
|
||
|
var tooltipProps = {
|
||
|
props: {
|
||
|
prefixCls: tooltipPrefixCls,
|
||
|
title: tipFormatter ? tipFormatter(value) : '',
|
||
|
visible: visible,
|
||
|
placement: tooltipPlacement || 'top',
|
||
|
transitionName: 'zoom-down',
|
||
|
overlayClassName: prefixCls + '-tooltip',
|
||
|
getPopupContainer: getTooltipPopupContainer || function () {
|
||
|
return document.body;
|
||
|
}
|
||
|
},
|
||
|
key: index
|
||
|
};
|
||
|
var handleProps = {
|
||
|
props: _extends({
|
||
|
value: value
|
||
|
}, restProps),
|
||
|
directives: directives,
|
||
|
on: _extends({}, on, {
|
||
|
mouseenter: function mouseenter() {
|
||
|
return _this.toggleTooltipVisible(index, true);
|
||
|
},
|
||
|
mouseleave: function mouseleave() {
|
||
|
return _this.toggleTooltipVisible(index, false);
|
||
|
}
|
||
|
})
|
||
|
};
|
||
|
return h(
|
||
|
Tooltip,
|
||
|
tooltipProps,
|
||
|
[h(VcHandle, handleProps)]
|
||
|
);
|
||
|
},
|
||
|
focus: function focus() {
|
||
|
this.$refs.sliderRef.focus();
|
||
|
},
|
||
|
blur: function blur() {
|
||
|
this.$refs.sliderRef.blur();
|
||
|
}
|
||
|
},
|
||
|
render: function render() {
|
||
|
var _this2 = this;
|
||
|
|
||
|
var h = arguments[0];
|
||
|
|
||
|
var _getOptionProps = getOptionProps(this),
|
||
|
range = _getOptionProps.range,
|
||
|
customizePrefixCls = _getOptionProps.prefixCls,
|
||
|
customizeTooltipPrefixCls = _getOptionProps.tooltipPrefixCls,
|
||
|
restProps = _objectWithoutProperties(_getOptionProps, ['range', 'prefixCls', 'tooltipPrefixCls']);
|
||
|
|
||
|
var getPrefixCls = this.configProvider.getPrefixCls;
|
||
|
var prefixCls = getPrefixCls('slider', customizePrefixCls);
|
||
|
var tooltipPrefixCls = getPrefixCls('tooltip', customizeTooltipPrefixCls);
|
||
|
var listeners = getListeners(this);
|
||
|
if (range) {
|
||
|
var vcRangeProps = {
|
||
|
props: _extends({}, restProps, {
|
||
|
prefixCls: prefixCls,
|
||
|
tooltipPrefixCls: tooltipPrefixCls,
|
||
|
handle: function handle(info) {
|
||
|
return _this2.handleWithTooltip(tooltipPrefixCls, prefixCls, info);
|
||
|
}
|
||
|
}),
|
||
|
ref: 'sliderRef',
|
||
|
on: listeners
|
||
|
};
|
||
|
return h(VcRange, vcRangeProps);
|
||
|
}
|
||
|
var vcSliderProps = {
|
||
|
props: _extends({}, restProps, {
|
||
|
prefixCls: prefixCls,
|
||
|
tooltipPrefixCls: tooltipPrefixCls,
|
||
|
handle: function handle(info) {
|
||
|
return _this2.handleWithTooltip(tooltipPrefixCls, prefixCls, info);
|
||
|
}
|
||
|
}),
|
||
|
ref: 'sliderRef',
|
||
|
on: listeners
|
||
|
};
|
||
|
return h(VcSlider, vcSliderProps);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
/* istanbul ignore next */
|
||
|
Slider.install = function (Vue) {
|
||
|
Vue.use(Base);
|
||
|
Vue.component(Slider.name, Slider);
|
||
|
};
|
||
|
|
||
|
export default Slider;
|