namirasoft-site-react 1.3.61 → 1.3.62

package/src/components/NSInputDate.module.css

@@ -1,10 +1,11 @@
-.ns_parent_input {
+.ns_input_parent {
 	display: flex;
 	flex-direction: column;
 	width: 326px;
 	color: #fff;
 	position: relative;
 	max-width: 100%;
+	padding: 8px;
 }
 
 .ns_input {
@@ -12,12 +13,14 @@
 	padding: 10px 12px;
 	font-size: 16px;
 	font-weight: 400;
+	border: 1px solid rgba(47, 0, 236, 0.6);
 }
 
 .ns_input_icon {
 	position: absolute;
 	right: 20px;
 	top: 51%;
+	z-index: 1;
 }
 
 .ns_input_title {

package/src/components/NSInputDate.tsx

@@ -2,10 +2,13 @@
 
 import React from "react";
 import Styles from "./NSInputDate.module.css";
+import IconInputDate from '../assets/images/icon-input-date.svg';
 import { BaseComponentProps } from "../props/BaseComponentProps";
 import { NSInputErrorNotifier } from "./NSInputErrorNotifier";
+import { ValidationProps } from "../props/ValidationProps";
+import { Validator } from "../Validator";
 
-export interface NSInputDateProps extends BaseComponentProps
+export interface NSInputDateProps extends BaseComponentProps, ValidationProps
 {
     title: string;
     defaultValue?: string;
@@ -24,15 +27,26 @@ export class NSInputDate extends React.Component<NSInputDateProps, NSInputDateSt
     constructor(props: NSInputDateProps)
     {
         super(props);
-        this.state = {
-            value: ""
-        };
+        this.state = { value: props.defaultValue ?? "" };
         this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
         this.onChanged = this.onChanged.bind(this);
     }
+    getError(): string | null
+    {
+        return (
+            Validator.getError(this.props.title, this.state.value, this.props) &&
+            Validator.getErrorDate(this.props.title, this.state.value)
+        );
+    }
     getValue(): string
     {
+        let error = this.getError();
+        if (error)
+        {
+            this.setState({ error });
+            throw new Error(error);
+        }
         return this.state.value;
     }
     setValue(value: string): void
@@ -49,17 +63,22 @@ export class NSInputDate extends React.Component<NSInputDateProps, NSInputDateSt
     {
         return (
             <>
-                <div className={`${Styles.ns_parent_input} p-2 ${this.props.classList?.join(" ")}`}
-                    style={this.props.style}
-                >
-                    <span className={Styles.ns_input_title}>{this.props.title}</span>
+                <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={IconInputDate}
+                        alt="Date Icon"
+                        width={24}
+                        height={24}
+                    />
                     <input
+                        id={this.props.id}
                         value={this.state.value}
                         onChange={this.onChanged}
                         type="date"
                         className={Styles.ns_input}
                         placeholder={this.props.placeholder}
-                        id={this.props.id}
                         onClick={() => { }}
                     />
                 </div>
@@ -67,6 +86,4 @@ export class NSInputDate extends React.Component<NSInputDateProps, NSInputDateSt
             </>
         );
     }
-}
-
-
+}

package/src/components/NSInputDuration.tsx

@@ -1,11 +1,16 @@
 "use client";
 
 import React from "react";
-import Styles from "./NSInputDuration.module.css";
+import Styles from "./NSInput.module.css";
 import IconInputDuration from '../assets/images/icon-input-duration.svg';
 import { BaseComponentProps } from "../props/BaseComponentProps";
+import { ValidationProps } from "../props/ValidationProps";
+import { ValidationNumberProps } from "../props/ValidationNumberProps";
+import { ValidationStringProps } from "../props/ValidationStringProps";
+import { Validator } from "../Validator";
+import { NSInputErrorNotifier } from "./NSInputErrorNotifier";
 
-export interface NSInputDurationProps extends BaseComponentProps
+export interface NSInputDurationProps extends BaseComponentProps, ValidationProps, ValidationStringProps, ValidationNumberProps
 {
     title: string;
     defaultValue?: string;
@@ -16,6 +21,7 @@ export interface NSInputDurationProps extends BaseComponentProps
 export interface NSInputDurationState
 {
     value: string;
+    error?: string;
 }
 
 export class NSInputDuration extends React.Component<NSInputDurationProps, NSInputDurationState>
@@ -23,15 +29,26 @@ export class NSInputDuration extends React.Component<NSInputDurationProps, NSInp
     constructor(props: NSInputDurationProps)
     {
         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.getErrorDuration(this.props.title, this.state.value)
+        );
+    }
     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 +64,28 @@ export class NSInputDuration extends React.Component<NSInputDurationProps, 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={IconInputDuration}
-                    alt="icon"
-                    width={24}
-                    height={24}
-                />
-                <input
-                    value={this.state.value}
-                    onChange={this.onChanged}
-                    type="time"
-                    className={Styles.ns_input}
-                    placeholder={this.props.placeholder}
-                    step="2"
-                />
-            </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={IconInputDuration}
+                        alt="Duration Icon"
+                        width={24}
+                        height={24}
+                    />
+                    <input
+                        id={this.props.id}
+                        value={this.state.value}
+                        onChange={this.onChanged}
+                        type="time"
+                        className={Styles.ns_input}
+                        placeholder={this.props.placeholder}
+                        step="2"
+                    />
+                </div>
+                <NSInputErrorNotifier error={this.state.error} />
+            </>
         );
     }
 }

package/src/components/NSInputEmail.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import Styles from "./NSInputEmail.module.css";
+import Styles from "./NSInput.module.css";
 import IconInputEmail from '../assets/images/icon-input-email.svg';
 import { Validator } from "../Validator";
 import { ValidationProps } from "../props/ValidationProps";
@@ -13,8 +13,8 @@ export interface NSInputEmailProps extends BaseComponentProps, ValidationProps,
 {
     title: string;
     defaultValue?: string;
-    placeholder?: string;
     onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
 }
 
 export interface NSInputEmailState
@@ -35,7 +35,11 @@ export class NSInputEmail extends React.Component<NSInputEmailProps, NSInputEmai
     }
     getError(): string | null
     {
-        return Validator.getErrorString(this.props.title, this.state.value, this.props) && Validator.getErrorEmail(this.props.title, this.state.value);
+        return (
+            Validator.getError(this.props.title, this.state.value, this.props) &&
+            Validator.getErrorString(this.props.title, this.state.value, this.props) &&
+            Validator.getErrorEmail(this.props.title, this.state.value)
+        );
     }
     getValue(): string
     {
@@ -62,7 +66,7 @@ export class NSInputEmail extends React.Component<NSInputEmailProps, NSInputEmai
         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>
+                    <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={IconInputEmail}
@@ -71,10 +75,11 @@ export class NSInputEmail extends React.Component<NSInputEmailProps, NSInputEmai
                         height={24}
                     />
                     <input
+                        id={this.props.id}
                         value={this.state.value}
                         onChange={this.onChanged}
                         type="email"
-                        className={`${this.state.error ? Styles.ns_input_red : ""} ${Styles.ns_input}`}
+                        className={Styles.ns_input}
                         placeholder={this.props.placeholder}
                     />
                 </div>

package/src/components/NSInputFloat.tsx

@@ -1,24 +1,25 @@
 "use client";
 
 import React from "react";
-import Styles from "./NSInputFloat.module.css";
+import Styles from "./NSInput.module.css";
 import IconInputFloat from '../assets/images/icon-input-float.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 NSInputFloatProps extends BaseComponentProps, ValidationProps, ValidationNumberProps 
 {
     title: string;
-    defaultValue?: string;
+    defaultValue?: number;
     onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     placeholder?: string;
 }
 
 export interface NSInputFloatState
 {
-    value: string;
+    value?: number;
     error?: string;
 }
 
@@ -27,18 +28,19 @@ export class NSInputFloat extends React.Component<NSInputFloatProps, NSInputFloa
     constructor(props: NSInputFloatProps)
     {
         super(props);
-        this.state = {
-            value: props.defaultValue ?? "",
-        };
+        this.state = { value: props.defaultValue };
         this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
         this.onChanged = this.onChanged.bind(this);
     }
     getError(): string | null
     {
-        return Validator.getErrorNumber(this.props.title, this.state.value, this.props);
+        return (
+            Validator.getError(this.props.title, this.state.value, this.props) &&
+            Validator.getErrorNumber(this.props.title, this.state.value, this.props)
+        );
     }
-    getValue(): string
+    getValue(): number | undefined
     {
         let error = this.getError();
         if (error)
@@ -48,41 +50,40 @@ export class NSInputFloat extends React.Component<NSInputFloatProps, NSInputFloa
         }
         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(parseFloat(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.required && <span>*</span>
-                    }
-                    {this.props.title}
-                </span>
-                <img
-                    className={Styles.ns_input_icon}
-                    src={IconInputFloat}
-                    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={IconInputFloat}
+                        alt="Flaot 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/NSInputIP.tsx

@@ -1,11 +1,15 @@
 "use client";
 
 import React from "react";
-import Styles from "./NSInputIP.module.css";
-import IconInputId from '../assets/images/icon-input-id.svg';
+import Styles from "./NSInput.module.css";
+import IconInputIP from '../assets/images/icon-input-ip.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 NSInputIPProps extends BaseComponentProps
+export interface NSInputIPProps extends BaseComponentProps, ValidationProps, ValidationStringProps
 {
     title: string;
     defaultValue?: string;
@@ -16,6 +20,7 @@ export interface NSInputIPProps extends BaseComponentProps
 export interface NSInputIPState
 {
     value: string;
+    error?: string;
 }
 
 export class NSInputIP extends React.Component<NSInputIPProps, NSInputIPState>
@@ -23,15 +28,27 @@ export class NSInputIP extends React.Component<NSInputIPProps, NSInputIPState>
     constructor(props: NSInputIPProps)
     {
         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) &&
+            Validator.getErrorIP(this.props.title, this.state.value)
+        );
+    }
     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 +64,27 @@ export class NSInputIP extends React.Component<NSInputIPProps, NSInputIPState>
     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={IconInputId}
-                    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={IconInputIP}
+                        alt="IP 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/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} />
+            </>
         );
     }
-}
-
-
+}