@king-design/react 2.0.0-beta.0

package/components/slider/index.vdt.js

@@ -0,0 +1,154 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { noop as _$no, createElementVNode as _$ce, createUnknownComponentVNode as _$cc, extend as _$ex, EMPTY_OBJ as _$em, createVNode as _$cv, className as _$cn, map as _$ma } from 'intact-react';
+import { linkEvent } from 'intact';
+import { Spinner } from '../spinner';
+import { Tooltip } from '../tooltip';
+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;
+
+  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;
+  var classNameObj = (_classNameObj = {
+    'k-slider': true,
+    'k-disabled': disabled,
+    'k-dragging': dragging.value || !animate
+  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+
+  var _this$styles = this.styles(),
+      barStyle = _this$styles.barStyle,
+      thumbFirstStyle = _this$styles.thumbFirstStyle,
+      thumbSecondStyle = _this$styles.thumbSecondStyle;
+
+  var onSpinnerChange = this.value.onSpinnerChange;
+  var _this$keyboard = this.keyboard,
+      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;
+  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,
+      'ref': tooltipRef
+    }, tooltipProps, {
+      'className': 'k-slider-tooltip',
+      'children': _$ce(2, 'div', null, 1, 'k-slider-thumb', {
+        'tabindex': disabled ? '-1' : '0',
+        'ev-mousedown': onStart,
+        'ev-focusin': linkEvent(isFirst, onFocusin),
+        'ev-focusout': hide,
+        'ev-keydown': onKeydown,
+        'ev-keyup': onKeyup
+      }, null, ref),
+      '$blocks': function ($blocks) {
+        var _$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)
+    }), null, tooltipRef), 2, 'k-slider-thumb-wrapper', {
+      'style': thumbStyle
+    });
+  };
+
+  var _this$click = this.click,
+      onClickTrack = _this$click.onClickTrack,
+      setOneValue = _this$click.setOneValue;
+  var points = this.points();
+  var marks = this.marks();
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this)), [_$ce(2, 'div', [_$ce(2, 'div', _$ce(2, 'div', [_$ce(2, 'div', null, 1, 'k-slider-bar', {
+    '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) {
+    return _$ce(2, 'i', null, 1, _$cn({
+      'k-slider-point': true,
+      'k-active': $value.active
+    }), {
+      'style': $value.style
+    });
+  }, $this)], 0, 'k-slider-track', null, null, trackRef), 2, 'k-slider-track-wrapper', {
+    'ev-click': onClickTrack
+  }), marks.length ? _$ce(2, 'div', _$ma(marks, function ($value, $key) {
+    return _$ce(2, 'span', $value.text, 0, _$cn({
+      'k-active': $value.active
+    }), {
+      'style': $value.style,
+      'ev-click': linkEvent($value.value, setOneValue)
+    });
+  }, $this), 4, 'k-slider-marks') : showEnd ? _$ce(2, 'div', [_$ce(2, 'span', min + unit, 0, null, {
+    'ev-click': linkEvent(min, setOneValue)
+  }), _$ce(2, 'span', max + unit, 0, null, {
+    'ev-click': linkEvent(max, setOneValue)
+  })], 4, 'k-slider-ends') : undefined], 0, 'k-slider-main'), showInput && !range ? _$ce(2, 'div', _$cc(Spinner, _extends({
+    'disabled': disabled,
+    'max': max,
+    'min': min,
+    'step': step || 0.01,
+    'vertical': true,
+    'value': value,
+    'suffix': unit,
+    'forceStep': !!step && forceStep,
+    'ev-$change:value': onSpinnerChange
+  }, spinnerProps)), 2, 'k-slider-spinner') : undefined]);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/slider/styles.d.ts

@@ -0,0 +1,5 @@
+import '../../styles/global';
+export declare function makeStyles(): string;
+
+
+export {normalize} from 'intact-react';

package/components/slider/styles.js

@@ -0,0 +1,79 @@
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  height: '4px',
+  bgColor: '#e5e5e5',
+
+  get barColor() {
+    return theme.color.primary;
+  },
+
+  borderRadius: '2px',
+  thumb: {
+    height: '12px',
+    width: '12px',
+
+    get border() {
+      return "2px solid " + slider.barColor;
+    },
+
+    borderRadius: '50%',
+    bgColor: '#fff',
+    hoverTransform: 'scale(1.5)',
+    hoverBgColor: '#fff',
+    disabledBgColor: '#fff'
+  },
+  endPadding: '10px 0 0',
+  disabled: {
+    get color() {
+      return theme.color.disabled;
+    },
+
+    get bgColor() {
+      return theme.color.disabledBg;
+    }
+
+  },
+  // spinnerWidth: '124px',
+  spinnerGap: '16px',
+  point: {
+    width: '8px',
+
+    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;
+setDefault(function () {
+  slider = deepDefaults(theme, {
+    slider: defaults
+  }).slider;
+});
+export function makeStyles() {
+  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 ", theme.transition, ";}.k-slider-thumb-wrapper{position:absolute;top:50%;transform:translate(-50%, -50%);transition:left ", theme.transition, ";z-index:1;}.k-slider-thumb{height:", slider.thumb.height, ";width:", slider.thumb.width, ";transition:all ", theme.transition, ";border:", slider.thumb.border, ";border-radius:", slider.thumb.borderRadius, ";background-color:", slider.thumb.bgColor, ";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-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.color, ";}.k-slider-thumb{border-color:", slider.disabled.color, ";&: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;}");
+}
+
+export {normalize} from 'intact-react';

package/components/slider/useClick.d.ts

@@ -0,0 +1,9 @@
+import type { Value } from './useValue';
+import type { State } from '../../hooks/useState';
+export declare function useClick(getSlidingValue: (pos: number) => number, fixValue: (value: Value, fixShowValue: boolean) => void, showValue: State<Value>, setValue: (value: Value) => void): {
+    onClickTrack: (e: MouseEvent) => void;
+    setOneValue: (v: number) => void;
+};
+
+
+export {normalize} from 'intact-react';

package/components/slider/useClick.js

@@ -0,0 +1,46 @@
+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];
+
+    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
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/slider/useDraggable.d.ts

@@ -0,0 +1,16 @@
+import { State } from '../../hooks/useState';
+import type { Value } from './useValue';
+export declare function useDraggable(showValue: State<Value>, fixValue: (value: Value, fixShowValue: boolean) => void, triggerChangeEvent: (value: Value) => void, showTooltip: () => void): {
+    onStart: (e: MouseEvent) => void;
+    dragging: State<boolean>;
+    trackRef: import('intact-react').RefObject<HTMLDivElement>;
+    firstThumbRef: import("intact").RefObject<HTMLDivElement>;
+    secondThumbRef: import("intact").RefObject<HTMLDivElement>;
+    isFirst: () => boolean;
+    onFocusin: (_isFirst: boolean) => void;
+    getNewValue: (value: number) => Value;
+    getSlidingValue: (pos: number) => number;
+};
+
+
+export {normalize} from 'intact-react';

package/components/slider/useDraggable.js

@@ -0,0 +1,107 @@
+import { useInstance, createRef } from 'intact-react';
+import { useDraggable as useBaseDraggable } from '../../hooks/useDraggable';
+export function useDraggable(showValue, fixValue, triggerChangeEvent, showTooltip) {
+  var instance = useInstance();
+  var trackRef = createRef();
+  var firstThumbRef = createRef();
+  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;
+
+  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
+    // 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;
+
+    var sliderWidth = max - min;
+
+    if (percent <= 0) {
+      return min;
+    } else if (percent >= 1) {
+      return max;
+    } else {
+      return min + sliderWidth * percent;
+    }
+  }
+
+  function getNewValue(value) {
+    var _instance$get2 = instance.get(),
+        range = _instance$get2.range,
+        oldValue = _instance$get2.value;
+
+    if (!range) return value;
+    var min = oldValue[0],
+        max = oldValue[1];
+
+    if (_isFirst2) {
+      if (value > max) {
+        // exchange the thumb
+        _isFirst2 = false;
+        firstThumbRef.value.blur();
+        secondThumbRef.value.focus();
+        return [max, value];
+      } else {
+        return [value, max];
+      }
+    } else {
+      if (value < min) {
+        // exchange the thumb
+        _isFirst2 = true;
+        firstThumbRef.value.focus();
+        secondThumbRef.value.blur();
+        return [value, min];
+      } else {
+        return [min, value];
+      }
+    }
+  }
+
+  function onFocusin(_isFirst) {
+    _isFirst2 = _isFirst;
+    showTooltip();
+  }
+
+  return {
+    onStart: onStart,
+    dragging: dragging,
+    trackRef: trackRef,
+    firstThumbRef: firstThumbRef,
+    secondThumbRef: secondThumbRef,
+    isFirst: function isFirst() {
+      return _isFirst2;
+    },
+    onFocusin: onFocusin,
+    getNewValue: getNewValue,
+    getSlidingValue: getSlidingValue
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/slider/useKeyboard.d.ts

@@ -0,0 +1,10 @@
+import { NormalizedGetStep } from '../spinner/useStep';
+import type { Value } from './useValue';
+import type { State } from '../../hooks/useState';
+export declare function useKeyboard(getStep: NormalizedGetStep, getNewValue: (value: number) => Value, fixValue: (value: Value, fixShowValue: boolean) => void, isFirst: () => boolean, dragging: State<boolean>, triggerChangeEvent: (value: Value) => void): {
+    onKeydown: ({ keyCode }: KeyboardEvent) => void;
+    onKeyup: ({ keyCode }: KeyboardEvent) => void;
+};
+
+
+export {normalize} from 'intact-react';

package/components/slider/useKeyboard.js

@@ -0,0 +1,59 @@
+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
+
+
+    oldValue = value;
+
+    if (range) {
+      var _value = value,
+          min = _value[0],
+          max = _value[1];
+      value = isFirst() ? min : max;
+    }
+
+    if (keyCode === 37) {
+      // left
+      var _getStep = getStep(value, 'decrease'),
+          step = _getStep[0];
+
+      updateValue(value - step);
+    } else if (keyCode === 39) {
+      var _getStep2 = getStep(value, 'increase'),
+          _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
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/slider/useMarks.d.ts

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

package/components/slider/useMarks.js

@@ -0,0 +1,59 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import { useInstance } from 'intact-react';
+import { useReceive } from '../../hooks/useReceive';
+export function useMarks() {
+  var instance = useInstance();
+  var marks = [];
+  useReceive(['marks', 'value'], function () {
+    var _instance$get = instance.get(),
+        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;
+      marks.push({
+        value: value,
+        raw: mark,
+        style: {
+          left: (value - min) / (max - min) * 100 + '%'
+        },
+        active: false,
+        text: ''
+      });
+    }
+
+    addText();
+  });
+  instance.on('$change:value', addText);
+
+  function addText() {
+    var _instance$get2 = instance.get(),
+        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;
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/slider/usePoints.d.ts

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

package/components/slider/usePoints.js

@@ -0,0 +1,85 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { useInstance } from 'intact-react';
+import { watchState } from '../../hooks/useState';
+import { error } from 'intact-shared';
+export function usePoints(showValue, getStep) {
+  var instance = useInstance();
+  var points = [];
+  instance.on('$receive:points', function (v) {
+    if (v === true) {
+      makeStepPoints();
+    } else if (Array.isArray(v)) {
+      addStyle(v);
+    } else {
+      points = [];
+    }
+  });
+  watchState(showValue, addActive);
+
+  function makeStepPoints() {
+    var _instance$get = instance.get(),
+        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];
+
+      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;
+
+    var total = max - min;
+    points = _mapInstanceProperty(values).call(values, function (point) {
+      return {
+        value: point,
+        style: {
+          left: (point - min) / total * 100 + '%'
+        },
+        active: false
+      };
+    });
+    addActive();
+  }
+
+  function addActive() {
+    var _instance$get3 = instance.get(),
+        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;
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/slider/useStyles.d.ts

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