namirasoft-site-react 1.4.552 → 1.4.554

package/src/components/NSBoxDateRangeBase.tsx

@@ -1,199 +1,199 @@
-"use client";
-
-import type { Dayjs } from 'dayjs';
-import dayjs from 'dayjs';
-import { TimeOperation } from 'namirasoft-core';
-import { Component, createRef } from 'react';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import { IValidationProps } from '../props/IValidationProps';
-import { INSBox } from './INSBox';
-import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from './NSBoxBaseLayout';
-import Styles from './NSBoxDateRangeBase.module.css';
-import { safeMenuMenuItem } from './NSMenuButton';
-
-export interface NSBoxDateRangeValue
-{
-    from: Date;
-    to: Date;
-}
-
-export interface NSBoxDateRangePreset
-{
-    shortName: string;
-    title?: string;
-    getFrom: () => Date;
-    getTo: () => Date;
-}
-
-export interface NSBoxDateRangeBaseProps<TBox> extends IBaseComponentProps, IValidationProps, INSBoxBaseLayoutProps<TBox, NSBoxDateRangeValue>
-{
-    minDate?: Date;
-    maxDate?: Date;
-    preset?: boolean;
-    presets?: NSBoxDateRangePreset[];
-}
-
-export interface NSBoxDateRangeBaseState
-{
-    value: NSBoxDateRangeValue | null;
-}
-
-export abstract class NSBoxDateRangeBase<TProps extends NSBoxDateRangeBaseProps<any>>
-    extends Component<TProps, NSBoxDateRangeBaseState> implements INSBox
-{
-    NSBoxBaseLayout_Main = createRef<NSBoxBaseLayout>();
-
-    constructor(props: TProps)
-    {
-        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: NSBoxDateRangeValue): boolean
-    {
-        return !value || !value.from || !value.to;
-    }
-
-    abstract getError(): string | null;
-
-    getValue(checkError: boolean = true): NSBoxDateRangeValue | null
-    {
-        if (this.props.nullable)
-            if (this.NSBoxBaseLayout_Main.current?.isNull())
-                return null;
-        return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.state.value);
-    }
-
-    setValue(value: NSBoxDateRangeValue | 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);
-    }
-
-    protected abstract getFormat(): string;
-    protected abstract getBuiltinPresets(): { label: string; title: string; from: Date; to: Date }[];
-    protected abstract renderPicker(): React.ReactNode;
-
-    protected normalizeValue(value: NSBoxDateRangeValue): NSBoxDateRangeValue { return value; }
-
-    protected toDayjsValue(): [Dayjs, Dayjs] | null
-    {
-        const { value } = this.state;
-        if (!value?.from || !value?.to)
-            return null;
-        return [dayjs(value.from), dayjs(value.to)];
-    }
-
-    private isInRange(from: Date, to: Date): boolean
-    {
-        const { minDate, maxDate } = this.props;
-        if (minDate && from < minDate) return false;
-        if (maxDate && to > maxDate) return false;
-        return true;
-    }
-
-    private renderPresets(): React.ReactNode
-    {
-        const { preset, presets: customPresets } = this.props;
-
-        const builtinPresets = preset
-            ? this.getBuiltinPresets().filter(p => this.isInRange(p.from, p.to))
-            : [];
-
-        const resolvedCustom = (customPresets ?? [])
-            .map(p => ({
-                shortName: p.shortName,
-                title: p.title,
-                from: p.getFrom(),
-                to: p.getTo(),
-            }))
-            .filter(p => this.isInRange(p.from, p.to));
-
-        const showDivider = builtinPresets.length > 0 && resolvedCustom.length > 0;
-
-        return (
-            <div className={Styles.ns_preset_container}>
-                {builtinPresets.map(p =>
-                {
-                    const norm = this.normalizeValue({ from: p.from, to: p.to });
-                    const isActive = this.state.value?.from.getTime() === norm.from.getTime()
-                        && this.state.value?.to.getTime() === norm.to.getTime();
-                    return (
-                        <button
-                            key={p.label}
-                            type="button"
-                            title={p.title}
-                            className={`${Styles.ns_preset_btn} ${isActive ? Styles.ns_preset_btn_active : ''}`}
-                            onClick={() => this.setValue({ from: p.from, to: p.to })}
-                        >
-                            {p.label}
-                        </button>
-                    );
-                })}
-                {showDivider && <div className={Styles.ns_preset_divider} />}
-                {resolvedCustom.map(p =>
-                {
-                    const norm = this.normalizeValue({ from: p.from, to: p.to });
-                    const isActive = this.state.value?.from.getTime() === norm.from.getTime()
-                        && this.state.value?.to.getTime() === norm.to.getTime();
-                    return (
-                        <button
-                            key={p.shortName}
-                            type="button"
-                            title={p.title}
-                            className={`${Styles.ns_preset_btn} ${isActive ? Styles.ns_preset_btn_active : ''}`}
-                            onClick={() => this.setValue({ from: p.from, to: p.to })}
-                        >
-                            {p.shortName}
-                        </button>
-                    );
-                })}
-            </div>
-        );
-    }
-
-    override render()
-    {
-        const fmt = this.getFormat();
-        let menu = safeMenuMenuItem(this.props, () => { });
-        if (!menu.builtin.copy)
-            menu.builtin.copy = {
-                enabled: true,
-                getValue: () => this.state.value
-                    ? `${TimeOperation.format(this.state.value.from, fmt)} to ${TimeOperation.format(this.state.value.to, fmt)}`
-                    : '',
-            };
-
-        const showPresets = this.props.preset || (this.props.presets && this.props.presets.length > 0);
-
-        return (
-            <NSBoxBaseLayout
-                ref={this.NSBoxBaseLayout_Main}
-                {...this.props}
-                menu={menu}
-                getValue={() => this.state.value
-                    ? `${TimeOperation.format(this.state.value.from, fmt)} - ${TimeOperation.format(this.state.value.to, fmt)}`
-                    : null}
-            >
-                <div className={Styles.ns_wrapper}>
-                    {this.renderPicker()}
-                </div>
-                {showPresets && this.renderPresets()}
-            </NSBoxBaseLayout>
-        );
-    }
+"use client";
+
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import { TimeOperation } from 'namirasoft-core';
+import { Component, createRef } from 'react';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import { IValidationProps } from '../props/IValidationProps';
+import { INSBox } from './INSBox';
+import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from './NSBoxBaseLayout';
+import Styles from './NSBoxDateRangeBase.module.css';
+import { safeMenuMenuItem } from './NSMenuButton';
+
+export interface NSBoxDateRangeValue
+{
+    from: Date;
+    to: Date;
+}
+
+export interface NSBoxDateRangePreset
+{
+    shortName: string;
+    title?: string;
+    getFrom: () => Date;
+    getTo: () => Date;
+}
+
+export interface NSBoxDateRangeBaseProps<TBox> extends IBaseComponentProps, IValidationProps, INSBoxBaseLayoutProps<TBox, NSBoxDateRangeValue>
+{
+    minDate?: Date;
+    maxDate?: Date;
+    preset?: boolean;
+    presets?: NSBoxDateRangePreset[];
+}
+
+export interface NSBoxDateRangeBaseState
+{
+    value: NSBoxDateRangeValue | null;
+}
+
+export abstract class NSBoxDateRangeBase<TProps extends NSBoxDateRangeBaseProps<any>>
+    extends Component<TProps, NSBoxDateRangeBaseState> implements INSBox
+{
+    NSBoxBaseLayout_Main = createRef<NSBoxBaseLayout>();
+
+    constructor(props: TProps)
+    {
+        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: NSBoxDateRangeValue): boolean
+    {
+        return !value || !value.from || !value.to;
+    }
+
+    abstract getError(): string | null;
+
+    getValue(checkError: boolean = true): NSBoxDateRangeValue | null
+    {
+        if (this.props.nullable)
+            if (this.NSBoxBaseLayout_Main.current?.isNull())
+                return null;
+        return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.state.value);
+    }
+
+    setValue(value: NSBoxDateRangeValue | 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);
+    }
+
+    protected abstract getFormat(): string;
+    protected abstract getBuiltinPresets(): { label: string; title: string; from: Date; to: Date }[];
+    protected abstract renderPicker(): React.ReactNode;
+
+    protected normalizeValue(value: NSBoxDateRangeValue): NSBoxDateRangeValue { return value; }
+
+    protected toDayjsValue(): [Dayjs, Dayjs] | null
+    {
+        const { value } = this.state;
+        if (!value?.from || !value?.to)
+            return null;
+        return [dayjs(value.from), dayjs(value.to)];
+    }
+
+    private isInRange(from: Date, to: Date): boolean
+    {
+        const { minDate, maxDate } = this.props;
+        if (minDate && from < minDate) return false;
+        if (maxDate && to > maxDate) return false;
+        return true;
+    }
+
+    private renderPresets(): React.ReactNode
+    {
+        const { preset, presets: customPresets } = this.props;
+
+        const builtinPresets = preset
+            ? this.getBuiltinPresets().filter(p => this.isInRange(p.from, p.to))
+            : [];
+
+        const resolvedCustom = (customPresets ?? [])
+            .map(p => ({
+                shortName: p.shortName,
+                title: p.title,
+                from: p.getFrom(),
+                to: p.getTo(),
+            }))
+            .filter(p => this.isInRange(p.from, p.to));
+
+        const showDivider = builtinPresets.length > 0 && resolvedCustom.length > 0;
+
+        return (
+            <div className={Styles.ns_preset_container}>
+                {builtinPresets.map(p =>
+                {
+                    const norm = this.normalizeValue({ from: p.from, to: p.to });
+                    const isActive = this.state.value?.from.getTime() === norm.from.getTime()
+                        && this.state.value?.to.getTime() === norm.to.getTime();
+                    return (
+                        <button
+                            key={p.label}
+                            type="button"
+                            title={p.title}
+                            className={`${Styles.ns_preset_btn} ${isActive ? Styles.ns_preset_btn_active : ''}`}
+                            onClick={() => this.setValue({ from: p.from, to: p.to })}
+                        >
+                            {p.label}
+                        </button>
+                    );
+                })}
+                {showDivider && <div className={Styles.ns_preset_divider} />}
+                {resolvedCustom.map(p =>
+                {
+                    const norm = this.normalizeValue({ from: p.from, to: p.to });
+                    const isActive = this.state.value?.from.getTime() === norm.from.getTime()
+                        && this.state.value?.to.getTime() === norm.to.getTime();
+                    return (
+                        <button
+                            key={p.shortName}
+                            type="button"
+                            title={p.title}
+                            className={`${Styles.ns_preset_btn} ${isActive ? Styles.ns_preset_btn_active : ''}`}
+                            onClick={() => this.setValue({ from: p.from, to: p.to })}
+                        >
+                            {p.shortName}
+                        </button>
+                    );
+                })}
+            </div>
+        );
+    }
+
+    override render()
+    {
+        const fmt = this.getFormat();
+        let menu = safeMenuMenuItem(this.props, () => { });
+        if (!menu.builtin.copy)
+            menu.builtin.copy = {
+                enabled: true,
+                getValue: () => this.state.value
+                    ? `${TimeOperation.format(this.state.value.from, fmt)} to ${TimeOperation.format(this.state.value.to, fmt)}`
+                    : '',
+            };
+
+        const showPresets = this.props.preset || (this.props.presets && this.props.presets.length > 0);
+
+        return (
+            <NSBoxBaseLayout
+                ref={this.NSBoxBaseLayout_Main}
+                {...this.props}
+                menu={menu}
+                getValue={() => this.state.value
+                    ? `${TimeOperation.format(this.state.value.from, fmt)} - ${TimeOperation.format(this.state.value.to, fmt)}`
+                    : null}
+            >
+                <div className={Styles.ns_wrapper}>
+                    {this.renderPicker()}
+                </div>
+                {showPresets && this.renderPresets()}
+            </NSBoxBaseLayout>
+        );
+    }
 }

package/src/components/NSBoxDateTime.module.css

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

package/src/components/NSBoxDateTime.tsx

@@ -1,117 +1,117 @@
-"use client";
-
-import { NamingConvention, TimeOperation } from "namirasoft-core";
-import React, { createRef } from "react";
-import { DateTimeFormatter } from "../main";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { IValidationProps } from "../props/IValidationProps";
-import { Validator } from "../Validator";
-import { INSBox } from "./INSBox";
-import StylesNSBox from "./NSBox.module.css";
-import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
-import "./NSBoxDateTime.module.css";
-import { safeMenuMenuItem } from "./NSMenuButton";
-
-export interface NSBoxDateTimeProps extends IBaseComponentProps, IValidationProps, INSBoxBaseLayoutProps<NSBoxDateTime, Date>
-{
-    input?: IBaseComponentProps;
-}
-
-export interface NSBoxDateTimeState
-{
-    value: Date | null;
-}
-
-export class NSBoxDateTime extends React.Component<NSBoxDateTimeProps, NSBoxDateTimeState> implements INSBox
-{
-    NSBoxBaseLayout_Main = createRef<NSBoxBaseLayout>();
-    constructor(props: NSBoxDateTimeProps)
-    {
-        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?.toLocaleString(), this.props) ||
-            Validator.getErrorDateTime(this.props.title, this.state.value)
-        );
-    }
-    getValue(checkError: boolean = true): Date | null
-    {
-        if (this.props.nullable)
-            if (this.NSBoxBaseLayout_Main.current?.isNull())
-                return null;
-        return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.state.value);
-    }
-    setValue(value: Date | string | null, callback?: () => void): void
-    {
-        if (this.props.nullable)
-            this.NSBoxBaseLayout_Main.current?.setNull(value == null);
-
-        let value_date = value ? new Date(value) : null;
-        this.setState({ value: value_date }, () =>
-        {
-            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() ?? "" };
-
-        function getFormattedValue(datetime: Date | null)
-        {
-            if (datetime)
-                try
-                {
-                    return TimeOperation.format(datetime, "YYYY-MM-DDTHH:mm")
-                } catch (error)
-                {
-                }
-            return "";
-        }
-
-        return (
-            <NSBoxBaseLayout
-                ref={this.NSBoxBaseLayout_Main}
-                {...this.props}
-                menu={menu}
-                getValue={() => new DateTimeFormatter().format(this.getValue(false))}
-            >
-                <input
-                    id={this.props.input?.id}
-                    name={this.props.input?.name}
-                    type="datetime-local"
-                    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={getFormattedValue(this.state.value)}
-                    onChange={e => this.setValue(e.target.value)}
-                    onClick={() => { this.props.onClicked?.(this); }}
-                    style={{
-                        background: `url("https://static.namirasoft.com/image/concept/type/date-time.png") white no-repeat scroll center right 4px`,
-                        backgroundSize: "24px",
-                        paddingRight: "8px",
-                        ...this.props.input?.style
-                    }}
-                />
-            </NSBoxBaseLayout>
-        );
-    }
+"use client";
+
+import { NamingConvention, TimeOperation } from "namirasoft-core";
+import React, { createRef } from "react";
+import { DateTimeFormatter } from "../main";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IValidationProps } from "../props/IValidationProps";
+import { Validator } from "../Validator";
+import { INSBox } from "./INSBox";
+import StylesNSBox from "./NSBox.module.css";
+import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
+import "./NSBoxDateTime.module.css";
+import { safeMenuMenuItem } from "./NSMenuButton";
+
+export interface NSBoxDateTimeProps extends IBaseComponentProps, IValidationProps, INSBoxBaseLayoutProps<NSBoxDateTime, Date>
+{
+    input?: IBaseComponentProps;
+}
+
+export interface NSBoxDateTimeState
+{
+    value: Date | null;
+}
+
+export class NSBoxDateTime extends React.Component<NSBoxDateTimeProps, NSBoxDateTimeState> implements INSBox
+{
+    NSBoxBaseLayout_Main = createRef<NSBoxBaseLayout>();
+    constructor(props: NSBoxDateTimeProps)
+    {
+        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?.toLocaleString(), this.props) ||
+            Validator.getErrorDateTime(this.props.title, this.state.value)
+        );
+    }
+    getValue(checkError: boolean = true): Date | null
+    {
+        if (this.props.nullable)
+            if (this.NSBoxBaseLayout_Main.current?.isNull())
+                return null;
+        return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.state.value);
+    }
+    setValue(value: Date | string | null, callback?: () => void): void
+    {
+        if (this.props.nullable)
+            this.NSBoxBaseLayout_Main.current?.setNull(value == null);
+
+        let value_date = value ? new Date(value) : null;
+        this.setState({ value: value_date }, () =>
+        {
+            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() ?? "" };
+
+        function getFormattedValue(datetime: Date | null)
+        {
+            if (datetime)
+                try
+                {
+                    return TimeOperation.format(datetime, "YYYY-MM-DDTHH:mm")
+                } catch (error)
+                {
+                }
+            return "";
+        }
+
+        return (
+            <NSBoxBaseLayout
+                ref={this.NSBoxBaseLayout_Main}
+                {...this.props}
+                menu={menu}
+                getValue={() => new DateTimeFormatter().format(this.getValue(false))}
+            >
+                <input
+                    id={this.props.input?.id}
+                    name={this.props.input?.name}
+                    type="datetime-local"
+                    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={getFormattedValue(this.state.value)}
+                    onChange={e => this.setValue(e.target.value)}
+                    onClick={() => { this.props.onClicked?.(this); }}
+                    style={{
+                        background: `url("https://static.namirasoft.com/image/concept/type/date-time.png") white no-repeat scroll center right 4px`,
+                        backgroundSize: "24px",
+                        paddingRight: "8px",
+                        ...this.props.input?.style
+                    }}
+                />
+            </NSBoxBaseLayout>
+        );
+    }
 }