@king-design/react 2.0.0-beta.0

package/components/spinner/styles.js

@@ -0,0 +1,70 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { css } from '@emotion/css';
+import { deepDefaults, sizes } from '../../styles/utils';
+import { theme, setDefault } from '../../styles/theme';
+import '../../styles/global';
+var defaults = {
+  default: {
+    inputWidth: '46px',
+    iconFontSize: '24px'
+  },
+  large: {
+    inputWidth: '60px',
+    iconFontSize: '32px'
+  },
+  small: {
+    inputWidth: '32px',
+    iconFontSize: '18px'
+  },
+  mini: {
+    inputWidth: '26px',
+    iconFontSize: '14px'
+  },
+  vertical: {
+    default: {
+      width: '108px'
+    },
+    large: {
+      width: '138px'
+    },
+    small: {
+      width: '78px'
+    },
+    mini: {
+      width: '56px'
+    }
+  }
+};
+var spinner;
+setDefault(function () {
+  spinner = deepDefaults(theme, {
+    spinner: defaults
+  }).spinner;
+});
+export function makeStyles() {
+  return /*#__PURE__*/css("display:inline-block;vertical-align:middle;line-height:1;.k-spinner-btn{vertical-align:top;&:hover,&:focus{z-index:1;position:relative;}&.k-left{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px;}&.k-right{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px;}}.k-spinner-input{width:", spinner.default.inputWidth, ";vertical-align:top;.k-input-inner{text-align:center;padding:0;border-radius:0;}}.k-spinner-icon{font-size:", spinner.default.iconFontSize, ";}&.k-vertical{position:relative;font-size:0;", _mapInstanceProperty(sizes).call(sizes, function (size) {
+    var generate = function generate() {
+      return "\n                    .k-spinner-input {\n                        padding-right: calc(" + theme[size].height + " - 1px);\n                        width: " + spinner.vertical[size].width + ";\n                    }\n                ";
+    };
+
+    if (size === 'default') {
+      return generate();
+    } else {
+      return "\n                        &.k-" + size + " {\n                            " + generate() + "\n                        }\n                    ";
+    }
+  }), ";.k-spinner-btn{position:absolute;right:0;margin:0;height:calc(50% + 1px);line-height:50%;}.k-spinner-icon{line-height:50%!important;font-size:inherit!important;}.k-spinner-btn.k-left{bottom:0;border-radius:0 0 ", theme.borderRadius, " 0;}.k-spinner-btn.k-right{top:0;border-radius:0 ", theme.borderRadius, " 0 0;}.k-spinner-input{font-size:0;.k-input-inner{border-radius:", theme.borderRadius, " 0 0 ", theme.borderRadius, ";}}}&.k-disabled{.k-spinner-btn{&:hover,&:focus{z-index:0;}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+    var styles = spinner[size];
+
+    var generate = function generate() {
+      return "\n                .k-spinner-icon {\n                    font-size: " + styles.iconFontSize + ";\n                }\n                .k-spinner-input {\n                    width: " + styles.inputWidth + ";\n                }\n            ";
+    };
+
+    if (size === 'default') {
+      return generate();
+    } else {
+      return "\n                    &.k-" + size + " {\n                        " + generate() + "\n                    }\n                ";
+    }
+  }), ";");
+}
+
+export {normalize} from 'intact-react';

package/components/spinner/useChange.d.ts

@@ -0,0 +1,11 @@
+import type { NormalizedGetStep } from './useStep';
+import type { useValue } from './useValue';
+export declare function useChange(getStep: NormalizedGetStep, fixValue: ReturnType<typeof useValue>['fixValue']): {
+    increase: () => void;
+    decrease: () => void;
+    changeValue: (e: Event) => void;
+    onFocusin: () => void;
+};
+
+
+export {normalize} from 'intact-react';

package/components/spinner/useChange.js

@@ -0,0 +1,55 @@
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import { useInstance } from 'intact-react';
+export function useChange(getStep, fixValue) {
+  var instance = useInstance();
+  var oldValue;
+
+  function increase() {
+    var _instance$get = instance.get(),
+        value = _instance$get.value;
+
+    var _getStep = getStep(value, 'increase'),
+        step = _getStep[0];
+
+    oldValue = value;
+    fixAndTriggerChange(Number((value + step).toFixed(10)), 0);
+  }
+
+  function decrease() {
+    var _instance$get2 = instance.get(),
+        value = _instance$get2.value;
+
+    var _getStep2 = getStep(value, 'decrease'),
+        step = _getStep2[0];
+
+    oldValue = value;
+    fixAndTriggerChange(Number((value - step).toFixed(10)), 0);
+  }
+
+  function changeValue(e) {
+    var _context;
+
+    fixAndTriggerChange(_trimInstanceProperty(_context = e.target.value).call(_context), instance.get('value'));
+  }
+
+  function onFocusin() {
+    oldValue = instance.get('value');
+  }
+
+  function fixAndTriggerChange(value, fallbackValue) {
+    var fixedValue = fixValue(value, fallbackValue);
+
+    if (oldValue !== fixedValue) {
+      instance.trigger('change', fixedValue, oldValue);
+    }
+  }
+
+  return {
+    increase: increase,
+    decrease: decrease,
+    changeValue: changeValue,
+    onFocusin: onFocusin
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/spinner/useFormatter.d.ts

@@ -0,0 +1,7 @@
+export declare function useFormatter(): {
+    format: (value: number) => string;
+    parse: (value: string) => number | typeof NaN;
+};
+
+
+export {normalize} from 'intact-react';

package/components/spinner/useFormatter.js

@@ -0,0 +1,49 @@
+import { useInstance } from 'intact-react';
+export function useFormatter() {
+  var instance = useInstance();
+
+  function format(value) {
+    var _instance$get = instance.get(),
+        formatter = _instance$get.formatter,
+        prefix = _instance$get.prefix,
+        suffix = _instance$get.suffix;
+
+    if (!formatter) {
+      return "" + (prefix || '') + value + (suffix || '');
+    }
+
+    return formatter(value);
+  }
+
+  function parse(value) {
+    var _instance$get2 = instance.get(),
+        parser = _instance$get2.parser,
+        prefix = _instance$get2.prefix,
+        suffix = _instance$get2.suffix;
+
+    if (value === '') {
+      return NaN;
+    }
+
+    if (!parser) {
+      if (prefix) {
+        value = value.replace(new RegExp("^" + prefix), '');
+      }
+
+      if (suffix) {
+        value = value.replace(new RegExp(suffix + "$"), '');
+      }
+
+      return +value;
+    }
+
+    return parser(value);
+  }
+
+  return {
+    format: format,
+    parse: parse
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/spinner/useStep.d.ts

@@ -0,0 +1,16 @@
+import { Component } from 'intact-react';
+import type { StepObject, StepFunction } from './';
+declare type Direction = 'increase' | 'decrease';
+export declare type NormalizedGetStep = (value: number, direction?: Direction) => [number, number];
+interface StepComponentProps {
+    step?: number | StepObject | StepFunction;
+    min?: number;
+    max?: number;
+}
+interface StepComponent extends Component<StepComponentProps> {
+}
+export declare function useStep<T extends StepComponent>(defaultStep: number): (value: number, direction?: Direction | undefined) => [number, number];
+export {};
+
+
+export {normalize} from 'intact-react';

package/components/spinner/useStep.js

@@ -0,0 +1,100 @@
+import _sortInstanceProperty from "@babel/runtime-corejs3/core-js/instance/sort";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _Object$keys from "@babel/runtime-corejs3/core-js/object/keys";
+import { useInstance } from 'intact-react';
+import { isUndefined } from 'intact-shared';
+export function useStep(defaultStep) {
+  var instance = useInstance();
+
+  var step = function step() {
+    var _instance$get = instance.get(),
+        step = _instance$get.step,
+        min = _instance$get.min;
+
+    return [step, min];
+  };
+
+  instance.on('$receive:step', function (v) {
+    var getStep = parseStep(v, defaultStep);
+
+    step = function step(value, direction) {
+      var step = getStep(value, direction);
+      var min = instance.get('min');
+
+      if (Array.isArray(step)) {
+        return [step[0], isUndefined(step[1]) ? min : Math.max(min, step[1])];
+      } else {
+        return [step, min];
+      }
+    };
+  });
+  return function (value, direction) {
+    return step(value, direction);
+  };
+}
+
+function parseStep(step, defaultValue) {
+  var _context, _context2;
+
+  var type = typeof step;
+
+  switch (type) {
+    case 'number':
+      return function () {
+        return step;
+      };
+
+    case 'object':
+      var breakpoints = _sortInstanceProperty(_context = _mapInstanceProperty(_context2 = _Object$keys(step)).call(_context2, function (i) {
+        if (i === '$') {
+          return {
+            key: i,
+            value: Number.POSITIVE_INFINITY
+          };
+        }
+
+        return {
+          key: i,
+          value: Number(i)
+        };
+      })).call(_context, function (a, b) {
+        return a.value - b.value;
+      });
+
+      return function (value, direction) {
+        for (var i = 0; i < breakpoints.length; i++) {
+          var breakpoint = breakpoints[i];
+          var prevBreakpoint = breakpoints[i - 1];
+
+          if (value < breakpoint.value) {
+            return [step[breakpoint.key], prevBreakpoint && prevBreakpoint.value];
+          }
+
+          if (value === breakpoint.value) {
+            // we must detect the direction when it is a breakpoint
+            if (direction === 'increase') {
+              var nextBreakpoint = breakpoints[i + 1];
+
+              if (nextBreakpoint !== undefined) {
+                return [step[nextBreakpoint.key], breakpoint.value];
+              }
+            }
+
+            return [step[breakpoint.key], prevBreakpoint && prevBreakpoint.value];
+          }
+        }
+
+        return [defaultValue, undefined];
+      };
+
+    case 'function':
+      return step;
+
+    default:
+      return function () {
+        return defaultValue;
+      };
+  }
+}
+
+export {normalize} from 'intact-react';

package/components/spinner/useValue.d.ts

@@ -0,0 +1,17 @@
+import { NormalizedGetStep } from './useStep';
+import type { useFormatter } from './useFormatter';
+export declare function useValue(getStep: NormalizedGetStep, formatter: ReturnType<typeof useFormatter>): {
+    showValue: import("../../hooks/useState").State<string | number | undefined>;
+    fixValue: (value: number | string, fallbackValue: number) => number;
+    getFixedValue: (value: number | string, fallbackValue: number) => {
+        valueString: string;
+        value: number;
+    };
+};
+/**
+ * return max min or multiple by step
+ */
+export declare function minMaxStep(value: number, min: number, max: number, step: number | null): number;
+
+
+export {normalize} from 'intact-react';

package/components/spinner/useValue.js

@@ -0,0 +1,91 @@
+import _Number$isNaN from "@babel/runtime-corejs3/core-js/number/is-nan";
+import { useInstance } from 'intact-react';
+import { useReceive } from '../../hooks/useReceive';
+import { error, isNullOrUndefined, isString } from 'intact-shared';
+import { useState } from '../../hooks/useState'; // const numberReg = /^(-|\+)?\d+(\.(\d+)?)?$/;
+
+export function useValue(getStep, formatter) {
+  var instance = useInstance();
+  var showValue = useState(instance.get('value'));
+  useReceive(['max', 'min', 'precision', 'value', 'formatter', 'parser', 'prefix', 'suffix'], function () {
+    fixValue(instance.get('value'), 0);
+  });
+
+  function fixValue(value, fallbackValue) {
+    var _getFixedValue = getFixedValue(value, fallbackValue),
+        valueString = _getFixedValue.valueString,
+        fixedValue = _getFixedValue.value;
+
+    showValue.set(valueString);
+    instance.set({
+      value: fixedValue
+    });
+    return fixedValue;
+  }
+
+  function getFixedValue(value, fallbackValue) {
+    var _instance$get = instance.get(),
+        precision = _instance$get.precision,
+        max = _instance$get.max,
+        forceStep = _instance$get.forceStep;
+
+    if (isString(value)) {
+      value = formatter.parse(value);
+    }
+
+    if (_Number$isNaN(value)) {
+      value = fallbackValue;
+    }
+
+    var _getStep = getStep(value),
+        step = _getStep[0],
+        min = _getStep[1];
+
+    if (min > max) {
+      if (process.env.NODE_ENV !== 'production') {
+        error("[Spinner] min must less than or equal to max, but got min: " + min + " max: " + max);
+      }
+
+      return {
+        valueString: formatter.format(fallbackValue),
+        value: fallbackValue
+      };
+    }
+
+    value = minMaxStep(value, min, max, forceStep ? step : null);
+
+    if (!isNullOrUndefined(precision)) {
+      value = +value.toFixed(precision);
+    }
+
+    var valueString = formatter.format(value);
+    return {
+      valueString: valueString,
+      value: value
+    };
+  }
+
+  return {
+    showValue: showValue,
+    fixValue: fixValue,
+    getFixedValue: getFixedValue
+  };
+}
+/**
+ * return max min or multiple by step
+ */
+
+export function minMaxStep(value, min, max, step) {
+  if (value >= max) return max;
+  if (value <= min) return min;
+
+  if (step) {
+    value = Number((Math.round((value - min) / step) * step + min).toFixed(10)); // value = Number((Math.round(value / step) * step).toFixed(10))
+
+    return minMaxStep(value, min, max, null);
+  }
+
+  return value;
+}
+
+export {normalize} from 'intact-react';

package/components/split/index.d.ts

@@ -0,0 +1,31 @@
+import { Component, TypeDefs } from 'intact-react';
+import { Mode } from './style';
+import type { Events } from '../types';
+export interface SplitProps {
+    mode?: Mode;
+    firstSize?: string;
+    lastSize?: string;
+    min?: number | string;
+    max?: number | string;
+}
+export interface SplitEvents {
+    moveStart: [MouseEvent];
+    moving: [MouseEvent];
+    moveEnd: [MouseEvent | undefined];
+}
+export interface SplitBlocks {
+    first: null;
+    last: null;
+    drag: null;
+}
+export declare class Split extends Component<SplitProps, SplitEvents, SplitBlocks> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<SplitProps>>;
+    static defaults: () => Partial<SplitProps>;
+    static events: Events<SplitEvents>;
+    private size;
+    private drag;
+}
+
+
+export {normalize} from 'intact-react';

package/components/split/index.js

@@ -0,0 +1,55 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component } from 'intact-react';
+import template from './index.vdt';
+import { useSize } from './useSize';
+import { useDraggable } from './useDraggable';
+var typeDefs = {
+  mode: String,
+  firstSize: String,
+  lastSize: String,
+  min: [String, Number],
+  max: [String, Number]
+};
+
+var defaults = function defaults() {
+  return {
+    mode: 'horizontal',
+    firstSize: 'auto',
+    lastSize: 'auto',
+    min: 0,
+    max: '100%-6'
+  };
+};
+
+var events = {
+  moveStart: true,
+  moving: true,
+  moveEnd: true
+};
+export var Split = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Split, _Component);
+
+  function Split() {
+    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.size = useSize();
+    _this.drag = useDraggable(_this.size.firstSize, _this.size.lastSize);
+    return _this;
+  }
+
+  return Split;
+}(Component);
+Split.template = template;
+Split.typeDefs = typeDefs;
+Split.defaults = defaults;
+Split.events = events;
+
+export {normalize} from 'intact-react';

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

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