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

package/components/split/index.spec.js

@@ -8,16 +8,14 @@ import RangeDemo from '~/components/split/demos/range';
 import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
 import { createVNode as h, Component } from 'intact-react';
 import { Split } from './';
-
 var test = function test(sizes, split) {
   // @ts-ignore
   var _split$size = split.size,
-      firstSize = _split$size.firstSize,
-      lastSize = _split$size.lastSize;
+    firstSize = _split$size.firstSize,
+    lastSize = _split$size.lastSize;
   expect(firstSize.value).to.eq(sizes[0]);
   expect(lastSize.value).to.eq(sizes[1]);
 };
-
 describe('Split', function () {
   afterEach(function () {
     return unmount();
@@ -25,305 +23,263 @@ describe('Split', function () {
   it('should fix leftSize and rightSize', function () {
     var Demo = /*#__PURE__*/function (_Component) {
       _inheritsLoose(Demo, _Component);
-
       function Demo() {
         return _Component.apply(this, arguments) || this;
       }
-
       return Demo;
     }(Component);
-
     Demo.template = function () {
       return h(Split, {
         lastSize: '10px',
         firstSize: '10px'
       });
     };
-
     var _mount = mount(Demo),
-        instance = _mount[0],
-        element = _mount[1];
-
+      instance = _mount[0],
+      element = _mount[1];
     expect(element.outerHTML).to.matchSnapshot();
   });
   it('should drag to resize horizontal panel', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount2, instance, element, _instance$$lastInput$, split1, split2, _element$querySelecto, demo1, demo2, dragLine;
-
     return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            _mount2 = mount(BasicDemo), instance = _mount2[0], element = _mount2[1];
-            _instance$$lastInput$ = instance.$lastInput.children, split1 = _instance$$lastInput$[1].children, split2 = _instance$$lastInput$[2].children;
-            _element$querySelecto = element.querySelectorAll('.k-split'), demo1 = _element$querySelecto[1], demo2 = _element$querySelecto[2];
-            dragLine = demo1.querySelector('.k-split-line-wrapper'); // right click does not work
-
-            dispatchEvent(dragLine, 'mousedown', {
-              which: 2
-            });
-            _context.next = 7;
-            return wait();
-
-          case 7:
-            // @ts-ignore
-            expect(split1.drag.dragging.value).to.be.false;
-            expect(demo1.outerHTML).to.matchSnapshot(); // moveStart
-
-            dispatchEvent(dragLine, 'mousedown', {
-              which: 1,
-              clientX: 80,
-              clientY: 0
-            }); // move 
-
-            dispatchEvent(document, 'mousemove', {
-              clientX: 100,
-              clientY: 0
-            });
-            _context.next = 13;
-            return wait();
-
-          case 13:
-            expect(demo1.outerHTML).to.matchSnapshot();
-            test(['100px', 'auto'], split1); // move to max
-
-            dispatchEvent(document, 'mousemove', {
-              clientX: 1000,
-              clientY: 0
-            });
-            _context.next = 18;
-            return wait();
-
-          case 18:
-            expect(demo1.outerHTML).to.matchSnapshot();
-            test(['794px', 'auto'], split1); // move to min
-
-            dispatchEvent(document, 'mousemove', {
-              clientX: -1,
-              clientY: 0
-            });
-            _context.next = 23;
-            return wait();
-
-          case 23:
-            expect(demo1.outerHTML).to.matchSnapshot();
-            test(['0px', 'auto'], split1); // moveEnd
-
-            dispatchEvent(document, 'mouseup');
-            dragLine = demo2.querySelector('.k-split-line-wrapper'); // moveStart
-
-            dispatchEvent(dragLine, 'mousedown', {
-              which: 1,
-              clientX: 714,
-              clientY: 0
-            }); // move 
-
-            dispatchEvent(document, 'mousemove', {
-              clientX: 600,
-              clientY: 0
-            });
-            _context.next = 31;
-            return wait();
-
-          case 31:
-            expect(demo2.outerHTML).to.matchSnapshot();
-            test(['auto', 800 - 600 - 6 + "px"], split2); // move to max
-
-            dispatchEvent(document, 'mousemove', {
-              clientX: -1,
-              clientY: 0
-            });
-            _context.next = 36;
-            return wait();
-
-          case 36:
-            expect(demo2.outerHTML).to.matchSnapshot();
-            test(['auto', 800 - 6 + "px"], split2); // move to min
-
-            dispatchEvent(document, 'mousemove', {
-              clientX: 1000,
-              clientY: 0
-            });
-            expect(demo2.outerHTML).to.matchSnapshot();
-            test(['auto', "0px"], split2); // moveEnd
-
-            dispatchEvent(document, 'mouseup');
-
-          case 42:
-          case "end":
-            return _context.stop();
-        }
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _mount2 = mount(BasicDemo), instance = _mount2[0], element = _mount2[1];
+          _instance$$lastInput$ = instance.$lastInput.children, split1 = _instance$$lastInput$[1].children, split2 = _instance$$lastInput$[2].children;
+          _element$querySelecto = element.querySelectorAll('.k-split'), demo1 = _element$querySelecto[1], demo2 = _element$querySelecto[2];
+          dragLine = demo1.querySelector('.k-split-line-wrapper'); // right click does not work
+          dispatchEvent(dragLine, 'mousedown', {
+            which: 2
+          });
+          _context.next = 7;
+          return wait();
+        case 7:
+          // @ts-ignore
+          expect(split1.drag.dragging.value).to.be.false;
+          expect(demo1.outerHTML).to.matchSnapshot();
+          // moveStart
+          dispatchEvent(dragLine, 'mousedown', {
+            which: 1,
+            clientX: 80,
+            clientY: 0
+          });
+          // move 
+          dispatchEvent(document, 'mousemove', {
+            clientX: 100,
+            clientY: 0
+          });
+          _context.next = 13;
+          return wait();
+        case 13:
+          expect(demo1.outerHTML).to.matchSnapshot();
+          test(['100px', 'auto'], split1);
+          // move to max
+          dispatchEvent(document, 'mousemove', {
+            clientX: 1000,
+            clientY: 0
+          });
+          _context.next = 18;
+          return wait();
+        case 18:
+          expect(demo1.outerHTML).to.matchSnapshot();
+          test(['794px', 'auto'], split1);
+          // move to min
+          dispatchEvent(document, 'mousemove', {
+            clientX: -1,
+            clientY: 0
+          });
+          _context.next = 23;
+          return wait();
+        case 23:
+          expect(demo1.outerHTML).to.matchSnapshot();
+          test(['0px', 'auto'], split1);
+          // moveEnd
+          dispatchEvent(document, 'mouseup');
+          dragLine = demo2.querySelector('.k-split-line-wrapper');
+          // moveStart
+          dispatchEvent(dragLine, 'mousedown', {
+            which: 1,
+            clientX: 714,
+            clientY: 0
+          });
+          // move 
+          dispatchEvent(document, 'mousemove', {
+            clientX: 600,
+            clientY: 0
+          });
+          _context.next = 31;
+          return wait();
+        case 31:
+          expect(demo2.outerHTML).to.matchSnapshot();
+          test(['auto', 800 - 600 - 6 + "px"], split2);
+          // move to max
+          dispatchEvent(document, 'mousemove', {
+            clientX: -1,
+            clientY: 0
+          });
+          _context.next = 36;
+          return wait();
+        case 36:
+          expect(demo2.outerHTML).to.matchSnapshot();
+          test(['auto', 800 - 6 + "px"], split2);
+          // move to min
+          dispatchEvent(document, 'mousemove', {
+            clientX: 1000,
+            clientY: 0
+          });
+          expect(demo2.outerHTML).to.matchSnapshot();
+          test(['auto', "0px"], split2);
+          // moveEnd
+          dispatchEvent(document, 'mouseup');
+        case 42:
+        case "end":
+          return _context.stop();
       }
     }, _callee);
   })));
   it('should drag to resize vertical panel for lastSize', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
     var _mount3, instance, element, split, dragLine;
-
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            _mount3 = mount(VerticalDemo), instance = _mount3[0], element = _mount3[1];
-            split = instance.$lastInput.children;
-            dragLine = element.querySelector('.k-split-line-wrapper'); // moveStart
-
-            dispatchEvent(dragLine, 'mousedown', {
-              which: 1,
-              clientX: 0,
-              clientY: 994
-            }); // move 
-
-            dispatchEvent(document, 'mousemove', {
-              clientX: 0,
-              clientY: 800
-            });
-            expect(element.outerHTML).to.matchSnapshot();
-            test(['auto', 1080 - 800 - 6 + "px"], split); // move to max
-
-            dispatchEvent(document, 'mousemove', {
-              clientX: 0,
-              clientY: -1
-            });
-            expect(element.outerHTML).to.matchSnapshot();
-            test(['auto', 1080 - 6 + "px"], split); // move to min
-
-            dispatchEvent(document, 'mousemove', {
-              clientX: 0,
-              clientY: 1100
-            });
-            expect(element.outerHTML).to.matchSnapshot();
-            test(['auto', "0px"], split); // moveEnd
-
-            dispatchEvent(document, 'mouseup');
-
-          case 14:
-          case "end":
-            return _context2.stop();
-        }
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _mount3 = mount(VerticalDemo), instance = _mount3[0], element = _mount3[1];
+          split = instance.$lastInput.children;
+          dragLine = element.querySelector('.k-split-line-wrapper'); // moveStart
+          dispatchEvent(dragLine, 'mousedown', {
+            which: 1,
+            clientX: 0,
+            clientY: 994
+          });
+          // move 
+          dispatchEvent(document, 'mousemove', {
+            clientX: 0,
+            clientY: 800
+          });
+          expect(element.outerHTML).to.matchSnapshot();
+          test(['auto', 1080 - 800 - 6 + "px"], split);
+          // move to max
+          dispatchEvent(document, 'mousemove', {
+            clientX: 0,
+            clientY: -1
+          });
+          expect(element.outerHTML).to.matchSnapshot();
+          test(['auto', 1080 - 6 + "px"], split);
+          // move to min
+          dispatchEvent(document, 'mousemove', {
+            clientX: 0,
+            clientY: 1100
+          });
+          expect(element.outerHTML).to.matchSnapshot();
+          test(['auto', "0px"], split);
+          // moveEnd
+          dispatchEvent(document, 'mouseup');
+        case 14:
+        case "end":
+          return _context2.stop();
       }
     }, _callee2);
   })));
   it('should drag to resize vertical panel for firstSize', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
     var Demo, _mount4, instance, element, split, dragLine;
-
     return _regeneratorRuntime.wrap(function _callee3$(_context4) {
-      while (1) {
-        switch (_context4.prev = _context4.next) {
-          case 0:
-            Demo = /*#__PURE__*/function (_Component2) {
-              _inheritsLoose(Demo, _Component2);
-
-              function Demo() {
-                var _context3;
-
-                var _this;
-
-                for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-                  args[_key] = arguments[_key];
-                }
-
-                _this = _Component2.call.apply(_Component2, _concatInstanceProperty(_context3 = [this]).call(_context3, args)) || this;
-                _this.Split = Split;
-                return _this;
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component2) {
+            _inheritsLoose(Demo, _Component2);
+            function Demo() {
+              var _context3;
+              var _this;
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                args[_key] = arguments[_key];
               }
-
-              return Demo;
-            }(Component);
-
-            Demo.template = "\n                const {Split} = this;\n                <Split mode=\"vertical\" firstSize=\"80px\">\n                    <b:first><div class=\"panel\">top</div></b:first>\n                    <b:last><div class=\"panel\">bottom</div></b:last>\n                </Split>\n            ";
-            _mount4 = mount(Demo), instance = _mount4[0], element = _mount4[1];
-            split = instance.$lastInput.children;
-            dragLine = element.querySelector('.k-split-line-wrapper'); // moveStart
-
-            dispatchEvent(dragLine, 'mousedown', {
-              which: 1,
-              clientX: 0,
-              clientY: 80
-            }); // move 
-
-            dispatchEvent(document, 'mousemove', {
-              clientX: 0,
-              clientY: 800
-            });
-            _context4.next = 9;
-            return wait();
-
-          case 9:
-            expect(element.outerHTML).to.matchSnapshot();
-            test(['800px', 'auto'], split); // move to max
-
-            dispatchEvent(document, 'mousemove', {
-              clientX: 0,
-              clientY: 1100
-            });
-            _context4.next = 14;
-            return wait();
-
-          case 14:
-            expect(element.outerHTML).to.matchSnapshot();
-            test([1080 - 6 + "px", 'auto'], split); // move to min
-
-            dispatchEvent(document, 'mousemove', {
-              clientX: 0,
-              clientY: -1
-            });
-            _context4.next = 19;
-            return wait();
-
-          case 19:
-            expect(element.outerHTML).to.matchSnapshot();
-            test(["0px", 'auto'], split); // moveEnd
-
-            dispatchEvent(document, 'mouseup');
-
-          case 22:
-          case "end":
-            return _context4.stop();
-        }
+              _this = _Component2.call.apply(_Component2, _concatInstanceProperty(_context3 = [this]).call(_context3, args)) || this;
+              _this.Split = Split;
+              return _this;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const {Split} = this;\n                <Split mode=\"vertical\" firstSize=\"80px\">\n                    <b:first><div class=\"panel\">top</div></b:first>\n                    <b:last><div class=\"panel\">bottom</div></b:last>\n                </Split>\n            ";
+          _mount4 = mount(Demo), instance = _mount4[0], element = _mount4[1];
+          split = instance.$lastInput.children;
+          dragLine = element.querySelector('.k-split-line-wrapper'); // moveStart
+          dispatchEvent(dragLine, 'mousedown', {
+            which: 1,
+            clientX: 0,
+            clientY: 80
+          });
+          // move 
+          dispatchEvent(document, 'mousemove', {
+            clientX: 0,
+            clientY: 800
+          });
+          _context4.next = 9;
+          return wait();
+        case 9:
+          expect(element.outerHTML).to.matchSnapshot();
+          test(['800px', 'auto'], split);
+          // move to max
+          dispatchEvent(document, 'mousemove', {
+            clientX: 0,
+            clientY: 1100
+          });
+          _context4.next = 14;
+          return wait();
+        case 14:
+          expect(element.outerHTML).to.matchSnapshot();
+          test([1080 - 6 + "px", 'auto'], split);
+          // move to min
+          dispatchEvent(document, 'mousemove', {
+            clientX: 0,
+            clientY: -1
+          });
+          _context4.next = 19;
+          return wait();
+        case 19:
+          expect(element.outerHTML).to.matchSnapshot();
+          test(["0px", 'auto'], split);
+          // moveEnd
+          dispatchEvent(document, 'mouseup');
+        case 22:
+        case "end":
+          return _context4.stop();
       }
     }, _callee3);
   })));
   it('should not drag out of the min/max range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
     var _mount5, instance, element, split, dragLine;
-
     return _regeneratorRuntime.wrap(function _callee4$(_context5) {
-      while (1) {
-        switch (_context5.prev = _context5.next) {
-          case 0:
-            _mount5 = mount(RangeDemo), instance = _mount5[0], element = _mount5[1];
-            split = instance.$lastInput.children;
-            dragLine = element.querySelector('.k-split-line-wrapper'); // moveStart
-
-            dispatchEvent(dragLine, 'mousedown', {
-              which: 1,
-              clientX: 80
-            }); // move to max
-
-            dispatchEvent(document, 'mousemove', {
-              clientX: 800
-            });
-            _context5.next = 7;
-            return wait();
-
-          case 7:
-            expect(element.outerHTML).to.matchSnapshot();
-            test(['410px', 'auto'], split); // move to min
-
-            dispatchEvent(document, 'mousemove', {
-              clientX: 0
-            });
-            _context5.next = 12;
-            return wait();
-
-          case 12:
-            expect(element.outerHTML).to.matchSnapshot();
-            test(['40px', 'auto'], split); // moveEnd
-
-            dispatchEvent(document, 'mouseup');
-
-          case 15:
-          case "end":
-            return _context5.stop();
-        }
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          _mount5 = mount(RangeDemo), instance = _mount5[0], element = _mount5[1];
+          split = instance.$lastInput.children;
+          dragLine = element.querySelector('.k-split-line-wrapper'); // moveStart
+          dispatchEvent(dragLine, 'mousedown', {
+            which: 1,
+            clientX: 80
+          });
+          // move to max
+          dispatchEvent(document, 'mousemove', {
+            clientX: 800
+          });
+          _context5.next = 7;
+          return wait();
+        case 7:
+          expect(element.outerHTML).to.matchSnapshot();
+          test(['410px', 'auto'], split);
+          // move to min
+          dispatchEvent(document, 'mousemove', {
+            clientX: 0
+          });
+          _context5.next = 12;
+          return wait();
+        case 12:
+          expect(element.outerHTML).to.matchSnapshot();
+          test(['40px', 'auto'], split);
+          // moveEnd
+          dispatchEvent(document, 'mouseup');
+        case 15:
+        case "end":
+          return _context5.stop();
       }
     }, _callee4);
   })));

package/components/split/index.vdt.js

@@ -5,25 +5,22 @@ import { MemoBlock } from './memo';
 import { getRestProps } from '../utils';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj, _style, _style2;
-
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
   var _$blocks = {};
   var __$blocks = {};
-
   var _this$get = this.get(),
-      mode = _this$get.mode;
-
+    mode = _this$get.mode;
   var _this$size = this.size,
-      firstSize = _this$size.firstSize,
-      lastSize = _this$size.lastSize;
+    firstSize = _this$size.firstSize,
+    lastSize = _this$size.lastSize;
   var _this$drag = this.drag,
-      firstRef = _this$drag.firstRef,
-      lastRef = _this$drag.lastRef,
-      elementRef = _this$drag.elementRef,
-      start = _this$drag.start,
-      dragging = _this$drag.dragging;
+    firstRef = _this$drag.firstRef,
+    lastRef = _this$drag.lastRef,
+    elementRef = _this$drag.elementRef,
+    start = _this$drag.start,
+    dragging = _this$drag.dragging;
   var k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-split"] = true, _classNameObj[k + "-" + mode] = true, _classNameObj[makeStyles(k)] = true, _classNameObj[[k + "-first-auto"]] = firstSize.value === 'auto', _classNameObj[[k + "-last-auto"]] = lastSize.value === 'auto', _classNameObj[[k + "-resizing"]] = dragging.value, _classNameObj);
   var stylePropName = mode === 'horizontal' ? 'width' : 'height';
@@ -36,11 +33,9 @@ export default function ($props, $blocks, $__proto__) {
       return null;
     }, __$blocks['first'] = function ($super, data) {
       var block = $blocks['first'];
-
       var callBlock = function callBlock() {
         return _$blocks['first'].call($this, $super, data);
       };
-
       return block ? block.call($this, callBlock, data) : callBlock();
     }, __$blocks['first'](_$no))
   }), 2, _$cn(kls('first', k)), {
@@ -49,11 +44,9 @@ export default function ($props, $blocks, $__proto__) {
     return _$ce(2, 'div', _$ce(2, 'div', null, 1, _$cn(kls('drag-lines', k))), 2, _$cn(kls('line', k)));
   }, __$blocks['drag'] = function ($super, data) {
     var block = $blocks['drag'];
-
     var callBlock = function callBlock() {
       return _$blocks['drag'].call($this, $super, data);
     };
-
     return block ? block.call($this, callBlock, data) : callBlock();
   }, __$blocks['drag'](_$no)), 0, _$cn(kls('line-wrapper', k)), {
     'ev-mousedown': start
@@ -63,11 +56,9 @@ export default function ($props, $blocks, $__proto__) {
       return null;
     }, __$blocks['last'] = function ($super, data) {
       var block = $blocks['last'];
-
       var callBlock = function callBlock() {
         return _$blocks['last'].call($this, $super, data);
       };
-
       return block ? block.call($this, callBlock, data) : callBlock();
     }, __$blocks['last'](_$no))
   }), 2, _$cn(kls('last', k)), {

package/components/split/memo.js

@@ -2,24 +2,18 @@ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import { Component } from 'intact-react';
 export var MemoBlock = /*#__PURE__*/function (_Component) {
   _inheritsLoose(MemoBlock, _Component);
-
   function MemoBlock() {
     return _Component.apply(this, arguments) || this;
   }
-
   var _proto = MemoBlock.prototype;
-
   _proto.$update = function $update(lastVNode, nextVNode, parentDom, anchor, mountedQueue, force) {
     var lastProps = lastVNode.props;
     var nextProps = nextVNode.props;
     if (lastProps.block === nextProps.block) return;
-
     _Component.prototype.$update.call(this, lastVNode, nextVNode, parentDom, anchor, mountedQueue, force);
   };
-
   return MemoBlock;
 }(Component);
-
 MemoBlock.template = function () {
   var props = this.$props;
   return props.children;

package/components/split/styles.d.ts

@@ -1,5 +1,5 @@
 import '../../styles/global';
-export declare type Mode = 'horizontal' | 'vertical';
+export type Mode = 'horizontal' | 'vertical';
 export declare const kls: (className: string, k: string) => string;
 export declare const makeStyles: {
     (k: string): string;