@king-design/react 2.0.0-beta.0

package/components/table/useFixedColumns.js

@@ -0,0 +1,142 @@
+import { useInstance, onMounted, onUnmounted } from 'intact-react';
+import { useState } from '../../hooks/useState';
+import { cx } from '@emotion/css';
+import { isNullOrUndefined, isString, error } from 'intact-shared';
+import { throttle } from '../utils';
+import { watchState } from '../../hooks/useState';
+import { createContext } from '../context';
+export var context = createContext();
+export function useFixedColumns(getColumns, _ref, widthMap) {
+  var scrollRef = _ref.scrollRef,
+      callbacks = _ref.callbacks;
+  var instance = useInstance();
+  var scrollPosition = useState(null);
+  var hasFixed = useState(false);
+  var hasFixedLeft = false;
+  var hasFixedRight = false;
+  var offsetMap = {};
+  callbacks.push(setScrollPosition);
+  instance.on('$receive:children', handleFixedColumns);
+  watchState(widthMap, handleFixedColumns);
+  var throttleUpdate = throttle(function () {
+    if (instance.$unmounted) return;
+    updateScrollPositionOnResize();
+  }, 100);
+  onMounted(function () {
+    updateScrollPositionOnResize();
+    window.addEventListener('resize', throttleUpdate);
+  });
+  onUnmounted(function () {
+    window.removeEventListener('resize', throttleUpdate);
+  });
+
+  function handleFixedColumns() {
+    var columns = getColumns();
+    hasFixedLeft = false;
+    hasFixedRight = false;
+    offsetMap = {};
+    columns.forEach(function (columns, row) {
+      var offset = 0;
+      columns.forEach(function (vNode, col) {
+        var props = vNode.props;
+        var key = props.key;
+        offsetMap[key] = 0;
+        var fixed = props.fixed;
+
+        if (fixed === 'left') {
+          var value = 0;
+          var prevVNode = props.prevVNode;
+
+          while (prevVNode) {
+            var _props = prevVNode.props;
+
+            if (_props.fixed === 'left') {
+              if (process.env.NODE_ENV !== 'production') {
+                validateWidth(_props);
+              }
+
+              value += widthMap.value[_props.key] || parseInt(_props.width, 10) || 0;
+            }
+
+            prevVNode = _props.prevVNode;
+          }
+
+          offsetMap[key] = value;
+          hasFixedLeft = true;
+        } else if (fixed === 'right') {
+          var _value = 0;
+          var lastVNode = columns[columns.length - 1];
+
+          while (vNode !== lastVNode) {
+            var _props2 = lastVNode.props;
+
+            if (_props2.fixed === 'right') {
+              if (process.env.NODE_ENV !== 'production') {
+                validateWidth(_props2);
+              }
+
+              _value += widthMap.value[_props2.key] || parseInt(_props2.width, 10) || 0;
+            }
+
+            lastVNode = _props2.prevVNode;
+          }
+
+          offsetMap[key] = _value;
+          hasFixedRight = true;
+        }
+      });
+    });
+    hasFixed.set(hasFixedLeft || hasFixedRight);
+  }
+
+  function setScrollPosition(scrollLeft) {
+    if (!hasFixed.value) return;
+    var scrollDom = scrollRef.value;
+    var maxScroll = scrollDom.scrollWidth - scrollDom.offsetWidth;
+    scrollPosition.set(scrollLeft === 0 ? 'left' : scrollLeft >= maxScroll ? 'right' : 'middle');
+  }
+
+  function updateScrollPositionOnResize() {
+    var scrollDom = scrollRef.value;
+
+    if (scrollDom.scrollWidth - scrollDom.offsetWidth <= 0) {
+      scrollPosition.set(null);
+    } else {
+      scrollPosition.set('left');
+    }
+  }
+
+  return {
+    scrollPosition: scrollPosition,
+    setScrollPosition: setScrollPosition,
+    hasFixed: hasFixed,
+    getHasFixedLeft: function getHasFixedLeft() {
+      return hasFixedLeft;
+    },
+    getOffsetMap: function getOffsetMap() {
+      return offsetMap;
+    }
+  };
+}
+export function getClassAndStyleForFixed(_ref2, offset, checkType) {
+  var _cx, _ref3;
+
+  var className = _ref2.className,
+      fixed = _ref2.fixed;
+  var extraOffset = checkType && checkType !== 'none' && fixed === 'left' ? 40 : 0;
+  return {
+    className: cx((_cx = {}, _cx[className] = !!className, _cx["k-fixed-" + fixed] = !!fixed, _cx)),
+    style: fixed ? (_ref3 = {}, _ref3[fixed] = offset + extraOffset + "px", _ref3) : null
+  };
+}
+
+function validateWidth(_ref4) {
+  var width = _ref4.width,
+      key = _ref4.key;
+
+  if (isNullOrUndefined(width) || isString(width) && !/\d+(px)?/.test(width)) {
+    error("The width must be specified with 'px' when the column has fixed. <TableColumn key=\"" + key + "\" />");
+  }
+}
+
+export {normalize} from 'intact-react';

package/components/table/useGroup.d.ts

@@ -0,0 +1,17 @@
+declare type ContextValue = {
+    groupValue: any;
+    onChange: (key: string, groupValue: any) => void;
+};
+export declare const context: {
+    Provider: import('intact-react').ComponentConstructor<import("intact").Component<import("../context").ProviderProps<ContextValue>, {}, {}, {}>>;
+    Consumer: import("intact").ComponentConstructor<import("intact").Component<{}, {}, {}, {}>>;
+};
+export declare function useGroup(): {
+    onSelect: (value: any, groupValue: any, onChange: ContextValue['onChange']) => void;
+    isChecked: (value: any, groupValue: any) => any;
+    getGroupText: (groupValue: any) => string | null;
+};
+export {};
+
+
+export {normalize} from 'intact-react';

package/components/table/useGroup.js

@@ -0,0 +1,70 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import { useInstance } from 'intact-react';
+import { isNullOrUndefined } from 'intact-shared';
+import { toggleArray } from '../utils';
+import { createContext } from '../context';
+export var context = createContext();
+export function useGroup() {
+  var instance = useInstance();
+
+  function onSelect(value, groupValue, onChange) {
+    var _instance$get = instance.get(),
+        multiple = _instance$get.multiple,
+        key = _instance$get.key;
+
+    if (multiple) {
+      value = toggleArray(groupValue, value);
+    }
+
+    onChange(key, value);
+  }
+
+  function isChecked(value, groupValue) {
+    var _instance$get2 = instance.get(),
+        multiple = _instance$get2.multiple;
+
+    if (multiple) {
+      return groupValue && _includesInstanceProperty(groupValue).call(groupValue, value);
+    }
+
+    return groupValue === value;
+  }
+
+  function getGroupText(groupValue) {
+    var _instance$get3 = instance.get(),
+        multiple = _instance$get3.multiple,
+        group = _instance$get3.group;
+
+    if (isNullOrUndefined(groupValue)) return null;
+
+    if (!multiple) {
+      groupValue = [groupValue];
+    }
+
+    if (group) {
+      var _context;
+
+      var ret = _mapInstanceProperty(_context = _filterInstanceProperty(group).call(group, function (item) {
+        return _includesInstanceProperty(groupValue).call(groupValue, item.value);
+      })).call(_context, function (item) {
+        return item.label;
+      }).join(', ');
+
+      if (ret) {
+        return "(" + ret + ")";
+      }
+    }
+
+    return null;
+  }
+
+  return {
+    onSelect: onSelect,
+    isChecked: isChecked,
+    getGroupText: getGroupText
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/table/useMerge.d.ts

@@ -0,0 +1,18 @@
+import { Props } from 'intact-react';
+import type { TableColumnProps } from './column';
+export declare type TableMerge<T = any, CheckType = 'checkbox'> = (row: T, column: CheckType extends 'none' ? Props<TableColumnProps> : Props<TableColumnProps> | null, rowIndex: number, columnIndex: number) => TableMergeConfig | undefined;
+export declare type TableMergeConfig = {
+    colspan?: number;
+    rowspan?: number;
+};
+export declare type TableGridItem = {
+    render: boolean;
+    spans: TableMergeConfig | undefined;
+};
+export declare type TableGrid = TableGridItem[][];
+export declare function useMerge(getCols: () => Props<TableColumnProps>[]): {
+    getGrid: () => TableGrid;
+};
+
+
+export {normalize} from 'intact-react';

package/components/table/useMerge.js

@@ -0,0 +1,79 @@
+import { useInstance } from 'intact-react';
+export function useMerge(getCols) {
+  var instance = useInstance();
+  var grid = [];
+
+  function handleSpans() {
+    grid = [];
+
+    var _instance$get = instance.get(),
+        merge = _instance$get.merge,
+        data = _instance$get.data,
+        checkType = _instance$get.checkType;
+
+    if (!data || !data.length || !merge) return;
+    var cols = getCols();
+    data.forEach(function (data, rowIndex) {
+      var currentRow = [];
+      grid.push(currentRow);
+      var columnIndexOffset = 0;
+
+      if (checkType !== 'none') {
+        handleGridItem(currentRow, merge, data, null, rowIndex, 0);
+        columnIndexOffset = 1;
+      }
+
+      cols.forEach(function (props, columnIndex) {
+        handleGridItem(currentRow, merge, data, props, rowIndex, columnIndex + columnIndexOffset);
+      });
+    });
+  }
+
+  function handleGridItem(currentRow, merge, data, column, rowIndex, columnIndex) {
+    var prevCell = currentRow[columnIndex - 1];
+    var tmp;
+
+    if (prevCell && (tmp = prevCell.spans) && tmp.colspan > 1) {
+      currentRow.push({
+        render: false,
+        spans: {
+          rowspan: tmp.rowspan,
+          colspan: tmp.colspan - 1
+        }
+      });
+      return;
+    }
+
+    if (rowIndex > 0) {
+      var prevRow = grid[rowIndex - 1];
+      var aboveCell = prevRow[columnIndex];
+
+      if (aboveCell && (tmp = aboveCell.spans) && tmp.rowspan > 1) {
+        currentRow.push({
+          render: false,
+          spans: {
+            rowspan: tmp.rowspan - 1,
+            colspan: tmp.colspan
+          }
+        });
+        return;
+      }
+    }
+
+    currentRow.push({
+      render: true,
+      spans: merge(data, column, rowIndex, columnIndex)
+    });
+  }
+
+  function getGrid() {
+    return grid;
+  }
+
+  instance.on('$receive:children', handleSpans);
+  return {
+    getGrid: getGrid
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/table/useResizable.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from 'intact-react';
+import type { TableRowKey } from './table';
+import { State } from '../../hooks/useState';
+export declare const context: {
+    Provider: import("intact").ComponentConstructor<import("intact").Component<import("../context").ProviderProps<any>, {}, {}, {}>>;
+    Consumer: import("intact").ComponentConstructor<import("intact").Component<{}, {}, {}, {}>>;
+};
+export declare function useResizable(scrollRef: RefObject<HTMLElement>, tableRef: RefObject<HTMLElement>, tableWidth: State<number | null>, widthMap: State<Record<TableRowKey, number>>, storeWidth: () => void): {
+    start: (e: MouseEvent) => void;
+    dragging: State<boolean>;
+};
+
+
+export {normalize} from 'intact-react';

package/components/table/useResizable.js

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { useInstance, findDomFromVNode } from 'intact-react';
+import { createContext } from '../context';
+import { useDraggable } from '../../hooks/useDraggable';
+export var context = createContext();
+export function useResizable(scrollRef, tableRef, tableWidth, widthMap, storeWidth) {
+  var instance = useInstance();
+  var containerWidth;
+  var x;
+  var prevVNode;
+  var prevTh;
+  var currentVNode;
+  var currentTh;
+  var minWidth;
+
+  function onStart(e) {
+    containerWidth = scrollRef.value.clientWidth;
+    x = e.clientX; // find the previous column but exclude the hidden columns, #467
+
+    prevVNode = currentVNode = e._vNode;
+    prevTh;
+
+    do {
+      prevVNode = prevVNode.props.prevVNode;
+      prevTh = findDomFromVNode(prevVNode, true);
+    } while (window.getComputedStyle(prevTh).display === 'none');
+
+    currentTh = findDomFromVNode(currentVNode, true);
+    minWidth = prevVNode.props.minWidth || instance.get('minColWidth');
+  }
+
+  function onMove(e) {
+    var _map;
+
+    var delX = e.clientX - x;
+    if (delX === 0) return;
+    var newPrevWidth = prevTh.offsetWidth + delX;
+    if (newPrevWidth < minWidth && delX < 0) return;
+    var newCurrentWidth = currentTh.offsetWidth - delX;
+    var newTableWidth = tableRef.value.offsetWidth + delX;
+    var currentKey = currentVNode.props.key;
+    var prevKey = prevVNode.props.key;
+    x = e.clientX;
+    var map = (_map = {}, _map[prevKey] = newPrevWidth, _map);
+
+    if (containerWidth > newTableWidth) {
+      map[currentKey] = newCurrentWidth;
+    } else {
+      tableWidth.set(newTableWidth);
+    }
+
+    widthMap.set(_extends({}, widthMap.value, map));
+  }
+
+  return useDraggable({
+    onStart: onStart,
+    onMove: onMove,
+    onEnd: storeWidth
+  });
+}
+
+export {normalize} from 'intact-react';

package/components/table/useRestRowStatus.d.ts

@@ -0,0 +1,7 @@
+import type { TableRowKey } from './table';
+export declare function useRestRowStatus(getAllKeys: () => TableRowKey[]): {
+    onRowBeforeUnmount: (key: TableRowKey) => void;
+};
+
+
+export {normalize} from 'intact-react';

package/components/table/useRestRowStatus.js

@@ -0,0 +1,47 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import { useInstance, onBeforeUnmount, onUpdated } from 'intact-react';
+import { addOrRemove } from './useChecked';
+export function useRestRowStatus(getAllKeys) {
+  var instance = useInstance();
+  var allUnmountedRows = [];
+  var willUnmounted = false;
+
+  function onRowBeforeUnmount(key) {
+    if (willUnmounted || instance.get('keepStatus')) return; // maybe the row is only removed by shrinking, i.e. tree table
+
+    var allKeys = getAllKeys();
+    if (_includesInstanceProperty(allKeys).call(allKeys, key)) return;
+    allUnmountedRows.push(key);
+  }
+
+  function reset() {
+    if (allUnmountedRows.length) {
+      omit('checkedKeys', allUnmountedRows);
+      omit('selectedKeys', allUnmountedRows);
+      omit('spreadKeys', allUnmountedRows);
+      omit('expandedKeys', allUnmountedRows);
+      allUnmountedRows = [];
+    }
+  }
+
+  function omit(type, keys) {
+    var originKeys = instance.get(type);
+    if (!originKeys) return;
+    originKeys = _sliceInstanceProperty(originKeys).call(originKeys);
+    keys.forEach(function (key) {
+      return addOrRemove(originKeys, key, false);
+    });
+    instance.set(type, originKeys);
+  }
+
+  onBeforeUnmount(function () {
+    return willUnmounted = true;
+  });
+  onUpdated(reset);
+  return {
+    onRowBeforeUnmount: onRowBeforeUnmount
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/table/useScroll.d.ts

@@ -0,0 +1,9 @@
+import { RefObject } from 'intact-react';
+export declare type ScrollCallback = (scrollLeft: number) => void;
+export declare function useScroll(): {
+    callbacks: ScrollCallback[];
+    scrollRef: RefObject<HTMLElement>;
+};
+
+
+export {normalize} from 'intact-react';

package/components/table/useScroll.js

@@ -0,0 +1,32 @@
+import { onMounted, onBeforeUnmount, createRef } from 'intact-react';
+export function useScroll() {
+  var callbacks = [];
+  var scrollRef = createRef();
+  var scrollLeft = 0;
+
+  function onScroll() {
+    var newScrollLeft = scrollRef.value.scrollLeft;
+
+    if (scrollLeft !== newScrollLeft) {
+      scrollLeft = newScrollLeft;
+      callbacks.forEach(function (fn) {
+        return fn(scrollLeft);
+      });
+    }
+  }
+
+  onMounted(function () {
+    scrollRef.value.addEventListener('scroll', onScroll, {
+      passive: true
+    });
+  });
+  onBeforeUnmount(function () {
+    scrollRef.value.removeEventListener('scroll', onScroll);
+  });
+  return {
+    callbacks: callbacks,
+    scrollRef: scrollRef
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/table/useSelected.d.ts

@@ -0,0 +1,7 @@
+import type { TableRowKey } from './table';
+export declare function useSelected(): {
+    isSelected: (key: TableRowKey) => boolean;
+};
+
+
+export {normalize} from 'intact-react';

package/components/table/useSelected.js

@@ -0,0 +1,31 @@
+import { useInstance } from 'intact-react';
+import { inArray } from './useChecked';
+import { toggleArray } from '../utils';
+export function useSelected() {
+  var instance = useInstance();
+
+  function isSelected(key) {
+    return inArray(instance.get('selectedKeys'), key);
+  }
+
+  instance.on('clickRow', function (data, index, key) {
+    var _instance$get = instance.get(),
+        rowSelectable = _instance$get.rowSelectable,
+        selectedKeys = _instance$get.selectedKeys;
+
+    if (rowSelectable === 'multiple') {
+      instance.set('selectedKeys', toggleArray(selectedKeys, key));
+    } else if (rowSelectable) {
+      if (!selectedKeys || selectedKeys[0] !== key) {
+        instance.set('selectedKeys', [key]);
+      } else {
+        instance.set('selectedKeys', []);
+      }
+    }
+  });
+  return {
+    isSelected: isSelected
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/table/useSortable.d.ts

@@ -0,0 +1,10 @@
+export declare const context: {
+    Provider: import('intact-react').ComponentConstructor<import("intact").Component<import("../context").ProviderProps<any>, {}, {}, {}>>;
+    Consumer: import("intact").ComponentConstructor<import("intact").Component<{}, {}, {}, {}>>;
+};
+export declare function useSortable(): {
+    onChange: (key: string) => void;
+};
+
+
+export {normalize} from 'intact-react';

package/components/table/useSortable.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { useInstance } from 'intact-react';
+import { createContext } from '../context';
+export var context = createContext();
+export function useSortable() {
+  var instance = useInstance(); // if the same column has been clicked three times consecutively,
+  // then let the third click to reset the sort
+
+  var count = 0;
+
+  function onChange(key) {
+    var sort = _extends({}, instance.get('sort'));
+
+    if (sort.key === key) {
+      count++;
+
+      if (count === 3) {
+        sort = {};
+      } else {
+        sort.type = sort.type === 'desc' ? 'asc' : 'desc';
+      }
+    } else {
+      count = 1;
+      sort.key = key;
+      if (!sort.type) sort.type = 'desc';
+    }
+
+    instance.set('sort', sort);
+  }
+
+  return {
+    onChange: onChange
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/table/useStickyHeader.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'intact-react';
+import { ExcludeParam } from '../affix';
+import type { ScrollCallback } from './useScroll';
+export declare function useStickyHeader(callbacks: ScrollCallback[]): {
+    stickHeader: import("../../hooks/useState").State<number | null>;
+    excludeStickHeader: ({ offsetTop }: ExcludeParam) => boolean;
+    elementRef: RefObject<HTMLElement>;
+    headRef: RefObject<HTMLElement>;
+};
+
+
+export {normalize} from 'intact-react';

package/components/table/useStickyHeader.js

@@ -0,0 +1,36 @@
+import { createRef, useInstance } from 'intact-react';
+import { useState } from '../../hooks/useState';
+import { isStringOrNumber, isNull } from 'intact-shared';
+export function useStickyHeader(callbacks) {
+  var instance = useInstance();
+  var elementRef = createRef();
+  var headRef = createRef();
+  var stickHeader = useState(null);
+
+  function excludeStickHeader(_ref) {
+    var offsetTop = _ref.offsetTop;
+
+    var _elementRef$value$get = elementRef.value.getBoundingClientRect(),
+        bottom = _elementRef$value$get.bottom;
+
+    return bottom <= offsetTop;
+  }
+
+  instance.on('$receive:stickHeader', function (v) {
+    stickHeader.set(v === true ? 0 : isStringOrNumber(v) ? +v : null);
+  }); // when the scroll element scroll horizontally, scroll the sticky header too 
+
+  callbacks.push(function (scrollLeft) {
+    if (isNull(stickHeader.value)) return;
+    var affixHeadWrapper = headRef.value.parentElement;
+    affixHeadWrapper.scrollLeft = scrollLeft;
+  });
+  return {
+    stickHeader: stickHeader,
+    excludeStickHeader: excludeStickHeader,
+    elementRef: elementRef,
+    headRef: headRef
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/table/useStickyScrollbar.d.ts

@@ -0,0 +1,15 @@
+import { RefObject } from 'intact-react';
+import { ShouldFixParam } from '../affix';
+import { State } from '../../hooks/useState';
+import type { useScroll } from './useScroll';
+export declare function useStickyScrollbar(elementRef: RefObject<HTMLElement>, { scrollRef, callbacks }: ReturnType<typeof useScroll>, tableRef: RefObject<HTMLElement>, tableScroll: (scrollLeft: number) => void, tableWidth: State<number | null>): {
+    shouldStickScrollbar: ({ offsetBottom, viewportHeight }: ShouldFixParam) => boolean;
+    stick: State<number | null>;
+    style: State<Record<string, string> | null>;
+    scrollbarRef: RefObject<HTMLElement>;
+    onScroll: (e: Event) => void;
+    tableActualWidth: State<string | null>;
+};
+
+
+export {normalize} from 'intact-react';