namirasoft-site-react 1.4.134 → 1.4.136

package/src/components/NSPagination.tsx

@@ -1,191 +1,184 @@
-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 NSPaginationProps extends IBaseComponentProps
-{
-    totalItems: number;
-    onPageChange: (page: number, size: number) => void;
-}
-
-interface NSPaginationState
-{
-    currentPage: number;
-}
-
-let pageSizes = [25, 50, 100, 200, 500];
-
-export class NSPagination extends Component<NSPaginationProps, NSPaginationState>
-{
-    PageSize = React.createRef<NSBoxCombo>();
-    constructor(props: NSPaginationProps)
-    {
-        super(props);
-        this.state = { currentPage: 1 };
-    }
-    getCurrentPage(): number
-    {
-        return this.state.currentPage;
-    }
-    getPageSize(): number
-    {
-        let ans = this.PageSize.current?.getValue(false);
-        if (!ans)
-            ans = pageSizes[0].toString();
-        return parseInt(ans);
-    }
-    override render()
-    {
-        let pageSize = this.getPageSize();
-        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
-                        className={`${Styles.ns_paginate_link} ${page === this.state.currentPage ? Styles.ns_select_number : ''}`}
-                        onClick={(e) =>
-                        {
-                            e.preventDefault();
-                            let currentPage = page;
-                            this.setState({ currentPage }, () =>
-                            {
-                                let pageSize = this.getPageSize();
-                                onPageChange(currentPage, pageSize);
-                            });
-                        }}
-                    >
-                        {page}
-                    </a>
-                </div>
-            );
-        };
-        //prev
-        pages.push(
-            <div key="prev">
-                <a
-                    onClick={(e) =>
-                    {
-                        e.preventDefault();
-                        if (this.state.currentPage > 1)
-                        {
-                            let currentPage = this.state.currentPage - 1;
-                            this.setState({ currentPage }, () =>
-                            {
-                                let pageSize = this.getPageSize();
-                                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 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 className={`${Styles.ns_paginate_link}`} onClick={(e) => e.preventDefault()}>...</a>
-                </div>
-            );
-        }
-        //LastPage
-        if (totalPages > 1)
-        {
-            pushPage(totalPages);
-        }
-        //next
-        pages.push(
-            <div key="next">
-                <a
-                    onClick={(e) =>
-                    {
-                        e.preventDefault();
-                        if (this.state.currentPage < totalPages)
-                        {
-                            let currentPage = this.state.currentPage + 1;
-                            this.setState({ currentPage }, () =>
-                            {
-                                let pageSize = this.getPageSize();
-                                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
-                                ref={this.PageSize}
-                                title=''
-                                required={false}
-                                searchable={false}
-                                multiple={false}
-                                defaultValue="25"
-                                getOptions={() => pageSizes.map(pagesize => { return { value: pagesize.toString(), title: pagesize.toString() } })}
-                                onChanged={() =>
-                                {
-                                    let currentPage = this.state.currentPage;
-                                    this.setState({ currentPage }, () =>
-                                    {
-                                        let pageSize = this.getPageSize();
-                                        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 NSPaginationProps extends IBaseComponentProps
+{
+    totalItems: number;
+    onPageChange: (page: number, size: number) => void;
+}
+
+interface NSPaginationState
+{
+    currentPage: number;
+}
+
+let pageSizes = [25, 50, 100, 200, 500];
+
+export class NSPagination extends Component<NSPaginationProps, NSPaginationState>
+{
+    PageSize = React.createRef<NSBoxCombo>();
+    constructor(props: NSPaginationProps)
+    {
+        super(props);
+        this.state = { currentPage: 1 };
+    }
+    getCurrentPage(): number
+    {
+        return this.state.currentPage;
+    }
+    getPageSize(): number
+    {
+        let ans = this.PageSize.current?.getValue(false);
+        if (!ans)
+            ans = pageSizes[0].toString();
+        return parseInt(ans);
+    }
+    override render()
+    {
+        let pageSize = this.getPageSize();
+        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: JSX.Element[] = [];
+
+        const pushButton = (name: string, selected: boolean, onClick: () => void) =>
+        {
+            pages.push(
+                <div key={name} className={`${Styles.ns_pagination_button_parent}`}>
+                    <button
+                        className={`${Styles.ns_pagination_button} ${selected ? Styles.ns_pagination_button_selected : ''}`}
+                        onClick={(e) =>
+                        {
+                            e.preventDefault();
+                            onClick();
+                        }}
+                    >
+                        {name}
+                    </button>
+                </div>
+            );
+        };
+        const pushPage = (page: number) =>
+        {
+            pushButton(page.toLocaleString(), page === this.state.currentPage, () =>
+            {
+                let currentPage = page;
+                this.setState({ currentPage }, () =>
+                {
+                    let pageSize = this.getPageSize();
+                    onPageChange(currentPage, pageSize);
+                });
+            });
+        };
+        const pushArrow = (key: string, logo: string, onClick: () => void,) =>
+        {
+            pages.push(
+                <div key={key} className={`${Styles.ns_pagination_button_parent}`}>
+                    <button
+                        className={Styles.ns_pagination_button}
+                        onClick={e =>
+                        {
+                            e.preventDefault();
+                            onClick();
+                        }}
+                    >
+                        <img
+                            src={logo}
+                            alt={key}
+                            width={32}
+                            height={32}
+                        />
+                    </button>
+                </div >
+            );
+        };
+        // Previous
+        pushArrow("previous", "https://static.namirasoft.com/image/concept/arrow/left/white-blue.svg", () =>
+        {
+            if (this.state.currentPage > 1)
+            {
+                let currentPage = this.state.currentPage - 1;
+                this.setState({ currentPage }, () =>
+                {
+                    let pageSize = this.getPageSize();
+                    onPageChange(currentPage, pageSize);
+                });
+            }
+        });
+        //FirstPage
+        pushPage(1);
+        if (this.state.currentPage > windowSize + 2)
+        {
+            pushButton("...", false, () => { });
+        }
+        for (let i = minPage; i <= maxPage; i++)
+            pushPage(i);
+        if (this.state.currentPage < totalPages - windowSize - 1)
+        {
+            pushButton("...", false, () => { });
+        }
+        //LastPage
+        if (totalPages > 1)
+        {
+            pushPage(totalPages);
+        }
+        // Next
+        pushArrow("next", "https://static.namirasoft.com/image/concept/arrow/right/white-blue.svg", () =>
+        {
+            if (this.state.currentPage < totalPages)
+            {
+                let currentPage = this.state.currentPage + 1;
+                this.setState({ currentPage }, () =>
+                {
+                    let pageSize = this.getPageSize();
+                    onPageChange(currentPage, pageSize);
+                });
+            }
+        });
+        return (
+            <>
+                <div
+                    id={this.props.id}
+                    className={`${Styles.ns_pagination_container} ${this.props.classList?.join(' ')}`}
+                    style={this.props.style ?? {}}
+                >
+                    <div className={Styles.ns_pagination_buttons_container}>
+                        {pages}
+                    </div>
+
+                    <NSBoxCombo
+                        ref={this.PageSize}
+                        title=''
+                        required={false}
+                        searchable={false}
+                        multiple={false}
+                        defaultValue="25"
+                        placeholder='Page'
+                        hideHeader
+                        getOptions={() => pageSizes.map(pagesize => { return { value: pagesize.toString(), title: pagesize.toString() } })}
+                        onChanged={() =>
+                        {
+                            let currentPage = this.state.currentPage;
+                            this.setState({ currentPage }, () =>
+                            {
+                                let pageSize = this.getPageSize();
+                                onPageChange(currentPage, pageSize);
+                            });
+                        }}
+                        style={{ width: "75px" }}
+                    />
+                    <p className={Styles.ns_pagination_info}>
+                        {`(${current_min.toLocaleString()} - ${current_max.toLocaleString()}) of ${totalItems.toLocaleString()}`}
+                    </p>
+                </div>
+            </>
+        );
+    }
 }

package/src/components/NSPanel.module.css

@@ -1,47 +1,47 @@
-.ns_panel_grid {
-    background-color: #fff;
-    padding: 24px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 16px;
-    border-radius: 16px;
-    margin: 0 auto;
-    border: 1px solid rgba(161, 164, 176, 1);
-    box-shadow: 0px 0px 2px 0px rgba(161, 164, 176, 1);
-    justify-content: center;
-}
-
-.ns_panel_column {
-    background-color: #fff;
-    padding: 24px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    border-radius: 8px;
-    margin: 0 auto;
-    width: 100%;
-    border: 1px solid rgba(161, 164, 176, 1);
-    box-shadow: 0px 0px 2px 0px rgba(161, 164, 176, 1);
-}
-
-@media only screen and (min-width: 768px) {
-    .ns_panel_column {
-        max-width: 700px;
-        min-width: 270px;
-    }
-
-    .ns_panel_grid {
-        flex-direction: row;
-        max-width: 700px;
-        flex-wrap: wrap;
-        min-width: 270px;
-        max-width: 610px;
-    }
-}
-
-@media only screen and (min-width: 380px) {
-    .ns_panel_column {
-        width: max-content;
-    }
+.ns_panel_grid {
+    background-color: #fff;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    border-radius: 16px;
+    margin: 0 auto;
+    border: 1px solid rgba(161, 164, 176, 1);
+    box-shadow: 0px 0px 2px 0px rgba(161, 164, 176, 1);
+    justify-content: center;
+}
+
+.ns_panel_column {
+    background-color: #fff;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 8px;
+    margin: 0 auto;
+    width: 100%;
+    border: 1px solid rgba(161, 164, 176, 1);
+    box-shadow: 0px 0px 2px 0px rgba(161, 164, 176, 1);
+}
+
+@media only screen and (min-width: 768px) {
+    .ns_panel_column {
+        max-width: 700px;
+        min-width: 270px;
+    }
+
+    .ns_panel_grid {
+        flex-direction: row;
+        max-width: 700px;
+        flex-wrap: wrap;
+        min-width: 270px;
+        max-width: 610px;
+    }
+}
+
+@media only screen and (min-width: 425px) {
+    .ns_panel_column {
+        width: max-content;
+    }
 }

package/src/components/NSPanel.tsx

@@ -1,20 +1,20 @@
-import { ReactNode } from "react";
-import Styles from './NSPanel.module.css';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface NSPanelProps extends IBaseComponentProps
-{
-    children: ReactNode;
-    grid: boolean;
-}
-export function NSPanel(props: NSPanelProps)
-{
-    return (
-        <section id={props.id}
-            className={`${props.grid ? Styles.ns_panel_grid : Styles.ns_panel_column} ${props.classList?.join(" ")}`}
-            style={props.style}
-        >
-            {props.children}
-        </section>
-    );
+import { ReactNode } from "react";
+import Styles from './NSPanel.module.css';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface NSPanelProps extends IBaseComponentProps
+{
+    children: ReactNode;
+    grid: boolean;
+}
+export function NSPanel(props: NSPanelProps)
+{
+    return (
+        <section id={props.id}
+            className={`${props.grid ? Styles.ns_panel_grid : Styles.ns_panel_column} ${props.classList?.join(" ")}`}
+            style={props.style}
+        >
+            {props.children}
+        </section>
+    );
 }

package/src/components/NSPanelAccordion.module.css

@@ -1,5 +1,5 @@
-.NSPanelAccordion_parent {
-	border-radius: 8px;
-	width: 100%;
-	max-width: 1150px;
+.NSPanelAccordion_parent {
+	border-radius: 8px;
+	width: 100%;
+	max-width: 1150px;
 }

package/src/components/NSPanelAccordion.tsx

@@ -1,52 +1,52 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import Styles from "./NSPanelAccordion.module.css"
-
-interface NSPanelAccordionProps extends IBaseComponentProps
-{
-	getHeader: () => React.ReactNode;
-	children: React.ReactNode;
-}
-
-export function NSPanelAccordion(props: NSPanelAccordionProps)
-{
-	const [isOpen, setIsOpen] = useState(true);
-	const [height, setHeight] = useState<number | 'auto'>(0);
-	const contentRef = useRef<HTMLDivElement>(null);
-
-	const toggleAccordion = () =>
-	{
-		setIsOpen(!isOpen);
-	};
-
-	useEffect(() =>
-	{
-		if (isOpen)
-		{
-			setHeight(contentRef.current?.scrollHeight || 'auto');
-		} else
-		{
-			setHeight(0);
-		}
-	}, [isOpen]);
-
-	return (
-		<div className={`${Styles.NSPanelAccordion_parent} ${props.classList?.join(" ")}`} style={props.style}>
-			<div
-				onClick={toggleAccordion}
-			>
-				{props.getHeader()}
-			</div>
-			<div
-				ref={contentRef}
-				style={{
-					height: height,
-					overflow: 'hidden',
-					transition: 'height 0.3s ease',
-				}}
-			>
-				{props.children}
-			</div>
-		</div>
-	);
+import React, { useState, useRef, useEffect } from 'react';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import Styles from "./NSPanelAccordion.module.css"
+
+interface NSPanelAccordionProps extends IBaseComponentProps
+{
+	getHeader: () => React.ReactNode;
+	children: React.ReactNode;
+}
+
+export function NSPanelAccordion(props: NSPanelAccordionProps)
+{
+	const [isOpen, setIsOpen] = useState(true);
+	const [height, setHeight] = useState<number | 'auto'>(0);
+	const contentRef = useRef<HTMLDivElement>(null);
+
+	const toggleAccordion = () =>
+	{
+		setIsOpen(!isOpen);
+	};
+
+	useEffect(() =>
+	{
+		if (isOpen)
+		{
+			setHeight(contentRef.current?.scrollHeight || 'auto');
+		} else
+		{
+			setHeight(0);
+		}
+	}, [isOpen]);
+
+	return (
+		<div className={`${Styles.NSPanelAccordion_parent} ${props.classList?.join(" ")}`} style={props.style}>
+			<div
+				onClick={toggleAccordion}
+			>
+				{props.getHeader()}
+			</div>
+			<div
+				ref={contentRef}
+				style={{
+					height: height,
+					overflow: 'hidden',
+					transition: 'height 0.3s ease',
+				}}
+			>
+				{props.children}
+			</div>
+		</div>
+	);
 };