namirasoft-site-react 1.3.61 → 1.3.63

package/src/components/NSInputInteger.tsx

@@ -1,21 +1,26 @@
 "use client";
 
 import React from "react";
-import Styles from "./NSInputInteger.module.css";
+import Styles from "./NSInput.module.css";
 import IconInputInteger from '../assets/images/icon-input-integer.svg';
 import { BaseComponentProps } from "../props/BaseComponentProps";
+import { ValidationNumberProps } from "../props/ValidationNumberProps";
+import { ValidationProps } from "../props/ValidationProps";
+import { Validator } from "../Validator";
+import { NSInputErrorNotifier } from "./NSInputErrorNotifier";
 
-export interface NSInputIntegerProps extends BaseComponentProps
+export interface NSInputIntegerProps extends BaseComponentProps, ValidationProps, ValidationNumberProps
 {
     title: string;
-    defaultValue?: string;
+    defaultValue?: number;
     onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     placeholder?: string;
 }
 
 export interface NSInputIntegerState
 {
-    value: string;
+    value?: number;
+    error?: string;
 }
 
 export class NSInputInteger extends React.Component<NSInputIntegerProps, NSInputIntegerState>
@@ -23,50 +28,62 @@ export class NSInputInteger extends React.Component<NSInputIntegerProps, NSInput
     constructor(props: NSInputIntegerProps)
     {
         super(props);
-        this.state = {
-            value: props.defaultValue ?? "",
-        };
+        this.state = { value: props.defaultValue };
         this.getValue = this.getValue.bind(this);
         this.setValue = this.setValue.bind(this);
         this.onChanged = this.onChanged.bind(this);
     }
-    getValue(): string
+    getError(): string | null
     {
+        return (
+            Validator.getError(this.props.title, this.state.value, this.props) &&
+            Validator.getErrorNumber(this.props.title, this.state.value, this.props)
+        );
+    }
+    getValue(): number | undefined
+    {
+        let error = this.getError();
+        if (error)
+        {
+            this.setState({ error });
+            throw new Error(error);
+        }
         return this.state.value;
     }
-    setValue(value: string): void
+    setValue(value: number | undefined): void
     {
         this.setState({ value });
     }
     private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
     {
-        this.setValue(e.target.value);
+        this.setValue(parseInt(e.target.value));
         if (this.props.onChanged)
             this.props.onChanged(e);
     }
     override render()
     {
         return (
-            <div className={`${Styles.ns_input_parent} p-2 ${this.props.classList?.join(" ")}`} style={this.props.style}>
-                <span className={Styles.ns_input_title}>{this.props.title}</span>
-                <img
-                    className={Styles.ns_input_icon}
-                    src={IconInputInteger}
-                    alt="icon"
-                    width={24}
-                    height={24}
-                />
-                <input
-                    value={this.state.value}
-                    onChange={this.onChanged}
-                    type="number"
-                    className={Styles.ns_input}
-                    placeholder={this.props.placeholder}
-                />
-
-            </div>
+            <>
+                <div className={`${Styles.ns_input_parent} p-2 ${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>
+                    <img
+                        className={Styles.ns_input_icon}
+                        src={IconInputInteger}
+                        alt="Integer Icon"
+                        width={24}
+                        height={24}
+                    />
+                    <input
+                        id={this.props.id}
+                        value={this.state.value}
+                        onChange={this.onChanged}
+                        type="number"
+                        className={Styles.ns_input}
+                        placeholder={this.props.placeholder}
+                    />
+                </div>
+                <NSInputErrorNotifier error={this.state.error} />
+            </>
         );
     }
-}
-
-
+}

package/src/components/NSInputPassword.tsx

@@ -1,11 +1,15 @@
 "use client";
 
 import React from "react";
-import Styles from "./NSInputPassword.module.css";
+import Styles from "./NSInput.module.css";
 import IconInputString from '../assets/images/icon-input-string.svg';
 import { BaseComponentProps } from "../props/BaseComponentProps";
+import { ValidationProps } from "../props/ValidationProps";
+import { ValidationStringProps } from "../props/ValidationStringProps";
+import { Validator } from "../Validator";
+import { NSInputErrorNotifier } from "./NSInputErrorNotifier";
 
-export interface NSInputPasswordProps extends BaseComponentProps
+export interface NSInputPasswordProps extends BaseComponentProps, ValidationProps, ValidationStringProps
 {
     title: string;
     defaultValue?: string;
@@ -16,6 +20,7 @@ export interface NSInputPasswordProps extends BaseComponentProps
 export interface NSInputPasswordState 
 {
     value: string;
+    error?: string;
 }
 
 export class NSInputPassword extends React.Component<NSInputPasswordProps, NSInputPasswordState>
@@ -23,15 +28,26 @@ export class NSInputPassword extends React.Component<NSInputPasswordProps, NSInp
     constructor(props: NSInputPasswordProps)
     {
         super(props);
-        this.state = {
-            value: props.defaultValue ?? "",
-        };
+        this.state = { value: props.defaultValue ?? "" };
         this.getValue = this.getValue.bind(this);
         this.setValue = this.setValue.bind(this);
         this.onChanged = this.onChanged.bind(this);
     }
+    getError(): string | null
+    {
+        return (
+            Validator.getError(this.props.title, this.state.value, this.props) &&
+            Validator.getErrorString(this.props.title, this.state.value, this.props)
+        );
+    }
     getValue(): string
     {
+        let error = this.getError();
+        if (error)
+        {
+            this.setState({ error });
+            throw new Error(error);
+        }
         return this.state.value;
     }
     setValue(value: string): void
@@ -47,24 +63,27 @@ export class NSInputPassword extends React.Component<NSInputPasswordProps, NSInp
     override render()
     {
         return (
-            <div className={`${Styles.ns_input_parent} p-2 ${this.props.classList?.join(" ")}`} style={this.props.style}>
-
-                <span className={Styles.ns_input_title}>{this.props.title}</span>
-                <img
-                    className={Styles.ns_input_icon}
-                    src={IconInputString}
-                    alt="icon"
-                    width={24}
-                    height={24}
-                />
-                <input
-                    value={this.state.value}
-                    onChange={this.onChanged}
-                    type="password"
-                    className={Styles.ns_input}
-                    placeholder={this.props.placeholder}
-                />
-            </div>
+            <>
+                <div className={`${Styles.ns_input_parent} p-2 ${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>
+                    <img
+                        className={Styles.ns_input_icon}
+                        src={IconInputString}
+                        alt="Password Icon"
+                        width={24}
+                        height={24}
+                    />
+                    <input
+                        id={this.props.id}
+                        value={this.state.value}
+                        onChange={this.onChanged}
+                        type="password"
+                        className={Styles.ns_input}
+                        placeholder={this.props.placeholder}
+                    />
+                </div>
+                <NSInputErrorNotifier error={this.state.error} />
+            </>
         );
     }
 }

package/src/components/NSInputPhone.tsx

@@ -1,21 +1,28 @@
 "use client";
 
 import React from "react";
-import Styles from "./NSInputPhone.module.css";
+import Styles from "./NSInput.module.css";
 import IconInputPhone from '../assets/images/icon-input-phone.svg';
 import PhoneInput from 'react-phone-input-2'
 import 'react-phone-input-2/lib/style.css'
 import { BaseComponentProps } from "../props/BaseComponentProps";
+import { ValidationProps } from "../props/ValidationProps";
+import { ValidationStringProps } from "../props/ValidationStringProps";
+import { Validator } from "../Validator";
+import { NSInputErrorNotifier } from "./NSInputErrorNotifier";
 
-export interface NSInputPhoneProps extends BaseComponentProps
+export interface NSInputPhoneProps extends BaseComponentProps, ValidationProps, ValidationStringProps
 {
     title: string;
+    defaultValue?: string;
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     placeholder?: string;
 }
 
 export interface NSInputPhoneState
 {
     value: string;
+    error?: string;
 }
 
 export class NSInputPhone extends React.Component<NSInputPhoneProps, NSInputPhoneState>
@@ -23,45 +30,54 @@ export class NSInputPhone extends React.Component<NSInputPhoneProps, NSInputPhon
     constructor(props: NSInputPhoneProps)
     {
         super(props);
-        this.state = {
-            value: "",
-        };
+        this.state = { value: props.defaultValue ?? "" };
         this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
-        this.setDefaultValue = this.setDefaultValue.bind(this);
     }
-    setValue(value: string): void
-    {
-        this.setState({ value });
-    }
-    setDefaultValue(value: string): void
+    getError(): string | null
     {
-        this.setState({ value });
+        return (
+            Validator.getError(this.props.title, this.state.value, this.props) &&
+            Validator.getErrorString(this.props.title, this.state.value, this.props)
+        );
     }
     getValue(): string
     {
+        let error = this.getError();
+        if (error)
+        {
+            this.setState({ error });
+            throw new Error(error);
+        }
         return this.state.value;
     }
+    setValue(value: string): void
+    {
+        this.setState({ value });
+    }
     override render()
     {
         return (
-            <div className={`${Styles.ns_input_parent} p-2 ${this.props.classList?.join(" ")}`} style={this.props.style}>
-                <span className={Styles.ns_input_title}>{this.props.title}</span>
-                <img
-                    className={Styles.ns_input_icon}
-                    src={IconInputPhone}
-                    alt="icon"
-                    width={24}
-                    height={24}
-                />
-                <PhoneInput
-                    inputClass={Styles.ns_input}
-                    country={'us'}
-                    value={this.state.value}
-                    onChange={this.setValue}
-                    placeholder={this.props.placeholder}
-                />
-            </div>
+            <>
+                <div id={this.props.id} className={`${Styles.ns_input_parent} p-2 ${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>
+                    <img
+                        className={Styles.ns_input_icon}
+                        src={IconInputPhone}
+                        alt="Phone Icon"
+                        width={24}
+                        height={24}
+                    />
+                    <PhoneInput
+                        value={this.state.value}
+                        onChange={this.setValue}
+                        country={'us'}
+                        inputClass={Styles.ns_input}
+                        placeholder={this.props.placeholder}
+                    />
+                </div >
+                <NSInputErrorNotifier error={this.state.error} />
+            </>
         );
     }
 }

package/src/components/NSInputPrice.tsx

@@ -1,20 +1,26 @@
 "use client";
 
 import React from "react";
-import Styles from "./NSInputPrice.module.css";
+import Styles from "./NSInput.module.css";
 import IconInputPrice from '../assets/images/icon-input-price.svg';
 import { BaseComponentProps } from "../props/BaseComponentProps";
+import { ValidationProps } from "../props/ValidationProps";
+import { ValidationNumberProps } from "../props/ValidationNumberProps";
+import { Validator } from "../Validator";
+import { NSInputErrorNotifier } from "./NSInputErrorNotifier";
 
-export interface NSInputPriceProps extends BaseComponentProps
+export interface NSInputPriceProps extends BaseComponentProps, ValidationProps, ValidationNumberProps
 {
     title: string;
     defaultValue?: number;
     onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
 }
 
 export interface NSInputPriceState
 {
-    value: number | undefined;
+    value?: number;
+    error?: string;
 }
 
 export class NSInputPrice extends React.Component<NSInputPriceProps, NSInputPriceState>
@@ -22,15 +28,26 @@ export class NSInputPrice extends React.Component<NSInputPriceProps, NSInputPric
     constructor(props: NSInputPriceProps)
     {
         super(props);
-        this.state = {
-            value: props.defaultValue ?? undefined,
-        };
+        this.state = { value: props.defaultValue };
         this.getValue = this.getValue.bind(this);
         this.setValue = this.setValue.bind(this);
         this.onChanged = this.onChanged.bind(this);
     }
+    getError(): string | null
+    {
+        return (
+            Validator.getError(this.props.title, this.state.value, this.props) &&
+            Validator.getErrorNumber(this.props.title, this.state.value, this.props)
+        );
+    }
     getValue(): number | undefined
     {
+        let error = this.getError();
+        if (error)
+        {
+            this.setState({ error });
+            throw new Error(error);
+        }
         return this.state.value;
     }
     setValue(value: number): void
@@ -46,23 +63,28 @@ export class NSInputPrice extends React.Component<NSInputPriceProps, NSInputPric
     override render()
     {
         return (
-            <div className={`${Styles.ns_input_parent} p-2 ${this.props.classList?.join(" ")}`} style={this.props.style}>
-                <img
-                    className={Styles.ns_input_icon}
-                    src={IconInputPrice}
-                    alt="icon"
-                    width={24}
-                    height={24}
-                />
-                <input
-                    value={this.state.value}
-                    onChange={this.onChanged}
-                    type="number"
-                    step="20"
-                    className={Styles.ns_input}
-                    placeholder="$1000"
-                />
-            </div>
+            <>
+                <div className={`${Styles.ns_input_parent} p-2 ${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>
+                    <img
+                        className={Styles.ns_input_icon}
+                        src={IconInputPrice}
+                        alt="Price Icon"
+                        width={24}
+                        height={24}
+                    />
+                    <input
+                        id={this.props.id}
+                        value={this.state.value}
+                        onChange={this.onChanged}
+                        type="number"
+                        step="20"
+                        className={Styles.ns_input}
+                        placeholder={this.props.placeholder}
+                    />
+                </div>
+                <NSInputErrorNotifier error={this.state.error} />
+            </>
         );
     }
 }

package/src/components/NSInputSearch.tsx

@@ -1,12 +1,17 @@
 "use client";
 
 import React from "react";
-import Styles from "./NSInputSearch.module.css";
+import Styles from "./NSInput.module.css";
 import IconInputSearch from '../assets/images/icon-input-search.svg';
 import { BaseComponentProps } from "../props/BaseComponentProps";
+import { ValidationProps } from "../props/ValidationProps";
+import { ValidationStringProps } from "../props/ValidationStringProps";
+import { Validator } from "../Validator";
+import { NSInputErrorNotifier } from "./NSInputErrorNotifier";
 
-export interface NSInputSearchProps extends BaseComponentProps
+export interface NSInputSearchProps extends BaseComponentProps, ValidationProps, ValidationStringProps
 {
+    title: string;
     defaultValue?: string;
     onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     placeholder?: string;
@@ -15,6 +20,7 @@ export interface NSInputSearchProps extends BaseComponentProps
 export interface NSInputSearchState
 {
     value: string;
+    error?: string;
 }
 
 export class NSInputSearch extends React.Component<NSInputSearchProps, NSInputSearchState>
@@ -22,15 +28,26 @@ export class NSInputSearch extends React.Component<NSInputSearchProps, NSInputSe
     constructor(props: NSInputSearchProps)
     {
         super(props);
-        this.state = {
-            value: props.defaultValue ?? "",
-        };
+        this.state = { value: props.defaultValue ?? "" };
         this.getValue = this.getValue.bind(this);
         this.setValue = this.setValue.bind(this);
         this.onChanged = this.onChanged.bind(this);
     }
+    getError(): string | null
+    {
+        return (
+            Validator.getError(this.props.title, this.state.value, this.props) &&
+            Validator.getErrorString(this.props.title, this.state.value, this.props)
+        );
+    }
     getValue(): string
     {
+        let error = this.getError();
+        if (error)
+        {
+            this.setState({ error });
+            throw new Error(error);
+        }
         return this.state.value;
     }
     setValue(value: string): void
@@ -46,22 +63,27 @@ export class NSInputSearch extends React.Component<NSInputSearchProps, NSInputSe
     override render()
     {
         return (
-            <div className={`${Styles.ns_input_form} p-2 ${this.props.classList?.join(" ")}`} style={this.props.style}>
-                <img
-                    className={Styles.ns_input_icon}
-                    src={IconInputSearch}
-                    alt="icon"
-                    width={22}
-                    height={22}
-                />
-                <input
-                    value={this.state.value}
-                    onChange={this.onChanged}
-                    type="text"
-                    className={Styles.ns_input}
-                    placeholder={this.props.placeholder}
-                />
-            </div>
+            <>
+                <div className={`${Styles.ns_input_parent} p-2 ${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>
+                    <img
+                        className={Styles.ns_input_icon}
+                        src={IconInputSearch}
+                        alt="Search Icon"
+                        width={24}
+                        height={24}
+                    />
+                    <input
+                        id={this.props.id}
+                        value={this.state.value}
+                        onChange={this.onChanged}
+                        type="text"
+                        className={Styles.ns_input}
+                        placeholder={this.props.placeholder}
+                    />
+                </div>
+                <NSInputErrorNotifier error={this.state.error} />
+            </>
         );
     }
 }

package/src/components/NSInputString.tsx

@@ -1,11 +1,15 @@
 "use client";
 
 import React from "react";
-import Styles from "./NSInputString.module.css";
+import Styles from "./NSInput.module.css";
 import IconInputString from '../assets/images/icon-input-string.svg';
 import { BaseComponentProps } from "../props/BaseComponentProps";
+import { ValidationProps } from "../props/ValidationProps";
+import { ValidationStringProps } from "../props/ValidationStringProps";
+import { Validator } from "../Validator";
+import { NSInputErrorNotifier } from "./NSInputErrorNotifier";
 
-export interface NSInputStringProps extends BaseComponentProps
+export interface NSInputStringProps extends BaseComponentProps, ValidationProps, ValidationStringProps
 {
     title: string;
     defaultValue?: string;
@@ -16,6 +20,7 @@ export interface NSInputStringProps extends BaseComponentProps
 export interface NSInputStringState 
 {
     value: string;
+    error?: string;
 }
 
 export class NSInputString extends React.Component<NSInputStringProps, NSInputStringState>
@@ -23,15 +28,26 @@ export class NSInputString extends React.Component<NSInputStringProps, NSInputSt
     constructor(props: NSInputStringProps)
     {
         super(props);
-        this.state = {
-            value: props.defaultValue ?? "",
-        };
+        this.state = { value: props.defaultValue ?? "" };
         this.getValue = this.getValue.bind(this);
         this.setValue = this.setValue.bind(this);
         this.onChanged = this.onChanged.bind(this);
     }
+    getError(): string | null
+    {
+        return (
+            Validator.getError(this.props.title, this.state.value, this.props) &&
+            Validator.getErrorString(this.props.title, this.state.value, this.props)
+        );
+    }
     getValue(): string
     {
+        let error = this.getError();
+        if (error)
+        {
+            this.setState({ error });
+            throw new Error(error);
+        }
         return this.state.value;
     }
     setValue(value: string): void
@@ -47,24 +63,27 @@ export class NSInputString extends React.Component<NSInputStringProps, NSInputSt
     override render()
     {
         return (
-            <div className={`${Styles.ns_input_parent} p-2 ${this.props.classList?.join(" ")}`} style={this.props.style}>
-
-                <span className={Styles.ns_input_title}>{this.props.title}</span>
-                <img
-                    className={Styles.ns_input_icon}
-                    src={IconInputString}
-                    alt="icon"
-                    width={24}
-                    height={24}
-                />
-                <input
-                    value={this.state.value}
-                    onChange={this.onChanged}
-                    type="text"
-                    className={Styles.ns_input}
-                    placeholder={this.props.placeholder}
-                />
-            </div>
+            <>
+                <div className={`${Styles.ns_input_parent} p-2 ${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>
+                    <img
+                        className={Styles.ns_input_icon}
+                        src={IconInputString}
+                        alt="String Icon"
+                        width={24}
+                        height={24}
+                    />
+                    <input
+                        id={this.props.id}
+                        value={this.state.value}
+                        onChange={this.onChanged}
+                        type="text"
+                        className={Styles.ns_input}
+                        placeholder={this.props.placeholder}
+                    />
+                </div>
+                <NSInputErrorNotifier error={this.state.error} />
+            </>
         );
     }
 }