namirasoft-site-react 1.4.166 → 1.4.167

package/src/components/NSPagination.tsx

@@ -1,183 +1,183 @@
-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 as string);
-    }
-    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"
-                        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: "70px" }}
-                    />
-                    <p className={Styles.ns_pagination_info}>
-                        {`(${current_min.toLocaleString()} - ${current_max.toLocaleString()}) of ${totalItems.toLocaleString()}`}
-                    </p>
-                </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 as string);
+    }
+    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"
+                        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: "70px" }}
+                    />
+                    <p className={Styles.ns_pagination_info}>
+                        {`(${current_min.toLocaleString()} - ${current_max.toLocaleString()}) of ${totalItems.toLocaleString()}`}
+                    </p>
+                </div>
+            </>
+        );
+    }
 }

package/src/components/NSPanel.module.css

@@ -1,19 +1,20 @@
-.ns_panel {
-    background-color: #fff;
-    padding: 16px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    border-radius: 8px;
-    gap: 16px;
-    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: 480px) {
-    .ns_panel {
-        width: max-content;
-    }
+.ns_panel {
+    background-color: #fff;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 8px;
+    gap: 16px;
+    margin: 0 auto;
+    width: 100%;
+    max-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: 480px) {
+    .ns_panel {
+        width: max-content;
+    }
 }

package/src/components/NSPanel.tsx

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

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>
+	);
 };