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

package/components/table/useStickyScrollbar.js

@@ -5,7 +5,7 @@ import { debounce } from '../utils';
 import { useResizeObserver } from '../../hooks/useResizeObserver';
 export function useStickyScrollbar(elementRef, _ref, tableRef, tableScroll) {
   var scrollRef = _ref.scrollRef,
-      callbacks = _ref.callbacks;
+    callbacks = _ref.callbacks;
   var instance = useInstance();
   var stick = useState(null);
   var style = useState(null);
@@ -20,20 +20,16 @@ export function useStickyScrollbar(elementRef, _ref, tableRef, tableScroll) {
   });
   callbacks.push(onTableScroll);
   var scrollLeft = 0;
-
   function shouldStickScrollbar(_ref2) {
     var offsetBottom = _ref2.offsetBottom,
-        viewportHeight = _ref2.viewportHeight;
-
+      viewportHeight = _ref2.viewportHeight;
     var _elementRef$value$get = elementRef.value.getBoundingClientRect(),
-        top = _elementRef$value$get.top,
-        bottom = _elementRef$value$get.bottom;
-
+      top = _elementRef$value$get.top,
+      bottom = _elementRef$value$get.bottom;
     var p = viewportHeight - offsetBottom;
-
     if (bottom >= p && top < p) {
-      style.set(null); // update scrollLeft, because it can not be updated when it is hidden
-
+      style.set(null);
+      // update scrollLeft, because it can not be updated when it is hidden
       nextTick(function () {
         scrollbarRef.value.scrollLeft = scrollLeft;
       });
@@ -45,29 +41,23 @@ export function useStickyScrollbar(elementRef, _ref, tableRef, tableScroll) {
       return false;
     }
   }
-
   var lock = false;
-
   function onTableScroll(_scrollLeft) {
     if (isNull(stick.value) || lock) return;
     scrollbarRef.value.scrollLeft = scrollLeft = _scrollLeft;
   }
-
   var unlock = debounce(function () {
     return lock = false;
   }, 100);
-
   function onScroll(e) {
     lock = true;
     scrollRef.value.scrollLeft = scrollLeft = scrollbarRef.value.scrollLeft;
     unlock();
     tableScroll(scrollLeft);
   }
-
   function setTableActualWidth() {
     tableActualWidth.set(tableRef.value.offsetWidth + 'px');
   }
-
   return {
     shouldStickScrollbar: shouldStickScrollbar,
     stick: stick,

package/components/table/useTree.js

@@ -3,26 +3,20 @@ import { inArray } from './useChecked';
 import { toggleArray } from '../utils';
 export function useTree(data) {
   var instance = useInstance();
-
   function isSpreaded(key) {
     return inArray(instance.get('spreadKeys'), key);
   }
-
   function toggleSpreadRow(key) {
     instance.set('spreadKeys', toggleArray(instance.get('spreadKeys'), key));
   }
-
   function loopData(cb, shouldBreak) {
     if (shouldBreak === void 0) {
       shouldBreak = false;
     }
-
     var _instance$get = instance.get(),
-        childrenKey = _instance$get.childrenKey;
-
+      childrenKey = _instance$get.childrenKey;
     loopDataWithChildrenKey(data.value, childrenKey, cb, shouldBreak);
   }
-
   return {
     isSpreaded: isSpreaded,
     toggleSpreadRow: toggleSpreadRow,
@@ -32,17 +26,14 @@ export function useTree(data) {
 export function loopDataWithChildrenKey(data, childrenKey, cb, shouldBreak) {
   if (!data) return;
   var index = -1;
-
   var loop = function loop(data, level, meta) {
     for (var i = 0; i < data.length; i++) {
       index++;
       var value = data[i];
       var ret = cb(value, index, level, meta);
       if (shouldBreak && ret) return true;
-
       if (childrenKey) {
         var children = value[childrenKey];
-
         if (Array.isArray(children)) {
           if (loop(children, level + 1, ret)) {
             return true;
@@ -50,9 +41,7 @@ export function loopDataWithChildrenKey(data, childrenKey, cb, shouldBreak) {
         }
       }
     }
-
     return false;
   };
-
   loop(data, 0, null);
 }

package/components/table/useWidth.js

@@ -17,25 +17,21 @@ export function useWidth(scrollRef, getColumns) {
   });
   useResizeObserver(scrollRef, function () {
     return checkTableWidth(false);
-  }, true); // if exist widthStoreKey, we get the default width from localStorage
-
+  }, true);
+  // if exist widthStoreKey, we get the default width from localStorage
   function initWidthFromStore() {
     var _instance$get = instance.get(),
-        widthStoreKey = _instance$get.widthStoreKey;
-
+      widthStoreKey = _instance$get.widthStoreKey;
     if (widthStoreKey && hasLocalStorage) {
       var data = localStorage.getItem(widthStoreKey);
-
       if (data) {
         try {
           var _JSON$parse = JSON.parse(data),
-              map = _mapInstanceProperty(_JSON$parse),
-              width = _JSON$parse.width;
-
+            map = _mapInstanceProperty(_JSON$parse),
+            width = _JSON$parse.width;
           if (map) {
             widthMap.set(map);
           }
-
           if (width) {
             tableWidth.set(width);
           }
@@ -43,12 +39,10 @@ export function useWidth(scrollRef, getColumns) {
       }
     }
   }
-
   function storeWidth() {
     // store width if has widthStoreKey
     var _instance$get2 = instance.get(),
-        widthStoreKey = _instance$get2.widthStoreKey;
-
+      widthStoreKey = _instance$get2.widthStoreKey;
     if (widthStoreKey) {
       localStorage.setItem(widthStoreKey, _JSON$stringify({
         map: widthMap.value,
@@ -56,42 +50,35 @@ export function useWidth(scrollRef, getColumns) {
       }));
     }
   }
-
   function checkTableWidth(isMount) {
     checkColumnMinWidth(false);
-
     var _instance$get3 = instance.get(),
-        resizable = _instance$get3.resizable,
-        type = _instance$get3.type;
-
+      resizable = _instance$get3.resizable,
+      type = _instance$get3.type;
     if (resizable) {
       var hasBorder = type === 'grid' || type === 'border';
       var _tableWidth = tableRef.value.offsetWidth;
       var container = scrollRef.value;
-      var containerWidth = container.offsetWidth + (hasBorder ? -2 : 0); // detect whether the table has vertical scrollbar or not
-
+      var containerWidth = container.offsetWidth + (hasBorder ? -2 : 0);
+      // detect whether the table has vertical scrollbar or not
       if (container.scrollHeight > container.clientHeight) {
         containerWidth = containerWidth - scrollbarWidth();
       }
-
       if (_tableWidth < containerWidth) {
         tableWidth.set(isMount ? null : containerWidth);
         storeWidth();
       }
     }
   }
-
   function checkColumnMinWidth(isStop) {
     var shouldUpdate = false;
     getColumns().forEach(function (rowColumns) {
       rowColumns.forEach(function (column) {
         var _column$props = column.props,
-            key = _column$props.key,
-            minWidth = _column$props.minWidth;
-
+          key = _column$props.key,
+          minWidth = _column$props.minWidth;
         if (minWidth) {
           var width = column.children.elementRef.value.offsetWidth;
-
           if (width < minWidth) {
             widthMap.value[key] = minWidth;
             shouldUpdate = true;
@@ -99,7 +86,6 @@ export function useWidth(scrollRef, getColumns) {
         }
       });
     });
-
     if (shouldUpdate) {
       // let useFixedColumns to update scroll position
       widthMap.set(_extends({}, widthMap.value));
@@ -113,14 +99,12 @@ export function useWidth(scrollRef, getColumns) {
       });
     }
   }
-
   function getWidth(key) {
-    var width = widthMap.value[key]; // if (width === 'auto') return width;
-
+    var width = widthMap.value[key];
+    // if (width === 'auto') return width;
     if (width) return width + "px";
     return null;
   }
-
   return {
     tableRef: tableRef,
     tableWidth: tableWidth,

package/components/tabs/index.js

@@ -18,99 +18,77 @@ var typeDefs = {
   closable: Boolean,
   beforeChange: Function
 };
-
 var defaults = function defaults() {
   return {
     size: 'default',
     type: 'default'
   };
 };
-
 var events = {
   remove: true
 };
 export var Tabs = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Tabs, _Component);
-
   function Tabs() {
     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.activeBar = useActiveBar();
     _this.scroll = useScroll();
     _this.config = useConfigContext();
     return _this;
   }
-
   var _proto = Tabs.prototype;
-
   _proto.init = function init() {
     provide(TABS, this);
   };
-
   _proto.changeTab = /*#__PURE__*/function () {
     var _changeTab = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(tabProps) {
       var _this$get, beforeChange, ret;
-
       return _regeneratorRuntime.wrap(function _callee$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              _this$get = this.get(), beforeChange = _this$get.beforeChange;
-
-              if (!beforeChange) {
-                _context2.next = 7;
-                break;
-              }
-
-              _context2.next = 4;
-              return beforeChange(tabProps.value);
-
-            case 4:
-              ret = _context2.sent;
-
-              if (ret) {
-                _context2.next = 7;
-                break;
-              }
-
-              return _context2.abrupt("return");
-
-            case 7:
-              // if exits 'to', we don't change the value,
-              // but let the page to change it by passing the value prop
-              if (!tabProps.to) {
-                this.set('value', tabProps.value); // } else if (this.$router) {
-                // this.$router.push(item.to);
-              } else {
-                window.location.href = tabProps.to;
-              }
-
-            case 8:
-            case "end":
-              return _context2.stop();
-          }
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _this$get = this.get(), beforeChange = _this$get.beforeChange;
+            if (!beforeChange) {
+              _context2.next = 7;
+              break;
+            }
+            _context2.next = 4;
+            return beforeChange(tabProps.value);
+          case 4:
+            ret = _context2.sent;
+            if (ret) {
+              _context2.next = 7;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 7:
+            // if exits 'to', we don't change the value,
+            // but let the page to change it by passing the value prop
+            if (!tabProps.to) {
+              this.set('value', tabProps.value);
+              // } else if (this.$router) {
+              // this.$router.push(item.to);
+            } else {
+              window.location.href = tabProps.to;
+            }
+          case 8:
+          case "end":
+            return _context2.stop();
         }
       }, _callee, this);
     }));
-
     function changeTab(_x) {
       return _changeTab.apply(this, arguments);
     }
-
     return changeTab;
   }();
-
   _proto.remove = function remove(value) {
     this.trigger('remove', value);
   };
-
   return Tabs;
 }(Component);
 Tabs.template = template;

package/components/tabs/index.spec.js

@@ -13,150 +13,118 @@ describe('Tabs', function () {
   });
   it('closable', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, element, tabs, prev, next, icon;
-
     return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            this.timeout(0);
-            _mount = mount(ClosableDemo), instance = _mount[0], element = _mount[1];
-            element.style.width = '400px';
-            tabs = element.querySelector('.k-tabs'); // add tab
-
-            instance._add();
-
-            _context.next = 7;
-            return wait(500);
-
-          case 7:
-            expect(tabs.outerHTML).to.matchSnapshot(); // prev & next
-
-            prev = tabs.querySelector('.k-tabs-prev');
-            next = tabs.querySelector('.k-tabs-next');
-            prev.click();
-            _context.next = 13;
-            return wait();
-
-          case 13:
-            expect(tabs.outerHTML).to.matchSnapshot();
-            next.click();
-            _context.next = 17;
-            return wait();
-
-          case 17:
-            expect(tabs.outerHTML).to.matchSnapshot(); // close
-
-            icon = tabs.querySelector('.k-tab-close');
-            icon.click();
-            _context.next = 22;
-            return wait();
-
-          case 22:
-            expect(tabs.outerHTML).to.matchSnapshot();
-
-          case 23:
-          case "end":
-            return _context.stop();
-        }
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          this.timeout(0);
+          _mount = mount(ClosableDemo), instance = _mount[0], element = _mount[1];
+          element.style.width = '400px';
+          tabs = element.querySelector('.k-tabs'); // add tab
+          instance._add();
+          _context.next = 7;
+          return wait(500);
+        case 7:
+          expect(tabs.outerHTML).to.matchSnapshot();
+          // prev & next
+          prev = tabs.querySelector('.k-tabs-prev');
+          next = tabs.querySelector('.k-tabs-next');
+          prev.click();
+          _context.next = 13;
+          return wait();
+        case 13:
+          expect(tabs.outerHTML).to.matchSnapshot();
+          next.click();
+          _context.next = 17;
+          return wait();
+        case 17:
+          expect(tabs.outerHTML).to.matchSnapshot();
+          // close
+          icon = tabs.querySelector('.k-tab-close');
+          icon.click();
+          _context.next = 22;
+          return wait();
+        case 22:
+          expect(tabs.outerHTML).to.matchSnapshot();
+        case 23:
+        case "end":
+          return _context.stop();
       }
     }, _callee, this);
   })));
   it('beforeChange', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
     var ret, _mount2, instance, element, tab;
-
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            ret = false;
-
-            BeforeChangeDemo.prototype.beforeChange = function () {
-              return ret;
-            };
-
-            _mount2 = mount(BeforeChangeDemo), instance = _mount2[0], element = _mount2[1];
-            tab = element.querySelector('.k-tab');
-            tab.click();
-            _context2.next = 7;
-            return wait(50);
-
-          case 7:
-            expect(instance.get('tab')).to.eql('ruleout');
-            ret = true;
-            tab.click();
-            _context2.next = 12;
-            return wait(50);
-
-          case 12:
-            expect(instance.get('tab')).to.eql('rulein');
-
-          case 13:
-          case "end":
-            return _context2.stop();
-        }
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          ret = false;
+          BeforeChangeDemo.prototype.beforeChange = function () {
+            return ret;
+          };
+          _mount2 = mount(BeforeChangeDemo), instance = _mount2[0], element = _mount2[1];
+          tab = element.querySelector('.k-tab');
+          tab.click();
+          _context2.next = 7;
+          return wait(50);
+        case 7:
+          expect(instance.get('tab')).to.eql('ruleout');
+          ret = true;
+          tab.click();
+          _context2.next = 12;
+          return wait(50);
+        case 12:
+          expect(instance.get('tab')).to.eql('rulein');
+        case 13:
+        case "end":
+          return _context2.stop();
       }
     }, _callee2);
   })));
   it('vertical scroll', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
     var Demo, _mount3, instance, element, prev, next;
-
     return _regeneratorRuntime.wrap(function _callee3$(_context4) {
-      while (1) {
-        switch (_context4.prev = _context4.next) {
-          case 0:
-            Demo = /*#__PURE__*/function (_Component) {
-              _inheritsLoose(Demo, _Component);
-
-              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 = _Component.call.apply(_Component, _concatInstanceProperty(_context3 = [this]).call(_context3, args)) || this;
-                _this.Tabs = Tabs;
-                _this.Tab = Tab;
-                return _this;
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component) {
+            _inheritsLoose(Demo, _Component);
+            function Demo() {
+              var _context3;
+              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 {
-                  tab: 0
-                };
+              _this = _Component.call.apply(_Component, _concatInstanceProperty(_context3 = [this]).call(_context3, args)) || this;
+              _this.Tabs = Tabs;
+              _this.Tab = Tab;
+              return _this;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                tab: 0
               };
-
-              return Demo;
-            }(Component);
-
-            Demo.template = "\n                const { Tabs, Tab } = this;\n                <Tabs v-model=\"tab\" vertical style=\"height: 200px;\">\n                    <Tab v-for={new Array(10).fill(0)} value={$key}>\n                        {$key}\n                    </Tab>\n                </Tabs>\n            ";
-            _mount3 = mount(Demo), instance = _mount3[0], element = _mount3[1];
-            _context4.next = 5;
-            return wait(100);
-
-          case 5:
-            expect(element.innerHTML).to.matchSnapshot();
-            prev = element.querySelector('.k-tabs-prev');
-            next = element.querySelector('.k-tabs-next');
-            next.click();
-            _context4.next = 11;
-            return wait();
-
-          case 11:
-            expect(element.innerHTML).to.matchSnapshot();
-            prev.click();
-            _context4.next = 15;
-            return wait();
-
-          case 15:
-            expect(element.innerHTML).to.matchSnapshot();
-
-          case 16:
-          case "end":
-            return _context4.stop();
-        }
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Tabs, Tab } = this;\n                <Tabs v-model=\"tab\" vertical style=\"height: 200px;\">\n                    <Tab v-for={new Array(10).fill(0)} value={$key}>\n                        {$key}\n                    </Tab>\n                </Tabs>\n            ";
+          _mount3 = mount(Demo), instance = _mount3[0], element = _mount3[1];
+          _context4.next = 5;
+          return wait(100);
+        case 5:
+          expect(element.innerHTML).to.matchSnapshot();
+          prev = element.querySelector('.k-tabs-prev');
+          next = element.querySelector('.k-tabs-next');
+          next.click();
+          _context4.next = 11;
+          return wait();
+        case 11:
+          expect(element.innerHTML).to.matchSnapshot();
+          prev.click();
+          _context4.next = 15;
+          return wait();
+        case 15:
+          expect(element.innerHTML).to.matchSnapshot();
+        case 16:
+        case "end":
+          return _context4.stop();
       }
     }, _callee3);
   })));

package/components/tabs/index.vdt.js

@@ -6,27 +6,24 @@ import { makeStyles } from './styles';
 import { Icon } from '../icon';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
-
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
-
   var _this$get = this.get(),
-      className = _this$get.className,
-      children = _this$get.children,
-      vertical = _this$get.vertical,
-      size = _this$get.size,
-      type = _this$get.type;
-
+    className = _this$get.className,
+    children = _this$get.children,
+    vertical = _this$get.vertical,
+    size = _this$get.size,
+    type = _this$get.type;
   var _this$scroll = this.scroll,
-      isScroll = _this$scroll.isScroll,
-      offset = _this$scroll.offset,
-      enablePrev = _this$scroll.enablePrev,
-      enableNext = _this$scroll.enableNext,
-      prev = _this$scroll.prev,
-      next = _this$scroll.next,
-      scrollRef = _this$scroll.scrollRef,
-      wrapperRef = _this$scroll.wrapperRef;
+    isScroll = _this$scroll.isScroll,
+    offset = _this$scroll.offset,
+    enablePrev = _this$scroll.enablePrev,
+    enableNext = _this$scroll.enableNext,
+    prev = _this$scroll.prev,
+    next = _this$scroll.next,
+    scrollRef = _this$scroll.scrollRef,
+    wrapperRef = _this$scroll.wrapperRef;
   var k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-tabs"] = true, _classNameObj[k + "-size-" + size] = size, _classNameObj[k + "-vertical"] = vertical, _classNameObj[k + "-type-" + type] = true, _classNameObj[k + "-is-scroll"] = isScroll.value, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({