@king-design/react 2.0.0-beta.0

package/components/slider/useStyles.js

@@ -0,0 +1,69 @@
+import { useInstance, onBeforeMount, onBeforeUpdate } from 'intact-react';
+export function useStyles(showValue) {
+  var instance = useInstance();
+  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;
+
+    var total = max - min;
+
+    if (total > 0) {
+      if (range) {
+        var _showValue$value = showValue.value,
+            first = _showValue$value[0],
+            second = _showValue$value[1];
+        barStyle = {
+          width: toPercent(Math.abs(second - first), total),
+          left: toPercent(Math.min(first, second) - min, total)
+        };
+        thumbFirstStyle = {
+          left: toPercent(first - min, total)
+        };
+        thumbSecondStyle = {
+          left: toPercent(second - min, total)
+        };
+      } else {
+        var percent = toPercent(showValue.value - min, total);
+        barStyle = {
+          width: percent
+        };
+        thumbFirstStyle = {
+          left: percent
+        };
+      }
+    } else {
+      barStyle = {
+        width: '100%',
+        left: '0'
+      };
+      thumbFirstStyle = {
+        left: '100%'
+      };
+      thumbSecondStyle = {
+        left: '0'
+      };
+    }
+  }
+
+  onBeforeUpdate(updateStyle);
+  onBeforeMount(updateStyle);
+  return function () {
+    return {
+      barStyle: barStyle,
+      thumbFirstStyle: thumbFirstStyle,
+      thumbSecondStyle: thumbSecondStyle
+    };
+  };
+}
+
+function toPercent(value, total) {
+  return value / total * 100 + '%';
+}
+
+export {normalize} from 'intact-react';

package/components/slider/useTooltip.d.ts

@@ -0,0 +1,13 @@
+import type { Tooltip, TooltipProps } from '../tooltip/tooltip';
+import { State } from '../../hooks/useState';
+import type { Value } from './useValue';
+export declare function useTooltip(showValue: State<Value>): {
+    firstTooltipRef: import('intact-react').RefObject<Tooltip<TooltipProps, import("../tooltip/tooltip").TooltipEvents, import("../tooltip/tooltip").TooltipBlocks>>;
+    secondTooltipRef: import("intact").RefObject<Tooltip<TooltipProps, import("../tooltip/tooltip").TooltipEvents, import("../tooltip/tooltip").TooltipBlocks>>;
+    getTooltipProps: () => TooltipProps;
+    show: () => void;
+    hide: () => void;
+};
+
+
+export {normalize} from 'intact-react';

package/components/slider/useTooltip.js

@@ -0,0 +1,70 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { useInstance, createRef } from 'intact-react';
+import { useReceive } from '../../hooks/useReceive';
+export function useTooltip(showValue) {
+  var instance = useInstance();
+  var firstTooltipRef = createRef();
+  var secondTooltipRef = createRef();
+  var defaultTooltipProps = {
+    container: function container(parentDom) {
+      return parentDom;
+    },
+    hoverable: true,
+    always: instance.get('always')
+  };
+  var tooltipProps = defaultTooltipProps;
+  useReceive(['always', 'tooltipProps'], function () {
+    var _instance$get = instance.get(),
+        always = _instance$get.always,
+        props = _instance$get.tooltipProps;
+
+    tooltipProps = _extends({}, defaultTooltipProps, {
+      always: always
+    }, props);
+
+    if (always) {
+      tooltipProps.value = true;
+    }
+  });
+  instance.on('$changed:value', function () {
+    if (instance.get('always')) {
+      show();
+    }
+  });
+
+  function getTooltipProps() {
+    return tooltipProps;
+  }
+
+  function show() {
+    if (!instance.get('showTooltip')) return;
+    var first = firstTooltipRef.value;
+    var second = secondTooltipRef.value;
+    first.show();
+    first.position();
+
+    if (second) {
+      second.show();
+      second.position();
+    }
+  }
+
+  function hide() {
+    firstTooltipRef.value.hide(false);
+    var second = secondTooltipRef.value;
+
+    if (second) {
+      second.hide(false);
+    }
+  }
+
+  return {
+    firstTooltipRef: firstTooltipRef,
+    secondTooltipRef: secondTooltipRef,
+    getTooltipProps: getTooltipProps,
+    show: show,
+    hide: hide
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/slider/useValue.d.ts

@@ -0,0 +1,12 @@
+import { NormalizedGetStep } from '../spinner/useStep';
+export declare type Value<Range extends boolean = boolean> = Range extends true ? [number, number] : number;
+export declare function useValue(getStep: NormalizedGetStep, getDragging: () => boolean): {
+    showValue: import("../../hooks/useState").State<number | [number, number]>;
+    onSpinnerChange: (v: number) => void;
+    setValue: (value: Value) => void;
+    triggerChangeEvent: (oldValue: Value) => void;
+    fixValue: (value: Value, fixShowValue: boolean) => void;
+};
+
+
+export {normalize} from 'intact-react';

package/components/slider/useValue.js

@@ -0,0 +1,100 @@
+import { useInstance } from 'intact-react';
+import { useReceive } from '../../hooks/useReceive';
+import { minMaxStep } from '../spinner/useValue';
+import { error } from 'intact-shared';
+import { isEqualArray } from '../utils';
+import { useState } from '../../hooks/useState';
+export function useValue(getStep, getDragging) {
+  var instance = useInstance();
+  var showValue = useState(instance.get('value'), isEqualValue);
+  useReceive(['min', 'max', 'step', 'value'], function () {
+    if (getDragging()) return;
+    fixValue(instance.get('value'), true);
+  });
+  instance.on('$change:value', function (newValue, oldValue) {
+    if (getDragging()) return;
+    instance.trigger('change', newValue, oldValue);
+  });
+
+  function isEqualValue(newValue, oldValue) {
+    return newValue === oldValue || isEqualArray(newValue, oldValue);
+  }
+
+  function fixValue(value, fixShowValue) {
+    var fixedValue = getFixedValue(value);
+    showValue.set(fixShowValue ? fixedValue : value);
+    setValue(fixedValue);
+  }
+
+  function setValue(value) {
+    if (isEqualValue(value, instance.get('value'))) return;
+    instance.set({
+      value: value
+    });
+  }
+
+  function getFixedValue(value) {
+    var _instance$get = instance.get(),
+        min = _instance$get.min,
+        range = _instance$get.range;
+
+    var fixedValue;
+
+    if (range) {
+      if (!Array.isArray(value)) {
+        var tmp = fix(value);
+        fixedValue = [tmp, tmp];
+      } else {
+        fixedValue = [fix(value[0]), fix(value[1])];
+      }
+    } else {
+      fixedValue = fix(value);
+    }
+
+    return fixedValue;
+  }
+
+  function fix(value) {
+    var _instance$get2 = instance.get(),
+        max = _instance$get2.max,
+        forceStep = _instance$get2.forceStep;
+
+    var _getStep = getStep(value),
+        step = _getStep[0],
+        min = _getStep[1];
+
+    if (min > max) {
+      if (process.env.NODE_ENV !== 'production') {
+        error("[Slider] min must less than or equal to max, but got min: " + min + " max: " + max);
+        return 0;
+      }
+    }
+
+    return minMaxStep(value, min, max, forceStep ? step : null);
+  }
+
+  function onSpinnerChange(v) {
+    showValue.set(v);
+    instance.set({
+      value: v
+    });
+  }
+
+  function triggerChangeEvent(oldValue) {
+    var _instance$get3 = instance.get(),
+        value = _instance$get3.value;
+
+    if (isEqualValue(value, oldValue)) return;
+    instance.trigger('change', value, oldValue);
+  }
+
+  return {
+    showValue: showValue,
+    onSpinnerChange: onSpinnerChange,
+    setValue: setValue,
+    triggerChangeEvent: triggerChangeEvent,
+    fixValue: fixValue
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/spin/index.d.ts

@@ -0,0 +1,20 @@
+import { Component, TypeDefs } from 'intact-react';
+import { Sizes } from '../../styles/utils';
+export interface SpinProps {
+    size?: Sizes;
+    center?: boolean;
+    overlay?: boolean;
+}
+export interface SpinEvents {
+}
+export interface SpinBlocks {
+    canvas: null;
+}
+export declare class Spin extends Component<SpinProps, SpinEvents, SpinBlocks> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<SpinProps>>;
+    static defaults: () => Partial<SpinProps>;
+}
+
+
+export {normalize} from 'intact-react';

package/components/spin/index.js

@@ -0,0 +1,30 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Component } from 'intact-react';
+import template from './index.vdt';
+import { sizes } from '../../styles/utils';
+var typeDefs = {
+  size: sizes,
+  center: Boolean,
+  overlay: Boolean
+};
+
+var defaults = function defaults() {
+  return {
+    size: 'default'
+  };
+};
+
+export var Spin = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Spin, _Component);
+
+  function Spin() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  return Spin;
+}(Component);
+Spin.template = template;
+Spin.typeDefs = typeDefs;
+Spin.defaults = defaults;
+
+export {normalize} from 'intact-react';

package/components/spin/index.vdt.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createElementVNode as _$ce, noop as _$no, createVNode as _$cv, className as _$cn } from 'intact-react';
+import { Transition } from 'intact';
+import { getRestProps } from '../utils';
+import { makeStyles } from './styles';
+var _$tmp0 = {
+  'cx': '60',
+  'cy': '60',
+  'r': '57'
+};
+var _$tmp1 = {
+  'viewBox': '0 0 120 120'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _$blocks = {};
+  var __$blocks = {};
+
+  var _this$get = this.get(),
+      size = _this$get.size,
+      center = _this$get.center,
+      className = _this$get.className,
+      overlay = _this$get.overlay;
+
+  var classNameObj = (_classNameObj = {
+    'k-spin': true
+  }, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-center'] = !overlay && center, _classNameObj['k-overlay'] = overlay, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+
+  var canvas = _$ce(2, 'div', (_$blocks['canvas'] = function ($super) {
+    return _$ce(512, 'svg', _$ce(2, 'circle', null, 1, 'k-spin-circle', _$tmp0), 2, null, _$tmp1);
+  }, __$blocks['canvas'] = function ($super, data) {
+    var block = $blocks['canvas'];
+
+    var callBlock = function callBlock() {
+      return _$blocks['canvas'].call($this, $super, data);
+    };
+
+    return block ? block.call($this, callBlock, data) : callBlock();
+  }, __$blocks['canvas'](_$no)), 0, 'k-spin-canvas');
+
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this)), overlay ? _$ce(2, 'div', canvas, 0, 'k-spin-wrapper') : canvas);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/spin/styles.d.ts

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

package/components/spin/styles.js

@@ -0,0 +1,36 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { css, keyframes } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults, sizes } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  width: "40px",
+
+  get color() {
+    return theme.color.primary;
+  },
+
+  strokeWidth: 6,
+  largeWidth: "48px",
+  smallWidth: "32px",
+  miniWidth: "24px"
+};
+var spin;
+setDefault(function () {
+  spin = deepDefaults(theme, {
+    spin: defaults
+  }).spin;
+});
+export function makeStyles() {
+  var width = spin.strokeWidth;
+  var r = 120 - 60 - width / 2;
+  var c = Math.round(2 * 3.14 * r);
+  var spinDash = /*#__PURE__*/keyframes("0%{stroke-dasharray:1,", c, ";stroke-dashoffset:0;}50%{stroke-dasharray:", Math.round(c * 0.75), ",", c, ";stroke-dashoffset:", -c * 0.25, ";}to{stroke-dasharray:", Math.round(c * 0.75), ",", c, ";stroke-dashoffset:", -c, ";}");
+  return /*#__PURE__*/css("display:inline-block;.k-spin-canvas{width:", spin.width, ";height:", spin.width, ";animation:k-rotate 2s linear infinite;}.k-spin-circle{stroke-dasharray:", Math.round(c * 0.75), ",", c, ";stroke-dashoffset:0;fill:none;stroke-width:", width, ";stroke:", spin.color, ";r:", r, ";animation:", spinDash, " 1.5s ease-in-out infinite;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+    if (size === 'default') return;
+    var width = spin[size + "Width"];
+    return /*#__PURE__*/css("&.k-", size, "{.k-spin-canvas{width:", width, ";height:", width, ";}}");
+  }), " &.k-center,&.k-overlay .k-spin-wrapper{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&.k-overlay{position:absolute;z-index:", theme.midZIndex, ";top:0;bottom:0;left:0;right:0;background:rgba(255, 255, 255, .5);}");
+}
+
+export {normalize} from 'intact-react';

package/components/spinner/index.d.ts

@@ -0,0 +1,47 @@
+import { Component, TypeDefs } from 'intact-react';
+import { Sizes } from '../../styles/utils';
+import type { Events } from '../types';
+export interface SpinnerProps {
+    disabled?: boolean;
+    value?: number;
+    max?: number;
+    min?: number;
+    step?: number | StepObject | StepFunction;
+    size?: Sizes;
+    vertical?: boolean;
+    precision?: number;
+    formatter?: Formatter;
+    parser?: Parser;
+    prefix?: string;
+    suffix?: string;
+    width?: string | number;
+    forceStep?: boolean;
+}
+export interface SpinnerEvents {
+    change: [number, number | undefined];
+}
+export declare type StepObject = {
+    [key in number]: number;
+} & {
+    $?: number;
+};
+export declare type StepFunction = (value: number) => number;
+declare type Formatter = (value: number) => string;
+declare type Parser = (value: string) => number;
+export declare class Spinner extends Component<SpinnerProps, SpinnerEvents> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<SpinnerProps>>;
+    static defaults: () => Partial<SpinnerProps>;
+    static events: Events<SpinnerEvents>;
+    private step;
+    private formatter;
+    private value;
+    private change;
+    private isDisabledDecrease;
+    private isDisabledIncrease;
+    private onInput;
+}
+export {};
+
+
+export {normalize} from 'intact-react';

package/components/spinner/index.js

@@ -0,0 +1,106 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import { __decorate } from "tslib";
+import { Component } from 'intact-react';
+import template from './index.vdt';
+import { bind } from '../utils';
+import { sizes } from '../../styles/utils';
+import { useStep } from './useStep';
+import { useFormatter } from './useFormatter';
+import { useValue } from './useValue';
+import { useChange } from './useChange';
+var typeDefs = {
+  disabled: Boolean,
+  value: Number,
+  max: Number,
+  min: Number,
+  step: [Number, Object, Function],
+  size: sizes,
+  vertical: Boolean,
+  precision: Number,
+  formatter: Function,
+  parser: Function,
+  prefix: String,
+  suffix: String,
+  width: [String, Number],
+  forceStep: Boolean
+};
+var defaultStep = 1;
+
+var defaults = function defaults() {
+  return {
+    value: 0,
+    max: Number.POSITIVE_INFINITY,
+    min: Number.NEGATIVE_INFINITY,
+    step: defaultStep,
+    size: 'default'
+  };
+};
+
+var events = {
+  change: true
+};
+export var Spinner = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Spinner, _Component);
+
+  function Spinner() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.step = useStep(defaultStep);
+    _this.formatter = useFormatter();
+    _this.value = useValue(_this.step, _this.formatter);
+    _this.change = useChange(_this.step, _this.value.fixValue);
+    return _this;
+  }
+
+  var _proto = Spinner.prototype;
+
+  _proto.isDisabledDecrease = function isDisabledDecrease() {
+    var _this$get = this.get(),
+        value = _this$get.value,
+        min = _this$get.min,
+        disabled = _this$get.disabled;
+
+    return disabled || value <= min;
+  };
+
+  _proto.isDisabledIncrease = function isDisabledIncrease() {
+    var _this$get2 = this.get(),
+        value = _this$get2.value,
+        max = _this$get2.max,
+        disabled = _this$get2.disabled;
+
+    return disabled || value >= max;
+  } // we need change value as long as the input is valid, #213
+  ;
+
+  _proto.onInput = function onInput(e) {
+    var val = e.target.value;
+
+    var _this$value$getFixedV = this.value.getFixedValue(_trimInstanceProperty(val).call(val), this.get('value')),
+        value = _this$value$getFixedV.value;
+
+    this.value.showValue.set(val);
+    this.set({
+      value: value
+    });
+  };
+
+  return Spinner;
+}(Component);
+Spinner.template = template;
+Spinner.typeDefs = typeDefs;
+Spinner.defaults = defaults;
+Spinner.events = events;
+
+__decorate([bind], Spinner.prototype, "onInput", null);
+
+export {normalize} from 'intact-react';

package/components/spinner/index.spec.d.ts

@@ -0,0 +1,4 @@
+export {};
+
+
+export {normalize} from 'intact-react';