index.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
  2. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  3. import _extends from 'babel-runtime/helpers/extends';
  4. import PropTypes from '../_util/vue-types';
  5. import BaseMixin from '../_util/BaseMixin';
  6. import { getOptionProps, getListeners } from '../_util/props-util';
  7. import VcSlider from '../vc-slider/src/Slider';
  8. import VcRange from '../vc-slider/src/Range';
  9. import VcHandle from '../vc-slider/src/Handle';
  10. import Tooltip from '../tooltip';
  11. import Base from '../base';
  12. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  13. import abstractTooltipProps from '../tooltip/abstractTooltipProps';
  14. // export interface SliderMarks {
  15. // [key]: React.ReactNode | {
  16. // style: React.CSSProperties,
  17. // label: React.ReactNode,
  18. // };
  19. // }
  20. // const SliderMarks = PropTypes.shape({
  21. // style: PropTypes.object,
  22. // label: PropTypes.any,
  23. // }).loose
  24. var tooltipProps = abstractTooltipProps();
  25. export var SliderProps = function SliderProps() {
  26. return {
  27. prefixCls: PropTypes.string,
  28. tooltipPrefixCls: PropTypes.string,
  29. range: PropTypes.bool,
  30. reverse: PropTypes.bool,
  31. min: PropTypes.number,
  32. max: PropTypes.number,
  33. step: PropTypes.oneOfType([PropTypes.number, PropTypes.any]),
  34. marks: PropTypes.object,
  35. dots: PropTypes.bool,
  36. value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
  37. defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
  38. included: PropTypes.bool,
  39. disabled: PropTypes.bool,
  40. vertical: PropTypes.bool,
  41. tipFormatter: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
  42. tooltipVisible: PropTypes.bool,
  43. tooltipPlacement: tooltipProps.placement,
  44. getTooltipPopupContainer: PropTypes.func
  45. };
  46. };
  47. var Slider = {
  48. name: 'ASlider',
  49. model: {
  50. prop: 'value',
  51. event: 'change'
  52. },
  53. mixins: [BaseMixin],
  54. inject: {
  55. configProvider: { 'default': function _default() {
  56. return ConfigConsumerProps;
  57. } }
  58. },
  59. props: _extends({}, SliderProps(), {
  60. tipFormatter: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).def(function (value) {
  61. return value.toString();
  62. })
  63. }),
  64. data: function data() {
  65. return {
  66. visibles: {}
  67. };
  68. },
  69. methods: {
  70. toggleTooltipVisible: function toggleTooltipVisible(index, visible) {
  71. this.setState(function (_ref) {
  72. var visibles = _ref.visibles;
  73. return {
  74. visibles: _extends({}, visibles, _defineProperty({}, index, visible))
  75. };
  76. });
  77. },
  78. handleWithTooltip: function handleWithTooltip(tooltipPrefixCls, prefixCls, _ref2) {
  79. var _this = this;
  80. var value = _ref2.value,
  81. dragging = _ref2.dragging,
  82. index = _ref2.index,
  83. directives = _ref2.directives,
  84. on = _ref2.on,
  85. restProps = _objectWithoutProperties(_ref2, ['value', 'dragging', 'index', 'directives', 'on']);
  86. var h = this.$createElement;
  87. var _$props = this.$props,
  88. tipFormatter = _$props.tipFormatter,
  89. tooltipVisible = _$props.tooltipVisible,
  90. tooltipPlacement = _$props.tooltipPlacement,
  91. getTooltipPopupContainer = _$props.getTooltipPopupContainer;
  92. var visibles = this.visibles;
  93. var isTipFormatter = tipFormatter ? visibles[index] || dragging : false;
  94. var visible = tooltipVisible || tooltipVisible === undefined && isTipFormatter;
  95. var tooltipProps = {
  96. props: {
  97. prefixCls: tooltipPrefixCls,
  98. title: tipFormatter ? tipFormatter(value) : '',
  99. visible: visible,
  100. placement: tooltipPlacement || 'top',
  101. transitionName: 'zoom-down',
  102. overlayClassName: prefixCls + '-tooltip',
  103. getPopupContainer: getTooltipPopupContainer || function () {
  104. return document.body;
  105. }
  106. },
  107. key: index
  108. };
  109. var handleProps = {
  110. props: _extends({
  111. value: value
  112. }, restProps),
  113. directives: directives,
  114. on: _extends({}, on, {
  115. mouseenter: function mouseenter() {
  116. return _this.toggleTooltipVisible(index, true);
  117. },
  118. mouseleave: function mouseleave() {
  119. return _this.toggleTooltipVisible(index, false);
  120. }
  121. })
  122. };
  123. return h(
  124. Tooltip,
  125. tooltipProps,
  126. [h(VcHandle, handleProps)]
  127. );
  128. },
  129. focus: function focus() {
  130. this.$refs.sliderRef.focus();
  131. },
  132. blur: function blur() {
  133. this.$refs.sliderRef.blur();
  134. }
  135. },
  136. render: function render() {
  137. var _this2 = this;
  138. var h = arguments[0];
  139. var _getOptionProps = getOptionProps(this),
  140. range = _getOptionProps.range,
  141. customizePrefixCls = _getOptionProps.prefixCls,
  142. customizeTooltipPrefixCls = _getOptionProps.tooltipPrefixCls,
  143. restProps = _objectWithoutProperties(_getOptionProps, ['range', 'prefixCls', 'tooltipPrefixCls']);
  144. var getPrefixCls = this.configProvider.getPrefixCls;
  145. var prefixCls = getPrefixCls('slider', customizePrefixCls);
  146. var tooltipPrefixCls = getPrefixCls('tooltip', customizeTooltipPrefixCls);
  147. var listeners = getListeners(this);
  148. if (range) {
  149. var vcRangeProps = {
  150. props: _extends({}, restProps, {
  151. prefixCls: prefixCls,
  152. tooltipPrefixCls: tooltipPrefixCls,
  153. handle: function handle(info) {
  154. return _this2.handleWithTooltip(tooltipPrefixCls, prefixCls, info);
  155. }
  156. }),
  157. ref: 'sliderRef',
  158. on: listeners
  159. };
  160. return h(VcRange, vcRangeProps);
  161. }
  162. var vcSliderProps = {
  163. props: _extends({}, restProps, {
  164. prefixCls: prefixCls,
  165. tooltipPrefixCls: tooltipPrefixCls,
  166. handle: function handle(info) {
  167. return _this2.handleWithTooltip(tooltipPrefixCls, prefixCls, info);
  168. }
  169. }),
  170. ref: 'sliderRef',
  171. on: listeners
  172. };
  173. return h(VcSlider, vcSliderProps);
  174. }
  175. };
  176. /* istanbul ignore next */
  177. Slider.install = function (Vue) {
  178. Vue.use(Base);
  179. Vue.component(Slider.name, Slider);
  180. };
  181. export default Slider;