namirasoft-site-react 1.3.112 → 1.3.114

package/src/components/NSBoxString.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import React from "react";
+import Styles from "./NSBox.module.css";
+import IconInputString from '../assets/images/icon-input-string.svg';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IValidationProps } from "../props/IValidationProps";
+import { IValidationStringProps } from "../props/IValidationStringProps";
+import { Validator } from "../Validator";
+import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
+
+export interface INSBoxStringProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
+{
+	title: string;
+	defaultValue?: string;
+	onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+	placeholder?: string;
+}
+
+export interface INSBoxStringState 
+{
+	value: string;
+	error?: string;
+}
+
+export class NSBoxString extends React.Component<INSBoxStringProps, INSBoxStringState>
+{
+	constructor(props: INSBoxStringProps)
+	{
+		super(props);
+		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
+	{
+		this.setState({ value });
+	}
+	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} 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>
+				<NSBoxErrorNotifier error={this.state.error} />
+			</>
+		);
+	}
+}

package/src/components/NSBoxText.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import React from "react";
+import Styles from "./NSBox.module.css";
+import IconInputText from '../assets/images/icon-input-text.svg';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IValidationProps } from "../props/IValidationProps";
+import { IValidationStringProps } from "../props/IValidationStringProps";
+import { Validator } from "../Validator";
+import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
+
+export interface INSBoxTextProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
+{
+	title: string;
+	defaultValue?: string;
+	onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+	placeholder?: string;
+}
+
+export interface INSBoxTextState
+{
+	value: string;
+	error?: string;
+}
+
+export class NSBoxText extends React.Component<INSBoxTextProps, INSBoxTextState>
+{
+	constructor(props: INSBoxTextProps)
+	{
+		super(props);
+		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
+	{
+		this.setState({ value });
+	}
+	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}>
+					<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={IconInputText}
+						alt="Text 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>
+				<NSBoxErrorNotifier error={this.state.error} />
+			</>
+		);
+	}
+}

package/src/components/NSBoxTime.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import React from "react";
+import Styles from "./NSBox.module.css";
+import IconInputTime from '../assets/images/icon-input-time.svg';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IValidationProps } from "../props/IValidationProps";
+import { IValidationStringProps } from "../props/IValidationStringProps";
+import { Validator } from "../Validator";
+import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
+
+export interface INSBoxTimeProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
+{
+	title: string;
+	defaultValue?: string;
+	onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+	placeholder?: string;
+}
+
+export interface INSBoxTimeState
+{
+	value: string;
+	error?: string;
+}
+
+export class NSBoxTime extends React.Component<INSBoxTimeProps, INSBoxTimeState>
+{
+	constructor(props: INSBoxTimeProps)
+	{
+		super(props);
+		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.getErrorTime(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
+	{
+		this.setState({ value });
+	}
+	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} 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={IconInputTime}
+						alt="Time 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>
+				<NSBoxErrorNotifier error={this.state.error} />
+			</>
+		);
+	}
+}

package/src/components/NSHeader.module.css

@@ -187,22 +187,23 @@
 
 .ns_navbar_first_level_item a {
     color: #fff;
+    padding-top: 12px;
 }
 
 .ns_navbar_second_level_item a {
     color: #000 !important;
     width: 100%;
-        padding: 10px;
+    padding: 10px;
 }
 
 .ns_navbar_first_level_item {
     color: #fff;
-    padding-top: 12px;
-    padding-bottom: 12px;
 }
 
 .ns_navbar_second_level_item {
     color: #000 !important;
+    width: 100%;
+    padding: 10px;
 }
 
 .ns_navbar_username {

package/src/components/NSSelectBox.tsx

@@ -7,108 +7,109 @@ import IconSelectBox from '../assets/images/icon-select-box.svg';
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import { IValidationProps } from "../props/IValidationProps";
 import { Validator } from "../Validator";
-import { NSInputErrorNotifier } from "./NSInputErrorNotifier";
+import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
 
 export interface INSSelectBoxProps extends IBaseComponentProps, IValidationProps
 {
-    title: string;
-    options: SelectProps['options'];
-    multiple: boolean;
+	title: string;
+	options: SelectProps['options'];
+	multiple: boolean;
+	placeHolder?: string;
 }
 
 export interface NSSelectBoxState
 {
-    value: string | null;
-    values: string[];
-    error?: string;
+	value: string | null;
+	values: string[];
+	error?: string;
 }
 
 export class NSSelectBox extends React.Component<INSSelectBoxProps, NSSelectBoxState>
 {
-    constructor(props: INSSelectBoxProps)
-    {
-        super(props);
-        this.state = {
-            value: null,
-            values: [],
-        };
-        this.getValues = this.getValues.bind(this);
-        this.setValues = this.setValues.bind(this);
-        this.setValue = this.setValue.bind(this);
-        this.getValue = this.getValue.bind(this);
-        this.handleChange = this.handleChange.bind(this);
-    }
-    getError(value: string): string | null
-    {
-        return (
-            Validator.getError(this.props.title, value, this.props)
-        );
-    }
-    getValue(): string | null
-    {
-        let error = this.getError(this.state.value || "");
-        if (error)
-        {
-            this.setState({ error });
-            throw new Error(error);
-        }
-        return this.state.value;
-    }
-    getValues(): string[]
-    {
-        this.state.values.forEach(value =>
-        {
-            let error = this.getError(value || "");
-            if (error)
-            {
-                this.setState({ error });
-                throw new Error(error);
-            }
-        });
-        return this.state.values;
-    }
-    setValue(value: string | null): void
-    {
-        this.setState({ value });
-    }
-    setValues(values: string[]): void
-    {
-        this.setState({ values });
-    }
-    handleChange(value: string | null | string[]): void
-    {
-        if (this.props.multiple)
-        {
-            this.setValues(value as string[]); 
-        } else
-        {
-            this.setValue(value as string | null); 
-        }
-    }
-    override render()
-    {
-        return (
-            <>
-                <div className={`${Styles.ns_input_parent}`}>
-                    <span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
-                    <Select
-                        mode={this.props.multiple ? "multiple" : undefined}
-                        style={{ width: '100%' }}
-                        className={Styles.ns_input_select}
-                        placeholder="Combo Box"
-                        onChange={this.handleChange}
-                        optionLabelProp="label"
-                        options={this.props.options}
-                        optionRender={(option) => (
-                            <Space className={Styles.ns_input_select_option}>
-                                {option.data.desc}
-                            </Space>
-                        )}
-                        suffixIcon={<img src={IconSelectBox} alt="SelectBox Icon" />}
-                    />
-                </div>
-                <NSInputErrorNotifier error={this.state.error} />
-            </>
-        );
-    }
+	constructor(props: INSSelectBoxProps)
+	{
+		super(props);
+		this.state = {
+			value: null,
+			values: [],
+		};
+		this.getValues = this.getValues.bind(this);
+		this.setValues = this.setValues.bind(this);
+		this.setValue = this.setValue.bind(this);
+		this.getValue = this.getValue.bind(this);
+		this.handleChange = this.handleChange.bind(this);
+	}
+	getError(value: string): string | null
+	{
+		return (
+			Validator.getError(this.props.title, value, this.props)
+		);
+	}
+	getValue(): string | null
+	{
+		let error = this.getError(this.state.value || "");
+		if (error)
+		{
+			this.setState({ error });
+			throw new Error(error);
+		}
+		return this.state.value;
+	}
+	getValues(): string[]
+	{
+		this.state.values.forEach(value =>
+		{
+			let error = this.getError(value || "");
+			if (error)
+			{
+				this.setState({ error });
+				throw new Error(error);
+			}
+		});
+		return this.state.values;
+	}
+	setValue(value: string | null): void
+	{
+		this.setState({ value });
+	}
+	setValues(values: string[]): void
+	{
+		this.setState({ values });
+	}
+	handleChange(value: string | null | string[]): void
+	{
+		if (this.props.multiple)
+		{
+			this.setValues(value as string[]);
+		} else
+		{
+			this.setValue(value as string | null);
+		}
+	}
+	override render()
+	{
+		return (
+			<>
+				<div className={`${Styles.ns_input_parent}`}>
+					<span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
+					<Select
+						mode={this.props.multiple ? "multiple" : undefined}
+						style={{ width: '100%' }}
+						className={Styles.ns_input_select}
+						placeholder={this.props.placeHolder ?? "Combo Box"}
+						onChange={this.handleChange}
+						optionLabelProp="label"
+						options={this.props.options}
+						optionRender={(option) => (
+							<Space className={Styles.ns_input_select_option}>
+								{option.data.desc}
+							</Space>
+						)}
+						suffixIcon={<img src={IconSelectBox} alt="SelectBox Icon" />}
+					/>
+				</div>
+				<NSBoxErrorNotifier error={this.state.error} />
+			</>
+		);
+	}
 }