namirasoft-site-react 1.4.53 → 1.4.56

package/src/components/NSBoxPhone.tsx

@@ -15,8 +15,8 @@ export interface INSBoxPhoneProps extends IBaseComponentProps, IValidationProps,
 	title: string;
 	placeholder?: string;
 	defaultValue?: string;
-	onChanged?: (e: NSBoxPhone) => void;
-	onClicked?: (e: NSBoxPhone) => void;
+	onChanged?: (e: NSBoxPhone) => void; //todo: Useless onChanged
+	onClicked?: (e: NSBoxPhone) => void; //todo: Useless onClicked
 }
 
 export interface INSBoxPhoneState
@@ -62,7 +62,7 @@ export class NSBoxPhone extends React.Component<INSBoxPhoneProps, INSBoxPhoneSta
 			return '+' + cleanedNumber.replace(/^\++/, '');
 	}
 
-	setValue(value: string): void
+	setValue(value: string): void //todo: Pass Callback give type error 
 	{
 		this.setState({ value });
 	}

package/src/components/NSBoxPrice.tsx

@@ -13,7 +13,7 @@ export interface INSBoxPriceProps extends IBaseComponentProps, IValidationProps,
 	title: string;
 	placeholder?: number;
 	defaultValue?: number;
-	onChanged?: (e: NSBoxPrice) => void;
+	onChanged?: (e: NSBoxPrice, callback?: () => void) => void;
 	onClicked?: (e: NSBoxPrice) => void;
 }
 
@@ -53,12 +53,14 @@ export class NSBoxPrice extends React.Component<INSBoxPriceProps, INSBoxPriceSta
 		}
 		return this.state.value;
 	}
-	setValue(value: number | undefined): void
+	setValue(value: number | undefined, callback?: () => void): void
 	{
 		this.setState({ value }, () =>
 		{
 			if (this.props.onChanged)
-				this.props.onChanged(this);
+				this.props.onChanged(this, callback);
+			else if (callback)
+				callback();
 		});
 	}
 	private onChanged(e: React.ChangeEvent<HTMLInputElement>): void

package/src/components/NSBoxRadio.tsx

@@ -12,8 +12,8 @@ export interface INSBoxRadioProps extends IBaseComponentProps, IValidationProps,
     placeholder?: string;
     defaultValue?: boolean;
     isSelected?: boolean;
-    onChanged?: (e: NSBoxRadio) => void;
-    onClick?: () => void;
+    onChanged?: (e: NSBoxRadio, callback?: () => void) => void;
+    onClicked?: () => void;
 }
 
 export interface NSBoxBooleanState
@@ -52,20 +52,23 @@ export class NSBoxRadio extends React.Component<INSBoxRadioProps, NSBoxBooleanSt
         return this.state.value;
     }
 
-    setValue(value: boolean): void
+    setValue(value: boolean, callback?: () => void): void
     {
         this.setState({ value }, () =>
         {
             if (this.props.onChanged)
-                this.props.onChanged(this);
+				this.props.onChanged(this, callback);
+			else if (callback)
+				callback();
         });
     }
 
     private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
     {
         this.setValue(e.target.checked);
-        if (this.props.onClick)
-            this.props.onClick();
+		//todo: onClicked should call here or pass as attribute to input element -> line: 99 ?
+        if (this.props.onClicked)
+			this.props.onClicked();
     }
 
     override componentDidUpdate(prevProps: INSBoxRadioProps)
@@ -94,6 +97,7 @@ export class NSBoxRadio extends React.Component<INSBoxRadioProps, NSBoxBooleanSt
                                 className={Styles.ns_input}
                                 checked={this.state.value}
                                 onChange={this.onChanged}
+								// onClick={this.props.onClicked}
                             />
                             <span className={Styles.ns_input_title}>
                                 {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title}

package/src/components/NSBoxSearch.tsx

@@ -13,7 +13,7 @@ export interface INSBoxSearchProps extends IBaseComponentProps, IValidationProps
 	title: string;
 	placeholder?: string;
 	defaultValue?: string;
-	onChanged?: (e: NSBoxSearch) => void;
+	onChanged?: (e: NSBoxSearch, callback?: () => void) => void;
 	onClicked?: (e: NSBoxSearch) => void;
 }
 
@@ -55,12 +55,14 @@ export class NSBoxSearch extends React.Component<INSBoxSearchProps, INSBoxSearch
 		}
 		return this.state.value;
 	}
-	setValue(value: string): void
+	setValue(value: string, callback?: () => void): void
 	{
 		this.setState({ value }, () =>
 		{
 			if (this.props.onChanged)
-				this.props.onChanged(this);
+				this.props.onChanged(this, callback);
+			else if (callback)
+				callback();
 		});
 	}
 	private onChanged(e: React.ChangeEvent<HTMLInputElement>): void

package/src/components/NSBoxString.tsx

@@ -13,7 +13,7 @@ export interface INSBoxStringProps extends IBaseComponentProps, IValidationProps
 	title: string;
 	placeholder?: string;
 	defaultValue?: string;
-	onChanged?: (e: NSBoxString) => void;
+	onChanged?: (e: NSBoxString, callback?: () => void) => void;
 	onClicked?: (e: NSBoxString) => void;
 	getError?: (value: string) => string | null;
 }
@@ -60,12 +60,14 @@ export class NSBoxString extends React.Component<INSBoxStringProps, INSBoxString
 		}
 		return this.state.value;
 	}
-	setValue(value: string): void
+	setValue(value: string, callback?: () => void): void
 	{
 		this.setState({ value }, () =>
 		{
 			if (this.props.onChanged)
-				this.props.onChanged(this);
+				this.props.onChanged(this, callback);
+			else if (callback)
+				callback();
 		});
 	}
 	private onChanged(e: React.ChangeEvent<HTMLInputElement>): void

package/src/components/NSBoxTextArea.tsx

@@ -14,7 +14,7 @@ export interface INSBoxTextAreaProps extends IBaseComponentProps, IValidationPro
 	title: string;
 	placeholder?: string;
 	defaultValue?: string;
-	onChanged?: (e: NSBoxTextArea) => void;
+	onChanged?: (e: NSBoxTextArea, callback?: () => void) => void;
 	onClicked?: (e: NSBoxTextArea) => void;
 	cols?: number;
 	rows?: number;
@@ -58,12 +58,14 @@ export class NSBoxTextArea extends React.Component<INSBoxTextAreaProps, INSBoxTe
 		}
 		return this.state.value;
 	}
-	setValue(value: string): void
+	setValue(value: string, callback?: () => void): void
 	{
 		this.setState({ value }, () =>
 		{
 			if (this.props.onChanged)
-				this.props.onChanged(this);
+				this.props.onChanged(this, callback);
+			else if (callback)
+				callback();
 		}
 		);
 	}

package/src/components/NSBoxTime.tsx

@@ -13,7 +13,7 @@ export interface INSBoxTimeProps extends IBaseComponentProps, IValidationProps,
 	title: string;
 	placeholder?: string;
 	defaultValue?: string;
-	onChanged?: (e: NSBoxTime) => void;
+	onChanged?: (e: NSBoxTime, callback?: () => void) => void;
 	onClicked?: (e: NSBoxTime) => void;
 }
 
@@ -54,12 +54,14 @@ export class NSBoxTime extends React.Component<INSBoxTimeProps, INSBoxTimeState>
 		}
 		return this.state.value;
 	}
-	setValue(value: string): void
+	setValue(value: string, callback?: () => void): void
 	{
 		this.setState({ value }, () =>
 		{
 			if (this.props.onChanged)
-				this.props.onChanged(this);
+				this.props.onChanged(this, callback);
+			else if (callback)
+				callback();
 		});
 	}
 	private onChanged(e: React.ChangeEvent<HTMLInputElement>): void

package/src/components/NSPageSelectionModal.tsx

@@ -7,223 +7,223 @@ import { NSBoxRadio } from './NSBoxRadio';
 
 export interface NSPageSelectionModalProps<RowType>
 {
-    current_page: number;
-    max_page: number;
-    onClose: () => void;
-    getItems: (page: number, selected: boolean) => Promise<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;
+	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();
+	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} />
+	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'}
-                                        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);
+									<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>
-                    </>
-                }
-            </>
-        );
-    }
+											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/NSTabPage.module.css

@@ -54,7 +54,7 @@
     padding: 16px;
     border-radius: 0 8px 8px 8px;
     background-color: #fff;
-    display: grid;
+    display: grid !important;
     gap: 0;
     border-right: 1px solid #ccc;
 }