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

package/components/colorpicker/styles.js

@@ -8,45 +8,36 @@ 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'
   },
@@ -102,11 +93,9 @@ var defaults = {
     get bgColor() {
       return theme.color.disabledBg;
     },
-
     get borderColor() {
       return theme.color.disabledBorder;
     },
-
     cursor: 'not-allowed'
   }
 };
@@ -115,8 +104,8 @@ setDefault(function () {
   colorpicker = deepDefaults(theme, {
     colorpicker: defaults
   }).colorpicker;
-  makeStyles == null ? void 0 : makeStyles.clearCache();
-  makePanelStyles == null ? void 0 : makePanelStyles.clearCache();
+  makeStyles == null || makeStyles.clearCache();
+  makePanelStyles == null || makePanelStyles.clearCache();
 });
 var _sizes = ['large', 'small', 'mini'];
 export var makeStyles = cache(function makeStyles(k) {
@@ -130,7 +119,7 @@ export var makePanelStyles = cache(function makePanelStyles(k) {
 });
 export function makeAlphaBgColor(_ref, k) {
   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,35 +5,31 @@ 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,64 +5,48 @@ 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,25 +7,22 @@ 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;
@@ -37,13 +34,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,30 +19,25 @@ 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/config/index.js

@@ -1,24 +1,19 @@
 import { createContext } from '../context';
 import { EMPTY_OBJ, Component } from 'intact-react';
-
 var _createContext = createContext(EMPTY_OBJ),
-    Provider = _createContext.Provider,
-    ConfigConsumer = _createContext.Consumer,
-    useContext = _createContext.useContext;
-
+  Provider = _createContext.Provider,
+  ConfigConsumer = _createContext.Consumer,
+  useContext = _createContext.useContext;
 function useConfigContext() {
   var config = useContext();
   return {
     cls: function cls(name) {
       return (config.value.classNamePrefix || 'k') + "-" + name;
     },
-
     get k() {
       return config.value.classNamePrefix || 'k';
     }
-
   };
 }
-
 export var ConfigProvider = Provider;
 export { ConfigConsumer, useConfigContext };

package/components/config/index.spec.js

@@ -12,59 +12,46 @@ describe('Config', function () {
   // });
   it('should change classname prefix', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var Demo, _mount, instance, element;
-
     return _regeneratorRuntime.wrap(function _callee$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            Demo = /*#__PURE__*/function (_Component) {
-              _inheritsLoose(Demo, _Component);
-
-              function Demo() {
-                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.ConfigProvider = ConfigProvider;
-                _this.ButtonGroup = ButtonGroup;
-                _this.Button = Button;
-                return _this;
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component) {
+            _inheritsLoose(Demo, _Component);
+            function Demo() {
+              var _context;
+              var _this;
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                args[_key] = arguments[_key];
               }
-
-              Demo.defaults = function defaults() {
-                return {
-                  k: null
-                };
+              _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+              _this.ConfigProvider = ConfigProvider;
+              _this.ButtonGroup = ButtonGroup;
+              _this.Button = Button;
+              return _this;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                k: null
               };
-
-              return Demo;
-            }(Component);
-
-            Demo.template = "\n                const { ConfigProvider, ButtonGroup, Button } = this;\n                <div>\n                    <ConfigProvider value={{classNamePrefix: this.get('k')}}>\n                        <ButtonGroup>\n                            <Button ev-click={() => this.set('k', 'a')}>change to a</Button>\n                            <Button type=\"primary\" ev-click={() => this.set('k', 'b')}>change to b</Button>\n                        </ButtonGroup>\n                    </ConfigProvider>\n                    <Button>should not change</Button>\n                </div>\n            ";
-            _mount = mount(Demo), instance = _mount[0], element = _mount[1];
-            expect(element.innerHTML).to.matchSnapshot();
-            instance.set('k', 'a');
-            _context2.next = 7;
-            return wait();
-
-          case 7:
-            expect(element.innerHTML).to.matchSnapshot();
-            instance.set('k', 'b');
-            _context2.next = 11;
-            return wait();
-
-          case 11:
-            expect(element.innerHTML).to.matchSnapshot();
-
-          case 12:
-          case "end":
-            return _context2.stop();
-        }
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { ConfigProvider, ButtonGroup, Button } = this;\n                <div>\n                    <ConfigProvider value={{classNamePrefix: this.get('k')}}>\n                        <ButtonGroup>\n                            <Button ev-click={() => this.set('k', 'a')}>change to a</Button>\n                            <Button type=\"primary\" ev-click={() => this.set('k', 'b')}>change to b</Button>\n                        </ButtonGroup>\n                    </ConfigProvider>\n                    <Button>should not change</Button>\n                </div>\n            ";
+          _mount = mount(Demo), instance = _mount[0], element = _mount[1];
+          expect(element.innerHTML).to.matchSnapshot();
+          instance.set('k', 'a');
+          _context2.next = 7;
+          return wait();
+        case 7:
+          expect(element.innerHTML).to.matchSnapshot();
+          instance.set('k', 'b');
+          _context2.next = 11;
+          return wait();
+        case 11:
+          expect(element.innerHTML).to.matchSnapshot();
+        case 12:
+        case "end":
+          return _context2.stop();
       }
     }, _callee);
   })));

package/components/context.d.ts

@@ -5,8 +5,8 @@ export interface ProviderProps<T> {
 export interface ConsumerProps<T> {
     defaultValue?: T;
 }
-declare type ProviderConstructor<T> = ComponentConstructor<Component<ProviderProps<T>>>;
-declare type ConsumerConstructor<T> = ComponentConstructor<Component<ConsumerProps<T>>>;
+type ProviderConstructor<T> = ComponentConstructor<Component<ProviderProps<T>>>;
+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,26 +5,19 @@ 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;
@@ -34,55 +27,43 @@ 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, createRef(defaultValue));
       return _this2;
     }
-
     return Consumer;
   }(Component);
-
   Consumer.template = consumerTemplate;
-
   function useContext() {
     return inject(injectionKey, createRef(defaultValue));
   }
-
   return {
     Provider: Provider,
     Consumer: Consumer,
     useContext: useContext
   };
 }
-
 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/copy/index.js

@@ -8,13 +8,11 @@ var typeDefs = {
   text: String,
   showMessage: Boolean
 };
-
 var defaults = function defaults() {
   return {
     showMessage: true
   };
 };
-
 var events = {
   success: true,
   error: true,
@@ -22,22 +20,17 @@ var events = {
 };
 export var Copy = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Copy, _Component);
-
   function Copy() {
     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.copy = useCopy();
     _this.config = useConfigContext();
     return _this;
   }
-
   return Copy;
 }(Component);
 Copy.template = template;