namirasoft-site-react 1.5.45 → 1.5.47

package/src/NSBoxBuilder.tsx

@@ -1,924 +1,924 @@
-import { AnySchema, ArraySchema, BaseNumberSchema, BasePrecisionSchema, BaseTypeBuilder, 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 "./components/NSBoxBoolean";
-import { NSBoxCombo } from "./components/NSBoxCombo";
-import { NSBoxDate } from "./components/NSBoxDate";
-import { NSBoxDateTime } from "./components/NSBoxDateTime";
-import { NSBoxDouble } from "./components/NSBoxDouble";
-import { NSBoxDuration } from "./components/NSBoxDuration";
-import { NSBoxDynamic, NSBoxDynamicProps } from "./components/NSBoxDynamic";
-import { NSBoxEmail } from "./components/NSBoxEmail";
-import { NSBoxEntity } from "./components/NSBoxEntity";
-import { NSBoxInteger } from "./components/NSBoxInteger";
-import { NSBoxIPV4 } from "./components/NSBoxIPV4";
-import { NSBoxIPV6 } from "./components/NSBoxIPV6";
-import { NSBoxMoney } from "./components/NSBoxMoney";
-import { NSBoxPhone } from "./components/NSBoxPhone";
-import { NSBoxString } from "./components/NSBoxString";
-import { NSBoxTime } from "./components/NSBoxTime";
-import { NSRepeater } from "./components/NSRepeater";
-import { NSBoxTimeZone } from "./components/NSBoxTimeZone";
-import { NSBoxVersion } from "./components/NSBoxVersion";
-import { NSBoxIPV4Range } from "./components/NSBoxIPV4Range";
-import { NSBoxIPV6Range } from "./components/NSBoxIPV6Range";
-import { NSBoxColor } from "./components/NSBoxColor";
-import { NSBoxFont } from "./components/NSBoxFont";
-import { NSBoxFilePath } from "./components/NSBoxFilePath";
-import { NSBoxURL } from "./components/NSBoxURL";
-import { NamingConvention, ObjectService } from "namirasoft-core";
-import { INSBox } from "./components/INSBox";
-import { createRef } from "react";
-import { NSBoxBaseLayoutRecursive } from "./components/NSBoxBaseLayoutRecursive";
-import { NSMenuButtonMenuProps, safeMenuMenuItem } from "./components/NSMenuButton";
-import { NSBoxSchemaBase } from "./components/NSBoxSchemaBase";
-import { NSBoxSchemaVariable } from "./components/NSBoxSchemaVariable";
-import { NamirasoftMap } from "namirasoft-site-map";
-
-export class NSBoxBuilder extends BaseTypeBuilder<React.JSX.Element | null>
-{
-    private depth: number = 0;
-    private box: NSBoxDynamic;
-    private props: NSBoxDynamicProps;
-    private box_ref: React.RefObject<INSBox>;
-    private key: string;
-    private title: string;
-    private placeholder: string;
-    private menu: NSMenuButtonMenuProps;
-    private builders: { builder: NSBoxBuilder, ref: React.RefObject<INSBox> }[] = [];
-    private multiple: boolean;
-
-    constructor(box: NSBoxDynamic, props: NSBoxDynamicProps, box_ref: React.RefObject<INSBox>, key: string, onDelete?: () => void)
-    {
-        super(props.variable.type);
-        this.box = box;
-        this.props = props;
-        this.box_ref = box_ref;
-        this.key = key;
-        this.toInteger = this.toInteger.bind(this);
-        this.toPrecision = this.toPrecision.bind(this);
-        this.ifOjbect = this.ifOjbect.bind(this);
-
-        this.title = this.props.title;
-        if (!this.title)
-            this.title = NamingConvention.auto.convert(this.props.variable.name, NamingConvention.Pascal_Case_Space);
-        this.placeholder = props.variable.type?.example ?? "";
-        this.multiple = props.variable.tags?.["multiple"] === "true";
-        this.menu = safeMenuMenuItem(this.props, () => { });
-        this.menu.builtin.delete = { enabled: onDelete != null, onDelete: () => { onDelete?.() } };
-        this.builders = this.ifOjbect((_, fields) =>
-        {
-            return fields.map((f) =>
-            {
-                let title = NamingConvention.auto.convert(f.name, NamingConvention.Pascal_Case_Space);
-                let props = {
-                    ...this.props,
-                    title,
-                    onChanged: (box: NSBoxDynamic) =>
-                    {
-                        this.props.onChanged?.(box);
-                    },
-                    variable: f,
-                    multiple: false
-                };
-                let ref = createRef<INSBox>();
-                let builder = new NSBoxBuilder(this.box, props, ref, "NSBoxBuilder_Object_" + f.name);
-                builder.depth = this.depth + 1;
-                return { builder, ref };
-            });
-        }) ?? [];
-    }
-    private ifOjbect<T>(handler: (schema: ObjectSchema, fields: BaseVariableSchema[]) => T): T | null
-    {
-        if (this.props.variable.type?.type === VariableType.Object)
-        {
-            let schema = this.props.variable.type as ObjectSchema;
-
-            if (this.multiple)
-                return null;
-            if (schema.external)
-                return null;
-            if (!schema.fields)
-                return null
-            if (schema.fields.length === 0)
-                return null
-            if (schema.fields)
-                return handler(schema, schema.fields);
-        }
-        return null;
-    }
-    getValue(checkError: boolean = true): any | null
-    {
-        let obj = this.box_ref.current?.getValue(checkError);
-
-        let res = this.ifOjbect((_, fields) =>
-        {
-            let ans: { [name: string]: any } = {};
-            fields.forEach((f, index) =>
-            {
-                let obj = this.builders[index].builder.getValue(checkError);
-                ans[f.name] = obj;
-            });
-            return ans;
-        });
-        if (res != null)
-            obj = res;
-
-        return obj;
-    }
-    setValue(value: any | null, callback?: () => void): void
-    {
-        if (!this.ifOjbect((_, fields) =>
-        {
-            fields.forEach((f, index) =>
-            {
-                let obj = value?.[f.name];
-                this.builders[index].builder.setValue(obj);
-            });
-            return true;
-        }))
-            this.box_ref.current?.setValue(value, callback);
-    }
-    /* VariableType */
-    protected override _toAny(_: AnySchema)
-    {
-        return null;
-    }
-    protected override _toBool(schema: BoolSchema)
-    {
-        if (this.multiple)
-            return null;
-
-        return (
-            <NSBoxBoolean
-                ref={this.box_ref as React.RefObject<any>}
-                key={this.key}
-                {...this.props}
-
-                required={schema.required}
-                valids={schema.valids}
-                invalids={schema.invalids}
-                // regex={schema.regex}
-
-                title={this.title}
-                placeholder={this.placeholder}
-                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullBoolean() ?? undefined}
-                onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                menu={this.menu}
-            />
-        );
-    }
-    private toInteger(schema: BaseNumberSchema): React.JSX.Element | null
-    {
-        if (this.multiple)
-            return null;
-
-        return (
-            <NSBoxInteger
-                ref={this.box_ref as React.RefObject<any>}
-                key={this.key}
-                {...this.props}
-
-                required={schema.required}
-                valids={schema.valids}
-                invalids={schema.invalids}
-                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
-
-                title={this.title}
-                placeholder={this.placeholder}
-                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullInt() ?? undefined}
-                onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                menu={this.menu}
-
-                min={schema.min ?? undefined}
-                max={schema.max ?? undefined}
-            />
-        );
-    }
-    protected override _toTinyInt(schema: TinyIntSchema)
-    {
-        return this.toInteger(schema);
-    }
-    protected override _toSmallInt(schema: SmallIntSchema)
-    {
-        return this.toInteger(schema);
-    }
-    protected override _toMediumInt(schema: MediumIntSchema)
-    {
-        return this.toInteger(schema);
-    }
-    protected override _toInteger(schema: IntegerSchema)
-    {
-        return this.toInteger(schema);
-    }
-    protected override _toBigInt(schema: BigIntSchema)
-    {
-        return this.toInteger(schema);
-    }
-    private toPrecision(schema: BasePrecisionSchema): React.JSX.Element | null
-    {
-        if (this.multiple)
-            return null;
-
-        return (
-            <NSBoxDouble
-                ref={this.box_ref as React.RefObject<any>}
-                key={this.key}
-                {...this.props}
-
-                required={schema.required}
-                valids={schema.valids}
-                invalids={schema.invalids}
-                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
-
-                title={this.title}
-                placeholder={this.placeholder}
-                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullFloat() ?? undefined}
-                onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                menu={this.menu}
-
-                min={schema.min ?? undefined}
-                max={schema.max ?? undefined}
-                precision={schema.precision ?? undefined}
-            />
-        );
-    }
-    protected override _toFloat(schema: FloatSchema)
-    {
-        return this.toPrecision(schema);
-    }
-    protected override _toDouble(schema: DoubleSchema)
-    {
-        return this.toPrecision(schema);
-    }
-    protected override _toDecimal(schema: DecimalSchema)
-    {
-        return this.toPrecision(schema);
-    }
-    protected override _toReal(schema: RealSchema)
-    {
-        return this.toPrecision(schema);
-    }
-    protected override _toMoney(schema: MoneySchema)
-    {
-        if (this.multiple)
-            return null;
-
-        return (
-            <NSBoxMoney
-                ref={this.box_ref as React.RefObject<any>}
-                key={this.key}
-                {...this.props}
-
-                required={schema.required}
-                valids={schema.valids}
-                invalids={schema.invalids}
-                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
-
-                title={this.title}
-                placeholder={this.placeholder}
-                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullFloat() ?? undefined}
-                onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                menu={this.menu}
-
-                min={schema.min ?? undefined}
-                max={schema.max ?? undefined}
-                precision={schema.precision ?? undefined}
-            />
-        );
-    }
-    protected override _toString(schema: StringSchema)
-    {
-        if (this.multiple)
-            return null;
-
-        return (
-            <NSBoxString
-                ref={this.box_ref as React.RefObject<any>}
-                key={this.key}
-                {...this.props}
-
-                required={schema.required}
-                valids={schema.valids}
-                invalids={schema.invalids}
-                regex={schema.regex ? { name: this.props.variable.name, regex: schema.regex } : undefined}
-
-                title={this.title}
-                placeholder={this.placeholder}
-                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
-                onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                menu={this.menu}
-
-                min_length={schema.min_length ?? undefined}
-                max_length={schema.max_length ?? undefined}
-            />
-        );
-    }
-    protected override _toDate(schema: DateSchema)
-    {
-        if (this.multiple)
-            return null;
-
-        return (
-            <NSBoxDate
-                ref={this.box_ref as React.RefObject<any>}
-                key={this.key}
-                {...this.props}
-
-                required={schema.required}
-                valids={schema.valids}
-                invalids={schema.invalids}
-                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
-
-                title={this.title}
-                placeholder={this.placeholder}
-                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullDate() ?? undefined}
-                onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                menu={this.menu}
-            />
-        );
-    }
-    protected override _toTime(schema: TimeSchema)
-    {
-        if (this.multiple)
-            return null;
-
-        return (
-            <NSBoxTime
-                ref={this.box_ref as React.RefObject<any>}
-                key={this.key}
-                {...this.props}
-
-                required={schema.required}
-                valids={schema.valids}
-                invalids={schema.invalids}
-                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
-
-                title={this.title}
-                placeholder={this.placeholder}
-                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
-                onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                menu={this.menu}
-            />
-        );
-    }
-    protected override _toDateTime(schema: DateTimeSchema)
-    {
-        if (this.multiple)
-            return null;
-
-        return (
-            <NSBoxDateTime
-                ref={this.box_ref as React.RefObject<any>}
-                key={this.key}
-                {...this.props}
-
-                required={schema.required}
-                valids={schema.valids}
-                invalids={schema.invalids}
-                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
-
-                title={this.title}
-                placeholder={this.placeholder}
-                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullDate() ?? undefined}
-                onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                menu={this.menu}
-            />
-        );
-    }
-    protected override _toTimeZone(schema: TimeZoneSchema)
-    {
-        if (this.multiple)
-            return null;
-
-        return (
-            <NSBoxTimeZone
-                ref={this.box_ref as React.RefObject<any>}
-                key={this.key}
-                {...this.props}
-
-                required={schema.required}
-                valids={schema.valids}
-                invalids={schema.invalids}
-                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
-
-                title={this.title}
-                placeholder={this.placeholder}
-                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
-                onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                menu={this.menu}
-            />
-        );
-    }
-    protected override _toDuration(schema: DurationSchema)
-    {
-        if (this.multiple)
-            return null;
-
-        return (
-            <NSBoxDuration
-                ref={this.box_ref as React.RefObject<any>}
-                key={this.key}
-                {...this.props}
-
-                required={schema.required}
-                valids={schema.valids}
-                invalids={schema.invalids}
-                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
-
-                title={this.title}
-                placeholder={this.placeholder}
-                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
-                onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                menu={this.menu}
-            />
-        );
-    }
-    protected override _toEmail(schema: EmailSchema)
-    {
-        if (this.multiple)
-            return null;
-
-        return (
-            <NSBoxEmail
-                ref={this.box_ref as React.RefObject<any>}
-                key={this.key}
-                {...this.props}
-
-                required={schema.required}
-                valids={schema.valids}
-                invalids={schema.invalids}
-                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
-
-                title={this.title}
-                placeholder={this.placeholder}
-                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
-                onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                menu={this.menu}
-            />
-        );
-    }
-    protected override _toPhone(schema: PhoneSchema)
-    {
-        if (this.multiple)
-            return null;
-
-        return (
-            <NSBoxPhone
-                ref={this.box_ref as React.RefObject<any>}
-                key={this.key}
-                {...this.props}
-
-                required={schema.required}
-                valids={schema.valids}
-                invalids={schema.invalids}
-                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
-
-                title={this.title}
-                placeholder={this.placeholder}
-                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
-                onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                menu={this.menu}
-            />
-        );
-    }
-    protected override _toVersion(schema: VersionSchema)
-    {
-        if (this.multiple)
-            return null;
-        return (
-            <NSBoxVersion
-                ref={this.box_ref as React.RefObject<any>}
-                key={this.key}
-                {...this.props}
-
-                required={schema.required}
-                valids={schema.valids}
-                invalids={schema.invalids}
-                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
-
-                title={this.title}
-                placeholder={this.placeholder}
-                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
-                onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                menu={this.menu}
-            />
-        );
-    }
-    protected override _toIPV4(schema: IPV4Schema)
-    {
-        if (this.multiple)
-            return null;
-        return (
-            <NSBoxIPV4
-                ref={this.box_ref as React.RefObject<any>}
-                key={this.key}
-                {...this.props}
-
-                required={schema.required}
-                valids={schema.valids}
-                invalids={schema.invalids}
-                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
-
-                title={this.title}
-                placeholder={this.placeholder}
-                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
-                onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                menu={this.menu}
-            />
-        );
-    }
-    protected override _toIPV6(schema: IPV6Schema)
-    {
-        if (this.multiple)
-            return null;
-        return (
-            <NSBoxIPV6
-                ref={this.box_ref as React.RefObject<any>}
-                key={this.key}
-                {...this.props}
-
-                required={schema.required}
-                valids={schema.valids}
-                invalids={schema.invalids}
-                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
-
-                title={this.title}
-                placeholder={this.placeholder}
-                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
-                onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                menu={this.menu}
-            />
-        );
-    }
-    protected override _toIPV4Range(schema: IPV4RangeSchema)
-    {
-        if (this.multiple)
-            return null;
-        return (
-            <NSBoxIPV4Range
-                ref={this.box_ref as React.RefObject<any>}
-                key={this.key}
-                {...this.props}
-
-                required={schema.required}
-                valids={schema.valids}
-                invalids={schema.invalids}
-                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
-
-                title={this.title}
-                placeholder={this.placeholder}
-                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
-                onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                menu={this.menu}
-            />
-        );
-    }
-    protected override _toIPV6Range(schema: IPV6RangeSchema)
-    {
-        if (this.multiple)
-            return null;
-        return (
-            <NSBoxIPV6Range
-                ref={this.box_ref as React.RefObject<any>}
-                key={this.key}
-                {...this.props}
-
-                required={schema.required}
-                valids={schema.valids}
-                invalids={schema.invalids}
-                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
-
-                title={this.title}
-                placeholder={this.placeholder}
-                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
-                onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                menu={this.menu}
-            />
-        );
-    }
-    protected override _toColor(schema: ColorSchema)
-    {
-        if (this.multiple)
-            return null;
-        return (
-            <NSBoxColor
-                ref={this.box_ref as React.RefObject<any>}
-                key={this.key}
-                {...this.props}
-
-                required={schema.required}
-                valids={schema.valids}
-                invalids={schema.invalids}
-                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
-
-                title={this.title}
-                placeholder={this.placeholder}
-                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
-                onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                menu={this.menu}
-            />
-        );
-    }
-    protected override _toFont(schema: FontSchema)
-    {
-        if (this.multiple)
-            return null;
-        return (
-            <NSBoxFont
-                ref={this.box_ref as React.RefObject<any>}
-                key={this.key}
-                {...this.props}
-
-                required={schema.required}
-                valids={schema.valids}
-                invalids={schema.invalids}
-                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
-
-                title={this.title}
-                placeholder={this.placeholder}
-                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
-                onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                menu={this.menu}
-            />
-        );
-    }
-    protected override _toFilePath(schema: FilePathSchema)
-    {
-        if (this.multiple)
-            return null;
-        return (
-            <NSBoxFilePath
-                ref={this.box_ref as React.RefObject<any>}
-                key={this.key}
-                {...this.props}
-
-                required={schema.required}
-                valids={schema.valids}
-                invalids={schema.invalids}
-                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
-
-                title={this.title}
-                placeholder={this.placeholder}
-                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
-                onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                menu={this.menu}
-            />
-        );
-    }
-    protected override _toURL(schema: URLSchema)
-    {
-        if (this.multiple)
-            return null;
-        return (
-            <NSBoxURL
-                ref={this.box_ref as React.RefObject<any>}
-                key={this.key}
-                {...this.props}
-
-                required={schema.required}
-                valids={schema.valids}
-                invalids={schema.invalids}
-                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
-
-                title={this.title}
-                placeholder={this.placeholder}
-                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
-                onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                menu={this.menu}
-            />
-        );
-    }
-    protected override _toEnum(schema: EnumSchema)
-    {
-        return (
-            <NSBoxCombo
-                ref={this.box_ref as React.RefObject<any>}
-                key={this.key}
-                {...this.props}
-
-                required={schema.required}
-                valids={schema.valids}
-                invalids={schema.invalids}
-                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
-
-                title={this.title}
-                placeholder={this.placeholder}
-                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
-                onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                menu={this.menu}
-
-                multiple={this.multiple ?? false}
-                getOptions={() =>
-                {
-                    let valids = schema.valids;
-                    valids = valids.filter((v) => !schema.invalids.includes(v));
-                    return valids.map((v) => ({ title: v, value: v }));
-                }}
-            />
-        );
-    }
-    protected override _toEntity(schema: EntitySchema)
-    {
-        let global = new NamirasoftMap()
-        let meta = global.getByShortName(schema.product);
-        if (meta.table)
-            return (
-                <NSBoxEntity<any>
-                    ref={this.box_ref as React.RefObject<any>}
-                    key={this.key}
-                    {...this.props}
-
-                    required={schema.required}
-                    valids={schema.valids}
-                    invalids={schema.invalids}
-                    // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
-
-                    title={this.title}
-                    placeholder={this.placeholder}
-                    defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
-                    onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                    onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                    menu={this.menu}
-
-                    multiple={this.multiple ?? false}
-
-                    table={meta.table}
-                    getValue={(item) => item.id}
-                    getTitle={(item) => item.name}
-                    getSort={() => null}
-                />
-            );
-        return <>Could not find table information</>;
-    }
-    protected override _toArray(schema: ArraySchema, callback: (schema: BaseTypeSchema) => void)
-    {
-        if (this.multiple)
-            return null;
-        if (schema.items.length === 0)
-            return null;
-        if (schema.items.length > 1)
-            return null;
-
-        let menu = safeMenuMenuItem(this.props, () => { });
-
-        return (
-            <NSBoxBaseLayoutRecursive
-                id={this.props.id}
-                {...this.props}
-                required
-                title={this.title}
-                depth={this.depth}
-                menu={menu}
-                getValue={() =>
-				{
-					// TODO: Need to return correct value as a string
-					return null;
-				}}
-            >
-                <NSRepeater<INSBox, string>
-                    ref={this.box_ref as React.RefObject<any>}
-                    key={this.key}
-                    title={this.title}
-                    createItem={(gIndex: number, lIndex: number, ref: React.RefObject<INSBox>, onChange: () => void, onDelete: undefined | ((index: number) => void)) =>
-                    {
-                        let title = "Item " + (lIndex + 1)
-                        let props = {
-                            ...this.props,
-                            title,
-                            onChanged: (box: NSBoxDynamic) =>
-                            {
-                                this.props.onChanged?.(box);
-                                onChange();
-                            },
-                            style: { ...this.props.style },
-                            variable: new BaseVariableSchema(title, schema.items[0]),
-                            multiple: false
-                        };
-                        let builder = new NSBoxBuilder(this.box, props, ref, "NSBoxBuilder_NSRepeater_Item_" + (gIndex + 1),
-                            onDelete ? () => { onDelete(gIndex) } : undefined
-                        );
-                        builder.depth = this.depth + 1;
-                        return builder.runSynch(callback);
-                    }}
-                    setValue={function (item: INSBox, _: number, value: string | null): void
-                    {
-                        if (value)
-                            item.setValue(value);
-                    }}
-                    getValue={function (item: INSBox, checkError: boolean): string
-                    {
-                        return item.getValue(checkError)
-                    }}
-                    isEmpty={function (item: INSBox, value: string | null): boolean
-                    {
-                        return item.isEmpty(value)
-                    }}
-                    required={schema.required}
-                    min={schema.min ?? undefined}
-                    max={schema.max ?? undefined}
-                />
-            </NSBoxBaseLayoutRecursive>
-        );
-    }
-    protected override _toObject(schema: ObjectSchema, callback: (schema: BaseTypeSchema) => void)
-    {
-        let children: React.JSX.Element[] | null = this.ifOjbect((_, fields) =>
-        {
-            return fields.map((_, index) =>
-            {
-                return this.builders[index].builder.runSynch(callback);
-            }).filter(x => x).map(x => x as React.JSX.Element);
-        });
-        if (!children)
-            return null;
-
-        let menu = safeMenuMenuItem(this.props, () => { });
-
-        return (
-            <NSBoxBaseLayoutRecursive
-                id={this.props.id}
-                {...this.props}
-                required
-                title={this.title + ((schema.name && schema.name !== this.title) ? ` (${schema.name})` : "")}
-                depth={this.depth}
-                menu={menu}
-                getValue={() =>
-				{
-					// TODO: Need to return correct value as a string
-					return null;
-				}}
-            >
-                {children}
-            </NSBoxBaseLayoutRecursive>
-        );
-    }
-    protected override _toType(schema: TypeSchema)
-    {
-        if (this.multiple)
-            return null;
-        return (
-            <NSBoxSchemaBase
-                ref={this.box_ref as React.RefObject<any>}
-                key={this.key}
-                {...this.props}
-
-                required={schema.required}
-                valids={schema.valids}
-                invalids={schema.invalids}
-                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
-
-                title={this.title}
-                placeholder={this.placeholder}
-                defaultValue={undefined}
-                onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                menu={this.menu}
-            />
-        );
-    }
-    protected override _toVariable(schema: VariableSchema)
-    {
-        if (this.multiple)
-            return null;
-        return (
-            <NSBoxSchemaVariable
-                ref={this.box_ref as React.RefObject<any>}
-                key={this.key}
-                {...this.props}
-
-                required={schema.required}
-                valids={schema.valids}
-                invalids={schema.invalids}
-                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
-
-                title={this.title}
-                placeholder={this.placeholder}
-                defaultValue={undefined}
-                onChanged={(_) => { this.props.onChanged?.(this.box); }}
-                onClicked={(_) => { this.props.onClicked?.(this.box); }}
-                menu={this.menu}
-            />
-        );
-    }
+import { AnySchema, ArraySchema, BaseNumberSchema, BasePrecisionSchema, BaseTypeBuilder, 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 "./components/NSBoxBoolean";
+import { NSBoxCombo } from "./components/NSBoxCombo";
+import { NSBoxDate } from "./components/NSBoxDate";
+import { NSBoxDateTime } from "./components/NSBoxDateTime";
+import { NSBoxDouble } from "./components/NSBoxDouble";
+import { NSBoxDuration } from "./components/NSBoxDuration";
+import { NSBoxDynamic, NSBoxDynamicProps } from "./components/NSBoxDynamic";
+import { NSBoxEmail } from "./components/NSBoxEmail";
+import { NSBoxEntity } from "./components/NSBoxEntity";
+import { NSBoxInteger } from "./components/NSBoxInteger";
+import { NSBoxIPV4 } from "./components/NSBoxIPV4";
+import { NSBoxIPV6 } from "./components/NSBoxIPV6";
+import { NSBoxMoney } from "./components/NSBoxMoney";
+import { NSBoxPhone } from "./components/NSBoxPhone";
+import { NSBoxString } from "./components/NSBoxString";
+import { NSBoxTime } from "./components/NSBoxTime";
+import { NSRepeater } from "./components/NSRepeater";
+import { NSBoxTimeZone } from "./components/NSBoxTimeZone";
+import { NSBoxVersion } from "./components/NSBoxVersion";
+import { NSBoxIPV4Range } from "./components/NSBoxIPV4Range";
+import { NSBoxIPV6Range } from "./components/NSBoxIPV6Range";
+import { NSBoxColor } from "./components/NSBoxColor";
+import { NSBoxFont } from "./components/NSBoxFont";
+import { NSBoxFilePath } from "./components/NSBoxFilePath";
+import { NSBoxURL } from "./components/NSBoxURL";
+import { NamingConvention, ObjectService } from "namirasoft-core";
+import { INSBox } from "./components/INSBox";
+import { createRef } from "react";
+import { NSBoxBaseLayoutRecursive } from "./components/NSBoxBaseLayoutRecursive";
+import { NSMenuButtonMenuProps, safeMenuMenuItem } from "./components/NSMenuButton";
+import { NSBoxSchemaBase } from "./components/NSBoxSchemaBase";
+import { NSBoxSchemaVariable } from "./components/NSBoxSchemaVariable";
+import { NamirasoftMap } from "namirasoft-site-map";
+
+export class NSBoxBuilder extends BaseTypeBuilder<React.JSX.Element | null>
+{
+    private depth: number = 0;
+    private box: NSBoxDynamic;
+    private props: NSBoxDynamicProps;
+    private box_ref: React.RefObject<INSBox>;
+    private key: string;
+    private title: string;
+    private placeholder: string;
+    private menu: NSMenuButtonMenuProps;
+    private builders: { builder: NSBoxBuilder, ref: React.RefObject<INSBox> }[] = [];
+    private multiple: boolean;
+
+    constructor(box: NSBoxDynamic, props: NSBoxDynamicProps, box_ref: React.RefObject<INSBox>, key: string, onDelete?: () => void)
+    {
+        super(props.variable.type);
+        this.box = box;
+        this.props = props;
+        this.box_ref = box_ref;
+        this.key = key;
+        this.toInteger = this.toInteger.bind(this);
+        this.toPrecision = this.toPrecision.bind(this);
+        this.ifOjbect = this.ifOjbect.bind(this);
+
+        this.title = this.props.title;
+        if (!this.title)
+            this.title = NamingConvention.auto.convert(this.props.variable.name, NamingConvention.Pascal_Case_Space);
+        this.placeholder = props.variable.type?.example ?? "";
+        this.multiple = props.variable.tags?.["multiple"] === "true";
+        this.menu = safeMenuMenuItem(this.props, () => { });
+        this.menu.builtin.delete = { enabled: onDelete != null, onDelete: () => { onDelete?.() } };
+        this.builders = this.ifOjbect((_, fields) =>
+        {
+            return fields.map((f) =>
+            {
+                let title = NamingConvention.auto.convert(f.name, NamingConvention.Pascal_Case_Space);
+                let props = {
+                    ...this.props,
+                    title,
+                    onChanged: (box: NSBoxDynamic) =>
+                    {
+                        this.props.onChanged?.(box);
+                    },
+                    variable: f,
+                    multiple: false
+                };
+                let ref = createRef<INSBox>();
+                let builder = new NSBoxBuilder(this.box, props, ref, "NSBoxBuilder_Object_" + f.name);
+                builder.depth = this.depth + 1;
+                return { builder, ref };
+            });
+        }) ?? [];
+    }
+    private ifOjbect<T>(handler: (schema: ObjectSchema, fields: BaseVariableSchema[]) => T): T | null
+    {
+        if (this.props.variable.type?.type === VariableType.Object)
+        {
+            let schema = this.props.variable.type as ObjectSchema;
+
+            if (this.multiple)
+                return null;
+            if (schema.external)
+                return null;
+            if (!schema.fields)
+                return null
+            if (schema.fields.length === 0)
+                return null
+            if (schema.fields)
+                return handler(schema, schema.fields);
+        }
+        return null;
+    }
+    getValue(checkError: boolean = true): any | null
+    {
+        let obj = this.box_ref.current?.getValue(checkError);
+
+        let res = this.ifOjbect((_, fields) =>
+        {
+            let ans: { [name: string]: any } = {};
+            fields.forEach((f, index) =>
+            {
+                let obj = this.builders[index].builder.getValue(checkError);
+                ans[f.name] = obj;
+            });
+            return ans;
+        });
+        if (res != null)
+            obj = res;
+
+        return obj;
+    }
+    setValue(value: any | null, callback?: () => void): void
+    {
+        if (!this.ifOjbect((_, fields) =>
+        {
+            fields.forEach((f, index) =>
+            {
+                let obj = value?.[f.name];
+                this.builders[index].builder.setValue(obj);
+            });
+            return true;
+        }))
+            this.box_ref.current?.setValue(value, callback);
+    }
+    /* VariableType */
+    protected override _toAny(_: AnySchema)
+    {
+        return null;
+    }
+    protected override _toBool(schema: BoolSchema)
+    {
+        if (this.multiple)
+            return null;
+
+        return (
+            <NSBoxBoolean
+                ref={this.box_ref as React.RefObject<any>}
+                key={this.key}
+                {...this.props}
+
+                required={schema.required}
+                valids={schema.valids}
+                invalids={schema.invalids}
+                // regex={schema.regex}
+
+                title={this.title}
+                placeholder={this.placeholder}
+                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullBoolean() ?? undefined}
+                onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                menu={this.menu}
+            />
+        );
+    }
+    private toInteger(schema: BaseNumberSchema): React.JSX.Element | null
+    {
+        if (this.multiple)
+            return null;
+
+        return (
+            <NSBoxInteger
+                ref={this.box_ref as React.RefObject<any>}
+                key={this.key}
+                {...this.props}
+
+                required={schema.required}
+                valids={schema.valids}
+                invalids={schema.invalids}
+                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
+
+                title={this.title}
+                placeholder={this.placeholder}
+                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullInt() ?? undefined}
+                onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                menu={this.menu}
+
+                min={schema.min ?? undefined}
+                max={schema.max ?? undefined}
+            />
+        );
+    }
+    protected override _toTinyInt(schema: TinyIntSchema)
+    {
+        return this.toInteger(schema);
+    }
+    protected override _toSmallInt(schema: SmallIntSchema)
+    {
+        return this.toInteger(schema);
+    }
+    protected override _toMediumInt(schema: MediumIntSchema)
+    {
+        return this.toInteger(schema);
+    }
+    protected override _toInteger(schema: IntegerSchema)
+    {
+        return this.toInteger(schema);
+    }
+    protected override _toBigInt(schema: BigIntSchema)
+    {
+        return this.toInteger(schema);
+    }
+    private toPrecision(schema: BasePrecisionSchema): React.JSX.Element | null
+    {
+        if (this.multiple)
+            return null;
+
+        return (
+            <NSBoxDouble
+                ref={this.box_ref as React.RefObject<any>}
+                key={this.key}
+                {...this.props}
+
+                required={schema.required}
+                valids={schema.valids}
+                invalids={schema.invalids}
+                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
+
+                title={this.title}
+                placeholder={this.placeholder}
+                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullFloat() ?? undefined}
+                onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                menu={this.menu}
+
+                min={schema.min ?? undefined}
+                max={schema.max ?? undefined}
+                precision={schema.precision ?? undefined}
+            />
+        );
+    }
+    protected override _toFloat(schema: FloatSchema)
+    {
+        return this.toPrecision(schema);
+    }
+    protected override _toDouble(schema: DoubleSchema)
+    {
+        return this.toPrecision(schema);
+    }
+    protected override _toDecimal(schema: DecimalSchema)
+    {
+        return this.toPrecision(schema);
+    }
+    protected override _toReal(schema: RealSchema)
+    {
+        return this.toPrecision(schema);
+    }
+    protected override _toMoney(schema: MoneySchema)
+    {
+        if (this.multiple)
+            return null;
+
+        return (
+            <NSBoxMoney
+                ref={this.box_ref as React.RefObject<any>}
+                key={this.key}
+                {...this.props}
+
+                required={schema.required}
+                valids={schema.valids}
+                invalids={schema.invalids}
+                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
+
+                title={this.title}
+                placeholder={this.placeholder}
+                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullFloat() ?? undefined}
+                onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                menu={this.menu}
+
+                min={schema.min ?? undefined}
+                max={schema.max ?? undefined}
+                precision={schema.precision ?? undefined}
+            />
+        );
+    }
+    protected override _toString(schema: StringSchema)
+    {
+        if (this.multiple)
+            return null;
+
+        return (
+            <NSBoxString
+                ref={this.box_ref as React.RefObject<any>}
+                key={this.key}
+                {...this.props}
+
+                required={schema.required}
+                valids={schema.valids}
+                invalids={schema.invalids}
+                regex={schema.regex ? { name: this.props.variable.name, regex: schema.regex } : undefined}
+
+                title={this.title}
+                placeholder={this.placeholder}
+                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
+                onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                menu={this.menu}
+
+                min_length={schema.min_length ?? undefined}
+                max_length={schema.max_length ?? undefined}
+            />
+        );
+    }
+    protected override _toDate(schema: DateSchema)
+    {
+        if (this.multiple)
+            return null;
+
+        return (
+            <NSBoxDate
+                ref={this.box_ref as React.RefObject<any>}
+                key={this.key}
+                {...this.props}
+
+                required={schema.required}
+                valids={schema.valids}
+                invalids={schema.invalids}
+                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
+
+                title={this.title}
+                placeholder={this.placeholder}
+                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullDate() ?? undefined}
+                onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                menu={this.menu}
+            />
+        );
+    }
+    protected override _toTime(schema: TimeSchema)
+    {
+        if (this.multiple)
+            return null;
+
+        return (
+            <NSBoxTime
+                ref={this.box_ref as React.RefObject<any>}
+                key={this.key}
+                {...this.props}
+
+                required={schema.required}
+                valids={schema.valids}
+                invalids={schema.invalids}
+                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
+
+                title={this.title}
+                placeholder={this.placeholder}
+                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
+                onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                menu={this.menu}
+            />
+        );
+    }
+    protected override _toDateTime(schema: DateTimeSchema)
+    {
+        if (this.multiple)
+            return null;
+
+        return (
+            <NSBoxDateTime
+                ref={this.box_ref as React.RefObject<any>}
+                key={this.key}
+                {...this.props}
+
+                required={schema.required}
+                valids={schema.valids}
+                invalids={schema.invalids}
+                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
+
+                title={this.title}
+                placeholder={this.placeholder}
+                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullDate() ?? undefined}
+                onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                menu={this.menu}
+            />
+        );
+    }
+    protected override _toTimeZone(schema: TimeZoneSchema)
+    {
+        if (this.multiple)
+            return null;
+
+        return (
+            <NSBoxTimeZone
+                ref={this.box_ref as React.RefObject<any>}
+                key={this.key}
+                {...this.props}
+
+                required={schema.required}
+                valids={schema.valids}
+                invalids={schema.invalids}
+                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
+
+                title={this.title}
+                placeholder={this.placeholder}
+                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
+                onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                menu={this.menu}
+            />
+        );
+    }
+    protected override _toDuration(schema: DurationSchema)
+    {
+        if (this.multiple)
+            return null;
+
+        return (
+            <NSBoxDuration
+                ref={this.box_ref as React.RefObject<any>}
+                key={this.key}
+                {...this.props}
+
+                required={schema.required}
+                valids={schema.valids}
+                invalids={schema.invalids}
+                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
+
+                title={this.title}
+                placeholder={this.placeholder}
+                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
+                onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                menu={this.menu}
+            />
+        );
+    }
+    protected override _toEmail(schema: EmailSchema)
+    {
+        if (this.multiple)
+            return null;
+
+        return (
+            <NSBoxEmail
+                ref={this.box_ref as React.RefObject<any>}
+                key={this.key}
+                {...this.props}
+
+                required={schema.required}
+                valids={schema.valids}
+                invalids={schema.invalids}
+                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
+
+                title={this.title}
+                placeholder={this.placeholder}
+                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
+                onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                menu={this.menu}
+            />
+        );
+    }
+    protected override _toPhone(schema: PhoneSchema)
+    {
+        if (this.multiple)
+            return null;
+
+        return (
+            <NSBoxPhone
+                ref={this.box_ref as React.RefObject<any>}
+                key={this.key}
+                {...this.props}
+
+                required={schema.required}
+                valids={schema.valids}
+                invalids={schema.invalids}
+                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
+
+                title={this.title}
+                placeholder={this.placeholder}
+                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
+                onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                menu={this.menu}
+            />
+        );
+    }
+    protected override _toVersion(schema: VersionSchema)
+    {
+        if (this.multiple)
+            return null;
+        return (
+            <NSBoxVersion
+                ref={this.box_ref as React.RefObject<any>}
+                key={this.key}
+                {...this.props}
+
+                required={schema.required}
+                valids={schema.valids}
+                invalids={schema.invalids}
+                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
+
+                title={this.title}
+                placeholder={this.placeholder}
+                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
+                onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                menu={this.menu}
+            />
+        );
+    }
+    protected override _toIPV4(schema: IPV4Schema)
+    {
+        if (this.multiple)
+            return null;
+        return (
+            <NSBoxIPV4
+                ref={this.box_ref as React.RefObject<any>}
+                key={this.key}
+                {...this.props}
+
+                required={schema.required}
+                valids={schema.valids}
+                invalids={schema.invalids}
+                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
+
+                title={this.title}
+                placeholder={this.placeholder}
+                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
+                onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                menu={this.menu}
+            />
+        );
+    }
+    protected override _toIPV6(schema: IPV6Schema)
+    {
+        if (this.multiple)
+            return null;
+        return (
+            <NSBoxIPV6
+                ref={this.box_ref as React.RefObject<any>}
+                key={this.key}
+                {...this.props}
+
+                required={schema.required}
+                valids={schema.valids}
+                invalids={schema.invalids}
+                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
+
+                title={this.title}
+                placeholder={this.placeholder}
+                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
+                onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                menu={this.menu}
+            />
+        );
+    }
+    protected override _toIPV4Range(schema: IPV4RangeSchema)
+    {
+        if (this.multiple)
+            return null;
+        return (
+            <NSBoxIPV4Range
+                ref={this.box_ref as React.RefObject<any>}
+                key={this.key}
+                {...this.props}
+
+                required={schema.required}
+                valids={schema.valids}
+                invalids={schema.invalids}
+                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
+
+                title={this.title}
+                placeholder={this.placeholder}
+                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
+                onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                menu={this.menu}
+            />
+        );
+    }
+    protected override _toIPV6Range(schema: IPV6RangeSchema)
+    {
+        if (this.multiple)
+            return null;
+        return (
+            <NSBoxIPV6Range
+                ref={this.box_ref as React.RefObject<any>}
+                key={this.key}
+                {...this.props}
+
+                required={schema.required}
+                valids={schema.valids}
+                invalids={schema.invalids}
+                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
+
+                title={this.title}
+                placeholder={this.placeholder}
+                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
+                onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                menu={this.menu}
+            />
+        );
+    }
+    protected override _toColor(schema: ColorSchema)
+    {
+        if (this.multiple)
+            return null;
+        return (
+            <NSBoxColor
+                ref={this.box_ref as React.RefObject<any>}
+                key={this.key}
+                {...this.props}
+
+                required={schema.required}
+                valids={schema.valids}
+                invalids={schema.invalids}
+                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
+
+                title={this.title}
+                placeholder={this.placeholder}
+                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
+                onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                menu={this.menu}
+            />
+        );
+    }
+    protected override _toFont(schema: FontSchema)
+    {
+        if (this.multiple)
+            return null;
+        return (
+            <NSBoxFont
+                ref={this.box_ref as React.RefObject<any>}
+                key={this.key}
+                {...this.props}
+
+                required={schema.required}
+                valids={schema.valids}
+                invalids={schema.invalids}
+                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
+
+                title={this.title}
+                placeholder={this.placeholder}
+                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
+                onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                menu={this.menu}
+            />
+        );
+    }
+    protected override _toFilePath(schema: FilePathSchema)
+    {
+        if (this.multiple)
+            return null;
+        return (
+            <NSBoxFilePath
+                ref={this.box_ref as React.RefObject<any>}
+                key={this.key}
+                {...this.props}
+
+                required={schema.required}
+                valids={schema.valids}
+                invalids={schema.invalids}
+                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
+
+                title={this.title}
+                placeholder={this.placeholder}
+                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
+                onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                menu={this.menu}
+            />
+        );
+    }
+    protected override _toURL(schema: URLSchema)
+    {
+        if (this.multiple)
+            return null;
+        return (
+            <NSBoxURL
+                ref={this.box_ref as React.RefObject<any>}
+                key={this.key}
+                {...this.props}
+
+                required={schema.required}
+                valids={schema.valids}
+                invalids={schema.invalids}
+                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
+
+                title={this.title}
+                placeholder={this.placeholder}
+                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
+                onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                menu={this.menu}
+            />
+        );
+    }
+    protected override _toEnum(schema: EnumSchema)
+    {
+        return (
+            <NSBoxCombo
+                ref={this.box_ref as React.RefObject<any>}
+                key={this.key}
+                {...this.props}
+
+                required={schema.required}
+                valids={schema.valids}
+                invalids={schema.invalids}
+                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
+
+                title={this.title}
+                placeholder={this.placeholder}
+                defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
+                onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                menu={this.menu}
+
+                multiple={this.multiple ?? false}
+                getOptions={() =>
+                {
+                    let valids = schema.valids;
+                    valids = valids.filter((v) => !schema.invalids.includes(v));
+                    return valids.map((v) => ({ title: v, value: v }));
+                }}
+            />
+        );
+    }
+    protected override _toEntity(schema: EntitySchema)
+    {
+        let global = new NamirasoftMap()
+        let meta = global.getByShortName(schema.product);
+        if (meta.table)
+            return (
+                <NSBoxEntity<any>
+                    ref={this.box_ref as React.RefObject<any>}
+                    key={this.key}
+                    {...this.props}
+
+                    required={schema.required}
+                    valids={schema.valids}
+                    invalids={schema.invalids}
+                    // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
+
+                    title={this.title}
+                    placeholder={this.placeholder}
+                    defaultValue={new ObjectService(this.props.variable.defaultValue).getNullString() ?? undefined}
+                    onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                    onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                    menu={this.menu}
+
+                    multiple={this.multiple ?? false}
+
+                    table={meta.table}
+                    getValue={(item) => item.id}
+                    getTitle={(item) => item.name}
+                    getSort={() => null}
+                />
+            );
+        return <>Could not find table information</>;
+    }
+    protected override _toArray(schema: ArraySchema, callback: (schema: BaseTypeSchema) => void)
+    {
+        if (this.multiple)
+            return null;
+        if (schema.items.length === 0)
+            return null;
+        if (schema.items.length > 1)
+            return null;
+
+        let menu = safeMenuMenuItem(this.props, () => { });
+
+        return (
+            <NSBoxBaseLayoutRecursive
+                id={this.props.id}
+                {...this.props}
+                required
+                title={this.title}
+                depth={this.depth}
+                menu={menu}
+                getValue={() =>
+				{
+					// TODO: Need to return correct value as a string
+					return null;
+				}}
+            >
+                <NSRepeater<INSBox, string>
+                    ref={this.box_ref as React.RefObject<any>}
+                    key={this.key}
+                    title={this.title}
+                    createItem={(gIndex: number, lIndex: number, ref: React.RefObject<INSBox>, onChange: () => void, onDelete: undefined | ((index: number) => void)) =>
+                    {
+                        let title = "Item " + (lIndex + 1)
+                        let props = {
+                            ...this.props,
+                            title,
+                            onChanged: (box: NSBoxDynamic) =>
+                            {
+                                this.props.onChanged?.(box);
+                                onChange();
+                            },
+                            style: { ...this.props.style },
+                            variable: new BaseVariableSchema(title, schema.items[0]),
+                            multiple: false
+                        };
+                        let builder = new NSBoxBuilder(this.box, props, ref, "NSBoxBuilder_NSRepeater_Item_" + (gIndex + 1),
+                            onDelete ? () => { onDelete(gIndex) } : undefined
+                        );
+                        builder.depth = this.depth + 1;
+                        return builder.runSynch(callback);
+                    }}
+                    setValue={function (item: INSBox, _: number, value: string | null): void
+                    {
+                        if (value)
+                            item.setValue(value);
+                    }}
+                    getValue={function (item: INSBox, checkError: boolean): string
+                    {
+                        return item.getValue(checkError)
+                    }}
+                    isEmpty={function (item: INSBox, value: string | null): boolean
+                    {
+                        return item.isEmpty(value)
+                    }}
+                    required={schema.required}
+                    min={schema.min ?? undefined}
+                    max={schema.max ?? undefined}
+                />
+            </NSBoxBaseLayoutRecursive>
+        );
+    }
+    protected override _toObject(schema: ObjectSchema, callback: (schema: BaseTypeSchema) => void)
+    {
+        let children: React.JSX.Element[] | null = this.ifOjbect((_, fields) =>
+        {
+            return fields.map((_, index) =>
+            {
+                return this.builders[index].builder.runSynch(callback);
+            }).filter(x => x).map(x => x as React.JSX.Element);
+        });
+        if (!children)
+            return null;
+
+        let menu = safeMenuMenuItem(this.props, () => { });
+
+        return (
+            <NSBoxBaseLayoutRecursive
+                id={this.props.id}
+                {...this.props}
+                required
+                title={this.title + ((schema.name && schema.name !== this.title) ? ` (${schema.name})` : "")}
+                depth={this.depth}
+                menu={menu}
+                getValue={() =>
+				{
+					// TODO: Need to return correct value as a string
+					return null;
+				}}
+            >
+                {children}
+            </NSBoxBaseLayoutRecursive>
+        );
+    }
+    protected override _toType(schema: TypeSchema)
+    {
+        if (this.multiple)
+            return null;
+        return (
+            <NSBoxSchemaBase
+                ref={this.box_ref as React.RefObject<any>}
+                key={this.key}
+                {...this.props}
+
+                required={schema.required}
+                valids={schema.valids}
+                invalids={schema.invalids}
+                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
+
+                title={this.title}
+                placeholder={this.placeholder}
+                defaultValue={undefined}
+                onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                menu={this.menu}
+            />
+        );
+    }
+    protected override _toVariable(schema: VariableSchema)
+    {
+        if (this.multiple)
+            return null;
+        return (
+            <NSBoxSchemaVariable
+                ref={this.box_ref as React.RefObject<any>}
+                key={this.key}
+                {...this.props}
+
+                required={schema.required}
+                valids={schema.valids}
+                invalids={schema.invalids}
+                // regex={schema.regex ? { name: variable.name, regex: schema.regex } : undefined}
+
+                title={this.title}
+                placeholder={this.placeholder}
+                defaultValue={undefined}
+                onChanged={(_) => { this.props.onChanged?.(this.box); }}
+                onClicked={(_) => { this.props.onClicked?.(this.box); }}
+                menu={this.menu}
+            />
+        );
+    }
 }