listpage-next 0.0.116 → 0.0.118

package/dist/components/Page/components/ListPage/DataTable.d.ts

@@ -1,15 +1,16 @@
 import { TableProps } from 'antd';
-import { ListPageStore } from '../../context/listpage';
-import { ComponentProps, ComponentType } from '../../../DataTable/typings';
 import { ColumnType } from 'antd/es/table';
+import { ListPageStore } from '../../context/listpage';
 import { ColumnRender } from '../../../DataTable/components/Render';
-export interface DataTableProps<Record = any> extends Omit<TableProps<Record>, 'dataSource' | 'title' | 'columns'> {
+import { ComponentProps, ComponentType } from '../../../DataTable/typings';
+export interface DataTableProps<RecordValue extends Record<string, any> = any> extends Omit<TableProps<RecordValue>, 'dataSource' | 'title' | 'columns'> {
     title?: React.ReactNode;
-    extra?: React.ReactNode;
-    columns?: ListPageTableColumn<Record>[];
+    rowSelectionType?: 'checkbox' | 'radio';
+    extra?: React.ReactNode | ((ctx: ListPageStore<any, RecordValue>) => React.ReactNode);
+    columns?: ListPageTableColumn<RecordValue>[];
 }
-export interface ListPageTableColumn<Record = any> extends ColumnType<Record> {
-    component?: ComponentType | ColumnRender<Record, ListPageStore>;
+export interface ListPageTableColumn<RecordValue extends Record<string, any> = any, FilterValue = any> extends ColumnType<RecordValue> {
+    component?: ComponentType | ColumnRender<RecordValue, ListPageStore<FilterValue, RecordValue>>;
     props?: ComponentProps;
 }
 export declare const DataTable: ((props: DataTableProps) => import("react/jsx-runtime").JSX.Element) & {

package/dist/components/Page/components/ListPage/DataTable.js

@@ -1,18 +1,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Card, Table } from "antd";
+import { observer } from "mobx-react-lite";
 import { useListPageStore } from "../../context/listpage.js";
 import { TableContainer } from "../../../DataTable/index.js";
 import { usePagination } from "../../hooks/usePagination.js";
 import { useColumns } from "../../hooks/useColumns.js";
-import { observer } from "mobx-react-lite";
 const DataTable = observer((props)=>{
-    const { title, extra, columns, ...restProps } = props;
+    const { title, extra, columns, rowSelectionType, ...restProps } = props;
     const store = useListPageStore();
     const paginationEle = usePagination(props.pagination);
     const newColumns = useColumns(columns);
+    const extraEle = 'function' == typeof extra ? extra(store) : extra;
     return /*#__PURE__*/ jsxs(Card, {
         title: title,
-        extra: extra,
+        extra: extraEle,
         styles: {
             body: {
                 padding: 0
@@ -26,7 +27,14 @@ const DataTable = observer((props)=>{
                     columns: newColumns,
                     loading: store.loadingData,
                     dataSource: store.dataSource,
-                    pagination: false
+                    pagination: false,
+                    rowSelection: rowSelectionType && {
+                        preserveSelectedRowKeys: true,
+                        ...restProps.rowSelection,
+                        type: rowSelectionType,
+                        selectedRowKeys: store.selection.selectedRowKeys,
+                        onChange: store.onSelectChange
+                    }
                 })
             }),
             paginationEle

package/dist/components/Page/components/ListPage/styles.js

@@ -8,6 +8,7 @@ const ListPageContainer = styled_components.div`
   flex-direction: column;
   overflow: hidden;
   padding: 16px 24px;
+  background-color: #eeeeee;
 `;
 const HeaderSection = styled_components.div`
   display: flex;

package/dist/components/Page/components/ListPage/v2.d.ts

@@ -3,7 +3,9 @@ import { TableProps } from 'antd';
 import { FloatRender, ListPageStore, TableRequest } from '../../context/listpage';
 import { FilterFormOption } from '../../../FilterGroup';
 import { DataTableColumns } from '../../../DataTable';
+import { HeaderProps } from '../../hooks/useHeader';
 export interface ListPageProps<FilterValue = any, RecordValue extends Record<string, any> = any> {
+    storageKey?: string;
     request: TableRequest<FilterValue, RecordValue>;
     floats?: {
         key: string;
@@ -14,10 +16,7 @@ export interface ListPageProps<FilterValue = any, RecordValue extends Record<str
         pageSize?: number;
         currentPage?: number;
     };
-    header?: {
-        title?: ReactNode;
-        extra?: ReactNode;
-    };
+    header?: HeaderProps;
     filter?: {
         options: FilterFormOption[];
         onReset?: () => void;

package/dist/components/Page/components/ListPage/v2.js

@@ -3,14 +3,16 @@ import { observer } from "mobx-react-lite";
 import { useMount, useUpdateEffect } from "ahooks";
 import { toJS } from "mobx";
 import { ListPageProvider, useListPageStore } from "../../context/listpage.js";
-import { FilterSection, HeaderSection, ListPageContainer, Title, ToolbarSection } from "./styles.js";
+import { FilterSection, ListPageContainer, ToolbarSection } from "./styles.js";
 import { FilterForm } from "../../../FilterGroup/index.js";
 import { useFloat } from "../../hooks/useFloat.js";
 import { DataTable } from "./DataTable.js";
+import { useHeader } from "../../hooks/useHeader.js";
 const PureListPage = observer((props)=>{
     const { header, filter, toolbar, table } = props;
     const store = useListPageStore();
     const floatEle = useFloat();
+    const headerEle = useHeader(header);
     useMount(()=>{
         store.refreshTable();
     });
@@ -21,16 +23,7 @@ const PureListPage = observer((props)=>{
     ]);
     return /*#__PURE__*/ jsxs(ListPageContainer, {
         children: [
-            header && /*#__PURE__*/ jsxs(HeaderSection, {
-                children: [
-                    /*#__PURE__*/ jsx(Title, {
-                        children: header.title
-                    }),
-                    /*#__PURE__*/ jsx("div", {
-                        children: header.extra
-                    })
-                ]
-            }),
+            headerEle,
             filter && /*#__PURE__*/ jsx(FilterSection, {
                 children: /*#__PURE__*/ jsx(FilterForm, {
                     onReset: filter.onReset,
@@ -53,6 +46,7 @@ const PureListPage = observer((props)=>{
     });
 });
 const ListPage = (props)=>/*#__PURE__*/ jsx(ListPageProvider, {
+        storageKey: props.storageKey,
         request: props.request,
         floats: props.floats,
         initialValues: props.initialValues,

package/dist/components/Page/context/listpage.d.ts

@@ -1,9 +1,19 @@
-import { JSX, ReactNode } from 'react';
+import { JSX, Key, ReactNode } from 'react';
 import { FloatComponentProps } from '../../../context';
 import { BaseQueryParams, PaginationData } from '../../../http-client/types';
 export type TableRequest<FilterValue = any, RecordValue = any> = (pageParams: BaseQueryParams, filterValues: FilterValue) => Promise<PaginationData<RecordValue>>;
 export type FloatRender<RecordValue extends Record<string, any> = any> = (props: FloatComponentProps<RecordValue>) => JSX.Element;
+export type ListPageStorageOption<FilterValue = any, RecordValue extends Record<string, any> = any> = {
+    storageKey?: string;
+    initialValues: any;
+    request: TableRequest<FilterValue, RecordValue>;
+    floats: {
+        key: string;
+        render: FloatRender<RecordValue>;
+    }[];
+};
 export declare class ListPageStore<FilterValue = any, RecordValue extends Record<string, any> = any> {
+    storageKey?: string;
     filters: FilterValue;
     tableDataRequest: TableRequest<FilterValue, RecordValue>;
     floats: {
@@ -22,24 +32,27 @@ export declare class ListPageStore<FilterValue = any, RecordValue extends Record
         pageSize: number;
         total: number;
     };
-    constructor(initialValues: any | undefined, request: TableRequest<FilterValue, RecordValue>, floats: {
-        key: string;
-        render: FloatRender<RecordValue>;
-    }[]);
+    selection: {
+        selectedRowKeys: Key[];
+        selectedRows: RecordValue[];
+    };
+    constructor(options: ListPageStorageOption<FilterValue, RecordValue>);
     submitFiltersChange(value?: FilterValue): void;
     showFloat(key: string, record: any, onCloseCallback?: () => void): void;
     hideFloat(): void;
     updatePage(page: number, pageSize: number): void;
     fetchTableData(): Promise<void>;
+    onSelectChange: (selectedRowKeys: Key[], selectedRows: RecordValue[]) => void;
     refreshTable(): void;
 }
-export declare const ListPageProvider: ({ children, initialValues, request, floats, }: {
+export declare const ListPageProvider: ({ children, initialValues, request, storageKey, floats, }: {
     children: ReactNode;
     initialValues?: {
         filterValues?: any;
         pageSize?: number;
         currentPage?: number;
     };
+    storageKey?: string;
     floats?: {
         key: string;
         render: FloatRender<any>;

package/dist/components/Page/context/listpage.js

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { makeAutoObservable, runInAction } from "mobx";
 import { createContext, useContext, useMemo } from "react";
 class ListPageStore {
+    storageKey;
     filters = {};
     tableDataRequest;
     floats = [];
@@ -9,13 +10,21 @@ class ListPageStore {
     loadingData = false;
     dataSource = [];
     pagination;
-    constructor(initialValues = {}, request, floats){
+    selection;
+    constructor(options){
+        const { initialValues = {}, request, floats = [], storageKey } = options;
+        const defaultValue = getDefaultValue(storageKey);
+        this.storageKey = storageKey;
         this.filters = initialValues.filterValues || {};
         this.floats = floats;
         this.pagination = {
             total: 0,
-            current: initialValues.currentPage || 1,
-            pageSize: initialValues.pageSize || 10
+            current: initialValues.currentPage || defaultValue.currentPage,
+            pageSize: initialValues.pageSize || defaultValue.pageSize
+        };
+        this.selection = {
+            selectedRowKeys: [],
+            selectedRows: []
         };
         this.tableDataRequest = request;
         makeAutoObservable(this);
@@ -39,6 +48,10 @@ class ListPageStore {
         if (pageSize !== this.pagination.pageSize) page = 1;
         this.pagination.current = page;
         this.pagination.pageSize = pageSize;
+        setDefaultValue(this.storageKey, {
+            currentPage: page,
+            pageSize
+        });
         this.refreshTable();
     }
     async fetchTableData() {
@@ -60,13 +73,22 @@ class ListPageStore {
             });
         }
     }
+    onSelectChange = (selectedRowKeys, selectedRows)=>{
+        this.selection.selectedRowKeys = selectedRowKeys;
+        this.selection.selectedRows = selectedRows;
+    };
     refreshTable() {
         this.fetchTableData();
     }
 }
 const ListPageContext = /*#__PURE__*/ createContext({});
-const ListPageProvider = ({ children, initialValues, request, floats = [] })=>{
-    const store = useMemo(()=>new ListPageStore(initialValues, request, floats), []);
+const ListPageProvider = ({ children, initialValues, request, storageKey, floats = [] })=>{
+    const store = useMemo(()=>new ListPageStore({
+            initialValues,
+            request,
+            floats,
+            storageKey
+        }), []);
     return /*#__PURE__*/ jsx(ListPageContext.Provider, {
         value: store,
         children: children
@@ -75,4 +97,24 @@ const ListPageProvider = ({ children, initialValues, request, floats = [] })=>{
 function useListPageStore() {
     return useContext(ListPageContext);
 }
+const getDefaultValue = (STORAGE_KEY)=>{
+    if (!STORAGE_KEY) return {
+        currentPage: 1,
+        pageSize: 10
+    };
+    const storageValue = localStorage.getItem(STORAGE_KEY);
+    const value = JSON.parse(storageValue ?? '{}');
+    return {
+        currentPage: value.currentPage || 1,
+        pageSize: value.pageSize || 10
+    };
+};
+const setDefaultValue = (STORAGE_KEY, value)=>{
+    if (!STORAGE_KEY) return;
+    const defaultValue = getDefaultValue(STORAGE_KEY);
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({
+        ...defaultValue,
+        ...value
+    }));
+};
 export { ListPageProvider, ListPageStore, useListPageStore };

package/dist/components/Page/hooks/useHeader.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { ListPageStore } from '../context/listpage';
+export type HeaderProps = {
+    title?: ReactNode;
+    extra?: ReactNode | ((ctx: ListPageStore) => ReactNode);
+};
+export declare function useHeader(props?: HeaderProps): false | import("react/jsx-runtime").JSX.Element;

package/dist/components/Page/hooks/useHeader.js

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { HeaderSection, Title } from "../components/ListPage/styles.js";
+import { useListPageStore } from "../context/listpage.js";
+function useHeader(props) {
+    const store = useListPageStore();
+    if (!props) return false;
+    const { title, extra } = props;
+    const extraEle = 'function' == typeof extra ? extra(store) : extra;
+    return /*#__PURE__*/ jsxs(HeaderSection, {
+        children: [
+            /*#__PURE__*/ jsx(Title, {
+                children: title
+            }),
+            /*#__PURE__*/ jsx("div", {
+                children: extraEle
+            })
+        ]
+    });
+}
+export { useHeader };

package/dist/components/Page/index.d.ts

@@ -4,3 +4,4 @@ export { PageLoading } from './components/Loading';
 export { usePageContext } from './context/page';
 export { ListPage as ListPagePro, type ListPageProps as ListPageProProps, } from './components/ListPage/v2';
 export { type ListPageTableColumn } from './components/ListPage/DataTable';
+export { type TableRequest } from './context/listpage';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "listpage-next",
-  "version": "0.0.116",
+  "version": "0.0.118",
   "description": "A React component library for creating filter forms with Ant Design",
   "type": "module",
   "main": "./dist/index.js",