namirasoft-site-react 1.3.39 → 1.3.42

package/src/components/NSInputEmail.tsx

@@ -8,6 +8,8 @@ import Danger from '../assets/images/danger.svg';
 export interface NSInputEmailProps
 {
     title: string;
+	defaultValue?: string;
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export interface NSInputEmailState
@@ -21,32 +23,35 @@ export class NSInputEmail extends React.Component<NSInputEmailProps, NSInputEmai
     {
         super(props);
         this.state = {
-            value: "",
+			value: props.defaultValue ?? "",
             error: false,
         };
         this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
-        this.setDefaultValue = this.setDefaultValue.bind(this);
-    }
-    setValue(e: React.ChangeEvent<HTMLInputElement>): void
+		this.onChanged = this.onChanged.bind(this);
+	}
+    getValue(): string
+    {
+        return this.state.value;
+	}
+    setValue(value: string): void
     {
-        let email = /^(([^<>()[]\\.,;:\s@"]+(\.[^<>()[]\\.,;:\s@"]+)*)|(".+"))@(([[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-        if (!email.test(e.target.value))
+		let email = /^(([^<>()[]\\.,;:\s@"]+(\.[^<>()[]\\.,;:\s@"]+)*)|(".+"))@(([[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+		debugger
+        if (!email.test(value))
         {
-            this.setState({ error: true, value: e.target.value });
+            this.setState({ error: true, value });
         }
         else
         {
-            this.setState({ error: false, value: e.target.value });
+            this.setState({ error: false, value });
         }
-    }
-    setDefaultValue(value: string): void
+	}
+    private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
     {
-        this.setState({ value });
-    }
-    getValue(): string
-    {
-        return this.state.value;
+        this.setValue(e.target.value);
+        if (this.props.onChanged)
+            this.props.onChanged(e);
     }
     override render()
     {
@@ -63,27 +68,27 @@ export class NSInputEmail extends React.Component<NSInputEmailProps, NSInputEmai
                     />
                     <input
                         value={this.state.value}
-                        onChange={this.setValue}
+                        onChange={this.onChanged}
                         type="email"
                         className={`${this.state.error === true ? Styles.ns_input_red : ""} ${Styles.ns_input}`}
                         placeholder="Sample@gmail.com"
                     />
                 </div>
-
-                {this.state.error === true ? (
-                    <>
-                        <div className="d-flex justify-content-start align-items-center gap-2 ms-2 ">
-                            <img
-                                className={""}
-                                src={Danger}
-                                alt="icon"
-                                width={13}
-                                height={13}
-                            />
-                            <span className={Styles.ns_input_error}>Enter a valid email. </span>
-                        </div>
-                    </>) : null}
-
+                {
+                    this.state.error === true ? (
+                        <>
+                            <div className="d-flex justify-content-start align-items-center gap-2 ms-2 ">
+                                <img
+                                    className={""}
+                                    src={Danger}
+                                    alt="icon"
+                                    width={13}
+                                    height={13}
+                                />
+                                <span className={Styles.ns_input_error}>Enter a valid email.</span>
+                            </div>
+                        </>) : null
+                }
             </>
         );
     }

package/src/components/NSInputFloat.tsx

@@ -6,7 +6,9 @@ import IconInputFloat from '../assets/images/icon-input-float.svg';
 
 export interface NSInputFloatProps
 {
-    title: string;
+	title: string;
+	defaultValue?: string;
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export interface NSInputFloatState
@@ -19,23 +21,26 @@ export class NSInputFloat extends React.Component<NSInputFloatProps, NSInputFloa
     {
         super(props);
         this.state = {
-            value: "",
+            value: props.defaultValue ?? "",
         };
         this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
-        this.setDefaultValue = this.setDefaultValue.bind(this);
+        this.onChanged = this.onChanged.bind(this);
     }
-    setValue(e: React.ChangeEvent<HTMLInputElement>): void
+    getValue(): string
     {
-        this.setState({ value: e.target.value });
-    }
-    setDefaultValue(value: string): void
+        return this.state.value;
+	}
+    setValue(value: string): void
     {
         this.setState({ value });
-    }
-    getValue(): string
+	}
+	
+    private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
     {
-        return this.state.value;
+        this.setValue(e.target.value);
+        if (this.props.onChanged)
+            this.props.onChanged(e);
     }
     override render()
     {
@@ -51,7 +56,7 @@ export class NSInputFloat extends React.Component<NSInputFloatProps, NSInputFloa
                 />
                 <input
                     value={this.state.value}
-                    onChange={this.setValue}
+                    onChange={this.onChanged}
                     type="number"
                     className={Styles.ns_input}
                     placeholder="1.2"

package/src/components/NSInputIP.tsx

@@ -6,7 +6,9 @@ import IconInputId from '../assets/images/icon-input-id.svg';
 
 export interface NSInputIPProps
 {
-    title: string;
+	title: string;
+	defaultValue?: string;
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export interface NSInputIPState
@@ -19,23 +21,25 @@ export class NSInputIP extends React.Component<NSInputIPProps, NSInputIPState> {
     {
         super(props);
         this.state = {
-            value: "",
+            value: props.defaultValue ?? "",
         };
-        this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
-        this.setDefaultValue = this.setDefaultValue.bind(this);
+        this.setValue = this.setValue.bind(this);
+        this.onChanged = this.onChanged.bind(this);
     }
-    setValue(e: React.ChangeEvent<HTMLInputElement>): void
+    getValue(): string
     {
-        this.setState({ value: e.target.value });
+        return this.state.value;
     }
-    setDefaultValue(value: string): void
+    setValue(value: string): void
     {
         this.setState({ value });
     }
-    getValue(): string
+    private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
     {
-        return this.state.value;
+        this.setValue(e.target.value);
+        if (this.props.onChanged)
+            this.props.onChanged(e);
     }
     override render()
     {
@@ -51,7 +55,7 @@ export class NSInputIP extends React.Component<NSInputIPProps, NSInputIPState> {
                 />
                 <input
                     value={this.state.value}
-                    onChange={this.setValue}
+                    onChange={this.onChanged}
                     type="number"
                     className={Styles.ns_input}
                     placeholder="192.158.1.38"

package/src/components/NSInputInteger.tsx

@@ -6,7 +6,9 @@ import IconInputInteger from '../assets/images/icon-input-integer.svg';
 
 export interface NSInputIntegerProps
 {
-    title: string;
+	title: string;
+	defaultValue?: string;
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export interface NSInputIntegerState
@@ -19,23 +21,25 @@ export class NSInputInteger extends React.Component<NSInputIntegerProps, NSInput
     {
         super(props);
         this.state = {
-            value: "",
+            value: props.defaultValue ?? "",
         };
-        this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
-        this.setDefaultValue = this.setDefaultValue.bind(this);
+        this.setValue = this.setValue.bind(this);
+        this.onChanged = this.onChanged.bind(this);
     }
-    setValue(e: React.ChangeEvent<HTMLInputElement>): void
+    getValue(): string
     {
-        this.setState({ value: e.target.value });
+        return this.state.value;
     }
-    setDefaultValue(value: string): void
+    setValue(value: string): void
     {
         this.setState({ value });
     }
-    getValue(): string
+    private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
     {
-        return this.state.value;
+        this.setValue(e.target.value);
+        if (this.props.onChanged)
+            this.props.onChanged(e);
     }
     override render()
     {
@@ -51,7 +55,7 @@ export class NSInputInteger extends React.Component<NSInputIntegerProps, NSInput
                 />
                 <input
                     value={this.state.value}
-                    onChange={this.setValue}
+                    onChange={this.onChanged}
                     type="number"
                     className={Styles.ns_input}
                     placeholder="1234"

package/src/components/NSInputSearch.tsx

@@ -5,48 +5,41 @@ import Styles from "./NSInputSearch.module.css";
 import IconInputSearch from '../assets/images/icon-input-search.svg';
 
 export interface NSInputSearchProps
-{}
+{ 
+    defaultValue?: string;
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
 
 export interface NSInputSearchState
 {
     value: string;
 }
 
-export class NSInputSearch extends React.Component<NSInputSearchProps, NSInputSearchState> {
+export class NSInputSearch extends React.Component<NSInputSearchProps, NSInputSearchState>
+{
     constructor(props: NSInputSearchProps)
     {
         super(props);
         this.state = {
-            value: "",
+            value: props.defaultValue ?? "",
         };
-        this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
-        this.setDefaultValue = this.setDefaultValue.bind(this);
-        this.keyDownEvent = this.keyDownEvent.bind(this);
-    }
-    setValue(e: React.ChangeEvent<HTMLInputElement>): void
-    {
-        this.setState({ value: e.target.value });
-    }
-    setDefaultValue(value: string): void
-    {
-        this.setState({ value });
+		this.setValue = this.setValue.bind(this);
+		this.onChanged = this.onChanged.bind(this);
     }
     getValue(): string
     {
         return this.state.value;
     }
-    onChanged(e: React.ChangeEvent<HTMLInputElement>): void
+    setValue(value: string): void
     {
-        this.setValue(e);
+        this.setState({ value });
     }
-    keyDownEvent(event: React.KeyboardEvent<HTMLDivElement>)
+    private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
     {
-        if (event.code === "Enter")
-        {
-            //todo
-            console.log("function")
-        }
+        this.setValue(e.target.value);
+        if (this.props.onChanged)
+            this.props.onChanged(e);
     }
     override render()
     {
@@ -61,8 +54,7 @@ export class NSInputSearch extends React.Component<NSInputSearchProps, NSInputSe
                 />
                 <input
                     value={this.state.value}
-                    onChange={this.setValue}
-                    onKeyDown={this.keyDownEvent}
+                    onChange={this.onChanged}
                     type="text"
                     className={Styles.ns_input}
                     placeholder="Search"

package/src/components/NSInputTime.tsx

@@ -7,6 +7,8 @@ import IconInputTime from '../assets/images/icon-input-time.svg';
 export interface NSInputTimeProps
 {
     title: string;
+    defaultValue?: string;
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export interface NSInputTimeState
@@ -19,23 +21,25 @@ export class NSInputTime extends React.Component<NSInputTimeProps, NSInputTimeSt
     {
         super(props);
         this.state = {
-            value: "",
+            value: props.defaultValue ?? "",
         };
-        this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
-        this.setDefaultValue = this.setDefaultValue.bind(this);
+        this.setValue = this.setValue.bind(this);
+        this.onChanged = this.onChanged.bind(this);
     }
-    setValue(e: React.ChangeEvent<HTMLInputElement>): void
+    getValue(): string
     {
-        this.setState({ value: e.target.value });
+        return this.state.value;
     }
-    setDefaultValue(value: string): void
+    setValue(value: string): void
     {
         this.setState({ value });
     }
-    getValue(): string
+    private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
     {
-        return this.state.value;
+        this.setValue(e.target.value);
+        if (this.props.onChanged)
+            this.props.onChanged(e);
     }
     override render()
     {
@@ -51,7 +55,7 @@ export class NSInputTime extends React.Component<NSInputTimeProps, NSInputTimeSt
                 />
                 <input
                     value={this.state.value}
-                    onChange={this.setValue}
+                    onChange={this.onChanged}
                     type="time"
                     className={Styles.ns_input}
                     placeholder="21:44:06"

package/src/components/NSSection.module.css

@@ -2,4 +2,10 @@
 	background-repeat: no-repeat;
 	background-size: cover;
 	background-position: center;
+}
+
+.ns_section_center {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }

package/src/components/NSSection.tsx

@@ -8,6 +8,7 @@ export interface NSSectionProps
 {
 	children: ReactNode;
 	background?: BackgroundType;
+	center_items?: boolean;
 }
 
 export interface NSSectionState
@@ -15,7 +16,8 @@ export interface NSSectionState
 	background?: BackgroundType;
 }
 
-export class NSSection extends Component<NSSectionProps, NSSectionState> {
+export class NSSection extends Component<NSSectionProps, NSSectionState>
+{
 	constructor(props: NSSectionProps)
 	{
 		super(props);
@@ -29,6 +31,9 @@ export class NSSection extends Component<NSSectionProps, NSSectionState> {
 	}
 	override render()
 	{
+		let styles = [Styles.ns_section];
+		if (this.props.center_items)
+			styles.push(Styles.ns_section_center);
 		return (
 			<section style=
 				{{
@@ -36,7 +41,7 @@ export class NSSection extends Component<NSSectionProps, NSSectionState> {
 					backgroundColor: this.state.background?.color,
 					backgroundPosition: this.state.background?.position
 				}}
-				className={Styles.ns_section} >
+				className={styles.join(" ")} >
 				{this.props.children}
 			</section>
 		);

package/src/components/NSSpace.tsx

@@ -26,7 +26,8 @@ export interface NSSpaceState
     size: NSSpaceSizeType;
 }
 
-export class NSSpace extends React.Component<NSSpaceProps, NSSpaceState> {
+export class NSSpace extends React.Component<NSSpaceProps, NSSpaceState>
+{
     constructor(props: NSSpaceProps)
     {
         super(props);