namirasoft-site-react 1.3.61 → 1.3.63

package/src/components/NSPagination.tsx

@@ -1,8 +1,5 @@
-"use client";
-
 import { BaseComponentProps } from '../props/BaseComponentProps';
 import Styles from './NSPagination.module.css';
-import { Component } from 'react';
 
 export interface NSPaginationProps extends BaseComponentProps
 {
@@ -10,88 +7,75 @@ export interface NSPaginationProps extends BaseComponentProps
     page: number;
 }
 
-export interface NSPaginationState
-{
-    size: number;
-    page: number;
-}
-export class NSPagination extends Component<NSPaginationProps, NSPaginationState>
+export function NSPagination(props: NSPaginationProps)
 {
-    constructor(props: NSPaginationProps)
-    {
-        super(props);
-        this.state = { size: props.size, page: props.page }
-    }
-    override render()
+    let page = props.page;
+    let size = props.size;
+    let window = 2;
+    let min = Math.max(2, page - window);
+    let max = Math.min(page + window, size - 1);
+    let arr = [];
+    let pushPage = (index: number) =>
     {
-        let page = this.props.page;
-        let size = this.props.size;
-        let window = 2;
-        let min = Math.max(2, page - window);
-        let max = Math.min(page + window, size - 1);
-        let arr = [];
-        let pushPage = (index: number) =>
-        {
-            if (index == page)
-                arr.push(
-                    <div className={`${Styles.ns_select_number_parent}`}>
-                        <a href='#' className={`${Styles.ns_paginate_link} ${Styles.ns_select_number}`}>{index}</a>
-                    </div>
-                );
-            else
-                arr.push(
-                    <div>
-                        <a href='#' className={`${Styles.ns_paginate_link}`}>{index}</a>
-                    </div>
-                );
-        };
-        arr.push(
-            <div>
-                <a href='#'>
-                    <img
-                        src='https://static.namirasoft.com/icons/base/circle-chevron-left.png'
-                        alt='left_vector'
-                        width={32}
-                        height={32}
-                    />
-                </a>
-            </div>
-        );
-        pushPage(1);
-        if (page > window * 2)
+        if (index == page)
             arr.push(
-                <div>
-                    <a href='#' className={`${Styles.ns_paginate_link}`}>...</a>
+                <div className={`${Styles.ns_select_number_parent}`}>
+                    <a href='#' className={`${Styles.ns_paginate_link} ${Styles.ns_select_number}`}>{index}</a>
                 </div>
             );
-        for (let i = min; i <= max; i++)
-            pushPage(i);
-        if (page <= size - window * 2)
+        else
             arr.push(
                 <div>
-                    <a href='#' className={`${Styles.ns_paginate_link}`}>...</a>
+                    <a href='#' className={`${Styles.ns_paginate_link}`}>{index}</a>
                 </div>
             );
-        pushPage(size);
+    };
+    arr.push(
+        <div>
+            <a href='#'>
+                <img
+                    src='https://static.namirasoft.com/icons/base/circle-chevron-left.png'
+                    alt='left_vector'
+                    width={32}
+                    height={32}
+                />
+            </a>
+        </div>
+    );
+    pushPage(1);
+    if (page > window * 2)
         arr.push(
             <div>
-                <a href='#'>
-                    <img
-                        src='https://static.namirasoft.com/icons/base/circle-chevron-right.png'
-                        width={32}
-                        height={32}
-                        alt='right_vector'
-                    />
-                </a>
+                <a href='#' className={`${Styles.ns_paginate_link}`}>...</a>
             </div>
         );
-
-        return (
-            <div id={this.props.id}
-                className={`${Styles.ns_pagination_container} ${this.props.classList?.join(" ")}`}
-                style={this.props.style}>
-                {arr.map(x => (x))}
+    for (let i = min; i <= max; i++)
+        pushPage(i);
+    if (page <= size - window * 2)
+        arr.push(
+            <div>
+                <a href='#' className={`${Styles.ns_paginate_link}`}>...</a>
             </div>
         );
-    }
+    pushPage(size);
+    arr.push(
+        <div>
+            <a href='#'>
+                <img
+                    src='https://static.namirasoft.com/icons/base/circle-chevron-right.png'
+                    width={32}
+                    height={32}
+                    alt='right_vector'
+                />
+            </a>
+        </div>
+    );
+
+    return (
+        <div id={props.id}
+            className={`${Styles.ns_pagination_container} ${props.classList?.join(" ")}`}
+            style={props.style}>
+            {arr.map(x => (x))}
+        </div>
+    );
 }

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.module.css

@@ -1,11 +1,11 @@
 .ns_input_parent {
-    width: 326px;
+    width: 272px;
     max-width: 100%;
 }
 
 .ns_input_select {
-    height: 45px;
-    width: 304px !important;
+    height: 48px;
+    width: 272px !important;
 }
 
 .ns_input_select span span svg path {

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/pages/NSLoginPage.tsx

@@ -1,4 +1,3 @@
-import { Component } from 'react';
 import Styles from './NSLoginPage.module.css'
 import { NSButtonGreen } from '../components/NSButtonGreen';
 import { NSLinkBlue } from '../components/NSLinkBlue';
@@ -13,29 +12,26 @@ export interface NSLoginPageProps
     onClick?: () => void;
 }
 
-export class NSLoginPage extends Component<NSLoginPageProps>
+export function NSLoginPage(props: NSLoginPageProps)
 {
-    override render()
-    {
-        let button = <></>;
-        if (this.props.href)
-            button = <NSLinkBlue title="Login" href={this.props.href ?? ""} />;
-        else if (this.props.onClick)
-            button = <NSButtonGreen title="Login" onClick={this.props.onClick} />;
-        return (
-            <div style={{ backgroundImage: this.props.background, width: "100%", backgroundSize: "cover" }}>
-                <div className={`${Styles.ns_login_container}`} style={{ marginTop: "100px" }}>
-                    <div className={`${Styles.ns_logo}`}>
-                        <img width={256} height={256} src={this.props.logo} alt={`${this.props.title} Logo`}></img>
-                    </div>
-                    <NSSpace size={NSSpaceSizeType.SMALL} />
-                    <div><h1 className={`${Styles.ns_title}`}>{this.props.title}</h1></div>
-                    <NSSpace size={NSSpaceSizeType.SMALL} />
-                    <div className={`${Styles.ns_button}`}>
-                        {button}
-                    </div>
+    let button = <></>;
+    if (props.href)
+        button = <NSLinkBlue title="Login" href={props.href ?? ""} />;
+    else if (props.onClick)
+        button = <NSButtonGreen title="Login" onClick={props.onClick} />;
+    return (
+        <div style={{ backgroundImage: props.background, width: "100%", backgroundSize: "cover" }}>
+            <div className={`${Styles.ns_login_container}`} style={{ marginTop: "100px" }}>
+                <div className={`${Styles.ns_logo}`}>
+                    <img width={256} height={256} src={props.logo} alt={`${props.title} Logo`}></img>
                 </div>
-            </div >
-        );
-    }
+                <NSSpace size={NSSpaceSizeType.SMALL} />
+                <div><h1 className={`${Styles.ns_title}`}>{props.title}</h1></div>
+                <NSSpace size={NSSpaceSizeType.SMALL} />
+                <div className={`${Styles.ns_button}`}>
+                    {button}
+                </div>
+            </div>
+        </div >
+    );
 }

package/src/pages/NSNotFoundPage.tsx

@@ -1,18 +1,12 @@
-"use client";
-
-import { Component } from 'react';
 import Styles from './NSNotFoundPage.module.css'
 import { NSLinkBlue } from '../main';
 
-export class NSNotFoundPage extends Component
+export function NSNotFoundPage()
 {
-	override render()
-	{
-		return (
-			<>
-				<div className={Styles.ns_not_found_page}></div>
-				<NSLinkBlue href='/' target='_self' title='Back To Home'/>``
-			</>
-		);
-	}
+	return (
+		<>
+			<div className={Styles.ns_not_found_page}></div>
+			<NSLinkBlue href='/' target='_self' title='Back To Home' />``
+		</>
+	);
 }

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;
-}