namirasoft-site-react 1.4.111 → 1.4.113

package/src/components/NSPageSelectionModal.tsx

@@ -1,229 +1,229 @@
-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}>
-									{/* todo: input id for check when click on labels */}
-									<NSBoxRadio
-										defaultValue={true}
-										ref={this.NSBoxBoolean_CurrentPage}
-										title={"Current page"}
-										required={false}
-										name={"PageSelection"}
-										isSelected={this.state.selectedRadio === 'current_page'}
-										onClicked={() => this.handleRadioChange('current_page')}
-									/>
-									<NSBoxRadio
-										ref={this.NSBoxBoolean_SelectedItems}
-										title={"Only Selected Items"}
-										required={false}
-										name={"PageSelection"}
-										isSelected={this.state.selectedRadio === 'selected_items'}
-										onClicked={() => this.handleRadioChange('selected_items')}
-									/>
-									<NSBoxRadio
-										ref={this.NSBoxBoolean_CustomPage}
-										title={"Custom Pages"}
-										required={false}
-										name={"PageSelection"}
-										isSelected={this.state.selectedRadio === 'custom_page'}
-										onClicked={() => this.handleRadioChange('custom_page')}
-									/>
-									<NSBoxRadio
-										ref={this.NSBoxBoolean_AllPage}
-										title={"All Pages"}
-										required={false}
-										name={"PageSelection"}
-										isSelected={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"
-										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}>
+									{/* todo: input id for check when click on labels */}
+									<NSBoxRadio
+										defaultValue={true}
+										ref={this.NSBoxBoolean_CurrentPage}
+										title={"Current page"}
+										required={false}
+										name={"PageSelection"}
+										isSelected={this.state.selectedRadio === 'current_page'}
+										onClicked={() => this.handleRadioChange('current_page')}
+									/>
+									<NSBoxRadio
+										ref={this.NSBoxBoolean_SelectedItems}
+										title={"Only Selected Items"}
+										required={false}
+										name={"PageSelection"}
+										isSelected={this.state.selectedRadio === 'selected_items'}
+										onClicked={() => this.handleRadioChange('selected_items')}
+									/>
+									<NSBoxRadio
+										ref={this.NSBoxBoolean_CustomPage}
+										title={"Custom Pages"}
+										required={false}
+										name={"PageSelection"}
+										isSelected={this.state.selectedRadio === 'custom_page'}
+										onClicked={() => this.handleRadioChange('custom_page')}
+									/>
+									<NSBoxRadio
+										ref={this.NSBoxBoolean_AllPage}
+										title={"All Pages"}
+										required={false}
+										name={"PageSelection"}
+										isSelected={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"
+										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,111 +1,111 @@
-.ns_pagination_container {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-	text-align: left;
-	font-size: 14px;
-	justify-items: center;
-	width: 100%;
-	max-width: max-content;
-	flex-wrap: wrap;
-	gap: 16px 0;
-}
-
-.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
-}
-
-@media only screen and (min-width: 480px) {
-	.ns_pagination_container {
-		justify-content: space-between;
-		flex-wrap: nowrap;
-	}
+.ns_pagination_container {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	text-align: left;
+	font-size: 14px;
+	justify-items: center;
+	width: 100%;
+	max-width: max-content;
+	flex-wrap: wrap;
+	gap: 16px 0;
+}
+
+.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
+}
+
+@media only screen and (min-width: 480px) {
+	.ns_pagination_container {
+		justify-content: space-between;
+		flex-wrap: nowrap;
+	}
 }