namirasoft-site-react 1.3.137 → 1.3.138
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/App.js +9 -1
- package/dist/App.js.map +1 -1
- package/dist/components/NSPagination.d.ts +4 -2
- package/dist/components/NSPagination.js +33 -20
- package/dist/components/NSPagination.js.map +1 -1
- package/dist/components/NSTable.d.ts +4 -0
- package/dist/components/NSTable.js +5 -2
- package/dist/components/NSTable.js.map +1 -1
- package/package.json +1 -1
- package/src/App.tsx +10 -0
- package/src/components/NSPagination.tsx +82 -46
- package/src/components/NSTable.tsx +11 -4
package/dist/App.js
CHANGED
|
@@ -79,6 +79,14 @@ export function App() {
|
|
|
79
79
|
message: "Lorem ipsum dolor sit amet, consetetur ",
|
|
80
80
|
cent: "24",
|
|
81
81
|
status: "Done"
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
id: 3,
|
|
85
|
+
project: "Namirasoft Account",
|
|
86
|
+
level: "Debug",
|
|
87
|
+
message: "Lorem ipsum dolor sit amet, consetetur ",
|
|
88
|
+
cent: "24",
|
|
89
|
+
status: "Done"
|
|
82
90
|
}
|
|
83
91
|
];
|
|
84
92
|
function getCell(row, column) {
|
|
@@ -93,6 +101,6 @@ export function App() {
|
|
|
93
101
|
{ title: 'Price History', getContent: content2 },
|
|
94
102
|
{ title: 'Price Estimator', getContent: content3 }
|
|
95
103
|
];
|
|
96
|
-
return (_jsx(_Fragment, { children: _jsxs(NSLayoutAction, { notifications: [], actions: actions, title: 'Test2 test2', description: 'Lorem lorem orem Lorem lorem orem Lorem lorem orem Lorem lorem orem Lorem lorem orem Lorem lorem orem ', scope: 'Namirasoft Account Console', logo: 'https://static.namirasoft.com/image/namirasoft/site/logo/base.png', children: [_jsx("div", { children: _jsx(NSTable, { ref: table, columns: columns, rows: rows, getCell: getCell, getColumnAttributes: () => { return {}; }, getRowKey: row => row.id.toString(), onChanged: onChange }) }), _jsx(NSBoxIPV6, { title: 'IPV6', required: false }), _jsx(NSBoxIPV4, { title: 'IPV4', required: false }), _jsx(NSBoxBoolean, { title: 'I4', required: false, name: 'salam ' }), _jsx(NSTabPage, { tabs: tabs }), _jsx(NSFilterBox, {})] }) }));
|
|
104
|
+
return (_jsx(_Fragment, { children: _jsxs(NSLayoutAction, { notifications: [], actions: actions, title: 'Test2 test2', description: 'Lorem lorem orem Lorem lorem orem Lorem lorem orem Lorem lorem orem Lorem lorem orem Lorem lorem orem ', scope: 'Namirasoft Account Console', logo: 'https://static.namirasoft.com/image/namirasoft/site/logo/base.png', children: [_jsx("div", { children: _jsx(NSTable, { ref: table, columns: columns, rows: rows, getCell: getCell, getColumnAttributes: () => { return {}; }, getRowKey: row => row.id.toString(), onChanged: onChange, pageSize: 3, totalItems: 100 }) }), _jsx(NSBoxIPV6, { title: 'IPV6', required: false }), _jsx(NSBoxIPV4, { title: 'IPV4', required: false }), _jsx(NSBoxBoolean, { title: 'I4', required: false, name: 'salam ' }), _jsx(NSTabPage, { tabs: tabs }), _jsx(NSFilterBox, {})] }) }));
|
|
97
105
|
}
|
|
98
106
|
//# sourceMappingURL=App.js.map
|
package/dist/App.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { IBaseComponentProps } from '../props/IBaseComponentProps';
|
|
2
2
|
export interface INSPaginationProps extends IBaseComponentProps {
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
pageSize: number;
|
|
4
|
+
totalItems: number;
|
|
5
|
+
currentPage: number;
|
|
6
|
+
onPageChange: (page: number) => void;
|
|
5
7
|
}
|
|
6
8
|
export declare function NSPagination(props: INSPaginationProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,28 +2,41 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import Styles from './NSPagination.module.css';
|
|
3
3
|
export function NSPagination(props) {
|
|
4
4
|
var _a;
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
5
|
+
const { pageSize, totalItems, currentPage, onPageChange } = props;
|
|
6
|
+
const totalPages = Math.ceil(totalItems / pageSize);
|
|
7
|
+
const windowSize = 2;
|
|
8
|
+
const minPage = Math.max(2, currentPage - windowSize);
|
|
9
|
+
const maxPage = Math.min(currentPage + windowSize, totalPages - 1);
|
|
10
|
+
const pages = [];
|
|
11
|
+
const pushPage = (page) => {
|
|
12
|
+
pages.push(_jsx("div", { className: `${Styles.ns_select_number_parent}`, children: _jsx("a", { href: "#", className: `${Styles.ns_paginate_link} ${page === currentPage ? Styles.ns_select_number : ''}`, onClick: (e) => {
|
|
13
|
+
e.preventDefault();
|
|
14
|
+
onPageChange(page);
|
|
15
|
+
}, children: page }) }, page));
|
|
16
16
|
};
|
|
17
|
-
|
|
17
|
+
pages.push(_jsx("div", { children: _jsx("a", { href: "#", onClick: (e) => {
|
|
18
|
+
e.preventDefault();
|
|
19
|
+
if (currentPage > 1)
|
|
20
|
+
onPageChange(currentPage - 1);
|
|
21
|
+
}, children: _jsx("img", { src: "https://static.namirasoft.com/image/concept/arrow/left/white-blue.svg", alt: "left_vector", width: 32, height: 32 }) }) }, "prev"));
|
|
18
22
|
pushPage(1);
|
|
19
|
-
if (
|
|
20
|
-
|
|
21
|
-
|
|
23
|
+
if (currentPage > windowSize + 2) {
|
|
24
|
+
pages.push(_jsx("div", { children: _jsx("a", { href: "#", className: `${Styles.ns_paginate_link}`, onClick: (e) => e.preventDefault(), children: "..." }) }, "ellipsis1"));
|
|
25
|
+
}
|
|
26
|
+
for (let i = minPage; i <= maxPage; i++) {
|
|
22
27
|
pushPage(i);
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
+
}
|
|
29
|
+
if (currentPage < totalPages - windowSize - 1) {
|
|
30
|
+
pages.push(_jsx("div", { children: _jsx("a", { href: "#", className: `${Styles.ns_paginate_link}`, onClick: (e) => e.preventDefault(), children: "..." }) }, "ellipsis2"));
|
|
31
|
+
}
|
|
32
|
+
if (totalPages > 1) {
|
|
33
|
+
pushPage(totalPages);
|
|
34
|
+
}
|
|
35
|
+
pages.push(_jsx("div", { children: _jsx("a", { href: "#", onClick: (e) => {
|
|
36
|
+
e.preventDefault();
|
|
37
|
+
if (currentPage < totalPages)
|
|
38
|
+
onPageChange(currentPage + 1);
|
|
39
|
+
}, children: _jsx("img", { src: "https://static.namirasoft.com/image/concept/arrow/right/white-blue.svg", width: 32, height: 32, alt: "right_vector" }) }) }, "next"));
|
|
40
|
+
return (_jsx("div", { id: props.id, className: `${Styles.ns_pagination_container} ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(' ')}`, style: props.style, children: pages }));
|
|
28
41
|
}
|
|
29
42
|
//# sourceMappingURL=NSPagination.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSPagination.js","sourceRoot":"","sources":["../../src/components/NSPagination.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"NSPagination.js","sourceRoot":"","sources":["../../src/components/NSPagination.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,6 +6,8 @@ export interface INSTableProps<RowType> extends IBaseComponentProps {
|
|
|
6
6
|
[key: string]: string;
|
|
7
7
|
};
|
|
8
8
|
rows: RowType[];
|
|
9
|
+
pageSize: number;
|
|
10
|
+
totalItems: number;
|
|
9
11
|
getRowKey: (row: RowType, rowIndex: number) => string;
|
|
10
12
|
getColumnAttributes?: (column: string, columnIndex: number) => {
|
|
11
13
|
[key: string]: string;
|
|
@@ -21,6 +23,7 @@ export interface NSTableState<RowType> {
|
|
|
21
23
|
};
|
|
22
24
|
rows: RowType[];
|
|
23
25
|
title?: string;
|
|
26
|
+
currentPage: number;
|
|
24
27
|
model: {
|
|
25
28
|
show: boolean;
|
|
26
29
|
description?: string;
|
|
@@ -36,5 +39,6 @@ export declare class NSTable<RowType> extends Component<INSTableProps<RowType>,
|
|
|
36
39
|
getSearchValue(): string;
|
|
37
40
|
showModal(description: string): void;
|
|
38
41
|
hideModal(): void;
|
|
42
|
+
onPageChange: (page: number) => void;
|
|
39
43
|
render(): import("react/jsx-runtime").JSX.Element;
|
|
40
44
|
}
|
|
@@ -11,7 +11,10 @@ import { NSModal } from './NSModal';
|
|
|
11
11
|
export class NSTable extends Component {
|
|
12
12
|
constructor(props) {
|
|
13
13
|
super(props);
|
|
14
|
-
this.
|
|
14
|
+
this.onPageChange = (page) => {
|
|
15
|
+
this.setState({ currentPage: page });
|
|
16
|
+
};
|
|
17
|
+
this.state = { columns: props.columns, rows: props.rows, currentPage: 1, model: { show: false } };
|
|
15
18
|
this.search = React.createRef();
|
|
16
19
|
}
|
|
17
20
|
setColumns(columns) {
|
|
@@ -62,7 +65,7 @@ export class NSTable extends Component {
|
|
|
62
65
|
if (!overided)
|
|
63
66
|
this.showModal(getCell(row, column, rowIndex, columnIndex));
|
|
64
67
|
};
|
|
65
|
-
return (_jsxs("div", { id: this.props.id, className: `${Styles.ns_project_list_container} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsx(NSBoxSearch, { title: "Search", required: false, onChanged: this.props.onChanged, ref: this.search }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("table", { className: Styles.ns_table, children: [_jsx("thead", { className: Styles.ns_thead, children: _jsx("tr", { children: column_keys.map(column_key => _jsx("th", { scope: "col", onClick: (e) => modalTitle(e), children: this.state.columns[column_key] }, column_key)) }) }), _jsx("tbody", { className: Styles.ns_tbody, children: this.state.rows.map((row, rowIndex) => _jsx("tr", { onClick: (e) => { onRowClick(e, row, rowIndex); }, children: column_keys.map((column, columnIndex) => (_jsx("td", Object.assign({}, getColumnAttributes(column, columnIndex), { "data-label": `${this.state.columns[column]} : `, onClick: (e) => { onCellClick(e, row, column, rowIndex, columnIndex); }, children: getCell(row, column, rowIndex, columnIndex) })))) }, this.props.getRowKey(row, rowIndex))) })] }), _jsx(NSSpace, { size: NSSpaceSizeType.MICRO }), _jsxs("section", { className: Styles.ns_pagination_button, children: [_jsx(NSPagination, {
|
|
68
|
+
return (_jsxs("div", { id: this.props.id, className: `${Styles.ns_project_list_container} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsx(NSBoxSearch, { title: "Search", required: false, onChanged: this.props.onChanged, ref: this.search }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("table", { className: Styles.ns_table, children: [_jsx("thead", { className: Styles.ns_thead, children: _jsx("tr", { children: column_keys.map(column_key => _jsx("th", { scope: "col", onClick: (e) => modalTitle(e), children: this.state.columns[column_key] }, column_key)) }) }), _jsx("tbody", { className: Styles.ns_tbody, children: this.state.rows.map((row, rowIndex) => _jsx("tr", { onClick: (e) => { onRowClick(e, row, rowIndex); }, children: column_keys.map((column, columnIndex) => (_jsx("td", Object.assign({}, getColumnAttributes(column, columnIndex), { "data-label": `${this.state.columns[column]} : `, onClick: (e) => { onCellClick(e, row, column, rowIndex, columnIndex); }, children: getCell(row, column, rowIndex, columnIndex) })))) }, this.props.getRowKey(row, rowIndex))) })] }), _jsx(NSSpace, { size: NSSpaceSizeType.MICRO }), _jsxs("section", { className: Styles.ns_pagination_button, children: [_jsx(NSPagination, { pageSize: this.props.pageSize, currentPage: this.state.currentPage, totalItems: this.props.totalItems, onPageChange: this.onPageChange }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("div", { className: Styles.ns_button, children: [_jsx(NSButton, { title: 'Export', icon: { src: "https://static.namirasoft.com/image/concept/export/blue.svg" }, onClick: () => { }, style: { border: '1px solid rgba(255, 148, 50, 1)', width: "128px" } }), _jsx(NSButton, { title: 'Refresh', icon: { src: "https://static.namirasoft.com/image/concept/export/blue.svg" }, onClick: () => { }, style: { border: '1px solid rgba(3, 119, 255, 1)', width: "128px" } })] })] }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsx(NSModal, { show: this.state.model.show, description: this.state.model.description, onClose: () => { this.hideModal(); }, title: this.state.title })] }));
|
|
66
69
|
}
|
|
67
70
|
}
|
|
68
71
|
//# sourceMappingURL=NSTable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSTable.js","sourceRoot":"","sources":["../../src/components/NSTable.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"NSTable.js","sourceRoot":"","sources":["../../src/components/NSTable.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/App.tsx
CHANGED
|
@@ -90,6 +90,14 @@ export function App()
|
|
|
90
90
|
message: "Lorem ipsum dolor sit amet, consetetur ",
|
|
91
91
|
cent: "24",
|
|
92
92
|
status: "Done"
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
id: 3,
|
|
96
|
+
project: "Namirasoft Account",
|
|
97
|
+
level: "Debug",
|
|
98
|
+
message: "Lorem ipsum dolor sit amet, consetetur ",
|
|
99
|
+
cent: "24",
|
|
100
|
+
status: "Done"
|
|
93
101
|
}
|
|
94
102
|
]
|
|
95
103
|
interface App
|
|
@@ -134,6 +142,8 @@ export function App()
|
|
|
134
142
|
getColumnAttributes={() => { return {} }}
|
|
135
143
|
getRowKey={row => row.id.toString()}
|
|
136
144
|
onChanged={onChange}
|
|
145
|
+
pageSize={3}
|
|
146
|
+
totalItems={100}
|
|
137
147
|
/>
|
|
138
148
|
</div>
|
|
139
149
|
<NSBoxIPV6
|
|
@@ -3,79 +3,115 @@ import Styles from './NSPagination.module.css';
|
|
|
3
3
|
|
|
4
4
|
export interface INSPaginationProps extends IBaseComponentProps
|
|
5
5
|
{
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
pageSize: number;
|
|
7
|
+
totalItems: number;
|
|
8
|
+
currentPage: number;
|
|
9
|
+
onPageChange: (page: number) => void;
|
|
8
10
|
}
|
|
9
11
|
|
|
10
12
|
export function NSPagination(props: INSPaginationProps)
|
|
11
13
|
{
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
const { pageSize, totalItems, currentPage, onPageChange } = props;
|
|
15
|
+
const totalPages = Math.ceil(totalItems / pageSize);
|
|
16
|
+
const windowSize = 2;
|
|
17
|
+
const minPage = Math.max(2, currentPage - windowSize);
|
|
18
|
+
const maxPage = Math.min(currentPage + windowSize, totalPages - 1);
|
|
19
|
+
const pages = [];
|
|
20
|
+
|
|
21
|
+
const pushPage = (page: number) =>
|
|
19
22
|
{
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
23
|
+
pages.push(
|
|
24
|
+
<div key={page} className={`${Styles.ns_select_number_parent}`}>
|
|
25
|
+
<a
|
|
26
|
+
href="#"
|
|
27
|
+
className={`${Styles.ns_paginate_link} ${page === currentPage ? Styles.ns_select_number : ''}`}
|
|
28
|
+
onClick={(e) =>
|
|
29
|
+
{
|
|
30
|
+
e.preventDefault();
|
|
31
|
+
onPageChange(page);
|
|
32
|
+
}}
|
|
33
|
+
>
|
|
34
|
+
{page}
|
|
35
|
+
</a>
|
|
36
|
+
</div>
|
|
37
|
+
);
|
|
32
38
|
};
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
39
|
+
//prev
|
|
40
|
+
pages.push(
|
|
41
|
+
<div key="prev">
|
|
42
|
+
<a
|
|
43
|
+
href="#"
|
|
44
|
+
onClick={(e) =>
|
|
45
|
+
{
|
|
46
|
+
e.preventDefault();
|
|
47
|
+
if (currentPage > 1)
|
|
48
|
+
onPageChange(currentPage - 1);
|
|
49
|
+
}}
|
|
50
|
+
>
|
|
36
51
|
<img
|
|
37
|
-
src=
|
|
38
|
-
alt=
|
|
52
|
+
src="https://static.namirasoft.com/image/concept/arrow/left/white-blue.svg"
|
|
53
|
+
alt="left_vector"
|
|
39
54
|
width={32}
|
|
40
55
|
height={32}
|
|
41
56
|
/>
|
|
42
57
|
</a>
|
|
43
58
|
</div>
|
|
44
59
|
);
|
|
60
|
+
//FirstPage
|
|
45
61
|
pushPage(1);
|
|
46
|
-
if (
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
62
|
+
if (currentPage > windowSize + 2)
|
|
63
|
+
{
|
|
64
|
+
pages.push(
|
|
65
|
+
<div key="ellipsis1">
|
|
66
|
+
<a href="#" className={`${Styles.ns_paginate_link}`} onClick={(e) => e.preventDefault()}>...</a>
|
|
50
67
|
</div>
|
|
51
68
|
);
|
|
52
|
-
|
|
69
|
+
}
|
|
70
|
+
for (let i = minPage; i <= maxPage; i++)
|
|
71
|
+
{
|
|
53
72
|
pushPage(i);
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
73
|
+
}
|
|
74
|
+
if (currentPage < totalPages - windowSize - 1)
|
|
75
|
+
{
|
|
76
|
+
pages.push(
|
|
77
|
+
<div key="ellipsis2">
|
|
78
|
+
<a href="#" className={`${Styles.ns_paginate_link}`} onClick={(e) => e.preventDefault()}>...</a>
|
|
58
79
|
</div>
|
|
59
80
|
);
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
81
|
+
}
|
|
82
|
+
//LastPage
|
|
83
|
+
if (totalPages > 1)
|
|
84
|
+
{
|
|
85
|
+
pushPage(totalPages);
|
|
86
|
+
}
|
|
87
|
+
//next
|
|
88
|
+
pages.push(
|
|
89
|
+
<div key="next">
|
|
90
|
+
<a
|
|
91
|
+
href="#"
|
|
92
|
+
onClick={(e) =>
|
|
93
|
+
{
|
|
94
|
+
e.preventDefault();
|
|
95
|
+
if (currentPage < totalPages)
|
|
96
|
+
onPageChange(currentPage + 1);
|
|
97
|
+
}}
|
|
98
|
+
>
|
|
64
99
|
<img
|
|
65
|
-
src=
|
|
100
|
+
src="https://static.namirasoft.com/image/concept/arrow/right/white-blue.svg"
|
|
66
101
|
width={32}
|
|
67
102
|
height={32}
|
|
68
|
-
alt=
|
|
103
|
+
alt="right_vector"
|
|
69
104
|
/>
|
|
70
105
|
</a>
|
|
71
106
|
</div>
|
|
72
107
|
);
|
|
73
|
-
|
|
74
108
|
return (
|
|
75
|
-
<div
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
{
|
|
109
|
+
<div
|
|
110
|
+
id={props.id}
|
|
111
|
+
className={`${Styles.ns_pagination_container} ${props.classList?.join(' ')}`}
|
|
112
|
+
style={props.style}
|
|
113
|
+
>
|
|
114
|
+
{pages}
|
|
79
115
|
</div>
|
|
80
116
|
);
|
|
81
117
|
}
|
|
@@ -14,19 +14,22 @@ export interface INSTableProps<RowType> extends IBaseComponentProps
|
|
|
14
14
|
{
|
|
15
15
|
columns: { [key: string]: string };
|
|
16
16
|
rows: RowType[];
|
|
17
|
+
pageSize: number;
|
|
18
|
+
totalItems:number;
|
|
17
19
|
getRowKey: (row: RowType, rowIndex: number) => string;
|
|
18
20
|
getColumnAttributes?: (column: string, columnIndex: number) => { [key: string]: string };
|
|
19
21
|
getCell?: (row: RowType, column: string, rowIndex: number, columnIndex: number) => any;
|
|
20
22
|
onRowClick?: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: RowType, rowIndex: number) => void;
|
|
21
23
|
onCellClick?: (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, row: RowType, column: string, rowIndex: number, columnIndex: number) => boolean | undefined;
|
|
22
|
-
onChanged?: () => void
|
|
24
|
+
onChanged?: () => void;
|
|
23
25
|
}
|
|
24
26
|
|
|
25
27
|
export interface NSTableState<RowType>
|
|
26
28
|
{
|
|
27
29
|
columns: { [key: string]: string };
|
|
28
30
|
rows: RowType[];
|
|
29
|
-
title?: string
|
|
31
|
+
title?: string;
|
|
32
|
+
currentPage: number,
|
|
30
33
|
model: {
|
|
31
34
|
show: boolean;
|
|
32
35
|
description?: string;
|
|
@@ -40,7 +43,7 @@ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableS
|
|
|
40
43
|
constructor(props: INSTableProps<RowType>)
|
|
41
44
|
{
|
|
42
45
|
super(props);
|
|
43
|
-
this.state = { columns: props.columns, rows: props.rows, model: { show: false } };
|
|
46
|
+
this.state = { columns: props.columns, rows: props.rows, currentPage: 1, model: { show: false } };
|
|
44
47
|
this.search = React.createRef<NSBoxSearch>();
|
|
45
48
|
}
|
|
46
49
|
setColumns(columns: { [key: string]: string })
|
|
@@ -63,6 +66,10 @@ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableS
|
|
|
63
66
|
{
|
|
64
67
|
this.setState({ model: { show: false } });
|
|
65
68
|
}
|
|
69
|
+
onPageChange = (page: number) =>
|
|
70
|
+
{
|
|
71
|
+
this.setState({ currentPage: page });
|
|
72
|
+
}
|
|
66
73
|
override render()
|
|
67
74
|
{
|
|
68
75
|
let modalTitle = (e: any) =>
|
|
@@ -133,7 +140,7 @@ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableS
|
|
|
133
140
|
</table>
|
|
134
141
|
<NSSpace size={NSSpaceSizeType.MICRO} />
|
|
135
142
|
<section className={Styles.ns_pagination_button}>
|
|
136
|
-
<NSPagination
|
|
143
|
+
<NSPagination pageSize={this.props.pageSize} currentPage={this.state.currentPage} totalItems={this.props.totalItems} onPageChange={this.onPageChange} />
|
|
137
144
|
<NSSpace size={NSSpaceSizeType.SMALL} />
|
|
138
145
|
<div className={Styles.ns_button}>
|
|
139
146
|
<NSButton title='Export' icon={{ src: "https://static.namirasoft.com/image/concept/export/blue.svg" }} onClick={() => { }} style={{ border: '1px solid rgba(255, 148, 50, 1)', width: "128px" }} />
|