namirasoft-site-react 1.4.134 → 1.4.136

package/src/Validator.ts

@@ -1,126 +1,126 @@
-import { PhoneOperation } from "namirasoft-core";
-import { IValidationNumberProps } from "./props/IValidationNumberProps";
-import { IValidationProps } from "./props/IValidationProps";
-import { IValidationStringProps } from "./props/IValidationStringProps";
-import { DateSchema, DurationSchema, EmailSchema, IPV4Schema, IPV6Schema, TimeSchema } from "namirasoft-schema";
-
-export class Validator
-{
-    static getError(name: string, value: string | number | null | undefined, validator: IValidationProps): string | null
-    {
-        if (validator.required)
-            if (!value)
-                return `${name} is required.`;
-        if (value != null)
-            if (validator.regex)
-            {
-                if (!new RegExp(validator.regex.regex).test(value + ""))
-                    return `${name} is not a valid ${validator.regex.name}.`;
-            }
-        if (value != null)
-            if (validator.validator)
-            {
-                let error = validator.validator(name, value);
-                if (error)
-                    return error;
-            }
-        return null;
-    }
-    static getErrorString(name: string, value: string | null | undefined, validator: IValidationStringProps): string | null
-    {
-        if (value != null)
-        {
-            if (validator.max_length != null)
-                if (validator.max_length < value.length)
-                    return `Max length of ${name} should be ${validator.max_length} characters.`;
-            if (validator.min_length != null)
-                if (validator.min_length > value.length)
-                    return `Minlength of ${name} should be ${validator.min_length} characters.`;
-        }
-        return null;
-    }
-    static getErrorNumber(name: string, value: number | null | undefined, validator: IValidationNumberProps): string | null
-    {
-        if (value != null)
-        {
-            if (isNaN(value))
-                return `${name} is not a number.`;
-            if (validator.max != null)
-                if (validator.max < value)
-                    return `Max value of ${name} should be ${validator.max} characters.`;
-            if (validator.min != null)
-                if (validator.min > value)
-                    return `Min value of ${name} should be ${validator.min} characters.`;
-        }
-        return null;
-    }
-    static getErrorEmail(name: string, value: string | null | undefined, validator: IValidationProps): string | null
-    {
-        if (!validator.required)
-            if (!value)
-                return null;
-        return Validator.getError(name, value, {
-            required: true, regex: {
-                name: "Email",
-                regex: EmailSchema.REGEX
-            }
-        });
-    }
-    static getErrorDate(name: string, value: string | null | undefined): string | null
-    {
-        return Validator.getError(name, value, {
-            required: true, regex: {
-                name: "Date",
-                regex: DateSchema.REGEX
-            }
-        });
-    }
-    static getErrorTime(name: string, value: string | null | undefined): string | null
-    {
-        return Validator.getError(name, value, {
-            required: true, regex: {
-                name: "Time",
-                regex: TimeSchema.REGEX
-            }
-        });
-    }
-    static getErrorDuration(name: string, value: string | null | undefined): string | null
-    {
-        return Validator.getError(name, value, {
-            required: true, regex: {
-                name: "Duration",
-                regex: DurationSchema.REGEX
-            }
-        });
-    }
-    static getErrorIPV4(name: string, value: string | null | undefined): string | null
-    {
-        return Validator.getError(name, value, {
-            required: true, regex: {
-                name: "IP",
-                regex: IPV4Schema.REGEX
-            }
-        });
-    }
-    static getErrorIPV6(name: string, value: string | null | undefined): string | null
-    {
-        return Validator.getError(name, value, {
-            required: true, regex: {
-                name: "IP",
-                regex: IPV6Schema.REGEX
-            }
-        });
-    }
-    static getErrorPhone(name: string, value: string | null | undefined): string | null
-    {
-        return Validator.getError(name, value, {
-            required: true, validator: () =>
-            {
-                if (value)
-                    if (!PhoneOperation.isValid(value))
-                        return `${name} is not a valid phone number`;
-                return null;
-            }
-        });
-    }
+import { PhoneOperation } from "namirasoft-core";
+import { IValidationNumberProps } from "./props/IValidationNumberProps";
+import { IValidationProps } from "./props/IValidationProps";
+import { IValidationStringProps } from "./props/IValidationStringProps";
+import { DateSchema, DurationSchema, EmailSchema, IPV4Schema, IPV6Schema, TimeSchema } from "namirasoft-schema";
+
+export class Validator
+{
+    static getError(name: string, value: string | number | null | undefined, validator: IValidationProps): string | null
+    {
+        if (validator.required)
+            if (!value)
+                return `${name} is required.`;
+        if (value != null)
+            if (validator.regex)
+            {
+                if (!new RegExp(validator.regex.regex).test(value + ""))
+                    return `${name} is not a valid ${validator.regex.name}.`;
+            }
+        if (value != null)
+            if (validator.validator)
+            {
+                let error = validator.validator(name, value);
+                if (error)
+                    return error;
+            }
+        return null;
+    }
+    static getErrorString(name: string, value: string | null | undefined, validator: IValidationStringProps): string | null
+    {
+        if (value != null)
+        {
+            if (validator.max_length != null)
+                if (validator.max_length < value.length)
+                    return `Max length of ${name} should be ${validator.max_length} characters.`;
+            if (validator.min_length != null)
+                if (validator.min_length > value.length)
+                    return `Minlength of ${name} should be ${validator.min_length} characters.`;
+        }
+        return null;
+    }
+    static getErrorNumber(name: string, value: number | null | undefined, validator: IValidationNumberProps): string | null
+    {
+        if (value != null)
+        {
+            if (isNaN(value))
+                return `${name} is not a number.`;
+            if (validator.max != null)
+                if (validator.max < value)
+                    return `Max value of ${name} should be ${validator.max} characters.`;
+            if (validator.min != null)
+                if (validator.min > value)
+                    return `Min value of ${name} should be ${validator.min} characters.`;
+        }
+        return null;
+    }
+    static getErrorEmail(name: string, value: string | null | undefined, validator: IValidationProps): string | null
+    {
+        if (!validator.required)
+            if (!value)
+                return null;
+        return Validator.getError(name, value, {
+            required: true, regex: {
+                name: "Email",
+                regex: EmailSchema.REGEX
+            }
+        });
+    }
+    static getErrorDate(name: string, value: string | null | undefined): string | null
+    {
+        return Validator.getError(name, value, {
+            required: true, regex: {
+                name: "Date",
+                regex: DateSchema.REGEX
+            }
+        });
+    }
+    static getErrorTime(name: string, value: string | null | undefined): string | null
+    {
+        return Validator.getError(name, value, {
+            required: true, regex: {
+                name: "Time",
+                regex: TimeSchema.REGEX
+            }
+        });
+    }
+    static getErrorDuration(name: string, value: string | null | undefined): string | null
+    {
+        return Validator.getError(name, value, {
+            required: true, regex: {
+                name: "Duration",
+                regex: DurationSchema.REGEX
+            }
+        });
+    }
+    static getErrorIPV4(name: string, value: string | null | undefined): string | null
+    {
+        return Validator.getError(name, value, {
+            required: true, regex: {
+                name: "IP",
+                regex: IPV4Schema.REGEX
+            }
+        });
+    }
+    static getErrorIPV6(name: string, value: string | null | undefined): string | null
+    {
+        return Validator.getError(name, value, {
+            required: true, regex: {
+                name: "IP",
+                regex: IPV6Schema.REGEX
+            }
+        });
+    }
+    static getErrorPhone(name: string, value: string | null | undefined): string | null
+    {
+        return Validator.getError(name, value, {
+            required: true, validator: () =>
+            {
+                if (value)
+                    if (!PhoneOperation.isValid(value))
+                        return `${name} is not a valid phone number`;
+                return null;
+            }
+        });
+    }
 }

package/src/components/NSBarAction.module.css

@@ -1,98 +1,98 @@
-.title {
-	text-align: center;
-	color: rgba(20, 27, 92, 1);
-}
-
-.description {
-	text-align: center;
-	color: rgba(20, 27, 92, 1);
-	margin: 0px;
-}
-
-.ns_action_bar_holder {
-	z-index: 1;
-	padding: 0 16px;
-	position: sticky;
-	background-color: #fff;
-	width: 100%;
-	height: 100%;
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: center;
-	align-items: center;
-	box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
-	-webkit-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
-	-moz-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
-}
-
-.ns_actions_holder {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-direction: column;
-	flex-wrap: wrap;
-	gap: 0 16px;
-	width: 100%;
-}
-
-.ns_info_container {
-	border: none;
-	outline: none;
-	background: none;
-}
-
-.ns_layout_description_holder {
-	display: flex;
-}
-
-.ns_hide {
-	display: none;
-}
-
-.ns_show {
-	display: flex;
-}
-
-.ns_desktop_action_bar_title {
-	display: none;
-}
-
-.ns_mobile_action_bar_title {
-	display: block;
-}
-
-@media only screen and (min-width: 480px) {
-	.ns_actions_holder {
-		flex-direction: row;
-		flex: 1 1 0;
-	}
-}
-
-@media only screen and (min-width: 992px) {
-	.ns_action_bar_holder {
-		justify-content: space-between;
-		min-height: 80px;
-	}
-
-	.ns_actions_holder {
-		justify-content: flex-end;
-	}
-
-	.ns_desktop_action_bar_title {
-		display: flex;
-	}
-
-	.ns_mobile_action_bar_title {
-		display: none;
-	}
-
-	.ns_info_container {
-		margin: 0;
-		display: flex;
-		align-items: center;
-		justify-content: flex-start;
-		gap: 4px;
-	}
-
+.title {
+	text-align: center;
+	color: rgba(20, 27, 92, 1);
+}
+
+.description {
+	text-align: center;
+	color: rgba(20, 27, 92, 1);
+	margin: 0px;
+}
+
+.ns_action_bar_holder {
+	z-index: 1;
+	padding: 0 16px;
+	position: sticky;
+	background-color: #fff;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+	box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
+	-webkit-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
+	-moz-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
+.ns_actions_holder {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	flex-wrap: wrap;
+	gap: 16px;
+	width: 100%;
+	margin: 16px 0px 16px 0px;
+}
+
+.ns_info_container {
+	border: none;
+	outline: none;
+	background: none;
+}
+
+.ns_layout_description_holder {
+	display: flex;
+}
+
+.ns_hide {
+	display: none;
+}
+
+.ns_show {
+	display: flex;
+}
+
+.ns_desktop_action_bar_title {
+	display: none;
+}
+
+.ns_mobile_action_bar_title {
+	display: block;
+}
+
+@media only screen and (min-width: 480px) {
+	.ns_actions_holder {
+		flex-direction: row;
+		flex: 1 1 0;
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	.ns_action_bar_holder {
+		justify-content: space-between;
+		min-height: 80px;
+	}
+
+	.ns_actions_holder {
+		justify-content: flex-end;
+	}
+
+	.ns_desktop_action_bar_title {
+		display: flex;
+	}
+
+	.ns_mobile_action_bar_title {
+		display: none;
+	}
+
+	.ns_info_container {
+		margin: 0;
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		gap: 4px;
+	}
 }

package/src/components/NSBarAction.tsx

@@ -1,90 +1,92 @@
-import React, { useState } from 'react';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-import Styles from './NSBarAction.module.css';
-import { NSMenuActionProps, NSMenuAction } from './NSMenuAction';
-import { NSDialogInfo } from './NSDialogInfo';
-import { isNotEmptyString } from './NSLayout';
-
-export interface NSBarActionProps 
-{
-	title: string;
-	description?: string;
-	menus: { [group: string]: NSMenuActionProps[] };
-}
-
-export interface NSBarActionState
-{
-	show: boolean
-}
-
-export function NSBarAction(props: NSBarActionProps)
-{
-	let lines = (props.description ?? "").split(/(\n|\\n|<br>|<br\s*\/>)/gm);
-
-	const [state, setState] = useState<NSBarActionState>({
-		show: false
-	})
-
-	const groups = Object.keys(props.menus);
-
-	return (
-		<>
-			<div className={Styles.ns_action_bar_holder}>
-				{/* Desktop  */}
-				<div className='container d-flex justify-content-center justify-content-lg-between  align-items-center w-100'>
-					<div className={`d-none d-lg-flex ${Styles.ns_desktop_action_bar_title}`}>
-						<h1 className={Styles.title}>{props.title}</h1>
-						{
-							isNotEmptyString(props.description) &&
-							<button className={Styles.ns_info_container} onClick={() => setState({ show: true })}>
-								<img src='https://static.namirasoft.com/image/concept/info/white-blue.svg' alt='info-icon' width={24} height={24} />
-								<span> Info </span>
-							</button>
-						}
-						{
-							state.show &&
-							<NSDialogInfo
-								description={props.description}
-								title={props.title}
-								onClose={() => setState({ show: false })}
-							>
-								<></>
-							</NSDialogInfo>
-						}
-					</div>
-					<div className={Styles.ns_actions_holder}>
-						{
-							groups.map((group, index) =>
-								<NSMenuAction key={`NSBarAction_NSMenuAction_Key_${index}`} name={group} items={props.menus[group]} />
-							)
-						}
-					</div>
-				</div>
-			</div>
-			{/* Mobile  */}
-			<div className={`container d-block d-lg-none ${Styles.ns_mobile_action_bar_title}`}>
-				<NSSpace size={NSSpaceSizeType.SMALL} />
-				<h1 className={Styles.title}>{props.title}</h1>
-				{
-					props.description && lines &&
-					<>
-						<p className={Styles.description}>
-							{
-								lines.map((line, index) =>
-								{
-									return (
-										<React.Fragment key={`NSBarAction_fragment_key_${index}`}>
-											{line.trim()}
-											{index !== lines.length - 1 && <br />}
-										</React.Fragment>
-									)
-								})
-							}
-						</p>
-						<NSSpace size={NSSpaceSizeType.MINI} />
-					</>
-				}
-			</div>
-		</>
-	);
+import React, { useState } from 'react';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import Styles from './NSBarAction.module.css';
+import { NSMenuActionProps, NSMenuAction } from './NSMenuAction';
+import { NSDialogInfo } from './NSDialogInfo';
+import { isNotEmptyString } from './NSLayout';
+
+export interface NSBarActionProps 
+{
+	title: string;
+	description?: string;
+	menus: { [group: string]: NSMenuActionProps[] };
+}
+
+export interface NSBarActionState
+{
+	show: boolean
+}
+
+export function NSBarAction(props: NSBarActionProps)
+{
+	let lines = (props.description ?? "").split(/(\n|\\n|<br>|<br\s*\/>)/gm);
+
+	const [state, setState] = useState<NSBarActionState>({
+		show: false
+	})
+
+	const groups = Object.keys(props.menus);
+
+	return (
+		<>
+			<div className={Styles.ns_action_bar_holder}>
+				{/* Desktop  */}
+				<div className='container d-flex justify-content-center justify-content-lg-between align-items-center w-100'>
+					<div className={`d-none d-lg-flex ${Styles.ns_desktop_action_bar_title}`}>
+						<h1 className={Styles.title}>{props.title}</h1>
+						{
+							isNotEmptyString(props.description) &&
+							<button className={Styles.ns_info_container} onClick={() => setState({ show: true })}>
+								<img src='https://static.namirasoft.com/image/concept/info/white-blue.svg' alt='info-icon' width={24} height={24} />
+								<span> Info </span>
+							</button>
+						}
+						{
+							state.show &&
+							<NSDialogInfo
+								description={props.description}
+								title={props.title}
+								onClose={() => setState({ show: false })}
+							>
+								<></>
+							</NSDialogInfo>
+						}
+					</div>
+					<div className={Styles.ns_actions_holder}>
+						{
+							groups.map((group, index) =>
+								<NSMenuAction key={`NSBarAction_NSMenuAction_Key_${index}`} name={group} items={props.menus[group]} />
+							)
+						}
+					</div>
+				</div>
+				{/* Desktop  */}
+			</div>
+			{/* Mobile */}
+			<div className={`container d-block d-lg-none ${Styles.ns_mobile_action_bar_title}`}>
+				<NSSpace size={NSSpaceSizeType.SMALL} />
+				<h1 className={Styles.title}>{props.title}</h1>
+				{
+					props.description && lines &&
+					<>
+						<p className={Styles.description}>
+							{
+								lines.map((line, index) =>
+								{
+									return (
+										<React.Fragment key={`NSBarAction_fragment_key_${index}`}>
+											{line.trim()}
+											{index !== lines.length - 1 && <br />}
+										</React.Fragment>
+									)
+								})
+							}
+						</p>
+						<NSSpace size={NSSpaceSizeType.MINI} />
+					</>
+				}
+			</div>
+			{/* Mobile */}
+		</>
+	);
 }