namirasoft-site-react 1.4.339 → 1.4.340

package/src/components/NSDialogPageSelection.tsx

@@ -1,228 +1,228 @@
-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;
-	max_page: number;
-	onClose: () => void;
-	getItems: (page: number, selected: boolean) => Promise<RowType[]>;
-	onFinish: (items: RowType[]) => 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={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)
-									{
-									}
-								}} />
-							</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;
+	max_page: number;
+	onClose: () => void;
+	getItems: (page: number, selected: boolean) => Promise<RowType[]>;
+	onFinish: (items: RowType[]) => 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={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)
+									{
+									}
+								}} />
+							</div>
+						</div>
+						<div className={Styles.ns_toast_background}></div>
+					</>
+				}
+			</>
+		);
+	}
 }

package/src/components/NSDownTimer.module.css

@@ -1,56 +1,56 @@
-.ns_down_timer_container {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-}
-
-.ns_figure {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-	margin: 0;
-}
-
-.ns_figure figcaption {
-	font-size: 14px;
-	font-weight: 500;
-	margin: 0 0 0 8px;
-	color: #141B5C;
-	padding: 2px 0;
-	max-width: 100px;
-}
-
-.ns_down_timer_time_container {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	gap: 4px;
-	align-items: flex-start;
-	padding: 0 8px;
-}
-
-.ns_down_timer_time_left {
-	font-size: 16px;
-	font-weight: 600;
-	color: #141B5C;
-	margin: 0;
-	padding-left: 2px;
-}
-
-.ns_down_timer_time_left_unit {
-	font-size: 12px;
-	font-weight: 400;
-	color: #141B5C;
-	margin: 0;
-	padding-left: 2px;
-}
-
-.ns_semi_colon {
-	display: flex;
-	flex-direction: row;
-	padding: 0;
-	color: #141B5C;
-	margin: 0;
+.ns_down_timer_container {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+}
+
+.ns_figure {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	margin: 0;
+}
+
+.ns_figure figcaption {
+	font-size: 14px;
+	font-weight: 500;
+	margin: 0 0 0 8px;
+	color: #141B5C;
+	padding: 2px 0;
+	max-width: 100px;
+}
+
+.ns_down_timer_time_container {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	gap: 4px;
+	align-items: flex-start;
+	padding: 0 8px;
+}
+
+.ns_down_timer_time_left {
+	font-size: 16px;
+	font-weight: 600;
+	color: #141B5C;
+	margin: 0;
+	padding-left: 2px;
+}
+
+.ns_down_timer_time_left_unit {
+	font-size: 12px;
+	font-weight: 400;
+	color: #141B5C;
+	margin: 0;
+	padding-left: 2px;
+}
+
+.ns_semi_colon {
+	display: flex;
+	flex-direction: row;
+	padding: 0;
+	color: #141B5C;
+	margin: 0;
 }