namirasoft-site-react 1.4.554 → 1.4.556

package/src/components/NSBoxDateTimeRange.tsx

@@ -1,66 +1,66 @@
-"use client";
-
-import { DatePicker } from 'antd';
-import dayjs from 'dayjs';
-import { TimeOperation } from 'namirasoft-core';
-import StylesNSBox from './NSBox.module.css';
-import { NSBoxDateRangeBase, NSBoxDateRangeBaseProps } from './NSBoxDateRangeBase';
-import Styles from './NSBoxDateRangeBase.module.css';
-
-export interface NSBoxDateTimeRangeProps extends NSBoxDateRangeBaseProps<NSBoxDateTimeRange> { }
-
-export class NSBoxDateTimeRange extends NSBoxDateRangeBase<NSBoxDateTimeRangeProps>
-{
-    protected getFormat() { return 'YYYY-MM-DD HH:mm:ss'; }
-
-    getError(): string | null
-    {
-        const { title, required, minDate, maxDate } = this.props;
-        const { value } = this.state;
-        if (required && (!value || !value.from || !value.to))
-            return `${title} is required.`;
-        if (minDate && value?.from && value.from < minDate)
-            return `${title} (from) must not be before ${TimeOperation.format(minDate, this.getFormat())}.`;
-        if (maxDate && value?.to && value.to > maxDate)
-            return `${title} (to) must not be after ${TimeOperation.format(maxDate, this.getFormat())}.`;
-        return null;
-    }
-
-    protected getBuiltinPresets()
-    {
-        const now = new Date();
-        now.setSeconds(0, 0);
-        return [
-            { label: '1D', title: 'Last 1 Day', from: TimeOperation.daysAgo(1, now), to: now },
-            { label: '2D', title: 'Last 2 Days', from: TimeOperation.daysAgo(2, now), to: now },
-            { label: '1W', title: 'Last 1 Week', from: TimeOperation.weeksAgo(1, now), to: now },
-            { label: '1M', title: 'Last 1 Month', from: TimeOperation.monthsAgo(1, now), to: now },
-            { label: '3M', title: 'Last 3 Months', from: TimeOperation.monthsAgo(3, now), to: now },
-            { label: '6M', title: 'Last 6 Months', from: TimeOperation.monthsAgo(6, now), to: now },
-            { label: '1Y', title: 'Last Year', from: TimeOperation.yearsAgo(1, now), to: now },
-        ];
-    }
-
-    protected renderPicker()
-    {
-        const fmt = this.getFormat();
-        return (
-            <DatePicker.RangePicker
-                className={`${StylesNSBox.ns_box_input} ${Styles.ns_picker}`}
-                variant="borderless"
-                showTime
-                value={this.toDayjsValue()}
-                format={fmt}
-                minDate={this.props.minDate ? dayjs(this.props.minDate) : undefined}
-                maxDate={this.props.maxDate ? dayjs(this.props.maxDate) : undefined}
-                onChange={(_, dateStrings) =>
-                {
-                    if (dateStrings?.[0] && dateStrings?.[1])
-                        this.setValue({ from: dayjs(dateStrings[0], fmt).toDate(), to: dayjs(dateStrings[1], fmt).toDate() });
-                    else
-                        this.setValue(null);
-                }}
-            />
-        );
-    }
+"use client";
+
+import { DatePicker } from 'antd';
+import dayjs from 'dayjs';
+import { TimeOperation } from 'namirasoft-core';
+import StylesNSBox from './NSBox.module.css';
+import { NSBoxDateRangeBase, NSBoxDateRangeBaseProps } from './NSBoxDateRangeBase';
+import Styles from './NSBoxDateRangeBase.module.css';
+
+export interface NSBoxDateTimeRangeProps extends NSBoxDateRangeBaseProps<NSBoxDateTimeRange> { }
+
+export class NSBoxDateTimeRange extends NSBoxDateRangeBase<NSBoxDateTimeRangeProps>
+{
+    protected getFormat() { return 'YYYY-MM-DD HH:mm:ss'; }
+
+    getError(): string | null
+    {
+        const { title, required, minDate, maxDate } = this.props;
+        const { value } = this.state;
+        if (required && (!value || !value.from || !value.to))
+            return `${title} is required.`;
+        if (minDate && value?.from && value.from < minDate)
+            return `${title} (from) must not be before ${TimeOperation.format(minDate, this.getFormat())}.`;
+        if (maxDate && value?.to && value.to > maxDate)
+            return `${title} (to) must not be after ${TimeOperation.format(maxDate, this.getFormat())}.`;
+        return null;
+    }
+
+    protected getBuiltinPresets()
+    {
+        const now = new Date();
+        now.setSeconds(0, 0);
+        return [
+            { label: '1D', title: 'Last 1 Day', from: TimeOperation.daysAgo(1, now), to: now },
+            { label: '2D', title: 'Last 2 Days', from: TimeOperation.daysAgo(2, now), to: now },
+            { label: '1W', title: 'Last 1 Week', from: TimeOperation.weeksAgo(1, now), to: now },
+            { label: '1M', title: 'Last 1 Month', from: TimeOperation.monthsAgo(1, now), to: now },
+            { label: '3M', title: 'Last 3 Months', from: TimeOperation.monthsAgo(3, now), to: now },
+            { label: '6M', title: 'Last 6 Months', from: TimeOperation.monthsAgo(6, now), to: now },
+            { label: '1Y', title: 'Last Year', from: TimeOperation.yearsAgo(1, now), to: now },
+        ];
+    }
+
+    protected renderPicker()
+    {
+        const fmt = this.getFormat();
+        return (
+            <DatePicker.RangePicker
+                className={`${StylesNSBox.ns_box_input} ${Styles.ns_picker}`}
+                variant="borderless"
+                showTime
+                value={this.toDayjsValue()}
+                format={fmt}
+                minDate={this.props.minDate ? dayjs(this.props.minDate) : undefined}
+                maxDate={this.props.maxDate ? dayjs(this.props.maxDate) : undefined}
+                onChange={(_, dateStrings) =>
+                {
+                    if (dateStrings?.[0] && dateStrings?.[1])
+                        this.setValue({ from: dayjs(dateStrings[0], fmt).toDate(), to: dayjs(dateStrings[1], fmt).toDate() });
+                    else
+                        this.setValue(null);
+                }}
+            />
+        );
+    }
 }

package/src/components/NSBoxDouble.tsx

@@ -1,111 +1,111 @@
-"use client";
-
-import React, { createRef } from "react";
-import StylesNSBox from "./NSBox.module.css";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { IValidationProps } from "../props/IValidationProps";
-import { IValidationNumberProps } from "../props/IValidationNumberProps";
-import { Validator } from "../Validator";
-import { safeMenuMenuItem } from "./NSMenuButton";
-import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
-import { NamingConvention } from "namirasoft-core";
-import { IValidationPrecisionProps } from "../props/IValidationPrecisionProps";
-import { INSBox } from "./INSBox";
-import { IntegerFormatter } from "../formatter/IntegerFormatter";
-
-export interface NSBoxDoubleProps extends IBaseComponentProps, IValidationProps, IValidationNumberProps, IValidationPrecisionProps, INSBoxBaseLayoutProps<NSBoxDouble, number>
-{
-	input?: IBaseComponentProps;
-}
-
-export interface NSBoxDoubleState
-{
-	value: number | null;
-}
-
-export class NSBoxDouble extends React.Component<NSBoxDoubleProps, NSBoxDoubleState> implements INSBox
-{
-	NSBoxBaseLayout_Main = createRef<NSBoxBaseLayout>();
-	constructor(props: NSBoxDoubleProps)
-	{
-		super(props);
-		this.state = { value: props.defaultValue ?? null };
-		this.isEmpty = this.isEmpty.bind(this);
-		this.getError = this.getError.bind(this);
-		this.getValue = this.getValue.bind(this);
-		this.setValue = this.setValue.bind(this);
-	}
-	isEmpty(value: string)
-	{
-		if ((value ?? "").trim())
-			return false;
-		return true;
-	}
-	getError(): string | null
-	{
-		return (
-			Validator.getError(this.props.title, this.state.value, this.props) ||
-			Validator.getErrorNumber(this.props.title, this.state.value, this.props)
-		);
-	}
-	getValue(checkError: boolean = true): number | null
-	{
-        if (this.props.nullable)
-            if (this.NSBoxBaseLayout_Main.current?.isNull())
-                return null;
-		return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.state.value);
-	}
-	setValue(value: number | null, callback?: () => void): void
-	{
-        if (this.props.nullable)
-            this.NSBoxBaseLayout_Main.current?.setNull(value == null);
-
-		if (Number.isNaN(value))
-			value = null;
-		
-		this.setState({ value }, () =>
-		{
-			this.props.onChanged?.(this);
-			callback?.();
-		});
-	}
-    setDisabled(disabled: boolean): void
-    {
-        this.NSBoxBaseLayout_Main.current?.setDisabled(disabled);
-    }
-	override render()
-	{
-		let menu = safeMenuMenuItem(this.props, () => { });
-		if (!menu.builtin.copy)
-			menu.builtin.copy = { enabled: true, getValue: () => this.state.value?.toLocaleString() ?? "" };
-
-		return (
-			<NSBoxBaseLayout
-				ref={this.NSBoxBaseLayout_Main}
-				{...this.props}
-				menu={menu}
-				getValue={() => new IntegerFormatter().format(this.getValue(false))}
-			>
-				<input
-					id={this.props.input?.id}
-					name={this.props.input?.name}
-					type="number"
-					className={`${StylesNSBox.ns_box_input} ${this.props.input?.classList?.join(" ") ?? ""}`}
-					placeholder={this.props.placeholder ?? `Please enter ${NamingConvention.auto.convert(this.props.title, NamingConvention.lower_case_space)}`}
-					value={this.state.value ?? ""}
-					onChange={e => this.setValue(parseFloat(e.target.value))}
-					onClick={() => { this.props.onClicked?.(this); }}
-					inputMode="decimal"
-					min={this.props.min}
-					max={this.props.max}
-					pattern={"[0-9]*[.,]?[0-9]" + (this.props.precision ? `{0,${this.props.precision}}` : "*")}
-					style={{
-						background: `url("https://static.namirasoft.com/image/concept/type/float.png") white no-repeat scroll center right 4px`,
-						backgroundSize: "24px",
-						...this.props.input?.style
-					}}
-				/>
-			</NSBoxBaseLayout>
-		);
-	}
+"use client";
+
+import React, { createRef } from "react";
+import StylesNSBox from "./NSBox.module.css";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IValidationProps } from "../props/IValidationProps";
+import { IValidationNumberProps } from "../props/IValidationNumberProps";
+import { Validator } from "../Validator";
+import { safeMenuMenuItem } from "./NSMenuButton";
+import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
+import { NamingConvention } from "namirasoft-core";
+import { IValidationPrecisionProps } from "../props/IValidationPrecisionProps";
+import { INSBox } from "./INSBox";
+import { IntegerFormatter } from "../formatter/IntegerFormatter";
+
+export interface NSBoxDoubleProps extends IBaseComponentProps, IValidationProps, IValidationNumberProps, IValidationPrecisionProps, INSBoxBaseLayoutProps<NSBoxDouble, number>
+{
+	input?: IBaseComponentProps;
+}
+
+export interface NSBoxDoubleState
+{
+	value: number | null;
+}
+
+export class NSBoxDouble extends React.Component<NSBoxDoubleProps, NSBoxDoubleState> implements INSBox
+{
+	NSBoxBaseLayout_Main = createRef<NSBoxBaseLayout>();
+	constructor(props: NSBoxDoubleProps)
+	{
+		super(props);
+		this.state = { value: props.defaultValue ?? null };
+		this.isEmpty = this.isEmpty.bind(this);
+		this.getError = this.getError.bind(this);
+		this.getValue = this.getValue.bind(this);
+		this.setValue = this.setValue.bind(this);
+	}
+	isEmpty(value: string)
+	{
+		if ((value ?? "").trim())
+			return false;
+		return true;
+	}
+	getError(): string | null
+	{
+		return (
+			Validator.getError(this.props.title, this.state.value, this.props) ||
+			Validator.getErrorNumber(this.props.title, this.state.value, this.props)
+		);
+	}
+	getValue(checkError: boolean = true): number | null
+	{
+        if (this.props.nullable)
+            if (this.NSBoxBaseLayout_Main.current?.isNull())
+                return null;
+		return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.state.value);
+	}
+	setValue(value: number | null, callback?: () => void): void
+	{
+        if (this.props.nullable)
+            this.NSBoxBaseLayout_Main.current?.setNull(value == null);
+
+		if (Number.isNaN(value))
+			value = null;
+		
+		this.setState({ value }, () =>
+		{
+			this.props.onChanged?.(this);
+			callback?.();
+		});
+	}
+    setDisabled(disabled: boolean): void
+    {
+        this.NSBoxBaseLayout_Main.current?.setDisabled(disabled);
+    }
+	override render()
+	{
+		let menu = safeMenuMenuItem(this.props, () => { });
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => this.state.value?.toLocaleString() ?? "" };
+
+		return (
+			<NSBoxBaseLayout
+				ref={this.NSBoxBaseLayout_Main}
+				{...this.props}
+				menu={menu}
+				getValue={() => new IntegerFormatter().format(this.getValue(false))}
+			>
+				<input
+					id={this.props.input?.id}
+					name={this.props.input?.name}
+					type="number"
+					className={`${StylesNSBox.ns_box_input} ${this.props.input?.classList?.join(" ") ?? ""}`}
+					placeholder={this.props.placeholder ?? `Please enter ${NamingConvention.auto.convert(this.props.title, NamingConvention.lower_case_space)}`}
+					value={this.state.value ?? ""}
+					onChange={e => this.setValue(parseFloat(e.target.value))}
+					onClick={() => { this.props.onClicked?.(this); }}
+					inputMode="decimal"
+					min={this.props.min}
+					max={this.props.max}
+					pattern={"[0-9]*[.,]?[0-9]" + (this.props.precision ? `{0,${this.props.precision}}` : "*")}
+					style={{
+						background: `url("https://static.namirasoft.com/image/concept/type/float.png") white no-repeat scroll center right 4px`,
+						backgroundSize: "24px",
+						...this.props.input?.style
+					}}
+				/>
+			</NSBoxBaseLayout>
+		);
+	}
 }

package/src/components/NSBoxDuration.module.css

@@ -1,5 +1,5 @@
-input[type="time"]::-webkit-calendar-picker-indicator {
-	cursor: pointer;
-	opacity: 0;
-	padding-right: 0px;
+input[type="time"]::-webkit-calendar-picker-indicator {
+	cursor: pointer;
+	opacity: 0;
+	padding-right: 0px;
 }

package/src/components/NSBoxDuration.tsx

@@ -1,108 +1,108 @@
-"use client";
-
-import React, { createRef } from "react";
-import "./NSBoxDuration.module.css"
-import StylesNSBox from "./NSBox.module.css";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { IValidationProps } from "../props/IValidationProps";
-import { IValidationNumberProps } from "../props/IValidationNumberProps";
-import { IValidationStringProps } from "../props/IValidationStringProps";
-import { Validator } from "../Validator";
-import { safeMenuMenuItem } from "./NSMenuButton";
-import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
-import { NamingConvention } from "namirasoft-core";
-import { INSBox } from "./INSBox";
-import { DurationFormatter } from "../main";
-
-export interface NSBoxDurationProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, IValidationNumberProps, INSBoxBaseLayoutProps<NSBoxDuration, string>
-{
-	input?: IBaseComponentProps;
-}
-
-export interface NSBoxDurationState
-{
-	value: string | null;
-}
-
-export class NSBoxDuration extends React.Component<NSBoxDurationProps, NSBoxDurationState> implements INSBox
-{
-	NSBoxBaseLayout_Main = createRef<NSBoxBaseLayout>();
-	constructor(props: NSBoxDurationProps)
-	{
-		super(props);
-		this.state = { value: props.defaultValue ?? null };
-		this.isEmpty = this.isEmpty.bind(this);
-		this.getError = this.getError.bind(this);
-		this.getValue = this.getValue.bind(this);
-		this.setValue = this.setValue.bind(this);
-	}
-	isEmpty(value: string)
-	{
-		if ((value ?? "").trim())
-			return false;
-		return true;
-	}
-	getError(): string | null
-	{
-		return (
-			Validator.getError(this.props.title, this.state.value, this.props) ||
-			Validator.getErrorDuration(this.props.title, this.state.value)
-		);
-	}
-	getValue(checkError: boolean = true): string | null
-	{
-        if (this.props.nullable)
-            if (this.NSBoxBaseLayout_Main.current?.isNull())
-                return null;
-		return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.state.value);
-	}
-	setValue(value: string | null, callback?: () => void): void
-	{
-        if (this.props.nullable)
-            this.NSBoxBaseLayout_Main.current?.setNull(value == null);
-		this.setState({ value }, () =>
-		{
-			this.props.onChanged?.(this);
-			callback?.();
-		});
-	}
-    setDisabled(disabled: boolean): void
-    {
-        this.NSBoxBaseLayout_Main.current?.setDisabled(disabled);
-    }
-	override render()
-	{
-		let menu = safeMenuMenuItem(this.props, () => { });
-		if (!menu.builtin.copy)
-			menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
-
-		// todo implement a mask for duration like ddd hh-mm-ss
-
-		return (
-			<NSBoxBaseLayout
-				ref={this.NSBoxBaseLayout_Main}
-				{...this.props}
-				menu={menu}
-				getValue={() => new DurationFormatter().format(this.getValue(false))}
-			>
-				<input
-					id={this.props.input?.id}
-					name={this.props.input?.name}
-					type="time"
-					className={`${StylesNSBox.ns_box_input} ${this.props.input?.classList?.join(" ") ?? ""}`}
-					placeholder={this.props.placeholder ?? `Please enter ${NamingConvention.auto.convert(this.props.title, NamingConvention.lower_case_space)}`}
-					value={this.state.value ?? ""}
-					onChange={e => this.setValue(e.target.value)}
-					onClick={() => { this.props.onClicked?.(this); }}
-					step="1"
-					style={{
-						background: `url("https://static.namirasoft.com/image/concept/type/duration.png") white no-repeat scroll center right 4px`,
-						backgroundSize: "24px",
-						paddingRight: "7px",
-						...this.props.input?.style
-					}}
-				/>
-			</NSBoxBaseLayout>
-		);
-	}
+"use client";
+
+import React, { createRef } from "react";
+import "./NSBoxDuration.module.css"
+import StylesNSBox from "./NSBox.module.css";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IValidationProps } from "../props/IValidationProps";
+import { IValidationNumberProps } from "../props/IValidationNumberProps";
+import { IValidationStringProps } from "../props/IValidationStringProps";
+import { Validator } from "../Validator";
+import { safeMenuMenuItem } from "./NSMenuButton";
+import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
+import { NamingConvention } from "namirasoft-core";
+import { INSBox } from "./INSBox";
+import { DurationFormatter } from "../main";
+
+export interface NSBoxDurationProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, IValidationNumberProps, INSBoxBaseLayoutProps<NSBoxDuration, string>
+{
+	input?: IBaseComponentProps;
+}
+
+export interface NSBoxDurationState
+{
+	value: string | null;
+}
+
+export class NSBoxDuration extends React.Component<NSBoxDurationProps, NSBoxDurationState> implements INSBox
+{
+	NSBoxBaseLayout_Main = createRef<NSBoxBaseLayout>();
+	constructor(props: NSBoxDurationProps)
+	{
+		super(props);
+		this.state = { value: props.defaultValue ?? null };
+		this.isEmpty = this.isEmpty.bind(this);
+		this.getError = this.getError.bind(this);
+		this.getValue = this.getValue.bind(this);
+		this.setValue = this.setValue.bind(this);
+	}
+	isEmpty(value: string)
+	{
+		if ((value ?? "").trim())
+			return false;
+		return true;
+	}
+	getError(): string | null
+	{
+		return (
+			Validator.getError(this.props.title, this.state.value, this.props) ||
+			Validator.getErrorDuration(this.props.title, this.state.value)
+		);
+	}
+	getValue(checkError: boolean = true): string | null
+	{
+        if (this.props.nullable)
+            if (this.NSBoxBaseLayout_Main.current?.isNull())
+                return null;
+		return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.state.value);
+	}
+	setValue(value: string | null, callback?: () => void): void
+	{
+        if (this.props.nullable)
+            this.NSBoxBaseLayout_Main.current?.setNull(value == null);
+		this.setState({ value }, () =>
+		{
+			this.props.onChanged?.(this);
+			callback?.();
+		});
+	}
+    setDisabled(disabled: boolean): void
+    {
+        this.NSBoxBaseLayout_Main.current?.setDisabled(disabled);
+    }
+	override render()
+	{
+		let menu = safeMenuMenuItem(this.props, () => { });
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
+
+		// todo implement a mask for duration like ddd hh-mm-ss
+
+		return (
+			<NSBoxBaseLayout
+				ref={this.NSBoxBaseLayout_Main}
+				{...this.props}
+				menu={menu}
+				getValue={() => new DurationFormatter().format(this.getValue(false))}
+			>
+				<input
+					id={this.props.input?.id}
+					name={this.props.input?.name}
+					type="time"
+					className={`${StylesNSBox.ns_box_input} ${this.props.input?.classList?.join(" ") ?? ""}`}
+					placeholder={this.props.placeholder ?? `Please enter ${NamingConvention.auto.convert(this.props.title, NamingConvention.lower_case_space)}`}
+					value={this.state.value ?? ""}
+					onChange={e => this.setValue(e.target.value)}
+					onClick={() => { this.props.onClicked?.(this); }}
+					step="1"
+					style={{
+						background: `url("https://static.namirasoft.com/image/concept/type/duration.png") white no-repeat scroll center right 4px`,
+						backgroundSize: "24px",
+						paddingRight: "7px",
+						...this.props.input?.style
+					}}
+				/>
+			</NSBoxBaseLayout>
+		);
+	}
 }