namirasoft-site-react 1.4.552 → 1.4.554

package/src/components/NSBoxTime.tsx

@@ -1,107 +1,107 @@
-"use client";
-
-import React, { createRef } from "react";
-import "./NSBoxTime.module.css"
-import StylesNSBox from "./NSBox.module.css";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { IValidationProps } from "../props/IValidationProps";
-import { IValidationStringProps } from "../props/IValidationStringProps";
-import { Validator } from "../Validator";
-import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
-import { safeMenuMenuItem } from "./NSMenuButton";
-import { NamingConvention } from "namirasoft-core";
-import { INSBox } from "./INSBox";
-import { TimeFormatter } from "../main";
-
-export interface NSBoxTimeProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, INSBoxBaseLayoutProps<NSBoxTime, string>
-{
-	input?: IBaseComponentProps;
-}
-
-export interface NSBoxTimeState
-{
-	value: string | null;
-}
-
-export class NSBoxTime extends React.Component<NSBoxTimeProps, NSBoxTimeState> implements INSBox
-{
-	NSBoxBaseLayout_Main = createRef<NSBoxBaseLayout>();
-	constructor(props: NSBoxTimeProps)
-	{
-		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.getErrorString(this.props.title, this.state.value, this.props) ||
-			Validator.getErrorTime(this.props.title, this.state.value, this.props.required)
-		);
-	}
-	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 ?? "" }
-
-		return (
-			<NSBoxBaseLayout
-				ref={this.NSBoxBaseLayout_Main}
-				{...this.props}
-				menu={menu}
-				getValue={() => new TimeFormatter().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="5"
-					style={{
-						background: `url("https://static.namirasoft.com/image/concept/type/time.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 "./NSBoxTime.module.css"
+import StylesNSBox from "./NSBox.module.css";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IValidationProps } from "../props/IValidationProps";
+import { IValidationStringProps } from "../props/IValidationStringProps";
+import { Validator } from "../Validator";
+import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
+import { safeMenuMenuItem } from "./NSMenuButton";
+import { NamingConvention } from "namirasoft-core";
+import { INSBox } from "./INSBox";
+import { TimeFormatter } from "../main";
+
+export interface NSBoxTimeProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, INSBoxBaseLayoutProps<NSBoxTime, string>
+{
+	input?: IBaseComponentProps;
+}
+
+export interface NSBoxTimeState
+{
+	value: string | null;
+}
+
+export class NSBoxTime extends React.Component<NSBoxTimeProps, NSBoxTimeState> implements INSBox
+{
+	NSBoxBaseLayout_Main = createRef<NSBoxBaseLayout>();
+	constructor(props: NSBoxTimeProps)
+	{
+		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.getErrorString(this.props.title, this.state.value, this.props) ||
+			Validator.getErrorTime(this.props.title, this.state.value, this.props.required)
+		);
+	}
+	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 ?? "" }
+
+		return (
+			<NSBoxBaseLayout
+				ref={this.NSBoxBaseLayout_Main}
+				{...this.props}
+				menu={menu}
+				getValue={() => new TimeFormatter().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="5"
+					style={{
+						background: `url("https://static.namirasoft.com/image/concept/type/time.png") white no-repeat scroll center right 4px`,
+						backgroundSize: "24px",
+						paddingRight: "7px",
+						...this.props.input?.style
+					}}
+				/>
+			</NSBoxBaseLayout>
+		);
+	}
 }

package/src/components/NSBoxTimeRange.tsx

@@ -1,221 +1,221 @@
-"use client";
-
-import { TimePicker } from 'antd';
-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 { Validator } from '../Validator';
-import { INSBox } from './INSBox';
-import StylesNSBox from './NSBox.module.css';
-import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from './NSBoxBaseLayout';
-import Styles from './NSBoxDateRangeBase.module.css';
-import { NSBoxDateRangePreset } from './NSBoxDateRangeBase';
-import { safeMenuMenuItem } from './NSMenuButton';
-
-export interface NSBoxTimeRangeValue
-{
-    from: string;
-    to: string;
-}
-
-export interface NSBoxTimeRangeProps extends IBaseComponentProps, IValidationProps, INSBoxBaseLayoutProps<NSBoxTimeRange, NSBoxTimeRangeValue>
-{
-    preset?: boolean;
-    presets?: NSBoxDateRangePreset[];
-    maxRangeSeconds?: number;
-}
-
-export interface NSBoxTimeRangeState
-{
-    value: NSBoxTimeRangeValue | null;
-}
-
-export class NSBoxTimeRange extends Component<NSBoxTimeRangeProps, NSBoxTimeRangeState> implements INSBox
-{
-    NSBoxBaseLayout_Main = createRef<NSBoxBaseLayout>();
-    private static readonly FORMAT = 'HH:mm:ss';
-
-    constructor(props: NSBoxTimeRangeProps)
-    {
-        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: NSBoxTimeRangeValue): boolean
-    {
-        return !value || !value.from || !value.to;
-    }
-
-    getError(): string | null
-    {
-        const { title, required, maxRangeSeconds } = this.props;
-        const { value } = this.state;
-        if (required && (!value || !value.from || !value.to))
-            return `${title} is required.`;
-
-        const fromErr = Validator.getErrorTime(title, value?.from, false);
-        if (fromErr) return fromErr;
-
-        const toErr = Validator.getErrorTime(title, value?.to, false);
-        if (toErr) return toErr;
-
-        if (maxRangeSeconds && value?.from && value?.to)
-        {
-            const toSeconds = (t: string) => t.split(':').reduce((acc, v, i) => acc + Number(v) * [3600, 60, 1][i], 0);
-            if (toSeconds(value.to) - toSeconds(value.from) > maxRangeSeconds)
-            {
-                const h = Math.floor(maxRangeSeconds / 3600).toString().padStart(2, '0');
-                const m = Math.floor((maxRangeSeconds % 3600) / 60).toString().padStart(2, '0');
-                const s = (maxRangeSeconds % 60).toString().padStart(2, '0');
-                return `${title} range must not exceed ${h}:${m}:${s}.`;
-            }
-        }
-        return null;
-    }
-
-    getValue(checkError: boolean = true): NSBoxTimeRangeValue | null
-    {
-        if (this.props.nullable)
-            if (this.NSBoxBaseLayout_Main.current?.isNull())
-                return null;
-        return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.state.value);
-    }
-
-    setValue(value: NSBoxTimeRangeValue | 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);
-    }
-
-    private toDayjsValue(): [Dayjs, Dayjs] | null
-    {
-        const { value } = this.state;
-        if (!value?.from || !value?.to) return null;
-        return [dayjs(value.from, NSBoxTimeRange.FORMAT), dayjs(value.to, NSBoxTimeRange.FORMAT)];
-    }
-
-    private getBuiltinPresets(): { label: string; title: string; from: string; to: string }[]
-    {
-        const fmt = NSBoxTimeRange.FORMAT;
-        const now = new Date();
-        now.setSeconds(0, 0);
-        const to = TimeOperation.format(now, fmt);
-        return [
-            { label: '15M', title: 'Last 15 Min', from: TimeOperation.format(TimeOperation.minutesAgo(15, now), fmt), to },
-            { label: '30M', title: 'Last 30 Min', from: TimeOperation.format(TimeOperation.minutesAgo(30, now), fmt), to },
-            { label: '1H', title: 'Last 1 Hour', from: TimeOperation.format(TimeOperation.hoursAgo(1, now), fmt), to },
-            { label: '2H', title: 'Last 2 Hours', from: TimeOperation.format(TimeOperation.hoursAgo(2, now), fmt), to },
-            { label: '4H', title: 'Last 4 Hours', from: TimeOperation.format(TimeOperation.hoursAgo(4, now), fmt), to },
-            { label: '6H', title: 'Last 6 Hours', from: TimeOperation.format(TimeOperation.hoursAgo(6, now), fmt), to },
-            { label: '12H', title: 'Last 12 Hours', from: TimeOperation.format(TimeOperation.hoursAgo(12, now), fmt), to },
-        ];
-    }
-
-    private renderPresets(): React.ReactNode
-    {
-        const { preset, presets: customPresets } = this.props;
-        const fmt = NSBoxTimeRange.FORMAT;
-
-        const builtinPresets = preset ? this.getBuiltinPresets() : [];
-
-        const resolvedCustom = (customPresets ?? []).map(p => ({
-            shortName: p.shortName,
-            title: p.title,
-            from: TimeOperation.format(p.getFrom(), fmt),
-            to: TimeOperation.format(p.getTo(), fmt),
-        }));
-
-        const showDivider = builtinPresets.length > 0 && resolvedCustom.length > 0;
-
-        return (
-            <div className={Styles.ns_preset_container}>
-                {builtinPresets.map(p =>
-                {
-                    const isActive = this.state.value?.from === p.from && this.state.value?.to === p.to;
-                    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 isActive = this.state.value?.from === p.from && this.state.value?.to === p.to;
-                    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()
-    {
-        let menu = safeMenuMenuItem(this.props, () => { });
-        if (!menu.builtin.copy)
-            menu.builtin.copy = {
-                enabled: true,
-                getValue: () => this.state.value ? `${this.state.value.from} to ${this.state.value.to}` : '',
-            };
-
-        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 ? `${this.state.value.from} - ${this.state.value.to}` : null}
-            >
-                <div className={Styles.ns_wrapper}>
-                    <TimePicker.RangePicker
-                        className={`${StylesNSBox.ns_box_input} ${Styles.ns_picker}`}
-                        variant="borderless"
-                        value={this.toDayjsValue()}
-                        format={NSBoxTimeRange.FORMAT}
-                        onChange={(_, timeStrings) =>
-                        {
-                            if (timeStrings?.[0] && timeStrings?.[1])
-                                this.setValue({ from: timeStrings[0], to: timeStrings[1] });
-                            else
-                                this.setValue(null);
-                        }}
-                    />
-                </div>
-                {showPresets && this.renderPresets()}
-            </NSBoxBaseLayout>
-        );
-    }
+"use client";
+
+import { TimePicker } from 'antd';
+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 { Validator } from '../Validator';
+import { INSBox } from './INSBox';
+import StylesNSBox from './NSBox.module.css';
+import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from './NSBoxBaseLayout';
+import Styles from './NSBoxDateRangeBase.module.css';
+import { NSBoxDateRangePreset } from './NSBoxDateRangeBase';
+import { safeMenuMenuItem } from './NSMenuButton';
+
+export interface NSBoxTimeRangeValue
+{
+    from: string;
+    to: string;
+}
+
+export interface NSBoxTimeRangeProps extends IBaseComponentProps, IValidationProps, INSBoxBaseLayoutProps<NSBoxTimeRange, NSBoxTimeRangeValue>
+{
+    preset?: boolean;
+    presets?: NSBoxDateRangePreset[];
+    maxRangeSeconds?: number;
+}
+
+export interface NSBoxTimeRangeState
+{
+    value: NSBoxTimeRangeValue | null;
+}
+
+export class NSBoxTimeRange extends Component<NSBoxTimeRangeProps, NSBoxTimeRangeState> implements INSBox
+{
+    NSBoxBaseLayout_Main = createRef<NSBoxBaseLayout>();
+    private static readonly FORMAT = 'HH:mm:ss';
+
+    constructor(props: NSBoxTimeRangeProps)
+    {
+        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: NSBoxTimeRangeValue): boolean
+    {
+        return !value || !value.from || !value.to;
+    }
+
+    getError(): string | null
+    {
+        const { title, required, maxRangeSeconds } = this.props;
+        const { value } = this.state;
+        if (required && (!value || !value.from || !value.to))
+            return `${title} is required.`;
+
+        const fromErr = Validator.getErrorTime(title, value?.from, false);
+        if (fromErr) return fromErr;
+
+        const toErr = Validator.getErrorTime(title, value?.to, false);
+        if (toErr) return toErr;
+
+        if (maxRangeSeconds && value?.from && value?.to)
+        {
+            const toSeconds = (t: string) => t.split(':').reduce((acc, v, i) => acc + Number(v) * [3600, 60, 1][i], 0);
+            if (toSeconds(value.to) - toSeconds(value.from) > maxRangeSeconds)
+            {
+                const h = Math.floor(maxRangeSeconds / 3600).toString().padStart(2, '0');
+                const m = Math.floor((maxRangeSeconds % 3600) / 60).toString().padStart(2, '0');
+                const s = (maxRangeSeconds % 60).toString().padStart(2, '0');
+                return `${title} range must not exceed ${h}:${m}:${s}.`;
+            }
+        }
+        return null;
+    }
+
+    getValue(checkError: boolean = true): NSBoxTimeRangeValue | null
+    {
+        if (this.props.nullable)
+            if (this.NSBoxBaseLayout_Main.current?.isNull())
+                return null;
+        return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.state.value);
+    }
+
+    setValue(value: NSBoxTimeRangeValue | 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);
+    }
+
+    private toDayjsValue(): [Dayjs, Dayjs] | null
+    {
+        const { value } = this.state;
+        if (!value?.from || !value?.to) return null;
+        return [dayjs(value.from, NSBoxTimeRange.FORMAT), dayjs(value.to, NSBoxTimeRange.FORMAT)];
+    }
+
+    private getBuiltinPresets(): { label: string; title: string; from: string; to: string }[]
+    {
+        const fmt = NSBoxTimeRange.FORMAT;
+        const now = new Date();
+        now.setSeconds(0, 0);
+        const to = TimeOperation.format(now, fmt);
+        return [
+            { label: '15M', title: 'Last 15 Min', from: TimeOperation.format(TimeOperation.minutesAgo(15, now), fmt), to },
+            { label: '30M', title: 'Last 30 Min', from: TimeOperation.format(TimeOperation.minutesAgo(30, now), fmt), to },
+            { label: '1H', title: 'Last 1 Hour', from: TimeOperation.format(TimeOperation.hoursAgo(1, now), fmt), to },
+            { label: '2H', title: 'Last 2 Hours', from: TimeOperation.format(TimeOperation.hoursAgo(2, now), fmt), to },
+            { label: '4H', title: 'Last 4 Hours', from: TimeOperation.format(TimeOperation.hoursAgo(4, now), fmt), to },
+            { label: '6H', title: 'Last 6 Hours', from: TimeOperation.format(TimeOperation.hoursAgo(6, now), fmt), to },
+            { label: '12H', title: 'Last 12 Hours', from: TimeOperation.format(TimeOperation.hoursAgo(12, now), fmt), to },
+        ];
+    }
+
+    private renderPresets(): React.ReactNode
+    {
+        const { preset, presets: customPresets } = this.props;
+        const fmt = NSBoxTimeRange.FORMAT;
+
+        const builtinPresets = preset ? this.getBuiltinPresets() : [];
+
+        const resolvedCustom = (customPresets ?? []).map(p => ({
+            shortName: p.shortName,
+            title: p.title,
+            from: TimeOperation.format(p.getFrom(), fmt),
+            to: TimeOperation.format(p.getTo(), fmt),
+        }));
+
+        const showDivider = builtinPresets.length > 0 && resolvedCustom.length > 0;
+
+        return (
+            <div className={Styles.ns_preset_container}>
+                {builtinPresets.map(p =>
+                {
+                    const isActive = this.state.value?.from === p.from && this.state.value?.to === p.to;
+                    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 isActive = this.state.value?.from === p.from && this.state.value?.to === p.to;
+                    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()
+    {
+        let menu = safeMenuMenuItem(this.props, () => { });
+        if (!menu.builtin.copy)
+            menu.builtin.copy = {
+                enabled: true,
+                getValue: () => this.state.value ? `${this.state.value.from} to ${this.state.value.to}` : '',
+            };
+
+        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 ? `${this.state.value.from} - ${this.state.value.to}` : null}
+            >
+                <div className={Styles.ns_wrapper}>
+                    <TimePicker.RangePicker
+                        className={`${StylesNSBox.ns_box_input} ${Styles.ns_picker}`}
+                        variant="borderless"
+                        value={this.toDayjsValue()}
+                        format={NSBoxTimeRange.FORMAT}
+                        onChange={(_, timeStrings) =>
+                        {
+                            if (timeStrings?.[0] && timeStrings?.[1])
+                                this.setValue({ from: timeStrings[0], to: timeStrings[1] });
+                            else
+                                this.setValue(null);
+                        }}
+                    />
+                </div>
+                {showPresets && this.renderPresets()}
+            </NSBoxBaseLayout>
+        );
+    }
 }