namirasoft-site-react 1.4.552 → 1.4.554

package/src/components/NSBoxBaseLayout.tsx

@@ -1,164 +1,164 @@
-"use client";
-import React, { createRef, RefObject } from "react";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { IValidationProps } from "../props/IValidationProps";
-import { IValidationStringProps } from "../props/IValidationStringProps";
-import StylesNSBox from "./NSBox.module.css";
-import { NSInfoProps } from "./NSInfo";
-import { NSLabelErrorNotifier } from "./NSLabelErrorNotifier";
-import { NSLoading } from "./NSLoading";
-import { NSMenuButton, NSMenuButtonMenuProps, NSMenuButtonProps } from "./NSMenuButton";
-
-export interface INSBoxBaseLayoutProps<Box, Data> 
-{
-    title: string;
-    info?: NSInfoProps;
-    placeholder?: string;
-    defaultValue?: Data;
-    hideHeader?: boolean;
-    onChanged?: (e: Box) => void;
-    onClicked?: (e: Box) => void;
-    onEnterPressed?: () => void;
-    menu?: NSMenuButtonMenuProps;
-    disabled?: boolean;
-    loading?: boolean;
-    nullable?: boolean;
-    nullableDefaultValue?: boolean;
-    onNullableChanged?: () => void;
-}
-
-export interface NSBoxBaseLayoutProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, NSMenuButtonProps
-{
-    title: string;
-    hideHeader?: boolean;
-    children: React.ReactNode;
-    getValue: () => string | null;
-    onEnterPressed?: () => void;
-    disabled?: boolean;
-    loading?: boolean;
-    nullable?: boolean;
-    nullableDefaultValue?: boolean;
-    onNullableChanged?: () => void;
-}
-
-export interface NSBoxBaseLayoutState
-{
-    error?: string;
-    disabled: boolean;
-    null: boolean;
-}
-
-export class NSBoxBaseLayout extends React.Component<NSBoxBaseLayoutProps, NSBoxBaseLayoutState>
-{
-    NullableCheckBox_Ref = createRef<HTMLInputElement>();
-    static checkGetValue<T>(box: { NSBoxBaseLayout_Main: RefObject<NSBoxBaseLayout>, getError: () => string | null }, checkError: boolean, handler: () => T | null): T | null
-    {
-        return box.NSBoxBaseLayout_Main.current?._onGetValue(checkError, box.getError, handler) ?? null;
-    }
-    constructor(props: NSBoxBaseLayoutProps)
-    {
-        super(props);
-        this.state = {
-            error: "",
-            null: this.props.nullableDefaultValue ?? false,
-            disabled: this.props.disabled ?? false
-        };
-
-        this._onGetValue = this._onGetValue.bind(this);
-    }
-    private _onGetValue<T>(checkError: boolean, getError: () => string | null, handler: () => T): T
-    {
-        if (checkError)
-        {
-            let error = getError();
-            if (error)
-            {
-                this.setState({ error });
-                throw new Error(error);
-            }
-        }
-        return handler();
-    }
-    isNull(): boolean
-    {
-        return this.state.null;
-    }
-    setNull(checked: boolean, callback?: () => void): void
-    {
-        this.setState({ null: checked }, () => callback?.());
-    }
-    setDisabled(disabled: boolean): void
-    {
-        this.setState(() => ({ disabled }));
-    }
-    override componentDidUpdate(prevProps: NSBoxBaseLayoutProps): void
-    {
-        if (prevProps.disabled !== this.props.disabled)
-            this.setState({ disabled: this.props.disabled ?? false });
-    }
-    override render()
-    {
-        let value = this.props.getValue() ?? "";
-        return (
-            <div
-                id={this.props.id}
-                className={`${StylesNSBox.ns_box_input_parent} ${this.props.classList?.join(" ") ?? ""}`}
-                style={this.props.style}
-                onKeyUp={e =>
-                {
-                    if (e.key === "Enter")
-                        this.props.onEnterPressed?.();
-                }}
-            >
-                {
-                    !this.props.hideHeader && <div className={`${StylesNSBox.ns_box_input_bar}`}>
-                        <span className={StylesNSBox.ns_box_input_title}>
-                            {this.props.required && <span style={{ color: "red" }}>*</span>} {this.props.title}
-                        </span>
-                        <NSMenuButton info={this.props.info} menu={this.props.menu} />
-                    </div>
-                }
-                {
-                    this.state.null &&
-                    <div className={StylesNSBox.ns_box_disabled} />
-                }
-                {
-                    !this.state.null && this.props.loading &&
-                    <div className={StylesNSBox.ns_box_disabled}>
-                        <NSLoading small hideDescription hideTitle hideContainer />
-                    </div>
-                }
-                {
-                    !this.state.null && !this.props.loading && this.state.disabled &&
-                    <div className={StylesNSBox.ns_box_disabled}>
-                        {value}
-                    </div>
-                }
-                {
-                    !this.state.null && !this.props.loading && !this.state.disabled &&
-                    this.props.children
-                }
-                {
-                    this.props.nullable &&
-                    <label className={StylesNSBox.ns_nullable_label}>
-                        <input
-                            ref={this.NullableCheckBox_Ref}
-                            type="checkbox"
-                            className={StylesNSBox.ns_nullable_checkbox}
-                            checked={this.state.null}
-                            onChange={e =>
-                            {
-                                this.setNull(e.target.checked, () =>
-                                {
-                                    this.props.onNullableChanged?.();
-                                });
-                            }}
-                        />
-                        <span>Set as null</span>
-                    </label>
-                }
-                <NSLabelErrorNotifier error={this.state.error} clearError={() => this.setState({ error: undefined })} />
-            </div>
-        );
-    }
+"use client";
+import React, { createRef, RefObject } from "react";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IValidationProps } from "../props/IValidationProps";
+import { IValidationStringProps } from "../props/IValidationStringProps";
+import StylesNSBox from "./NSBox.module.css";
+import { NSInfoProps } from "./NSInfo";
+import { NSLabelErrorNotifier } from "./NSLabelErrorNotifier";
+import { NSLoading } from "./NSLoading";
+import { NSMenuButton, NSMenuButtonMenuProps, NSMenuButtonProps } from "./NSMenuButton";
+
+export interface INSBoxBaseLayoutProps<Box, Data> 
+{
+    title: string;
+    info?: NSInfoProps;
+    placeholder?: string;
+    defaultValue?: Data;
+    hideHeader?: boolean;
+    onChanged?: (e: Box) => void;
+    onClicked?: (e: Box) => void;
+    onEnterPressed?: () => void;
+    menu?: NSMenuButtonMenuProps;
+    disabled?: boolean;
+    loading?: boolean;
+    nullable?: boolean;
+    nullableDefaultValue?: boolean;
+    onNullableChanged?: () => void;
+}
+
+export interface NSBoxBaseLayoutProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, NSMenuButtonProps
+{
+    title: string;
+    hideHeader?: boolean;
+    children: React.ReactNode;
+    getValue: () => string | null;
+    onEnterPressed?: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+    nullable?: boolean;
+    nullableDefaultValue?: boolean;
+    onNullableChanged?: () => void;
+}
+
+export interface NSBoxBaseLayoutState
+{
+    error?: string;
+    disabled: boolean;
+    null: boolean;
+}
+
+export class NSBoxBaseLayout extends React.Component<NSBoxBaseLayoutProps, NSBoxBaseLayoutState>
+{
+    NullableCheckBox_Ref = createRef<HTMLInputElement>();
+    static checkGetValue<T>(box: { NSBoxBaseLayout_Main: RefObject<NSBoxBaseLayout>, getError: () => string | null }, checkError: boolean, handler: () => T | null): T | null
+    {
+        return box.NSBoxBaseLayout_Main.current?._onGetValue(checkError, box.getError, handler) ?? null;
+    }
+    constructor(props: NSBoxBaseLayoutProps)
+    {
+        super(props);
+        this.state = {
+            error: "",
+            null: this.props.nullableDefaultValue ?? false,
+            disabled: this.props.disabled ?? false
+        };
+
+        this._onGetValue = this._onGetValue.bind(this);
+    }
+    private _onGetValue<T>(checkError: boolean, getError: () => string | null, handler: () => T): T
+    {
+        if (checkError)
+        {
+            let error = getError();
+            if (error)
+            {
+                this.setState({ error });
+                throw new Error(error);
+            }
+        }
+        return handler();
+    }
+    isNull(): boolean
+    {
+        return this.state.null;
+    }
+    setNull(checked: boolean, callback?: () => void): void
+    {
+        this.setState({ null: checked }, () => callback?.());
+    }
+    setDisabled(disabled: boolean): void
+    {
+        this.setState(() => ({ disabled }));
+    }
+    override componentDidUpdate(prevProps: NSBoxBaseLayoutProps): void
+    {
+        if (prevProps.disabled !== this.props.disabled)
+            this.setState({ disabled: this.props.disabled ?? false });
+    }
+    override render()
+    {
+        let value = this.props.getValue() ?? "";
+        return (
+            <div
+                id={this.props.id}
+                className={`${StylesNSBox.ns_box_input_parent} ${this.props.classList?.join(" ") ?? ""}`}
+                style={this.props.style}
+                onKeyUp={e =>
+                {
+                    if (e.key === "Enter")
+                        this.props.onEnterPressed?.();
+                }}
+            >
+                {
+                    !this.props.hideHeader && <div className={`${StylesNSBox.ns_box_input_bar}`}>
+                        <span className={StylesNSBox.ns_box_input_title}>
+                            {this.props.required && <span style={{ color: "red" }}>*</span>} {this.props.title}
+                        </span>
+                        <NSMenuButton info={this.props.info} menu={this.props.menu} />
+                    </div>
+                }
+                {
+                    this.state.null &&
+                    <div className={StylesNSBox.ns_box_disabled} />
+                }
+                {
+                    !this.state.null && this.props.loading &&
+                    <div className={StylesNSBox.ns_box_disabled}>
+                        <NSLoading small hideDescription hideTitle hideContainer />
+                    </div>
+                }
+                {
+                    !this.state.null && !this.props.loading && this.state.disabled &&
+                    <div className={StylesNSBox.ns_box_disabled}>
+                        {value}
+                    </div>
+                }
+                {
+                    !this.state.null && !this.props.loading && !this.state.disabled &&
+                    this.props.children
+                }
+                {
+                    this.props.nullable &&
+                    <label className={StylesNSBox.ns_nullable_label}>
+                        <input
+                            ref={this.NullableCheckBox_Ref}
+                            type="checkbox"
+                            className={StylesNSBox.ns_nullable_checkbox}
+                            checked={this.state.null}
+                            onChange={e =>
+                            {
+                                this.setNull(e.target.checked, () =>
+                                {
+                                    this.props.onNullableChanged?.();
+                                });
+                            }}
+                        />
+                        <span>Set as null</span>
+                    </label>
+                }
+                <NSLabelErrorNotifier error={this.state.error} clearError={() => this.setState({ error: undefined })} />
+            </div>
+        );
+    }
 }

package/src/components/NSBoxBaseLayoutRecursive.tsx

@@ -1,60 +1,60 @@
-"use client";
-import React, { createRef, RefObject } from "react";
-import { NSBoxBaseLayout, NSBoxBaseLayoutProps } from "./NSBoxBaseLayout";
-import { NSColumn } from "./NSColumn";
-
-export interface NSBoxBaseLayoutRecursiveProps extends NSBoxBaseLayoutProps
-{
-	depth: number;
-}
-
-export class NSBoxBaseLayoutRecursive extends React.Component<NSBoxBaseLayoutRecursiveProps>
-{
-	static checkGetValue<T>(box: { NSBoxBaseLayoutRecursive_Main: RefObject<NSBoxBaseLayoutRecursive>, getError: () => string | null }, checkError: boolean, handler: () => T | null): T | null
-	{
-		if (box.NSBoxBaseLayoutRecursive_Main.current?.NSBoxBaseLayout_Main.current)
-			return NSBoxBaseLayout.checkGetValue({
-				NSBoxBaseLayout_Main: box.NSBoxBaseLayoutRecursive_Main.current?.NSBoxBaseLayout_Main,
-				getError: box.getError,
-			}, checkError, handler);
-		return null;
-	}
-	NSBoxBaseLayout_Main = createRef<NSBoxBaseLayout>();
-    
-    setDisabled(disabled: boolean): void
-    {
-        this.NSBoxBaseLayout_Main.current?.setDisabled(disabled);
-    }
-	override render()
-	{
-		let white = "#ffffff";
-		let yellow = "#ffffdd";
-		// let pink = "#ffddff";
-		// let red = "#ffdddd";
-		let cyan = "#ddffff";
-		let green = "#ddffdd";
-		let gray = "#dddddd";
-		//let magenta = "#ddddff";
-		let colors = [white, green, yellow, cyan, gray];
-		return (
-			<NSBoxBaseLayout
-				ref={this.NSBoxBaseLayout_Main}
-				{...this.props}
-			>
-				<NSColumn
-					style={{
-						borderTop: "1px solid black",
-						borderLeft: "1px solid black",
-						borderRadius: "8px",
-						paddingLeft: "14px",
-						paddingBottom: "8px",
-						paddingRight: "1px",
-						backgroundColor: colors[this.props.depth % colors.length]
-					}}
-				>
-					{this.props.children}
-				</NSColumn>
-			</NSBoxBaseLayout>
-		);
-	}
+"use client";
+import React, { createRef, RefObject } from "react";
+import { NSBoxBaseLayout, NSBoxBaseLayoutProps } from "./NSBoxBaseLayout";
+import { NSColumn } from "./NSColumn";
+
+export interface NSBoxBaseLayoutRecursiveProps extends NSBoxBaseLayoutProps
+{
+	depth: number;
+}
+
+export class NSBoxBaseLayoutRecursive extends React.Component<NSBoxBaseLayoutRecursiveProps>
+{
+	static checkGetValue<T>(box: { NSBoxBaseLayoutRecursive_Main: RefObject<NSBoxBaseLayoutRecursive>, getError: () => string | null }, checkError: boolean, handler: () => T | null): T | null
+	{
+		if (box.NSBoxBaseLayoutRecursive_Main.current?.NSBoxBaseLayout_Main.current)
+			return NSBoxBaseLayout.checkGetValue({
+				NSBoxBaseLayout_Main: box.NSBoxBaseLayoutRecursive_Main.current?.NSBoxBaseLayout_Main,
+				getError: box.getError,
+			}, checkError, handler);
+		return null;
+	}
+	NSBoxBaseLayout_Main = createRef<NSBoxBaseLayout>();
+    
+    setDisabled(disabled: boolean): void
+    {
+        this.NSBoxBaseLayout_Main.current?.setDisabled(disabled);
+    }
+	override render()
+	{
+		let white = "#ffffff";
+		let yellow = "#ffffdd";
+		// let pink = "#ffddff";
+		// let red = "#ffdddd";
+		let cyan = "#ddffff";
+		let green = "#ddffdd";
+		let gray = "#dddddd";
+		//let magenta = "#ddddff";
+		let colors = [white, green, yellow, cyan, gray];
+		return (
+			<NSBoxBaseLayout
+				ref={this.NSBoxBaseLayout_Main}
+				{...this.props}
+			>
+				<NSColumn
+					style={{
+						borderTop: "1px solid black",
+						borderLeft: "1px solid black",
+						borderRadius: "8px",
+						paddingLeft: "14px",
+						paddingBottom: "8px",
+						paddingRight: "1px",
+						backgroundColor: colors[this.props.depth % colors.length]
+					}}
+				>
+					{this.props.children}
+				</NSColumn>
+			</NSBoxBaseLayout>
+		);
+	}
 }

package/src/components/NSBoxBoolean.module.css

@@ -1,74 +1,74 @@
-.ns_box_boolean_label {
-	width: 100%;
-	height: max-content;
-	padding: 10px 12px 10px 12px;
-	background-color: #fff;
-	color: #141B5C;
-	border-radius: 8px;
-	border: 1px solid rgba(0, 0, 0, 1) !important;
-	font-size: 16px;
-	font-weight: 400;
-	font-family: inherit;
-	cursor: pointer;
-	position: relative;
-	display: flex;
-	flex-direction: row;
-	justify-content: left;
-	align-items: center;
-	gap: 4px;
-}
-
-.ns_box_boolean_input {
-	width: 24px;
-	height: 24px;
-	cursor: pointer;
-}
-
-.ns_box_boolean_input:focus-visible {
-	border-color: rgba(0, 0, 0, 1) !important;
-	outline: solid 1px #4096ff !important;
-}
-
-.ns_box_boolean_input:checked {
-	accent-color: #141B5C;
-}
-
-.ns_box_boolean_indeterminate:indeterminate {
-	border: 1px solid rgba(255, 148, 50, 1);
-}
-
-.ns_box_boolean_indeterminate {
-	position: relative;
-}
-
-.ns_box_boolean_indeterminate::before {
-	content: "";
-	display: block;
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	top: 0;
-	right: 0;
-	border: 5px solid #141b5c;
-	color: #141b5c;
-	background: #fffbff;
-}
-
-.ns_box_boolean_indeterminate::after {
-	content: "";
-	display: block;
-	position: absolute;
-	width: 18px;
-	height: 18px;
-	top: 3px;
-	left: 3px;
-	border: 3px solid #fffbff;
-	color: #141b5c;
-	background: #141b5c;
-}
-
-@media only screen and (min-width: 480px) {
-	.ns_box_boolean_label {
-		height: 48px;
-	}
+.ns_box_boolean_label {
+	width: 100%;
+	height: max-content;
+	padding: 10px 12px 10px 12px;
+	background-color: #fff;
+	color: #141B5C;
+	border-radius: 8px;
+	border: 1px solid rgba(0, 0, 0, 1) !important;
+	font-size: 16px;
+	font-weight: 400;
+	font-family: inherit;
+	cursor: pointer;
+	position: relative;
+	display: flex;
+	flex-direction: row;
+	justify-content: left;
+	align-items: center;
+	gap: 4px;
+}
+
+.ns_box_boolean_input {
+	width: 24px;
+	height: 24px;
+	cursor: pointer;
+}
+
+.ns_box_boolean_input:focus-visible {
+	border-color: rgba(0, 0, 0, 1) !important;
+	outline: solid 1px #4096ff !important;
+}
+
+.ns_box_boolean_input:checked {
+	accent-color: #141B5C;
+}
+
+.ns_box_boolean_indeterminate:indeterminate {
+	border: 1px solid rgba(255, 148, 50, 1);
+}
+
+.ns_box_boolean_indeterminate {
+	position: relative;
+}
+
+.ns_box_boolean_indeterminate::before {
+	content: "";
+	display: block;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	right: 0;
+	border: 5px solid #141b5c;
+	color: #141b5c;
+	background: #fffbff;
+}
+
+.ns_box_boolean_indeterminate::after {
+	content: "";
+	display: block;
+	position: absolute;
+	width: 18px;
+	height: 18px;
+	top: 3px;
+	left: 3px;
+	border: 3px solid #fffbff;
+	color: #141b5c;
+	background: #141b5c;
+}
+
+@media only screen and (min-width: 480px) {
+	.ns_box_boolean_label {
+		height: 48px;
+	}
 }