namirasoft-site-react 1.5.27 → 1.5.28

package/src/components/NSBoxDateRangeBase.tsx

@@ -1,237 +1,237 @@
-"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 NSBoxDateRangeStringValue
-{
-    from: string;
-    to: string;
-}
-
-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);
-        this.getValueString = this.getValueString.bind(this);
-        this.setValueString = this.setValueString.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?.();
-        });
-    }
-
-    getValueString(checkError: boolean = true): NSBoxDateRangeStringValue | null
-    {
-        const value = this.getValue(checkError);
-        if (value?.from && value?.to)
-            try
-            {
-                const fmt = this.getStringFormat();
-                return { from: TimeOperation.format(value.from, fmt), to: TimeOperation.format(value.to, fmt) };
-            }
-            catch { }
-        return null;
-    }
-
-    setValueString(value: NSBoxDateRangeStringValue | null, callback?: () => void): void
-    {
-        if (!value || !value.from || !value.to)
-        {
-            this.setValue(null, callback);
-            return;
-        }
-        const fmt = this.getStringFormat();
-        const from = dayjs(value.from, fmt).toDate();
-        const to = dayjs(value.to, fmt).toDate();
-        if (!isNaN(from.getTime()) && !isNaN(to.getTime()))
-            this.setValue({ from, to }, callback);
-        else
-            this.setValue(null, callback);
-    }
-
-    setDisabled(disabled: boolean): void
-    {
-        this.NSBoxBaseLayout_Main.current?.setDisabled(disabled);
-    }
-
-    protected abstract getFormat(): string;
-    protected getStringFormat(): string { return this.getFormat(); }
-    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 NSBoxDateRangeStringValue
+{
+    from: string;
+    to: string;
+}
+
+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);
+        this.getValueString = this.getValueString.bind(this);
+        this.setValueString = this.setValueString.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?.();
+        });
+    }
+
+    getValueString(checkError: boolean = true): NSBoxDateRangeStringValue | null
+    {
+        const value = this.getValue(checkError);
+        if (value?.from && value?.to)
+            try
+            {
+                const fmt = this.getStringFormat();
+                return { from: TimeOperation.format(value.from, fmt), to: TimeOperation.format(value.to, fmt) };
+            }
+            catch { }
+        return null;
+    }
+
+    setValueString(value: NSBoxDateRangeStringValue | null, callback?: () => void): void
+    {
+        if (!value || !value.from || !value.to)
+        {
+            this.setValue(null, callback);
+            return;
+        }
+        const fmt = this.getStringFormat();
+        const from = dayjs(value.from, fmt).toDate();
+        const to = dayjs(value.to, fmt).toDate();
+        if (!isNaN(from.getTime()) && !isNaN(to.getTime()))
+            this.setValue({ from, to }, callback);
+        else
+            this.setValue(null, callback);
+    }
+
+    setDisabled(disabled: boolean): void
+    {
+        this.NSBoxBaseLayout_Main.current?.setDisabled(disabled);
+    }
+
+    protected abstract getFormat(): string;
+    protected getStringFormat(): string { return this.getFormat(); }
+    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;
 }