next-helios-fe 1.6.14 → 1.6.15

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 (3) hide show
  1. package/dist/index.js +1 -1
  2. package/package.json +1 -1
  3. package/src/components/form/input/date.tsx +18 -40
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.6.14",
3
+ "version": "1.6.15",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/form/input/date.tsx CHANGED
@@ -13,9 +13,11 @@ export interface DateProps extends React.InputHTMLAttributes<HTMLInputElement> {
13
13
  }
14
14
 
15
15
  export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
16
- const [tempValue, setTempValue] = useState<any>([dayjs(), dayjs()]);
16
+ const [tempValue, setTempValue] = useState<any>([
17
+ dayjs().startOf("day"),
18
+ dayjs().endOf("day"),
19
+ ]);
17
20
  const [selectedRange, setSelectedRange] = useState<string | any[]>("Today");
18
- const [manualDate, setManualDate] = useState<any>("");
19
21
  const dropdownRef = useRef<HTMLButtonElement>(null);
20
22
  const width = options?.width === "fit" ? "w-fit" : "w-full";
21
23
  const height =
@@ -25,16 +27,6 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
25
27
  ? "py-2"
26
28
  : "py-1.5";
27
29
 
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
30
  useEffect(() => {
39
31
  rest.onChange &&
40
32
  rest.onChange({
@@ -62,9 +54,7 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
62
54
  type="text"
63
55
  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
56
  value={
65
- selectedRange === "Manual Input"
66
- ? manualDate
67
- : selectedRange === "Custom"
57
+ selectedRange === "Custom"
68
58
  ? `${
69
59
  dayjs(tempValue[0]).format("MMM YYYY") ===
70
60
  dayjs(tempValue[1]).format("MMM YYYY")
@@ -73,15 +63,6 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
73
63
  } - ${dayjs(tempValue[1]).format("DD MMM YYYY")}`
74
64
  : selectedRange
75
65
  }
76
- onChange={(e) => {
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}
85
66
  />
86
67
  <button
87
68
  type="button"
@@ -112,21 +93,12 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
112
93
  >
113
94
  <div className="flex gap-2 w-80 md:w-full overflow-auto md:overflow-clip">
114
95
  <div className="w-full">
115
- {/* <button
116
- 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"
117
- disabled={tempValue === "Manual Input"}
118
- onClick={() => {
119
- setTempValue("Manual Input");
120
- }}
121
- >
122
- Manual Input
123
- </button> */}
124
96
  <button
125
97
  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"
126
98
  disabled={selectedRange === "Today"}
127
99
  onClick={() => {
128
100
  setSelectedRange("Today");
129
- setTempValue([dayjs(), dayjs()]);
101
+ setTempValue([dayjs().startOf("day"), dayjs().endOf("day")]);
130
102
  }}
131
103
  >
132
104
  Today
@@ -137,8 +109,8 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
137
109
  onClick={() => {
138
110
  setSelectedRange("Yesterday");
139
111
  setTempValue([
140
- dayjs().subtract(1, "days"),
141
- dayjs().subtract(1, "days"),
112
+ dayjs().subtract(1, "days").startOf("day"),
113
+ dayjs().subtract(1, "days").endOf("day"),
142
114
  ]);
143
115
  }}
144
116
  >
@@ -149,7 +121,10 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
149
121
  disabled={selectedRange === "Last 7 days"}
150
122
  onClick={() => {
151
123
  setSelectedRange("Last 7 days");
152
- setTempValue([dayjs().subtract(7, "days"), dayjs()]);
124
+ setTempValue([
125
+ dayjs().subtract(7, "days").startOf("day"),
126
+ dayjs().endOf("day"),
127
+ ]);
153
128
  }}
154
129
  >
155
130
  Last 7 days
@@ -159,7 +134,10 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
159
134
  disabled={selectedRange === "Last 30 days"}
160
135
  onClick={() => {
161
136
  setSelectedRange("Last 30 days");
162
- setTempValue([dayjs().subtract(1, "months"), dayjs()]);
137
+ setTempValue([
138
+ dayjs().subtract(1, "months").startOf("day"),
139
+ dayjs().endOf("day"),
140
+ ]);
163
141
  }}
164
142
  >
165
143
  Last 30 days
@@ -169,7 +147,7 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
169
147
  disabled={selectedRange === "Custom"}
170
148
  onClick={() => {
171
149
  setSelectedRange("Custom");
172
- setTempValue([dayjs(), dayjs()]);
150
+ setTempValue([dayjs().startOf("day"), dayjs().endOf("day")]);
173
151
  }}
174
152
  >
175
153
  Custom
@@ -180,7 +158,7 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
180
158
  value={tempValue}
181
159
  onChange={(value) => {
182
160
  setSelectedRange("Custom");
183
- setTempValue(value);
161
+ setTempValue([dayjs(value[0]), dayjs(value[1])]);
184
162
  }}
185
163
  />
186
164
  </div>