namirasoft-site-react 1.5.16 → 1.5.18

package/src/components/NSReorderDialog.tsx

@@ -1,185 +1,185 @@
-import { Component, DragEvent } from "react";
-import { NSBox } from "./NSBox";
-import { NSButton } from "./NSButton";
-import { NSButtonBlue } from "./NSButtonBlue";
-import { NSColumn } from "./NSColumn";
-import { NSDialog } from "./NSDialog";
-import Styles from "./NSReorderDialog.module.css";
-import { TableColumnInfo } from "./NSTable";
-import { NSTitle } from "./NSTitle";
-
-interface ColumnItem
-{
-    key: string;
-    text: string;
-    checked: boolean;
-}
-
-interface NSReorderDialogProps
-{
-    visibleColumnKeys: string[];
-    getColumns: () => TableColumnInfo[];
-    onCancel: () => void;
-    onApply: (orderedKeys: string[]) => void;
-}
-
-interface NSReorderDialogState
-{
-    columns: ColumnItem[];
-    dragFromIndex: number | null;
-    dragOverIndex: number | null;
-}
-
-export class NSReorderDialog extends Component<NSReorderDialogProps, NSReorderDialogState>
-{
-    constructor(props: NSReorderDialogProps)
-    {
-        super(props);
-        this.state = {
-            columns: this.buildColumnItems(props),
-            dragFromIndex: null,
-            dragOverIndex: null
-        };
-    }
-
-    private buildColumnItems(props: NSReorderDialogProps): ColumnItem[]
-    {
-        const allColumns = props.getColumns();
-        const visibleKeys = props.visibleColumnKeys;
-
-        if (visibleKeys.length === 0)
-            return allColumns.map(c => ({ key: c.table.name + "." + c.name, text: c.text, checked: !c.defaults?.hidden }));
-
-        const visibleItems: ColumnItem[] = visibleKeys
-            .map(k => allColumns.find(c => c.table.name + "." + c.name === k))
-            .filter(Boolean)
-            .map(c => ({ key: c!.table.name + "." + c!.name, text: c!.text, checked: true }));
-
-        const hiddenItems: ColumnItem[] = allColumns
-            .filter(c => !visibleKeys.includes(c.table.name + "." + c.name))
-            .map(c => ({ key: c.table.name + "." + c.name, text: c.text, checked: false }));
-
-        return [...visibleItems, ...hiddenItems];
-    }
-
-    private getDefaultItems(): ColumnItem[]
-    {
-        return this.props.getColumns().map(c => ({
-            key: c.table.name + "." + c.name,
-            text: c.text,
-            checked: !c.defaults?.hidden
-        }));
-    }
-
-    private isChanged(): boolean
-    {
-        const defaults = this.getDefaultItems();
-        const current = this.state.columns;
-        if (defaults.length !== current.length)
-            return true;
-        return current.some((c, i) => c.key !== defaults[i].key || c.checked !== defaults[i].checked);
-    }
-
-    private handleReset = () => this.setState({ columns: this.getDefaultItems() });
-
-    private onDragStart = (index: number) => this.setState({ dragFromIndex: index });
-
-    private onDragOver = (e: DragEvent, index: number) =>
-    {
-        e.preventDefault();
-        if (this.state.dragOverIndex !== index)
-            this.setState({ dragOverIndex: index });
-    };
-
-    private onDrop = (e: DragEvent, dropIndex: number) =>
-    {
-        e.preventDefault();
-        const { dragFromIndex, columns } = this.state;
-        if (dragFromIndex === null || dragFromIndex === dropIndex)
-        {
-            this.setState({ dragFromIndex: null, dragOverIndex: null });
-            return;
-        }
-        const next = [...columns];
-        const [moved] = next.splice(dragFromIndex, 1);
-        next.splice(dropIndex, 0, moved);
-        this.setState({ columns: next, dragFromIndex: null, dragOverIndex: null });
-    };
-
-    private onDragEnd = () => this.setState({ dragFromIndex: null, dragOverIndex: null });
-
-    private toggleChecked = (key: string) =>
-        this.setState(prev => ({
-            columns: prev.columns.map(c => c.key === key ? { ...c, checked: !c.checked } : c)
-        }));
-
-    private handleApply = () =>
-    {
-        const orderedKeys = this.state.columns.filter(c => c.checked).map(c => c.key);
-        this.props.onApply(orderedKeys);
-    };
-
-    override render()
-    {
-        const { onCancel } = this.props;
-        const { columns, dragFromIndex, dragOverIndex } = this.state;
-
-        return (
-            <NSDialog
-                center_dialog
-                closeButton={{ show: true }}
-                onClose={onCancel}
-                style={{ minWidth: NSBox.width.double }}
-            >
-                <NSColumn classList={["align-items-center"]}>
-                    <NSTitle title="Columns" style={{ marginBottom: 0, fontSize: 24 }} />
-                    <NSColumn classList={["gap-1"]}>
-                        {
-                            columns.map((col, index) =>
-                            {
-                                const isDragging = dragFromIndex === index;
-                                const isDragOver = dragOverIndex === index && !isDragging;
-                                let cls = Styles.column_item;
-                                if (isDragging) cls += " " + Styles.column_item_dragging;
-                                if (isDragOver) cls += " " + Styles.column_item_drag_over;
-                                return (
-                                    <div
-                                        key={col.key}
-                                        draggable
-                                        onDragStart={() => this.onDragStart(index)}
-                                        onDragOver={e => this.onDragOver(e, index)}
-                                        onDrop={e => this.onDrop(e, index)}
-                                        onDragEnd={this.onDragEnd}
-                                        className={cls}
-                                    >
-                                        <span className={Styles.drag_handle}>⠿</span>
-                                        <input
-                                            type="checkbox"
-                                            checked={col.checked}
-                                            onChange={() => this.toggleChecked(col.key)}
-                                            className={Styles.checkbox}
-                                        />
-                                        <span className={Styles.column_label}>{col.text}</span>
-                                    </div>
-                                );
-                            })
-                        }
-                    </NSColumn>
-                    <NSColumn classList={["gap-1 align-items-center"]}>
-                        {
-                            this.isChanged() &&
-                            <NSButton
-                                title="Reset"
-                                onClick={{ action: this.handleReset, showLoading: false }}
-                            />
-                        }
-                        <NSButtonBlue
-                            title="Apply"
-                            onClick={{ action: this.handleApply, showLoading: false }}
-                        />
-                    </NSColumn>
-                </NSColumn>
-            </NSDialog>
-        );
-    }
+import { Component, DragEvent } from "react";
+import { NSBox } from "./NSBox";
+import { NSButton } from "./NSButton";
+import { NSButtonBlue } from "./NSButtonBlue";
+import { NSColumn } from "./NSColumn";
+import { NSDialog } from "./NSDialog";
+import Styles from "./NSReorderDialog.module.css";
+import { TableColumnInfo } from "./NSTable";
+import { NSTitle } from "./NSTitle";
+
+interface ColumnItem
+{
+    key: string;
+    text: string;
+    checked: boolean;
+}
+
+interface NSReorderDialogProps
+{
+    visibleColumnKeys: string[];
+    getColumns: () => TableColumnInfo[];
+    onCancel: () => void;
+    onApply: (orderedKeys: string[]) => void;
+}
+
+interface NSReorderDialogState
+{
+    columns: ColumnItem[];
+    dragFromIndex: number | null;
+    dragOverIndex: number | null;
+}
+
+export class NSReorderDialog extends Component<NSReorderDialogProps, NSReorderDialogState>
+{
+    constructor(props: NSReorderDialogProps)
+    {
+        super(props);
+        this.state = {
+            columns: this.buildColumnItems(props),
+            dragFromIndex: null,
+            dragOverIndex: null
+        };
+    }
+
+    private buildColumnItems(props: NSReorderDialogProps): ColumnItem[]
+    {
+        const allColumns = props.getColumns();
+        const visibleKeys = props.visibleColumnKeys;
+
+        if (visibleKeys.length === 0)
+            return allColumns.map(c => ({ key: c.table.name + "." + c.name, text: c.text, checked: !c.defaults?.hidden }));
+
+        const visibleItems: ColumnItem[] = visibleKeys
+            .map(k => allColumns.find(c => c.table.name + "." + c.name === k))
+            .filter(Boolean)
+            .map(c => ({ key: c!.table.name + "." + c!.name, text: c!.text, checked: true }));
+
+        const hiddenItems: ColumnItem[] = allColumns
+            .filter(c => !visibleKeys.includes(c.table.name + "." + c.name))
+            .map(c => ({ key: c.table.name + "." + c.name, text: c.text, checked: false }));
+
+        return [...visibleItems, ...hiddenItems];
+    }
+
+    private getDefaultItems(): ColumnItem[]
+    {
+        return this.props.getColumns().map(c => ({
+            key: c.table.name + "." + c.name,
+            text: c.text,
+            checked: !c.defaults?.hidden
+        }));
+    }
+
+    private isChanged(): boolean
+    {
+        const defaults = this.getDefaultItems();
+        const current = this.state.columns;
+        if (defaults.length !== current.length)
+            return true;
+        return current.some((c, i) => c.key !== defaults[i].key || c.checked !== defaults[i].checked);
+    }
+
+    private handleReset = () => this.setState({ columns: this.getDefaultItems() });
+
+    private onDragStart = (index: number) => this.setState({ dragFromIndex: index });
+
+    private onDragOver = (e: DragEvent, index: number) =>
+    {
+        e.preventDefault();
+        if (this.state.dragOverIndex !== index)
+            this.setState({ dragOverIndex: index });
+    };
+
+    private onDrop = (e: DragEvent, dropIndex: number) =>
+    {
+        e.preventDefault();
+        const { dragFromIndex, columns } = this.state;
+        if (dragFromIndex === null || dragFromIndex === dropIndex)
+        {
+            this.setState({ dragFromIndex: null, dragOverIndex: null });
+            return;
+        }
+        const next = [...columns];
+        const [moved] = next.splice(dragFromIndex, 1);
+        next.splice(dropIndex, 0, moved);
+        this.setState({ columns: next, dragFromIndex: null, dragOverIndex: null });
+    };
+
+    private onDragEnd = () => this.setState({ dragFromIndex: null, dragOverIndex: null });
+
+    private toggleChecked = (key: string) =>
+        this.setState(prev => ({
+            columns: prev.columns.map(c => c.key === key ? { ...c, checked: !c.checked } : c)
+        }));
+
+    private handleApply = () =>
+    {
+        const orderedKeys = this.state.columns.filter(c => c.checked).map(c => c.key);
+        this.props.onApply(orderedKeys);
+    };
+
+    override render()
+    {
+        const { onCancel } = this.props;
+        const { columns, dragFromIndex, dragOverIndex } = this.state;
+
+        return (
+            <NSDialog
+                center_dialog
+                closeButton={{ show: true }}
+                onClose={onCancel}
+                style={{ minWidth: NSBox.width.double }}
+            >
+                <NSColumn classList={["align-items-center"]}>
+                    <NSTitle title="Columns" style={{ marginBottom: 0, fontSize: 24 }} />
+                    <NSColumn classList={["gap-1"]}>
+                        {
+                            columns.map((col, index) =>
+                            {
+                                const isDragging = dragFromIndex === index;
+                                const isDragOver = dragOverIndex === index && !isDragging;
+                                let cls = Styles.column_item;
+                                if (isDragging) cls += " " + Styles.column_item_dragging;
+                                if (isDragOver) cls += " " + Styles.column_item_drag_over;
+                                return (
+                                    <div
+                                        key={col.key}
+                                        draggable
+                                        onDragStart={() => this.onDragStart(index)}
+                                        onDragOver={e => this.onDragOver(e, index)}
+                                        onDrop={e => this.onDrop(e, index)}
+                                        onDragEnd={this.onDragEnd}
+                                        className={cls}
+                                    >
+                                        <span className={Styles.drag_handle}>⠿</span>
+                                        <input
+                                            type="checkbox"
+                                            checked={col.checked}
+                                            onChange={() => this.toggleChecked(col.key)}
+                                            className={Styles.checkbox}
+                                        />
+                                        <span className={Styles.column_label}>{col.text}</span>
+                                    </div>
+                                );
+                            })
+                        }
+                    </NSColumn>
+                    <NSColumn classList={["gap-1 align-items-center"]}>
+                        {
+                            this.isChanged() &&
+                            <NSButton
+                                title="Reset"
+                                onClick={{ action: this.handleReset, showLoading: false }}
+                            />
+                        }
+                        <NSButtonBlue
+                            title="Apply"
+                            onClick={{ action: this.handleApply, showLoading: false }}
+                        />
+                    </NSColumn>
+                </NSColumn>
+            </NSDialog>
+        );
+    }
 }