listpage-next 0.0.170 → 0.0.172
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/PageLayout/components/PageContent/index.d.ts +5 -0
- package/dist/components/PageLayout/components/PageContent/index.js +15 -0
- package/dist/components/PageLayout/components/PageHeader/index.d.ts +5 -0
- package/dist/components/PageLayout/components/PageHeader/index.js +5 -0
- package/dist/components/PageLayout/components/PageLayout/index.d.ts +11 -0
- package/dist/components/PageLayout/components/PageLayout/index.js +44 -0
- package/dist/components/{Page/components/Loading → PageLayout/components/PageLoading}/index.js +16 -6
- package/dist/components/PageLayout/components/PageLogo/index.d.ts +7 -0
- package/dist/components/PageLayout/components/PageLogo/index.js +37 -0
- package/dist/components/PageLayout/components/PageProvider/float.d.ts +20 -0
- package/dist/components/PageLayout/components/PageProvider/float.js +64 -0
- package/dist/components/PageLayout/components/PageProvider/index.d.ts +17 -0
- package/dist/components/PageLayout/components/PageProvider/index.js +31 -0
- package/dist/components/PageLayout/components/PageSider/index.d.ts +8 -0
- package/dist/components/PageLayout/components/PageSider/index.js +42 -0
- package/dist/components/PageLayout/index.d.ts +4 -0
- package/dist/components/PageLayout/index.js +4 -0
- package/dist/context/index.d.ts +1 -1
- package/dist/demos/demo2.js +2 -2
- package/dist/demos/demo5.js +1 -1
- package/dist/features/ChatClient/components/ChatContent/index.js +1 -1
- package/dist/features/ChatClient/ui/Bubble/BubbleList.js +1 -1
- package/dist/features/ListPage/components/DataTable/index.d.ts +4 -0
- package/dist/{components/Page/components/ListPage/DataTable.js → features/ListPage/components/DataTable/index.js} +3 -3
- package/dist/features/ListPage/components/DataTable/renders/index.d.ts +7 -0
- package/dist/features/ListPage/components/DataTable/renders/index.js +13 -0
- package/dist/features/ListPage/components/DataTable/renders/link.d.ts +2 -0
- package/dist/features/ListPage/components/DataTable/renders/link.js +27 -0
- package/dist/features/ListPage/components/DataTable/renders/switch.d.ts +2 -0
- package/dist/features/ListPage/components/DataTable/renders/switch.js +10 -0
- package/dist/features/ListPage/components/DataTable/renders/tag.d.ts +2 -0
- package/dist/features/ListPage/components/DataTable/renders/tag.js +7 -0
- package/dist/features/ListPage/components/DataTable/renders/text.d.ts +2 -0
- package/dist/features/ListPage/components/DataTable/renders/text.js +10 -0
- package/dist/features/ListPage/components/DataTable/renders/time.d.ts +2 -0
- package/dist/features/ListPage/components/DataTable/renders/time.js +15 -0
- package/dist/features/ListPage/components/DataTable/types.d.ts +34 -0
- package/dist/features/ListPage/components/DataTable/types.js +0 -0
- package/dist/features/ListPage/components/DataTable/utils/render.d.ts +2 -0
- package/dist/features/ListPage/components/DataTable/utils/render.js +25 -0
- package/dist/features/ListPage/components/ListPageContainer/index.d.ts +17 -0
- package/dist/{components/Page/components/ListPage/v2.js → features/ListPage/components/ListPageContainer/index.js} +10 -24
- package/dist/features/ListPage/context/context.d.ts +4 -0
- package/dist/features/ListPage/context/context.js +22 -0
- package/dist/features/ListPage/context/index.d.ts +2 -0
- package/dist/features/ListPage/context/index.js +3 -0
- package/dist/features/ListPage/context/store.d.ts +37 -0
- package/dist/{components/Page/context/listpage.js → features/ListPage/context/store.js} +2 -42
- package/dist/features/ListPage/context/types.d.ts +12 -0
- package/dist/features/ListPage/context/types.js +0 -0
- package/dist/features/ListPage/hooks/useColumns.d.ts +3 -0
- package/dist/features/ListPage/hooks/useColumns.js +20 -0
- package/dist/{components/Page → features/ListPage}/hooks/useFloat.js +1 -1
- package/dist/features/ListPage/hooks/useHeader.d.ts +2 -0
- package/dist/{components/Page → features/ListPage}/hooks/useHeader.js +2 -2
- package/dist/{components/Page → features/ListPage}/hooks/usePagination.js +2 -2
- package/dist/{components/Page → features/ListPage}/hooks/useSelectionTools.js +1 -1
- package/dist/features/ListPage/index.d.ts +3 -0
- package/dist/features/ListPage/index.js +4 -0
- package/dist/{components/Page/components → features}/ListPage/styles.d.ts +3 -1
- package/dist/{components/Page/components → features}/ListPage/styles.js +15 -2
- package/dist/features/ListPage/types.d.ts +26 -0
- package/dist/features/ListPage/types.js +0 -0
- package/dist/features/ListPage/utils/index.d.ts +10 -0
- package/dist/features/ListPage/utils/index.js +23 -0
- package/dist/index.d.ts +2 -2
- package/dist/index.js +2 -2
- package/package.json +1 -1
- package/dist/components/Page/components/ListPage/DataTable.d.ts +0 -20
- package/dist/components/Page/components/ListPage/index.d.ts +0 -16
- package/dist/components/Page/components/ListPage/index.js +0 -51
- package/dist/components/Page/components/ListPage/v2.d.ts +0 -43
- package/dist/components/Page/components/PageContainer/index.d.ts +0 -10
- package/dist/components/Page/components/PageContainer/index.js +0 -82
- package/dist/components/Page/context/listpage.d.ts +0 -80
- package/dist/components/Page/context/page.d.ts +0 -13
- package/dist/components/Page/context/page.js +0 -15
- package/dist/components/Page/hooks/useColumns.d.ts +0 -3
- package/dist/components/Page/hooks/useColumns.js +0 -10
- package/dist/components/Page/hooks/useHeader.d.ts +0 -7
- package/dist/components/Page/index.d.ts +0 -8
- package/dist/components/Page/index.js +0 -7
- /package/dist/components/{Page/components/Loading → PageLayout/components/PageLoading}/index.d.ts +0 -0
- /package/dist/{components/Page → features/ListPage}/hooks/useFloat.d.ts +0 -0
- /package/dist/{components/Page → features/ListPage}/hooks/usePagination.d.ts +0 -0
- /package/dist/{components/Page → features/ListPage}/hooks/useSelectionTools.d.ts +0 -0
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { textRender } from "../renders/text.js";
|
|
2
|
+
import { timeRender } from "../renders/time.js";
|
|
3
|
+
import { tagRender } from "../renders/tag.js";
|
|
4
|
+
import { linkRender } from "../renders/link.js";
|
|
5
|
+
import { switchRender } from "../renders/switch.js";
|
|
6
|
+
function createColumnRender(component, props) {
|
|
7
|
+
if (component) {
|
|
8
|
+
if ('text' === component) return function(value, record, index) {
|
|
9
|
+
return textRender(value, record, index, props);
|
|
10
|
+
};
|
|
11
|
+
if ('time' === component) return function(value, record, index) {
|
|
12
|
+
return timeRender(value, record, index, props);
|
|
13
|
+
};
|
|
14
|
+
if ('tag' === component) return function(value, record, index) {
|
|
15
|
+
return tagRender(value, record, index, props);
|
|
16
|
+
};
|
|
17
|
+
if ('link' === component) return function(value, record, index) {
|
|
18
|
+
return linkRender(value, record, index, props);
|
|
19
|
+
};
|
|
20
|
+
if ('switch' === component) return function(value, record, index) {
|
|
21
|
+
return switchRender(value, record, index, props);
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
export { createColumnRender };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ListPageFilterProps, ListPageFloatProps, ListPageHeaderProps, ListPageRequest, ListPageToolbarProps, StateValue } from '../../types';
|
|
2
|
+
import { DataTableProps } from '../DataTable/types';
|
|
3
|
+
export interface ListPageProps<FilterValue = any, RecordValue extends Record<string, any> = any> {
|
|
4
|
+
styles?: {
|
|
5
|
+
page?: React.CSSProperties;
|
|
6
|
+
};
|
|
7
|
+
request: ListPageRequest<FilterValue, RecordValue>;
|
|
8
|
+
storageKey?: string;
|
|
9
|
+
initialValues?: StateValue<FilterValue>;
|
|
10
|
+
state?: StateValue<FilterValue>;
|
|
11
|
+
header?: ListPageHeaderProps;
|
|
12
|
+
floats?: ListPageFloatProps[];
|
|
13
|
+
filter?: ListPageFilterProps<FilterValue>;
|
|
14
|
+
toolbar?: ListPageToolbarProps<FilterValue, RecordValue>;
|
|
15
|
+
table: DataTableProps<FilterValue, RecordValue>;
|
|
16
|
+
}
|
|
17
|
+
export declare const ListPage: (props: ListPageProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,31 +1,17 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useImperativeHandle } from "react";
|
|
3
2
|
import { observer } from "mobx-react-lite";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import { ListPageProvider, useListPageStore } from "../../context/listpage.js";
|
|
7
|
-
import { FilterSection, ListPageContainer, ToolbarSection } from "./styles.js";
|
|
8
|
-
import { FilterForm } from "../../../FilterGroup/index.js";
|
|
3
|
+
import { FilterForm } from "../../../../components/FilterGroup/index.js";
|
|
4
|
+
import { ListPageProvider, useListPageStore } from "../../context/index.js";
|
|
9
5
|
import { useFloat } from "../../hooks/useFloat.js";
|
|
10
|
-
import { DataTable } from "./DataTable.js";
|
|
11
6
|
import { useHeader } from "../../hooks/useHeader.js";
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
import { FilterSection, ListPageWrapper, ToolbarSection } from "../../styles.js";
|
|
8
|
+
import { DataTable } from "../DataTable/index.js";
|
|
9
|
+
const ListPageContainerComponent = observer((props)=>{
|
|
10
|
+
const { styles, header, filter, toolbar, table } = props;
|
|
14
11
|
const store = useListPageStore();
|
|
15
|
-
const floatEle = useFloat();
|
|
16
12
|
const headerEle = useHeader(header);
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
});
|
|
20
|
-
useUpdateEffect(()=>{
|
|
21
|
-
filter?.onChange?.(toJS(store.filters));
|
|
22
|
-
}, [
|
|
23
|
-
store.filters
|
|
24
|
-
]);
|
|
25
|
-
useImperativeHandle(pageRef, ()=>store, [
|
|
26
|
-
store
|
|
27
|
-
]);
|
|
28
|
-
return /*#__PURE__*/ jsxs(ListPageContainer, {
|
|
13
|
+
const floatEle = useFloat();
|
|
14
|
+
return /*#__PURE__*/ jsxs(ListPageWrapper, {
|
|
29
15
|
style: styles?.page,
|
|
30
16
|
children: [
|
|
31
17
|
headerEle,
|
|
@@ -54,8 +40,8 @@ const ListPage = (props)=>/*#__PURE__*/ jsx(ListPageProvider, {
|
|
|
54
40
|
floats: props.floats,
|
|
55
41
|
initialValues: props.initialValues,
|
|
56
42
|
state: props.state,
|
|
57
|
-
children: /*#__PURE__*/ jsx(
|
|
43
|
+
children: /*#__PURE__*/ jsx(ListPageContainerComponent, {
|
|
58
44
|
...props
|
|
59
45
|
})
|
|
60
46
|
});
|
|
61
|
-
export { ListPage
|
|
47
|
+
export { ListPage };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { ListPageStore } from './store';
|
|
2
|
+
import { ListPageProviderProps } from './types';
|
|
3
|
+
export declare const ListPageProvider: (props: ListPageProviderProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export declare function useListPageStore<FilterValue = any, RecordValue extends Record<string, any> = any>(): ListPageStore<FilterValue, RecordValue>;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createContext, useContext, useMemo } from "react";
|
|
3
|
+
import { ListPageStore } from "./store.js";
|
|
4
|
+
const ListPageContext = /*#__PURE__*/ createContext({});
|
|
5
|
+
const ListPageProvider = (props)=>{
|
|
6
|
+
const { state, request, children, initialValues, storageKey, floats } = props;
|
|
7
|
+
const store = useMemo(()=>new ListPageStore({
|
|
8
|
+
state,
|
|
9
|
+
initialValues,
|
|
10
|
+
request,
|
|
11
|
+
floats,
|
|
12
|
+
storageKey
|
|
13
|
+
}), []);
|
|
14
|
+
return /*#__PURE__*/ jsx(ListPageContext.Provider, {
|
|
15
|
+
value: store,
|
|
16
|
+
children: children
|
|
17
|
+
});
|
|
18
|
+
};
|
|
19
|
+
function useListPageStore() {
|
|
20
|
+
return useContext(ListPageContext);
|
|
21
|
+
}
|
|
22
|
+
export { ListPageProvider, useListPageStore };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { Key } from 'react';
|
|
2
|
+
import { ListPageFloatProps, ListPageRequest } from '../types';
|
|
3
|
+
import { ListPageStorageOption } from './types';
|
|
4
|
+
export declare class ListPageStore<FilterValue = any, RecordValue extends Record<string, any> = any> {
|
|
5
|
+
storageKey?: string;
|
|
6
|
+
filters: FilterValue;
|
|
7
|
+
tableDataRequest: ListPageRequest<FilterValue, RecordValue>;
|
|
8
|
+
floats: ListPageFloatProps[];
|
|
9
|
+
visibleFloat?: {
|
|
10
|
+
key: string;
|
|
11
|
+
record: RecordValue;
|
|
12
|
+
onCloseCallback?: true | (() => void);
|
|
13
|
+
};
|
|
14
|
+
loadingData: boolean;
|
|
15
|
+
dataSource: RecordValue[];
|
|
16
|
+
pagination: {
|
|
17
|
+
current: number;
|
|
18
|
+
pageSize: number;
|
|
19
|
+
total: number;
|
|
20
|
+
};
|
|
21
|
+
selection: {
|
|
22
|
+
selectedRowKeys: Key[];
|
|
23
|
+
selectedRows: RecordValue[];
|
|
24
|
+
};
|
|
25
|
+
listeners: Record<string, Function>;
|
|
26
|
+
constructor(options: ListPageStorageOption<FilterValue, RecordValue>);
|
|
27
|
+
submitFiltersChange(value?: FilterValue): void;
|
|
28
|
+
showFloat(key: string, record: any, onCloseCallback?: true | (() => void)): void;
|
|
29
|
+
hideFloat(): void;
|
|
30
|
+
updatePage(page: number, pageSize: number): void;
|
|
31
|
+
fetchTableData(): Promise<void>;
|
|
32
|
+
onSelectChange: (selectedRowKeys: Key[], selectedRows: RecordValue[]) => void;
|
|
33
|
+
clearSelection(): void;
|
|
34
|
+
refreshTable(): void;
|
|
35
|
+
listen(name: string, callback: (data: any) => void): void;
|
|
36
|
+
emit(name: string, data: any): void;
|
|
37
|
+
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
1
|
import { makeAutoObservable, runInAction } from "mobx";
|
|
3
|
-
import {
|
|
2
|
+
import { getDefaultValue, setDefaultValue } from "../utils/index.js";
|
|
4
3
|
class ListPageStore {
|
|
5
4
|
storageKey;
|
|
6
5
|
filters = {};
|
|
@@ -96,43 +95,4 @@ class ListPageStore {
|
|
|
96
95
|
this.listeners[name]?.(data);
|
|
97
96
|
}
|
|
98
97
|
}
|
|
99
|
-
|
|
100
|
-
const ListPageProvider = ({ children, initialValues, state, request, storageKey, floats = [] })=>{
|
|
101
|
-
const store = useMemo(()=>new ListPageStore({
|
|
102
|
-
state,
|
|
103
|
-
initialValues,
|
|
104
|
-
request,
|
|
105
|
-
floats,
|
|
106
|
-
storageKey
|
|
107
|
-
}), []);
|
|
108
|
-
return /*#__PURE__*/ jsx(ListPageContext.Provider, {
|
|
109
|
-
value: store,
|
|
110
|
-
children: children
|
|
111
|
-
});
|
|
112
|
-
};
|
|
113
|
-
function useListPageStore() {
|
|
114
|
-
return useContext(ListPageContext);
|
|
115
|
-
}
|
|
116
|
-
const getDefaultValue = (STORAGE_KEY)=>{
|
|
117
|
-
if (!STORAGE_KEY) return {
|
|
118
|
-
currentPage: 1,
|
|
119
|
-
pageSize: 10,
|
|
120
|
-
filterValues: void 0
|
|
121
|
-
};
|
|
122
|
-
const storageValue = localStorage.getItem(STORAGE_KEY);
|
|
123
|
-
const value = JSON.parse(storageValue ?? '{}');
|
|
124
|
-
return {
|
|
125
|
-
currentPage: value.currentPage || 1,
|
|
126
|
-
pageSize: value.pageSize || 10,
|
|
127
|
-
filterValues: value.filterValues || void 0
|
|
128
|
-
};
|
|
129
|
-
};
|
|
130
|
-
const setDefaultValue = (STORAGE_KEY, value)=>{
|
|
131
|
-
if (!STORAGE_KEY) return;
|
|
132
|
-
const defaultValue = getDefaultValue(STORAGE_KEY);
|
|
133
|
-
localStorage.setItem(STORAGE_KEY, JSON.stringify({
|
|
134
|
-
...defaultValue,
|
|
135
|
-
...value
|
|
136
|
-
}));
|
|
137
|
-
};
|
|
138
|
-
export { ListPageProvider, ListPageStore, useListPageStore };
|
|
98
|
+
export { ListPageStore };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { ListPageFloatProps, ListPageRequest, StateValue } from '../types';
|
|
3
|
+
export type ListPageStorageOption<FilterValue = any, RecordValue extends Record<string, any> = any> = {
|
|
4
|
+
storageKey?: string;
|
|
5
|
+
initialValues?: StateValue<FilterValue>;
|
|
6
|
+
state?: StateValue<FilterValue>;
|
|
7
|
+
request: ListPageRequest<FilterValue, RecordValue>;
|
|
8
|
+
floats?: ListPageFloatProps[];
|
|
9
|
+
};
|
|
10
|
+
export type ListPageProviderProps = ListPageStorageOption & {
|
|
11
|
+
children: ReactNode;
|
|
12
|
+
};
|
|
File without changes
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { ColumnType } from 'antd/es/table';
|
|
2
|
+
import { ListPageTableColumn } from '../components/DataTable/types';
|
|
3
|
+
export declare function useColumns<FilterValue = any, RecordValue extends Record<string, any> = any>(columns: ListPageTableColumn<FilterValue, RecordValue>[]): ColumnType<RecordValue>[];
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { useListPageStore } from "../context/index.js";
|
|
2
|
+
import { renders } from "../components/DataTable/renders/index.js";
|
|
3
|
+
function useColumns(columns) {
|
|
4
|
+
const ctx = useListPageStore();
|
|
5
|
+
return columns.map((column)=>{
|
|
6
|
+
if (!column.render && column.component) column.render = createColumnRender(column.component, column.props, ctx);
|
|
7
|
+
return column;
|
|
8
|
+
});
|
|
9
|
+
}
|
|
10
|
+
function createColumnRender(component, props, ctx) {
|
|
11
|
+
if ('string' == typeof component) {
|
|
12
|
+
const render = renders[component];
|
|
13
|
+
if (render) return (value, record, index)=>render(value, record, index, props);
|
|
14
|
+
}
|
|
15
|
+
if ('function' == typeof component) return (value, record, index)=>{
|
|
16
|
+
const render = component;
|
|
17
|
+
return render(value, record, index, ctx);
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
export { useColumns };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useMemo } from "react";
|
|
3
|
-
import { useListPageStore } from "../context/
|
|
3
|
+
import { useListPageStore } from "../context/index.js";
|
|
4
4
|
function useFloat() {
|
|
5
5
|
const store = useListPageStore();
|
|
6
6
|
const visibleFloat = store.visibleFloat;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { useListPageStore } from "../context/index.js";
|
|
3
|
+
import { HeaderSection, Title } from "../styles.js";
|
|
4
4
|
function useHeader(props) {
|
|
5
5
|
const store = useListPageStore();
|
|
6
6
|
if (!props) return false;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Pagination } from "antd";
|
|
3
|
-
import { useListPageStore } from "../context/
|
|
4
|
-
import { PaginationContainer } from "
|
|
3
|
+
import { useListPageStore } from "../context/index.js";
|
|
4
|
+
import { PaginationContainer } from "../styles.js";
|
|
5
5
|
function usePagination(props) {
|
|
6
6
|
const store = useListPageStore();
|
|
7
7
|
const ele = false === props ? null : /*#__PURE__*/ jsx(PaginationContainer, {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Button, Tooltip } from "antd";
|
|
3
|
-
import { useListPageStore } from "../context/listpage.js";
|
|
4
3
|
import styled_components from "styled-components";
|
|
4
|
+
import { useListPageStore } from "../context/index.js";
|
|
5
5
|
function useSelectionTools(rowTitleKey) {
|
|
6
6
|
const store = useListPageStore();
|
|
7
7
|
const { selectedRowKeys, selectedRows } = store.selection;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
export declare const
|
|
1
|
+
export declare const ListPageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
2
2
|
export declare const HeaderSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
3
3
|
export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
4
4
|
export declare const FilterSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
5
5
|
export declare const ToolbarSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
6
6
|
export declare const BodySection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
7
|
+
export declare const PaginationContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
8
|
+
export declare const TableContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import styled_components from "styled-components";
|
|
2
|
-
const
|
|
2
|
+
const ListPageWrapper = styled_components.div`
|
|
3
3
|
width: 100%;
|
|
4
4
|
height: 100%;
|
|
5
5
|
box-sizing: border-box;
|
|
@@ -34,4 +34,17 @@ const BodySection = styled_components.div`
|
|
|
34
34
|
overflow: hidden;
|
|
35
35
|
height: 0;
|
|
36
36
|
`;
|
|
37
|
-
|
|
37
|
+
const PaginationContainer = styled_components.div`
|
|
38
|
+
padding: 12px 16px 12px 0;
|
|
39
|
+
border-top: 1px solid #f0f0f0;
|
|
40
|
+
`;
|
|
41
|
+
const TableContainer = styled_components.div`
|
|
42
|
+
table {
|
|
43
|
+
tr:last-child {
|
|
44
|
+
td {
|
|
45
|
+
border-bottom: none;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
`;
|
|
50
|
+
export { BodySection, FilterSection, HeaderSection, ListPageWrapper, PaginationContainer, TableContainer, Title, ToolbarSection };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { JSX, ReactNode } from 'react';
|
|
2
|
+
import { FilterFormOption } from '../../components/FilterGroup';
|
|
3
|
+
import type { ListPageStore } from './context';
|
|
4
|
+
import { BaseQueryParams, PaginationData } from '../../http-client';
|
|
5
|
+
import type { FloatComponentProps } from '../../components/PageLayout/components/PageProvider/float';
|
|
6
|
+
export type StateValue<FilterValue = any> = {
|
|
7
|
+
filterValues?: FilterValue;
|
|
8
|
+
pageSize?: number;
|
|
9
|
+
currentPage?: number;
|
|
10
|
+
};
|
|
11
|
+
export type { FloatComponentProps, PageFloatProps as ListPageFloatProps, } from '../../components/PageLayout/components/PageProvider/float';
|
|
12
|
+
export type FloatRender<RecordValue extends Record<string, any> = any> = (props: FloatComponentProps<RecordValue>) => JSX.Element;
|
|
13
|
+
export type ListPageFilterProps<FilterValue = any> = {
|
|
14
|
+
labelInline?: boolean;
|
|
15
|
+
options: FilterFormOption[];
|
|
16
|
+
onReset?: () => void;
|
|
17
|
+
onChange?: (value: FilterValue) => void;
|
|
18
|
+
};
|
|
19
|
+
export type ListPageHeaderProps = {
|
|
20
|
+
title?: ReactNode;
|
|
21
|
+
extra?: ReactNode | ((ctx: ListPageStore) => ReactNode);
|
|
22
|
+
};
|
|
23
|
+
export type ListPageToolbarProps<FilterValue, RecordValue extends Record<string, any> = any> = {
|
|
24
|
+
render: (ctx: ListPageStore<FilterValue, RecordValue>) => ReactNode;
|
|
25
|
+
};
|
|
26
|
+
export type ListPageRequest<FilterValue = any, RecordValue extends Record<string, any> = any> = (pageParams: BaseQueryParams, filterValues: FilterValue) => Promise<PaginationData<RecordValue>>;
|
|
File without changes
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export declare const getDefaultValue: (STORAGE_KEY?: string) => {
|
|
2
|
+
currentPage: any;
|
|
3
|
+
pageSize: any;
|
|
4
|
+
filterValues: any;
|
|
5
|
+
};
|
|
6
|
+
export declare const setDefaultValue: (STORAGE_KEY: string, value: Partial<{
|
|
7
|
+
currentPage: number;
|
|
8
|
+
pageSize: number;
|
|
9
|
+
filterValues?: any;
|
|
10
|
+
}>) => void;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
const getDefaultValue = (STORAGE_KEY)=>{
|
|
2
|
+
if (!STORAGE_KEY) return {
|
|
3
|
+
currentPage: 1,
|
|
4
|
+
pageSize: 10,
|
|
5
|
+
filterValues: void 0
|
|
6
|
+
};
|
|
7
|
+
const storageValue = localStorage.getItem(STORAGE_KEY);
|
|
8
|
+
const value = JSON.parse(storageValue ?? '{}');
|
|
9
|
+
return {
|
|
10
|
+
currentPage: value.currentPage || 1,
|
|
11
|
+
pageSize: value.pageSize || 10,
|
|
12
|
+
filterValues: value.filterValues || void 0
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
const setDefaultValue = (STORAGE_KEY, value)=>{
|
|
16
|
+
if (!STORAGE_KEY) return;
|
|
17
|
+
const defaultValue = getDefaultValue(STORAGE_KEY);
|
|
18
|
+
localStorage.setItem(STORAGE_KEY, JSON.stringify({
|
|
19
|
+
...defaultValue,
|
|
20
|
+
...value
|
|
21
|
+
}));
|
|
22
|
+
};
|
|
23
|
+
export { getDefaultValue, setDefaultValue };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import '@ant-design/v5-patch-for-react-19';
|
|
2
2
|
export * from './components/FilterGroup';
|
|
3
|
-
export * from './components/Page';
|
|
4
3
|
export * from './components/InfiniteList';
|
|
5
4
|
export * from './components/Menu';
|
|
6
5
|
export * from './components/DataTable';
|
|
7
6
|
export * from './components/AsyncSelect';
|
|
8
7
|
export * from './components/AsyncButton';
|
|
9
8
|
export * from './components/TextOverflow';
|
|
9
|
+
export * from './components/PageLayout';
|
|
10
10
|
export * from './features/JsonEditor';
|
|
11
11
|
export * from './features/ChatClient';
|
|
12
|
+
export * from './features/ListPage';
|
|
12
13
|
export * from './http-client';
|
|
13
|
-
export * from './context';
|
package/dist/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import "@ant-design/v5-patch-for-react-19";
|
|
2
2
|
export * from "./components/FilterGroup/index.js";
|
|
3
|
-
export * from "./components/Page/index.js";
|
|
4
3
|
export * from "./components/InfiniteList/index.js";
|
|
5
4
|
export * from "./components/Menu/index.js";
|
|
6
5
|
export * from "./components/DataTable/index.js";
|
|
7
6
|
export * from "./components/AsyncSelect/index.js";
|
|
8
7
|
export * from "./components/AsyncButton/index.js";
|
|
9
8
|
export * from "./components/TextOverflow/index.js";
|
|
9
|
+
export * from "./components/PageLayout/index.js";
|
|
10
10
|
export * from "./features/JsonEditor/index.js";
|
|
11
11
|
export * from "./features/ChatClient/index.js";
|
|
12
|
+
export * from "./features/ListPage/index.js";
|
|
12
13
|
export * from "./http-client/index.js";
|
|
13
|
-
export * from "./context/index.js";
|
package/package.json
CHANGED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { TableProps } from 'antd';
|
|
2
|
-
import { ColumnType } from 'antd/es/table';
|
|
3
|
-
import { ListPageStore } from '../../context/listpage';
|
|
4
|
-
import { ColumnRender } from '../../../DataTable/components/Render';
|
|
5
|
-
import { ComponentProps, ComponentType } from '../../../DataTable/typings';
|
|
6
|
-
export interface DataTableProps<RecordValue extends Record<string, any> = any> {
|
|
7
|
-
title?: React.ReactNode;
|
|
8
|
-
rowSelectionType?: 'checkbox' | 'radio';
|
|
9
|
-
rowTitleKey?: string;
|
|
10
|
-
extra?: React.ReactNode | ((ctx: ListPageStore<any, RecordValue>) => React.ReactNode);
|
|
11
|
-
columns?: ListPageTableColumn<RecordValue>[];
|
|
12
|
-
tableProps?: Omit<TableProps<RecordValue>, 'dataSource' | 'title' | 'columns'>;
|
|
13
|
-
}
|
|
14
|
-
export interface ListPageTableColumn<RecordValue extends Record<string, any> = any, FilterValue = any> extends ColumnType<RecordValue> {
|
|
15
|
-
component?: ComponentType | ColumnRender<RecordValue, ListPageStore<FilterValue, RecordValue>>;
|
|
16
|
-
props?: ComponentProps;
|
|
17
|
-
}
|
|
18
|
-
export declare const DataTable: ((props: DataTableProps) => import("react/jsx-runtime").JSX.Element) & {
|
|
19
|
-
displayName: string;
|
|
20
|
-
};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { JSX } from 'react';
|
|
2
|
-
import { FilterFormProps } from '../../../FilterGroup/components/FilterForm';
|
|
3
|
-
export interface ListPageProps {
|
|
4
|
-
title?: React.ReactNode;
|
|
5
|
-
extra?: React.ReactNode;
|
|
6
|
-
filter?: React.ReactNode;
|
|
7
|
-
filterProps?: FilterFormProps;
|
|
8
|
-
toolbar?: React.ReactNode;
|
|
9
|
-
body?: React.ReactNode;
|
|
10
|
-
floats?: {
|
|
11
|
-
key: string;
|
|
12
|
-
content: JSX.Element;
|
|
13
|
-
}[];
|
|
14
|
-
style?: React.CSSProperties;
|
|
15
|
-
}
|
|
16
|
-
export declare const ListPage: (props: ListPageProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo } from "react";
|
|
3
|
-
import { Card } from "antd";
|
|
4
|
-
import { FilterForm } from "../../../FilterGroup/components/FilterForm/index.js";
|
|
5
|
-
import { FloatProvider } from "../../../../context/index.js";
|
|
6
|
-
import { BodySection, FilterSection, HeaderSection, ListPageContainer, Title, ToolbarSection } from "./styles.js";
|
|
7
|
-
const ListPage = (props)=>{
|
|
8
|
-
const { title, extra, filterProps, toolbar, body, style, floats } = props;
|
|
9
|
-
const filter = useMemo(()=>{
|
|
10
|
-
if (props.filter) return props.filter;
|
|
11
|
-
if (filterProps) return /*#__PURE__*/ jsx(Card, {
|
|
12
|
-
children: /*#__PURE__*/ jsx(FilterForm, {
|
|
13
|
-
...filterProps
|
|
14
|
-
})
|
|
15
|
-
});
|
|
16
|
-
return null;
|
|
17
|
-
}, [
|
|
18
|
-
props.filter,
|
|
19
|
-
filterProps
|
|
20
|
-
]);
|
|
21
|
-
const page = /*#__PURE__*/ jsxs(ListPageContainer, {
|
|
22
|
-
style: style,
|
|
23
|
-
children: [
|
|
24
|
-
/*#__PURE__*/ jsxs(HeaderSection, {
|
|
25
|
-
children: [
|
|
26
|
-
/*#__PURE__*/ jsx(Title, {
|
|
27
|
-
children: title
|
|
28
|
-
}),
|
|
29
|
-
/*#__PURE__*/ jsx("div", {
|
|
30
|
-
children: extra
|
|
31
|
-
})
|
|
32
|
-
]
|
|
33
|
-
}),
|
|
34
|
-
filter && /*#__PURE__*/ jsx(FilterSection, {
|
|
35
|
-
children: filter
|
|
36
|
-
}),
|
|
37
|
-
toolbar && /*#__PURE__*/ jsx(ToolbarSection, {
|
|
38
|
-
children: toolbar
|
|
39
|
-
}),
|
|
40
|
-
/*#__PURE__*/ jsx(BodySection, {
|
|
41
|
-
children: body
|
|
42
|
-
})
|
|
43
|
-
]
|
|
44
|
-
});
|
|
45
|
-
if (!floats) return page;
|
|
46
|
-
return /*#__PURE__*/ jsx(FloatProvider, {
|
|
47
|
-
floats: floats,
|
|
48
|
-
children: page
|
|
49
|
-
});
|
|
50
|
-
};
|
|
51
|
-
export { ListPage };
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { ReactNode, RefObject } from 'react';
|
|
2
|
-
import { FloatRender, ListPageStore, TableRequest } from '../../context/listpage';
|
|
3
|
-
import { FilterFormOption } from '../../../FilterGroup';
|
|
4
|
-
import { DataTableProps } from './DataTable';
|
|
5
|
-
import { HeaderProps } from '../../hooks/useHeader';
|
|
6
|
-
import { ListPageContext } from '../..';
|
|
7
|
-
export interface ListPageProps<FilterValue = any, RecordValue extends Record<string, any> = any> {
|
|
8
|
-
pageRef?: RefObject<ListPageContext<FilterValue, RecordValue>>;
|
|
9
|
-
styles?: {
|
|
10
|
-
page?: React.CSSProperties;
|
|
11
|
-
};
|
|
12
|
-
storageKey?: string;
|
|
13
|
-
request: TableRequest<FilterValue, RecordValue>;
|
|
14
|
-
floats?: {
|
|
15
|
-
key: string;
|
|
16
|
-
render: FloatRender<RecordValue>;
|
|
17
|
-
}[];
|
|
18
|
-
state?: {
|
|
19
|
-
filterValues?: FilterValue;
|
|
20
|
-
pageSize?: number;
|
|
21
|
-
currentPage?: number;
|
|
22
|
-
};
|
|
23
|
-
initialValues?: {
|
|
24
|
-
filterValues?: FilterValue;
|
|
25
|
-
pageSize?: number;
|
|
26
|
-
currentPage?: number;
|
|
27
|
-
};
|
|
28
|
-
header?: HeaderProps;
|
|
29
|
-
filter?: {
|
|
30
|
-
labelInline?: boolean;
|
|
31
|
-
options: FilterFormOption[];
|
|
32
|
-
onReset?: () => void;
|
|
33
|
-
onChange?: (value: FilterValue) => void;
|
|
34
|
-
};
|
|
35
|
-
toolbar?: {
|
|
36
|
-
render: (ctx: ListPageStore<FilterValue, RecordValue>) => ReactNode;
|
|
37
|
-
};
|
|
38
|
-
table: DataTableProps<RecordValue>;
|
|
39
|
-
}
|
|
40
|
-
export declare const PureListPage: ((props: ListPageProps) => import("react/jsx-runtime").JSX.Element) & {
|
|
41
|
-
displayName: string;
|
|
42
|
-
};
|
|
43
|
-
export declare const ListPage: (props: ListPageProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { SiderProps } from 'antd';
|
|
3
|
-
export interface PageContainerProps {
|
|
4
|
-
sider?: React.ReactNode;
|
|
5
|
-
header?: React.ReactNode;
|
|
6
|
-
content?: React.ReactNode;
|
|
7
|
-
logo?: React.ReactNode;
|
|
8
|
-
siderProps?: SiderProps;
|
|
9
|
-
}
|
|
10
|
-
export declare const PageContainer: ({ logo, sider, header, content, siderProps, }: PageContainerProps) => import("react/jsx-runtime").JSX.Element;
|