@king-design/react 2.1.3 → 2.1.4

package/components/colorpicker/index.spec.js

@@ -10,300 +10,252 @@ describe('Colorpicker', function () {
   beforeEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var data, trigger;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            data = mount(BasicDemo);
-            instance = data[0];
-            element = data[1];
-            trigger = element.querySelector('.k-colorpicker-color');
-            trigger.click();
-            _context.next = 7;
-            return wait();
-
-          case 7:
-            picker = getElement('.k-colorpicker-content');
-
-          case 8:
-          case "end":
-            return _context.stop();
-        }
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          data = mount(BasicDemo);
+          instance = data[0];
+          element = data[1];
+          trigger = element.querySelector('.k-colorpicker-color');
+          trigger.click();
+          _context.next = 7;
+          return wait();
+        case 7:
+          picker = getElement('.k-colorpicker-content');
+        case 8:
+        case "end":
+          return _context.stop();
       }
     }, _callee);
   })));
   afterEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            unmount();
-            _context2.next = 3;
-            return wait(500);
-
-          case 3:
-          case "end":
-            return _context2.stop();
-        }
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          unmount();
+          _context2.next = 3;
+          return wait(500);
+        case 3:
+        case "end":
+          return _context2.stop();
       }
     }, _callee2);
   })));
   it('should select color by saturation', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
     var saturation, _saturation$getBoundi, left, top;
-
     return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-      while (1) {
-        switch (_context3.prev = _context3.next) {
-          case 0:
-            expect(picker.innerHTML).to.matchSnapshot();
-            saturation = picker.querySelector('.k-colorpicker-saturation');
-            _saturation$getBoundi = saturation.getBoundingClientRect(), left = _saturation$getBoundi.left, top = _saturation$getBoundi.top;
-            dispatchEvent(saturation, 'mousedown', {
-              pageX: left + window.pageXOffset,
-              pageY: top + window.pageYOffset,
-              which: 1
-            });
-            _context3.next = 6;
-            return wait();
-
-          case 6:
-            expect(picker.innerHTML).to.matchSnapshot();
-            expect(instance.get('color')).to.eql('#ffffff');
-            dispatchEvent(saturation, 'mousemove', {
-              pageX: left + window.pageXOffset + 1,
-              pageY: top + window.pageYOffset + 1
-            });
-            _context3.next = 11;
-            return wait();
-
-          case 11:
-            expect(instance.get('color')).to.eql('#fdfcfc');
-            dispatchEvent(saturation, 'mouseup');
-            _context3.next = 15;
-            return wait();
-
-          case 15:
-          case "end":
-            return _context3.stop();
-        }
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          expect(picker.innerHTML).to.matchSnapshot();
+          saturation = picker.querySelector('.k-colorpicker-saturation');
+          _saturation$getBoundi = saturation.getBoundingClientRect(), left = _saturation$getBoundi.left, top = _saturation$getBoundi.top;
+          dispatchEvent(saturation, 'mousedown', {
+            pageX: left + window.pageXOffset,
+            pageY: top + window.pageYOffset,
+            which: 1
+          });
+          _context3.next = 6;
+          return wait();
+        case 6:
+          expect(picker.innerHTML).to.matchSnapshot();
+          expect(instance.get('color')).to.eql('#ffffff');
+          dispatchEvent(saturation, 'mousemove', {
+            pageX: left + window.pageXOffset + 1,
+            pageY: top + window.pageYOffset + 1
+          });
+          _context3.next = 11;
+          return wait();
+        case 11:
+          expect(instance.get('color')).to.eql('#fdfcfc');
+          dispatchEvent(saturation, 'mouseup');
+          _context3.next = 15;
+          return wait();
+        case 15:
+        case "end":
+          return _context3.stop();
       }
     }, _callee3);
   })));
   it('should change color by hue', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
     var hue, _hue$getBoundingClien, width, left;
-
     return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-      while (1) {
-        switch (_context4.prev = _context4.next) {
-          case 0:
-            hue = picker.querySelector('.k-colorpicker-hue .k-slider-track-wrapper');
-            _hue$getBoundingClien = hue.getBoundingClientRect(), width = _hue$getBoundingClien.width, left = _hue$getBoundingClien.left;
-            dispatchEvent(hue, 'click', {
-              clientX: 100 / 360 * width + left
-            }); // changing hue is throttled 50ms
-
-            _context4.next = 5;
-            return wait(100);
-
-          case 5:
-            expect(instance.get('color')).to.eql('#68d923');
-
-          case 6:
-          case "end":
-            return _context4.stop();
-        }
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          hue = picker.querySelector('.k-colorpicker-hue .k-slider-track-wrapper');
+          _hue$getBoundingClien = hue.getBoundingClientRect(), width = _hue$getBoundingClien.width, left = _hue$getBoundingClien.left;
+          dispatchEvent(hue, 'click', {
+            clientX: 100 / 360 * width + left
+          });
+          // changing hue is throttled 50ms
+          _context4.next = 5;
+          return wait(100);
+        case 5:
+          expect(instance.get('color')).to.eql('#68d923');
+        case 6:
+        case "end":
+          return _context4.stop();
       }
     }, _callee4);
   })));
   it('should change color by alpha', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
     var alpha, _alpha$getBoundingCli, width, left;
-
     return _regeneratorRuntime.wrap(function _callee5$(_context5) {
-      while (1) {
-        switch (_context5.prev = _context5.next) {
-          case 0:
-            alpha = picker.querySelector('.k-colorpicker-alpha .k-slider-track-wrapper');
-            _alpha$getBoundingCli = alpha.getBoundingClientRect(), width = _alpha$getBoundingCli.width, left = _alpha$getBoundingCli.left;
-            dispatchEvent(alpha, 'click', {
-              clientX: 0.5 * width + left
-            }); // changing alpha is throttled 50ms
-
-            _context5.next = 5;
-            return wait(100);
-
-          case 5:
-            expect(instance.get('color')).to.eql('rgba(217, 145, 35, 0.5)');
-
-          case 6:
-          case "end":
-            return _context5.stop();
-        }
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          alpha = picker.querySelector('.k-colorpicker-alpha .k-slider-track-wrapper');
+          _alpha$getBoundingCli = alpha.getBoundingClientRect(), width = _alpha$getBoundingCli.width, left = _alpha$getBoundingCli.left;
+          dispatchEvent(alpha, 'click', {
+            clientX: 0.5 * width + left
+          });
+          // changing alpha is throttled 50ms
+          _context5.next = 5;
+          return wait(100);
+        case 5:
+          expect(instance.get('color')).to.eql('rgba(217, 145, 35, 0.5)');
+        case 6:
+        case "end":
+          return _context5.stop();
       }
     }, _callee5);
   })));
   it('should change color by input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
     var _picker$querySelector, hex, r, g, b, alpha, alphaText;
-
     return _regeneratorRuntime.wrap(function _callee6$(_context6) {
-      while (1) {
-        switch (_context6.prev = _context6.next) {
-          case 0:
-            _picker$querySelector = picker.querySelectorAll('input'), hex = _picker$querySelector[0], r = _picker$querySelector[1], g = _picker$querySelector[2], b = _picker$querySelector[3], alpha = _picker$querySelector[4]; // should ignore invalid value
-
-            hex.value = 'test';
-            dispatchEvent(hex, 'input');
-            _context6.next = 5;
-            return wait();
-
-          case 5:
-            expect(instance.get('color')).to.eql('#d99123');
-            hex.value = '333';
-            dispatchEvent(hex, 'input');
-            _context6.next = 10;
-            return wait();
-
-          case 10:
-            expect(instance.get('color')).to.eql('#333333'); // drag to change alpha
-
-            alphaText = picker.querySelectorAll('.k-colorpicker-drag')[3];
-            dispatchEvent(alphaText, 'mousedown', {
-              clientX: 0,
-              which: 1
-            });
-            dispatchEvent(alphaText, 'mousemove', {
-              clientX: -1
-            });
-            _context6.next = 16;
-            return wait();
-
-          case 16:
-            expect(instance.get('color')).to.eql('rgba(51, 51, 51, 0.99)');
-            dispatchEvent(alphaText, 'mousemove', {
-              clientX: 1
-            });
-            _context6.next = 20;
-            return wait();
-
-          case 20:
-            expect(instance.get('color')).to.eql('#333333');
-            expect(picker.innerHTML).to.matchSnapshot();
-            dispatchEvent(alphaText, 'mouseup');
-            _context6.next = 25;
-            return wait();
-
-          case 25:
-            r.value = '1000';
-            dispatchEvent(r, 'input');
-            _context6.next = 29;
-            return wait();
-
-          case 29:
-            expect(instance.get('color')).to.eql('#ff3333');
-            alpha.value = '-1';
-            dispatchEvent(alpha, 'input');
-            _context6.next = 34;
-            return wait();
-
-          case 34:
-            expect(instance.get('color')).to.eql('rgba(255, 51, 51, 0)');
-
-          case 35:
-          case "end":
-            return _context6.stop();
-        }
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          _picker$querySelector = picker.querySelectorAll('input'), hex = _picker$querySelector[0], r = _picker$querySelector[1], g = _picker$querySelector[2], b = _picker$querySelector[3], alpha = _picker$querySelector[4]; // should ignore invalid value
+          hex.value = 'test';
+          dispatchEvent(hex, 'input');
+          _context6.next = 5;
+          return wait();
+        case 5:
+          expect(instance.get('color')).to.eql('#d99123');
+          hex.value = '333';
+          dispatchEvent(hex, 'input');
+          _context6.next = 10;
+          return wait();
+        case 10:
+          expect(instance.get('color')).to.eql('#333333');
+          // drag to change alpha
+          alphaText = picker.querySelectorAll('.k-colorpicker-drag')[3];
+          dispatchEvent(alphaText, 'mousedown', {
+            clientX: 0,
+            which: 1
+          });
+          dispatchEvent(alphaText, 'mousemove', {
+            clientX: -1
+          });
+          _context6.next = 16;
+          return wait();
+        case 16:
+          expect(instance.get('color')).to.eql('rgba(51, 51, 51, 0.99)');
+          dispatchEvent(alphaText, 'mousemove', {
+            clientX: 1
+          });
+          _context6.next = 20;
+          return wait();
+        case 20:
+          expect(instance.get('color')).to.eql('#333333');
+          expect(picker.innerHTML).to.matchSnapshot();
+          dispatchEvent(alphaText, 'mouseup');
+          _context6.next = 25;
+          return wait();
+        case 25:
+          r.value = '1000';
+          dispatchEvent(r, 'input');
+          _context6.next = 29;
+          return wait();
+        case 29:
+          expect(instance.get('color')).to.eql('#ff3333');
+          alpha.value = '-1';
+          dispatchEvent(alpha, 'input');
+          _context6.next = 34;
+          return wait();
+        case 34:
+          expect(instance.get('color')).to.eql('rgba(255, 51, 51, 0)');
+        case 35:
+        case "end":
+          return _context6.stop();
       }
     }, _callee6);
   })));
   it('should change to hsv mode', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
     var _picker$querySelector2, first, second, color, hsl, _picker$querySelector3, hex, h, s;
-
     return _regeneratorRuntime.wrap(function _callee7$(_context7) {
-      while (1) {
-        switch (_context7.prev = _context7.next) {
-          case 0:
-            _picker$querySelector2 = picker.querySelectorAll('.k-colorpicker-drag'), first = _picker$querySelector2[0], second = _picker$querySelector2[1];
-            color = tinycolor(instance.get('color'));
-            hsl = color.toHsl();
-            console.log(hsl);
-            dispatchEvent(first, 'mousedown', {
-              which: 1
-            });
-            dispatchEvent(first, 'mouseup');
-            _context7.next = 8;
-            return wait();
-
-          case 8:
-            expect(picker.innerHTML).to.matchSnapshot();
-            dispatchEvent(first, 'mousedown', {
-              clientX: 0,
-              which: 1
-            });
-            dispatchEvent(first, 'mousemove', {
-              clientX: -1
-            });
-            _context7.next = 13;
-            return wait();
-
-          case 13:
-            expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(35, 72%, 49%)');
-            dispatchEvent(first, 'mousemove', {
-              clientX: 1
-            });
-            _context7.next = 17;
-            return wait();
-
-          case 17:
-            expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(37, 72%, 49%)');
-            dispatchEvent(first, 'mouseup');
-            _context7.next = 21;
-            return wait();
-
-          case 21:
-            dispatchEvent(second, 'mousedown', {
-              clientX: 0,
-              which: 1
-            });
-            dispatchEvent(second, 'mousemove', {
-              clientX: -1
-            });
-            _context7.next = 25;
-            return wait();
-
-          case 25:
-            expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(37, 71%, 49%)');
-            dispatchEvent(second, 'mousemove', {
-              clientX: 1
-            });
-            _context7.next = 29;
-            return wait();
-
-          case 29:
-            expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(37, 73%, 49%)');
-            dispatchEvent(first, 'mouseup');
-            _context7.next = 33;
-            return wait();
-
-          case 33:
-            // input
-            _picker$querySelector3 = picker.querySelectorAll('input'), hex = _picker$querySelector3[0], h = _picker$querySelector3[1], s = _picker$querySelector3[2];
-            h.value = '1000';
-            dispatchEvent(h, 'input');
-            _context7.next = 38;
-            return wait();
-
-          case 38:
-            expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(359, 73%, 49%)');
-            s.value = '10';
-            dispatchEvent(s, 'input');
-            _context7.next = 43;
-            return wait();
-
-          case 43:
-            expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(358, 10%, 49%)');
-
-          case 44:
-          case "end":
-            return _context7.stop();
-        }
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          _picker$querySelector2 = picker.querySelectorAll('.k-colorpicker-drag'), first = _picker$querySelector2[0], second = _picker$querySelector2[1];
+          color = tinycolor(instance.get('color'));
+          hsl = color.toHsl();
+          console.log(hsl);
+          dispatchEvent(first, 'mousedown', {
+            which: 1
+          });
+          dispatchEvent(first, 'mouseup');
+          _context7.next = 8;
+          return wait();
+        case 8:
+          expect(picker.innerHTML).to.matchSnapshot();
+          dispatchEvent(first, 'mousedown', {
+            clientX: 0,
+            which: 1
+          });
+          dispatchEvent(first, 'mousemove', {
+            clientX: -1
+          });
+          _context7.next = 13;
+          return wait();
+        case 13:
+          expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(35, 72%, 49%)');
+          dispatchEvent(first, 'mousemove', {
+            clientX: 1
+          });
+          _context7.next = 17;
+          return wait();
+        case 17:
+          expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(37, 72%, 49%)');
+          dispatchEvent(first, 'mouseup');
+          _context7.next = 21;
+          return wait();
+        case 21:
+          dispatchEvent(second, 'mousedown', {
+            clientX: 0,
+            which: 1
+          });
+          dispatchEvent(second, 'mousemove', {
+            clientX: -1
+          });
+          _context7.next = 25;
+          return wait();
+        case 25:
+          expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(37, 71%, 49%)');
+          dispatchEvent(second, 'mousemove', {
+            clientX: 1
+          });
+          _context7.next = 29;
+          return wait();
+        case 29:
+          expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(37, 73%, 49%)');
+          dispatchEvent(first, 'mouseup');
+          _context7.next = 33;
+          return wait();
+        case 33:
+          // input
+          _picker$querySelector3 = picker.querySelectorAll('input'), hex = _picker$querySelector3[0], h = _picker$querySelector3[1], s = _picker$querySelector3[2];
+          h.value = '1000';
+          dispatchEvent(h, 'input');
+          _context7.next = 38;
+          return wait();
+        case 38:
+          expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(359, 73%, 49%)');
+          s.value = '10';
+          dispatchEvent(s, 'input');
+          _context7.next = 43;
+          return wait();
+        case 43:
+          expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(358, 10%, 49%)');
+        case 44:
+        case "end":
+          return _context7.stop();
       }
     }, _callee7);
   })));

package/components/colorpicker/index.vdt.js

@@ -7,21 +7,18 @@ import { ColorpickerPanel } from './panel';
 import { Dropdown, DropdownMenu } from '../dropdown';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
-
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
-
   var _this$get = this.get(),
-      className = _this$get.className,
-      transition = _this$get.transition,
-      presets = _this$get.presets,
-      value = _this$get.value,
-      size = _this$get.size,
-      disabled = _this$get.disabled,
-      container = _this$get.container,
-      position = _this$get.position;
-
+    className = _this$get.className,
+    transition = _this$get.transition,
+    presets = _this$get.presets,
+    value = _this$get.value,
+    size = _this$get.size,
+    disabled = _this$get.disabled,
+    container = _this$get.container,
+    position = _this$get.position;
   var classNameObj = (_classNameObj = {
     'k-colorpicker': true
   }, _classNameObj[className] = className, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-disabled'] = disabled, _classNameObj[makeStyles()] = true, _classNameObj);

package/components/colorpicker/panel.js

@@ -7,23 +7,18 @@ import { usePointer } from './usePointer';
 import { useInput } from './useInput';
 export var ColorpickerPanel = /*#__PURE__*/function (_Component) {
   _inheritsLoose(ColorpickerPanel, _Component);
-
   function ColorpickerPanel() {
     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.value = useValue();
     _this.pointer = usePointer(_this.value.hsv, _this.value.format);
     _this.input = useInput(_this.value.hsv, _this.value.rgb, _this.value.hsl);
     return _this;
   }
-
   return ColorpickerPanel;
 }(Component);
 ColorpickerPanel.template = template;

package/components/colorpicker/panel.vdt.js

@@ -9,40 +9,37 @@ import { Mode } from './useInput';
 import { ColorpickerDrag as Drag } from './drag';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
-      _$cn2,
-      _this = this;
-
+    _$cn2,
+    _this = this;
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
-
   var _this$get = this.get(),
-      value = _this$get.value,
-      presets = _this$get.presets;
-
+    value = _this$get.value,
+    presets = _this$get.presets;
   var classNameObj = (_classNameObj = {
     'k-colorpicker-panel': true
   }, _classNameObj[makePanelStyles()] = true, _classNameObj);
   var _this$value = this.value,
-      hex = _this$value.hex.value,
-      hsv = _this$value.hsv.value,
-      rgb = _this$value.rgb.value,
-      hsl = _this$value.hsl.value,
-      changeHue = _this$value.changeHue,
-      changeAlpha = _this$value.changeAlpha,
-      setValue = _this$value.setValue;
+    hex = _this$value.hex.value,
+    hsv = _this$value.hsv.value,
+    rgb = _this$value.rgb.value,
+    hsl = _this$value.hsl.value,
+    changeHue = _this$value.changeHue,
+    changeAlpha = _this$value.changeAlpha,
+    setValue = _this$value.setValue;
   var _this$pointer = this.pointer,
-      start = _this$pointer.start,
-      areaRef = _this$pointer.areaRef;
+    start = _this$pointer.start,
+    areaRef = _this$pointer.areaRef;
   var _this$input = this.input,
-      onInputHex = _this$input.onInputHex,
-      mode = _this$input.mode,
-      changeMode = _this$input.changeMode,
-      changeColor = _this$input.changeColor,
-      onStart = _this$input.onStart,
-      onEnd = _this$input.onEnd,
-      dragging = _this$input.dragging,
-      setInputValue = _this$input.setInputValue;
+    onInputHex = _this$input.onInputHex,
+    mode = _this$input.mode,
+    changeMode = _this$input.changeMode,
+    changeColor = _this$input.changeColor,
+    onStart = _this$input.onStart,
+    onEnd = _this$input.onEnd,
+    dragging = _this$input.dragging,
+    setInputValue = _this$input.setInputValue;
   var alpha = Math.round(rgb.a * 100);
   return _$ce(2, 'div', [_$ce(2, 'div', [_$ce(2, 'div', null, 1, 'k-colorpicker-white'), _$ce(2, 'div', null, 1, 'k-colorpicker-black'), _$ce(2, 'div', _$ce(2, 'div', null, 1, 'k-colorpicker-circle'), 2, 'k-colorpicker-pointer', {
     'style': {
@@ -95,7 +92,6 @@ export default function ($props, $blocks, $__proto__) {
       var color;
       var method;
       var max;
-
       if (mode.value === Mode.RGB) {
         params = ['r', 'g', 'b'];
         color = rgb;
@@ -111,7 +107,6 @@ export default function ($props, $blocks, $__proto__) {
         method = _this._changeHsv;
         max = 100;
       }
-
       return _mapInstanceProperty(params).call(params, function (value) {
         var v = Math.round(color[value]);
         var realMax = value === 'h' ? 359 : max;