namirasoft-site-react 1.4.554 → 1.4.556

package/src/components/NSRepeater.tsx

@@ -1,329 +1,329 @@
-import { Component, createRef, ReactNode } from 'react';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import { Validator } from '../Validator';
-import { INSBox } from './INSBox';
-import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from './NSBoxBaseLayout';
-import { NSLine } from './NSLine';
-import { safeMenuMenuItem } from './NSMenuButton';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-
-export interface NSRepeaterProps<ItemType, ValueType> extends IBaseComponentProps, INSBoxBaseLayoutProps<ItemType, ValueType>
-{
-    createItem: (gIndex: number, lIndex: number, ref: React.RefObject<ItemType>, onChange: () => void, onDelete: undefined | ((lIndex: number) => void)) => ReactNode;
-    getValue: (item: ItemType, checkError: boolean) => ValueType | null | Promise<ValueType | null>;
-    setValue: (item: ItemType, index: number, value: ValueType | null, callback?: () => void) => void;
-    isEmpty: (item: ItemType, value: ValueType | null) => boolean;
-    onItemChanged?: (repeater: NSRepeater<ItemType, ValueType>) => void;
-    onValuesChanged?: (repeater: NSRepeater<ItemType, ValueType>) => void;
-    required: boolean;
-    min?: number;
-    max?: number;
-    onExternalAddRef?: (add: () => void) => void;
-    ignoreItemsHavingError?: boolean;
-    hideSpaces?: boolean;
-}
-
-export interface NSRepeaterState
-{
-    items: boolean[];
-}
-
-export class NSRepeater<ItemType, ValueType> extends Component<NSRepeaterProps<ItemType, ValueType>, NSRepeaterState> implements INSBox
-{
-    NSBoxBaseLayout_Main = createRef<NSBoxBaseLayout>();
-    private Item_Refs: React.RefObject<ItemType>[] = [];
-    private last_value: ValueType[] = [];
-    constructor(props: NSRepeaterProps<ItemType, ValueType>)
-    {
-        super(props);
-        this.state = { items: [] };
-        this.getCount = this.getCount.bind(this);
-        this.canDelete = this.canDelete.bind(this);
-        this.getGIndex = this.getGIndex.bind(this);
-        this.getIndex = this.getIndex.bind(this);
-        this.addItem = this.addItem.bind(this);
-        this.delItem = this.delItem.bind(this);
-        this.onChange = this.onChange.bind(this);
-        this.checkForNew = this.checkForNew.bind(this);
-
-        this.isEmpty = this.isEmpty.bind(this);
-        this.getError = this.getError.bind(this);
-        this.getValue = this.getValue.bind(this);
-        this.setValue = this.setValue.bind(this);
-    }
-    private getCount(): number
-    {
-        return this.state.items.filter(x => x).length;
-    }
-    private canDelete(gIndex: number)
-    {
-        if (this.Item_Refs.length > 0)
-        {
-            let count = this.getCount();
-            if (count <= (this.props.min ?? 1))
-                return false;
-            if (count === this.props.max)
-                return true;
-            if (!this.props.onExternalAddRef && gIndex === this.state.items.length - 1)
-                return false;
-            return true
-        }
-        return false;
-    }
-    private getGIndex(index: number): number
-    {
-        if (this.state.items.length === 0)
-            return 0;
-        for (let i = 0; i < this.state.items.length; i++)
-        {
-            if (this.state.items[i])
-            {
-                if (index === 0)
-                    return i;
-                index--;
-            }
-        }
-        return this.state.items.length - 1;
-    }
-    private getIndex(gindex: number): number
-    {
-        if (gindex >= this.state.items.length)
-            throw new Error("GIndex out of bound: " + gindex);
-        let ans = -1;
-        for (let i = 0; i <= gindex; i++)
-            if (this.state.items[i])
-                ans++;
-        return ans;
-    }
-    private addItem(state: boolean = true)
-    {
-        if (!this.props.max || this.getCount() < this.props.max)
-        {
-            this.Item_Refs.push(createRef<ItemType>());
-            if (state)
-            {
-                let items = this.state.items;
-                items.push(true);
-                this.setState({ items }, () =>
-                {
-                    this.props.onItemChanged?.(this);
-                });
-            }
-        }
-    }
-    private delItem(lIndex: number)
-    {
-        let gindex = this.getGIndex(lIndex);
-        if (this.canDelete(gindex))
-        {
-            let items = this.state.items;
-            items[gindex] = false;
-            this.setState({ items }, () =>
-            {
-                this.props.onItemChanged?.(this);
-                this.onChange();
-            });
-        }
-    }
-    private onChange()
-    {
-        this.props.onValuesChanged?.(this);
-        if (!this.props.onExternalAddRef)
-            this.checkForNew();
-    }
-    private async checkForNew()
-    {
-        let length = this.state.items.filter(x => x).length;
-        if (length === 0)
-            this.addItem();
-        else
-        {
-            let last = this.Item_Refs.length - 1;
-            while (!this.state.items[last])
-                last--;
-            let item = this.Item_Refs[last].current;
-            if (item)
-            {
-                let value = await this.props.getValue(item, false)
-                if (!this.props.isEmpty(item, value))
-                {
-                    this.addItem();
-                }
-            }
-        }
-    }
-    isEmpty(): boolean
-    {
-        return true;
-    }
-    getError(): string | null
-    {
-        return (
-            Validator.getErrorArray(this.props.title, this.last_value, this.props.required, this.props.min, this.props.max)
-        );
-    }
-    // todo getValueAsync and getValue are using same logic. Repeatitive code must be removed.
-    async getValueAsync(checkError: boolean = true): Promise<ValueType[]>
-    {
-        if (this.props.nullable)
-            if (this.NSBoxBaseLayout_Main.current?.isNull())
-                return [];
-
-        this.last_value = [];
-        for (let index = 0; index < this.state.items.length; index++)
-        {
-            const exists = this.state.items[index];
-            if (exists)
-            {
-                let item = this.Item_Refs[index].current;
-                if (item)
-                {
-                    try
-                    {
-                        let empty_value = await this.props.getValue(item, false);
-                        if (!this.props.isEmpty(item, empty_value))
-                        {
-                            let value = await this.props.getValue(item, checkError);
-                            if (value != null)
-                                this.last_value.push(value);
-                        }
-                    } catch (error)
-                    {
-                        if (this.props.ignoreItemsHavingError !== true)
-                            throw error;
-                    }
-                }
-            }
-        }
-        return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.last_value) ?? [];
-    }
-    getValue(checkError: boolean = true): ValueType[]
-    {
-        if (this.props.nullable)
-            if (this.NSBoxBaseLayout_Main.current?.isNull())
-                return [];
-
-        this.last_value = [];
-        for (let index = 0; index < this.state.items.length; index++)
-        {
-            const exists = this.state.items[index];
-            if (exists)
-            {
-                let item = this.Item_Refs[index].current;
-                if (item)
-                {
-                    try
-                    {
-                        let empty_value = this.props.getValue(item, false) as ValueType | null;
-                        if (!this.props.isEmpty(item, empty_value))
-                        {
-                            let value = this.props.getValue(item, checkError) as ValueType | null;
-                            if (value != null)
-                                this.last_value.push(value);
-                        }
-                    } catch (error)
-                    {
-                        if (this.props.ignoreItemsHavingError !== true)
-                            throw error;
-                    }
-                }
-            }
-        }
-        return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.last_value) ?? [];
-    }
-    setValue(value: ValueType[], callback?: () => void): void
-    {
-        if (this.props.nullable)
-            this.NSBoxBaseLayout_Main.current?.setNull(false);
-
-        this.Item_Refs = [];
-        value.forEach(() =>
-        {
-            this.addItem(false);
-        })
-        let items = value.map(() => true);
-        this.setState({ items }, () =>
-        {
-            this.props.onItemChanged?.(this);
-            value.forEach((value, index) =>
-            {
-                let item = this.Item_Refs[index].current;
-                if (item)
-                    this.props.setValue(item, index, value);
-            });
-            this.onChange();
-            callback?.();
-        });
-    }
-    setDisabled(disabled: boolean): void
-    {
-        this.NSBoxBaseLayout_Main.current?.setDisabled(disabled);
-    }
-    override componentDidMount()
-    {
-        let min = this.props.min ?? 1;
-        for (let i = 0; i < min; i++)
-            this.addItem();
-
-        this.props.onExternalAddRef?.(() => this.addItem());
-    }
-    override render()
-    {
-        let menu = safeMenuMenuItem(this.props, () => { });
-
-        let LIndex = -1;
-
-        return (
-            <NSBoxBaseLayout
-                ref={this.NSBoxBaseLayout_Main}
-                {...this.props}
-                menu={menu}
-
-                getValue={() =>
-                {
-                    // TODO: Need to return correct value as a string
-                    return null;
-                }}
-            >
-                {
-                    this.Item_Refs.map((ref, GIndex) =>
-                    {
-                        if (this.state.items[GIndex])
-                            LIndex++;
-                        let visible = this.state.items[GIndex];
-                        let props = { ...this.props };
-                        props.style = { ...props.style };
-                        if (!visible)
-                            props.style.display = "none";
-
-                        let onDelete = undefined;
-                        if (this.canDelete(GIndex))
-                            onDelete = this.delItem;
-
-                        let item = this.props.createItem(GIndex, LIndex, ref, this.onChange, onDelete);
-
-                        if (visible && LIndex !== 0)
-                            return (
-                                <div key={GIndex} style={{ width: "100%", ...props.style }}>
-                                    {!this.props.hideSpaces &&
-                                        <>
-                                            <NSSpace size={NSSpaceSizeType.MICRO} />
-                                            <NSLine />
-                                            <NSSpace size={NSSpaceSizeType.MICRO} />
-                                        </>
-                                    }
-                                    {item}
-                                </div>
-                            )
-
-                        return (
-                            <div key={GIndex} style={{ width: "100%", ...props.style }}>
-                                {item}
-                            </div>
-                        )
-                    })
-                }
-            </NSBoxBaseLayout>
-        );
-    }
+import { Component, createRef, ReactNode } from 'react';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import { Validator } from '../Validator';
+import { INSBox } from './INSBox';
+import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from './NSBoxBaseLayout';
+import { NSLine } from './NSLine';
+import { safeMenuMenuItem } from './NSMenuButton';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+
+export interface NSRepeaterProps<ItemType, ValueType> extends IBaseComponentProps, INSBoxBaseLayoutProps<ItemType, ValueType>
+{
+    createItem: (gIndex: number, lIndex: number, ref: React.RefObject<ItemType>, onChange: () => void, onDelete: undefined | ((lIndex: number) => void)) => ReactNode;
+    getValue: (item: ItemType, checkError: boolean) => ValueType | null | Promise<ValueType | null>;
+    setValue: (item: ItemType, index: number, value: ValueType | null, callback?: () => void) => void;
+    isEmpty: (item: ItemType, value: ValueType | null) => boolean;
+    onItemChanged?: (repeater: NSRepeater<ItemType, ValueType>) => void;
+    onValuesChanged?: (repeater: NSRepeater<ItemType, ValueType>) => void;
+    required: boolean;
+    min?: number;
+    max?: number;
+    onExternalAddRef?: (add: () => void) => void;
+    ignoreItemsHavingError?: boolean;
+    hideSpaces?: boolean;
+}
+
+export interface NSRepeaterState
+{
+    items: boolean[];
+}
+
+export class NSRepeater<ItemType, ValueType> extends Component<NSRepeaterProps<ItemType, ValueType>, NSRepeaterState> implements INSBox
+{
+    NSBoxBaseLayout_Main = createRef<NSBoxBaseLayout>();
+    private Item_Refs: React.RefObject<ItemType>[] = [];
+    private last_value: ValueType[] = [];
+    constructor(props: NSRepeaterProps<ItemType, ValueType>)
+    {
+        super(props);
+        this.state = { items: [] };
+        this.getCount = this.getCount.bind(this);
+        this.canDelete = this.canDelete.bind(this);
+        this.getGIndex = this.getGIndex.bind(this);
+        this.getIndex = this.getIndex.bind(this);
+        this.addItem = this.addItem.bind(this);
+        this.delItem = this.delItem.bind(this);
+        this.onChange = this.onChange.bind(this);
+        this.checkForNew = this.checkForNew.bind(this);
+
+        this.isEmpty = this.isEmpty.bind(this);
+        this.getError = this.getError.bind(this);
+        this.getValue = this.getValue.bind(this);
+        this.setValue = this.setValue.bind(this);
+    }
+    private getCount(): number
+    {
+        return this.state.items.filter(x => x).length;
+    }
+    private canDelete(gIndex: number)
+    {
+        if (this.Item_Refs.length > 0)
+        {
+            let count = this.getCount();
+            if (count <= (this.props.min ?? 1))
+                return false;
+            if (count === this.props.max)
+                return true;
+            if (!this.props.onExternalAddRef && gIndex === this.state.items.length - 1)
+                return false;
+            return true
+        }
+        return false;
+    }
+    private getGIndex(index: number): number
+    {
+        if (this.state.items.length === 0)
+            return 0;
+        for (let i = 0; i < this.state.items.length; i++)
+        {
+            if (this.state.items[i])
+            {
+                if (index === 0)
+                    return i;
+                index--;
+            }
+        }
+        return this.state.items.length - 1;
+    }
+    private getIndex(gindex: number): number
+    {
+        if (gindex >= this.state.items.length)
+            throw new Error("GIndex out of bound: " + gindex);
+        let ans = -1;
+        for (let i = 0; i <= gindex; i++)
+            if (this.state.items[i])
+                ans++;
+        return ans;
+    }
+    private addItem(state: boolean = true)
+    {
+        if (!this.props.max || this.getCount() < this.props.max)
+        {
+            this.Item_Refs.push(createRef<ItemType>());
+            if (state)
+            {
+                let items = this.state.items;
+                items.push(true);
+                this.setState({ items }, () =>
+                {
+                    this.props.onItemChanged?.(this);
+                });
+            }
+        }
+    }
+    private delItem(lIndex: number)
+    {
+        let gindex = this.getGIndex(lIndex);
+        if (this.canDelete(gindex))
+        {
+            let items = this.state.items;
+            items[gindex] = false;
+            this.setState({ items }, () =>
+            {
+                this.props.onItemChanged?.(this);
+                this.onChange();
+            });
+        }
+    }
+    private onChange()
+    {
+        this.props.onValuesChanged?.(this);
+        if (!this.props.onExternalAddRef)
+            this.checkForNew();
+    }
+    private async checkForNew()
+    {
+        let length = this.state.items.filter(x => x).length;
+        if (length === 0)
+            this.addItem();
+        else
+        {
+            let last = this.Item_Refs.length - 1;
+            while (!this.state.items[last])
+                last--;
+            let item = this.Item_Refs[last].current;
+            if (item)
+            {
+                let value = await this.props.getValue(item, false)
+                if (!this.props.isEmpty(item, value))
+                {
+                    this.addItem();
+                }
+            }
+        }
+    }
+    isEmpty(): boolean
+    {
+        return true;
+    }
+    getError(): string | null
+    {
+        return (
+            Validator.getErrorArray(this.props.title, this.last_value, this.props.required, this.props.min, this.props.max)
+        );
+    }
+    // todo getValueAsync and getValue are using same logic. Repeatitive code must be removed.
+    async getValueAsync(checkError: boolean = true): Promise<ValueType[]>
+    {
+        if (this.props.nullable)
+            if (this.NSBoxBaseLayout_Main.current?.isNull())
+                return [];
+
+        this.last_value = [];
+        for (let index = 0; index < this.state.items.length; index++)
+        {
+            const exists = this.state.items[index];
+            if (exists)
+            {
+                let item = this.Item_Refs[index].current;
+                if (item)
+                {
+                    try
+                    {
+                        let empty_value = await this.props.getValue(item, false);
+                        if (!this.props.isEmpty(item, empty_value))
+                        {
+                            let value = await this.props.getValue(item, checkError);
+                            if (value != null)
+                                this.last_value.push(value);
+                        }
+                    } catch (error)
+                    {
+                        if (this.props.ignoreItemsHavingError !== true)
+                            throw error;
+                    }
+                }
+            }
+        }
+        return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.last_value) ?? [];
+    }
+    getValue(checkError: boolean = true): ValueType[]
+    {
+        if (this.props.nullable)
+            if (this.NSBoxBaseLayout_Main.current?.isNull())
+                return [];
+
+        this.last_value = [];
+        for (let index = 0; index < this.state.items.length; index++)
+        {
+            const exists = this.state.items[index];
+            if (exists)
+            {
+                let item = this.Item_Refs[index].current;
+                if (item)
+                {
+                    try
+                    {
+                        let empty_value = this.props.getValue(item, false) as ValueType | null;
+                        if (!this.props.isEmpty(item, empty_value))
+                        {
+                            let value = this.props.getValue(item, checkError) as ValueType | null;
+                            if (value != null)
+                                this.last_value.push(value);
+                        }
+                    } catch (error)
+                    {
+                        if (this.props.ignoreItemsHavingError !== true)
+                            throw error;
+                    }
+                }
+            }
+        }
+        return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.last_value) ?? [];
+    }
+    setValue(value: ValueType[], callback?: () => void): void
+    {
+        if (this.props.nullable)
+            this.NSBoxBaseLayout_Main.current?.setNull(false);
+
+        this.Item_Refs = [];
+        value.forEach(() =>
+        {
+            this.addItem(false);
+        })
+        let items = value.map(() => true);
+        this.setState({ items }, () =>
+        {
+            this.props.onItemChanged?.(this);
+            value.forEach((value, index) =>
+            {
+                let item = this.Item_Refs[index].current;
+                if (item)
+                    this.props.setValue(item, index, value);
+            });
+            this.onChange();
+            callback?.();
+        });
+    }
+    setDisabled(disabled: boolean): void
+    {
+        this.NSBoxBaseLayout_Main.current?.setDisabled(disabled);
+    }
+    override componentDidMount()
+    {
+        let min = this.props.min ?? 1;
+        for (let i = 0; i < min; i++)
+            this.addItem();
+
+        this.props.onExternalAddRef?.(() => this.addItem());
+    }
+    override render()
+    {
+        let menu = safeMenuMenuItem(this.props, () => { });
+
+        let LIndex = -1;
+
+        return (
+            <NSBoxBaseLayout
+                ref={this.NSBoxBaseLayout_Main}
+                {...this.props}
+                menu={menu}
+
+                getValue={() =>
+                {
+                    // TODO: Need to return correct value as a string
+                    return null;
+                }}
+            >
+                {
+                    this.Item_Refs.map((ref, GIndex) =>
+                    {
+                        if (this.state.items[GIndex])
+                            LIndex++;
+                        let visible = this.state.items[GIndex];
+                        let props = { ...this.props };
+                        props.style = { ...props.style };
+                        if (!visible)
+                            props.style.display = "none";
+
+                        let onDelete = undefined;
+                        if (this.canDelete(GIndex))
+                            onDelete = this.delItem;
+
+                        let item = this.props.createItem(GIndex, LIndex, ref, this.onChange, onDelete);
+
+                        if (visible && LIndex !== 0)
+                            return (
+                                <div key={GIndex} style={{ width: "100%", ...props.style }}>
+                                    {!this.props.hideSpaces &&
+                                        <>
+                                            <NSSpace size={NSSpaceSizeType.MICRO} />
+                                            <NSLine />
+                                            <NSSpace size={NSSpaceSizeType.MICRO} />
+                                        </>
+                                    }
+                                    {item}
+                                </div>
+                            )
+
+                        return (
+                            <div key={GIndex} style={{ width: "100%", ...props.style }}>
+                                {item}
+                            </div>
+                        )
+                    })
+                }
+            </NSBoxBaseLayout>
+        );
+    }
 }