next-helios-fe 1.10.27 → 1.10.28

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 +107 -71
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.10.27",
3
+ "version": "1.10.28",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/form/input/date.tsx CHANGED
@@ -43,46 +43,55 @@ export const Date: React.FC<DateProps> = ({
43
43
  : "py-1.5";
44
44
 
45
45
  useEffect(() => {
46
- if (value && value.length === 2) {
47
- setTempValue([
48
- dayjs(value[0]).startOf("day"),
49
- dayjs(value[1]).startOf("day"),
50
- ] as any);
51
- } else if (defaultValue && defaultValue.length === 2) {
52
- setTempValue([
53
- dayjs(defaultValue[0]).startOf("day"),
54
- dayjs(defaultValue[1]).startOf("day"),
55
- ] as any);
46
+ if (value) {
47
+ setTempValue(
48
+ value.length === 2
49
+ ? [dayjs(value[0]).startOf("day"), dayjs(value[1]).startOf("day")]
50
+ : ([] as any)
51
+ );
52
+ } else if (defaultValue) {
53
+ setTempValue(
54
+ defaultValue.length === 2
55
+ ? [
56
+ dayjs(defaultValue[0]).startOf("day"),
57
+ dayjs(defaultValue[1]).startOf("day"),
58
+ ]
59
+ : ([] as any)
60
+ );
56
61
  }
57
62
  }, [value, defaultValue]);
58
63
 
59
64
  const dateRangeLabel = (data: any) => {
60
- if (
61
- dayjs(data[0]).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD") &&
62
- dayjs(data[1]).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD")
63
- ) {
64
- return "Today";
65
- } else if (
66
- dayjs(data[0]).format("YYYY-MM-DD") ===
67
- dayjs().subtract(1, "days").format("YYYY-MM-DD") &&
68
- dayjs(data[1]).format("YYYY-MM-DD") ===
69
- dayjs().subtract(1, "days").format("YYYY-MM-DD")
70
- ) {
71
- return "Yesterday";
72
- } else if (
73
- dayjs(data[0]).format("YYYY-MM-DD") ===
74
- dayjs().subtract(7, "days").format("YYYY-MM-DD") &&
75
- dayjs(data[1]).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD")
76
- ) {
77
- return "Last 7 Days";
78
- } else if (
79
- dayjs(data[0]).format("YYYY-MM-DD") ===
80
- dayjs().subtract(1, "months").format("YYYY-MM-DD") &&
81
- dayjs(data[1]).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD")
82
- ) {
83
- return "Last 30 Days";
65
+ if (data.length === 0) {
66
+ return "";
84
67
  } else {
85
- return "Custom";
68
+ if (
69
+ dayjs(data[0]).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD") &&
70
+ dayjs(data[1]).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD")
71
+ ) {
72
+ return "Today";
73
+ } else if (
74
+ dayjs(data[0]).format("YYYY-MM-DD") ===
75
+ dayjs().subtract(1, "days").format("YYYY-MM-DD") &&
76
+ dayjs(data[1]).format("YYYY-MM-DD") ===
77
+ dayjs().subtract(1, "days").format("YYYY-MM-DD")
78
+ ) {
79
+ return "Yesterday";
80
+ } else if (
81
+ dayjs(data[0]).format("YYYY-MM-DD") ===
82
+ dayjs().subtract(7, "days").format("YYYY-MM-DD") &&
83
+ dayjs(data[1]).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD")
84
+ ) {
85
+ return "Last 7 Days";
86
+ } else if (
87
+ dayjs(data[0]).format("YYYY-MM-DD") ===
88
+ dayjs().subtract(1, "months").format("YYYY-MM-DD") &&
89
+ dayjs(data[1]).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD")
90
+ ) {
91
+ return "Last 30 Days";
92
+ } else {
93
+ return "Custom";
94
+ }
86
95
  }
87
96
  };
88
97
 
@@ -111,44 +120,71 @@ export const Date: React.FC<DateProps> = ({
111
120
  )}
112
121
  </div>
113
122
  )}
114
- <div className="relative flex items-center">
115
- {!options?.buttonOnly && (
116
- <input
117
- type="text"
118
- className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg cursor-default placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
123
+ <div className="group flex items-center gap-2">
124
+ <div className="flex-1 relative flex items-center">
125
+ {!options?.buttonOnly && (
126
+ <input
127
+ type="text"
128
+ className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg cursor-default placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
129
+ disabled={rest.disabled}
130
+ readOnly
131
+ value={
132
+ dateRangeLabel(tempValue) === "Custom" ||
133
+ !options?.enableSelectRange
134
+ ? `${
135
+ !options?.enableSelectRange
136
+ ? ""
137
+ : `${
138
+ dayjs(tempValue[0]).format("MMM YYYY") ===
139
+ dayjs(tempValue[1]).format("MMM YYYY")
140
+ ? dayjs(tempValue[0]).format("DD")
141
+ : dayjs(tempValue[0]).format("DD MMM YYYY")
142
+ } - `
143
+ }${dayjs(tempValue[1]).format("DD MMM YYYY")}`
144
+ : dateRangeLabel(tempValue)
145
+ }
146
+ onClick={(e) => {
147
+ dropdownRef.current?.click();
148
+ }}
149
+ />
150
+ )}
151
+ <button
152
+ type="button"
153
+ className={`rounded-full text-xl hover:bg-secondary-light ${
154
+ options?.buttonOnly
155
+ ? "p-2"
156
+ : "absolute right-4 p-1 text-disabled"
157
+ }`}
158
+ tabIndex={-1}
119
159
  disabled={rest.disabled}
120
- readOnly
121
- value={
122
- dateRangeLabel(tempValue) === "Custom" ||
123
- !options?.enableSelectRange
124
- ? `${
125
- !options?.enableSelectRange
126
- ? ""
127
- : `${
128
- dayjs(tempValue[0]).format("MMM YYYY") ===
129
- dayjs(tempValue[1]).format("MMM YYYY")
130
- ? dayjs(tempValue[0]).format("DD")
131
- : dayjs(tempValue[0]).format("DD MMM YYYY")
132
- } - `
133
- }${dayjs(tempValue[1]).format("DD MMM YYYY")}`
134
- : dateRangeLabel(tempValue)
135
- }
136
- />
160
+ onClick={(e) => {
161
+ e.preventDefault();
162
+ dropdownRef.current?.click();
163
+ }}
164
+ >
165
+ <Icon icon="akar-icons:calendar" />
166
+ </button>
167
+ </div>
168
+ {!rest.required && tempValue.length !== 0 && (
169
+ <button
170
+ type="button"
171
+ className="p-1 rounded-full text-xl hover:bg-secondary-light hidden group-hover:block"
172
+ onClick={(e) => {
173
+ e.stopPropagation();
174
+ e.preventDefault();
175
+ setTempValue([]);
176
+ if (rest.onChange) {
177
+ rest.onChange({
178
+ target: {
179
+ value: [],
180
+ } as any,
181
+ } as React.ChangeEvent<HTMLInputElement>);
182
+ }
183
+ }}
184
+ >
185
+ <Icon icon="pajamas:close" />
186
+ </button>
137
187
  )}
138
- <button
139
- type="button"
140
- className={`rounded-full text-xl hover:bg-secondary-light ${
141
- options?.buttonOnly ? "p-2" : "absolute right-4 p-1 text-disabled"
142
- }`}
143
- tabIndex={-1}
144
- disabled={rest.disabled}
145
- onClick={(e) => {
146
- e.preventDefault();
147
- dropdownRef.current?.click();
148
- }}
149
- >
150
- <Icon icon="akar-icons:calendar" />
151
- </button>
152
188
  </div>
153
189
  </label>
154
190
  <div className="w-0 overflow-hidden">