@lets-events/react 12.11.0 → 12.11.2
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/.turbo/turbo-build.log +8 -8
- package/CHANGELOG.md +12 -0
- package/dist/index.d.mts +7 -4
- package/dist/index.d.ts +7 -4
- package/dist/index.js +151 -85
- package/dist/index.mjs +151 -85
- package/package.json +1 -1
- package/src/components/Modal.tsx +7 -2
- package/src/components/MultiSelect/index.tsx +1 -0
- package/src/components/Tooltip/index.tsx +62 -9
- package/src/hooks/useHasHover.ts +21 -0
package/dist/index.mjs
CHANGED
|
@@ -420,7 +420,7 @@ var require_factoryWithTypeCheckers = __commonJS({
|
|
|
420
420
|
function emptyFunctionThatReturnsNull() {
|
|
421
421
|
return null;
|
|
422
422
|
}
|
|
423
|
-
module.exports = function(
|
|
423
|
+
module.exports = function(isValidElement2, throwOnDirectAccess) {
|
|
424
424
|
var ITERATOR_SYMBOL = typeof Symbol === "function" && Symbol.iterator;
|
|
425
425
|
var FAUX_ITERATOR_SYMBOL = "@@iterator";
|
|
426
426
|
function getIteratorFn(maybeIterable) {
|
|
@@ -548,7 +548,7 @@ var require_factoryWithTypeCheckers = __commonJS({
|
|
|
548
548
|
function createElementTypeChecker() {
|
|
549
549
|
function validate(props, propName, componentName, location, propFullName) {
|
|
550
550
|
var propValue = props[propName];
|
|
551
|
-
if (!
|
|
551
|
+
if (!isValidElement2(propValue)) {
|
|
552
552
|
var propType = getPropType(propValue);
|
|
553
553
|
return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type " + ("`" + propType + "` supplied to `" + componentName + "`, expected a single ReactElement."));
|
|
554
554
|
}
|
|
@@ -736,7 +736,7 @@ var require_factoryWithTypeCheckers = __commonJS({
|
|
|
736
736
|
if (Array.isArray(propValue)) {
|
|
737
737
|
return propValue.every(isNode);
|
|
738
738
|
}
|
|
739
|
-
if (propValue === null ||
|
|
739
|
+
if (propValue === null || isValidElement2(propValue)) {
|
|
740
740
|
return true;
|
|
741
741
|
}
|
|
742
742
|
var iteratorFn = getIteratorFn(propValue);
|
|
@@ -3760,7 +3760,8 @@ var ModalTitleStyled = styled(ModalRadix.Title, {
|
|
|
3760
3760
|
fontSize: "$18",
|
|
3761
3761
|
fontWeight: "medium",
|
|
3762
3762
|
fontStyle: "normal",
|
|
3763
|
-
textTransform: "uppercase"
|
|
3763
|
+
textTransform: "uppercase",
|
|
3764
|
+
width: "calc(100% - 48px)"
|
|
3764
3765
|
});
|
|
3765
3766
|
function Modal(_a) {
|
|
3766
3767
|
var _b = _a, {
|
|
@@ -3772,7 +3773,8 @@ function Modal(_a) {
|
|
|
3772
3773
|
maxHeight,
|
|
3773
3774
|
height,
|
|
3774
3775
|
preventAutoFocus = false,
|
|
3775
|
-
fitContent = false
|
|
3776
|
+
fitContent = false,
|
|
3777
|
+
titleTypography = "headline6"
|
|
3776
3778
|
} = _b, props = __objRest(_b, [
|
|
3777
3779
|
"children",
|
|
3778
3780
|
"title",
|
|
@@ -3782,7 +3784,8 @@ function Modal(_a) {
|
|
|
3782
3784
|
"maxHeight",
|
|
3783
3785
|
"height",
|
|
3784
3786
|
"preventAutoFocus",
|
|
3785
|
-
"fitContent"
|
|
3787
|
+
"fitContent",
|
|
3788
|
+
"titleTypography"
|
|
3786
3789
|
]);
|
|
3787
3790
|
const { onOpenChange } = props;
|
|
3788
3791
|
return /* @__PURE__ */ jsxs5(ModalRadix.Root, __spreadProps(__spreadValues({}, props), { children: [
|
|
@@ -3806,7 +3809,7 @@ function Modal(_a) {
|
|
|
3806
3809
|
}, maxHeight !== void 0 && { maxHeight }), height !== void 0 && { height }), fitContent && height === void 0 && { height: "fit-content" }),
|
|
3807
3810
|
children: [
|
|
3808
3811
|
title && /* @__PURE__ */ jsxs5(ModalHeaderStyled, { children: [
|
|
3809
|
-
/* @__PURE__ */ jsx13(ModalTitleStyled, { asChild: true, children: /* @__PURE__ */ jsx13(Text, { typography:
|
|
3812
|
+
/* @__PURE__ */ jsx13(ModalTitleStyled, { asChild: true, children: /* @__PURE__ */ jsx13(Text, { typography: titleTypography, fontWeight: "medium", children: title }) }),
|
|
3810
3813
|
(onOpenChange || trigger) && /* @__PURE__ */ jsx13(ModalRadix.Close, { asChild: true, children: /* @__PURE__ */ jsx13(ModalIconClose, { name: "close", size: "xl" }) })
|
|
3811
3814
|
] }),
|
|
3812
3815
|
children
|
|
@@ -9932,7 +9935,26 @@ var useToast = () => {
|
|
|
9932
9935
|
};
|
|
9933
9936
|
|
|
9934
9937
|
// src/components/Tooltip/index.tsx
|
|
9938
|
+
import * as React10 from "react";
|
|
9935
9939
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
9940
|
+
|
|
9941
|
+
// src/hooks/useHasHover.ts
|
|
9942
|
+
import { useEffect as useEffect8, useState as useState9 } from "react";
|
|
9943
|
+
function useHasHover() {
|
|
9944
|
+
const [hasHover, setHasHover] = useState9(true);
|
|
9945
|
+
useEffect8(() => {
|
|
9946
|
+
const media = window.matchMedia("(hover: hover)");
|
|
9947
|
+
setHasHover(media.matches);
|
|
9948
|
+
const listener = (event) => {
|
|
9949
|
+
setHasHover(event.matches);
|
|
9950
|
+
};
|
|
9951
|
+
media.addEventListener("change", listener);
|
|
9952
|
+
return () => media.removeEventListener("change", listener);
|
|
9953
|
+
}, []);
|
|
9954
|
+
return hasHover;
|
|
9955
|
+
}
|
|
9956
|
+
|
|
9957
|
+
// src/components/Tooltip/index.tsx
|
|
9936
9958
|
import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
9937
9959
|
var TooltipProvider = TooltipPrimitive.Provider;
|
|
9938
9960
|
var TooltipRoot = TooltipPrimitive.Root;
|
|
@@ -9966,23 +9988,66 @@ var TooltipContent = styled(TooltipPrimitive.Content, {
|
|
|
9966
9988
|
var TooltipArrow = styled(TooltipPrimitive.Arrow, {
|
|
9967
9989
|
fill: "$dark800"
|
|
9968
9990
|
});
|
|
9991
|
+
function mergeTouchTriggerProps(child, onToggle) {
|
|
9992
|
+
return React10.cloneElement(child, {
|
|
9993
|
+
onClick: (event) => {
|
|
9994
|
+
var _a, _b;
|
|
9995
|
+
(_b = (_a = child.props).onClick) == null ? void 0 : _b.call(_a, event);
|
|
9996
|
+
if (!event.defaultPrevented) {
|
|
9997
|
+
onToggle();
|
|
9998
|
+
}
|
|
9999
|
+
}
|
|
10000
|
+
});
|
|
10001
|
+
}
|
|
9969
10002
|
function Tooltip({
|
|
9970
10003
|
children,
|
|
9971
10004
|
content,
|
|
9972
10005
|
delayDuration = 200,
|
|
9973
|
-
side = "top"
|
|
10006
|
+
side = "top",
|
|
10007
|
+
supportMobileTap = true
|
|
9974
10008
|
}) {
|
|
9975
|
-
|
|
9976
|
-
|
|
9977
|
-
|
|
9978
|
-
|
|
9979
|
-
|
|
9980
|
-
|
|
9981
|
-
|
|
10009
|
+
const hasHover = useHasHover();
|
|
10010
|
+
const [open, setOpen] = React10.useState(false);
|
|
10011
|
+
const isTouchToggleRef = React10.useRef(false);
|
|
10012
|
+
const useTouchBehavior = supportMobileTap && !hasHover;
|
|
10013
|
+
const handleTouchOpenChange = React10.useCallback((nextOpen) => {
|
|
10014
|
+
if (isTouchToggleRef.current) {
|
|
10015
|
+
isTouchToggleRef.current = false;
|
|
10016
|
+
return;
|
|
10017
|
+
}
|
|
10018
|
+
setOpen(nextOpen);
|
|
10019
|
+
}, []);
|
|
10020
|
+
const triggerChild = React10.useMemo(() => {
|
|
10021
|
+
if (!useTouchBehavior || !React10.isValidElement(children)) {
|
|
10022
|
+
return children;
|
|
10023
|
+
}
|
|
10024
|
+
return mergeTouchTriggerProps(
|
|
10025
|
+
children,
|
|
10026
|
+
() => {
|
|
10027
|
+
isTouchToggleRef.current = true;
|
|
10028
|
+
setOpen((prev) => !prev);
|
|
10029
|
+
}
|
|
10030
|
+
);
|
|
10031
|
+
}, [children, useTouchBehavior]);
|
|
10032
|
+
const tooltipContent = typeof content === "string" ? /* @__PURE__ */ jsx26(Text, { typography: "tooltip", color: "grey50", children: content }) : content;
|
|
10033
|
+
return /* @__PURE__ */ jsx26(TooltipProvider, { children: /* @__PURE__ */ jsxs15(
|
|
10034
|
+
TooltipRoot,
|
|
10035
|
+
__spreadProps(__spreadValues({
|
|
10036
|
+
delayDuration: useTouchBehavior ? 0 : delayDuration
|
|
10037
|
+
}, useTouchBehavior ? { open, onOpenChange: handleTouchOpenChange } : {}), {
|
|
10038
|
+
children: [
|
|
10039
|
+
/* @__PURE__ */ jsx26(TooltipTrigger, { asChild: true, children: triggerChild }),
|
|
10040
|
+
/* @__PURE__ */ jsxs15(TooltipContent, { side, sideOffset: 5, children: [
|
|
10041
|
+
tooltipContent,
|
|
10042
|
+
/* @__PURE__ */ jsx26(TooltipArrow, {})
|
|
10043
|
+
] })
|
|
10044
|
+
]
|
|
10045
|
+
})
|
|
10046
|
+
) });
|
|
9982
10047
|
}
|
|
9983
10048
|
|
|
9984
10049
|
// src/components/MultiSelect/index.tsx
|
|
9985
|
-
import
|
|
10050
|
+
import React11, { useCallback as useCallback3, useRef as useRef9, useState as useState12 } from "react";
|
|
9986
10051
|
import { DropdownMenu as DropdownMenu4, Theme as Theme3 } from "@radix-ui/themes";
|
|
9987
10052
|
import { FontAwesomeIcon as FontAwesomeIcon3 } from "@fortawesome/react-fontawesome";
|
|
9988
10053
|
import {
|
|
@@ -9990,15 +10055,15 @@ import {
|
|
|
9990
10055
|
faChevronUp as faChevronUp2,
|
|
9991
10056
|
faSquareXmark
|
|
9992
10057
|
} from "@fortawesome/free-solid-svg-icons";
|
|
9993
|
-
import { useMemo as
|
|
10058
|
+
import { useMemo as useMemo3 } from "react";
|
|
9994
10059
|
|
|
9995
10060
|
// src/hooks/useMediaQuery.ts
|
|
9996
|
-
import { useEffect as
|
|
10061
|
+
import { useEffect as useEffect9, useState as useState11 } from "react";
|
|
9997
10062
|
function useMediaQuery(query) {
|
|
9998
|
-
const [matches, setMatches] =
|
|
10063
|
+
const [matches, setMatches] = useState11(
|
|
9999
10064
|
() => typeof window !== "undefined" ? window.matchMedia(query).matches : false
|
|
10000
10065
|
);
|
|
10001
|
-
|
|
10066
|
+
useEffect9(() => {
|
|
10002
10067
|
const media = window.matchMedia(query);
|
|
10003
10068
|
const listener = (event) => setMatches(event.matches);
|
|
10004
10069
|
setMatches(media.matches);
|
|
@@ -10172,7 +10237,7 @@ import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs16 } from "react/jsx-r
|
|
|
10172
10237
|
var MOBILE_MODAL_MAX_HEIGHT = "90vh";
|
|
10173
10238
|
var MOBILE_MODAL_HEADER_OFFSET = "65px";
|
|
10174
10239
|
var MOBILE_BREAKPOINT = "(max-width: 840px)";
|
|
10175
|
-
var MultiSelect =
|
|
10240
|
+
var MultiSelect = React11.forwardRef(
|
|
10176
10241
|
({
|
|
10177
10242
|
placeholder,
|
|
10178
10243
|
value: selectedValues = [],
|
|
@@ -10195,12 +10260,12 @@ var MultiSelect = React10.forwardRef(
|
|
|
10195
10260
|
showMoreButtonOnClick,
|
|
10196
10261
|
helperTextAfterField = ""
|
|
10197
10262
|
}, fowardedRef) => {
|
|
10198
|
-
const [isOpen, setIsOpen] =
|
|
10199
|
-
const triggerRef =
|
|
10200
|
-
const [allOptionsSelected, setAllOptionsSelected] =
|
|
10263
|
+
const [isOpen, setIsOpen] = useState12(false);
|
|
10264
|
+
const triggerRef = useRef9(null);
|
|
10265
|
+
const [allOptionsSelected, setAllOptionsSelected] = useState12(false);
|
|
10201
10266
|
const isMobile = useMediaQuery(MOBILE_BREAKPOINT);
|
|
10202
10267
|
const hasSections = !!(optionsBySection == null ? void 0 : optionsBySection.length);
|
|
10203
|
-
const resolvedOptions =
|
|
10268
|
+
const resolvedOptions = useMemo3(() => {
|
|
10204
10269
|
if (hasSections) {
|
|
10205
10270
|
return optionsBySection.reduce(
|
|
10206
10271
|
(acc, section) => acc.concat(section.options),
|
|
@@ -10209,21 +10274,21 @@ var MultiSelect = React10.forwardRef(
|
|
|
10209
10274
|
}
|
|
10210
10275
|
return options;
|
|
10211
10276
|
}, [hasSections, options, optionsBySection]);
|
|
10212
|
-
const labelByValue =
|
|
10277
|
+
const labelByValue = useMemo3(() => {
|
|
10213
10278
|
return resolvedOptions.reduce((prev, curr) => {
|
|
10214
10279
|
return __spreadProps(__spreadValues({}, prev), {
|
|
10215
10280
|
[curr.value]: curr.label
|
|
10216
10281
|
});
|
|
10217
10282
|
}, {});
|
|
10218
10283
|
}, [resolvedOptions]);
|
|
10219
|
-
const handleRemove =
|
|
10284
|
+
const handleRemove = useCallback3(
|
|
10220
10285
|
(value) => {
|
|
10221
10286
|
const newValue = selectedValues.filter((v) => v !== value);
|
|
10222
10287
|
onValueChange == null ? void 0 : onValueChange(newValue);
|
|
10223
10288
|
},
|
|
10224
10289
|
[selectedValues, onValueChange]
|
|
10225
10290
|
);
|
|
10226
|
-
const handleSelectAll =
|
|
10291
|
+
const handleSelectAll = useCallback3(
|
|
10227
10292
|
(e) => {
|
|
10228
10293
|
e.preventDefault();
|
|
10229
10294
|
e.stopPropagation();
|
|
@@ -10238,7 +10303,7 @@ var MultiSelect = React10.forwardRef(
|
|
|
10238
10303
|
},
|
|
10239
10304
|
[selectedValues, resolvedOptions, onValueChange]
|
|
10240
10305
|
);
|
|
10241
|
-
const text =
|
|
10306
|
+
const text = useMemo3(() => {
|
|
10242
10307
|
if (selectedValues.length > 0 && singleSelect) {
|
|
10243
10308
|
const value = selectedValues[0];
|
|
10244
10309
|
return labelByValue[value];
|
|
@@ -10249,7 +10314,7 @@ var MultiSelect = React10.forwardRef(
|
|
|
10249
10314
|
onValueChange == null ? void 0 : onValueChange([v]);
|
|
10250
10315
|
setIsOpen(false);
|
|
10251
10316
|
};
|
|
10252
|
-
const handleToggle =
|
|
10317
|
+
const handleToggle = useCallback3(
|
|
10253
10318
|
(e) => {
|
|
10254
10319
|
e.preventDefault();
|
|
10255
10320
|
e.stopPropagation();
|
|
@@ -10328,7 +10393,7 @@ var MultiSelect = React10.forwardRef(
|
|
|
10328
10393
|
);
|
|
10329
10394
|
const renderCheckboxOptions = () => {
|
|
10330
10395
|
if (hasSections) {
|
|
10331
|
-
return optionsBySection.map((section, sectionIndex) => /* @__PURE__ */ jsxs16(
|
|
10396
|
+
return optionsBySection.map((section, sectionIndex) => /* @__PURE__ */ jsxs16(React11.Fragment, { children: [
|
|
10332
10397
|
sectionIndex > 0 && /* @__PURE__ */ jsx27(StyledSectionDivider, {}),
|
|
10333
10398
|
/* @__PURE__ */ jsx27(StyledSectionTitle, { typography: "labelSmall", fontWeight: "semibold", color: "dark600", children: section.name }),
|
|
10334
10399
|
section.options.map(({ value, label }, i) => /* @__PURE__ */ jsx27(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ jsx27(Text, { typography: "labelSmall", children: label }) }, `${section.name}-${i}`))
|
|
@@ -10338,7 +10403,7 @@ var MultiSelect = React10.forwardRef(
|
|
|
10338
10403
|
};
|
|
10339
10404
|
const renderSingleSelectOptions = () => {
|
|
10340
10405
|
if (hasSections) {
|
|
10341
|
-
return optionsBySection.map((section, sectionIndex) => /* @__PURE__ */ jsxs16(
|
|
10406
|
+
return optionsBySection.map((section, sectionIndex) => /* @__PURE__ */ jsxs16(React11.Fragment, { children: [
|
|
10342
10407
|
sectionIndex > 0 && /* @__PURE__ */ jsx27(StyledSectionDivider, {}),
|
|
10343
10408
|
/* @__PURE__ */ jsx27(StyledSectionTitle, { typography: "labelSmall", fontWeight: "semibold", color: "dark600", children: section.name }),
|
|
10344
10409
|
section.options.map(({ value, label }, i) => /* @__PURE__ */ jsx27(StyledItem2, { onClick: () => handleItemClick(value), children: /* @__PURE__ */ jsx27(Text, { typography: "labelSmall", children: label }) }, `${section.name}-${i}`))
|
|
@@ -10394,6 +10459,7 @@ var MultiSelect = React10.forwardRef(
|
|
|
10394
10459
|
maxHeight: MOBILE_MODAL_MAX_HEIGHT,
|
|
10395
10460
|
zIndex: modalZIndex,
|
|
10396
10461
|
preventAutoFocus: true,
|
|
10462
|
+
titleTypography: "headline8",
|
|
10397
10463
|
fitContent: true,
|
|
10398
10464
|
children: /* @__PURE__ */ jsx27(
|
|
10399
10465
|
StyledModalOptionsWrapper,
|
|
@@ -10503,7 +10569,7 @@ var Divider = styled("div", {
|
|
|
10503
10569
|
});
|
|
10504
10570
|
|
|
10505
10571
|
// src/components/ToggleElement/index.tsx
|
|
10506
|
-
import { useState as
|
|
10572
|
+
import { useState as useState13 } from "react";
|
|
10507
10573
|
import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
10508
10574
|
function ToggleElement({
|
|
10509
10575
|
children,
|
|
@@ -10515,7 +10581,7 @@ function ToggleElement({
|
|
|
10515
10581
|
buttonProps,
|
|
10516
10582
|
onOpenChange
|
|
10517
10583
|
}) {
|
|
10518
|
-
const [internalOpen, setInternalOpen] =
|
|
10584
|
+
const [internalOpen, setInternalOpen] = useState13(defaultOpen);
|
|
10519
10585
|
const isControlled = open !== void 0;
|
|
10520
10586
|
const isOpen = isControlled ? open : internalOpen;
|
|
10521
10587
|
const handleClick = () => {
|
|
@@ -10839,7 +10905,7 @@ var TextAreaFormField = (_a) => {
|
|
|
10839
10905
|
import {
|
|
10840
10906
|
useController
|
|
10841
10907
|
} from "react-hook-form";
|
|
10842
|
-
import { useCallback as
|
|
10908
|
+
import { useCallback as useCallback4, useMemo as useMemo4 } from "react";
|
|
10843
10909
|
import { format as format3, unformat as unformat2 } from "@react-input/mask";
|
|
10844
10910
|
import { jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
10845
10911
|
var TextFormField = (_a) => {
|
|
@@ -10862,7 +10928,7 @@ var TextFormField = (_a) => {
|
|
|
10862
10928
|
"onChange",
|
|
10863
10929
|
"valueFormatter"
|
|
10864
10930
|
]);
|
|
10865
|
-
const handleValidate =
|
|
10931
|
+
const handleValidate = useCallback4(
|
|
10866
10932
|
(value) => {
|
|
10867
10933
|
var _a2;
|
|
10868
10934
|
if (value === void 0 || value === null || !required && value.trim() === "")
|
|
@@ -10884,7 +10950,7 @@ var TextFormField = (_a) => {
|
|
|
10884
10950
|
const haveError = !!fieldError;
|
|
10885
10951
|
const errorMsg = fieldError == null ? void 0 : fieldError.message;
|
|
10886
10952
|
const { value: formValue, onChange: formChange } = field;
|
|
10887
|
-
const formattedValue =
|
|
10953
|
+
const formattedValue = useMemo4(() => {
|
|
10888
10954
|
let value = formValue;
|
|
10889
10955
|
if (valueFormatter) value = valueFormatter.format(value);
|
|
10890
10956
|
if (mask) value = format3(value != null ? value : "", mask);
|
|
@@ -11499,7 +11565,7 @@ function StateFormField({
|
|
|
11499
11565
|
}
|
|
11500
11566
|
|
|
11501
11567
|
// src/components/FormFields/AddressFormFields/CityFormField.tsx
|
|
11502
|
-
import { useEffect as
|
|
11568
|
+
import { useEffect as useEffect10, useState as useState14 } from "react";
|
|
11503
11569
|
import { useFormContext as useFormContext5, Controller as Controller2 } from "react-hook-form";
|
|
11504
11570
|
import { Fragment as Fragment6, jsx as jsx47 } from "react/jsx-runtime";
|
|
11505
11571
|
function CityFormField({
|
|
@@ -11512,9 +11578,9 @@ function CityFormField({
|
|
|
11512
11578
|
}) {
|
|
11513
11579
|
const { control, watch } = useFormContext5();
|
|
11514
11580
|
const selectedState = watch(stateName);
|
|
11515
|
-
const [cities, setCities] =
|
|
11516
|
-
const [loading, setLoading] =
|
|
11517
|
-
|
|
11581
|
+
const [cities, setCities] = useState14([]);
|
|
11582
|
+
const [loading, setLoading] = useState14(false);
|
|
11583
|
+
useEffect10(() => {
|
|
11518
11584
|
if (!isBrazil) {
|
|
11519
11585
|
setCities([]);
|
|
11520
11586
|
return;
|
|
@@ -11900,10 +11966,10 @@ var EmailFormField = ({
|
|
|
11900
11966
|
import { useController as useController3 } from "react-hook-form";
|
|
11901
11967
|
|
|
11902
11968
|
// src/components/RichEditor/RichEditor.tsx
|
|
11903
|
-
import { useEffect as
|
|
11969
|
+
import { useEffect as useEffect12, useState as useState16 } from "react";
|
|
11904
11970
|
|
|
11905
11971
|
// src/components/RichEditor/QuillComponent.tsx
|
|
11906
|
-
import { useState as
|
|
11972
|
+
import { useState as useState15, useRef as useRef10, useEffect as useEffect11, useCallback as useCallback5 } from "react";
|
|
11907
11973
|
import { useQuill } from "react-quilljs";
|
|
11908
11974
|
|
|
11909
11975
|
// src/utils/uploadService.ts
|
|
@@ -13106,12 +13172,12 @@ var QuillComponent = ({
|
|
|
13106
13172
|
onCharacterCountChange,
|
|
13107
13173
|
maxLength
|
|
13108
13174
|
}) => {
|
|
13109
|
-
const [showVideoModal, setShowVideoModal] =
|
|
13110
|
-
const [videoUrl, setVideoUrl] =
|
|
13111
|
-
const [showLinkModal, setShowLinkModal] =
|
|
13112
|
-
const [linkUrl, setLinkUrl] =
|
|
13113
|
-
const videoModalRef =
|
|
13114
|
-
const linkModalRef =
|
|
13175
|
+
const [showVideoModal, setShowVideoModal] = useState15(false);
|
|
13176
|
+
const [videoUrl, setVideoUrl] = useState15("");
|
|
13177
|
+
const [showLinkModal, setShowLinkModal] = useState15(false);
|
|
13178
|
+
const [linkUrl, setLinkUrl] = useState15("");
|
|
13179
|
+
const videoModalRef = useRef10(null);
|
|
13180
|
+
const linkModalRef = useRef10(null);
|
|
13115
13181
|
const { addToast, removeToast } = useToast();
|
|
13116
13182
|
const formatHTML = (html) => {
|
|
13117
13183
|
const parser = new DOMParser();
|
|
@@ -13130,7 +13196,7 @@ var QuillComponent = ({
|
|
|
13130
13196
|
placeholder,
|
|
13131
13197
|
readOnly: disabled
|
|
13132
13198
|
});
|
|
13133
|
-
const handleImageUpload =
|
|
13199
|
+
const handleImageUpload = useCallback5(
|
|
13134
13200
|
(file) => __async(null, null, function* () {
|
|
13135
13201
|
if (disabled || !quill || !uploadConfig) return;
|
|
13136
13202
|
try {
|
|
@@ -13162,7 +13228,7 @@ var QuillComponent = ({
|
|
|
13162
13228
|
}),
|
|
13163
13229
|
[disabled, quill, addToast, removeToast, uploadConfig, onChange]
|
|
13164
13230
|
);
|
|
13165
|
-
|
|
13231
|
+
useEffect11(() => {
|
|
13166
13232
|
if (!quill) return;
|
|
13167
13233
|
if (value !== void 0 && value !== null) {
|
|
13168
13234
|
const currentContent = quill.root.innerHTML;
|
|
@@ -13178,7 +13244,7 @@ var QuillComponent = ({
|
|
|
13178
13244
|
}
|
|
13179
13245
|
onCharacterCountChange == null ? void 0 : onCharacterCountChange(quill.getText().trim().length);
|
|
13180
13246
|
}, [quill, value, onCharacterCountChange]);
|
|
13181
|
-
|
|
13247
|
+
useEffect11(() => {
|
|
13182
13248
|
if (quill) {
|
|
13183
13249
|
quill.on("text-change", (delta, oldDelta, source) => {
|
|
13184
13250
|
if (source === "user") {
|
|
@@ -13239,7 +13305,7 @@ var QuillComponent = ({
|
|
|
13239
13305
|
}, 2e3);
|
|
13240
13306
|
}
|
|
13241
13307
|
}, [quill, onChange, handleImageUpload, onCharacterCountChange, formats]);
|
|
13242
|
-
|
|
13308
|
+
useEffect11(() => {
|
|
13243
13309
|
if (quill) {
|
|
13244
13310
|
quill.enable(!disabled);
|
|
13245
13311
|
if (!disabled) {
|
|
@@ -13250,11 +13316,11 @@ var QuillComponent = ({
|
|
|
13250
13316
|
}
|
|
13251
13317
|
}
|
|
13252
13318
|
}, [quill, disabled]);
|
|
13253
|
-
const handleLinkCancel =
|
|
13319
|
+
const handleLinkCancel = useCallback5(() => {
|
|
13254
13320
|
setLinkUrl("");
|
|
13255
13321
|
setShowLinkModal(false);
|
|
13256
13322
|
}, []);
|
|
13257
|
-
const handleLinkSubmit =
|
|
13323
|
+
const handleLinkSubmit = useCallback5(() => {
|
|
13258
13324
|
if (!linkUrl.trim() || !quill) return;
|
|
13259
13325
|
const url = linkUrl.trim();
|
|
13260
13326
|
const selection = quill.getSelection();
|
|
@@ -13269,11 +13335,11 @@ var QuillComponent = ({
|
|
|
13269
13335
|
setLinkUrl("");
|
|
13270
13336
|
setShowLinkModal(false);
|
|
13271
13337
|
}, [linkUrl, quill]);
|
|
13272
|
-
const handleVideoCancel =
|
|
13338
|
+
const handleVideoCancel = useCallback5(() => {
|
|
13273
13339
|
setVideoUrl("");
|
|
13274
13340
|
setShowVideoModal(false);
|
|
13275
13341
|
}, []);
|
|
13276
|
-
const handleVideoSubmit =
|
|
13342
|
+
const handleVideoSubmit = useCallback5(() => {
|
|
13277
13343
|
var _a, _b;
|
|
13278
13344
|
if (!videoUrl.trim() || !quill) return;
|
|
13279
13345
|
let processedUrl = videoUrl.trim();
|
|
@@ -13306,7 +13372,7 @@ var QuillComponent = ({
|
|
|
13306
13372
|
setVideoUrl("");
|
|
13307
13373
|
setShowVideoModal(false);
|
|
13308
13374
|
}, [videoUrl, quill]);
|
|
13309
|
-
|
|
13375
|
+
useEffect11(() => {
|
|
13310
13376
|
const handleClickOutside = (event) => {
|
|
13311
13377
|
if (showVideoModal && videoModalRef.current && !videoModalRef.current.contains(event.target)) {
|
|
13312
13378
|
handleVideoCancel();
|
|
@@ -13468,8 +13534,8 @@ var QuillComponent_default = QuillComponent;
|
|
|
13468
13534
|
// src/components/RichEditor/RichEditor.tsx
|
|
13469
13535
|
import { jsx as jsx54 } from "react/jsx-runtime";
|
|
13470
13536
|
var RichEditor = (props) => {
|
|
13471
|
-
const [isClient, setIsClient] =
|
|
13472
|
-
|
|
13537
|
+
const [isClient, setIsClient] = useState16(false);
|
|
13538
|
+
useEffect12(() => {
|
|
13473
13539
|
setIsClient(typeof window !== "undefined");
|
|
13474
13540
|
}, []);
|
|
13475
13541
|
if (!isClient) return null;
|
|
@@ -13491,7 +13557,7 @@ var RichTextPresenter = ({ richText }) => {
|
|
|
13491
13557
|
var RichTextPresenter_default = RichTextPresenter;
|
|
13492
13558
|
|
|
13493
13559
|
// src/components/FormFields/RichEditorFormField.tsx
|
|
13494
|
-
import { useEffect as
|
|
13560
|
+
import { useEffect as useEffect13, useState as useState17 } from "react";
|
|
13495
13561
|
import { Fragment as Fragment7, jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
13496
13562
|
var getPlainTextLengthFromHtml = (html) => {
|
|
13497
13563
|
var _a, _b;
|
|
@@ -13540,7 +13606,7 @@ var RichEditorFormField = (_a) => {
|
|
|
13540
13606
|
}
|
|
13541
13607
|
}
|
|
13542
13608
|
});
|
|
13543
|
-
const [caracterQuantity, setCaracterQuantity] =
|
|
13609
|
+
const [caracterQuantity, setCaracterQuantity] = useState17(
|
|
13544
13610
|
() => getRemainingCharacters(maxLength, field.value)
|
|
13545
13611
|
);
|
|
13546
13612
|
const handleCharacterCountChange = (count) => {
|
|
@@ -13548,7 +13614,7 @@ var RichEditorFormField = (_a) => {
|
|
|
13548
13614
|
setCaracterQuantity(Math.max(0, maxLength - count));
|
|
13549
13615
|
}
|
|
13550
13616
|
};
|
|
13551
|
-
|
|
13617
|
+
useEffect13(() => {
|
|
13552
13618
|
setCaracterQuantity(getRemainingCharacters(maxLength, field.value));
|
|
13553
13619
|
}, [field.value, maxLength]);
|
|
13554
13620
|
const fieldError = fieldState.error;
|
|
@@ -13594,7 +13660,7 @@ var RichEditorFormField = (_a) => {
|
|
|
13594
13660
|
|
|
13595
13661
|
// src/components/FormFields/CalendarFormField.tsx
|
|
13596
13662
|
import { useController as useController4 } from "react-hook-form";
|
|
13597
|
-
import { useCallback as
|
|
13663
|
+
import { useCallback as useCallback6 } from "react";
|
|
13598
13664
|
import { jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
13599
13665
|
var CalendarFormField = (_a) => {
|
|
13600
13666
|
var _b = _a, {
|
|
@@ -13620,7 +13686,7 @@ var CalendarFormField = (_a) => {
|
|
|
13620
13686
|
"maxYearsFromNow",
|
|
13621
13687
|
"maxDate"
|
|
13622
13688
|
]);
|
|
13623
|
-
const handleValidate =
|
|
13689
|
+
const handleValidate = useCallback6(
|
|
13624
13690
|
(value) => {
|
|
13625
13691
|
var _a2;
|
|
13626
13692
|
if (value === void 0 || value === null) {
|
|
@@ -13675,7 +13741,7 @@ var CalendarFormField = (_a) => {
|
|
|
13675
13741
|
};
|
|
13676
13742
|
|
|
13677
13743
|
// src/components/FormFields/DoubleCalendarFormField.tsx
|
|
13678
|
-
import { useCallback as
|
|
13744
|
+
import { useCallback as useCallback7 } from "react";
|
|
13679
13745
|
import { useController as useController5 } from "react-hook-form";
|
|
13680
13746
|
import { jsx as jsx58, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
13681
13747
|
var DoubleCalendarFormField = (_a) => {
|
|
@@ -13702,7 +13768,7 @@ var DoubleCalendarFormField = (_a) => {
|
|
|
13702
13768
|
"maxDate",
|
|
13703
13769
|
"disabled"
|
|
13704
13770
|
]);
|
|
13705
|
-
const handleValidate =
|
|
13771
|
+
const handleValidate = useCallback7(
|
|
13706
13772
|
(value) => {
|
|
13707
13773
|
var _a2;
|
|
13708
13774
|
if (value === void 0 || value === null) {
|
|
@@ -13751,7 +13817,7 @@ var DoubleCalendarFormField = (_a) => {
|
|
|
13751
13817
|
|
|
13752
13818
|
// src/components/FormFields/TimePickerFormField.tsx
|
|
13753
13819
|
import { useController as useController6 } from "react-hook-form";
|
|
13754
|
-
import { useCallback as
|
|
13820
|
+
import { useCallback as useCallback8 } from "react";
|
|
13755
13821
|
import { jsx as jsx59, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
13756
13822
|
var TimePickerFormField = (_a) => {
|
|
13757
13823
|
var _b = _a, {
|
|
@@ -13769,7 +13835,7 @@ var TimePickerFormField = (_a) => {
|
|
|
13769
13835
|
"validationErrorMessage",
|
|
13770
13836
|
"rules"
|
|
13771
13837
|
]);
|
|
13772
|
-
const handleValidate =
|
|
13838
|
+
const handleValidate = useCallback8(
|
|
13773
13839
|
(value) => {
|
|
13774
13840
|
var _a2;
|
|
13775
13841
|
if (value === void 0 || value === null || value === "") {
|
|
@@ -13822,7 +13888,7 @@ var TimePickerFormField = (_a) => {
|
|
|
13822
13888
|
|
|
13823
13889
|
// src/components/FormFields/DateAndTimeFormField.tsx
|
|
13824
13890
|
import { useController as useController7 } from "react-hook-form";
|
|
13825
|
-
import { useCallback as
|
|
13891
|
+
import { useCallback as useCallback9, useEffect as useEffect14, useMemo as useMemo5, useState as useState18 } from "react";
|
|
13826
13892
|
import { jsx as jsx60, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
13827
13893
|
var DateAndTimeFormField = (_a) => {
|
|
13828
13894
|
var _b = _a, {
|
|
@@ -13851,7 +13917,7 @@ var DateAndTimeFormField = (_a) => {
|
|
|
13851
13917
|
"maxDate"
|
|
13852
13918
|
]);
|
|
13853
13919
|
const { addToast } = useToast();
|
|
13854
|
-
const handleDisabledClick =
|
|
13920
|
+
const handleDisabledClick = useCallback9(
|
|
13855
13921
|
(event) => {
|
|
13856
13922
|
if (!disabled) return;
|
|
13857
13923
|
event.preventDefault();
|
|
@@ -13864,7 +13930,7 @@ var DateAndTimeFormField = (_a) => {
|
|
|
13864
13930
|
},
|
|
13865
13931
|
[addToast, disabled, disabledInfo]
|
|
13866
13932
|
);
|
|
13867
|
-
const handleDisabledMouseDown =
|
|
13933
|
+
const handleDisabledMouseDown = useCallback9(
|
|
13868
13934
|
(event) => {
|
|
13869
13935
|
if (!disabled) return;
|
|
13870
13936
|
event.preventDefault();
|
|
@@ -13872,7 +13938,7 @@ var DateAndTimeFormField = (_a) => {
|
|
|
13872
13938
|
},
|
|
13873
13939
|
[disabled]
|
|
13874
13940
|
);
|
|
13875
|
-
const handleValidate =
|
|
13941
|
+
const handleValidate = useCallback9(
|
|
13876
13942
|
(value) => {
|
|
13877
13943
|
var _a2;
|
|
13878
13944
|
if (value === void 0 || value === null || value === "") {
|
|
@@ -13895,7 +13961,7 @@ var DateAndTimeFormField = (_a) => {
|
|
|
13895
13961
|
const haveError = !!fieldError;
|
|
13896
13962
|
const errorMsg = fieldError == null ? void 0 : fieldError.message;
|
|
13897
13963
|
const { value: isoValue, onChange: setIsoValue } = field;
|
|
13898
|
-
const { selectedDateFromIso, selectedTimeFromIso } =
|
|
13964
|
+
const { selectedDateFromIso, selectedTimeFromIso } = useMemo5(() => {
|
|
13899
13965
|
if (!isoValue) return { selectedDateFromIso: void 0, selectedTimeFromIso: void 0 };
|
|
13900
13966
|
try {
|
|
13901
13967
|
const date = new Date(isoValue);
|
|
@@ -13910,13 +13976,13 @@ var DateAndTimeFormField = (_a) => {
|
|
|
13910
13976
|
return { selectedDateFromIso: void 0, selectedTimeFromIso: void 0 };
|
|
13911
13977
|
}
|
|
13912
13978
|
}, [isoValue]);
|
|
13913
|
-
const [draftDate, setDraftDate] =
|
|
13914
|
-
const [draftTime, setDraftTime] =
|
|
13915
|
-
|
|
13979
|
+
const [draftDate, setDraftDate] = useState18(selectedDateFromIso);
|
|
13980
|
+
const [draftTime, setDraftTime] = useState18(selectedTimeFromIso);
|
|
13981
|
+
useEffect14(() => {
|
|
13916
13982
|
setDraftDate(selectedDateFromIso);
|
|
13917
13983
|
setDraftTime(selectedTimeFromIso);
|
|
13918
13984
|
}, [selectedDateFromIso, selectedTimeFromIso]);
|
|
13919
|
-
const combineDateTime =
|
|
13985
|
+
const combineDateTime = useCallback9(
|
|
13920
13986
|
(date, time) => {
|
|
13921
13987
|
if (!date) {
|
|
13922
13988
|
setIsoValue("");
|
|
@@ -14003,11 +14069,11 @@ var DateAndTimeFormField = (_a) => {
|
|
|
14003
14069
|
};
|
|
14004
14070
|
|
|
14005
14071
|
// src/hooks/useImageUpload.ts
|
|
14006
|
-
import { useState as
|
|
14072
|
+
import { useState as useState19, useCallback as useCallback10 } from "react";
|
|
14007
14073
|
var useImageUpload = (options) => {
|
|
14008
|
-
const [isUploading, setIsUploading] =
|
|
14009
|
-
const [progress, setProgress] =
|
|
14010
|
-
const [error, setError] =
|
|
14074
|
+
const [isUploading, setIsUploading] = useState19(false);
|
|
14075
|
+
const [progress, setProgress] = useState19(null);
|
|
14076
|
+
const [error, setError] = useState19(null);
|
|
14011
14077
|
const {
|
|
14012
14078
|
onSuccess,
|
|
14013
14079
|
onError,
|
|
@@ -14017,7 +14083,7 @@ var useImageUpload = (options) => {
|
|
|
14017
14083
|
allowedTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"],
|
|
14018
14084
|
uploadConfig
|
|
14019
14085
|
} = options;
|
|
14020
|
-
const validateFile =
|
|
14086
|
+
const validateFile = useCallback10(
|
|
14021
14087
|
(file) => {
|
|
14022
14088
|
if (!allowedTypes.includes(file.type)) {
|
|
14023
14089
|
const errorMsg = "Tipo de arquivo n\xE3o suportado";
|
|
@@ -14035,7 +14101,7 @@ var useImageUpload = (options) => {
|
|
|
14035
14101
|
},
|
|
14036
14102
|
[allowedTypes, maxFileSize, onError]
|
|
14037
14103
|
);
|
|
14038
|
-
const uploadFile =
|
|
14104
|
+
const uploadFile = useCallback10(
|
|
14039
14105
|
(file) => __async(null, null, function* () {
|
|
14040
14106
|
if (!validateFile(file)) {
|
|
14041
14107
|
return null;
|
|
@@ -14088,7 +14154,7 @@ var useImageUpload = (options) => {
|
|
|
14088
14154
|
}),
|
|
14089
14155
|
[validateFile, onSuccess, onError, onProgress]
|
|
14090
14156
|
);
|
|
14091
|
-
const reset =
|
|
14157
|
+
const reset = useCallback10(() => {
|
|
14092
14158
|
setIsUploading(false);
|
|
14093
14159
|
setProgress(null);
|
|
14094
14160
|
setError(null);
|