namirasoft-site-react 1.4.553 → 1.4.554

package/src/components/NSBoxDateRange.tsx

@@ -1,89 +1,89 @@
-"use client";
-
-import { DatePicker } from 'antd';
-import dayjs from 'dayjs';
-import { TimeOperation } from 'namirasoft-core';
-import { Validator } from '../Validator';
-import StylesNSBox from './NSBox.module.css';
-import { NSBoxDateRangeBase, NSBoxDateRangeBaseProps, NSBoxDateRangeValue } from './NSBoxDateRangeBase';
-import Styles from './NSBoxDateRangeBase.module.css';
-
-export interface NSBoxDateRangeProps extends NSBoxDateRangeBaseProps<NSBoxDateRange> { }
-
-export class NSBoxDateRange extends NSBoxDateRangeBase<NSBoxDateRangeProps>
-{
-    protected getFormat() { return 'YYYY-MM-DD'; }
-
-    private static startOfDay(date: Date): Date
-    {
-        return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
-    }
-
-    private static endOfDay(date: Date): Date
-    {
-        return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
-    }
-
-    protected override normalizeValue(value: NSBoxDateRangeValue): NSBoxDateRangeValue
-    {
-        return { from: NSBoxDateRange.startOfDay(value.from), to: NSBoxDateRange.endOfDay(value.to) };
-    }
-
-    override setValue(value: NSBoxDateRangeValue | null, callback?: () => void): void
-    {
-        super.setValue(value ? this.normalizeValue(value) : null, callback);
-    }
-
-    getError(): string | null
-    {
-        const fmt = this.getFormat();
-        const strValue = this.state.value
-            ? { from: TimeOperation.format(this.state.value.from, fmt), to: TimeOperation.format(this.state.value.to, fmt) }
-            : null;
-        const minDate = this.props.minDate ? TimeOperation.format(this.props.minDate, fmt) : undefined;
-        const maxDate = this.props.maxDate ? TimeOperation.format(this.props.maxDate, fmt) : undefined;
-        return Validator.getErrorDateRange(this.props.title, strValue, this.props.required, minDate, maxDate);
-    }
-
-    protected getBuiltinPresets()
-    {
-        const now = new Date();
-        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()
-    {
-        return (
-            <DatePicker.RangePicker
-                className={`${StylesNSBox.ns_box_input} ${Styles.ns_picker}`}
-                variant="borderless"
-                value={this.toDayjsValue()}
-                format={this.getFormat()}
-                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])
-                    {
-                        const parse = (str: string): Date =>
-                        {
-                            const [y, m, d] = str.split("-").map(Number);
-                            return TimeOperation.toDate(y, m, d);
-                        };
-                        this.setValue({ from: parse(dateStrings[0]), to: parse(dateStrings[1]) });
-                    }
-                    else
-                        this.setValue(null);
-                }}
-            />
-        );
-    }
+"use client";
+
+import { DatePicker } from 'antd';
+import dayjs from 'dayjs';
+import { TimeOperation } from 'namirasoft-core';
+import { Validator } from '../Validator';
+import StylesNSBox from './NSBox.module.css';
+import { NSBoxDateRangeBase, NSBoxDateRangeBaseProps, NSBoxDateRangeValue } from './NSBoxDateRangeBase';
+import Styles from './NSBoxDateRangeBase.module.css';
+
+export interface NSBoxDateRangeProps extends NSBoxDateRangeBaseProps<NSBoxDateRange> { }
+
+export class NSBoxDateRange extends NSBoxDateRangeBase<NSBoxDateRangeProps>
+{
+    protected getFormat() { return 'YYYY-MM-DD'; }
+
+    private static startOfDay(date: Date): Date
+    {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
+    }
+
+    private static endOfDay(date: Date): Date
+    {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
+    }
+
+    protected override normalizeValue(value: NSBoxDateRangeValue): NSBoxDateRangeValue
+    {
+        return { from: NSBoxDateRange.startOfDay(value.from), to: NSBoxDateRange.endOfDay(value.to) };
+    }
+
+    override setValue(value: NSBoxDateRangeValue | null, callback?: () => void): void
+    {
+        super.setValue(value ? this.normalizeValue(value) : null, callback);
+    }
+
+    getError(): string | null
+    {
+        const fmt = this.getFormat();
+        const strValue = this.state.value
+            ? { from: TimeOperation.format(this.state.value.from, fmt), to: TimeOperation.format(this.state.value.to, fmt) }
+            : null;
+        const minDate = this.props.minDate ? TimeOperation.format(this.props.minDate, fmt) : undefined;
+        const maxDate = this.props.maxDate ? TimeOperation.format(this.props.maxDate, fmt) : undefined;
+        return Validator.getErrorDateRange(this.props.title, strValue, this.props.required, minDate, maxDate);
+    }
+
+    protected getBuiltinPresets()
+    {
+        const now = new Date();
+        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()
+    {
+        return (
+            <DatePicker.RangePicker
+                className={`${StylesNSBox.ns_box_input} ${Styles.ns_picker}`}
+                variant="borderless"
+                value={this.toDayjsValue()}
+                format={this.getFormat()}
+                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])
+                    {
+                        const parse = (str: string): Date =>
+                        {
+                            const [y, m, d] = str.split("-").map(Number);
+                            return TimeOperation.toDate(y, m, d);
+                        };
+                        this.setValue({ from: parse(dateStrings[0]), to: parse(dateStrings[1]) });
+                    }
+                    else
+                        this.setValue(null);
+                }}
+            />
+        );
+    }
 }

package/src/components/NSBoxDateRangeBase.module.css

@@ -1,74 +1,74 @@
-.ns_wrapper {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-}
-
-.ns_preset_container {
-    margin-top: -8px;
-    padding-top: 8px;
-    display: flex;
-    justify-content: space-evenly;
-    flex-wrap: nowrap;
-    border: 1px solid #d9d9d9;
-    border-top: none;
-    border-radius: 0 0 6px 6px;
-    overflow-x: auto;
-    overflow-y: hidden;
-    background: white;
-    scrollbar-width: thin;
-    scrollbar-color: #d9d9d9 transparent;
-}
-
-.ns_preset_divider {
-    width: 1px;
-    height: 20px;
-    background: #d9d9d9;
-    flex-shrink: 0;
-}
-
-.ns_preset_btn {
-    flex-shrink: 0;
-    padding: 4px 8px;
-    border: none;
-    background: transparent;
-    color: #595959;
-    cursor: pointer;
-    font-size: 12px;
-    font-weight: 500;
-    white-space: nowrap;
-    line-height: 16px;
-    transition: color 0.15s, background-color 0.15s;
-}
-
-.ns_preset_btn:hover {
-    color: #4096ff;
-    background: #f0f5ff;
-}
-
-.ns_preset_btn_active {
-    color: #4096ff;
-    background: #e6f4ff;
-}
-
-.ns_picker {
-    padding: 0 8px 0 12px !important;
-    background-color: white !important;
-    cursor: pointer;
-}
-
-.ns_picker:focus-within {
-    border-color: rgba(0, 0, 0, 1) !important;
-    outline: solid 1px #4096ff !important;
-    box-shadow: none !important;
-}
-
-.ns_picker :global(.ant-picker-input > input) {
-    font-size: 16px;
-    font-weight: 400;
-    color: #141B5C;
-}
-
-.ns_picker :global(.ant-picker-active-bar) {
-    background: #4096ff;
+.ns_wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.ns_preset_container {
+    margin-top: -8px;
+    padding-top: 8px;
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: nowrap;
+    border: 1px solid #d9d9d9;
+    border-top: none;
+    border-radius: 0 0 6px 6px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    background: white;
+    scrollbar-width: thin;
+    scrollbar-color: #d9d9d9 transparent;
+}
+
+.ns_preset_divider {
+    width: 1px;
+    height: 20px;
+    background: #d9d9d9;
+    flex-shrink: 0;
+}
+
+.ns_preset_btn {
+    flex-shrink: 0;
+    padding: 4px 8px;
+    border: none;
+    background: transparent;
+    color: #595959;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 500;
+    white-space: nowrap;
+    line-height: 16px;
+    transition: color 0.15s, background-color 0.15s;
+}
+
+.ns_preset_btn:hover {
+    color: #4096ff;
+    background: #f0f5ff;
+}
+
+.ns_preset_btn_active {
+    color: #4096ff;
+    background: #e6f4ff;
+}
+
+.ns_picker {
+    padding: 0 8px 0 12px !important;
+    background-color: white !important;
+    cursor: pointer;
+}
+
+.ns_picker:focus-within {
+    border-color: rgba(0, 0, 0, 1) !important;
+    outline: solid 1px #4096ff !important;
+    box-shadow: none !important;
+}
+
+.ns_picker :global(.ant-picker-input > input) {
+    font-size: 16px;
+    font-weight: 400;
+    color: #141B5C;
+}
+
+.ns_picker :global(.ant-picker-active-bar) {
+    background: #4096ff;
 }