next-helios-fe 1.6.15 → 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.
Files changed (4) hide show
  1. package/dist/components/form/input/date.d.ts +2 -1
  2. package/dist/index.js +1 -1
  3. package/package.json +1 -1
  4. package/src/components/form/input/date.tsx +89 -67
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.6.15",
3
+ "version": "1.6.16",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/form/input/date.tsx CHANGED
@@ -5,11 +5,12 @@ 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 }) => {
@@ -54,7 +55,7 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
54
55
  type="text"
55
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}`}
56
57
  value={
57
- selectedRange === "Custom"
58
+ selectedRange === "Custom" || !options?.enableSelectRange
58
59
  ? `${
59
60
  dayjs(tempValue[0]).format("MMM YYYY") ===
60
61
  dayjs(tempValue[1]).format("MMM YYYY")
@@ -63,6 +64,7 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
63
64
  } - ${dayjs(tempValue[1]).format("DD MMM YYYY")}`
64
65
  : selectedRange
65
66
  }
67
+ disabled={rest.disabled}
66
68
  />
67
69
  <button
68
70
  type="button"
@@ -91,74 +93,94 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
91
93
  </button>
92
94
  }
93
95
  >
94
- <div className="flex gap-2 w-80 md:w-full overflow-auto md:overflow-clip">
95
- <div className="w-full">
96
- <button
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"
98
- disabled={selectedRange === "Today"}
99
- onClick={() => {
100
- setSelectedRange("Today");
101
- setTempValue([dayjs().startOf("day"), dayjs().endOf("day")]);
102
- }}
103
- >
104
- Today
105
- </button>
106
- <button
107
- 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"
108
- disabled={selectedRange === "Yesterday"}
109
- onClick={() => {
110
- setSelectedRange("Yesterday");
111
- setTempValue([
112
- dayjs().subtract(1, "days").startOf("day"),
113
- dayjs().subtract(1, "days").endOf("day"),
114
- ]);
115
- }}
116
- >
117
- Yesterday
118
- </button>
119
- <button
120
- 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"
121
- disabled={selectedRange === "Last 7 days"}
122
- onClick={() => {
123
- setSelectedRange("Last 7 days");
124
- setTempValue([
125
- dayjs().subtract(7, "days").startOf("day"),
126
- dayjs().endOf("day"),
127
- ]);
128
- }}
129
- >
130
- Last 7 days
131
- </button>
132
- <button
133
- 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"
134
- disabled={selectedRange === "Last 30 days"}
135
- onClick={() => {
136
- setSelectedRange("Last 30 days");
137
- setTempValue([
138
- dayjs().subtract(1, "months").startOf("day"),
139
- dayjs().endOf("day"),
140
- ]);
141
- }}
142
- >
143
- Last 30 days
144
- </button>
145
- <button
146
- 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"
147
- disabled={selectedRange === "Custom"}
148
- onClick={() => {
149
- setSelectedRange("Custom");
150
- setTempValue([dayjs().startOf("day"), dayjs().endOf("day")]);
151
- }}
152
- >
153
- Custom
154
- </button>
155
- </div>
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
+ )}
156
170
  <Calendar
157
- options={{ enableSelectRange: true }}
158
- value={tempValue}
171
+ options={{
172
+ enableSelectRange: options?.enableSelectRange ?? false,
173
+ }}
174
+ value={
175
+ options?.enableSelectRange ? tempValue : tempValue[0]
176
+ }
159
177
  onChange={(value) => {
160
178
  setSelectedRange("Custom");
161
- setTempValue([dayjs(value[0]), dayjs(value[1])]);
179
+ if (options?.enableSelectRange) {
180
+ setTempValue([dayjs(value[0]), dayjs(value[1])]);
181
+ } else {
182
+ setTempValue([dayjs(value), dayjs(value)]);
183
+ }
162
184
  }}
163
185
  />
164
186
  </div>