react-better-html 1.1.254 → 1.1.256
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.
- package/dist/index.d.mts +6 -1
- package/dist/index.d.ts +6 -1
- package/dist/index.js +223 -169
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +223 -169
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -950,7 +950,8 @@ function useComponentInputFieldDateProps(props, holderRef, disabled) {
|
|
|
950
950
|
setInternalValue,
|
|
951
951
|
inputFieldProps,
|
|
952
952
|
insideInputFieldComponentProps,
|
|
953
|
-
isOpen
|
|
953
|
+
isOpen,
|
|
954
|
+
isFocused
|
|
954
955
|
};
|
|
955
956
|
}
|
|
956
957
|
function usePageResize() {
|
|
@@ -2412,6 +2413,10 @@ var ModalComponent = forwardRef7(function Modal({
|
|
|
2412
2413
|
const { app } = useBetterHtmlContextInternal();
|
|
2413
2414
|
const { colorTheme } = useBetterCoreContext4();
|
|
2414
2415
|
const dialogRef = useRef2(null);
|
|
2416
|
+
const onOpenRef = useRef2(onOpen);
|
|
2417
|
+
onOpenRef.current = onOpen;
|
|
2418
|
+
const onCloseRef = useRef2(onClose);
|
|
2419
|
+
onCloseRef.current = onClose;
|
|
2415
2420
|
const [isOpened, setIsOpened] = useBooleanState2(false);
|
|
2416
2421
|
const [isOpenedLate, setIsOpenedLate] = useBooleanState2(false);
|
|
2417
2422
|
const onClickOpen = useCallback4(() => {
|
|
@@ -2426,20 +2431,20 @@ var ModalComponent = forwardRef7(function Modal({
|
|
|
2426
2431
|
false
|
|
2427
2432
|
);
|
|
2428
2433
|
}
|
|
2429
|
-
|
|
2430
|
-
}, [
|
|
2434
|
+
onOpenRef.current?.();
|
|
2435
|
+
}, [urlQuery, name]);
|
|
2431
2436
|
const onClickClose = useCallback4(
|
|
2432
2437
|
(event) => {
|
|
2433
2438
|
event?.stopPropagation();
|
|
2434
2439
|
setIsOpened.setFalse();
|
|
2435
|
-
|
|
2440
|
+
onCloseRef.current?.();
|
|
2436
2441
|
if (urlQuery && name) urlQuery.removeQuery(`${name}-modal`, false);
|
|
2437
2442
|
setTimeout(() => {
|
|
2438
2443
|
dialogRef.current?.close();
|
|
2439
2444
|
setIsOpenedLate.setFalse();
|
|
2440
2445
|
}, 0.2 * 1e3);
|
|
2441
2446
|
},
|
|
2442
|
-
[
|
|
2447
|
+
[urlQuery, name]
|
|
2443
2448
|
);
|
|
2444
2449
|
const onKeyDown = useCallback4(
|
|
2445
2450
|
(event) => {
|
|
@@ -4993,7 +4998,7 @@ InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber(inputFieldPr
|
|
|
4993
4998
|
] })
|
|
4994
4999
|
] });
|
|
4995
5000
|
});
|
|
4996
|
-
InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, ...inputFieldProps }, ref) {
|
|
5001
|
+
InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, dropdownPosition = "left", ...inputFieldProps }, ref) {
|
|
4997
5002
|
const betterHtmlContextInternal = useBetterHtmlContextInternal();
|
|
4998
5003
|
const props = useComponentsPropsMerger(
|
|
4999
5004
|
betterHtmlContextInternal.components.inputField?.style?.date,
|
|
@@ -5006,7 +5011,8 @@ InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, ...in
|
|
|
5006
5011
|
internalValue,
|
|
5007
5012
|
setInternalValue,
|
|
5008
5013
|
inputFieldProps: restInputFieldProps,
|
|
5009
|
-
insideInputFieldComponentProps
|
|
5014
|
+
insideInputFieldComponentProps,
|
|
5015
|
+
isFocused
|
|
5010
5016
|
} = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
|
|
5011
5017
|
const onChange = useCallback10(
|
|
5012
5018
|
(date) => {
|
|
@@ -5020,12 +5026,13 @@ InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, ...in
|
|
|
5020
5026
|
{
|
|
5021
5027
|
...betterHtmlContextInternal.components.inputField?.style?.date,
|
|
5022
5028
|
type: "date",
|
|
5023
|
-
insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */
|
|
5029
|
+
insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ jsxs14(
|
|
5024
5030
|
Div_default,
|
|
5025
5031
|
{
|
|
5026
5032
|
position: "absolute",
|
|
5027
5033
|
top: "100%",
|
|
5028
|
-
left: 0,
|
|
5034
|
+
left: dropdownPosition === "left" ? 0 : void 0,
|
|
5035
|
+
right: dropdownPosition === "right" ? 0 : void 0,
|
|
5029
5036
|
width: "fit-content",
|
|
5030
5037
|
backgroundColor: theme2.colors.backgroundContent,
|
|
5031
5038
|
borderBottomLeftRadius: theme2.styles.borderRadius,
|
|
@@ -5033,7 +5040,22 @@ InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, ...in
|
|
|
5033
5040
|
boxShadow: "0px 10px 20px #00000020",
|
|
5034
5041
|
userSelect: "none",
|
|
5035
5042
|
...insideInputFieldComponentProps,
|
|
5036
|
-
children:
|
|
5043
|
+
children: [
|
|
5044
|
+
/* @__PURE__ */ jsx17(
|
|
5045
|
+
Div_default,
|
|
5046
|
+
{
|
|
5047
|
+
position: "absolute",
|
|
5048
|
+
top: 0,
|
|
5049
|
+
left: -theme2.styles.borderWidth,
|
|
5050
|
+
width: `calc(100% + ${theme2.styles.borderWidth * 2}px)`,
|
|
5051
|
+
height: theme2.styles.borderWidth,
|
|
5052
|
+
backgroundColor: isFocused ? theme2.colors.primary : theme2.colors.border,
|
|
5053
|
+
transform: `translateY(-${theme2.styles.borderWidth}px)`,
|
|
5054
|
+
transition: theme2.styles.transition
|
|
5055
|
+
}
|
|
5056
|
+
),
|
|
5057
|
+
/* @__PURE__ */ jsx17(Calendar_default, { value: internalValue, minDate, maxDate, onChange })
|
|
5058
|
+
]
|
|
5037
5059
|
}
|
|
5038
5060
|
) : void 0,
|
|
5039
5061
|
holderRef,
|
|
@@ -5050,6 +5072,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
|
|
|
5050
5072
|
maxDate,
|
|
5051
5073
|
defaultDateAfterTimePick,
|
|
5052
5074
|
defaultTimeAfterDatePick = "00:00",
|
|
5075
|
+
dropdownPosition = "left",
|
|
5053
5076
|
...inputFieldProps
|
|
5054
5077
|
}, ref) {
|
|
5055
5078
|
const betterHtmlContextInternal = useBetterHtmlContextInternal();
|
|
@@ -5067,7 +5090,8 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
|
|
|
5067
5090
|
setInternalValue,
|
|
5068
5091
|
inputFieldProps: restInputFieldProps,
|
|
5069
5092
|
insideInputFieldComponentProps,
|
|
5070
|
-
isOpen
|
|
5093
|
+
isOpen,
|
|
5094
|
+
isFocused
|
|
5071
5095
|
} = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
|
|
5072
5096
|
const readyHours = useMemo6(
|
|
5073
5097
|
() => hoursToRender?.filter((hour) => hour >= 0 && hour <= 23) ?? hours,
|
|
@@ -5145,12 +5169,13 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
|
|
|
5145
5169
|
{
|
|
5146
5170
|
...betterHtmlContextInternal.components.inputField?.style?.dateTime,
|
|
5147
5171
|
type: "datetime-local",
|
|
5148
|
-
insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */
|
|
5172
|
+
insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ jsxs14(
|
|
5149
5173
|
Div_default,
|
|
5150
5174
|
{
|
|
5151
5175
|
position: "absolute",
|
|
5152
5176
|
top: "100%",
|
|
5153
|
-
left: 0,
|
|
5177
|
+
left: dropdownPosition === "left" ? 0 : void 0,
|
|
5178
|
+
right: dropdownPosition === "right" ? 0 : void 0,
|
|
5154
5179
|
width: "fit-content",
|
|
5155
5180
|
backgroundColor: theme2.colors.backgroundContent,
|
|
5156
5181
|
borderBottomLeftRadius: theme2.styles.borderRadius,
|
|
@@ -5159,89 +5184,104 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
|
|
|
5159
5184
|
overflow: "hidden",
|
|
5160
5185
|
userSelect: "none",
|
|
5161
5186
|
...insideInputFieldComponentProps,
|
|
5162
|
-
children:
|
|
5163
|
-
/* @__PURE__ */ jsx17(
|
|
5164
|
-
|
|
5165
|
-
Div_default.row,
|
|
5187
|
+
children: [
|
|
5188
|
+
/* @__PURE__ */ jsx17(
|
|
5189
|
+
Div_default,
|
|
5166
5190
|
{
|
|
5167
|
-
|
|
5168
|
-
|
|
5169
|
-
|
|
5170
|
-
|
|
5171
|
-
|
|
5172
|
-
|
|
5173
|
-
|
|
5174
|
-
|
|
5175
|
-
/* @__PURE__ */ jsx17(
|
|
5176
|
-
Div_default,
|
|
5177
|
-
{
|
|
5178
|
-
className: "react-better-html-no-scrollbar",
|
|
5179
|
-
width: buttonWidth,
|
|
5180
|
-
height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
|
|
5181
|
-
overflowY: "auto",
|
|
5182
|
-
tabIndex: -1,
|
|
5183
|
-
children: readyHours.map((hour) => {
|
|
5184
|
-
const isSelected = hour.toString() === valueHour;
|
|
5185
|
-
return /* @__PURE__ */ jsx17(
|
|
5186
|
-
Div_default.row,
|
|
5187
|
-
{
|
|
5188
|
-
alignItems: "center",
|
|
5189
|
-
justifyContent: "center",
|
|
5190
|
-
color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
|
|
5191
|
-
backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
|
|
5192
|
-
borderRadius: theme2.styles.borderRadius / 2,
|
|
5193
|
-
filterHover: "brightness(0.9)",
|
|
5194
|
-
cursor: "pointer",
|
|
5195
|
-
padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
|
|
5196
|
-
value: hour,
|
|
5197
|
-
onClickWithValue: onClickHour,
|
|
5198
|
-
ref: isSelected ? selectedHourRef : void 0,
|
|
5199
|
-
children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
|
|
5200
|
-
},
|
|
5201
|
-
hour
|
|
5202
|
-
);
|
|
5203
|
-
})
|
|
5204
|
-
}
|
|
5205
|
-
)
|
|
5206
|
-
] }),
|
|
5207
|
-
/* @__PURE__ */ jsxs14(Div_default, { height: "100%", children: [
|
|
5208
|
-
/* @__PURE__ */ jsx17(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "M" }),
|
|
5209
|
-
/* @__PURE__ */ jsx17(
|
|
5210
|
-
Div_default,
|
|
5211
|
-
{
|
|
5212
|
-
className: "react-better-html-no-scrollbar",
|
|
5213
|
-
width: buttonWidth,
|
|
5214
|
-
height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
|
|
5215
|
-
overflowY: "auto",
|
|
5216
|
-
tabIndex: -1,
|
|
5217
|
-
children: readyMinutes.map((minute) => {
|
|
5218
|
-
const isSelected = minute.toString() === valueMinute;
|
|
5219
|
-
return /* @__PURE__ */ jsx17(
|
|
5220
|
-
Div_default.row,
|
|
5221
|
-
{
|
|
5222
|
-
alignItems: "center",
|
|
5223
|
-
justifyContent: "center",
|
|
5224
|
-
color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
|
|
5225
|
-
backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
|
|
5226
|
-
borderRadius: theme2.styles.borderRadius / 2,
|
|
5227
|
-
filterHover: "brightness(0.9)",
|
|
5228
|
-
cursor: "pointer",
|
|
5229
|
-
padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
|
|
5230
|
-
value: minute,
|
|
5231
|
-
onClickWithValue: onClickMinute,
|
|
5232
|
-
ref: isSelected ? selectedMinuteRef : void 0,
|
|
5233
|
-
children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
|
|
5234
|
-
},
|
|
5235
|
-
minute
|
|
5236
|
-
);
|
|
5237
|
-
})
|
|
5238
|
-
}
|
|
5239
|
-
)
|
|
5240
|
-
] })
|
|
5241
|
-
]
|
|
5191
|
+
position: "absolute",
|
|
5192
|
+
top: 0,
|
|
5193
|
+
left: -theme2.styles.borderWidth,
|
|
5194
|
+
width: `calc(100% + ${theme2.styles.borderWidth * 2}px)`,
|
|
5195
|
+
height: theme2.styles.borderWidth,
|
|
5196
|
+
backgroundColor: isFocused ? theme2.colors.primary : theme2.colors.border,
|
|
5197
|
+
transform: `translateY(-${theme2.styles.borderWidth}px)`,
|
|
5198
|
+
transition: theme2.styles.transition
|
|
5242
5199
|
}
|
|
5243
|
-
)
|
|
5244
|
-
|
|
5200
|
+
),
|
|
5201
|
+
/* @__PURE__ */ jsxs14(Div_default.row, { gap: theme2.styles.space, children: [
|
|
5202
|
+
/* @__PURE__ */ jsx17(Calendar_default, { value: internalValue, minDate, maxDate, onChange }),
|
|
5203
|
+
/* @__PURE__ */ jsxs14(
|
|
5204
|
+
Div_default.row,
|
|
5205
|
+
{
|
|
5206
|
+
height: 276,
|
|
5207
|
+
gap: theme2.styles.gap / 2,
|
|
5208
|
+
paddingTop: topSpacing,
|
|
5209
|
+
paddingBottom: theme2.styles.space / 2,
|
|
5210
|
+
paddingRight: theme2.styles.space / 2,
|
|
5211
|
+
children: [
|
|
5212
|
+
/* @__PURE__ */ jsxs14(Div_default, { height: "100%", children: [
|
|
5213
|
+
/* @__PURE__ */ jsx17(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "H" }),
|
|
5214
|
+
/* @__PURE__ */ jsx17(
|
|
5215
|
+
Div_default,
|
|
5216
|
+
{
|
|
5217
|
+
className: "react-better-html-no-scrollbar",
|
|
5218
|
+
width: buttonWidth,
|
|
5219
|
+
height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
|
|
5220
|
+
overflowY: "auto",
|
|
5221
|
+
tabIndex: -1,
|
|
5222
|
+
children: readyHours.map((hour) => {
|
|
5223
|
+
const isSelected = hour.toString() === valueHour;
|
|
5224
|
+
return /* @__PURE__ */ jsx17(
|
|
5225
|
+
Div_default.row,
|
|
5226
|
+
{
|
|
5227
|
+
alignItems: "center",
|
|
5228
|
+
justifyContent: "center",
|
|
5229
|
+
color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
|
|
5230
|
+
backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
|
|
5231
|
+
borderRadius: theme2.styles.borderRadius / 2,
|
|
5232
|
+
filterHover: "brightness(0.9)",
|
|
5233
|
+
cursor: "pointer",
|
|
5234
|
+
padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
|
|
5235
|
+
value: hour,
|
|
5236
|
+
onClickWithValue: onClickHour,
|
|
5237
|
+
ref: isSelected ? selectedHourRef : void 0,
|
|
5238
|
+
children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
|
|
5239
|
+
},
|
|
5240
|
+
hour
|
|
5241
|
+
);
|
|
5242
|
+
})
|
|
5243
|
+
}
|
|
5244
|
+
)
|
|
5245
|
+
] }),
|
|
5246
|
+
/* @__PURE__ */ jsxs14(Div_default, { height: "100%", children: [
|
|
5247
|
+
/* @__PURE__ */ jsx17(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "M" }),
|
|
5248
|
+
/* @__PURE__ */ jsx17(
|
|
5249
|
+
Div_default,
|
|
5250
|
+
{
|
|
5251
|
+
className: "react-better-html-no-scrollbar",
|
|
5252
|
+
width: buttonWidth,
|
|
5253
|
+
height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
|
|
5254
|
+
overflowY: "auto",
|
|
5255
|
+
tabIndex: -1,
|
|
5256
|
+
children: readyMinutes.map((minute) => {
|
|
5257
|
+
const isSelected = minute.toString() === valueMinute;
|
|
5258
|
+
return /* @__PURE__ */ jsx17(
|
|
5259
|
+
Div_default.row,
|
|
5260
|
+
{
|
|
5261
|
+
alignItems: "center",
|
|
5262
|
+
justifyContent: "center",
|
|
5263
|
+
color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
|
|
5264
|
+
backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
|
|
5265
|
+
borderRadius: theme2.styles.borderRadius / 2,
|
|
5266
|
+
filterHover: "brightness(0.9)",
|
|
5267
|
+
cursor: "pointer",
|
|
5268
|
+
padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
|
|
5269
|
+
value: minute,
|
|
5270
|
+
onClickWithValue: onClickMinute,
|
|
5271
|
+
ref: isSelected ? selectedMinuteRef : void 0,
|
|
5272
|
+
children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
|
|
5273
|
+
},
|
|
5274
|
+
minute
|
|
5275
|
+
);
|
|
5276
|
+
})
|
|
5277
|
+
}
|
|
5278
|
+
)
|
|
5279
|
+
] })
|
|
5280
|
+
]
|
|
5281
|
+
}
|
|
5282
|
+
)
|
|
5283
|
+
] })
|
|
5284
|
+
]
|
|
5245
5285
|
}
|
|
5246
5286
|
) : void 0,
|
|
5247
5287
|
holderRef,
|
|
@@ -5252,7 +5292,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
|
|
|
5252
5292
|
}
|
|
5253
5293
|
);
|
|
5254
5294
|
});
|
|
5255
|
-
InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesToRender, minTime, maxTime, ...inputFieldProps }, ref) {
|
|
5295
|
+
InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesToRender, minTime, maxTime, dropdownPosition = "left", ...inputFieldProps }, ref) {
|
|
5256
5296
|
const betterHtmlContextInternal = useBetterHtmlContextInternal();
|
|
5257
5297
|
const props = useComponentsPropsMerger(
|
|
5258
5298
|
betterHtmlContextInternal.components.inputField?.style?.time,
|
|
@@ -5272,7 +5312,8 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
|
|
|
5272
5312
|
setInternalValue,
|
|
5273
5313
|
inputFieldProps: restInputFieldProps,
|
|
5274
5314
|
insideInputFieldComponentProps,
|
|
5275
|
-
isOpen
|
|
5315
|
+
isOpen,
|
|
5316
|
+
isFocused
|
|
5276
5317
|
} = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
|
|
5277
5318
|
const readyHours = useMemo6(
|
|
5278
5319
|
() => hoursToRender?.filter((hour) => hour >= 0 && hour <= 23) ?? hours,
|
|
@@ -5339,12 +5380,13 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
|
|
|
5339
5380
|
{
|
|
5340
5381
|
...betterHtmlContextInternal.components.inputField?.style?.time,
|
|
5341
5382
|
type: "time",
|
|
5342
|
-
insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */
|
|
5383
|
+
insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ jsxs14(
|
|
5343
5384
|
Div_default,
|
|
5344
5385
|
{
|
|
5345
5386
|
position: "absolute",
|
|
5346
5387
|
top: "100%",
|
|
5347
|
-
left: 0,
|
|
5388
|
+
left: dropdownPosition === "left" ? 0 : void 0,
|
|
5389
|
+
right: dropdownPosition === "right" ? 0 : void 0,
|
|
5348
5390
|
width: buttonWidth * 2 + 2,
|
|
5349
5391
|
height: 300,
|
|
5350
5392
|
backgroundColor: theme2.colors.backgroundContent,
|
|
@@ -5354,73 +5396,88 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
|
|
|
5354
5396
|
overflowY: "auto",
|
|
5355
5397
|
userSelect: "none",
|
|
5356
5398
|
...insideInputFieldComponentProps,
|
|
5357
|
-
children:
|
|
5399
|
+
children: [
|
|
5358
5400
|
/* @__PURE__ */ jsx17(
|
|
5359
5401
|
Div_default,
|
|
5360
5402
|
{
|
|
5361
|
-
|
|
5362
|
-
|
|
5363
|
-
|
|
5364
|
-
|
|
5365
|
-
|
|
5366
|
-
|
|
5367
|
-
|
|
5368
|
-
|
|
5369
|
-
return /* @__PURE__ */ jsx17(
|
|
5370
|
-
Div_default.row,
|
|
5371
|
-
{
|
|
5372
|
-
alignItems: "center",
|
|
5373
|
-
justifyContent: "center",
|
|
5374
|
-
color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
|
|
5375
|
-
backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
|
|
5376
|
-
filterHover: "brightness(0.9)",
|
|
5377
|
-
cursor: isDisabled ? "not-allowed" : "pointer",
|
|
5378
|
-
padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
|
|
5379
|
-
opacity: isDisabled ? 0.6 : void 0,
|
|
5380
|
-
value: hour,
|
|
5381
|
-
onClickWithValue: !isDisabled ? onClickHour : void 0,
|
|
5382
|
-
ref: isSelected ? selectedHourRef : void 0,
|
|
5383
|
-
children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
|
|
5384
|
-
},
|
|
5385
|
-
hour
|
|
5386
|
-
);
|
|
5387
|
-
})
|
|
5403
|
+
position: "absolute",
|
|
5404
|
+
top: 0,
|
|
5405
|
+
left: -theme2.styles.borderWidth,
|
|
5406
|
+
width: `calc(100% + ${theme2.styles.borderWidth * 2}px)`,
|
|
5407
|
+
height: theme2.styles.borderWidth,
|
|
5408
|
+
backgroundColor: isFocused ? theme2.colors.primary : theme2.colors.border,
|
|
5409
|
+
transform: `translateY(-${theme2.styles.borderWidth}px)`,
|
|
5410
|
+
transition: theme2.styles.transition
|
|
5388
5411
|
}
|
|
5389
5412
|
),
|
|
5390
|
-
/* @__PURE__ */
|
|
5391
|
-
|
|
5392
|
-
|
|
5393
|
-
|
|
5394
|
-
|
|
5395
|
-
|
|
5396
|
-
|
|
5397
|
-
|
|
5398
|
-
|
|
5399
|
-
|
|
5400
|
-
|
|
5401
|
-
|
|
5402
|
-
|
|
5403
|
-
|
|
5404
|
-
|
|
5405
|
-
|
|
5406
|
-
|
|
5407
|
-
|
|
5408
|
-
|
|
5409
|
-
|
|
5410
|
-
|
|
5411
|
-
|
|
5412
|
-
|
|
5413
|
-
|
|
5414
|
-
|
|
5415
|
-
|
|
5416
|
-
|
|
5417
|
-
|
|
5418
|
-
|
|
5419
|
-
|
|
5420
|
-
|
|
5421
|
-
|
|
5422
|
-
|
|
5423
|
-
|
|
5413
|
+
/* @__PURE__ */ jsxs14(Div_default.row, { height: "100%", children: [
|
|
5414
|
+
/* @__PURE__ */ jsx17(
|
|
5415
|
+
Div_default,
|
|
5416
|
+
{
|
|
5417
|
+
className: "react-better-html-no-scrollbar",
|
|
5418
|
+
width: buttonWidth,
|
|
5419
|
+
height: "100%",
|
|
5420
|
+
overflowY: "auto",
|
|
5421
|
+
tabIndex: -1,
|
|
5422
|
+
children: readyHours.map((hour) => {
|
|
5423
|
+
const isSelected = hour.toString() === valueHour;
|
|
5424
|
+
const isDisabled = minHours && hour < minHours || maxHours && hour > maxHours;
|
|
5425
|
+
return /* @__PURE__ */ jsx17(
|
|
5426
|
+
Div_default.row,
|
|
5427
|
+
{
|
|
5428
|
+
alignItems: "center",
|
|
5429
|
+
justifyContent: "center",
|
|
5430
|
+
color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
|
|
5431
|
+
backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
|
|
5432
|
+
filterHover: "brightness(0.9)",
|
|
5433
|
+
cursor: isDisabled ? "not-allowed" : "pointer",
|
|
5434
|
+
padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
|
|
5435
|
+
opacity: isDisabled ? 0.6 : void 0,
|
|
5436
|
+
value: hour,
|
|
5437
|
+
onClickWithValue: !isDisabled ? onClickHour : void 0,
|
|
5438
|
+
ref: isSelected ? selectedHourRef : void 0,
|
|
5439
|
+
children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
|
|
5440
|
+
},
|
|
5441
|
+
hour
|
|
5442
|
+
);
|
|
5443
|
+
})
|
|
5444
|
+
}
|
|
5445
|
+
),
|
|
5446
|
+
/* @__PURE__ */ jsx17(
|
|
5447
|
+
Div_default,
|
|
5448
|
+
{
|
|
5449
|
+
className: "react-better-html-no-scrollbar",
|
|
5450
|
+
width: buttonWidth,
|
|
5451
|
+
height: "100%",
|
|
5452
|
+
overflowY: "auto",
|
|
5453
|
+
tabIndex: -1,
|
|
5454
|
+
children: readyMinutes.map((minute) => {
|
|
5455
|
+
const isSelected = minute.toString() === valueMinute;
|
|
5456
|
+
const currentHour = parseInt(valueHour);
|
|
5457
|
+
const isDisabled = minHours !== void 0 && minMinutes !== void 0 && currentHour === minHours && minute < minMinutes || maxHours !== void 0 && maxMinutes !== void 0 && currentHour === maxHours && minute > maxMinutes;
|
|
5458
|
+
return /* @__PURE__ */ jsx17(
|
|
5459
|
+
Div_default.row,
|
|
5460
|
+
{
|
|
5461
|
+
alignItems: "center",
|
|
5462
|
+
justifyContent: "center",
|
|
5463
|
+
color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
|
|
5464
|
+
backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
|
|
5465
|
+
filterHover: "brightness(0.9)",
|
|
5466
|
+
cursor: isDisabled ? "not-allowed" : "pointer",
|
|
5467
|
+
padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
|
|
5468
|
+
opacity: isDisabled ? 0.6 : void 0,
|
|
5469
|
+
value: minute,
|
|
5470
|
+
onClickWithValue: !isDisabled ? onClickMinute : void 0,
|
|
5471
|
+
ref: isSelected ? selectedMinuteRef : void 0,
|
|
5472
|
+
children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
|
|
5473
|
+
},
|
|
5474
|
+
minute
|
|
5475
|
+
);
|
|
5476
|
+
})
|
|
5477
|
+
}
|
|
5478
|
+
)
|
|
5479
|
+
] })
|
|
5480
|
+
]
|
|
5424
5481
|
}
|
|
5425
5482
|
) : void 0,
|
|
5426
5483
|
holderRef,
|
|
@@ -5432,7 +5489,7 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
|
|
|
5432
5489
|
}
|
|
5433
5490
|
);
|
|
5434
5491
|
});
|
|
5435
|
-
InputFieldComponent.color = forwardRef11(function Color4(inputFieldProps, ref) {
|
|
5492
|
+
InputFieldComponent.color = forwardRef11(function Color4({ ...inputFieldProps }, ref) {
|
|
5436
5493
|
const betterHtmlContextInternal = useBetterHtmlContextInternal();
|
|
5437
5494
|
const { value, onChangeValue, ...props } = useComponentsPropsMerger(
|
|
5438
5495
|
betterHtmlContextInternal.components.inputField?.style?.time,
|
|
@@ -7761,18 +7818,11 @@ var MenuItemComponent = memo27(function MenuItemComponent2({
|
|
|
7761
7818
|
backgroundColor,
|
|
7762
7819
|
activeItemColor,
|
|
7763
7820
|
hoverItemColor,
|
|
7821
|
+
location,
|
|
7764
7822
|
onClick
|
|
7765
7823
|
}) {
|
|
7766
|
-
const reactRouterDomPlugin2 = usePlugin("react-router-dom");
|
|
7767
|
-
if (!reactRouterDomPlugin2) {
|
|
7768
|
-
throw new Error(
|
|
7769
|
-
"`SideMenu` component requires the `react-router-dom` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
|
|
7770
|
-
);
|
|
7771
|
-
}
|
|
7772
|
-
const reactRouterDomPluginConfig = reactRouterDomPlugin2.getConfig();
|
|
7773
7824
|
const theme2 = useTheme29();
|
|
7774
7825
|
const mediaQuery = useMediaQuery();
|
|
7775
|
-
const location = reactRouterDomPluginConfig.useLocation();
|
|
7776
7826
|
const { components, sideMenuIsCollapsed, setSideMenuIsCollapsed } = useBetterHtmlContextInternal();
|
|
7777
7827
|
const { colorTheme } = useBetterCoreContext11();
|
|
7778
7828
|
const { activeItem, setActiveItem } = useSideMenuContext();
|
|
@@ -7924,6 +7974,7 @@ var MenuItemComponent = memo27(function MenuItemComponent2({
|
|
|
7924
7974
|
{
|
|
7925
7975
|
item: child,
|
|
7926
7976
|
backgroundColor: readyBackgroundColor,
|
|
7977
|
+
location,
|
|
7927
7978
|
onClick
|
|
7928
7979
|
},
|
|
7929
7980
|
child.text
|
|
@@ -7974,6 +8025,7 @@ var MenuItemComponent = memo27(function MenuItemComponent2({
|
|
|
7974
8025
|
var SideMenuComponent = function SideMenu({
|
|
7975
8026
|
items,
|
|
7976
8027
|
bottomItems,
|
|
8028
|
+
location,
|
|
7977
8029
|
topSpace = 0,
|
|
7978
8030
|
logoAssetName,
|
|
7979
8031
|
logoUrl,
|
|
@@ -8035,6 +8087,7 @@ var SideMenuComponent = function SideMenu({
|
|
|
8035
8087
|
backgroundColor: readyBackgroundColor,
|
|
8036
8088
|
activeItemColor,
|
|
8037
8089
|
hoverItemColor,
|
|
8090
|
+
location,
|
|
8038
8091
|
onClick: onClickXButton
|
|
8039
8092
|
},
|
|
8040
8093
|
item.text
|
|
@@ -8057,6 +8110,7 @@ var SideMenuComponent = function SideMenu({
|
|
|
8057
8110
|
backgroundColor: readyBackgroundColor,
|
|
8058
8111
|
activeItemColor,
|
|
8059
8112
|
hoverItemColor,
|
|
8113
|
+
location,
|
|
8060
8114
|
onClick: onClickXButton
|
|
8061
8115
|
},
|
|
8062
8116
|
item.text
|