namirasoft-site-react 1.3.251 → 1.3.254

package/src/components/NSPagination.tsx

@@ -1,154 +1,191 @@
-import { useRef, useState } from 'react';
+import { Component } from 'react';
 import { IBaseComponentProps } from '../props/IBaseComponentProps';
 import { NSBoxEnum } from './NSBoxEnum';
 import Styles from './NSPagination.module.css';
+import React from "react";
 
 export interface INSPaginationProps extends IBaseComponentProps
 {
     totalItems: number;
-    currentPage: number;
     onPageChange: (page: number, size: number) => void;
 }
 
 interface INSPaginationState
 {
+    currentPage: number;
     pageSize: number;
 }
 
 let pageSizes = [25, 50, 100, 200, 500];
 
-export function NSPagination(props: INSPaginationProps)
+export class NSPagination extends Component<INSPaginationProps, INSPaginationState>
 {
-    const PageSize = useRef<NSBoxEnum>(null);
-
-    let [state, setState] = useState<INSPaginationState>({ pageSize: pageSizes[0] });
-    let pageSize = state.pageSize;
+    PageSize = React.createRef<NSBoxEnum>();
+    constructor(props: INSPaginationProps)
+    {
+        super(props);
+        this.state = { currentPage: 1, pageSize: pageSizes[0] };
+    }
+    getCurrentPage(): number
+    {
+        return this.state.currentPage;
+    }
+    getPageSize(): number
+    {
+        return this.state.pageSize;
+    }
+    override render()
+    {
+        let pageSize = this.state.pageSize;
 
-    const { totalItems, currentPage, onPageChange } = props;
-    const totalPages = Math.ceil(totalItems / pageSize);
-    const windowSize = 2;
-    const minPage = Math.max(2, currentPage - windowSize);
-    const maxPage = Math.min(currentPage + windowSize, totalPages - 1);
-    const current_min = Math.min(totalItems, (currentPage - 1) * pageSize + 1);
-    const current_max = Math.min(totalItems, currentPage * pageSize);
-    const pages = [];
+        const { totalItems, onPageChange } = this.props;
+        const totalPages = Math.ceil(totalItems / pageSize);
+        const windowSize = 2;
+        const minPage = Math.max(2, this.state.currentPage - windowSize);
+        const maxPage = Math.min(this.state.currentPage + windowSize, totalPages - 1);
+        const current_min = Math.min(totalItems, (this.state.currentPage - 1) * pageSize + 1);
+        const current_max = Math.min(totalItems, this.state.currentPage * pageSize);
+        const pages = [];
 
-    const pushPage = (page: number) =>
-    {
+        const pushPage = (page: number) =>
+        {
+            pages.push(
+                <div key={page} className={`${Styles.ns_select_number_parent}`}>
+                    <a
+                        href="#"
+                        className={`${Styles.ns_paginate_link} ${page === this.state.currentPage ? Styles.ns_select_number : ''}`}
+                        onClick={(e) =>
+                        {
+                            e.preventDefault();
+                            let currentPage = page;
+                            let pageSize = this.state.pageSize;
+                            this.setState({ currentPage, pageSize }, () =>
+                            {
+                                onPageChange(currentPage, pageSize);
+                            });
+                        }}
+                    >
+                        {page}
+                    </a>
+                </div>
+            );
+        };
+        //prev
         pages.push(
-            <div key={page} className={`${Styles.ns_select_number_parent}`}>
+            <div key="prev">
                 <a
                     href="#"
-                    className={`${Styles.ns_paginate_link} ${page === currentPage ? Styles.ns_select_number : ''}`}
                     onClick={(e) =>
                     {
                         e.preventDefault();
-                        onPageChange(page, state.pageSize);
+                        if (this.state.currentPage > 1)
+                        {
+                            let currentPage = this.state.currentPage - 1;
+                            let pageSize = this.state.pageSize;
+                            this.setState({ currentPage, pageSize }, () =>
+                            {
+                                onPageChange(currentPage, pageSize);
+                            });
+                        }
                     }}
                 >
-                    {page}
+                    <img
+                        style={{ margin: "0 8px 0 0" }}
+                        src="https://static.namirasoft.com/image/concept/arrow/left/white-blue.svg"
+                        alt="left_vector"
+                        width={32}
+                        height={32}
+                    />
                 </a>
             </div>
         );
-    };
-    //prev
-    pages.push(
-        <div key="prev">
-            <a
-                href="#"
-                onClick={(e) =>
-                {
-                    e.preventDefault();
-                    if (currentPage > 1)
-                        onPageChange(currentPage - 1, state.pageSize);
-                }}
-            >
-                <img
-                    style={{ margin: "0 8px 0 0" }}
-                    src="https://static.namirasoft.com/image/concept/arrow/left/white-blue.svg"
-                    alt="left_vector"
-                    width={32}
-                    height={32}
-                />
-            </a>
-        </div>
-    );
-    //FirstPage
-    pushPage(1);
-    if (currentPage > windowSize + 2)
-    {
-        pages.push(
-            <div key="ellipsis1" className={Styles.ns_pagination_left_ellipses}>
-                <a href="#" className={`${Styles.ns_paginate_link}`} onClick={(e) => e.preventDefault()}>...</a>
-            </div>
-        );
-    }
-    for (let i = minPage; i <= maxPage; i++)
-        pushPage(i);
-    if (currentPage < totalPages - windowSize - 1)
-    {
+        //FirstPage
+        pushPage(1);
+        if (this.state.currentPage > windowSize + 2)
+        {
+            pages.push(
+                <div key="ellipsis1" className={Styles.ns_pagination_left_ellipses}>
+                    <a href="#" className={`${Styles.ns_paginate_link}`} onClick={(e) => e.preventDefault()}>...</a>
+                </div>
+            );
+        }
+        for (let i = minPage; i <= maxPage; i++)
+            pushPage(i);
+        if (this.state.currentPage < totalPages - windowSize - 1)
+        {
+            pages.push(
+                <div key="ellipsis2" className={Styles.ns_pagination_right_ellipses}>
+                    <a href="#" className={`${Styles.ns_paginate_link}`} onClick={(e) => e.preventDefault()}>...</a>
+                </div>
+            );
+        }
+        //LastPage
+        if (totalPages > 1)
+        {
+            pushPage(totalPages);
+        }
+        //next
         pages.push(
-            <div key="ellipsis2" className={Styles.ns_pagination_right_ellipses}>
-                <a href="#" className={`${Styles.ns_paginate_link}`} onClick={(e) => e.preventDefault()}>...</a>
+            <div key="next">
+                <a
+                    href="#"
+                    onClick={(e) =>
+                    {
+                        e.preventDefault();
+                        if (this.state.currentPage < totalPages)
+                        {
+                            let currentPage = this.state.currentPage + 1;
+                            let pageSize = this.state.pageSize;
+                            this.setState({ currentPage, pageSize }, () =>
+                            {
+                                onPageChange(currentPage, pageSize);
+                            });
+                        }
+                    }}
+                >
+                    <img
+                        style={{ margin: "0 0 0 8px" }}
+                        src="https://static.namirasoft.com/image/concept/arrow/right/white-blue.svg"
+                        width={32}
+                        height={32}
+                        alt="right_vector"
+                    />
+                </a>
             </div>
         );
-    }
-    //LastPage
-    if (totalPages > 1)
-    {
-        pushPage(totalPages);
-    }
-    //next
-    pages.push(
-        <div key="next">
-            <a
-                href="#"
-                onClick={(e) =>
-                {
-                    e.preventDefault();
-                    if (currentPage < totalPages)
-                        onPageChange(currentPage + 1, state.pageSize);
-                }}
-            >
-                <img
-                    style={{ margin: "0 0 0 8px" }}
-                    src="https://static.namirasoft.com/image/concept/arrow/right/white-blue.svg"
-                    width={32}
-                    height={32}
-                    alt="right_vector"
-                />
-            </a>
-        </div>
-    );
-    return (
-        <>
-            <div
-                id={props.id}
-                className={`${Styles.ns_pagination_container} ${props.classList?.join(' ')}`}
-                style={props.style}
-            >
-                {pages}
-                <div className={Styles.ns_pagination_info}>
-                    <div style={{ width: 70 }}>
-                        <NSBoxEnum
-                            ref={PageSize}
-                            title=''
-                            multiple={false}
-                            required={false}
-                            options={pageSizes.map(pagesize => { return { desc: pagesize.toString(), value: pagesize.toString() } })}
-                            onChange={() =>
-                            {
-                                setState({ pageSize: parseInt(PageSize.current?.getValue() ?? pageSizes[0].toString()) });
-                                onPageChange(currentPage + 1, state.pageSize);
-                            }}
-                        />
+        return (
+            <>
+                <div
+                    id={this.props.id}
+                    className={`${Styles.ns_pagination_container} ${this.props.classList?.join(' ')}`}
+                    style={this.props.style}
+                >
+                    {pages}
+                    <div className={Styles.ns_pagination_info}>
+                        <div style={{ width: 70 }}>
+                            <NSBoxEnum
+                                ref={this.PageSize}
+                                title=''
+                                multiple={false}
+                                required={false}
+                                options={pageSizes.map(pagesize => { return { desc: pagesize.toString(), value: pagesize.toString() } })}
+                                onChanged={() =>
+                                {
+                                    let currentPage = this.state.currentPage;
+                                    let pageSize = parseInt(this.PageSize.current?.getValue() ?? pageSizes[0].toString());
+                                    this.setState({ currentPage, pageSize }, () =>
+                                    {
+                                        onPageChange(currentPage, pageSize);
+                                    });
+                                }}
+                            />
+                        </div>
+                        <h6>
+                            {`(${current_min} - ${current_max}) of ${totalItems}`}
+                        </h6>
                     </div>
-                    <h6>
-                        {`(${current_min} - ${current_max}) of ${totalItems}`}
-                    </h6>
                 </div>
-            </div>
-
-        </>
-    );
+            </>
+        );
+    }
 }

package/src/components/NSTable.tsx

@@ -14,7 +14,7 @@ export interface INSTableProps<RowType> extends IBaseComponentProps
 {
 	columns: { [key: string]: string };
 	totalItems: number;
-	reload: (page: number) => void
+	reload: (page: number, size: number) => void
 	getRowKey: (row: RowType, rowIndex: number) => string;
 	getColumnAttributes?: (column: string, columnIndex: number) => { [key: string]: string };
 	getCell?: (row: RowType, column: string, rowIndex: number, columnIndex: number) => any;
@@ -28,7 +28,6 @@ export interface NSTableState<RowType>
 	columns: { [key: string]: string };
 	rows: RowType[] | null;
 	title?: string;
-	currentPage: number,
 	model: {
 		show: boolean;
 		description?: string;
@@ -37,10 +36,11 @@ export interface NSTableState<RowType>
 
 export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableState<RowType>>
 {
+	NSPagination = React.createRef<NSPagination>();
 	constructor(props: INSTableProps<RowType>)
 	{
 		super(props);
-		this.state = { columns: props.columns, rows: null, currentPage: 1, model: { show: false } };
+		this.state = { columns: props.columns, rows: null, model: { show: false } };
 		this.setColumns = this.setColumns.bind(this);
 		this.setRows = this.setRows.bind(this);
 		this.showModal = this.showModal.bind(this);
@@ -63,10 +63,9 @@ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableS
 	{
 		this.setState({ model: { show: false } });
 	}
-	onPageChange = (page: number) =>
+	onPageChange = (page: number, size: number) =>
 	{
-		this.setState({ currentPage: page });
-		this.props.reload(page);
+		this.props.reload(page, size);
 	}
 	override render()
 	{
@@ -159,14 +158,15 @@ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableS
 				</table>
 				<NSSpace size={NSSpaceSizeType.MICRO} />
 				<section className={Styles.ns_pagination_button}>
-					<NSPagination currentPage={this.state.currentPage} totalItems={this.props.totalItems} onPageChange={this.onPageChange} />
+					<NSPagination ref={this.NSPagination} totalItems={this.props.totalItems} onPageChange={this.onPageChange} />
 					<NSSpace size={NSSpaceSizeType.SMALL} />
 					<div className={Styles.ns_button}>
 						<NSButton title='Print' icon={{ src: "https://static.namirasoft.com/image/concept/export/blue.svg" }} onClick={() => { }} style={{ border: '1px solid rgba(255, 148, 50, 1)', width: "128px" }} />
 						<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" }} />
 						<NSButton title='Refresh' icon={{ src: "https://static.namirasoft.com/image/concept/export/blue.svg" }} onClick={() =>
 						{
-							this.props.reload(this.state.currentPage);
+							if (this.NSPagination.current)
+								this.props.reload(this.NSPagination.current.getCurrentPage(), this.NSPagination.current.getPageSize());
 						}} style={{ border: '1px solid rgba(3, 119, 255, 1)', width: "128px" }} />
 					</div>
 				</section>

package/src/props/IBaseComponentProps.ts

@@ -3,6 +3,7 @@ import React from "react";
 export interface IBaseComponentProps
 {
     id?: string;
+    name?: string;
     classList?: string[]
     style?: React.CSSProperties
 }