namirasoft-site-react 1.4.164 → 1.4.166

package/src/components/NSBoxBaseLayout.tsx

@@ -1,83 +1,84 @@
-"use client";
-import React, { RefObject } from "react";
-import StylesNSBox from "./NSBox.module.css";
-import { IValidationProps } from "../props/IValidationProps";
-import { IValidationStringProps } from "../props/IValidationStringProps";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { NSLabelErrorNotifier } from "./NSLabelErrorNotifier";
-import { NSMenuButton, NSMenuButtonMenuProps, NSMenuButtonProps } from "./NSMenuButton";
-
-export interface INSBoxBaseLayoutProps<Data, Box> 
-{
-	title: string;
-	placeholder?: string;
-	defaultValue?: Data;
-	hideHeader?: boolean;
-	onChanged?: (e: Box, callback?: () => void) => void;
-	onClicked?: (e: Box) => void;
-	menu?: NSMenuButtonMenuProps;
-}
-
-export interface NSBoxBaseLayoutProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, NSMenuButtonProps
-{
-	title: string;
-	hideHeader?: boolean;
-	children: React.ReactNode;
-}
-
-export interface NSBoxBaseLayoutState
-{
-	error?: string;
-}
-
-export class NSBoxBaseLayout extends React.Component<NSBoxBaseLayoutProps, NSBoxBaseLayoutState>
-{
-	static checkGetValue<T>(box: {
-		NSBoxBaseLayout_Main: RefObject<NSBoxBaseLayout>,
-		getError: () => string | null
-	}, checkError: boolean, handler: () => T): T
-	{
-		return (box.NSBoxBaseLayout_Main.current as NSBoxBaseLayout)._onGetValue(checkError, box.getError, handler);
-	}
-	constructor(props: NSBoxBaseLayoutProps)
-	{
-		super(props);
-		this.state = { error: "" };
-		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();
-	}
-	override render()
-	{
-		let id = undefined;
-		if (this.props.id)
-			id = this.props.id + "_parent";
-		return (
-			<>
-				<div id={id} className={`${StylesNSBox.ns_box_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style ?? {}}>
-					{
-						!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 getValue={this.props.getValue} setValue={this.props.setValue} menu={this.props.menu} />
-						</div>
-					}
-					{this.props.children}
-					<NSLabelErrorNotifier error={this.state.error} clearError={() => this.setState({ error: undefined })} />
-				</div>
-			</>
-		);
-	}
+"use client";
+import React, { RefObject } from "react";
+import StylesNSBox from "./NSBox.module.css";
+import { IValidationProps } from "../props/IValidationProps";
+import { IValidationStringProps } from "../props/IValidationStringProps";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { NSLabelErrorNotifier } from "./NSLabelErrorNotifier";
+import { NSMenuButton, NSMenuButtonMenuProps, NSMenuButtonProps } from "./NSMenuButton";
+
+export interface INSBoxBaseLayoutProps<Data, Box> 
+{
+	title: string;
+	placeholder?: string;
+	defaultValue?: Data;
+	hideHeader?: boolean;
+	onChanged?: (e: Box, callback?: () => void) => void;
+	onClicked?: (e: Box) => void;
+	menu?: NSMenuButtonMenuProps;
+	onDelete?: () => void;
+}
+
+export interface NSBoxBaseLayoutProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, NSMenuButtonProps
+{
+	title: string;
+	hideHeader?: boolean;
+	children: React.ReactNode;
+}
+
+export interface NSBoxBaseLayoutState
+{
+	error?: string;
+}
+
+export class NSBoxBaseLayout extends React.Component<NSBoxBaseLayoutProps, NSBoxBaseLayoutState>
+{
+	static checkGetValue<T>(box: {
+		NSBoxBaseLayout_Main: RefObject<NSBoxBaseLayout>,
+		getError: () => string | null
+	}, checkError: boolean, handler: () => T): T
+	{
+		return (box.NSBoxBaseLayout_Main.current as NSBoxBaseLayout)._onGetValue(checkError, box.getError, handler);
+	}
+	constructor(props: NSBoxBaseLayoutProps)
+	{
+		super(props);
+		this.state = { error: "" };
+		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();
+	}
+	override render()
+	{
+		let id = undefined;
+		if (this.props.id)
+			id = this.props.id + "_parent";
+		return (
+			<>
+				<div id={id} className={`${StylesNSBox.ns_box_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style ?? {}}>
+					{
+						!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 getValue={this.props.getValue} setValue={this.props.setValue} menu={this.props.menu} />
+						</div>
+					}
+					{this.props.children}
+					<NSLabelErrorNotifier error={this.state.error} clearError={() => this.setState({ error: undefined })} />
+				</div>
+			</>
+		);
+	}
 }

package/src/components/NSBoxBoolean.module.css

@@ -1,68 +1,68 @@
-.ns_box_boolean_label {
-	width: 100%;
-	height: 48px;
-	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;
+.ns_box_boolean_label {
+	width: 100%;
+	height: 48px;
+	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;
 }

package/src/components/NSBoxBoolean.tsx

@@ -1,116 +1,121 @@
-"use client";
-
-import React, { createRef } from "react";
-import Styles from "./NSBoxBoolean.module.css";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { IValidationProps } from "../props/IValidationProps";
-import { IValidationStringProps } from "../props/IValidationStringProps";
-import { safeMenuMenuItem } from "./NSMenuButton";
-import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
-
-export interface NSBoxBooleanProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, INSBoxBaseLayoutProps<boolean, NSBoxBoolean>
-{
-	checked?: (boolean | null);
-	indeterminate?: boolean;
-}
-
-export interface NSBoxBooleanState
-{
-	value: boolean | null;
-}
-
-export class NSBoxBoolean extends React.Component<NSBoxBooleanProps, NSBoxBooleanState>
-{
-	NSBoxBaseLayout_Main = createRef<NSBoxBaseLayout>();
-	constructor(props: NSBoxBooleanProps)
-	{
-		super(props);
-		this.state = { value: props.checked ?? props.defaultValue ?? false };
-		this.getInterpretedValue = this.getInterpretedValue.bind(this);
-		this.getError = this.getError.bind(this);
-		this.getValue = this.getValue.bind(this);
-		this.setValue = this.setValue.bind(this);
-		this.onChanged = this.onChanged.bind(this);
-	}
-	private getInterpretedValue(): boolean | null
-	{
-		return this.state.value;
-	}
-	getError(): string | null
-	{
-		return null;
-	}
-	getValue(checkError: boolean = true): boolean
-	{
-		if (this.props.indeterminate)
-			throw new Error("Please call getValueOrNull function");
-		return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.getInterpretedValue() ?? false);
-	}
-	setValue(value: boolean, callback?: () => void): void
-	{
-		this.setState({ value }, () =>
-		{
-			if (this.props.onChanged)
-				this.props.onChanged(this, callback);
-			else if (callback)
-				callback();
-		});
-	}
-	getValueOrNull(checkError: boolean = true): boolean | null
-	{
-		return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.getInterpretedValue());
-	}
-	setValueOrNull(value: boolean | null, callback?: () => void): void
-	{
-		this.setState({ value }, () =>
-		{
-			if (this.props.onChanged)
-				this.props.onChanged(this, callback);
-			else if (callback)
-				callback();
-		});
-	}
-	private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
-	{
-		this.setValue(e.target.checked);
-	}
-	override componentDidUpdate(prevProps: Readonly<NSBoxBooleanProps>): void
-	{
-		if (prevProps.checked !== this.props.checked)
-			if (this.props.checked !== undefined)
-				this.setValueOrNull(this.props.checked);
-	}
-
-	override render()
-	{
-		let menu = safeMenuMenuItem(this.props, () => { });
-		menu.builtin.copy = false;
-		menu.builtin.fullscreen = false;
-
-		return (
-			<NSBoxBaseLayout
-				ref={this.NSBoxBaseLayout_Main}
-				{...this.props}
-				title=""
-				getValue={() => ""}
-				setValue={() => { }}
-				menu={menu}
-			>
-				<label className={`ns-font-16-normal ${Styles.ns_box_boolean_label}`} htmlFor={this.props.name}>
-					<input
-						id={this.props.id}
-						name={this.props.name}
-						type="checkbox"
-						className={`${Styles.ns_box_boolean_input} ${this.getInterpretedValue() === null ? Styles.ns_box_boolean_indeterminate : ""}`}
-						checked={this.getInterpretedValue() ?? false}
-						onChange={this.onChanged}
-						onClick={() => { if (this.props.onClicked) this.props.onClicked(this); }}
-					/>
-					<span style={{ width: "0px" }}></span>
-					{this.props.hideHeader && this.props.required && <span style={{ color: "red" }}>*</span>}
-					{this.props.title}
-				</label>
-			</NSBoxBaseLayout>
-		);
-	}
+"use client";
+
+import React, { createRef } from "react";
+import Styles from "./NSBoxBoolean.module.css";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IValidationProps } from "../props/IValidationProps";
+import { safeMenuMenuItem } from "./NSMenuButton";
+import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
+import { Validator } from "../Validator";
+import { INSBox } from "./INSBox";
+
+export interface NSBoxBooleanProps extends IBaseComponentProps, IValidationProps, INSBoxBaseLayoutProps<boolean, NSBoxBoolean>
+{
+	checked?: (boolean | null);
+}
+
+export interface NSBoxBooleanState
+{
+	value: boolean | null;
+}
+
+export class NSBoxBoolean extends React.Component<NSBoxBooleanProps, NSBoxBooleanState> implements INSBox
+{
+	private _isdirtied: boolean = false;
+	NSBoxBaseLayout_Main = createRef<NSBoxBaseLayout>();
+	constructor(props: NSBoxBooleanProps)
+	{
+		super(props);
+		this.state = { value: props.checked ?? props.defaultValue ?? false };
+		this.isEmpty = this.isEmpty.bind(this);
+		this.getError = this.getError.bind(this);
+		this.getValue = this.getValue.bind(this);
+		this.setValue = this.setValue.bind(this);
+		this.getValueNull = this.getValueNull.bind(this);
+		this.setValueNull = this.setValueNull.bind(this);
+	}
+	getError(): string | null
+	{
+		return (
+			Validator.getError(this.props.title, this.state.value, this.props)
+		);
+	}
+	getValue(checkError: boolean = true): boolean | null
+	{
+		if (this.props.required)
+			return this.getValueBool(checkError);
+		return this.getValueNull(checkError);
+	}
+	setValue(value: boolean | null, callback?: () => void): void
+	{
+		this.setValueNull(value, callback);
+	}
+	getValueBool(checkError: boolean = true): boolean
+	{
+		if (!this.props.required)
+			throw new Error("Please call getValue or getValueNull function");
+		return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.state.value ?? false);
+	}
+	setValueBool(value: boolean, callback?: () => void): void
+	{
+		this.setValueNull(value, callback);
+	}
+	getValueNull(checkError: boolean = true): boolean | null
+	{
+		if (this.props.required)
+			throw new Error("Please call getValue or getValueBool function");
+		return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.state.value);
+	}
+	setValueNull(value: boolean | null, callback?: () => void): void
+	{
+		this.setState({ value }, () =>
+		{
+			if (this.props.onChanged)
+				this.props.onChanged(this, callback);
+			if (callback)
+				callback();
+		});
+	}
+	isEmpty(): boolean
+	{
+		return !this._isdirtied;
+	}
+	override componentDidUpdate(prevProps: Readonly<NSBoxBooleanProps>): void
+	{
+		if (prevProps.checked !== this.props.checked)
+			if (this.props.checked !== undefined)
+				this.setValueNull(this.props.checked);
+	}
+	override render()
+	{
+		let menu = safeMenuMenuItem(this.props, () => { });
+		menu.builtin.copy = false;
+		menu.builtin.fullscreen = false;
+
+		return (
+			<NSBoxBaseLayout
+				ref={this.NSBoxBaseLayout_Main}
+				{...this.props}
+				title=""
+				getValue={() => ""}
+				setValue={() => { }}
+				menu={menu}
+			>
+				<label className={`ns-font-16-normal ${Styles.ns_box_boolean_label}`} htmlFor={this.props.name}>
+					<input
+						id={this.props.id}
+						name={this.props.name}
+						type="checkbox"
+						className={`${Styles.ns_box_boolean_input} ${this.state.value == null ? Styles.ns_box_boolean_indeterminate : ""}`}
+						checked={this.state.value ?? false}
+						onChange={e => this.setValue(e.target.checked)}
+						onClick={() => { this.props.onClicked?.(this); }}
+					/>
+					<span style={{ width: "0px" }}></span>
+					{this.props.hideHeader && this.props.required && <span style={{ color: "red" }}>*</span>}
+					{this.props.title}
+				</label>
+			</NSBoxBaseLayout>
+		);
+	}
 }