namirasoft-site-react 1.4.134 → 1.4.136

package/src/components/NSBoxBoolean.module.css

@@ -1,68 +1,68 @@
-.ns_checkbox_parent {
-	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_input {
-	width: 24px;
-	height: 24px;
-	cursor: pointer;
-}
-
-.ns_input:focus-visible {
-	border-color: rgba(0, 0, 0, 1) !important;
-	outline: solid 1px #4096ff !important;
-}
-
-.ns_input:checked {
-	accent-color: #141B5C;
-}
-
-.ns_indeterminate:indeterminate {
-	border: 1px solid rgba(255, 148, 50, 1);
-}
-
-.ns_indeterminate {
-	position: relative;
-}
-
-.ns_indeterminate::before {
-	content: "";
-	display: block;
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	top: 0;
-	right: 0;
-	border: 5px solid #141b5c;
-	color: #141b5c;
-	background: #fffbff;
-}
-
-.ns_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,132 +1,113 @@
-"use client";
-
-import React from "react";
-import Styles from "./NSBoxBoolean.module.css";
-import StylesNSBox from "./NSBox.module.css";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { IValidationProps } from "../props/IValidationProps";
-import { IValidationStringProps } from "../props/IValidationStringProps";
-import { NSLabelErrorNotifier } from "./NSLabelErrorNotifier";
-import { NSMenuButton } from "./NSMenuButton";
-
-export interface NSBoxBooleanProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
-{
-	title: string;
-	defaultValue?: boolean;
-	indeterminate?: boolean;
-	onChanged?: (e: NSBoxBoolean, callback?: () => void) => void;
-	onClicked?: (e: NSBoxBoolean) => void;
-	checked?: (boolean | null);
-}
-
-export interface NSBoxBooleanState
-{
-	value: boolean | null;
-	error?: string;
-}
-
-export class NSBoxBoolean extends React.Component<NSBoxBooleanProps, NSBoxBooleanState>
-{
-	constructor(props: NSBoxBooleanProps)
-	{
-		super(props);
-		this.state = { value: props.checked ?? props.defaultValue ?? false };
-		this.getInterpretedValue = this.getInterpretedValue.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 (checkError)
-		{
-			if (this.props.indeterminate)
-				throw new Error("Please call getValueOrNull function");
-			let error = this.getError();
-			if (error)
-			{
-				this.setState({ error });
-				throw new Error(error);
-			}
-		}
-		return 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(): boolean | null
-	{
-		let error = this.getError();
-		if (error)
-		{
-			this.setState({ error });
-			throw new Error(error);
-		}
-		return 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()
-	{
-		return (
-			<>
-				<div className={`${StylesNSBox.ns_input_parent} ${this.props.classList?.join(" ")}`} style={this.props.style ?? {}}>
-					<div className={`${StylesNSBox.ns_input_bar}`}>
-						<span className={StylesNSBox.ns_input_title}>
-							{this.props.required && <span style={{ color: "red" }}>*</span>} {/*this.props.title*/}
-						</span>
-						<NSMenuButton value={""} setValue={() => { }} hideFullscreen hideCopy />
-					</div>
-					<label className={`ns-font-16-normal ${Styles.ns_checkbox_parent}`} htmlFor={this.props.name}>
-						<input
-							id={this.props.id}
-							name={this.props.name}
-							type="checkbox"
-							className={`${Styles.ns_input} ${this.getInterpretedValue() === null ? Styles.ns_indeterminate : ""}`}
-							checked={this.getInterpretedValue() ?? false}
-							onChange={this.onChanged}
-							onClick={() => { if (this.props.onClicked) this.props.onClicked(this); }}
-						/>
-						<span className={Styles.ns_input_title}></span>
-						{this.props.title}
-					</label>
-					<NSLabelErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
-				</div>
-			</>
-		);
-	}
+"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.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.fullscreen = false;
+
+		return (
+			<NSBoxBaseLayout
+				ref={this.NSBoxBaseLayout_Main}
+				{...this.props}
+				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>
+		);
+	}
 }