namirasoft-site-react 1.3.61 → 1.3.62

package/src/components/NSInputTime.tsx

@@ -1,11 +1,15 @@
 "use client";
 
 import React from "react";
-import Styles from "./NSInputTime.module.css";
+import Styles from "./NSInput.module.css";
 import IconInputTime from '../assets/images/icon-input-time.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 NSInputTimeProps extends BaseComponentProps
+export interface NSInputTimeProps extends BaseComponentProps, ValidationProps, ValidationStringProps
 {
     title: string;
     defaultValue?: string;
@@ -16,6 +20,7 @@ export interface NSInputTimeProps extends BaseComponentProps
 export interface NSInputTimeState
 {
     value: string;
+    error?: string;
 }
 
 export class NSInputTime extends React.Component<NSInputTimeProps, NSInputTimeState>
@@ -23,15 +28,27 @@ export class NSInputTime extends React.Component<NSInputTimeProps, NSInputTimeSt
     constructor(props: NSInputTimeProps)
     {
         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.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
@@ -47,24 +64,28 @@ export class NSInputTime extends React.Component<NSInputTimeProps, NSInputTimeSt
     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={IconInputTime}
-                    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={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>
+                <NSInputErrorNotifier error={this.state.error} />
+            </>
         );
     }
 }

package/src/components/NSSectionBars.tsx

@@ -6,6 +6,7 @@ import { BaseComponentProps } from "../props/BaseComponentProps";
 
 export interface NSSectionBarsProps extends BaseComponentProps
 {
+	title?: string;
 	bars: NSEntityBarProps[]
 }
 

package/src/components/NSSectionCards.tsx

@@ -1,5 +1,5 @@
 import Styles from './NSSectionCards.module.css';
-import { NSTitle, NSTitleProps } from './NSTitle';
+import { NSTitle } from './NSTitle';
 import { NSCard, NSCardProps } from './NSCard';
 import { NSSection } from './NSSection';
 import { NSLinkBlue } from './NSLinkBlue';
@@ -9,7 +9,7 @@ import { LinkProps } from '../props/LinkProps';
 
 export interface NSSectionCardsProps extends BaseComponentProps
 {
-	title?: NSTitleProps;
+	title?: string;
 	description?: {
 		text: string,
 		color?: string
@@ -27,7 +27,7 @@ export function NSSectionCards(props: NSSectionCardsProps)
 				{
 					props.title &&
 					<div className={Styles.ns_section_cards_title_container}>
-						<NSTitle {...props.title} />
+						<NSTitle title={props.title} />
 						{
 							props.description &&
 							<p style={{ color: props.description?.color }} className={Styles.ns_description}> {props.description.text} </p>

package/src/components/NSSectionTitle.tsx

@@ -1,12 +1,12 @@
 import { ReactNode } from 'react';
 import { NSSection } from './NSSection';
-import { NSTitle, NSTitleProps } from './NSTitle';
+import { NSTitle } from './NSTitle';
 import { NSSpace, NSSpaceSizeType } from './NSSpace';
 import { BaseComponentProps } from "../props/BaseComponentProps";
 
 export interface NSSectionTitleProps extends BaseComponentProps
 {
-	title: NSTitleProps;
+	title: string;
 	children: ReactNode
 }
 
@@ -15,7 +15,7 @@ export function NSSectionTitle(props: NSSectionTitleProps)
 	return (
 		<NSSection {...props} >
 			<NSSpace size={NSSpaceSizeType.NORMAL} />
-			<NSTitle {...props.title} />
+			<NSTitle title={props.title} />
 			{props.children}
 		</NSSection>
 	);

package/src/components/NSSelectBox.tsx

@@ -6,8 +6,11 @@ import { Select, Space } from 'antd';
 import type { SelectProps } from 'antd';
 import IconSelectBox from '../assets/images/icon-select-box.svg';
 import { BaseComponentProps } from "../props/BaseComponentProps";
+import { ValidationProps } from "../props/ValidationProps";
+import { Validator } from "../Validator";
+import { NSInputErrorNotifier } from "./NSInputErrorNotifier";
 
-export interface NSSelectBoxProps extends BaseComponentProps
+export interface NSSelectBoxProps extends BaseComponentProps, ValidationProps
 {
     title: string;
     options: SelectProps['options'];
@@ -17,6 +20,7 @@ export interface NSSelectBoxState
 {
     value: string | null;
     values: string[];
+    error?: string;
 }
 
 export class NSSelectBox extends React.Component<NSSelectBoxProps, NSSelectBoxState>
@@ -31,43 +35,64 @@ export class NSSelectBox extends React.Component<NSSelectBoxProps, NSSelectBoxSt
         this.getValues = this.getValues.bind(this);
         this.setValues = this.setValues.bind(this);
     }
-    setValue(value: string | null): void
+    getError(): string | null
     {
-        this.setState({ value });
+        return (
+            Validator.getError(this.props.title, this.state.value, this.props)
+        );
     }
     getValue(): string | null
     {
+        let error = this.getError();
+        if (error)
+        {
+            this.setState({ error });
+            throw new Error(error);
+        }
         return this.state.value;
     }
-    setValues(values: string[]): void
+    setValue(value: string | null): void
     {
-        this.setState({ values });
+        this.setState({ value });
     }
     getValues(): string[]
     {
+        let error = this.getError();
+        if (error)
+        {
+            this.setState({ error });
+            throw new Error(error);
+        }
         return this.state.values;
     }
+    setValues(values: string[]): void
+    {
+        this.setState({ values });
+    }
     override render()
     {
         return (
-            <div className={`${Styles.ns_input_parent} p-2`}>
-                <span className={Styles.ns_input_title}>{this.props.title}</span>
-                <Select
-                    mode="multiple"
-                    style={{ width: '100%' }}
-                    className={Styles.ns_input_select}
-                    placeholder="Combo Box"
-                    onChange={this.setValues}
-                    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>
+            <>
+                <div className={`${Styles.ns_input_parent} p-2`}>
+                    <span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
+                    <Select
+                        mode="multiple"
+                        style={{ width: '100%' }}
+                        className={Styles.ns_input_select}
+                        placeholder="Combo Box"
+                        onChange={this.setValues}
+                        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} />
+            </>
         );
     }
 }

package/src/components/NSTable.tsx

@@ -59,7 +59,7 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
                 className={`container ${Styles.ns_project_list_container} ${this.props.classList?.join(" ")}`}
                 style={this.props.style}>
                 <section className={Styles.ns_search_input}>
-                    <NSInputSearch />
+                    <NSInputSearch title='' required={false} />
                 </section>
                 <NSSpace size={NSSpaceSizeType.SMALL} />
                 <table className={Styles.ns_table} >

package/src/props/ValidationNumberProps.ts

@@ -1,6 +1,4 @@
-import { ValidationProps } from "./ValidationProps";
-
-export interface ValidationNumberProps extends ValidationProps
+export interface ValidationNumberProps 
 {
     min?: number;
     max?: number;

package/src/props/ValidationProps.ts

@@ -4,4 +4,5 @@ export interface ValidationProps
 {
     required: boolean;
     regex?: ValidationRegexProps;
+    validator?: (name: string, value: string | number | null | undefined) => string | null;
 }

package/src/props/ValidationStringProps.ts

@@ -1,6 +1,4 @@
-import { ValidationProps } from "./ValidationProps";
-
-export interface ValidationStringProps extends ValidationProps
+export interface ValidationStringProps
 {
     min_length?: number;
     max_length?: number;

package/dist/components/NSInputDuration.module.css

@@ -1,26 +0,0 @@
-.ns_input_parent {
-    display: flex;
-    flex-direction: column;
-    width: 326px;
-    color: #fff;
-    position: relative;
-    max-width: 100%;
-}
-
-.ns_input {
-    border-radius: 8px;
-    padding: 10px 12px;
-    font-size: 16px;
-    font-weight: 400;
-}
-
-.ns_input_icon {
-    position: absolute;
-    right: 20px;
-    top: 51%;
-}
-
-.ns_input_title {
-    font-size: 16px;
-    font-weight: 400;
-}

package/dist/components/NSInputEmail.module.css

@@ -1,38 +0,0 @@
-.ns_input_parent {
-    display: flex;
-    flex-direction: column;
-    width: 326px;
-    color: #fff;
-    position: relative;
-    max-width: 100%;
-}
-
-.ns_input {
-    border-radius: 8px;
-    padding: 10px 12px;
-}
-
-.ns_input_icon {
-    position: absolute;
-    right: 20px;
-    top: 51%;
-    font-size: 16px;
-    font-weight: 400;
-}
-
-.ns_input_title {
-    font-size: 16px;
-    font-weight: 400;
-}
-
-.ns_input_error {
-    color: #FF3F3F !important;
-}
-
-.ns_input_error:focus {
-    color: #FF3F3F !important;
-}
-
-.ns_input_red {
-    border: 2px solid #FF3F3F;
-}

package/dist/components/NSInputFloat.module.css

@@ -1,26 +0,0 @@
-.ns_input_parent {
-    display: flex;
-    flex-direction: column;
-    width: 326px;
-    color: #fff;
-    position: relative;
-    max-width: 100%;
-}
-
-.ns_input {
-    border-radius: 8px;
-    padding: 10px 12px;
-    font-size: 16px;
-    font-weight: 400;
-}
-
-.ns_input_icon {
-    position: absolute;
-    right: 20px;
-    top: 51%;
-}
-
-.ns_input_title {
-    font-size: 16px;
-    font-weight: 400;
-}

package/dist/components/NSInputIP.module.css

@@ -1,26 +0,0 @@
-.ns_input_parent {
-    display: flex;
-    flex-direction: column;
-    width: 326px;
-    color: #fff;
-    position: relative;
-    max-width: 100%;
-}
-
-.ns_input {
-    border-radius: 8px;
-    padding: 10px 12px;
-    font-size: 16px;
-    font-weight: 400;
-}
-
-.ns_input_icon {
-    position: absolute;
-    right: 20px;
-    top: 51%;
-}
-
-.ns_input_title {
-    font-size: 16px;
-    font-weight: 400;
-}

package/dist/components/NSInputInteger.module.css

@@ -1,26 +0,0 @@
-.ns_input_parent {
-    display: flex;
-    flex-direction: column;
-    width: 326px;
-    color: #fff;
-    position: relative;
-    max-width: 100%;
-}
-
-.ns_input {
-    border-radius: 8px;
-    padding: 10px 12px;
-    font-size: 16px;
-    font-weight: 400;
-}
-
-.ns_input_icon {
-    position: absolute;
-    right: 20px;
-    top: 51%;
-}
-
-.ns_input_title {
-    font-size: 16px;
-    font-weight: 400;
-}

package/dist/components/NSInputPassword.module.css

@@ -1,27 +0,0 @@
-.ns_input_parent {
-    display: flex;
-    flex-direction: column;
-    width: 326px;
-    color: #fff;
-    position: relative;
-    max-width: 100%;
-}
-
-.ns_input {
-    border-radius: 8px;
-    padding: 10px 12px;
-    font-size: 16px;
-    font-weight: 400;
-}
-
-.ns_input_icon {
-    position: absolute;
-    right: 20px;
-    top: 51%;
-    z-index: 1;
-}
-
-.ns_input_title {
-    font-size: 16px;
-    font-weight: 400;
-}

package/dist/components/NSInputPhone.module.css

@@ -1,33 +0,0 @@
-.ns_input_parent {
-    display: flex;
-    flex-direction: column;
-    width: 326px;
-
-    position: relative;
-    max-width: 100%;
-}
-
-.ns_input {
-    height: 48px !important;
-    font-size: 16px !important;
-    font-weight: 400;
-    width: 310px !important;
-}
-
-.ns_input span {
-    color: #000 !important;
-
-}
-
-.ns_input_icon {
-    position: absolute;
-    right: 20px;
-    top: 51%;
-    z-index: 1;
-}
-
-.ns_input_title {
-    color: #fff;
-    font-size: 16px;
-    font-weight: 400;
-}

package/dist/components/NSInputPrice.module.css

@@ -1,27 +0,0 @@
-.ns_input_parent {
-    display: flex;
-    flex-direction: column;
-    width: 326px;
-    color: #fff;
-    position: relative;
-    max-width: 100%;
-}
-
-.ns_input {
-    border-radius: 8px;
-    padding: 10px 12px;
-    font-size: 16px;
-    font-weight: 400;
-}
-
-.ns_input_icon {
-    position: absolute;
-    right: 20px;
-    top: 33%;
-    z-index: 1;
-}
-
-.ns_input_title {
-    font-size: 16px;
-    font-weight: 400;
-}

package/dist/components/NSInputSearch.module.css

@@ -1,27 +0,0 @@
-.ns_input_form {
-    display: flex;
-    flex-direction: column;
-    width: 326px;
-    color: #fff;
-    max-width: 100%;
-    position: relative;
-}
-
-.ns_input {
-    border-radius: 8px;
-    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: 34%;
-}
-
-.ns_input_title {
-    font-size: 16px;
-    font-weight: 400;
-}

package/dist/components/NSInputString.module.css

@@ -1,27 +0,0 @@
-.ns_input_parent {
-    display: flex;
-    flex-direction: column;
-    width: 326px;
-    color: #fff;
-    position: relative;
-    max-width: 100%;
-}
-
-.ns_input {
-    border-radius: 8px;
-    padding: 10px 12px;
-    font-size: 16px;
-    font-weight: 400;
-}
-
-.ns_input_icon {
-    position: absolute;
-    right: 20px;
-    top: 51%;
-    z-index: 1;
-}
-
-.ns_input_title {
-    font-size: 16px;
-    font-weight: 400;
-}

package/dist/components/NSInputText.module.css

@@ -1,28 +0,0 @@
-.ns_input_parent {
-    display: flex;
-    flex-direction: column;
-    width: 326px;
-    color: #fff;
-    position: relative;
-    max-width: 100%;
-    padding: 8px;
-}
-
-.ns_input {
-    border-radius: 8px;
-    padding: 10px 12px;
-    font-size: 16px;
-    font-weight: 400;
-}
-
-.ns_input_icon {
-    position: absolute;
-    right: 20px;
-    top: 51%;
-    z-index: 1;
-}
-
-.ns_input_title {
-    font-size: 16px;
-    font-weight: 400;
-}

package/dist/components/NSInputTime.module.css

@@ -1,27 +0,0 @@
-.ns_input_parent {
-    display: flex;
-    flex-direction: column;
-    width: 326px;
-    color: #fff;
-    position: relative;
-    max-width: 100%;
-}
-
-.ns_input {
-    border-radius: 8px;
-    padding: 10px 12px;
-    font-size: 16px;
-    font-weight: 400;
-}
-
-.ns_input_icon {
-    position: absolute;
-    right: 20px;
-    top: 51%;
-    z-index: 1;
-}
-
-.ns_input_title {
-    font-size: 16px;
-    font-weight: 400;
-}

package/src/components/NSInputDuration.module.css

@@ -1,26 +0,0 @@
-.ns_input_parent {
-    display: flex;
-    flex-direction: column;
-    width: 326px;
-    color: #fff;
-    position: relative;
-    max-width: 100%;
-}
-
-.ns_input {
-    border-radius: 8px;
-    padding: 10px 12px;
-    font-size: 16px;
-    font-weight: 400;
-}
-
-.ns_input_icon {
-    position: absolute;
-    right: 20px;
-    top: 51%;
-}
-
-.ns_input_title {
-    font-size: 16px;
-    font-weight: 400;
-}