next-helios-fe 1.7.4 → 1.7.6

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.
Files changed (8) hide show
  1. package/dist/components/calendar/calendar/index.d.ts +2 -0
  2. package/dist/components/form/input/date.d.ts +4 -0
  3. package/dist/index.js +1 -1
  4. package/package.json +1 -1
  5. package/src/components/calendar/calendar/index.tsx +9 -0
  6. package/src/components/form/input/date.tsx +184 -81
  7. package/src/components/form/input/time.tsx +136 -43
  8. package/src/components/form/other/autocomplete.tsx +5 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.7.4",
3
+ "version": "1.7.6",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/calendar/calendar/index.tsx CHANGED
@@ -2,10 +2,13 @@
2
2
  import React from "react";
3
3
  import Cl from "react-calendar";
4
4
  import "../../../styles";
5
+ import dayjs from "dayjs";
5
6
 
6
7
  interface CalendarProps {
7
8
  options?: {
8
9
  enableSelectRange?: boolean;
10
+ disablePast?: boolean;
11
+ disableFuture?: boolean;
9
12
  };
10
13
  value?: any;
11
14
  onChange?: (date: any) => void;
@@ -19,6 +22,12 @@ export const Calendar: React.FC<CalendarProps> = ({
19
22
  return (
20
23
  <Cl
21
24
  selectRange={options?.enableSelectRange ?? false}
25
+ minDate={
26
+ options?.disablePast ? dayjs().startOf("day").toDate() : undefined
27
+ }
28
+ maxDate={
29
+ options?.disableFuture ? dayjs().endOf("day").toDate() : undefined
30
+ }
22
31
  value={value}
23
32
  onChange={onChange}
24
33
  />
package/src/components/form/input/date.tsx CHANGED
@@ -9,22 +9,27 @@ export interface DateProps extends React.InputHTMLAttributes<HTMLInputElement> {
9
9
  description?: string;
10
10
  options?: {
11
11
  enableSelectRange?: boolean;
12
+ disablePast?: boolean;
13
+ disableFuture?: boolean;
12
14
  width?: "full" | "fit";
13
15
  height?: "short" | "medium" | "high";
14
16
  };
17
+ value?: any;
18
+ defaultValue?: any;
15
19
  }
16
20
 
17
21
  export const Date: React.FC<DateProps> = ({
18
- options,
19
22
  label,
20
23
  description,
24
+ options,
25
+ value,
26
+ defaultValue,
21
27
  ...rest
22
28
  }) => {
23
29
  const [tempValue, setTempValue] = useState<any>([
24
30
  dayjs().startOf("day"),
25
31
  dayjs().endOf("day"),
26
32
  ]);
27
- const [selectedRange, setSelectedRange] = useState<string | any[]>("Today");
28
33
  const dropdownRef = useRef<HTMLButtonElement>(null);
29
34
  const width = options?.width === "fit" ? "w-fit" : "w-full";
30
35
  const height =
@@ -35,13 +40,48 @@ export const Date: React.FC<DateProps> = ({
35
40
  : "py-1.5";
36
41
 
37
42
  useEffect(() => {
38
- rest.onChange &&
39
- rest.onChange({
40
- target: {
41
- value: tempValue,
42
- } as HTMLInputElement,
43
- } as React.ChangeEvent<HTMLInputElement>);
44
- }, [tempValue]);
43
+ if (value && value.length === 2) {
44
+ setTempValue([
45
+ dayjs(value[0]).startOf("day"),
46
+ dayjs(value[1]).startOf("day"),
47
+ ] as any);
48
+ } else if (defaultValue && defaultValue.length === 2) {
49
+ setTempValue([
50
+ dayjs(defaultValue[0]).startOf("day"),
51
+ dayjs(defaultValue[1]).startOf("day"),
52
+ ] as any);
53
+ }
54
+ }, [value, defaultValue]);
55
+
56
+ const dateRangeLabel = (data: any) => {
57
+ if (
58
+ dayjs(data[0]).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD") &&
59
+ dayjs(data[1]).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD")
60
+ ) {
61
+ return "Today";
62
+ } else if (
63
+ dayjs(data[0]).format("YYYY-MM-DD") ===
64
+ dayjs().subtract(1, "days").format("YYYY-MM-DD") &&
65
+ dayjs(data[1]).format("YYYY-MM-DD") ===
66
+ dayjs().subtract(1, "days").format("YYYY-MM-DD")
67
+ ) {
68
+ return "Yesterday";
69
+ } else if (
70
+ dayjs(data[0]).format("YYYY-MM-DD") ===
71
+ dayjs().subtract(7, "days").format("YYYY-MM-DD") &&
72
+ dayjs(data[1]).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD")
73
+ ) {
74
+ return "Last 7 days";
75
+ } else if (
76
+ dayjs(data[0]).format("YYYY-MM-DD") ===
77
+ dayjs().subtract(1, "months").format("YYYY-MM-DD") &&
78
+ dayjs(data[1]).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD")
79
+ ) {
80
+ return "Last 30 days";
81
+ } else {
82
+ return "Custom";
83
+ }
84
+ };
45
85
 
46
86
  return (
47
87
  <div className="flex items-end">
@@ -73,14 +113,15 @@ export const Date: React.FC<DateProps> = ({
73
113
  type="text"
74
114
  className={`w-full ps-4 pe-14 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}`}
75
115
  value={
76
- selectedRange === "Custom" || !options?.enableSelectRange
116
+ dateRangeLabel(tempValue) === "Custom" ||
117
+ !options?.enableSelectRange
77
118
  ? `${
78
119
  dayjs(tempValue[0]).format("MMM YYYY") ===
79
120
  dayjs(tempValue[1]).format("MMM YYYY")
80
121
  ? dayjs(tempValue[0]).format("DD")
81
122
  : dayjs(tempValue[0]).format("DD MMM YYYY")
82
123
  } - ${dayjs(tempValue[1]).format("DD MMM YYYY")}`
83
- : selectedRange
124
+ : dateRangeLabel(tempValue)
84
125
  }
85
126
  disabled={rest.disabled}
86
127
  />
@@ -112,86 +153,148 @@ export const Date: React.FC<DateProps> = ({
112
153
  }
113
154
  >
114
155
  <div className="flex gap-2 w-fit overflow-auto md:overflow-clip">
115
- {options?.enableSelectRange && (
116
- <div className="w-40">
117
- <button
118
- className="w-40 my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
119
- disabled={selectedRange === "Today"}
120
- onClick={() => {
121
- setSelectedRange("Today");
122
- setTempValue([
123
- dayjs().startOf("day"),
124
- dayjs().endOf("day"),
125
- ]);
126
- }}
127
- >
128
- Today
129
- </button>
130
- <button
131
- className="w-40 my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
132
- disabled={selectedRange === "Yesterday"}
133
- onClick={() => {
134
- setSelectedRange("Yesterday");
135
- setTempValue([
136
- dayjs().subtract(1, "days").startOf("day"),
137
- dayjs().subtract(1, "days").endOf("day"),
138
- ]);
139
- }}
140
- >
141
- Yesterday
142
- </button>
143
- <button
144
- className="w-40 my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
145
- disabled={selectedRange === "Last 7 days"}
146
- onClick={() => {
147
- setSelectedRange("Last 7 days");
148
- setTempValue([
149
- dayjs().subtract(7, "days").startOf("day"),
150
- dayjs().endOf("day"),
151
- ]);
152
- }}
153
- >
154
- Last 7 days
155
- </button>
156
- <button
157
- className="w-40 my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
158
- disabled={selectedRange === "Last 30 days"}
159
- onClick={() => {
160
- setSelectedRange("Last 30 days");
161
- setTempValue([
162
- dayjs().subtract(1, "months").startOf("day"),
163
- dayjs().endOf("day"),
164
- ]);
165
- }}
166
- >
167
- Last 30 days
168
- </button>
169
- <button
170
- className="w-40 my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
171
- disabled={selectedRange === "Custom"}
172
- onClick={() => {
173
- setSelectedRange("Custom");
174
- setTempValue([
175
- dayjs().startOf("day"),
176
- dayjs().endOf("day"),
177
- ]);
178
- }}
179
- >
180
- Custom
181
- </button>
182
- </div>
183
- )}
156
+ {options?.enableSelectRange &&
157
+ !options.disablePast &&
158
+ !options.disableFuture && (
159
+ <div className="w-40">
160
+ <button
161
+ className="w-40 my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
162
+ disabled={dateRangeLabel(tempValue) === "Today"}
163
+ onClick={() => {
164
+ setTempValue([
165
+ dayjs().startOf("day"),
166
+ dayjs().endOf("day"),
167
+ ]);
168
+ if (rest.onChange) {
169
+ rest.onChange({
170
+ target: {
171
+ value: [
172
+ dayjs().startOf("day"),
173
+ dayjs().endOf("day"),
174
+ ],
175
+ } as any,
176
+ } as React.ChangeEvent<HTMLInputElement>);
177
+ }
178
+ }}
179
+ >
180
+ Today
181
+ </button>
182
+ <button
183
+ className="w-40 my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
184
+ disabled={dateRangeLabel(tempValue) === "Yesterday"}
185
+ onClick={() => {
186
+ setTempValue([
187
+ dayjs().subtract(1, "days").startOf("day"),
188
+ dayjs().subtract(1, "days").endOf("day"),
189
+ ]);
190
+ if (rest.onChange) {
191
+ rest.onChange({
192
+ target: {
193
+ value: [
194
+ dayjs().subtract(1, "days").startOf("day"),
195
+ dayjs().subtract(1, "days").endOf("day"),
196
+ ],
197
+ } as any,
198
+ } as React.ChangeEvent<HTMLInputElement>);
199
+ }
200
+ }}
201
+ >
202
+ Yesterday
203
+ </button>
204
+ <button
205
+ className="w-40 my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
206
+ disabled={dateRangeLabel(tempValue) === "Last 7 days"}
207
+ onClick={() => {
208
+ setTempValue([
209
+ dayjs().subtract(7, "days").startOf("day"),
210
+ dayjs().endOf("day"),
211
+ ]);
212
+ if (rest.onChange) {
213
+ rest.onChange({
214
+ target: {
215
+ value: [
216
+ dayjs().subtract(7, "days").startOf("day"),
217
+ dayjs().endOf("day"),
218
+ ],
219
+ } as any,
220
+ } as React.ChangeEvent<HTMLInputElement>);
221
+ }
222
+ }}
223
+ >
224
+ Last 7 days
225
+ </button>
226
+ <button
227
+ className="w-40 my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
228
+ disabled={dateRangeLabel(tempValue) === "Last 30 days"}
229
+ onClick={() => {
230
+ setTempValue([
231
+ dayjs().subtract(1, "months").startOf("day"),
232
+ dayjs().endOf("day"),
233
+ ]);
234
+ if (rest.onChange) {
235
+ rest.onChange({
236
+ target: {
237
+ value: [
238
+ dayjs().subtract(1, "months").startOf("day"),
239
+ dayjs().endOf("day"),
240
+ ],
241
+ } as any,
242
+ } as React.ChangeEvent<HTMLInputElement>);
243
+ }
244
+ }}
245
+ >
246
+ Last 30 days
247
+ </button>
248
+ <button
249
+ className="w-40 my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
250
+ disabled={dateRangeLabel(tempValue) === "Custom"}
251
+ onClick={() => {
252
+ setTempValue([
253
+ dayjs().startOf("day"),
254
+ dayjs().add(1, "days").endOf("day"),
255
+ ]);
256
+ if (rest.onChange) {
257
+ rest.onChange({
258
+ target: {
259
+ value: [
260
+ dayjs().add(1, "days").startOf("day"),
261
+ dayjs().add(1, "days").endOf("day"),
262
+ ],
263
+ } as any,
264
+ } as React.ChangeEvent<HTMLInputElement>);
265
+ }
266
+ }}
267
+ >
268
+ Custom
269
+ </button>
270
+ </div>
271
+ )}
184
272
  <Calendar
185
273
  options={{
186
274
  enableSelectRange: options?.enableSelectRange ?? false,
275
+ disablePast: options?.disablePast ?? false,
276
+ disableFuture: options?.disableFuture ?? false,
187
277
  }}
188
278
  value={options?.enableSelectRange ? tempValue : tempValue[0]}
189
279
  onChange={(value) => {
190
- setSelectedRange("Custom");
191
280
  if (options?.enableSelectRange) {
192
281
  setTempValue([dayjs(value[0]), dayjs(value[1])]);
282
+ if (rest.onChange) {
283
+ rest.onChange({
284
+ target: {
285
+ value: [dayjs(value[0]), dayjs(value[1])],
286
+ } as any,
287
+ } as React.ChangeEvent<HTMLInputElement>);
288
+ }
193
289
  } else {
194
290
  setTempValue([dayjs(value), dayjs(value)]);
291
+ if (rest.onChange) {
292
+ rest.onChange({
293
+ target: {
294
+ value: [dayjs(value), dayjs(value)],
295
+ } as any,
296
+ } as React.ChangeEvent<HTMLInputElement>);
297
+ }
195
298
  }
196
299
  }}
197
300
  />
package/src/components/form/input/time.tsx CHANGED
@@ -14,12 +14,13 @@ export interface TimeProps extends React.InputHTMLAttributes<HTMLInputElement> {
14
14
  }
15
15
 
16
16
  export const Time: React.FC<TimeProps> = ({
17
- options,
18
17
  label,
19
18
  description,
19
+ options,
20
20
  ...rest
21
21
  }) => {
22
- const [tempValue, setTempValue] = useState(dayjs().format("hh:mm a"));
22
+ const [tempValue, setTempValue] = useState<string>(dayjs().format("HH:mm"));
23
+ const [selectedAmPm, setSelectedAmPm] = useState<string>("am");
23
24
  const dropdownRef = useRef<HTMLButtonElement>(null);
24
25
  const hoursRef = useRef<HTMLDivElement>(null);
25
26
  const minutesRef = useRef<HTMLDivElement>(null);
@@ -125,8 +126,20 @@ export const Time: React.FC<TimeProps> = ({
125
126
  return () => clearTimeout(timeout);
126
127
  };
127
128
 
128
- scrollToSelected(hoursRef, tempValue.split(":")[0], 0);
129
- scrollToSelected(minutesRef, tempValue.split(":")[1].split(" ")[0], 1);
129
+ scrollToSelected(
130
+ hoursRef,
131
+ tempValue.split(":")[0] === "00"
132
+ ? "12"
133
+ : parseInt(tempValue.split(":")[0]) > 12
134
+ ? `${
135
+ parseInt(tempValue.split(":")[0]) - 12 < 10
136
+ ? "0" + (parseInt(tempValue.split(":")[0]) - 12).toString()
137
+ : parseInt(tempValue.split(":")[0]) - 12
138
+ }`
139
+ : tempValue.split(":")[0],
140
+ 0
141
+ );
142
+ scrollToSelected(minutesRef, tempValue.split(":")[1], 1);
130
143
  };
131
144
 
132
145
  useEffect(() => {
@@ -140,12 +153,7 @@ export const Time: React.FC<TimeProps> = ({
140
153
  }, [rest.value, rest.defaultValue]);
141
154
 
142
155
  useEffect(() => {
143
- rest.onChange &&
144
- rest.onChange({
145
- target: {
146
- value: tempValue,
147
- } as HTMLInputElement,
148
- } as React.ChangeEvent<HTMLInputElement>);
156
+ setSelectedAmPm(parseInt(tempValue.split(":")[0]) >= 12 ? "pm" : "am");
149
157
  }, [tempValue]);
150
158
 
151
159
  return (
@@ -175,9 +183,12 @@ export const Time: React.FC<TimeProps> = ({
175
183
  )}
176
184
  <div className="relative flex items-center">
177
185
  <input
178
- type="text"
179
- className={`w-full ps-4 pe-14 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}`}
186
+ type="time"
187
+ className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-calendar-picker-indicator]:hidden 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}`}
180
188
  value={tempValue}
189
+ onChange={(e) => {
190
+ setTempValue(e.target.value);
191
+ }}
181
192
  {...rest}
182
193
  />
183
194
  <button
@@ -217,18 +228,58 @@ export const Time: React.FC<TimeProps> = ({
217
228
  <button
218
229
  key={index}
219
230
  type="button"
220
- className={`w-full my-0.5 px-4 py-2 rounded-md text-sm text-center text-default ${
221
- tempValue.split(":")[0] === item
222
- ? "bg-primary-transparent cursor-default"
223
- : "hover:bg-secondary-light"
224
- }`}
231
+ className="w-full my-0.5 px-4 py-2 rounded-md text-sm text-center text-default hover:bg-secondary-light disabled:bg-primary-transparent disabled:hover:bg-primary-transparent"
225
232
  data-value={item}
233
+ disabled={
234
+ (parseInt(tempValue.split(":")[0]) > 12
235
+ ? (parseInt(tempValue.split(":")[0]) - 12 < 10
236
+ ? "0"
237
+ : "") +
238
+ (parseInt(tempValue.split(":")[0]) - 12).toString()
239
+ : tempValue.split(":")[0] === "00"
240
+ ? "12"
241
+ : tempValue.split(":")[0]) === item
242
+ }
226
243
  onMouseDown={() => {
227
- setTempValue(
228
- `${item}:${tempValue.split(":")[1].split(" ")[0]} ${
229
- tempValue.split(" ")[1]
230
- }`
231
- );
244
+ if (rest.onChange) {
245
+ if (item === "12") {
246
+ if (selectedAmPm === "am") {
247
+ setTempValue(`00:${tempValue.split(":")[1]}`);
248
+ rest.onChange({
249
+ target: {
250
+ value: `00:${tempValue.split(":")[1]}`,
251
+ } as HTMLInputElement,
252
+ } as any);
253
+ } else if (selectedAmPm === "pm") {
254
+ setTempValue(`12:${tempValue.split(":")[1]}`);
255
+ rest.onChange({
256
+ target: {
257
+ value: `12:${tempValue.split(":")[1]}`,
258
+ } as HTMLInputElement,
259
+ } as any);
260
+ }
261
+ } else {
262
+ if (selectedAmPm === "am") {
263
+ setTempValue(`${item}:${tempValue.split(":")[1]}`);
264
+ rest.onChange({
265
+ target: {
266
+ value: `${item}:${tempValue.split(":")[1]}`,
267
+ } as HTMLInputElement,
268
+ } as any);
269
+ } else if (selectedAmPm === "pm") {
270
+ setTempValue(
271
+ `${parseInt(item) + 12}:${tempValue.split(":")[1]}`
272
+ );
273
+ rest.onChange({
274
+ target: {
275
+ value: `${parseInt(item) + 12}:${
276
+ tempValue.split(":")[1]
277
+ }`,
278
+ } as HTMLInputElement,
279
+ } as any);
280
+ }
281
+ }
282
+ }
232
283
  }}
233
284
  >
234
285
  {item}
@@ -243,18 +294,18 @@ export const Time: React.FC<TimeProps> = ({
243
294
  <button
244
295
  key={index}
245
296
  type="button"
246
- className={`w-full my-0.5 px-4 py-2 rounded-md text-sm text-center text-default ${
247
- tempValue.split(":")[1].split(" ")[0] === item
248
- ? "bg-primary-transparent cursor-default"
249
- : "hover:bg-secondary-light "
250
- }`}
297
+ className="w-full my-0.5 px-4 py-2 rounded-md text-sm text-center text-default hover:bg-secondary-light disabled:bg-primary-transparent disabled:hover:bg-primary-transparent"
251
298
  data-value={item}
299
+ disabled={tempValue.split(":")[1] === item}
252
300
  onMouseDown={() => {
253
- setTempValue(
254
- `${tempValue.split(":")[0]}:${item} ${
255
- tempValue.split(" ")[1]
256
- }`
257
- );
301
+ setTempValue(`${tempValue.split(":")[0]}:${item}`);
302
+ if (rest.onChange) {
303
+ rest.onChange({
304
+ target: {
305
+ value: `${tempValue.split(":")[0]}:${item}`,
306
+ } as HTMLInputElement,
307
+ } as any);
308
+ }
258
309
  }}
259
310
  >
260
311
  {item}
@@ -266,18 +317,60 @@ export const Time: React.FC<TimeProps> = ({
266
317
  <button
267
318
  key={index}
268
319
  type="button"
269
- className={`w-full my-0.5 px-4 py-2 rounded-md text-sm text-center text-default ${
270
- tempValue.split(" ")[1] === item
271
- ? "bg-primary-transparent cursor-default"
272
- : "hover:bg-secondary-light "
273
- }`}
274
- data-value={item}
320
+ className="w-full my-0.5 px-4 py-2 rounded-md text-sm text-center text-default hover:bg-secondary-light disabled:bg-primary-transparent disabled:hover:bg-primary-transparent"
321
+ disabled={selectedAmPm === item}
275
322
  onMouseDown={() => {
276
- setTempValue(
277
- `${tempValue.split(":")[0]}:${
278
- tempValue.split(":")[1].split(" ")[0]
279
- } ${item}`
280
- );
323
+ setSelectedAmPm(item);
324
+ if (rest.onChange) {
325
+ if (parseInt(tempValue.split(":")[0]) === 12) {
326
+ if (item === "am") {
327
+ setTempValue(`00:${tempValue.split(":")[1]}`);
328
+ rest.onChange({
329
+ target: {
330
+ value: `00:${tempValue.split(":")[1]}`,
331
+ } as HTMLInputElement,
332
+ } as any);
333
+ }
334
+ } else if (parseInt(tempValue.split(":")[0]) < 12) {
335
+ if (item === "pm") {
336
+ setTempValue(
337
+ `${parseInt(tempValue.split(":")[0]) + 12}:${
338
+ tempValue.split(":")[1]
339
+ }`
340
+ );
341
+ rest.onChange({
342
+ target: {
343
+ value: `${
344
+ parseInt(tempValue.split(":")[0]) + 12
345
+ }:${tempValue.split(":")[1]}`,
346
+ } as HTMLInputElement,
347
+ } as any);
348
+ }
349
+ } else if (parseInt(tempValue.split(":")[0]) > 12) {
350
+ if (item === "am") {
351
+ setTempValue(
352
+ `${
353
+ parseInt(tempValue.split(":")[0]) - 12 < 10
354
+ ? "0"
355
+ : ""
356
+ }${parseInt(tempValue.split(":")[0]) - 12}:${
357
+ tempValue.split(":")[1]
358
+ }`
359
+ );
360
+ rest.onChange({
361
+ target: {
362
+ value: `${
363
+ parseInt(tempValue.split(":")[0]) - 12 < 10
364
+ ? "0"
365
+ : ""
366
+ }${parseInt(tempValue.split(":")[0]) - 12}:${
367
+ tempValue.split(":")[1]
368
+ }`,
369
+ } as HTMLInputElement,
370
+ } as any);
371
+ }
372
+ }
373
+ }
281
374
  }}
282
375
  >
283
376
  {item}
package/src/components/form/other/autocomplete.tsx CHANGED
@@ -107,15 +107,6 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
107
107
  }
108
108
  }, [rest.value, rest.defaultValue]);
109
109
 
110
- useEffect(() => {
111
- if (tempValue) {
112
- rest.onChange &&
113
- rest.onChange({
114
- target: { value: tempValue } as HTMLSelectElement,
115
- } as any);
116
- }
117
- }, [tempValue]);
118
-
119
110
  return (
120
111
  <label className={`grid gap-2 ${width}`}>
121
112
  {(label || description) && (
@@ -196,6 +187,11 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
196
187
  disabled={tempValue === item.value}
197
188
  onMouseDown={() => {
198
189
  setTempValue(item.value);
190
+ if (rest.onChange) {
191
+ rest.onChange({
192
+ target: { value: item.value } as HTMLSelectElement,
193
+ } as any);
194
+ }
199
195
  setTempFilter(item.label);
200
196
  setOpenDropdown(false);
201
197
  }}