namirasoft-site-react 1.3.251 → 1.3.254

package/src/components/NSBoxInteger.tsx

@@ -12,9 +12,10 @@ import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
 export interface INSBoxIntegerProps extends IBaseComponentProps, IValidationProps, IValidationNumberProps
 {
 	title: string;
-	defaultValue?: number;
-	onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 	placeholder?: string;
+	defaultValue?: number;
+	onChanged?: (e: NSBoxInteger) => void;
+	onClicked?: (e: NSBoxInteger) => void;
 }
 
 export interface INSBoxIntegerState
@@ -46,41 +47,40 @@ export class NSBoxInteger extends React.Component<INSBoxIntegerProps, INSBoxInte
 		if (error)
 		{
 			this.setState({ error });
-			setTimeout(() =>
-			{
-				this.setState({ error: "" });
-			}, 7000);
 			throw new Error(error);
 		}
 		return this.state.value;
 	}
 	setValue(value: number | undefined): void
 	{
-		this.setState({ value });
+		this.setState({ value }, () =>
+		{
+			if (this.props.onChanged)
+				this.props.onChanged(this);
+		});
 	}
 	private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
 	{
 		this.setValue(parseInt(e.target.value));
-		if (this.props.onChanged)
-			this.props.onChanged(e);
 	}
 	override render()
 	{
 		return (
 			<>
-				<div className={`${Styles.ns_input_parent}   ${this.props.classList?.join(" ")}`} style={this.props.style}>
+				<div id={this.props.id} className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
 					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
 					<input
-						id={this.props.id}
-						value={this.state.value}
-						onChange={this.onChanged}
 						type="number"
+						name={this.props.name}
 						className={Styles.ns_input}
 						placeholder={this.props.placeholder}
+						value={this.state.value}
+						onChange={this.onChanged}
+						onClick={() => this.props.onClicked}
 						style={{ background: `url(${IconInputInteger}) white no-repeat scroll center right 16px` }}
 					/>
 				</div>
-				<NSBoxErrorNotifier error={this.state.error} />
+				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
 			</>
 		);
 	}

package/src/components/NSBoxLabel.tsx

@@ -3,8 +3,9 @@
 import Styles from './NSBoxLabel.module.css'
 import React from "react";
 import { ReactNode } from "react";
+import { IBaseComponentProps } from '../main';
 
-export interface INSBoxLabelProps
+export interface INSBoxLabelProps extends IBaseComponentProps
 {
     title: string;
     children: ReactNode;
@@ -18,7 +19,7 @@ export class NSBoxLabel extends React.Component<INSBoxLabelProps, INSBoxLabelSta
     override render()
     {
         return (
-            <div className={Styles.ns_tab_item}>
+            <div id={this.props.id} className={`${Styles.ns_tab_item} ${this.props.classList?.join(" ")}`} style={this.props.style}>
                 <span className={`${Styles.ns_box_label_title} ns_font_16_bold`}>{this.props.title}</span>
                 <div>
                     {this.props.children}

package/src/components/NSBoxOTP.tsx

@@ -4,6 +4,8 @@ import { IBaseComponentProps } from '../main';
 
 interface INSBoxOTPProps extends IBaseComponentProps
 {
+    placeholder?: string;
+    defaultValue?: string;
     onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
@@ -41,21 +43,23 @@ function NSBoxOTP(props: INSBoxOTPProps)
     };
 
     return (
-        <div style={{ display: 'flex', gap: '10px' }}>
-            {values.map((value, index) => (
-                <input
-                    key={index + 10}
-                    ref={el => inputsRef.current[index] = el}
-                    type="text"
-                    value={value}
-                    onChange={handleChange(index)}
-                    onKeyDown={handleKeyDown(index)}
-                    maxLength={1}
-                    style={{ width: '30px', textAlign: 'center' }}
-                    className={Styles.ns_otp_input}
-                />
-            ))}
-        </div>
+        <div id={props.id} className={`${Styles.ns_input_parent} ${props.classList?.join(" ")}`} style={{ ...props.style, display: 'flex', gap: '10px' }}>
+            {
+                values.map((value, index) => (
+                    <input
+                        key={index + 10}
+                        ref={el => inputsRef.current[index] = el}
+                        type="text"
+                        value={value}
+                        onChange={handleChange(index)}
+                        onKeyDown={handleKeyDown(index)}
+                        maxLength={1}
+                        style={{ width: '30px', textAlign: 'center' }}
+                        className={Styles.ns_otp_input}
+                    />
+                ))
+            }
+        </div >
     );
 };
 

package/src/components/NSBoxPassword.tsx

@@ -12,9 +12,10 @@ import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
 export interface INSBoxPasswordProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
 {
 	title: string;
-	defaultValue?: string;
-	onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 	placeholder?: string;
+	defaultValue?: string;
+	onChanged?: (e: NSBoxPassword) => void;
+	onClicked?: (e: NSBoxPassword) => void;
 }
 
 export interface INSBoxPasswordState 
@@ -46,41 +47,40 @@ export class NSBoxPassword extends React.Component<INSBoxPasswordProps, INSBoxPa
 		if (error)
 		{
 			this.setState({ error });
-			setTimeout(() =>
-			{
-				this.setState({ error: "" });
-			}, 7000);
 			throw new Error(error);
 		}
 		return this.state.value;
 	}
 	setValue(value: string): void
 	{
-		this.setState({ value });
+		this.setState({ value }, () =>
+		{
+			if (this.props.onChanged)
+				this.props.onChanged(this);
+		});
 	}
 	private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
 	{
 		this.setValue(e.target.value);
-		if (this.props.onChanged)
-			this.props.onChanged(e);
 	}
 	override render()
 	{
 		return (
 			<>
-				<div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
+				<div id={this.props.id} className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
 					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
 					<input
-						id={this.props.id}
-						value={this.state.value}
-						onChange={this.onChanged}
 						type="password"
+						name={this.props.name}
 						className={Styles.ns_input}
 						placeholder={this.props.placeholder}
+						value={this.state.value}
+						onChange={this.onChanged}
+						onClick={() => this.props.onClicked}
 						style={{ background: `url(${IconInputString}) white no-repeat scroll center right 16px` }}
 					/>
 				</div>
-				<NSBoxErrorNotifier error={this.state.error} />
+				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
 			</>
 		);
 	}

package/src/components/NSBoxPhone.tsx

@@ -17,9 +17,10 @@ import CopyToClipboard from '../CopyToClipboard';
 export interface INSBoxPhoneProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
 {
 	title: string;
-	defaultValue?: string;
-	onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 	placeholder?: string;
+	defaultValue?: string;
+	onChanged?: (e: NSBoxPhone) => void;
+	onClicked?: (e: NSBoxPhone) => void;
 }
 
 export interface INSBoxPhoneState
@@ -52,12 +53,7 @@ export class NSBoxPhone extends React.Component<INSBoxPhoneProps, INSBoxPhoneSta
 		if (error)
 		{
 			this.setState({ error });
-			setTimeout(() =>
-			{
-				this.setState({ error: "" });
-			}, 8000);
 			throw new Error(error);
-		
 		}
 		return this.state.value;
 	}
@@ -74,7 +70,6 @@ export class NSBoxPhone extends React.Component<INSBoxPhoneProps, INSBoxPhoneSta
 		return (
 			<>
 				<div id={this.props.id} className={`${Styles.ns_input_phone_parent} ${Styles.ns_input_parent} ${this.props.classList?.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`} style={this.props.style}>
-
 					<div className="d-flex justify-content-between align-item-center">
 						<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
 						<div className="d-flex gap-1">
@@ -108,7 +103,7 @@ export class NSBoxPhone extends React.Component<INSBoxPhoneProps, INSBoxPhoneSta
 						}}
 					/>
 				</div >
-				<NSBoxErrorNotifier error={this.state.error} />
+				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
 			</>
 		);
 	}

package/src/components/NSBoxPrice.tsx

@@ -12,9 +12,10 @@ import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
 export interface INSBoxPriceProps extends IBaseComponentProps, IValidationProps, IValidationNumberProps 
 {
 	title: string;
+	placeholder?: number;
 	defaultValue?: number;
-	onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-	placeholder?: string;
+	onChanged?: (e: NSBoxPrice) => void;
+	onClicked?: (e: NSBoxPrice) => void;
 }
 
 export interface INSBoxPriceState
@@ -46,43 +47,42 @@ export class NSBoxPrice extends React.Component<INSBoxPriceProps, INSBoxPriceSta
 		if (error)
 		{
 			this.setState({ error });
-			setTimeout(() =>
-			{
-				this.setState({ error: "" });
-			}, 7000);
 			throw new Error(error);
 		}
 		return this.state.value;
 	}
 	setValue(value: number | undefined): void
 	{
-		this.setState({ value });
+		this.setState({ value }, () =>
+		{
+			if (this.props.onChanged)
+				this.props.onChanged(this);
+		});
 	}
 	private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
 	{
 		this.setValue(parseFloat(e.target.value));
-		if (this.props.onChanged)
-			this.props.onChanged(e);
 	}
 	override render()
 	{
 		return (
 			<>
-				<div className={`${Styles.ns_input_parent}   ${this.props.classList?.join(" ")}`} style={this.props.style}>
+				<div id={this.props.id} className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
 					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
 					<input
-						id={this.props.id}
+						type="number"
+						name={this.props.name}
+						className={Styles.ns_input}
+						placeholder={this.props.placeholder?.toString.name}
 						value={this.state.value}
 						onChange={this.onChanged}
-						type="number"
+						onClick={() => this.props.onClicked}
 						step="0.01"
 						min="0"
-						className={Styles.ns_input}
-						placeholder={this.props.placeholder}
 						style={{ background: `url(${IconInputFloat}) white no-repeat scroll center right 16px` }}
 					/>
 				</div>
-				<NSBoxErrorNotifier error={this.state.error} />
+				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
 			</>
 		);
 	}

package/src/components/NSBoxString.tsx

@@ -15,9 +15,10 @@ import CopyToClipboard from '../CopyToClipboard';
 export interface INSBoxStringProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
 {
 	title: string;
-	defaultValue?: string;
-	onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 	placeholder?: string;
+	defaultValue?: string;
+	onChanged?: (e: NSBoxString) => void;
+	onClicked?: (e: NSBoxString) => void;
 }
 
 export interface INSBoxStringState 
@@ -51,24 +52,21 @@ export class NSBoxString extends React.Component<INSBoxStringProps, INSBoxString
 		if (error)
 		{
 			this.setState({ error });
-			setTimeout(() =>
-			{
-				this.setState({ error: "" });
-			}, 7000);
-			// throw new Error(error);
-			return '';
+			throw new Error(error);
 		}
 		return this.state.value;
 	}
 	setValue(value: string): void
 	{
-		this.setState({ value });
+		this.setState({ value }, () =>
+		{
+			if (this.props.onChanged)
+				this.props.onChanged(this);
+		});
 	}
 	private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
 	{
 		this.setValue(e.target.value);
-		if (this.props.onChanged)
-			this.props.onChanged(e);
 	}
 	private toggleFullScreen(): void
 	{
@@ -78,7 +76,7 @@ export class NSBoxString extends React.Component<INSBoxStringProps, INSBoxString
 	{
 		return (
 			<>
-				<div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`} style={this.props.style}>
+				<div id={this.props.id} className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`} style={this.props.style}>
 					<div className="d-flex justify-content-between align-items-center">
 						<span className={Styles.ns_input_title}>
 							{this.props.required && <span style={{ color: "red" }}>*</span>} {this.props.title}
@@ -103,14 +101,16 @@ export class NSBoxString extends React.Component<INSBoxStringProps, INSBoxString
 						</div>
 					</div>
 					<input
-						id={this.props.id}
-						value={this.state.value}
-						onChange={this.onChanged}
 						type="text"
+						name={this.props.name}
 						className={Styles.ns_input}
 						placeholder={this.props.placeholder}
+						value={this.state.value}
+						onChange={this.onChanged}
+						onClick={() => this.props.onClicked}
 						style={{ background: `url(${IconInputString}) white no-repeat scroll center right 16px` }}
 					/>
+					{/* Todo make a new component for fullscreen */}
 					<div className={Styles.ns_input_modal_full_screen} style={{ display: this.state.isFullScreen === false ? "none" : "block" }} >
 						<div>
 							<img
@@ -129,7 +129,7 @@ export class NSBoxString extends React.Component<INSBoxStringProps, INSBoxString
 						></textarea>
 					</div>
 				</div>
-				<NSBoxErrorNotifier error={this.state.error} />
+				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
 			</>
 		);
 	}

package/src/components/NSBoxTextArea.tsx

@@ -15,9 +15,10 @@ import CopyToClipboard from '../CopyToClipboard';
 export interface INSBoxTextAreaProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
 {
 	title: string;
-	defaultValue?: string;
-	onChanged?: () => void;
 	placeholder?: string;
+	defaultValue?: string;
+	onChanged?: (e: NSBoxTextArea) => void;
+	onClicked?: (e: NSBoxTextArea) => void;
 	cols?: number;
 	rows?: number;
 }
@@ -53,25 +54,22 @@ export class NSBoxTextArea extends React.Component<INSBoxTextAreaProps, INSBoxTe
 		if (error)
 		{
 			this.setState({ error });
-			setTimeout(() =>
-			{
-				this.setState({ error: "" });
-			}, 7000);
-			// throw new Error(error);
-			return '';
+			throw new Error(error);
 		}
 		return this.state.value;
-
 	}
 	setValue(value: string): void
 	{
-		this.setState({ value });
+		this.setState({ value }, () =>
+		{
+			if (this.props.onChanged)
+				this.props.onChanged(this);
+		}
+		);
 	}
 	private onChanged = async (e: React.ChangeEvent<HTMLTextAreaElement>): Promise<void> =>
 	{
 		await this.setValue(e.target.value);
-		if (this.props.onChanged)
-			this.props.onChanged();
 	}
 	private toggleFullScreen(): void
 	{
@@ -81,7 +79,7 @@ export class NSBoxTextArea extends React.Component<INSBoxTextAreaProps, INSBoxTe
 	{
 		return (
 			<>
-				<div className={`${Styles.ns_text_area_parent} ${this.props.classList?.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`} style={this.props.style} onClick={this.state.isFullScreen ? ()=>{} : ()=>{}}>
+				<div id={this.props.id} className={`${Styles.ns_text_area_parent} ${this.props.classList?.join(" ")} ${this.state.isFullScreen ? Styles.ns_full_screen : ""}`} style={this.props.style} onClick={this.state.isFullScreen ? () => { } : () => { }}>
 					<div className="d-flex justify-content-between align-items-center">
 						<span className={Styles.ns_input_title}>
 							{this.props.required && <span style={{ color: "red" }}>*</span>} {this.props.title}
@@ -115,17 +113,15 @@ export class NSBoxTextArea extends React.Component<INSBoxTextAreaProps, INSBoxTe
 							}}
 							cols={this.props.cols}
 							rows={this.props.rows}
-							id={this.props.id}
 							value={this.state.value}
 							className={Styles.ns_text_area}
 							placeholder={this.props.placeholder}
 							onChange={this.onChanged}
+							onClick={() => this.props.onClicked}
 						/>
-
-
 					</div>
 				</div>
-				<NSBoxErrorNotifier error={this.state.error} />
+				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
 			</>
 		);
 	}

package/src/components/NSBoxTime.tsx

@@ -12,9 +12,10 @@ import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
 export interface INSBoxTimeProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
 {
 	title: string;
-	defaultValue?: string;
-	onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 	placeholder?: string;
+	defaultValue?: string;
+	onChanged?: (e: NSBoxTime) => void;
+	onClicked?: (e: NSBoxTime) => void;
 }
 
 export interface INSBoxTimeState
@@ -47,42 +48,41 @@ export class NSBoxTime extends React.Component<INSBoxTimeProps, INSBoxTimeState>
 		if (error)
 		{
 			this.setState({ error });
-			setTimeout(() =>
-			{
-				this.setState({ error: "" });
-			}, 7000);
 			throw new Error(error);
 		}
 		return this.state.value;
 	}
 	setValue(value: string): void
 	{
-		this.setState({ value });
+		this.setState({ value }, () =>
+		{
+			if (this.props.onChanged)
+				this.props.onChanged(this);
+		});
 	}
 	private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
 	{
 		this.setValue(e.target.value);
-		if (this.props.onChanged)
-			this.props.onChanged(e);
 	}
 	override render()
 	{
 		return (
 			<>
-				<div className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
+				<div id={this.props.id} className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style}>
 					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
 					<input
-						id={this.props.id}
-						value={this.state.value}
-						onChange={this.onChanged}
 						type="time"
+						name={this.props.name}
 						className={Styles.ns_input}
 						placeholder={this.props.placeholder}
+						value={this.state.value}
+						onChange={this.onChanged}
+						onClick={() => this.props.onClicked}
 						step="2"
 						style={{ background: `url(${IconInputTime}) white no-repeat scroll center right 16px` }}
 					/>
 				</div>
-				<NSBoxErrorNotifier error={this.state.error} />
+				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
 			</>
 		);
 	}

package/src/components/NSFilterBoxDialog.tsx

@@ -30,7 +30,7 @@ export class NSFilterBoxDialog extends Component<INSFilterBoxDialogProps, INSFil
 				</h3>
 				<NSBoxEnum
 					title={"this.props.title"}
-					placeHolder=""
+					placeholder=""
 					options={[]}
 					multiple={false}
 					required={false}
@@ -38,7 +38,7 @@ export class NSFilterBoxDialog extends Component<INSFilterBoxDialogProps, INSFil
 
 				<NSBoxEnum
 					title={"this.props.title"}
-					placeHolder=""
+					placeholder=""
 					options={[]}
 					multiple={false}
 					required={false}

package/src/components/NSGroupedList.module.css

@@ -9,6 +9,7 @@
 	overflow: auto;
 	position: absolute;
 	z-index: 10;
+	margin-top: 50px;
 }
 
 .ns_group_list_parent::-webkit-scrollbar {