@king-design/react 2.0.0-beta.0

package/components/table/useStickyScrollbar.js

@@ -0,0 +1,86 @@
+import { createRef, useInstance, onMounted, nextTick } from 'intact-react';
+import { useState, watchState } from '../../hooks/useState';
+import { isStringOrNumber, isNull } from 'intact-shared';
+import { debounce } from '../utils';
+export function useStickyScrollbar(elementRef, _ref, tableRef, tableScroll, tableWidth) {
+  var scrollRef = _ref.scrollRef,
+      callbacks = _ref.callbacks;
+  var instance = useInstance();
+  var stick = useState(null);
+  var style = useState(null);
+  var scrollbarRef = createRef();
+  var tableActualWidth = useState(null);
+  instance.on('$receive:stickScrollbar', function (v) {
+    stick.set(v === true ? 0 : isStringOrNumber(v) ? +v : null);
+  });
+  watchState(tableWidth, function (v) {
+    if (v) {
+      tableActualWidth.set(v + 'px');
+    } else {
+      setTableActualWidth();
+    }
+  });
+  onMounted(function () {
+    setTableActualWidth();
+  });
+  callbacks.push(onTableScroll);
+  var scrollLeft = 0;
+
+  function shouldStickScrollbar(_ref2) {
+    var offsetBottom = _ref2.offsetBottom,
+        viewportHeight = _ref2.viewportHeight;
+
+    var _elementRef$value$get = elementRef.value.getBoundingClientRect(),
+        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
+
+      nextTick(function () {
+        scrollbarRef.value.scrollLeft = scrollLeft;
+      });
+      return true;
+    } else {
+      style.set({
+        display: 'none'
+      });
+      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,
+    style: style,
+    scrollbarRef: scrollbarRef,
+    onScroll: onScroll,
+    tableActualWidth: tableActualWidth
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/table/useTree.d.ts

@@ -0,0 +1,10 @@
+import type { TableRowKey } from './table';
+export declare function useTree(): {
+    isSpreaded: (key: TableRowKey) => boolean;
+    toggleSpreadRow: (key: TableRowKey) => void;
+    loopData: <T>(cb: (value: any, index: number, level: number, meta: T | null) => T, shouldBreak?: boolean) => void;
+};
+export declare function loopDataWithChildrenKey<T>(data: any[] | undefined, childrenKey: string | undefined, cb: (value: any, index: number, level: number, meta: T | null) => T, shouldBreak: boolean): void;
+
+
+export {normalize} from 'intact-react';

package/components/table/useTree.js

@@ -0,0 +1,61 @@
+import { useInstance } from 'intact-react';
+import { inArray } from './useChecked';
+import { toggleArray } from '../utils';
+export function useTree() {
+  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,
+        data = _instance$get.data;
+
+    loopDataWithChildrenKey(data, childrenKey, cb, shouldBreak);
+  }
+
+  return {
+    isSpreaded: isSpreaded,
+    toggleSpreadRow: toggleSpreadRow,
+    loopData: loopData
+  };
+}
+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;
+          }
+        }
+      }
+    }
+
+    return false;
+  };
+
+  loop(data, 0, null);
+}
+
+export {normalize} from 'intact-react';

package/components/table/useWidth.d.ts

@@ -0,0 +1,13 @@
+import { RefObject, VNodeComponentClass } from 'intact-react';
+import type { TableRowKey } from './table';
+import type { TableColumn } from './column';
+export declare function useWidth(scrollRef: RefObject<HTMLElement>, getColumns: () => VNodeComponentClass<TableColumn>[][]): {
+    tableRef: RefObject<HTMLElement>;
+    tableWidth: import("../../hooks/useState").State<number | null>;
+    widthMap: import("../../hooks/useState").State<Record<TableRowKey, number>>;
+    storeWidth: () => void;
+    getWidth: (key: TableRowKey) => string | null;
+};
+
+
+export {normalize} from 'intact-react';

package/components/table/useWidth.js

@@ -0,0 +1,129 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _JSON$stringify from "@babel/runtime-corejs3/core-js/json/stringify";
+import { useInstance, onMounted, onBeforeUnmount, createRef } from 'intact-react';
+import ResizeObserver from 'resize-observer-polyfill';
+import { useState } from '../../hooks/useState';
+import { debounce } from '../utils';
+var hasLocalStorage = typeof localStorage !== 'undefined';
+export function useWidth(scrollRef, getColumns) {
+  var instance = useInstance();
+  var tableRef = createRef();
+  var widthMap = useState({});
+  var tableWidth = useState(null);
+  initWidthFromStore();
+  var ro;
+  onMounted(function () {
+    checkTableWidth(true); // use debounce instead of throttle, because if there is
+    // transition on parent container, the width is weired
+    // #342
+
+    ro = new ResizeObserver(debounce(function () {
+      if (instance.$unmounted) return;
+      checkTableWidth(false);
+    }, 100, true));
+    ro.observe(scrollRef.value);
+  });
+  onBeforeUnmount(function () {
+    ro.disconnect();
+  }); // if exist widthStoreKey, we get the default width from localStorage
+
+  function initWidthFromStore() {
+    var _instance$get = instance.get(),
+        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;
+
+          if (map) {
+            widthMap.set(map);
+          }
+
+          if (width) {
+            tableWidth.set(width);
+          }
+        } catch (e) {}
+      }
+    }
+  }
+
+  function storeWidth() {
+    // store width if has widthStoreKey
+    var _instance$get2 = instance.get(),
+        widthStoreKey = _instance$get2.widthStoreKey;
+
+    if (widthStoreKey) {
+      localStorage.setItem(widthStoreKey, _JSON$stringify({
+        map: widthMap.value,
+        width: tableWidth.value
+      }));
+    }
+  }
+
+  function checkTableWidth(isMount) {
+    checkColumnMinWidth(false);
+
+    if (instance.get('resizable')) {
+      var _tableWidth = tableRef.value.offsetWidth;
+      var containerWidth = scrollRef.value.offsetWidth;
+
+      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;
+
+        if (minWidth) {
+          var width = column.children.elementRef.value.offsetWidth;
+
+          if (width < minWidth) {
+            widthMap.value[key] = minWidth;
+            shouldUpdate = true;
+          }
+        }
+      });
+    });
+
+    if (shouldUpdate) {
+      instance.forceUpdate(function () {
+        // check again because it may affect other columns
+        if (!isStop) {
+          // only check one more time, because sometimes we can not fix the width of column, #473
+          // e.g. table display: none;
+          checkColumnMinWidth(true);
+        }
+      });
+    }
+  }
+
+  function getWidth(key) {
+    var width = widthMap.value[key]; // if (width === 'auto') return width;
+
+    if (width) return width + "px";
+    return null;
+  }
+
+  return {
+    tableRef: tableRef,
+    tableWidth: tableWidth,
+    widthMap: widthMap,
+    storeWidth: storeWidth,
+    getWidth: getWidth
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/tabs/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const TABS = "Tabs";
+
+
+export {normalize} from 'intact-react';

package/components/tabs/constants.js

@@ -0,0 +1,3 @@
+export var TABS = 'Tabs';
+
+export {normalize} from 'intact-react';

package/components/tabs/index.d.ts

@@ -0,0 +1,30 @@
+import { Component, TypeDefs } from 'intact-react';
+import { Sizes } from '../../styles/utils';
+import { TabProps } from './tab';
+import type { Events } from '../types';
+export * from './tab';
+export interface TabsProps<T = any> {
+    value?: T;
+    vertical?: boolean;
+    size?: Sizes;
+    type?: 'default' | 'card' | 'border-card' | 'no-border-card';
+    closable?: boolean;
+    beforeChange?: (value: T) => boolean | Promise<boolean>;
+}
+export interface TabsEvents<T = any> {
+    remove: [T];
+}
+export declare class Tabs<T = any> extends Component<TabsProps<T>, TabsEvents<T>> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<TabsProps<any>>>;
+    static defaults: () => Partial<TabsProps<any>>;
+    static events: Events<TabsEvents<any>>;
+    private activeBar;
+    private scroll;
+    init(): void;
+    changeTab(tabProps: TabProps): Promise<void>;
+    remove(value: T): void;
+}
+
+
+export {normalize} from 'intact-react';

package/components/tabs/index.js

@@ -0,0 +1,119 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component, provide } from 'intact-react';
+import template from './index.vdt';
+import { TABS } from './constants';
+import { sizes } from '../../styles/utils';
+import { useActiveBar } from './useActiveBar';
+import { useScroll } from './useScroll';
+export * from './tab';
+var typeDefs = {
+  value: null,
+  vertical: Boolean,
+  size: sizes,
+  type: ['default', 'card', 'border-card', 'no-border-card'],
+  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();
+    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();
+          }
+        }
+      }, _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;
+Tabs.typeDefs = typeDefs;
+Tabs.defaults = defaults;
+Tabs.events = events;
+
+export {normalize} from 'intact-react';

package/components/tabs/index.spec.d.ts

@@ -0,0 +1,4 @@
+export {};
+
+
+export {normalize} from 'intact-react';

package/components/tabs/index.spec.js

@@ -0,0 +1,98 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import ClosableDemo from '~/components/tabs/demos/closable';
+import BeforeChangeDemo from '~/components/tabs/demos/beforeChange';
+import { mount, unmount, wait } from '../../test/utils';
+describe('Tabs', function () {
+  afterEach(function () {
+    return unmount();
+  });
+  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(300);
+
+          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();
+        }
+      }
+    }, _callee2);
+  })));
+});
+
+export {normalize} from 'intact-react';

package/components/tabs/index.vdt.js

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createUnknownComponentVNode as _$cc, createElementVNode as _$ce } from 'intact-react';
+import { Button } from '../button';
+import { getRestProps } from '../utils';
+import { makeStyles } from './styles';
+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;
+
+  var _this$scroll = this.scroll,
+      isScroll = _this$scroll.isScroll,
+      left = _this$scroll.left,
+      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 classNameObj = (_classNameObj = {
+    'k-tabs': true
+  }, _classNameObj["k-" + size] = size, _classNameObj['k-vertical'] = vertical, _classNameObj['k-tabs-card'] = type === 'no-border-card', _classNameObj["k-tabs-" + type] = type !== 'default', _classNameObj["k-is-scroll"] = isScroll.value, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this)), [isScroll.value ? _$cc(Button, {
+    'className': 'k-tabs-prev',
+    'type': 'none',
+    'icon': true,
+    'key': 'prev',
+    'size': size,
+    'disabled': !enablePrev.value,
+    'ev-click': prev,
+    'children': _$ce(2, 'i', null, 1, 'ion-ios-arrow-left')
+  }, 'prev') : undefined, _$ce(2, 'div', _$ce(2, 'div', [children, _$ce(2, 'div', null, 1, 'k-tabs-active-bar', {
+    'style': this.activeBar.value
+  })], 0, 'k-tabs-wrapper', {
+    'style': {
+      transform: "translateX(" + left.value + "px)"
+    }
+  }, null, wrapperRef), 2, 'k-tabs-scroll c-clearfix', null, null, scrollRef), isScroll.value ? _$cc(Button, {
+    'className': 'k-tabs-next',
+    'type': 'none',
+    'icon': true,
+    'key': 'next',
+    'size': size,
+    'disabled': !enableNext.value,
+    'ev-click': next,
+    'children': _$ce(2, 'i', null, 1, 'ion-ios-arrow-right')
+  }, 'next') : undefined]);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/tabs/styles.d.ts

@@ -0,0 +1,5 @@
+import '../../styles/global';
+export declare function makeStyles(): string;
+
+
+export {normalize} from 'intact-react';