namirasoft-site-react 1.3.372 → 1.3.373

package/src/components/NSPagination.module.css

@@ -1,102 +1,102 @@
-.ns_pagination_container {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-	text-align: left;
-	font-size: 14px;
-	justify-items: center;
-	width: 100%;
-	max-width: max-content;
-}
-
-.ns_select_number_parent {
-	font-weight: 500;
-	border-radius: 50px;
-	height: 32px;
-	width: 32px;
-	text-align: center;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.ns_paginate_link {
-	color: rgba(20, 27, 92, 1);
-	text-decoration: none;
-	font-size: 14px;
-	font-weight: 600;
-	line-height: 22px;
-	font-family: inherit;
-}
-
-.ns_select_number {
-	color: rgba(20, 27, 92, 1);
-	font-weight: 500;
-	background-color: rgb(255, 255, 255);
-	border: 2px solid rgba(20, 27, 92, 1);
-	border-radius: 50px;
-	border-radius: 50px;
-	height: 32px;
-	width: 32px;
-	text-align: center;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.ns_pagination_left_ellipses {
-	padding-bottom: 10px;
-}
-
-.ns_pagination_left_ellipses a {
-	color: rgba(20, 27, 92, 1);
-	font-size: 24px;
-	font-weight: 700;
-}
-
-.ns_pagination_right_ellipses {
-	padding-bottom: 10px;
-}
-
-.ns_pagination_right_ellipses a {
-	color: rgba(20, 27, 92, 1);
-	font-size: 24px;
-	font-weight: 700;
-}
-
-.ns_pagination_info {
-	margin-left: 12px;
-	width: fit-content;
-	min-width: 140px;
-	height: 48px;
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	gap: 12px;
-	min-width: 248px;
-}
-
-.ns_pagination_info h6 {
-	background-color: rgb(255, 255, 255);
-	width: 124px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 100%;
-	color: rgba(20, 27, 92, 1);
-	padding-left: 16px 24px;
-	text-align: center;
-	border-radius: 8px;
-	border: 1px solid black;
-}
-
-.ns_pagination_combobox div {
-	width: 74px;
-	margin: 0;
-	padding: 0;
-}
-
-.ns_pagination_combobox span {
-	margin: 0
+.ns_pagination_container {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	text-align: left;
+	font-size: 14px;
+	justify-items: center;
+	width: 100%;
+	max-width: max-content;
+}
+
+.ns_select_number_parent {
+	font-weight: 500;
+	border-radius: 50px;
+	height: 32px;
+	width: 32px;
+	text-align: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.ns_paginate_link {
+	color: rgba(20, 27, 92, 1);
+	text-decoration: none;
+	font-size: 14px;
+	font-weight: 600;
+	line-height: 22px;
+	font-family: inherit;
+}
+
+.ns_select_number {
+	color: rgba(20, 27, 92, 1);
+	font-weight: 500;
+	background-color: rgb(255, 255, 255);
+	border: 2px solid rgba(20, 27, 92, 1);
+	border-radius: 50px;
+	border-radius: 50px;
+	height: 32px;
+	width: 32px;
+	text-align: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.ns_pagination_left_ellipses {
+	padding-bottom: 10px;
+}
+
+.ns_pagination_left_ellipses a {
+	color: rgba(20, 27, 92, 1);
+	font-size: 24px;
+	font-weight: 700;
+}
+
+.ns_pagination_right_ellipses {
+	padding-bottom: 10px;
+}
+
+.ns_pagination_right_ellipses a {
+	color: rgba(20, 27, 92, 1);
+	font-size: 24px;
+	font-weight: 700;
+}
+
+.ns_pagination_info {
+	margin-left: 12px;
+	width: fit-content;
+	min-width: 140px;
+	height: 48px;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	gap: 12px;
+	min-width: 248px;
+}
+
+.ns_pagination_info h6 {
+	background-color: rgb(255, 255, 255);
+	width: 124px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	color: rgba(20, 27, 92, 1);
+	padding-left: 16px 24px;
+	text-align: center;
+	border-radius: 8px;
+	border: 1px solid black;
+}
+
+.ns_pagination_combobox div {
+	width: 74px;
+	margin: 0;
+	padding: 0;
+}
+
+.ns_pagination_combobox span {
+	margin: 0
 }

package/src/components/NSPagination.tsx

@@ -1,191 +1,190 @@
-import { Component } from 'react';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import Styles from './NSPagination.module.css';
-import React from "react";
-import { NSBoxCombo } from './NSBoxCombo';
-
-export interface INSPaginationProps extends IBaseComponentProps
-{
-    totalItems: number;
-    onPageChange: (page: number, size: number) => void;
-}
-
-interface INSPaginationState
-{
-    currentPage: number;
-    pageSize: number;
-}
-let pageSizes = [25, 50, 100, 200, 500];
-
-export class NSPagination extends Component<INSPaginationProps, INSPaginationState>
-{
-    PageSize = React.createRef<NSBoxCombo>();
-    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, 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) =>
-        {
-            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="prev">
-                <a
-                    href="#"
-                    onClick={(e) =>
-                    {
-                        e.preventDefault();
-                        if (this.state.currentPage > 1)
-                        {
-                            let currentPage = this.state.currentPage - 1;
-                            let pageSize = this.state.pageSize;
-                            this.setState({ currentPage, pageSize }, () =>
-                            {
-                                onPageChange(currentPage, 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 (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="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>
-        );
-        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 className={Styles.ns_pagination_combobox}>
-                            <NSBoxCombo
-                                searchable={false}
-                                ref={this.PageSize}
-                                multiple={false}
-                                title=''
-                                required={false}
-                                defaultValue="25"
-                                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>
-                </div>
-            </>
-        );
-    }
+import { Component } from 'react';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import Styles from './NSPagination.module.css';
+import React from "react";
+import { NSBoxCombo } from './NSBoxCombo';
+
+export interface INSPaginationProps extends IBaseComponentProps
+{
+    totalItems: number;
+    onPageChange: (page: number, size: number) => void;
+}
+
+interface INSPaginationState
+{
+    currentPage: number;
+    pageSize: number;
+}
+let pageSizes = [25, 50, 100, 200, 500];
+
+export class NSPagination extends Component<INSPaginationProps, INSPaginationState>
+{
+    PageSize = React.createRef<NSBoxCombo>();
+    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, 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) =>
+        {
+            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="prev">
+                <a href="#"
+                    onClick={(e) =>
+                    {
+                        e.preventDefault();
+                        if (this.state.currentPage > 1)
+                        {
+                            let currentPage = this.state.currentPage - 1;
+                            let pageSize = this.state.pageSize;
+                            this.setState({ currentPage, pageSize }, () =>
+                            {
+                                onPageChange(currentPage, 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 (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="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>
+        );
+        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 className={Styles.ns_pagination_combobox}>
+                            <NSBoxCombo
+                                searchable={false}
+                                ref={this.PageSize}
+                                multiple={false}
+                                title=''
+                                required={false}
+                                defaultValue="25"
+                                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>
+                </div>
+            </>
+        );
+    }
 }