@kep-platform/basic-component 0.2.1 → 0.3.2

package/dist/@types/type.d.ts

@@ -0,0 +1,64 @@
+import { PaginationProps } from 'rc-pagination';
+import { Key, ReactNode } from 'react';
+export type SizeType = 'small' | 'large' | 'middle';
+export type PaginationType = Pick<PaginationProps, 'current' | 'pageSize'>;
+export type Direction = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+export type ListItemRender = (record: any, index: number) => ReactNode;
+export type Align = 'left' | 'right' | 'center';
+export type ColumnRender = (value: any, record: any, index: number) => ReactNode;
+export type ColumnType = {
+    key: string;
+    dataIndex: string;
+    width?: number;
+    title?: ReactNode;
+    render?: ColumnRender;
+    align?: Align;
+    hideInTable?: boolean;
+    fixed?: 'left' | 'right';
+    left?: string;
+    right?: string;
+    bordered?: boolean;
+    sorter?: boolean | SorterFunc;
+    filter?: boolean;
+};
+export type SorterFunc = (a: any, b: any) => number;
+export type Sorter = 'desc' | 'asc' | undefined;
+export type TriggerType = 'click' | 'mouseover' | 'contextmenu' | 'doubleClick';
+export type MenuItem = {
+    key: Key;
+    title?: string;
+    label: ReactNode;
+};
+export type RequiredTreeNodeKeys = 'key' | 'title' | 'children';
+export type TreeFieldNames = {
+    [key in RequiredTreeNodeKeys]: string;
+};
+export type Condition = {
+    attribute: string;
+    condition?: (value: any) => boolean;
+    description: string;
+};
+export type TreeNodeType = {
+    [key: string]: any;
+    groupBy?: Condition[];
+    selectable?: boolean;
+    isLeaf?: boolean;
+};
+export type onExpandHandler = (keys: Key[], info: {
+    node: TreeNodeType;
+    expanded: boolean;
+    nativeEvent: React.MouseEvent;
+}) => void;
+export type onSelectHandler = (keys: Key[], info: {
+    node: TreeNodeType;
+    selected: boolean;
+    nativeEvent: React.MouseEvent;
+}) => void;
+export type RowSelection = {
+    selectedKeys?: Key[];
+    onSelect: (keys: Key[], info: {
+        type: 'row' | 'all';
+        selected: boolean;
+        nativeEvent: React.ChangeEvent;
+    }) => void;
+};

package/dist/@types/type.js

@@ -0,0 +1 @@
+export {};

package/dist/Button/Button.d.ts

@@ -1,4 +1,5 @@
 import React, { HtmlHTMLAttributes, ReactNode } from 'react';
+import { SizeType } from '../@types/type';
 export type ButtonProps = {
     type?: 'default' | 'primary' | 'danger';
     size?: SizeType;

package/dist/Columns/Columns.d.ts

@@ -1,5 +1,6 @@
 import React, { HtmlHTMLAttributes } from 'react';
 import { ListItemProps } from '../List/List';
+import { ColumnType } from '../@types/type';
 export declare const DefaultColumnWidth = 200;
 export type ColumnsProps = {
     columns: ColumnType[];
@@ -13,12 +14,12 @@ export declare const Column: import("styled-components/dist/types").IStyledCompo
     key: React.Key;
     title?: React.ReactNode;
     index?: number | undefined;
-    itemRender?: ListItemRender | undefined;
+    itemRender?: import("../@types/type").ListItemRender | undefined;
 } & Omit<React.HtmlHTMLAttributes<HTMLLIElement>, "title">, Omit<ColumnType, "render" | "dataIndex"> & {
     key: React.Key;
     title?: React.ReactNode;
     index?: number | undefined;
-    itemRender?: ListItemRender | undefined;
+    itemRender?: import("../@types/type").ListItemRender | undefined;
 } & Omit<React.HtmlHTMLAttributes<HTMLLIElement>, "title"> & {
     isFlex: boolean;
     bordered?: boolean | undefined;

package/dist/Flex/flex.d.ts

@@ -1,4 +1,5 @@
 import { HtmlHTMLAttributes } from 'react';
+import { Align, Direction } from '../@types/type';
 export type FlexProps = {
     direction?: Direction;
     width?: number;

package/dist/List/List.d.ts

@@ -1,4 +1,5 @@
 import React, { HtmlHTMLAttributes, Key, ReactNode } from 'react';
+import { Direction, ListItemRender } from '../@types/type';
 type ListItemType = {
     key: string;
     title?: ReactNode;
@@ -25,5 +26,9 @@ export declare const StyledLi: import("styled-components/dist/types").IStyledCom
     focused: boolean;
 }>> & string;
 export declare const ListItem: React.FC<ListItemProps>;
-declare const List: React.FC<ListProps>;
+declare const List: React.ForwardRefExoticComponent<{
+    items?: ListItemType[] | undefined;
+    direction?: Direction | undefined;
+    itemRender?: ListItemRender | undefined;
+} & React.HtmlHTMLAttributes<HTMLUListElement> & React.RefAttributes<HTMLUListElement>>;
 export default List;

package/dist/List/List.js

@@ -53,7 +53,7 @@ export var ListItem = function ListItem(props) {
 };
 
 /* 理论上来说所有list相关的数据结构都应该交给List组件来完成,但是List组件只处理List结构不处理任何其他样式问题 */
-var List = function List(_ref) {
+var List = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var items = _ref.items,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
@@ -62,7 +62,9 @@ var List = function List(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded2);
   return /*#__PURE__*/React.createElement(StyledUL, _extends({
     direction: direction
-  }, rest), items && Array.isArray(items) ? items.map(function (item, index) {
+  }, rest, {
+    ref: ref
+  }), items && Array.isArray(items) ? items.map(function (item, index) {
     var key = item.key,
       title = item.title,
       rest = _objectWithoutProperties(item, _excluded3);
@@ -73,5 +75,5 @@ var List = function List(_ref) {
       title: typeof titleStr === 'string' ? titleStr : ''
     }), titleStr);
   }) : children);
-};
+});
 export default List;

package/dist/Menu/Menu.d.ts

@@ -1,4 +1,5 @@
 import React, { ReactNode, type Key } from 'react';
+import { Direction, MenuItem, TriggerType } from '../@types/type';
 export type MenuProps = {
     items: MenuItem[];
     direction?: Direction;

package/dist/PopupBox/PopupBox.d.ts

@@ -1,4 +1,5 @@
 import React, { HtmlHTMLAttributes, type ReactNode } from 'react';
+import { TriggerType } from '../@types/type';
 export type PopupBoxProps = {
     children?: ReactNode;
     left?: number;
@@ -17,5 +18,5 @@ export declare function Popup(props: {
     trigger?: TriggerType;
     content?: ReactNode;
     onVisibleChange?: (visible: boolean) => void;
-}): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+}): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
 export default PopupBox;

package/dist/Select/Select.d.ts

@@ -20,7 +20,7 @@ declare namespace Select {
         key: React.Key;
         title?: React.ReactNode;
         index?: number | undefined;
-        itemRender?: ListItemRender | undefined;
+        itemRender?: import("..").ListItemRender | undefined;
     } & Omit<React.HtmlHTMLAttributes<HTMLLIElement>, "title">, SelectListItemProps>> & string & Omit<React.FC<ListItemProps>, keyof React.Component<any, {}, any>>;
 }
 export default Select;

package/dist/Space/Space.d.ts

@@ -1,4 +1,5 @@
 import React, { CSSProperties, HtmlHTMLAttributes, ReactNode } from 'react';
+import { Direction, SizeType } from '../@types/type';
 export type SpaceProps = {
     children?: ReactNode;
     className?: string;

package/dist/Table/Table.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-type SorterDesc = Record<string, Sorter>;
+import { ColumnType, PaginationType, RowSelection, Sorter } from '../@types/type';
 type FilterDesc = Record<string, string>;
 export type Scroll = {
     y?: number;
@@ -12,14 +12,19 @@ export type TableProps = {
     actions?: ReactNode[];
     title?: ReactNode;
     scroll?: Scroll;
-    onChange?: (pagination?: Pagination, sorter?: SorterDesc, fitler?: FilterDesc) => void;
+    onChange?: (pagination: PaginationType | false, sorter: SorterController, fitler?: FilterDesc) => void;
     headerRender?: (column: ColumnType) => ReactNode;
     groupBy?: string;
-    pagination?: Pagination | false;
+    pagination?: PaginationType | false;
     empty?: ReactNode;
     rowSelection?: RowSelection;
     multiple?: boolean;
     tableContentRef?: React.RefObject<HTMLDivElement>;
+    virtual?: boolean;
 };
+type SorterController = {
+    columnKey: string;
+    sorterType: Sorter;
+} | null;
 export default function Table({ columns, dataSource, rowKey, scroll, onChange, headerRender, pagination: outerPagination, empty, rowSelection, multiple, tableContentRef, }: TableProps): React.JSX.Element;
 export {};

package/dist/Table/Table.js

@@ -35,7 +35,7 @@ import { Popup } from "../PopupBox";
 import { Space } from "../Space";
 var TableContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
 var TableHeaderRow = styled(Columns)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    border-bottom: var(--kep-platform-line-width) solid var(--kep-platform-color-table-border);\n    position: sticky;\n    top: 0;\n    left: 0;\n    z-index: calc(var(--kep-platform-z-index-fixed) + 5);\n    & ", " {\n        background-color: var(--kep-platform-header-bg);\n        font-weight: 600;\n        position: sticky;\n        &:not(:last-child):after {\n            content: '';\n            width: 1px;\n            height: calc(100% - 2 * var(--kep-platform-padding-xs));\n            position: absolute;\n            top: var(--kep-platform-padding-xs);\n            right: 0;\n            background-color: var(--kep-platform-color-border-secondary);\n        }\n    }\n"])), Column);
-var TableBody = styled(List)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
+var TableBody = styled(List)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    flex-direction: column;\n"])));
 var TableBodyRow = styled(ListItem).withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !['isActive'].includes(prop);
@@ -158,7 +158,7 @@ export default function Table(_ref3) {
     dataSource = _ref3.dataSource,
     rowKey = _ref3.rowKey,
     scroll = _ref3.scroll,
-    _onChange2 = _ref3.onChange,
+    _onChange = _ref3.onChange,
     headerRender = _ref3.headerRender,
     outerPagination = _ref3.pagination,
     _ref3$empty = _ref3.empty,
@@ -277,16 +277,16 @@ export default function Table(_ref3) {
       data[dataIndex] = /*#__PURE__*/React.createElement(ColumnTitleController, {
         column: column,
         onSorterChange: function onSorterChange(sorter) {
-          var key = column.key;
-          _onChange2 === null || _onChange2 === void 0 || _onChange2(undefined, _defineProperty({}, key, sorter), undefined);
-          setSorterController({
+          var newSorterController = {
             columnKey: column.key,
             sorterType: sorter
-          });
+          };
+          _onChange === null || _onChange === void 0 || _onChange(pagination, newSorterController, filterValues);
+          setSorterController(newSorterController);
         },
         onFilterValueChange: function onFilterValueChange(value) {
           var newFilterValues = _objectSpread(_objectSpread({}, filterValues), {}, _defineProperty({}, dataIndex, value));
-          _onChange2 === null || _onChange2 === void 0 || _onChange2(undefined, undefined, newFilterValues);
+          _onChange === null || _onChange === void 0 || _onChange(pagination, sorterController, newFilterValues);
           setFilterValues(newFilterValues);
         },
         title: (headerRender === null || headerRender === void 0 ? void 0 : headerRender(column)) || column.title,
@@ -297,7 +297,7 @@ export default function Table(_ref3) {
       });
     });
     return data;
-  }, [formatedColumns, sorterController, filterValues]);
+  }, [formatedColumns, sorterController, filterValues, pagination]);
   var boxShadowBox = useRef(null);
   var headerColumns = useMemo(function () {
     return formatedColumns.map(function (column) {
@@ -420,14 +420,18 @@ export default function Table(_ref3) {
     total: (pagination === null || pagination === void 0 ? void 0 : pagination.total) || dataSource.length,
     justifyContent: "right",
     onChange: function onChange(current, pageSize) {
-      _onChange2 === null || _onChange2 === void 0 || _onChange2(_objectSpread(_objectSpread({}, pagination), {}, {
+      _onChange === null || _onChange === void 0 || _onChange(_objectSpread(_objectSpread({}, pagination), {}, {
         current: current,
         pageSize: pageSize
-      }));
+      }), sorterController, filterValues);
       setPagination(_objectSpread(_objectSpread({}, pagination), {}, {
         current: current,
         pageSize: pageSize
       }));
     }
-  })));
+  })), /*#__PURE__*/React.createElement("pre", null, JSON.stringify({
+    pagination: pagination,
+    sorterController: sorterController,
+    filterValues: filterValues
+  }, null, 4)));
 }

package/dist/Tree/Tree.d.ts

@@ -1,4 +1,5 @@
 import React, { Key, ReactNode } from 'react';
+import { ColumnType, MenuItem, onExpandHandler, onSelectHandler, TreeFieldNames, TreeNodeType } from '../@types/type';
 export type TreeProps = {
     treeData: TreeNodeType[];
     expandedKeys?: Key[];

package/dist/Tree/TreeNode.d.ts

@@ -1,4 +1,5 @@
 import React, { Key, ReactNode } from 'react';
+import { ColumnType, MenuItem, onExpandHandler, onSelectHandler, TreeFieldNames, TreeNodeType } from '../@types/type';
 export type TreeNodeControllerProps = {
     node: TreeNodeType;
     selectedKeys: Key[];

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+export * from './@types/type';
+export * from './__styles';
 export * from './Button';
 export * from './Columns';
 export * from './Flex';
@@ -14,4 +16,3 @@ export * from './Table';
 export * from './Tree';
 export * from './ViewPort';
 export * from './Window';
-export * from './__styles';

package/dist/index.js

@@ -1,3 +1,5 @@
+export * from "./@types/type";
+export * from "./__styles";
 export * from "./Button";
 export * from "./Columns";
 export * from "./Flex";
@@ -13,5 +15,4 @@ export * from "./Spin";
 export * from "./Table";
 export * from "./Tree";
 export * from "./ViewPort";
-export * from "./Window";
-export * from "./__styles";
+export * from "./Window";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kep-platform/basic-component",
-    "version": "0.2.1",
+    "version": "0.3.2",
     "description": "A react library developed with dumi",
     "license": "MIT",
     "module": "dist/index.js",
@@ -47,7 +47,7 @@
     },
     "dependencies": {
         "@ant-design/icons": "^5.3.7",
-        "@kep-platform/hooks": "^0.2.1",
+        "@kep-platform/hooks": "^0.3.2",
         "color": "^4.2.3",
         "rc-pagination": "^4.1.0"
     },
@@ -87,5 +87,5 @@
     "authors": [
         "less-step-jss 1599925910@qq.com"
     ],
-    "gitHead": "e421f2be24cf17cde085ef02116c37be24976822"
+    "gitHead": "d6167a607e46012935e3ee7e301c3714be7fffc0"
 }

package/dist/@types/index.d.ts

@@ -1,81 +0,0 @@
-import { keyframes } from 'styled-components';
-import { PaginationProps } from '../Pagination';
-declare global {
-    type SizeType = 'small' | 'large' | 'middle';
-    type Keyframes = ReturnType<typeof keyframes>;
-    type Direction = 'row' | 'column' | 'row-reverse' | 'column-reverse';
-    type ListItemRender = (record: any, index: number) => ReactNode;
-    type Align = 'left' | 'right' | 'center';
-    type Pagination = PaginationProps;
-    type ColumnRender = (value: any, record: Record<string, any>, index: number) => ReactNode;
-    type ColumnType = {
-        key: string;
-        dataIndex: string;
-        width?: number;
-        title?: ReactNode;
-        render?: ColumnRender;
-        align?: Align;
-        hideInTable?: boolean;
-        fixed?: 'left' | 'right';
-        left?: string;
-        right?: string;
-        bordered?: boolean;
-        sorter?: boolean | SorterFunc;
-        filter?: boolean;
-    };
-    type SorterFunc = (a: any, b: any) => number;
-    type Sorter = 'desc' | 'asc' | undefined;
-    type TriggerType = 'click' | 'mouseover' | 'contextmenu' | 'doubleClick';
-    type MenuItem = {
-        key: Key;
-        title?: string;
-        label: ReactNode;
-    };
-    type RequiredTreeNodeKeys = 'key' | 'title' | 'children';
-
-    type TreeFieldNames = {
-        [key in RequiredTreeNodeKeys]: string;
-    };
-
-    type Condition = {
-        attribute: string;
-        condition?: (value: any) => boolean;
-        description: string;
-    };
-
-    type TreeNodeType = {
-        [key: string]: any;
-        groupBy?: Condition[];
-        selectable?: boolean;
-        isLeaf?: boolean;
-    };
-
-    type onExpandHandler = (
-        keys: Key[],
-        info: {
-            node: TreeNodeType;
-            expanded: boolean;
-            nativeEvent: React.MouseEvent;
-        },
-    ) => void;
-
-    type onSelectHandler = (
-        keys: Key[],
-        info: {
-            node: TreeNodeType;
-            selected: boolean;
-            nativeEvent: React.MouseEvent;
-        },
-    ) => void;
-    type RowSelection = {
-        selectedKeys?: Key[];
-        onSelect: (
-            keys: Key[],
-            info: {
-                type: 'row' | 'all';
-                selected: boolean;
-                nativeEvent: React.ChangeEvent;
-            },
-        ) => void;
-    };
-}