namirasoft-site-react 1.3.265 → 1.3.266

package/src/components/NSPagination.tsx

@@ -1,191 +1,192 @@
-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;
-    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<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, 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 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>
-                </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 style={{ width: 70 }}>
+                            <NSBoxCombo
+                                searchable={false}
+                                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>
+                </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: 670px;
-    }
-}
-
-@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: 670px;
+    }
+}
+
+@media only screen and (min-width: 380px) {
+    .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/NSRadioButton.module.css

@@ -1,29 +1,29 @@
-.ns_heading {
-    color: #141B5C;
-    text-align: center;
-}
-
-.ns_radioGroup {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-around;
-    margin-top: 20px;
-    border-radius: 8px;
-    background-color: white;
-    padding: 30px;
-    box-shadow: 0px 2px 3.84px rgba(0 0 0.25);
-    color: #141B5C;
-}
-
-.ns_radioButton {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.ns_radioLabel {
-    margin-left: 8px;
-    font-size: 17px;
-    color: #333;
+.ns_heading {
+    color: #141B5C;
+    text-align: center;
+}
+
+.ns_radioGroup {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    margin-top: 20px;
+    border-radius: 8px;
+    background-color: white;
+    padding: 30px;
+    box-shadow: 0px 2px 3.84px rgba(0 0 0.25);
+    color: #141B5C;
+}
+
+.ns_radioButton {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.ns_radioLabel {
+    margin-left: 8px;
+    font-size: 17px;
+    color: #333;
 }