next-helios-fe 1.10.27 → 1.10.29

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 +108 -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.29",
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,72 @@ 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
+ tempValue.length !== 0
135
+ ? `${
136
+ !options?.enableSelectRange
137
+ ? ""
138
+ : `${
139
+ dayjs(tempValue[0]).format("MMM YYYY") ===
140
+ dayjs(tempValue[1]).format("MMM YYYY")
141
+ ? dayjs(tempValue[0]).format("DD")
142
+ : dayjs(tempValue[0]).format("DD MMM YYYY")
143
+ } - `
144
+ }${dayjs(tempValue[1]).format("DD MMM YYYY")}`
145
+ : dateRangeLabel(tempValue)
146
+ }
147
+ onClick={(e) => {
148
+ dropdownRef.current?.click();
149
+ }}
150
+ />
151
+ )}
152
+ <button
153
+ type="button"
154
+ className={`rounded-full text-xl hover:bg-secondary-light ${
155
+ options?.buttonOnly
156
+ ? "p-2"
157
+ : "absolute right-4 p-1 text-disabled"
158
+ }`}
159
+ tabIndex={-1}
119
160
  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
- />
161
+ onClick={(e) => {
162
+ e.preventDefault();
163
+ dropdownRef.current?.click();
164
+ }}
165
+ >
166
+ <Icon icon="akar-icons:calendar" />
167
+ </button>
168
+ </div>
169
+ {!rest.required && tempValue.length !== 0 && (
170
+ <button
171
+ type="button"
172
+ className="p-1 rounded-full text-xl hover:bg-secondary-light hidden group-hover:block"
173
+ onClick={(e) => {
174
+ e.stopPropagation();
175
+ e.preventDefault();
176
+ setTempValue([]);
177
+ if (rest.onChange) {
178
+ rest.onChange({
179
+ target: {
180
+ value: [],
181
+ } as any,
182
+ } as React.ChangeEvent<HTMLInputElement>);
183
+ }
184
+ }}
185
+ >
186
+ <Icon icon="pajamas:close" />
187
+ </button>
137
188
  )}
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
189
  </div>
153
190
  </label>
154
191
  <div className="w-0 overflow-hidden">