@king-design/react 3.1.4-beta.2 → 3.1.4

package/components/slider/index.vdt.js

@@ -7,72 +7,63 @@ import { getRestProps } from '../utils';
 import { makeStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
-
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
   var _$blocks = {};
   var __$blocks = {};
-
   var _this$get = this.get(),
-      disabled = _this$get.disabled,
-      className = _this$get.className,
-      max = _this$get.max,
-      min = _this$get.min,
-      unit = _this$get.unit,
-      showInput = _this$get.showInput,
-      range = _this$get.range,
-      step = _this$get.step,
-      value = _this$get.value,
-      spinnerProps = _this$get.spinnerProps,
-      showEnd = _this$get.showEnd,
-      showTooltip = _this$get.showTooltip,
-      animate = _this$get.animate,
-      forceStep = _this$get.forceStep;
-
+    disabled = _this$get.disabled,
+    className = _this$get.className,
+    max = _this$get.max,
+    min = _this$get.min,
+    unit = _this$get.unit,
+    showInput = _this$get.showInput,
+    range = _this$get.range,
+    step = _this$get.step,
+    value = _this$get.value,
+    spinnerProps = _this$get.spinnerProps,
+    showEnd = _this$get.showEnd,
+    showTooltip = _this$get.showTooltip,
+    animate = _this$get.animate,
+    forceStep = _this$get.forceStep;
   var _this$draggable = this.draggable,
-      onStart = _this$draggable.onStart,
-      trackRef = _this$draggable.trackRef,
-      dragging = _this$draggable.dragging,
-      firstThumbRef = _this$draggable.firstThumbRef,
-      secondThumbRef = _this$draggable.secondThumbRef,
-      onFocusin = _this$draggable.onFocusin;
+    onStart = _this$draggable.onStart,
+    trackRef = _this$draggable.trackRef,
+    dragging = _this$draggable.dragging,
+    firstThumbRef = _this$draggable.firstThumbRef,
+    secondThumbRef = _this$draggable.secondThumbRef,
+    onFocusin = _this$draggable.onFocusin;
   var k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-slider"] = true, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-dragging"] = dragging.value || !animate, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
-
   var _this$styles = this.styles(),
-      barStyle = _this$styles.barStyle,
-      thumbFirstStyle = _this$styles.thumbFirstStyle,
-      thumbSecondStyle = _this$styles.thumbSecondStyle;
-
+    barStyle = _this$styles.barStyle,
+    thumbFirstStyle = _this$styles.thumbFirstStyle,
+    thumbSecondStyle = _this$styles.thumbSecondStyle;
   var _this$value = this.value,
-      onSpinnerChange = _this$value.onSpinnerChange,
-      onLeftSpinnerChange = _this$value.onLeftSpinnerChange,
-      onRightSpinnerChange = _this$value.onRightSpinnerChange;
+    onSpinnerChange = _this$value.onSpinnerChange,
+    onLeftSpinnerChange = _this$value.onLeftSpinnerChange,
+    onRightSpinnerChange = _this$value.onRightSpinnerChange;
   var _this$keyboard = this.keyboard,
-      onKeydown = _this$keyboard.onKeydown,
-      onKeyup = _this$keyboard.onKeyup;
+    onKeydown = _this$keyboard.onKeydown,
+    onKeyup = _this$keyboard.onKeyup;
   var _this$tooltip = this.tooltip,
-      firstTooltipRef = _this$tooltip.firstTooltipRef,
-      secondTooltipRef = _this$tooltip.secondTooltipRef,
-      getTooltipProps = _this$tooltip.getTooltipProps,
-      hide = _this$tooltip.hide;
+    firstTooltipRef = _this$tooltip.firstTooltipRef,
+    secondTooltipRef = _this$tooltip.secondTooltipRef,
+    getTooltipProps = _this$tooltip.getTooltipProps,
+    hide = _this$tooltip.hide;
   var tooltipProps = getTooltipProps();
-
   var tooltip = function tooltip(value) {
     return _$blocks['tooltip'] = function ($super) {
       return value;
     }, __$blocks['tooltip'] = function ($super, data) {
       var block = $blocks['tooltip'];
-
       var callBlock = function callBlock() {
         return _$blocks['tooltip'].call($this, $super, data);
       };
-
       return block ? block.call($this, callBlock, data) : callBlock();
     }, __$blocks['tooltip'](_$no, value);
   };
-
   var createThumb = function createThumb(thumbStyle, isFirst, ref, value, tooltipRef) {
     return _$ce(2, 'div', _$cc(Tooltip, _extends({
       'disabled': !showTooltip,
@@ -89,17 +80,14 @@ export default function ($props, $blocks, $__proto__) {
       }, null, ref),
       '$blocks': function ($blocks) {
         var _$blocks = {},
-            __$blocks = _$ex({}, $blocks);
-
+          __$blocks = _$ex({}, $blocks);
         return (_$blocks['content'] = function ($super) {
           return tooltip(value);
         }, __$blocks['content'] = function ($super, data) {
           var block = $blocks['content'];
-
           var callBlock = function callBlock() {
             return _$blocks['content'].call($this, $super, data);
           };
-
           return block ? block.call($this, callBlock, data) : callBlock();
         }), __$blocks;
       }.call($this, _$em)
@@ -107,10 +95,9 @@ export default function ($props, $blocks, $__proto__) {
       'style': thumbStyle
     });
   };
-
   var _this$click = this.click,
-      onClickTrack = _this$click.onClickTrack,
-      setOneValue = _this$click.setOneValue;
+    onClickTrack = _this$click.onClickTrack,
+    setOneValue = _this$click.setOneValue;
   var points = this.points();
   var marks = this.marks();
   return _$cv('div', _extends({
@@ -119,7 +106,6 @@ export default function ($props, $blocks, $__proto__) {
     'style': barStyle
   }), createThumb(thumbFirstStyle, true, firstThumbRef, range ? value[0] : value, firstTooltipRef), range ? createThumb(thumbSecondStyle, false, secondThumbRef, value[1], secondTooltipRef) : undefined, _$ma(points, function ($value, $key) {
     var _$cn2;
-
     return _$ce(2, 'i', null, 1, _$cn((_$cn2 = {}, _$cn2[k + "-slider-point"] = true, _$cn2[k + "-active"] = $value.active, _$cn2)), {
       'style': $value.style
     });
@@ -127,7 +113,6 @@ export default function ($props, $blocks, $__proto__) {
     'ev-click': onClickTrack
   }), marks.length ? _$ce(2, 'div', _$ma(marks, function ($value, $key) {
     var _$cn3;
-
     return _$ce(2, 'span', $value.text, 0, _$cn((_$cn3 = {}, _$cn3[k + "-active"] = $value.active, _$cn3)), {
       'style': $value.style,
       'ev-click': linkEvent($value.value, setOneValue)

package/components/slider/styles.js

@@ -7,38 +7,28 @@ var defaults = {
   get transition() {
     return theme.transition.middle;
   },
-
   height: '6px',
   bgColor: '#F0F2F4',
-
   get barColor() {
     return theme.color.primary;
   },
-
   get borderRadius() {
     return theme.borderRadius;
   },
-
   thumb: {
     height: '12px',
     width: '12px',
-
     get border() {
       return "3px solid #fff";
     },
-
     borderRadius: '50%',
-
     get bgColor() {
       return slider.barColor;
     },
-
     hoverTransform: 'scale(1.25)',
-
     get hoverBgColor() {
       return slider.barColor;
     },
-
     boxShadow: '0px 0px 5px 0px rgba(0, 0, 0, 0.08)'
   },
   endPadding: '10px 0 0',
@@ -46,7 +36,6 @@ var defaults = {
     get color() {
       return theme.color.disabled;
     },
-
     // might be calculate according to the bar color
     bgColor: '#B5E3FF'
   },
@@ -54,30 +43,23 @@ var defaults = {
   spinnerGap: '16px',
   point: {
     width: '10px',
-
     get height() {
       return slider.point.width;
     },
-
     bgColor: '#fff',
     borderRadius: '50%',
-
     get border() {
       return "2px solid " + slider.bgColor;
     },
-
     get activeBorderColor() {
       return slider.barColor;
     }
-
   },
   marks: {
     height: '26px',
-
     get activeColor() {
       return theme.color.primary;
     }
-
   }
 };
 var slider;
@@ -85,7 +67,7 @@ setDefault(function () {
   slider = deepDefaults(theme, {
     slider: defaults
   }).slider;
-  makeStyles == null ? void 0 : makeStyles.clearCache();
+  makeStyles == null || makeStyles.clearCache();
 });
 export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("position:relative;outline:none;display:flex;.", k, "-slider-main{flex:1;}.", k, "-slider-track-wrapper{cursor:pointer;height:32px;display:flex;align-items:center;}.", k, "-slider-track{flex:1;height:", slider.height, ";background-color:", slider.bgColor, ";border-radius:", slider.borderRadius, ";position:relative;user-select:none;}.", k, "-slider-bar{background-color:", slider.barColor, ";position:absolute;height:100%;border-radius:", slider.borderRadius, ";transition:all ", slider.transition, ";}.", k, "-slider-thumb-wrapper{position:absolute;top:50%;transform:translate(-50%, -50%);transition:left ", slider.transition, ";z-index:1;}.", k, "-slider-thumb{box-sizing:content-box;height:", slider.thumb.height, ";width:", slider.thumb.width, ";transition:all ", slider.transition, ";border:", slider.thumb.border, ";border-radius:", slider.thumb.borderRadius, ";background-color:", slider.thumb.bgColor, ";box-shadow:", slider.thumb.boxShadow, ";outline:none;&:hover,&:focus{transform:", slider.thumb.hoverTransform, ";cursor:grab;background-color:", slider.thumb.hoverBgColor, ";}}.", k, "-slider-ends{display:flex;justify-content:space-between;span{cursor:pointer;}}.", k, "-slider-spinner{margin-left:", slider.spinnerGap, ";}.", k, "-slider-spinner-sep{display:inline-block;margin:auto 8px;}&.", k, "-dragging{.", k, "-slider-bar{transition:none;}.", k, "-slider-thumb-wrapper{transition:none;}}&.", k, "-disabled{color:", slider.disabled.color, ";.", k, "-slider-track-wrapper{cursor:not-allowed;}.", k, "-slider-bar{background-color:", slider.disabled.bgColor, ";}.", k, "-slider-thumb{border-color:#fff;background-color:", slider.disabled.bgColor, ";&:hover,&:focus{background-color:", slider.disabled.bgColor, ";cursor:not-allowed;transform:none;}}.", k, "-slider-ends{span{cursor:not-allowed;}}}.", k, "-slider-point{position:absolute;top:calc((", slider.height, " - ", slider.point.height, ") / 2 );width:", slider.point.width, ";height:", slider.point.height, ";background:", slider.point.bgColor, ";transform:translateX(-50%);border-radius:", slider.point.borderRadius, ";border:", slider.point.border, ";&.", k, "-active{border-color:", slider.point.activeBorderColor, ";}}.", k, "-slider-marks{position:relative;height:", slider.marks.height, ";>span{position:absolute;transform:translateX(-50%);white-space:nowrap;cursor:pointer;&:first-child{transform:none;}&:last-child{transform:translateX(-100%);}&.", k, "-active{color:", slider.marks.activeColor, ";}}}.", k, "-slider-tooltip{white-space:nowrap;}");

package/components/slider/useClick.js

@@ -1,42 +1,33 @@
 import { useInstance } from 'intact-react';
 export function useClick(getSlidingValue, fixValue, showValue, setValue) {
   var instance = useInstance();
-
   function onClickTrack(e) {
     if (instance.get('disabled')) return;
     var newValue = getSlidingValue(e.clientX);
-
     if (instance.get('range')) {
       newValue = generateRangeValue(newValue);
     }
-
     fixValue(newValue, true);
   }
-
   function generateRangeValue(v) {
     var _instance$get = instance.get('value'),
-        min = _instance$get[0],
-        max = _instance$get[1];
-
+      min = _instance$get[0],
+      max = _instance$get[1];
     if (Math.abs(min - v) <= Math.abs(max - v)) {
       return [v, max];
     } else {
       return [min, v];
     }
   }
-
   function setOneValue(v) {
     if (instance.get('disabled')) return;
     var newValue = v;
-
     if (instance.get('range')) {
       newValue = generateRangeValue(v);
     }
-
     showValue.set(newValue);
     setValue(newValue);
   }
-
   return {
     onClickTrack: onClickTrack,
     setOneValue: setOneValue

package/components/slider/useDraggable.js

@@ -7,42 +7,36 @@ export function useDraggable(showValue, fixValue, triggerChangeEvent, showToolti
   var secondThumbRef = createRef();
   var _isFirst2 = true;
   var oldValue;
-
   var _useBaseDraggable = useBaseDraggable({
-    onMove: function onMove(e) {
-      var tempValue = getNewValue(getSlidingValue(e.clientX));
-      fixValue(tempValue, false);
-      showTooltip();
-    },
-    onEnd: function onEnd() {
-      if (instance.$unmounted) return;
-      (_isFirst2 ? firstThumbRef.value : secondThumbRef.value).blur();
-      showValue.set(instance.get('value'));
-      triggerChangeEvent(oldValue);
-    }
-  }),
-      start = _useBaseDraggable.start,
-      dragging = _useBaseDraggable.dragging;
-
+      onMove: function onMove(e) {
+        var tempValue = getNewValue(getSlidingValue(e.clientX));
+        fixValue(tempValue, false);
+        showTooltip();
+      },
+      onEnd: function onEnd() {
+        if (instance.$unmounted) return;
+        (_isFirst2 ? firstThumbRef.value : secondThumbRef.value).blur();
+        showValue.set(instance.get('value'));
+        triggerChangeEvent(oldValue);
+      }
+    }),
+    start = _useBaseDraggable.start,
+    dragging = _useBaseDraggable.dragging;
   function onStart(e) {
-    if (instance.get('disabled')) return; // remain the old value to detect whether it changed to trigger change event
-
-    oldValue = instance.get('value'); // use Focusin to set the flag, because it will be used on operating by keyboard
+    if (instance.get('disabled')) return;
+    // remain the old value to detect whether it changed to trigger change event
+    oldValue = instance.get('value');
+    // use Focusin to set the flag, because it will be used on operating by keyboard
     // isFirst = _isFirst;
-
     start(e);
   }
-
   function getSlidingValue(pos) {
     var rect = trackRef.value.getBoundingClientRect();
     var percent = (pos - rect.left) / rect.width;
-
     var _instance$get = instance.get(),
-        max = _instance$get.max,
-        min = _instance$get.min;
-
+      max = _instance$get.max,
+      min = _instance$get.min;
     var sliderWidth = max - min;
-
     if (percent <= 0) {
       return min;
     } else if (percent >= 1) {
@@ -51,16 +45,13 @@ export function useDraggable(showValue, fixValue, triggerChangeEvent, showToolti
       return min + sliderWidth * percent;
     }
   }
-
   function getNewValue(value) {
     var _instance$get2 = instance.get(),
-        range = _instance$get2.range,
-        oldValue = _instance$get2.value;
-
+      range = _instance$get2.range,
+      oldValue = _instance$get2.value;
     if (!range) return value;
     var min = oldValue[0],
-        max = oldValue[1];
-
+      max = oldValue[1];
     if (_isFirst2) {
       if (value > max) {
         // exchange the thumb
@@ -83,12 +74,10 @@ export function useDraggable(showValue, fixValue, triggerChangeEvent, showToolti
       }
     }
   }
-
   function onFocusin(_isFirst) {
     _isFirst2 = _isFirst;
     showTooltip();
   }
-
   return {
     onStart: onStart,
     dragging: dragging,

package/components/slider/useKeyboard.js

@@ -2,54 +2,43 @@ import { useInstance } from 'intact-react';
 export function useKeyboard(getStep, getNewValue, fixValue, isFirst, dragging, triggerChangeEvent) {
   var instance = useInstance();
   var oldValue;
-
   function onKeydown(_ref) {
     var keyCode = _ref.keyCode;
     if (instance.get('disabled')) return;
-
     var _instance$get = instance.get(),
-        value = _instance$get.value,
-        range = _instance$get.range; // remain the old value to detect whether it changed to trigger change event
-
-
+      value = _instance$get.value,
+      range = _instance$get.range;
+    // remain the old value to detect whether it changed to trigger change event
     oldValue = value;
-
     if (range) {
       var _value = value,
-          min = _value[0],
-          max = _value[1];
+        min = _value[0],
+        max = _value[1];
       value = isFirst() ? min : max;
     }
-
     if (keyCode === 37) {
       // left
       var _getStep = getStep(value, 'decrease'),
-          step = _getStep[0];
-
+        step = _getStep[0];
       updateValue(value - step);
     } else if (keyCode === 39) {
       var _getStep2 = getStep(value, 'increase'),
-          _step = _getStep2[0];
-
+        _step = _getStep2[0];
       updateValue(value + _step);
     }
   }
-
   function updateValue(value) {
     // disable transition
     dragging.set(true);
     fixValue(getNewValue(value), true);
   }
-
   function onKeyup(_ref2) {
     var keyCode = _ref2.keyCode;
-
     if (keyCode === 37 || keyCode === 39) {
       dragging.set(false);
       triggerChangeEvent(oldValue);
     }
   }
-
   return {
     onKeydown: onKeydown,
     onKeyup: onKeyup

package/components/slider/useMarks.d.ts

@@ -1,14 +1,14 @@
-declare type MarkKey = string | number;
-declare type MarkValue = MarkKey | [MarkKey] | [MarkKey, MarkKey];
-export declare type Marks = Record<MarkKey, MarkValue>;
-declare type Mark = {
+type MarkKey = string | number;
+type MarkValue = MarkKey | [MarkKey] | [MarkKey, MarkKey];
+export type Marks = Record<MarkKey, MarkValue>;
+type Mark = {
     value: number;
     raw: MarkValue;
     style: Style;
     active: boolean;
     text: string | number;
 };
-declare type Style = {
+type Style = {
     left: string;
 };
 export declare function useMarks(): () => Mark[];

package/components/slider/useMarks.js

@@ -6,12 +6,10 @@ export function useMarks() {
   var marks = [];
   useReceive(['marks', 'value'], function () {
     var _instance$get = instance.get(),
-        max = _instance$get.max,
-        min = _instance$get.min,
-        _marks = _instance$get.marks;
-
+      max = _instance$get.max,
+      min = _instance$get.min,
+      _marks = _instance$get.marks;
     marks = [];
-
     for (var key in _marks) {
       var mark = _marks[key];
       var value = +key;
@@ -25,32 +23,26 @@ export function useMarks() {
         text: ''
       });
     }
-
     addText();
   });
   instance.on('$change:value', addText);
-
   function addText() {
     var _instance$get2 = instance.get(),
-        value = _instance$get2.value,
-        range = _instance$get2.range;
-
+      value = _instance$get2.value,
+      range = _instance$get2.range;
     marks.forEach(function (mark) {
       var active = !range ? mark.value === value : _includesInstanceProperty(value).call(value, mark.value);
       var text;
       var raw = mark.raw;
-
       if (Array.isArray(raw)) {
         text = active && raw[1] !== undefined ? raw[1] : raw[0];
       } else {
         text = raw;
       }
-
       mark.active = active;
       mark.text = text;
     });
   }
-
   return function () {
     return marks;
   };

package/components/slider/usePoints.d.ts

@@ -1,12 +1,12 @@
 import { State } from '../../hooks/useState';
 import type { NormalizedGetStep } from '../spinner/useStep';
 import { Value } from './useValue';
-declare type Point = {
+type Point = {
     value: number;
     style: Style;
     active: boolean;
 };
-declare type Style = {
+type Style = {
     left: string;
 };
 export declare function usePoints(showValue: State<Value>, getStep: NormalizedGetStep): () => Point[];

package/components/slider/usePoints.js

@@ -15,45 +15,34 @@ export function usePoints(showValue, getStep) {
     }
   });
   watchState(showValue, addActive);
-
   function makeStepPoints() {
     var _instance$get = instance.get(),
-        max = _instance$get.max,
-        min = _instance$get.min,
-        step = _instance$get.step;
-
+      max = _instance$get.max,
+      min = _instance$get.min,
+      step = _instance$get.step;
     if (!step) {
       if (process.env.NODE_ENV !== 'production') {
         error('[Slider]: Step cannot be 0 if you want to show step points.');
       }
-
       return;
     }
-
     var results = [];
     var i = min;
-
     while (true) {
       var _getStep = getStep(i, 'increase'),
-          _step = _getStep[0];
-
+        _step = _getStep[0];
       i = i + _step;
-
       if (Number(i.toFixed(10)) >= max) {
         break;
       }
-
       results.push(i);
     }
-
     addStyle(results);
   }
-
   function addStyle(values) {
     var _instance$get2 = instance.get(),
-        min = _instance$get2.min,
-        max = _instance$get2.max;
-
+      min = _instance$get2.min,
+      max = _instance$get2.max;
     var total = max - min;
     points = _mapInstanceProperty(values).call(values, function (point) {
       return {
@@ -66,17 +55,14 @@ export function usePoints(showValue, getStep) {
     });
     addActive();
   }
-
   function addActive() {
     var _instance$get3 = instance.get(),
-        range = _instance$get3.range;
-
+      range = _instance$get3.range;
     var value = showValue.value;
     points.forEach(function (point) {
       point.active = !range ? point.value <= value : point.value >= value[0] && point.value <= value[1];
     });
   }
-
   return function () {
     return points;
   };

package/components/slider/useStyles.d.ts

@@ -1,6 +1,6 @@
 import { State } from '../../hooks/useState';
 import { Value } from './useValue';
-declare type Style = Record<string, string>;
+type Style = Record<string, string>;
 export declare function useStyles(showValue: State<Value>): () => {
     barStyle: Style;
     thumbFirstStyle: Style;

package/components/slider/useStyles.js

@@ -4,20 +4,17 @@ export function useStyles(showValue) {
   var barStyle;
   var thumbFirstStyle;
   var thumbSecondStyle;
-
   function updateStyle() {
     var _instance$get = instance.get(),
-        max = _instance$get.max,
-        min = _instance$get.min,
-        range = _instance$get.range;
-
+      max = _instance$get.max,
+      min = _instance$get.min,
+      range = _instance$get.range;
     var total = max - min;
-
     if (total > 0) {
       if (range) {
         var _showValue$value = showValue.value,
-            first = _showValue$value[0],
-            second = _showValue$value[1];
+          first = _showValue$value[0],
+          second = _showValue$value[1];
         barStyle = {
           width: toPercent(Math.abs(second - first), total),
           left: toPercent(Math.min(first, second) - min, total)
@@ -50,7 +47,6 @@ export function useStyles(showValue) {
       };
     }
   }
-
   onBeforeUpdate(updateStyle);
   onBeforeMount(updateStyle);
   return function () {
@@ -61,7 +57,6 @@ export function useStyles(showValue) {
     };
   };
 }
-
 function toPercent(value, total) {
   return value / total * 100 + '%';
 }