namirasoft-site-react 1.4.1 → 1.4.3

package/src/components/NSPageSelectionModal.tsx

@@ -1,227 +1,228 @@
-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;
+	icon?: string;
+}
+
+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={this.props.icon && this.props.icon}
+                                        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>
+                    </>
+                }
+            </>
+        );
+    }
 }