next-helios-fe 1.6.14 → 1.6.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -5,17 +5,20 @@ import { Icon } from "@iconify/react";
|
|
|
5
5
|
import dayjs from "dayjs";
|
|
6
6
|
|
|
7
7
|
export interface DateProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
8
|
+
label?: string;
|
|
8
9
|
options?: {
|
|
10
|
+
enableSelectRange?: boolean;
|
|
9
11
|
width?: "full" | "fit";
|
|
10
12
|
height?: "short" | "medium" | "high";
|
|
11
13
|
};
|
|
12
|
-
label?: string;
|
|
13
14
|
}
|
|
14
15
|
|
|
15
16
|
export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
|
|
16
|
-
const [tempValue, setTempValue] = useState<any>([
|
|
17
|
+
const [tempValue, setTempValue] = useState<any>([
|
|
18
|
+
dayjs().startOf("day"),
|
|
19
|
+
dayjs().endOf("day"),
|
|
20
|
+
]);
|
|
17
21
|
const [selectedRange, setSelectedRange] = useState<string | any[]>("Today");
|
|
18
|
-
const [manualDate, setManualDate] = useState<any>("");
|
|
19
22
|
const dropdownRef = useRef<HTMLButtonElement>(null);
|
|
20
23
|
const width = options?.width === "fit" ? "w-fit" : "w-full";
|
|
21
24
|
const height =
|
|
@@ -25,16 +28,6 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
|
|
|
25
28
|
? "py-2"
|
|
26
29
|
: "py-1.5";
|
|
27
30
|
|
|
28
|
-
useEffect(() => {
|
|
29
|
-
if (rest.value) {
|
|
30
|
-
setTempValue(rest.value as any);
|
|
31
|
-
return;
|
|
32
|
-
} else if (rest.defaultValue) {
|
|
33
|
-
setTempValue(rest.defaultValue as any);
|
|
34
|
-
return;
|
|
35
|
-
}
|
|
36
|
-
}, [rest.value, rest.defaultValue]);
|
|
37
|
-
|
|
38
31
|
useEffect(() => {
|
|
39
32
|
rest.onChange &&
|
|
40
33
|
rest.onChange({
|
|
@@ -62,9 +55,7 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
|
|
|
62
55
|
type="text"
|
|
63
56
|
className={`accent-primary w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
|
|
64
57
|
value={
|
|
65
|
-
selectedRange === "
|
|
66
|
-
? manualDate
|
|
67
|
-
: selectedRange === "Custom"
|
|
58
|
+
selectedRange === "Custom" || !options?.enableSelectRange
|
|
68
59
|
? `${
|
|
69
60
|
dayjs(tempValue[0]).format("MMM YYYY") ===
|
|
70
61
|
dayjs(tempValue[1]).format("MMM YYYY")
|
|
@@ -73,15 +64,7 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
|
|
|
73
64
|
} - ${dayjs(tempValue[1]).format("DD MMM YYYY")}`
|
|
74
65
|
: selectedRange
|
|
75
66
|
}
|
|
76
|
-
|
|
77
|
-
setManualDate(e.target.value);
|
|
78
|
-
}}
|
|
79
|
-
onKeyDown={(e) => {
|
|
80
|
-
if (e.key === "Backspace" && selectedRange !== "Manual Input") {
|
|
81
|
-
setSelectedRange("Manual Input");
|
|
82
|
-
}
|
|
83
|
-
}}
|
|
84
|
-
{...rest}
|
|
67
|
+
disabled={rest.disabled}
|
|
85
68
|
/>
|
|
86
69
|
<button
|
|
87
70
|
type="button"
|
|
@@ -110,77 +93,94 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
|
|
|
110
93
|
</button>
|
|
111
94
|
}
|
|
112
95
|
>
|
|
113
|
-
<div
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
96
|
+
<div
|
|
97
|
+
className={`flex gap-2 md:w-full overflow-auto md:overflow-clip ${
|
|
98
|
+
options?.enableSelectRange ? "w-80" : "w-full"
|
|
99
|
+
}`}
|
|
100
|
+
>
|
|
101
|
+
{options?.enableSelectRange && (
|
|
102
|
+
<div className="w-full">
|
|
103
|
+
<button
|
|
104
|
+
className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
|
|
105
|
+
disabled={selectedRange === "Today"}
|
|
106
|
+
onClick={() => {
|
|
107
|
+
setSelectedRange("Today");
|
|
108
|
+
setTempValue([
|
|
109
|
+
dayjs().startOf("day"),
|
|
110
|
+
dayjs().endOf("day"),
|
|
111
|
+
]);
|
|
112
|
+
}}
|
|
113
|
+
>
|
|
114
|
+
Today
|
|
115
|
+
</button>
|
|
116
|
+
<button
|
|
117
|
+
className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
|
|
118
|
+
disabled={selectedRange === "Yesterday"}
|
|
119
|
+
onClick={() => {
|
|
120
|
+
setSelectedRange("Yesterday");
|
|
121
|
+
setTempValue([
|
|
122
|
+
dayjs().subtract(1, "days").startOf("day"),
|
|
123
|
+
dayjs().subtract(1, "days").endOf("day"),
|
|
124
|
+
]);
|
|
125
|
+
}}
|
|
126
|
+
>
|
|
127
|
+
Yesterday
|
|
128
|
+
</button>
|
|
129
|
+
<button
|
|
130
|
+
className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
|
|
131
|
+
disabled={selectedRange === "Last 7 days"}
|
|
132
|
+
onClick={() => {
|
|
133
|
+
setSelectedRange("Last 7 days");
|
|
134
|
+
setTempValue([
|
|
135
|
+
dayjs().subtract(7, "days").startOf("day"),
|
|
136
|
+
dayjs().endOf("day"),
|
|
137
|
+
]);
|
|
138
|
+
}}
|
|
139
|
+
>
|
|
140
|
+
Last 7 days
|
|
141
|
+
</button>
|
|
142
|
+
<button
|
|
143
|
+
className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
|
|
144
|
+
disabled={selectedRange === "Last 30 days"}
|
|
145
|
+
onClick={() => {
|
|
146
|
+
setSelectedRange("Last 30 days");
|
|
147
|
+
setTempValue([
|
|
148
|
+
dayjs().subtract(1, "months").startOf("day"),
|
|
149
|
+
dayjs().endOf("day"),
|
|
150
|
+
]);
|
|
151
|
+
}}
|
|
152
|
+
>
|
|
153
|
+
Last 30 days
|
|
154
|
+
</button>
|
|
155
|
+
<button
|
|
156
|
+
className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
|
|
157
|
+
disabled={selectedRange === "Custom"}
|
|
158
|
+
onClick={() => {
|
|
159
|
+
setSelectedRange("Custom");
|
|
160
|
+
setTempValue([
|
|
161
|
+
dayjs().startOf("day"),
|
|
162
|
+
dayjs().endOf("day"),
|
|
163
|
+
]);
|
|
164
|
+
}}
|
|
165
|
+
>
|
|
166
|
+
Custom
|
|
167
|
+
</button>
|
|
168
|
+
</div>
|
|
169
|
+
)}
|
|
178
170
|
<Calendar
|
|
179
|
-
options={{
|
|
180
|
-
|
|
171
|
+
options={{
|
|
172
|
+
enableSelectRange: options?.enableSelectRange ?? false,
|
|
173
|
+
}}
|
|
174
|
+
value={
|
|
175
|
+
options?.enableSelectRange ? tempValue : tempValue[0]
|
|
176
|
+
}
|
|
181
177
|
onChange={(value) => {
|
|
182
178
|
setSelectedRange("Custom");
|
|
183
|
-
|
|
179
|
+
if (options?.enableSelectRange) {
|
|
180
|
+
setTempValue([dayjs(value[0]), dayjs(value[1])]);
|
|
181
|
+
} else {
|
|
182
|
+
setTempValue([dayjs(value), dayjs(value)]);
|
|
183
|
+
}
|
|
184
184
|
}}
|
|
185
185
|
/>
|
|
186
186
|
</div>
|