namirasoft-site-react 1.4.166 → 1.4.167

package/src/components/NSBoxSchemaBase.tsx

@@ -0,0 +1,523 @@
+"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, URLSchema, 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<string, NSBoxSchemaBase>
+{
+	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
+	{
+		return 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
+	{
+		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)
+				{
+					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.Any:
+						ans = new AnySchema(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
+	{
+		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)
+				{
+					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.Any:
+						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?.();
+		});
+	}
+	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 })
+				}
+			});
+		});
+
+		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}
+			>
+				<NSRow
+				>
+					<NSBoxEnum<VariableType>
+						ref={this.NSBoxEnum_Type}
+						required
+						title="Type"
+						multiple={false}
+						getEnumObject={() => 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}
+						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%" }}
+					>
+						<NSRepeaterNSBoxSchemaVariable
+							ref={this.NSRepeaterNSBoxSchemaVariable_ObjectFields}
+							item_title="Field"
+							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>
+		);
+	}
+}

package/src/components/NSBoxSchemaVariable.module.css

@@ -0,0 +1,17 @@
+.ns_box_schema_variable_default {
+	flex-grow: 1;
+}
+
+@media only screen and (min-width: 768px) {
+	.ns_box_schema_variable_name {
+		width: 192px;
+	}
+
+	.ns_box_schema_variable_default {
+		width: 100px;
+	}
+
+	.ns_box_schema_variable_multiple {
+		width: 100px;
+	}
+}