namirasoft-site-react 1.4.403 → 1.4.404

package/src/components/NSDialogPageSelection.module.css

@@ -1,104 +1,104 @@
-.ns_print_container {
-    transform: translate(50%, 50%);
-    background-color: rgba(255, 255, 255, 1);
-    border-radius: 16px;
-    border: 0.2px solid rgb(210, 210, 210);
-    padding: 16px;
-    max-width: 380px;
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 100;
-	width: 100%;
-	border: 8px solid rgb(233, 232, 232);
-}
-
-.ns_header_print {
-    position: relative;
-}
-
-.ns_close_icon {
-    position: absolute;
-    right: 0px;
-    top: 0px;
-    cursor: pointer;
-}
-
-.ns_print_title {
-    display: flex;
-    gap: 8px;
-    color: #141B5C;
-    justify-content: center;
-    margin: 0;
-    align-items: center;
-}
-
-.ns_print_description {
-    color: #141B5C;
-    margin: 0;
-}
-
-.ns_parent_checkboxs {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 16px;
-}
-
-.ns_w_box_boolean div {
-    width: 100% !important;
-}
-
-.ns_w_box_boolean {
-    width: 100% !important;
-}
-
-.ns_w_box_string {
-    width: 100% !important;
-}
-
-.ns_w_box_string input {
-    width: 100% !important;
-    max-width: 100% !important;
-}
-
-@media only screen and (min-width: 768px) {
-	.ns_parent_checkboxs { 
-		justify-content: space-between;
-	}
-	
-    .ns_print_container {
-        max-width: 610px;
-    }
-
-    .ns_w_box_boolean div {
-        width: 272px !important;
-    }
-
-    .ns_w_box_boolean {
-        width: 272px !important;
-    }
-
-    .ns_w_box_string {
-        width: 272px !important;
-    }
-
-    .ns_w_box_string input {
-        width: 272px !important;
-    }
-}
-
-.ns_toast_background {
-    width: 100vw;
-    height: 100vh;
-    background-color: #00000090;
-    position: fixed;
-    top: 0;
-    left: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: default;
-	z-index: 99;
+.ns_print_container {
+    transform: translate(50%, 50%);
+    background-color: rgba(255, 255, 255, 1);
+    border-radius: 16px;
+    border: 0.2px solid rgb(210, 210, 210);
+    padding: 16px;
+    max-width: 380px;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 100;
+	width: 100%;
+	border: 8px solid rgb(233, 232, 232);
+}
+
+.ns_header_print {
+    position: relative;
+}
+
+.ns_close_icon {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    cursor: pointer;
+}
+
+.ns_print_title {
+    display: flex;
+    gap: 8px;
+    color: #141B5C;
+    justify-content: center;
+    margin: 0;
+    align-items: center;
+}
+
+.ns_print_description {
+    color: #141B5C;
+    margin: 0;
+}
+
+.ns_parent_checkboxs {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 16px;
+}
+
+.ns_w_box_boolean div {
+    width: 100% !important;
+}
+
+.ns_w_box_boolean {
+    width: 100% !important;
+}
+
+.ns_w_box_string {
+    width: 100% !important;
+}
+
+.ns_w_box_string input {
+    width: 100% !important;
+    max-width: 100% !important;
+}
+
+@media only screen and (min-width: 768px) {
+	.ns_parent_checkboxs { 
+		justify-content: space-between;
+	}
+	
+    .ns_print_container {
+        max-width: 610px;
+    }
+
+    .ns_w_box_boolean div {
+        width: 272px !important;
+    }
+
+    .ns_w_box_boolean {
+        width: 272px !important;
+    }
+
+    .ns_w_box_string {
+        width: 272px !important;
+    }
+
+    .ns_w_box_string input {
+        width: 272px !important;
+    }
+}
+
+.ns_toast_background {
+    width: 100vw;
+    height: 100vh;
+    background-color: #00000090;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: default;
+	z-index: 99;
 }

package/src/components/NSDialogPageSelection.tsx

@@ -1,235 +1,235 @@
-import React, { Component, createRef } from 'react';
-import { NSButtonBlue } from './NSButtonBlue';
-import { NSBoxString } from './NSBoxString';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-import Styles from './NSDialogPageSelection.module.css';
-import { NSBoxRadio } from './NSBoxRadio';
-
-export interface NSDialogPageSelectionProps<RowType>
-{
-	current_page: number;
-	current_size: number;
-	max_page: number;
-	onClose: () => void;
-	getItems: (page: number, size: number, selected: boolean) => Promise<RowType[]>;
-	onFinish: (items: RowType[]) => Promise<void>;
-	icon?: string;
-}
-
-interface NSDialogPageSelectionState
-{
-	selectedRadio: string;
-}
-
-export class NSDialogPageSelection<RowType> extends Component<NSDialogPageSelectionProps<RowType>, NSDialogPageSelectionState>
-{
-	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: NSDialogPageSelectionProps<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}>
-									{/* todo: input id for check when click on labels */}
-									<NSBoxRadio
-										ref={this.NSBoxBoolean_CurrentPage}
-										required={false}
-										defaultValue={true}
-										title={"Current page"}
-										hideHeader
-										checked={this.state.selectedRadio === 'current_page'}
-										onClicked={() => this.handleRadioChange('current_page')}
-									/>
-									<NSBoxRadio
-										ref={this.NSBoxBoolean_SelectedItems}
-										required={false}
-										title={"Only Selected Items"}
-										hideHeader
-										checked={this.state.selectedRadio === 'selected_items'}
-										onClicked={() => this.handleRadioChange('selected_items')}
-									/>
-									<NSBoxRadio
-										ref={this.NSBoxBoolean_CustomPage}
-										title={"Custom Pages"}
-										required={false}
-										hideHeader
-										checked={this.state.selectedRadio === 'custom_page'}
-										onClicked={() => this.handleRadioChange('custom_page')}
-									/>
-									<NSBoxRadio
-										ref={this.NSBoxBoolean_AllPage}
-										title={"All Pages"}
-										required={false}
-										hideHeader
-										checked={this.state.selectedRadio === 'all_page'}
-										onClicked={() => 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"
-										validator={(_, value) =>
-										{
-											try
-											{
-												this.parseCustomPage(value);
-												return null;
-											} catch (error: any)
-											{
-												return error.message;
-											}
-										}} />
-								)}
-								<NSSpace size={NSSpaceSizeType.SMALL} />
-								<NSButtonBlue
-									style={{ width: "100%" }}
-									title='Apply'
-									onClick={{
-										action: async (onFinished) =>
-										{
-											try
-											{
-												let items: RowType[] = [];
-												if (this.NSBoxBoolean_CurrentPage.current?.getValue())
-												{
-													let is = await this.props.getItems(this.props.current_page, this.props.current_size, false);
-													items.push(...is);
-												}
-												else if (this.NSBoxBoolean_SelectedItems.current?.getValue())
-												{
-													let is = await this.props.getItems(this.props.current_page, this.props.current_size, 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], this.props.current_size, 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, this.props.current_size, false);
-														items.push(...is);
-													}
-												}
-												else
-												{ }
-												await this.props.onFinish(items);
-											} catch (error)
-											{
-											}
-											onFinished();
-										}
-									}} />
-							</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 './NSDialogPageSelection.module.css';
+import { NSBoxRadio } from './NSBoxRadio';
+
+export interface NSDialogPageSelectionProps<RowType>
+{
+	current_page: number;
+	current_size: number;
+	max_page: number;
+	onClose: () => void;
+	getItems: (page: number, size: number, selected: boolean) => Promise<RowType[]>;
+	onFinish: (items: RowType[]) => Promise<void>;
+	icon?: string;
+}
+
+interface NSDialogPageSelectionState
+{
+	selectedRadio: string;
+}
+
+export class NSDialogPageSelection<RowType> extends Component<NSDialogPageSelectionProps<RowType>, NSDialogPageSelectionState>
+{
+	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: NSDialogPageSelectionProps<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}>
+									{/* todo: input id for check when click on labels */}
+									<NSBoxRadio
+										ref={this.NSBoxBoolean_CurrentPage}
+										required={false}
+										defaultValue={true}
+										title={"Current page"}
+										hideHeader
+										checked={this.state.selectedRadio === 'current_page'}
+										onClicked={() => this.handleRadioChange('current_page')}
+									/>
+									<NSBoxRadio
+										ref={this.NSBoxBoolean_SelectedItems}
+										required={false}
+										title={"Only Selected Items"}
+										hideHeader
+										checked={this.state.selectedRadio === 'selected_items'}
+										onClicked={() => this.handleRadioChange('selected_items')}
+									/>
+									<NSBoxRadio
+										ref={this.NSBoxBoolean_CustomPage}
+										title={"Custom Pages"}
+										required={false}
+										hideHeader
+										checked={this.state.selectedRadio === 'custom_page'}
+										onClicked={() => this.handleRadioChange('custom_page')}
+									/>
+									<NSBoxRadio
+										ref={this.NSBoxBoolean_AllPage}
+										title={"All Pages"}
+										required={false}
+										hideHeader
+										checked={this.state.selectedRadio === 'all_page'}
+										onClicked={() => 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"
+										validator={(_, value) =>
+										{
+											try
+											{
+												this.parseCustomPage(value);
+												return null;
+											} catch (error: any)
+											{
+												return error.message;
+											}
+										}} />
+								)}
+								<NSSpace size={NSSpaceSizeType.SMALL} />
+								<NSButtonBlue
+									style={{ width: "100%" }}
+									title='Apply'
+									onClick={{
+										action: async (onFinished) =>
+										{
+											try
+											{
+												let items: RowType[] = [];
+												if (this.NSBoxBoolean_CurrentPage.current?.getValue())
+												{
+													let is = await this.props.getItems(this.props.current_page, this.props.current_size, false);
+													items.push(...is);
+												}
+												else if (this.NSBoxBoolean_SelectedItems.current?.getValue())
+												{
+													let is = await this.props.getItems(this.props.current_page, this.props.current_size, 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], this.props.current_size, 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, this.props.current_size, false);
+														items.push(...is);
+													}
+												}
+												else
+												{ }
+												await this.props.onFinish(items);
+											} catch (error)
+											{
+											}
+											onFinished();
+										}
+									}} />
+							</div>
+						</div>
+						<div className={Styles.ns_toast_background}></div>
+					</>
+				}
+			</>
+		);
+	}
 }