namirasoft-site-react 1.5.22 → 1.5.23

package/src/components/NSBoxSchemaBase.tsx

@@ -1,562 +1,562 @@
-"use client";
-
-import Styles from "./NSBoxSchemaBase.module.css";
-
-import React, { createRef } from "react";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { IValidationProps } from "../props/IValidationProps";
-import { IValidationStringProps } from "../props/IValidationStringProps";
-import { safeMenuMenuItem } from "./NSMenuButton";
-import { INSBoxBaseLayoutProps } from "./NSBoxBaseLayout";
-import { INSBox } from "./INSBox";
-import { NSBoxEnum } from "./NSBoxEnum";
-import { AnySchema, ArraySchema, BaseNumberSchema, BasePrecisionSchema, BaseTypeSchema, BaseVariableSchema, BigIntSchema, BoolSchema, ColorSchema, DateSchema, DateTimeSchema, DecimalSchema, DoubleSchema, DurationSchema, EmailSchema, EntitySchema, EnumSchema, FilePathSchema, FloatSchema, FontSchema, IntegerSchema, IPV4RangeSchema, IPV4Schema, IPV6RangeSchema, IPV6Schema, MediumIntSchema, MoneySchema, ObjectSchema, PhoneSchema, RealSchema, SmallIntSchema, StringSchema, TimeSchema, TimeZoneSchema, TinyIntSchema, TypeSchema, URLSchema, VariableSchema, VariableType, VersionSchema } from "namirasoft-schema";
-import { NSBoxBoolean } from "./NSBoxBoolean";
-import { NSRow } from "./NSRow";
-import { NSBoxString } from "./NSBoxString";
-import { NSBoxInteger } from "./NSBoxInteger";
-import { NSBoxBaseLayoutRecursive } from "./NSBoxBaseLayoutRecursive";
-import { NSRepeaterNSBoxSchemaVariable } from "./NSRepeaterNSBoxSchemaVariable";
-import { NSColumn } from "./NSColumn";
-
-export interface NSBoxSchemaBaseProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, INSBoxBaseLayoutProps<NSBoxSchemaBase, string>
-{
-	name: string;
-	depth?: number;
-}
-
-export interface NSBoxSchemaBaseState
-{
-	type: VariableType | null;
-	show_details: boolean;
-}
-
-export class NSBoxSchemaBase extends React.Component<NSBoxSchemaBaseProps, NSBoxSchemaBaseState> implements INSBox
-{
-	private NSBoxEnum_Type = createRef<NSBoxEnum<VariableType>>();
-	private NSBoxString_Name = createRef<NSBoxString>();
-	private NSBoxBoolean_Required = createRef<NSBoxBoolean>();
-	private NSBoxSchemaBase_ArraySchema = createRef<NSBoxSchemaBase>();
-	private NSRepeaterNSBoxSchemaVariable_ObjectFields = createRef<NSRepeaterNSBoxSchemaVariable>();
-	private NSBoxInteger_Min = createRef<NSBoxInteger>();
-	private NSBoxInteger_Max = createRef<NSBoxInteger>();
-	private NSBoxInteger_Precision = createRef<NSBoxInteger>();
-	private NSBoxInteger_MinLength = createRef<NSBoxInteger>();
-	private NSBoxInteger_MaxLength = createRef<NSBoxInteger>();
-	private NSBoxString_Regex = createRef<NSBoxString>();
-	private NSBoxString_ValidList = createRef<NSBoxString>();
-	private NSBoxString_InalidList = createRef<NSBoxString>();
-	private NSBoxString_PlaceHolder = createRef<NSBoxString>();
-	NSBoxBaseLayoutRecursive_Main = createRef<NSBoxBaseLayoutRecursive>();
-	constructor(props: NSBoxSchemaBaseProps)
-	{
-		super(props);
-		this.state = {
-			type: null,
-			show_details: false,
-		};
-		this.isEmpty = this.isEmpty.bind(this);
-		this.getError = this.getError.bind(this);
-		this.getValue = this.getValue.bind(this);
-		this.setValue = this.setValue.bind(this);
-		this.onChanged = this.onChanged.bind(this);
-	}
-	isEmpty(value: BaseTypeSchema | null): boolean
-	{
-		if (value)
-			if (value.type || value.example || value.valids?.length > 0 || value.invalids?.length > 0)
-				return false;
-		return true;
-	}
-	getError(): string | null
-	{
-		let ans = this.NSBoxEnum_Type.current?.getError() ||
-			this.NSBoxString_Name.current?.getError() ||
-			this.NSBoxBoolean_Required.current?.getError() ||
-			this.NSBoxSchemaBase_ArraySchema.current?.getError() ||
-			this.NSRepeaterNSBoxSchemaVariable_ObjectFields.current?.getError() ||
-			this.NSBoxInteger_Min.current?.getError() ||
-			this.NSBoxInteger_Max.current?.getError() ||
-			this.NSBoxInteger_Precision.current?.getError() ||
-			this.NSBoxInteger_MinLength.current?.getError() ||
-			this.NSBoxInteger_MaxLength.current?.getError() ||
-			this.NSBoxString_Regex.current?.getError() ||
-			this.NSBoxString_ValidList.current?.getError() ||
-			this.NSBoxString_InalidList.current?.getError() ||
-			this.NSBoxString_PlaceHolder.current?.getError();
-		return ans ?? null;
-	}
-	getValue(checkError: boolean = true): BaseTypeSchema | null
-	{
-        if (this.props.nullable)
-            if (this.NSBoxBaseLayoutRecursive_Main.current?.NSBoxBaseLayout_Main.current?.isNull())
-                return null;
-
-		return NSBoxBaseLayoutRecursive.checkGetValue(this, checkError, () =>
-		{
-			let type = this.NSBoxEnum_Type.current?.getValueEnumOne(VariableType, VariableType.Any, checkError) ?? null;
-			let required = this.NSBoxBoolean_Required.current?.getValueBool(checkError) ?? false;
-
-			let name = this.NSBoxString_Name.current?.getValue(checkError) ?? null;
-			let min = this.NSBoxInteger_Min.current?.getValue(checkError) ?? null;
-			let max = this.NSBoxInteger_Max.current?.getValue(checkError) ?? null;
-			let precision = this.NSBoxInteger_Precision.current?.getValue(checkError) ?? null;
-			let min_length = this.NSBoxInteger_MinLength.current?.getValue(checkError) ?? null;
-			let max_length = this.NSBoxInteger_MaxLength.current?.getValue(checkError) ?? null;
-			let regex = this.NSBoxString_Regex.current?.getValue(checkError) ?? null;
-			let schema = this.NSBoxSchemaBase_ArraySchema.current?.getValue(checkError) ?? null;
-			let fields = this.NSRepeaterNSBoxSchemaVariable_ObjectFields.current?.getValue(checkError) ?? null;
-			let valid_list = this.NSBoxString_ValidList.current?.getValue(checkError)?.split(",") ?? [];
-			let invlid_list = this.NSBoxString_InalidList.current?.getValue(checkError)?.split(",") ?? [];
-			let place_holder = this.NSBoxString_PlaceHolder.current?.getValue(checkError) ?? undefined;
-			let enum_object: { [name: string]: string; } = {};
-			invlid_list.forEach((v) => enum_object[v] = v);
-
-			let ans = null;
-			if (type)
-			{
-				switch (type)
-				{
-					/* VariableType */
-					case VariableType.Any:
-						ans = new AnySchema(required);
-						break;
-					case VariableType.Boolean:
-						ans = new BoolSchema(required);
-						break;
-					case VariableType.TinyInt:
-						ans = new TinyIntSchema(required, max, min);
-						break;
-					case VariableType.SmallInt:
-						ans = new SmallIntSchema(required, max, min);
-						break;
-					case VariableType.MediumInt:
-						ans = new MediumIntSchema(required, max, min);
-						break;
-					case VariableType.Integer:
-						ans = new IntegerSchema(required, max, min);
-						break;
-					case VariableType.BigInt:
-						ans = new BigIntSchema(required, max, min);
-						break;
-					case VariableType.Float:
-						ans = new FloatSchema(required, max, min, precision);
-						break;
-					case VariableType.Double:
-						ans = new DoubleSchema(required, max, min, precision);
-						break;
-					case VariableType.Decimal:
-						ans = new DecimalSchema(required, max, min, precision);
-						break;
-					case VariableType.Real:
-						ans = new RealSchema(required, max, min, precision);
-						break;
-					case VariableType.Money:
-						ans = new MoneySchema(required, max, min);
-						break;
-					case VariableType.String:
-						ans = new StringSchema(required, min_length, max_length);
-						if (regex)
-							ans.regex = new RegExp(regex);
-						break;
-					case VariableType.Date:
-						ans = new DateSchema(required);
-						break;
-					case VariableType.Time:
-						ans = new TimeSchema(required);
-						break;
-					case VariableType.DateTime:
-						ans = new DateTimeSchema(required);
-						break;
-					case VariableType.TimeZone:
-						ans = new TimeZoneSchema(required);
-						break;
-					case VariableType.Duration:
-						ans = new DurationSchema(required);
-						break;
-					case VariableType.Email:
-						ans = new EmailSchema(required);
-						break;
-					case VariableType.Phone:
-						ans = new PhoneSchema(required);
-						break;
-					case VariableType.Version:
-						ans = new VersionSchema(required);
-						break;
-					case VariableType.IPV4:
-						ans = new IPV4Schema(required);
-						break;
-					case VariableType.IPV6:
-						ans = new IPV6Schema(required);
-						break;
-					case VariableType.IPV4Range:
-						ans = new IPV4RangeSchema(required);
-						break;
-					case VariableType.IPV6Range:
-						ans = new IPV6RangeSchema(required);
-						break;
-					case VariableType.Color:
-						ans = new ColorSchema(required);
-						break;
-					case VariableType.Font:
-						ans = new FontSchema(required);
-						break;
-					case VariableType.FilePath:
-						ans = new FilePathSchema(required);
-						break;
-					case VariableType.URL:
-						ans = new URLSchema(required);
-						break;
-					case VariableType.Enum:
-						ans = new EnumSchema(name ?? "", required, enum_object);
-						break;
-					case VariableType.Entity:
-						// todo VariableType.Entity
-						ans = new EntitySchema(required, "", "", "");
-						break;
-					case VariableType.Array:
-						if (schema)
-							ans = new ArraySchema(required, [schema], min, max);
-						break;
-					case VariableType.Object:
-						if (fields)
-							ans = new ObjectSchema(name ?? "", required, fields);
-						break;
-					case VariableType.Type:
-						ans = new TypeSchema(required);
-						break;
-					case VariableType.Variable:
-						ans = new VariableSchema(required);
-						break;
-				}
-				if (ans)
-				{
-					ans.setValid(...valid_list);
-					ans.setInvalid(...invlid_list);
-					ans.example = place_holder;
-				}
-			}
-			return ans;
-		});
-	}
-	setValue(value: BaseTypeSchema | null, callback?: () => void): void
-	{
-        if (this.props.nullable)
-            this.NSBoxBaseLayoutRecursive_Main.current?.NSBoxBaseLayout_Main.current?.setNull(value == null);
-
-		this.NSBoxEnum_Type.current?.setValue(value?.type ?? null, () =>
-		{
-			this.NSBoxBoolean_Required.current?.setValueBool(value?.required ?? false);
-
-			let name = null;
-			let min = null;
-			let max = null;
-			let precision = null;
-			let min_length = null;
-			let max_length = null;
-			let regex = null;
-			let array_schema = null;
-			let object_fields: BaseVariableSchema[] = [];
-			let valid_list = null;
-			let invlid_list = null;
-			let place_holder = null;
-
-			if (value?.type)
-				switch (value?.type)
-				{
-					/* VariableType */
-					case VariableType.Any:
-						break;
-					case VariableType.Boolean:
-						break;
-					case VariableType.TinyInt:
-					case VariableType.SmallInt:
-					case VariableType.MediumInt:
-					case VariableType.Integer:
-					case VariableType.BigInt:
-						{
-							let schema = value as BaseNumberSchema;
-							min = schema.min;
-							max = schema.max;
-							break;
-						}
-					case VariableType.Float:
-					case VariableType.Double:
-					case VariableType.Decimal:
-					case VariableType.Real:
-					case VariableType.Money:
-						{
-							let schema = value as BasePrecisionSchema;
-							min = schema.min;
-							max = schema.max;
-							precision = schema.precision;
-							break;
-						}
-					case VariableType.String:
-						{
-							let schema = value as StringSchema;
-							min_length = schema.min_length;
-							max_length = schema.max_length;
-							if (schema.regex)
-								regex = schema.regex + "";
-							break;
-						}
-					case VariableType.Date:
-					case VariableType.Time:
-					case VariableType.DateTime:
-					case VariableType.TimeZone:
-					case VariableType.Duration:
-					case VariableType.Email:
-					case VariableType.Phone:
-					case VariableType.Version:
-					case VariableType.IPV4:
-					case VariableType.IPV6:
-					case VariableType.IPV4Range:
-					case VariableType.IPV6Range:
-					case VariableType.Color:
-					case VariableType.Font:
-					case VariableType.FilePath:
-					case VariableType.URL:
-						break;
-					case VariableType.Enum:
-						let schema = value as EnumSchema;
-						name = schema.name;
-						break;
-					case VariableType.Entity:
-						// todo VariableType.Entity
-						break;
-					case VariableType.Array:
-						{
-							let schema = value as ArraySchema;
-							if (schema.items.length > 0)
-								array_schema = schema.items[0];
-							break;
-						}
-					case VariableType.Object:
-						{
-							let schema = value as ObjectSchema;
-							name = schema.name;
-							object_fields = schema.fields ?? [];
-							break;
-						}
-					case VariableType.Type:
-						break;
-					case VariableType.Variable:
-						break;
-				}
-
-			this.NSBoxString_Name.current?.setValue(name);
-			this.NSBoxInteger_Min.current?.setValue(min);
-			this.NSBoxInteger_Max.current?.setValue(max);
-			this.NSBoxInteger_Precision.current?.setValue(precision);
-			this.NSBoxInteger_MinLength.current?.setValue(min_length);
-			this.NSBoxInteger_MaxLength.current?.setValue(max_length);
-			this.NSBoxString_Regex.current?.setValue(regex);
-			this.NSBoxSchemaBase_ArraySchema.current?.setValue(array_schema);
-			this.NSRepeaterNSBoxSchemaVariable_ObjectFields.current?.setValue(object_fields);
-			this.NSBoxString_ValidList.current?.setValue(valid_list);
-			this.NSBoxString_InalidList.current?.setValue(invlid_list);
-			this.NSBoxString_PlaceHolder.current?.setValue(place_holder);
-
-			this.props.onChanged?.(this);
-			callback?.();
-		});
-	}
-    setDisabled(disabled: boolean): void
-    {
-        this.NSBoxBaseLayoutRecursive_Main.current?.setDisabled(disabled);
-    }
-	private onChanged()
-	{
-		this.props.onChanged?.(this);
-	}
-    
-	override render()
-	{
-		let menu = safeMenuMenuItem(this.props, (items) =>
-		{
-			items.push({
-				title: "Show Detail",
-				icon: this.state.show_details ? "https://static.namirasoft.com/image/concept/close/blue.svg" : "https://static.namirasoft.com/image/concept/ellipsis/vertical-blue.svg",
-				onClick: () =>
-				{
-					this.setState({ show_details: !this.state.show_details });
-				}
-			});
-		});
-
-		/* VariableType */
-		let isNumber = this.state.type && [VariableType.TinyInt, VariableType.SmallInt, VariableType.MediumInt, VariableType.Integer, VariableType.BigInt, VariableType.Float, VariableType.Double, VariableType.Decimal, VariableType.Real, VariableType.Money, VariableType.Array].includes(this.state.type);
-		let isPrecision = this.state.type && [VariableType.Float, VariableType.Double, VariableType.Decimal, VariableType.Real, VariableType.Money].includes(this.state.type);
-		let hasName = this.state.type && [VariableType.Enum, VariableType.Object].includes(this.state.type);
-
-		return (
-			<NSBoxBaseLayoutRecursive
-				ref={this.NSBoxBaseLayoutRecursive_Main}
-				{...this.props}
-				depth={this.props.depth ?? 0}
-				menu={menu}
-				getValue={() =>
-				{
-					// TODO: Need to return correct value as a string
-					return null;
-				}}
-			>
-				<NSRow classList={["justify-content-start"]}>
-					<NSBoxEnum<VariableType>
-						ref={this.NSBoxEnum_Type}
-						required
-						title="Type"
-						multiple={false}
-						getEnumObject={() => VariableType}
-						/* VariableType */
-						invalids={[VariableType.Any, ...(this.props.invalids ?? [])]}
-						onChanged={(b) =>
-						{
-							this.setState({ type: b.getValueEnumOne(VariableType, VariableType.Any) });
-							this.onChanged();
-						}}
-						classList={[Styles.ns_box_schema_base_type]}
-					/>
-					{
-						hasName &&
-						<NSBoxString
-							ref={this.NSBoxString_Name}
-							required
-							title="Name"
-							classList={[Styles.ns_box_schema_base_name]}
-						/>
-					}
-					<NSBoxBoolean
-						ref={this.NSBoxBoolean_Required}
-						required
-						title="Required"
-						onChanged={() => this.onChanged()}
-						classList={[hasName ? Styles.ns_box_schema_base_required_withname : Styles.ns_box_schema_base_required_withoutname]}
-					/>
-				</NSRow>
-				{
-					this.state.type === VariableType.Array &&
-					<NSBoxSchemaBase
-						ref={this.NSBoxSchemaBase_ArraySchema}
-						name={this.props.name}
-						required
-						title="Array Elements' Schema"
-						style={{ width: "100%" }}
-						invalids={[VariableType.Any, VariableType.Object, VariableType.Array]}
-						depth={(this.props.depth ?? 0) + 1}
-					/>
-				}
-				{
-					this.state.type === VariableType.Object &&
-					<NSBoxBaseLayoutRecursive
-						required
-						depth={(this.props.depth ?? 0) + 1}
-						title="Fields"
-						style={{ width: "100%" }}
-						getValue={() =>
-						{
-							// TODO: Need to return correct value as a string
-							return null;
-						}}
-					>
-						<NSRepeaterNSBoxSchemaVariable
-							ref={this.NSRepeaterNSBoxSchemaVariable_ObjectFields}
-							name={this.props.name}
-							required={this.props.required}
-							title={this.props.title}
-							item_title="Field"
-                            item={{ style: { width: "100%" } }}
-						/>
-					</NSBoxBaseLayoutRecursive>
-				}
-				{
-					isNumber &&
-					<NSRow
-						style={{ display: this.state.show_details ? "" : "none", width: "100%", justifyContent: "left" }}
-					>
-						<NSBoxInteger
-							ref={this.NSBoxInteger_Min}
-							required={false}
-							title="Min"
-							style={{ minWidth: "150px", width: "150px" }}
-						/>
-						<NSBoxInteger
-							ref={this.NSBoxInteger_Max}
-							required={false}
-							title="Max"
-							style={{ minWidth: "150px", width: "150px" }}
-						/>
-						{
-							isPrecision &&
-							<NSBoxInteger
-								ref={this.NSBoxInteger_Precision}
-								required={false}
-								title="Precision"
-								style={{ minWidth: "150px", width: "150px" }}
-							/>
-						}
-					</NSRow>
-				}
-				{
-					this.state.type === VariableType.String &&
-					<NSColumn
-						style={{ display: this.state.show_details ? "" : "none", width: "100%" }}
-					>
-						<NSRow
-							style={{ justifyContent: "left" }}
-						>
-							<NSBoxInteger
-								ref={this.NSBoxInteger_MinLength}
-								required={false}
-								title="Min Length"
-								style={{ minWidth: "150px", width: "150px" }}
-							/>
-							<NSBoxInteger
-								ref={this.NSBoxInteger_MaxLength}
-								required={false}
-								title="Max Length"
-								style={{ minWidth: "150px", width: "150px" }}
-							/>
-						</NSRow>
-						<NSBoxString
-							ref={this.NSBoxString_Regex}
-							required={false}
-							title="Regex"
-							style={{ width: "100%" }}
-						/>
-					</NSColumn>
-				}
-				<div style={{ display: (this.state.type === VariableType.Enum || this.state.show_details) ? "" : "none", width: "100%" }}>
-					<NSBoxString
-						ref={this.NSBoxString_ValidList}
-						required={this.state.type === VariableType.Enum}
-						title="Valid List"
-						placeholder="Please enter valid list and sperate them via comma."
-						style={{ width: "100%" }}
-						onChanged={() => this.onChanged()}
-					/>
-				</div>
-				<NSColumn
-					style={{ display: this.state.show_details ? "" : "none", width: "100%" }}
-				>
-					<NSBoxString
-						ref={this.NSBoxString_InalidList}
-						required={false}
-						title="Invalid List"
-						placeholder="Please enter invvalid list and sperate them via comma."
-						style={{ width: "100%" }}
-						onChanged={() => this.onChanged()}
-					/>
-					<NSBoxString
-						ref={this.NSBoxString_PlaceHolder}
-						required={false}
-						title="Place Holder"
-						style={{ width: "100%" }}
-						onChanged={() => this.onChanged()}
-					/>
-				</NSColumn>
-			</NSBoxBaseLayoutRecursive>
-		);
-	}
+"use client";
+
+import Styles from "./NSBoxSchemaBase.module.css";
+
+import React, { createRef } from "react";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IValidationProps } from "../props/IValidationProps";
+import { IValidationStringProps } from "../props/IValidationStringProps";
+import { safeMenuMenuItem } from "./NSMenuButton";
+import { INSBoxBaseLayoutProps } from "./NSBoxBaseLayout";
+import { INSBox } from "./INSBox";
+import { NSBoxEnum } from "./NSBoxEnum";
+import { AnySchema, ArraySchema, BaseNumberSchema, BasePrecisionSchema, BaseTypeSchema, BaseVariableSchema, BigIntSchema, BoolSchema, ColorSchema, DateSchema, DateTimeSchema, DecimalSchema, DoubleSchema, DurationSchema, EmailSchema, EntitySchema, EnumSchema, FilePathSchema, FloatSchema, FontSchema, IntegerSchema, IPV4RangeSchema, IPV4Schema, IPV6RangeSchema, IPV6Schema, MediumIntSchema, MoneySchema, ObjectSchema, PhoneSchema, RealSchema, SmallIntSchema, StringSchema, TimeSchema, TimeZoneSchema, TinyIntSchema, TypeSchema, URLSchema, VariableSchema, VariableType, VersionSchema } from "namirasoft-schema";
+import { NSBoxBoolean } from "./NSBoxBoolean";
+import { NSRow } from "./NSRow";
+import { NSBoxString } from "./NSBoxString";
+import { NSBoxInteger } from "./NSBoxInteger";
+import { NSBoxBaseLayoutRecursive } from "./NSBoxBaseLayoutRecursive";
+import { NSRepeaterNSBoxSchemaVariable } from "./NSRepeaterNSBoxSchemaVariable";
+import { NSColumn } from "./NSColumn";
+
+export interface NSBoxSchemaBaseProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, INSBoxBaseLayoutProps<NSBoxSchemaBase, string>
+{
+	name: string;
+	depth?: number;
+}
+
+export interface NSBoxSchemaBaseState
+{
+	type: VariableType | null;
+	show_details: boolean;
+}
+
+export class NSBoxSchemaBase extends React.Component<NSBoxSchemaBaseProps, NSBoxSchemaBaseState> implements INSBox
+{
+	private NSBoxEnum_Type = createRef<NSBoxEnum<VariableType>>();
+	private NSBoxString_Name = createRef<NSBoxString>();
+	private NSBoxBoolean_Required = createRef<NSBoxBoolean>();
+	private NSBoxSchemaBase_ArraySchema = createRef<NSBoxSchemaBase>();
+	private NSRepeaterNSBoxSchemaVariable_ObjectFields = createRef<NSRepeaterNSBoxSchemaVariable>();
+	private NSBoxInteger_Min = createRef<NSBoxInteger>();
+	private NSBoxInteger_Max = createRef<NSBoxInteger>();
+	private NSBoxInteger_Precision = createRef<NSBoxInteger>();
+	private NSBoxInteger_MinLength = createRef<NSBoxInteger>();
+	private NSBoxInteger_MaxLength = createRef<NSBoxInteger>();
+	private NSBoxString_Regex = createRef<NSBoxString>();
+	private NSBoxString_ValidList = createRef<NSBoxString>();
+	private NSBoxString_InalidList = createRef<NSBoxString>();
+	private NSBoxString_PlaceHolder = createRef<NSBoxString>();
+	NSBoxBaseLayoutRecursive_Main = createRef<NSBoxBaseLayoutRecursive>();
+	constructor(props: NSBoxSchemaBaseProps)
+	{
+		super(props);
+		this.state = {
+			type: null,
+			show_details: false,
+		};
+		this.isEmpty = this.isEmpty.bind(this);
+		this.getError = this.getError.bind(this);
+		this.getValue = this.getValue.bind(this);
+		this.setValue = this.setValue.bind(this);
+		this.onChanged = this.onChanged.bind(this);
+	}
+	isEmpty(value: BaseTypeSchema | null): boolean
+	{
+		if (value)
+			if (value.type || value.example || value.valids?.length > 0 || value.invalids?.length > 0)
+				return false;
+		return true;
+	}
+	getError(): string | null
+	{
+		let ans = this.NSBoxEnum_Type.current?.getError() ||
+			this.NSBoxString_Name.current?.getError() ||
+			this.NSBoxBoolean_Required.current?.getError() ||
+			this.NSBoxSchemaBase_ArraySchema.current?.getError() ||
+			this.NSRepeaterNSBoxSchemaVariable_ObjectFields.current?.getError() ||
+			this.NSBoxInteger_Min.current?.getError() ||
+			this.NSBoxInteger_Max.current?.getError() ||
+			this.NSBoxInteger_Precision.current?.getError() ||
+			this.NSBoxInteger_MinLength.current?.getError() ||
+			this.NSBoxInteger_MaxLength.current?.getError() ||
+			this.NSBoxString_Regex.current?.getError() ||
+			this.NSBoxString_ValidList.current?.getError() ||
+			this.NSBoxString_InalidList.current?.getError() ||
+			this.NSBoxString_PlaceHolder.current?.getError();
+		return ans ?? null;
+	}
+	getValue(checkError: boolean = true): BaseTypeSchema | null
+	{
+        if (this.props.nullable)
+            if (this.NSBoxBaseLayoutRecursive_Main.current?.NSBoxBaseLayout_Main.current?.isNull())
+                return null;
+
+		return NSBoxBaseLayoutRecursive.checkGetValue(this, checkError, () =>
+		{
+			let type = this.NSBoxEnum_Type.current?.getValueEnumOne(VariableType, VariableType.Any, checkError) ?? null;
+			let required = this.NSBoxBoolean_Required.current?.getValueBool(checkError) ?? false;
+
+			let name = this.NSBoxString_Name.current?.getValue(checkError) ?? null;
+			let min = this.NSBoxInteger_Min.current?.getValue(checkError) ?? null;
+			let max = this.NSBoxInteger_Max.current?.getValue(checkError) ?? null;
+			let precision = this.NSBoxInteger_Precision.current?.getValue(checkError) ?? null;
+			let min_length = this.NSBoxInteger_MinLength.current?.getValue(checkError) ?? null;
+			let max_length = this.NSBoxInteger_MaxLength.current?.getValue(checkError) ?? null;
+			let regex = this.NSBoxString_Regex.current?.getValue(checkError) ?? null;
+			let schema = this.NSBoxSchemaBase_ArraySchema.current?.getValue(checkError) ?? null;
+			let fields = this.NSRepeaterNSBoxSchemaVariable_ObjectFields.current?.getValue(checkError) ?? null;
+			let valid_list = this.NSBoxString_ValidList.current?.getValue(checkError)?.split(",") ?? [];
+			let invlid_list = this.NSBoxString_InalidList.current?.getValue(checkError)?.split(",") ?? [];
+			let place_holder = this.NSBoxString_PlaceHolder.current?.getValue(checkError) ?? undefined;
+			let enum_object: { [name: string]: string; } = {};
+			invlid_list.forEach((v) => enum_object[v] = v);
+
+			let ans = null;
+			if (type)
+			{
+				switch (type)
+				{
+					/* VariableType */
+					case VariableType.Any:
+						ans = new AnySchema(required);
+						break;
+					case VariableType.Boolean:
+						ans = new BoolSchema(required);
+						break;
+					case VariableType.TinyInt:
+						ans = new TinyIntSchema(required, max, min);
+						break;
+					case VariableType.SmallInt:
+						ans = new SmallIntSchema(required, max, min);
+						break;
+					case VariableType.MediumInt:
+						ans = new MediumIntSchema(required, max, min);
+						break;
+					case VariableType.Integer:
+						ans = new IntegerSchema(required, max, min);
+						break;
+					case VariableType.BigInt:
+						ans = new BigIntSchema(required, max, min);
+						break;
+					case VariableType.Float:
+						ans = new FloatSchema(required, max, min, precision);
+						break;
+					case VariableType.Double:
+						ans = new DoubleSchema(required, max, min, precision);
+						break;
+					case VariableType.Decimal:
+						ans = new DecimalSchema(required, max, min, precision);
+						break;
+					case VariableType.Real:
+						ans = new RealSchema(required, max, min, precision);
+						break;
+					case VariableType.Money:
+						ans = new MoneySchema(required, max, min);
+						break;
+					case VariableType.String:
+						ans = new StringSchema(required, min_length, max_length);
+						if (regex)
+							ans.regex = new RegExp(regex);
+						break;
+					case VariableType.Date:
+						ans = new DateSchema(required);
+						break;
+					case VariableType.Time:
+						ans = new TimeSchema(required);
+						break;
+					case VariableType.DateTime:
+						ans = new DateTimeSchema(required);
+						break;
+					case VariableType.TimeZone:
+						ans = new TimeZoneSchema(required);
+						break;
+					case VariableType.Duration:
+						ans = new DurationSchema(required);
+						break;
+					case VariableType.Email:
+						ans = new EmailSchema(required);
+						break;
+					case VariableType.Phone:
+						ans = new PhoneSchema(required);
+						break;
+					case VariableType.Version:
+						ans = new VersionSchema(required);
+						break;
+					case VariableType.IPV4:
+						ans = new IPV4Schema(required);
+						break;
+					case VariableType.IPV6:
+						ans = new IPV6Schema(required);
+						break;
+					case VariableType.IPV4Range:
+						ans = new IPV4RangeSchema(required);
+						break;
+					case VariableType.IPV6Range:
+						ans = new IPV6RangeSchema(required);
+						break;
+					case VariableType.Color:
+						ans = new ColorSchema(required);
+						break;
+					case VariableType.Font:
+						ans = new FontSchema(required);
+						break;
+					case VariableType.FilePath:
+						ans = new FilePathSchema(required);
+						break;
+					case VariableType.URL:
+						ans = new URLSchema(required);
+						break;
+					case VariableType.Enum:
+						ans = new EnumSchema(name ?? "", required, enum_object);
+						break;
+					case VariableType.Entity:
+						// todo VariableType.Entity
+						ans = new EntitySchema(required, "", "", "");
+						break;
+					case VariableType.Array:
+						if (schema)
+							ans = new ArraySchema(required, [schema], min, max);
+						break;
+					case VariableType.Object:
+						if (fields)
+							ans = new ObjectSchema(name ?? "", required, fields);
+						break;
+					case VariableType.Type:
+						ans = new TypeSchema(required);
+						break;
+					case VariableType.Variable:
+						ans = new VariableSchema(required);
+						break;
+				}
+				if (ans)
+				{
+					ans.setValid(...valid_list);
+					ans.setInvalid(...invlid_list);
+					ans.example = place_holder;
+				}
+			}
+			return ans;
+		});
+	}
+	setValue(value: BaseTypeSchema | null, callback?: () => void): void
+	{
+        if (this.props.nullable)
+            this.NSBoxBaseLayoutRecursive_Main.current?.NSBoxBaseLayout_Main.current?.setNull(value == null);
+
+		this.NSBoxEnum_Type.current?.setValue(value?.type ?? null, () =>
+		{
+			this.NSBoxBoolean_Required.current?.setValueBool(value?.required ?? false);
+
+			let name = null;
+			let min = null;
+			let max = null;
+			let precision = null;
+			let min_length = null;
+			let max_length = null;
+			let regex = null;
+			let array_schema = null;
+			let object_fields: BaseVariableSchema[] = [];
+			let valid_list = null;
+			let invlid_list = null;
+			let place_holder = null;
+
+			if (value?.type)
+				switch (value?.type)
+				{
+					/* VariableType */
+					case VariableType.Any:
+						break;
+					case VariableType.Boolean:
+						break;
+					case VariableType.TinyInt:
+					case VariableType.SmallInt:
+					case VariableType.MediumInt:
+					case VariableType.Integer:
+					case VariableType.BigInt:
+						{
+							let schema = value as BaseNumberSchema;
+							min = schema.min;
+							max = schema.max;
+							break;
+						}
+					case VariableType.Float:
+					case VariableType.Double:
+					case VariableType.Decimal:
+					case VariableType.Real:
+					case VariableType.Money:
+						{
+							let schema = value as BasePrecisionSchema;
+							min = schema.min;
+							max = schema.max;
+							precision = schema.precision;
+							break;
+						}
+					case VariableType.String:
+						{
+							let schema = value as StringSchema;
+							min_length = schema.min_length;
+							max_length = schema.max_length;
+							if (schema.regex)
+								regex = schema.regex + "";
+							break;
+						}
+					case VariableType.Date:
+					case VariableType.Time:
+					case VariableType.DateTime:
+					case VariableType.TimeZone:
+					case VariableType.Duration:
+					case VariableType.Email:
+					case VariableType.Phone:
+					case VariableType.Version:
+					case VariableType.IPV4:
+					case VariableType.IPV6:
+					case VariableType.IPV4Range:
+					case VariableType.IPV6Range:
+					case VariableType.Color:
+					case VariableType.Font:
+					case VariableType.FilePath:
+					case VariableType.URL:
+						break;
+					case VariableType.Enum:
+						let schema = value as EnumSchema;
+						name = schema.name;
+						break;
+					case VariableType.Entity:
+						// todo VariableType.Entity
+						break;
+					case VariableType.Array:
+						{
+							let schema = value as ArraySchema;
+							if (schema.items.length > 0)
+								array_schema = schema.items[0];
+							break;
+						}
+					case VariableType.Object:
+						{
+							let schema = value as ObjectSchema;
+							name = schema.name;
+							object_fields = schema.fields ?? [];
+							break;
+						}
+					case VariableType.Type:
+						break;
+					case VariableType.Variable:
+						break;
+				}
+
+			this.NSBoxString_Name.current?.setValue(name);
+			this.NSBoxInteger_Min.current?.setValue(min);
+			this.NSBoxInteger_Max.current?.setValue(max);
+			this.NSBoxInteger_Precision.current?.setValue(precision);
+			this.NSBoxInteger_MinLength.current?.setValue(min_length);
+			this.NSBoxInteger_MaxLength.current?.setValue(max_length);
+			this.NSBoxString_Regex.current?.setValue(regex);
+			this.NSBoxSchemaBase_ArraySchema.current?.setValue(array_schema);
+			this.NSRepeaterNSBoxSchemaVariable_ObjectFields.current?.setValue(object_fields);
+			this.NSBoxString_ValidList.current?.setValue(valid_list);
+			this.NSBoxString_InalidList.current?.setValue(invlid_list);
+			this.NSBoxString_PlaceHolder.current?.setValue(place_holder);
+
+			this.props.onChanged?.(this);
+			callback?.();
+		});
+	}
+    setDisabled(disabled: boolean): void
+    {
+        this.NSBoxBaseLayoutRecursive_Main.current?.setDisabled(disabled);
+    }
+	private onChanged()
+	{
+		this.props.onChanged?.(this);
+	}
+    
+	override render()
+	{
+		let menu = safeMenuMenuItem(this.props, (items) =>
+		{
+			items.push({
+				title: "Show Detail",
+				icon: this.state.show_details ? "https://static.namirasoft.com/image/concept/close/blue.svg" : "https://static.namirasoft.com/image/concept/ellipsis/vertical-blue.svg",
+				onClick: () =>
+				{
+					this.setState({ show_details: !this.state.show_details });
+				}
+			});
+		});
+
+		/* VariableType */
+		let isNumber = this.state.type && [VariableType.TinyInt, VariableType.SmallInt, VariableType.MediumInt, VariableType.Integer, VariableType.BigInt, VariableType.Float, VariableType.Double, VariableType.Decimal, VariableType.Real, VariableType.Money, VariableType.Array].includes(this.state.type);
+		let isPrecision = this.state.type && [VariableType.Float, VariableType.Double, VariableType.Decimal, VariableType.Real, VariableType.Money].includes(this.state.type);
+		let hasName = this.state.type && [VariableType.Enum, VariableType.Object].includes(this.state.type);
+
+		return (
+			<NSBoxBaseLayoutRecursive
+				ref={this.NSBoxBaseLayoutRecursive_Main}
+				{...this.props}
+				depth={this.props.depth ?? 0}
+				menu={menu}
+				getValue={() =>
+				{
+					// TODO: Need to return correct value as a string
+					return null;
+				}}
+			>
+				<NSRow classList={["justify-content-start"]}>
+					<NSBoxEnum<VariableType>
+						ref={this.NSBoxEnum_Type}
+						required
+						title="Type"
+						multiple={false}
+						getEnumObject={() => VariableType}
+						/* VariableType */
+						invalids={[VariableType.Any, ...(this.props.invalids ?? [])]}
+						onChanged={(b) =>
+						{
+							this.setState({ type: b.getValueEnumOne(VariableType, VariableType.Any) });
+							this.onChanged();
+						}}
+						classList={[Styles.ns_box_schema_base_type]}
+					/>
+					{
+						hasName &&
+						<NSBoxString
+							ref={this.NSBoxString_Name}
+							required
+							title="Name"
+							classList={[Styles.ns_box_schema_base_name]}
+						/>
+					}
+					<NSBoxBoolean
+						ref={this.NSBoxBoolean_Required}
+						required
+						title="Required"
+						onChanged={() => this.onChanged()}
+						classList={[hasName ? Styles.ns_box_schema_base_required_withname : Styles.ns_box_schema_base_required_withoutname]}
+					/>
+				</NSRow>
+				{
+					this.state.type === VariableType.Array &&
+					<NSBoxSchemaBase
+						ref={this.NSBoxSchemaBase_ArraySchema}
+						name={this.props.name}
+						required
+						title="Array Elements' Schema"
+						style={{ width: "100%" }}
+						invalids={[VariableType.Any, VariableType.Object, VariableType.Array]}
+						depth={(this.props.depth ?? 0) + 1}
+					/>
+				}
+				{
+					this.state.type === VariableType.Object &&
+					<NSBoxBaseLayoutRecursive
+						required
+						depth={(this.props.depth ?? 0) + 1}
+						title="Fields"
+						style={{ width: "100%" }}
+						getValue={() =>
+						{
+							// TODO: Need to return correct value as a string
+							return null;
+						}}
+					>
+						<NSRepeaterNSBoxSchemaVariable
+							ref={this.NSRepeaterNSBoxSchemaVariable_ObjectFields}
+							name={this.props.name}
+							required={this.props.required}
+							title={this.props.title}
+							item_title="Field"
+                            item={{ style: { width: "100%" } }}
+						/>
+					</NSBoxBaseLayoutRecursive>
+				}
+				{
+					isNumber &&
+					<NSRow
+						style={{ display: this.state.show_details ? "" : "none", width: "100%", justifyContent: "left" }}
+					>
+						<NSBoxInteger
+							ref={this.NSBoxInteger_Min}
+							required={false}
+							title="Min"
+							style={{ minWidth: "150px", width: "150px" }}
+						/>
+						<NSBoxInteger
+							ref={this.NSBoxInteger_Max}
+							required={false}
+							title="Max"
+							style={{ minWidth: "150px", width: "150px" }}
+						/>
+						{
+							isPrecision &&
+							<NSBoxInteger
+								ref={this.NSBoxInteger_Precision}
+								required={false}
+								title="Precision"
+								style={{ minWidth: "150px", width: "150px" }}
+							/>
+						}
+					</NSRow>
+				}
+				{
+					this.state.type === VariableType.String &&
+					<NSColumn
+						style={{ display: this.state.show_details ? "" : "none", width: "100%" }}
+					>
+						<NSRow
+							style={{ justifyContent: "left" }}
+						>
+							<NSBoxInteger
+								ref={this.NSBoxInteger_MinLength}
+								required={false}
+								title="Min Length"
+								style={{ minWidth: "150px", width: "150px" }}
+							/>
+							<NSBoxInteger
+								ref={this.NSBoxInteger_MaxLength}
+								required={false}
+								title="Max Length"
+								style={{ minWidth: "150px", width: "150px" }}
+							/>
+						</NSRow>
+						<NSBoxString
+							ref={this.NSBoxString_Regex}
+							required={false}
+							title="Regex"
+							style={{ width: "100%" }}
+						/>
+					</NSColumn>
+				}
+				<div style={{ display: (this.state.type === VariableType.Enum || this.state.show_details) ? "" : "none", width: "100%" }}>
+					<NSBoxString
+						ref={this.NSBoxString_ValidList}
+						required={this.state.type === VariableType.Enum}
+						title="Valid List"
+						placeholder="Please enter valid list and sperate them via comma."
+						style={{ width: "100%" }}
+						onChanged={() => this.onChanged()}
+					/>
+				</div>
+				<NSColumn
+					style={{ display: this.state.show_details ? "" : "none", width: "100%" }}
+				>
+					<NSBoxString
+						ref={this.NSBoxString_InalidList}
+						required={false}
+						title="Invalid List"
+						placeholder="Please enter invvalid list and sperate them via comma."
+						style={{ width: "100%" }}
+						onChanged={() => this.onChanged()}
+					/>
+					<NSBoxString
+						ref={this.NSBoxString_PlaceHolder}
+						required={false}
+						title="Place Holder"
+						style={{ width: "100%" }}
+						onChanged={() => this.onChanged()}
+					/>
+				</NSColumn>
+			</NSBoxBaseLayoutRecursive>
+		);
+	}
 }