@king-design/react 2.1.4 → 2.1.6

package/components/colorpicker/styles.js

@@ -7,36 +7,45 @@ var defaults = {
   get height() {
     return theme.default.height;
   },
+
   width: '100px',
+
   get border() {
     return "1px solid " + theme.color.border;
   },
+
   get borderRadius() {
     return theme.borderRadius;
   },
+
   cursor: 'pointer',
   bgColor: '#fff',
   padding: '4px',
+
   get innerBorderRadius() {
     return theme.borderRadius;
   },
+
   // size
   large: {
     get height() {
       return theme.large.height;
     },
+
     width: '120px'
   },
   small: {
     get height() {
       return theme.small.height;
     },
+
     width: '70px'
   },
   mini: {
     get height() {
       return theme.mini.height;
     },
+
     width: '50px',
     padding: '2px'
   },
@@ -92,9 +101,11 @@ var defaults = {
     get bgColor() {
       return theme.color.disabledBg;
     },
+
     get borderColor() {
       return theme.color.disabledBorder;
     },
+
     cursor: 'not-allowed'
   }
 };
@@ -116,7 +127,7 @@ export function makePanelStyles() {
 }
 export function makeAlphaBgColor(_ref) {
   var r = _ref.r,
-    g = _ref.g,
-    b = _ref.b;
+      g = _ref.g,
+      b = _ref.b;
   return /*#__PURE__*/css(".k-slider-track-wrapper{background:linear-gradient(to right, rgba(", r, ", ", g, ", ", b, ", 0) 0%, rgb(", r, ", ", g, ", ", b, ") 100%);}");
 }

package/components/colorpicker/useDrag.js

@@ -5,31 +5,35 @@ export function useDrag() {
   var mousedown = false;
   var mousemove = false;
   var x;
+
   var _useDraggable = useDraggable({
-      onStart: function onStart(e) {
-        mousedown = true;
-        x = e.clientX;
-        instance.get('onStart')();
-      },
-      onMove: function onMove(e) {
-        mousemove = true;
-        var _instance$get = instance.get(),
+    onStart: function onStart(e) {
+      mousedown = true;
+      x = e.clientX;
+      instance.get('onStart')();
+    },
+    onMove: function onMove(e) {
+      mousemove = true;
+
+      var _instance$get = instance.get(),
           value = _instance$get.value,
           max = _instance$get.max;
-        var deltaX = e.clientX - x;
-        var newValue = value + deltaX;
-        x = e.clientX;
-        instance.set('value', Math.min(max, Math.max(0, newValue)));
-      },
-      onEnd: function onEnd(e) {
-        if (instance.$unmounted) return;
-        if (mousedown && !mousemove) instance.trigger('click');
-        mousedown = false;
-        mousemove = false;
-        instance.get('onEnd')();
-      }
-    }),
-    start = _useDraggable.start;
+
+      var deltaX = e.clientX - x;
+      var newValue = value + deltaX;
+      x = e.clientX;
+      instance.set('value', Math.min(max, Math.max(0, newValue)));
+    },
+    onEnd: function onEnd(e) {
+      if (instance.$unmounted) return;
+      if (mousedown && !mousemove) instance.trigger('click');
+      mousedown = false;
+      mousemove = false;
+      instance.get('onEnd')();
+    }
+  }),
+      start = _useDraggable.start;
+
   return {
     start: start
   };

package/components/colorpicker/useInput.js

@@ -5,48 +5,64 @@ import { useInstance } from 'intact-react';
 import tinycolor from 'tinycolor2';
 import { useState } from '../../hooks/useState';
 export var Mode;
+
 (function (Mode) {
   Mode[Mode["RGB"] = 0] = "RGB";
   Mode[Mode["HSL"] = 1] = "HSL";
 })(Mode || (Mode = {}));
+
 export function useInput(hsv, rgb, hsl) {
   var instance = useInstance();
   var mode = useState(Mode.RGB);
   var dragging = useState(false);
+
   function onInputHex(e) {
     var _context;
+
     var hex = _trimInstanceProperty(_context = e.target.value).call(_context);
+
     var color = tinycolor(hex);
+
     if (color.isValid()) {
       hsv.set(color.toHsv());
     }
   }
+
   function changeMode() {
     mode.set(mode.value === Mode.RGB ? Mode.HSL : Mode.RGB);
   }
+
   function changeColor(type, v) {
     var _extends2;
+
     var isRgb = mode.value === Mode.RGB;
     var color = isRgb ? rgb.value : hsl.value;
+
     if (!isRgb && type !== 'h' || type === 'a') {
       v = v / 100;
     }
+
     if (color[type] === v) return;
     hsv.set(tinycolor(_extends({}, color, (_extends2 = {}, _extends2[type] = v, _extends2))).toHsv());
   }
+
   function setInputValue(type, maxValue, e) {
     var _context2;
+
     var value = parseInt(_trimInstanceProperty(_context2 = e.target.value).call(_context2), 10);
     if (_Number$isNaN(value)) return;
     value = Math.min(Math.max(0, value), maxValue);
     changeColor(type, value);
   }
+
   function onStart() {
     dragging.set(true);
   }
+
   function onEnd() {
     dragging.set(false);
   }
+
   return {
     onInputHex: onInputHex,
     mode: mode,

package/components/colorpicker/usePointer.js

@@ -7,22 +7,25 @@ window.tinycolor = tinycolor;
 export function usePointer(hsv, format) {
   var instance = useInstance();
   var areaRef = createRef();
+
   var _useDraggable = useDraggable({
-      onStart: function onStart(e) {
-        handleChange(e);
-      },
-      onMove: function onMove(e) {
-        handleChange(e);
-      }
-    }),
-    start = _useDraggable.start;
-  // @reference: https://github.com/casesandberg/react-color/blob/master/src/helpers/saturation.js
+    onStart: function onStart(e) {
+      handleChange(e);
+    },
+    onMove: function onMove(e) {
+      handleChange(e);
+    }
+  }),
+      start = _useDraggable.start; // @reference: https://github.com/casesandberg/react-color/blob/master/src/helpers/saturation.js
+
+
   function handleChange(e) {
     var _areaRef$value$getBou = areaRef.value.getBoundingClientRect(),
-      width = _areaRef$value$getBou.width,
-      height = _areaRef$value$getBou.height,
-      _left = _areaRef$value$getBou.left,
-      _top = _areaRef$value$getBou.top;
+        width = _areaRef$value$getBou.width,
+        height = _areaRef$value$getBou.height,
+        _left = _areaRef$value$getBou.left,
+        _top = _areaRef$value$getBou.top;
+
     var x = isNumber(e.pageX) ? e.pageX : e.touches[0].pageX;
     var y = isNumber(e.pageY) ? e.pageY : e.touches[0].pageY;
     var left = x - _left - window.pageXOffset;
@@ -34,13 +37,13 @@ export function usePointer(hsv, format) {
     hsv.set(_extends({}, hsv.value, {
       s: saturation,
       v: bright
-    }));
-    // const value = tinycolor(hsv.value!).toString(format.value as 'rgb');
+    })); // const value = tinycolor(hsv.value!).toString(format.value as 'rgb');
     // // console.log()
     // // const tinyValue = tinycolor(value);
     // // console.log(hsv, value, tinycolor(hsv).toHsv(), getFormat(), tinyValue.toHsv());
     // instance.set({value});
   }
+
   return {
     start: start,
     areaRef: areaRef

package/components/colorpicker/useValue.js

@@ -19,25 +19,30 @@ export function useValue() {
     var color = tinycolor(hsv);
     rgb.set(color.toRgb());
     hex.set(color.toHex());
-    hsl.set(color.toHsl());
-    // if alpha less than 1, use rgba format
+    hsl.set(color.toHsl()); // if alpha less than 1, use rgba format
+
     var _format = hsv.a < 1 ? 'rgb' : format.value;
+
     instance.set('value', color.toString(_format));
   });
+
   function changeHue(v) {
     hsv.set(_extends({}, hsv.value, {
       h: v
     }));
   }
+
   function changeAlpha(v) {
     format.set('rgb');
     hsv.set(_extends({}, hsv.value, {
       a: v
     }));
   }
+
   function setValue(v) {
     hsv.set(tinycolor(v).toHsv());
   }
+
   return {
     format: format,
     hex: hex,

package/components/context.d.ts

@@ -5,8 +5,8 @@ export interface ProviderProps<T> {
 export interface ConsumerProps<T> {
     defaultValue?: T;
 }
-type ProviderConstructor<T> = ComponentConstructor<Component<ProviderProps<T>>>;
-type ConsumerConstructor<T> = ComponentConstructor<Component<ConsumerProps<T>>>;
+declare type ProviderConstructor<T> = ComponentConstructor<Component<ProviderProps<T>>>;
+declare type ConsumerConstructor<T> = ComponentConstructor<Component<ConsumerProps<T>>>;
 export declare function createContext<T = any>(defaultValue?: T): {
     Provider: ProviderConstructor<T>;
     Consumer: ConsumerConstructor<T>;

package/components/context.js

@@ -5,19 +5,26 @@ import { isNullOrUndefined } from 'intact-shared';
 var id = 0;
 export function createContext(defaultValue) {
   var injectionKey = "$Context-" + id++;
+
   var Provider = /*#__PURE__*/function (_Component) {
     _inheritsLoose(Provider, _Component);
+
     function Provider() {
       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.ref = createRef();
       return _this;
     }
+
     var _proto = Provider.prototype;
+
     _proto.init = function init(props) {
       var value = props && props.value;
       var ref = this.ref;
@@ -27,39 +34,49 @@ export function createContext(defaultValue) {
         return ref.value = v;
       });
     };
+
     return Provider;
   }(Component);
+
   Provider.template = providerTemplate;
+
   var Consumer = /*#__PURE__*/function (_Component2) {
     _inheritsLoose(Consumer, _Component2);
+
     function Consumer() {
       var _context2;
+
       var _this2;
+
       for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
         args[_key2] = arguments[_key2];
       }
+
       _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context2 = [this]).call(_context2, args)) || this;
       _this2.ref = inject(injectionKey, null);
       return _this2;
     }
+
     return Consumer;
   }(Component);
+
   Consumer.template = consumerTemplate;
   return {
     Provider: Provider,
     Consumer: Consumer
   };
 }
+
 function providerTemplate() {
   return this.$props.children;
 }
+
 function consumerTemplate() {
   var ref = this.ref;
   var props = this.$props;
   var value = ref && ref.value || props && props.value;
   return this.$props.children(value);
-}
-// Maybe like legency context api of React
+} // Maybe like legency context api of React
 // Error: Can not use it in multiple instances.
 // export function Context<T = any>(defaultValue?: T) {
 // let data: T | undefined;

package/components/datepicker/basepicker.d.ts

@@ -9,13 +9,13 @@ import type { useDisabled } from './useDisabled';
 import { PanelFlags, usePanel } from './usePanel';
 import { BaseSelect, BaseSelectProps, BaseSelectEvents, BaseSelectBlocks } from '../select/base';
 import type { Events } from '../types';
-export type StateValueRange = [Dayjs, Dayjs?];
-export type StateValueItem = Dayjs | StateValueRange;
-export type StateValue = StateValueItem[];
-export type StringValue = string | string[] | [string, string] | [string, string][];
-export type DayjsValueRange = [Dayjs, Dayjs];
-export type DayjsValueItem = Dayjs | DayjsValueRange;
-export type DayjsValue = DayjsValueItem[];
+export declare type StateValueRange = [Dayjs, Dayjs?];
+export declare type StateValueItem = Dayjs | StateValueRange;
+export declare type StateValue = StateValueItem[];
+export declare type StringValue = string | string[] | [string, string] | [string, string][];
+export declare type DayjsValueRange = [Dayjs, Dayjs];
+export declare type DayjsValueItem = Dayjs | DayjsValueRange;
+export declare type DayjsValue = DayjsValueItem[];
 export interface BasePickerProps<V extends Value = Value, Multipe extends boolean = boolean, Range extends boolean = boolean> extends BaseSelectProps<V | [V, V], Multipe> {
     value?: Multipe extends true ? Range extends true ? [
         V,
@@ -37,7 +37,7 @@ export interface BasePickerEvents extends BaseSelectEvents {
 }
 export interface BasePickerBlocks<V extends Value = Value, R extends boolean = boolean> extends BaseSelectBlocks<R extends true ? [Value, Value] : Value> {
 }
-export type Value = string | Date | number | Dayjs;
+export declare type Value = string | Date | number | Dayjs;
 export declare abstract class BasePicker<T extends BasePickerProps = BasePickerProps, E extends BasePickerEvents = BasePickerEvents, B extends BasePickerBlocks<any> = BasePickerBlocks<any>> extends BaseSelect<T, E, B> {
     static typeDefs: Required<TypeDefs<BasePickerProps<Value, boolean, boolean>>>;
     static defaults: () => Partial<BasePickerProps<any, boolean, boolean>>;