123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192 |
- 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;
|