namirasoft-site-react 1.4.1 → 1.4.2

package/src/components/NSPageSelectionModal.tsx

@@ -1,227 +1,227 @@
-import React, { Component, createRef } from 'react';
-import { NSButtonBlue } from './NSButtonBlue';
-import { NSBoxString } from './NSBoxString';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-import Styles from './NSPageSelectionModal.module.css';
-import { NSBoxRadio } from './NSBoxRadio';
-
-export interface NSPageSelectionModalProps<RowType>
-{
-    current_page: number;
-    max_page: number;
-    onClose: () => void;
-    getItems: (page: number, selected: boolean) => Promise<RowType[]>;
-    onFinish: (items: RowType[]) => void;
-}
-
-interface NSPageSelectionModalState
-{
-    selectedRadio: string;
-}
-
-export class NSPageSelectionModal<RowType> extends Component<NSPageSelectionModalProps<RowType>, NSPageSelectionModalState>
-{
-    private toastRef: React.RefObject<HTMLDivElement> = createRef();
-    private NSBoxBoolean_CurrentPage: React.RefObject<NSBoxRadio> = createRef();
-    private NSBoxBoolean_SelectedItems: React.RefObject<NSBoxRadio> = createRef();
-    private NSBoxBoolean_CustomPage: React.RefObject<NSBoxRadio> = createRef();
-    private NSBoxBoolean_AllPage: React.RefObject<NSBoxRadio> = createRef();
-    private NSBoxString_Pages: React.RefObject<NSBoxString> = createRef();
-
-    constructor(props: NSPageSelectionModalProps<RowType>)
-    {
-        super(props);
-        this.state = {
-            selectedRadio: 'current_page'
-        };
-        this.onClickOutside = this.onClickOutside.bind(this);
-        this.handleRadioChange = this.handleRadioChange.bind(this);
-    }
-    override componentDidMount(): void
-    {
-        document.addEventListener('mousedown', this.onClickOutside);
-    }
-    override componentWillUnmount(): void
-    {
-        document.removeEventListener('mousedown', this.onClickOutside);
-    }
-    parseCustomPage(pages_value: string): number[]
-    {
-        let ans: number[] = [];
-        let pages = pages_value.split(',').map(p => p.trim()).filter(p => p);
-        for (let i = 0; i < pages.length; i++)
-        {
-            const element = pages[i];
-            if (element.includes("-"))
-            {
-                let ps = element.split('-').map(p => p.trim());
-                if (ps.length === 2)
-                {
-                    let from = parseInt(ps[0]);
-                    let to = parseInt(ps[1]);
-                    for (let p = from; p <= to; p++)
-                        ans.push(p);
-                }
-                else
-                    throw new Error("Parse Error for : " + element);
-            }
-            else
-            {
-                let p = parseInt(element);
-                ans.push(p);
-            }
-        }
-        ans.forEach(p =>
-        {
-            if (p < 1)
-                throw new Error("Page number must be more than equal to 1");
-            if (p > this.props.max_page)
-                throw new Error("Page number must be less than equal to " + this.props.max_page);
-        })
-        return ans;
-    }
-    private onClickOutside(event: MouseEvent)
-    {
-        if (this.toastRef.current && !this.toastRef.current.contains(event.target as Node))
-        {
-            this.props.onClose();
-        }
-    }
-    private handleRadioChange(selectedRadio: string)
-    {
-        this.setState({ selectedRadio });
-    }
-    override render()
-    {
-        return (
-            <>
-                {
-                    <>
-                        <div className={Styles.ns_print_container} ref={this.toastRef}>
-                            <div className={Styles.ns_header_print}>
-                                <img
-                                    src="https://static.namirasoft.com/image/concept/close/blue.svg"
-                                    alt="Close"
-                                    width={24}
-                                    height={24}
-                                    onClick={(e) =>
-                                    {
-                                        e.stopPropagation();
-                                        this.props.onClose();
-                                    }}
-                                    className={Styles.ns_close_icon}
-                                />
-                                <div className={Styles.ns_print_title}>
-                                    <img
-                                        src="https://static.namirasoft.com/image/concept/print/blue.svg"
-                                        alt="Print"
-                                        width={24}
-                                        height={24}
-                                    />
-                                    <h2 className='m-0'>Page Selection</h2>
-                                </div>
-                                <NSSpace size={NSSpaceSizeType.SMALL} />
-                                <p className={Styles.ns_print_description}>Please select which pages you want to continue with</p>
-                                <NSSpace size={NSSpaceSizeType.SMALL} />
-                                <div className={Styles.ns_parent_checkboxs}>
-                                    <NSBoxRadio
-                                        defaultValue={true}
-                                        ref={this.NSBoxBoolean_CurrentPage}
-                                        title={"Current page"}
-                                        required={false}
-                                        name={"PageSelection"}
-                                        isSelected={this.state.selectedRadio === 'current_page'}
-                                        onClick={() => this.handleRadioChange('current_page')}
-                                    />
-                                    <NSBoxRadio
-                                        ref={this.NSBoxBoolean_SelectedItems}
-                                        title={"Only Selected Items"}
-                                        required={false}
-                                        name={"PageSelection"}
-                                        isSelected={this.state.selectedRadio === 'selected_items'}
-                                        onClick={() => this.handleRadioChange('selected_items')}
-                                    />
-                                    <NSBoxRadio
-                                        ref={this.NSBoxBoolean_CustomPage}
-                                        title={"Custom Pages"}
-                                        required={false}
-                                        name={"PageSelection"}
-                                        isSelected={this.state.selectedRadio === 'custom_page'}
-                                        onClick={() => this.handleRadioChange('custom_page')}
-                                    />
-                                    <NSBoxRadio
-                                        ref={this.NSBoxBoolean_AllPage}
-                                        title={"All Pages"}
-                                        required={false}
-                                        name={"PageSelection"}
-                                        isSelected={this.state.selectedRadio === 'all_page'}
-                                        onClick={() => this.handleRadioChange('all_page')}
-                                    />
-                                </div>
-                                <NSSpace size={NSSpaceSizeType.MICRO} />
-                                {this.state.selectedRadio === 'custom_page' && (
-                                    <NSBoxString ref={this.NSBoxString_Pages} classList={[Styles.ns_w_box_string]} required={false} title="Custom Pages"
-                                        getError={value =>
-                                        {
-                                            try
-                                            {
-                                                this.parseCustomPage(value);
-                                                return null;
-                                            } catch (error: any)
-                                            {
-                                                return error.message;
-                                            }
-                                        }} />
-                                )}
-                                <NSSpace size={NSSpaceSizeType.SMALL} />
-                                <NSButtonBlue style={{ width: "100%" }} title='Apply' onClick={async () =>
-                                {
-                                    try
-                                    {
-                                        let items: RowType[] = [];
-                                        if (this.NSBoxBoolean_CurrentPage.current?.getValue())
-                                        {
-                                            let is = await this.props.getItems(this.props.current_page, false);
-                                            items.push(...is);
-                                        }
-                                        else if (this.NSBoxBoolean_SelectedItems.current?.getValue())
-                                        {
-                                            let is = await this.props.getItems(this.props.current_page, true);
-                                            items.push(...is);
-                                        }
-                                        else if (this.NSBoxBoolean_CustomPage.current?.getValue())
-                                        {
-                                            let pages_value = this.NSBoxString_Pages.current?.getValue() ?? "";
-                                            let pages = this.parseCustomPage(pages_value);
-
-                                            for (let p = 0; p < pages.length; p++)
-                                            {
-                                                let is = await this.props.getItems(pages[p], false);
-                                                items.push(...is);
-                                            }
-                                        }
-                                        else if (this.NSBoxBoolean_AllPage.current?.getValue())
-                                        {
-                                            for (let p = 1; p <= this.props.max_page; p++)
-                                            {
-                                                let is = await this.props.getItems(p, false);
-                                                items.push(...is);
-                                            }
-                                        }
-                                        else
-                                        { }
-                                        this.props.onFinish(items);
-                                    } catch (error)
-                                    {
-                                        // todo
-                                    }
-                                }} />
-                            </div>
-                        </div>
-                        <div className={Styles.ns_toast_background}></div>
-                    </>
-                }
-            </>
-        );
-    }
+import React, { Component, createRef } from 'react';
+import { NSButtonBlue } from './NSButtonBlue';
+import { NSBoxString } from './NSBoxString';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import Styles from './NSPageSelectionModal.module.css';
+import { NSBoxRadio } from './NSBoxRadio';
+
+export interface NSPageSelectionModalProps<RowType>
+{
+    current_page: number;
+    max_page: number;
+    onClose: () => void;
+    getItems: (page: number, selected: boolean) => Promise<RowType[]>;
+    onFinish: (items: RowType[]) => void;
+}
+
+interface NSPageSelectionModalState
+{
+    selectedRadio: string;
+}
+
+export class NSPageSelectionModal<RowType> extends Component<NSPageSelectionModalProps<RowType>, NSPageSelectionModalState>
+{
+    private toastRef: React.RefObject<HTMLDivElement> = createRef();
+    private NSBoxBoolean_CurrentPage: React.RefObject<NSBoxRadio> = createRef();
+    private NSBoxBoolean_SelectedItems: React.RefObject<NSBoxRadio> = createRef();
+    private NSBoxBoolean_CustomPage: React.RefObject<NSBoxRadio> = createRef();
+    private NSBoxBoolean_AllPage: React.RefObject<NSBoxRadio> = createRef();
+    private NSBoxString_Pages: React.RefObject<NSBoxString> = createRef();
+
+    constructor(props: NSPageSelectionModalProps<RowType>)
+    {
+        super(props);
+        this.state = {
+            selectedRadio: 'current_page'
+        };
+        this.onClickOutside = this.onClickOutside.bind(this);
+        this.handleRadioChange = this.handleRadioChange.bind(this);
+    }
+    override componentDidMount(): void
+    {
+        document.addEventListener('mousedown', this.onClickOutside);
+    }
+    override componentWillUnmount(): void
+    {
+        document.removeEventListener('mousedown', this.onClickOutside);
+    }
+    parseCustomPage(pages_value: string): number[]
+    {
+        let ans: number[] = [];
+        let pages = pages_value.split(',').map(p => p.trim()).filter(p => p);
+        for (let i = 0; i < pages.length; i++)
+        {
+            const element = pages[i];
+            if (element.includes("-"))
+            {
+                let ps = element.split('-').map(p => p.trim());
+                if (ps.length === 2)
+                {
+                    let from = parseInt(ps[0]);
+                    let to = parseInt(ps[1]);
+                    for (let p = from; p <= to; p++)
+                        ans.push(p);
+                }
+                else
+                    throw new Error("Parse Error for : " + element);
+            }
+            else
+            {
+                let p = parseInt(element);
+                ans.push(p);
+            }
+        }
+        ans.forEach(p =>
+        {
+            if (p < 1)
+                throw new Error("Page number must be more than equal to 1");
+            if (p > this.props.max_page)
+                throw new Error("Page number must be less than equal to " + this.props.max_page);
+        })
+        return ans;
+    }
+    private onClickOutside(event: MouseEvent)
+    {
+        if (this.toastRef.current && !this.toastRef.current.contains(event.target as Node))
+        {
+            this.props.onClose();
+        }
+    }
+    private handleRadioChange(selectedRadio: string)
+    {
+        this.setState({ selectedRadio });
+    }
+    override render()
+    {
+        return (
+            <>
+                {
+                    <>
+                        <div className={Styles.ns_print_container} ref={this.toastRef}>
+                            <div className={Styles.ns_header_print}>
+                                <img
+                                    src="https://static.namirasoft.com/image/concept/close/blue.svg"
+                                    alt="Close"
+                                    width={24}
+                                    height={24}
+                                    onClick={(e) =>
+                                    {
+                                        e.stopPropagation();
+                                        this.props.onClose();
+                                    }}
+                                    className={Styles.ns_close_icon}
+                                />
+                                <div className={Styles.ns_print_title}>
+                                    <img
+                                        src="https://static.namirasoft.com/image/concept/print/blue.svg"
+                                        alt="Print"
+                                        width={24}
+                                        height={24}
+                                    />
+                                    <h2 className='m-0'>Page Selection</h2>
+                                </div>
+                                <NSSpace size={NSSpaceSizeType.SMALL} />
+                                <p className={Styles.ns_print_description}>Please select which pages you want to continue with</p>
+                                <NSSpace size={NSSpaceSizeType.SMALL} />
+                                <div className={Styles.ns_parent_checkboxs}>
+                                    <NSBoxRadio
+                                        defaultValue={true}
+                                        ref={this.NSBoxBoolean_CurrentPage}
+                                        title={"Current page"}
+                                        required={false}
+                                        name={"PageSelection"}
+                                        isSelected={this.state.selectedRadio === 'current_page'}
+                                        onClick={() => this.handleRadioChange('current_page')}
+                                    />
+                                    <NSBoxRadio
+                                        ref={this.NSBoxBoolean_SelectedItems}
+                                        title={"Only Selected Items"}
+                                        required={false}
+                                        name={"PageSelection"}
+                                        isSelected={this.state.selectedRadio === 'selected_items'}
+                                        onClick={() => this.handleRadioChange('selected_items')}
+                                    />
+                                    <NSBoxRadio
+                                        ref={this.NSBoxBoolean_CustomPage}
+                                        title={"Custom Pages"}
+                                        required={false}
+                                        name={"PageSelection"}
+                                        isSelected={this.state.selectedRadio === 'custom_page'}
+                                        onClick={() => this.handleRadioChange('custom_page')}
+                                    />
+                                    <NSBoxRadio
+                                        ref={this.NSBoxBoolean_AllPage}
+                                        title={"All Pages"}
+                                        required={false}
+                                        name={"PageSelection"}
+                                        isSelected={this.state.selectedRadio === 'all_page'}
+                                        onClick={() => this.handleRadioChange('all_page')}
+                                    />
+                                </div>
+                                <NSSpace size={NSSpaceSizeType.MICRO} />
+                                {this.state.selectedRadio === 'custom_page' && (
+                                    <NSBoxString ref={this.NSBoxString_Pages} classList={[Styles.ns_w_box_string]} required={false} title="Custom Pages"
+                                        getError={value =>
+                                        {
+                                            try
+                                            {
+                                                this.parseCustomPage(value);
+                                                return null;
+                                            } catch (error: any)
+                                            {
+                                                return error.message;
+                                            }
+                                        }} />
+                                )}
+                                <NSSpace size={NSSpaceSizeType.SMALL} />
+                                <NSButtonBlue style={{ width: "100%" }} title='Apply' onClick={async () =>
+                                {
+                                    try
+                                    {
+                                        let items: RowType[] = [];
+                                        if (this.NSBoxBoolean_CurrentPage.current?.getValue())
+                                        {
+                                            let is = await this.props.getItems(this.props.current_page, false);
+                                            items.push(...is);
+                                        }
+                                        else if (this.NSBoxBoolean_SelectedItems.current?.getValue())
+                                        {
+                                            let is = await this.props.getItems(this.props.current_page, true);
+                                            items.push(...is);
+                                        }
+                                        else if (this.NSBoxBoolean_CustomPage.current?.getValue())
+                                        {
+                                            let pages_value = this.NSBoxString_Pages.current?.getValue() ?? "";
+                                            let pages = this.parseCustomPage(pages_value);
+
+                                            for (let p = 0; p < pages.length; p++)
+                                            {
+                                                let is = await this.props.getItems(pages[p], false);
+                                                items.push(...is);
+                                            }
+                                        }
+                                        else if (this.NSBoxBoolean_AllPage.current?.getValue())
+                                        {
+                                            for (let p = 1; p <= this.props.max_page; p++)
+                                            {
+                                                let is = await this.props.getItems(p, false);
+                                                items.push(...is);
+                                            }
+                                        }
+                                        else
+                                        { }
+                                        this.props.onFinish(items);
+                                    } catch (error)
+                                    {
+                                        // todo
+                                    }
+                                }} />
+                            </div>
+                        </div>
+                        <div className={Styles.ns_toast_background}></div>
+                    </>
+                }
+            </>
+        );
+    }
 }

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
 }