nexaas-ui-components 1.0.21 → 1.0.23
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.cjs +1643 -19
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.cts +141 -12
- package/dist/index.d.ts +141 -12
- package/dist/index.js +1629 -17
- package/dist/index.js.map +1 -1
- package/package.json +3 -1
package/dist/index.cjs
CHANGED
|
@@ -14,10 +14,12 @@ var lodashNamespace = require('lodash');
|
|
|
14
14
|
var InputMask = require('react-input-mask');
|
|
15
15
|
var ReactModalNamespace = require('react-modal');
|
|
16
16
|
var reactTooltip = require('react-tooltip');
|
|
17
|
-
var
|
|
17
|
+
var Select = require('react-select');
|
|
18
18
|
var AsyncSelect = require('react-select/async');
|
|
19
19
|
var reactTable = require('@tanstack/react-table');
|
|
20
20
|
var matchSorterUtils = require('@tanstack/match-sorter-utils');
|
|
21
|
+
var Fuse = require('fuse.js');
|
|
22
|
+
var reactPapaparse = require('react-papaparse');
|
|
21
23
|
|
|
22
24
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
23
25
|
|
|
@@ -45,7 +47,9 @@ var IntlCurrencyInputRaw__default = /*#__PURE__*/_interopDefault(IntlCurrencyInp
|
|
|
45
47
|
var lodashNamespace__namespace = /*#__PURE__*/_interopNamespace(lodashNamespace);
|
|
46
48
|
var InputMask__default = /*#__PURE__*/_interopDefault(InputMask);
|
|
47
49
|
var ReactModalNamespace__namespace = /*#__PURE__*/_interopNamespace(ReactModalNamespace);
|
|
50
|
+
var Select__default = /*#__PURE__*/_interopDefault(Select);
|
|
48
51
|
var AsyncSelect__default = /*#__PURE__*/_interopDefault(AsyncSelect);
|
|
52
|
+
var Fuse__default = /*#__PURE__*/_interopDefault(Fuse);
|
|
49
53
|
|
|
50
54
|
// src/components/Button.tsx
|
|
51
55
|
var SpinnerIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -96,7 +100,7 @@ var variants = {
|
|
|
96
100
|
text: "shadow-button bg-surface border-[0.5px] border-neutral-400 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-600 active:text-neutral-600 active:shadow-none disabled:text-neutral-400 disabled:opacity-50"
|
|
97
101
|
},
|
|
98
102
|
icon: {
|
|
99
|
-
text: "shadow-button bg-white border-[0.5px] border-neutral-300 text-neutral-500 hover:bg-[#f5f5f5] hover:text-neutral-600 active:bg-neutral-100 active:text-neutral-600 disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50 active:shadow-none"
|
|
103
|
+
text: "shadow-button gap-1 bg-white border-[0.5px] border-neutral-300 text-neutral-500 hover:bg-[#f5f5f5] hover:text-neutral-600 active:bg-neutral-100 active:text-neutral-600 disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50 active:shadow-none"
|
|
100
104
|
},
|
|
101
105
|
outline: {
|
|
102
106
|
text: "shadow-button bg-surface border-[0.5px] border-rose-500 text-rose-500 hover:bg-rose-50 hover:text-rose-600 active:bg-rose-100 active:text-rose-600 disabled:bg-surface disabled:border-[0.5px] disabled:border-rose-700 disabled:opacity-50 active:shadow-none"
|
|
@@ -232,7 +236,7 @@ var Button = ({
|
|
|
232
236
|
};
|
|
233
237
|
var sizes2 = {
|
|
234
238
|
xxs: {
|
|
235
|
-
text: "min-h-[14px] max-h-[40px]"
|
|
239
|
+
text: "min-h-[14px] max-h-[40px] text-[14px] gap-[4px]"
|
|
236
240
|
},
|
|
237
241
|
xs: {
|
|
238
242
|
text: "h-[36px]"
|
|
@@ -2503,7 +2507,7 @@ var ModalDialog = ({
|
|
|
2503
2507
|
description,
|
|
2504
2508
|
children
|
|
2505
2509
|
}) => {
|
|
2506
|
-
const
|
|
2510
|
+
const customStyles6 = {
|
|
2507
2511
|
content: {
|
|
2508
2512
|
top: "50%",
|
|
2509
2513
|
left: "50%",
|
|
@@ -2534,10 +2538,10 @@ var ModalDialog = ({
|
|
|
2534
2538
|
ariaHideApp: false,
|
|
2535
2539
|
isOpen: open,
|
|
2536
2540
|
onRequestClose: onClose,
|
|
2537
|
-
style:
|
|
2541
|
+
style: customStyles6,
|
|
2538
2542
|
contentLabel: "Example Modal",
|
|
2539
2543
|
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx9__default.default(sizes3[size]), children: [
|
|
2540
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-
|
|
2544
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-[6px] border-b border-b-neutral-200 flex items-center justify-between", children: [
|
|
2541
2545
|
/* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-[24px] font-bold flex items-center gap-2", children: [
|
|
2542
2546
|
alertType && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx9__default.default([alertTypes[alertType]], "text-[30px]"), children: icon }),
|
|
2543
2547
|
title
|
|
@@ -2565,7 +2569,7 @@ var ModalDialog = ({
|
|
|
2565
2569
|
}
|
|
2566
2570
|
},
|
|
2567
2571
|
variant: "secondary",
|
|
2568
|
-
size: "
|
|
2572
|
+
size: "md",
|
|
2569
2573
|
children: "Cancelar"
|
|
2570
2574
|
}
|
|
2571
2575
|
),
|
|
@@ -2743,7 +2747,7 @@ var SelectField = ({
|
|
|
2743
2747
|
small = false
|
|
2744
2748
|
}) => {
|
|
2745
2749
|
var _a;
|
|
2746
|
-
const { Option, DropdownIndicator, ClearIndicator, SingleValue } =
|
|
2750
|
+
const { Option, DropdownIndicator, ClearIndicator, SingleValue } = Select.components;
|
|
2747
2751
|
const selectRef = React4.useRef(null);
|
|
2748
2752
|
const [inputValue, setInputValue] = React4.useState("");
|
|
2749
2753
|
const [loading, setLoading] = React4.useState(false);
|
|
@@ -2985,7 +2989,7 @@ var SelectField = ({
|
|
|
2985
2989
|
);
|
|
2986
2990
|
};
|
|
2987
2991
|
var ValueContainer = ({ children, ...props }) => {
|
|
2988
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2992
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Select.components.ValueContainer, { ...props, children });
|
|
2989
2993
|
};
|
|
2990
2994
|
|
|
2991
2995
|
// src/components/SelectFieldBip/SelectFieldBip.styles.tsx
|
|
@@ -3133,14 +3137,14 @@ var SelectFieldBip = ({
|
|
|
3133
3137
|
onErrorBip,
|
|
3134
3138
|
clearAfterSelect = true,
|
|
3135
3139
|
messages = {
|
|
3136
|
-
searching: "
|
|
3137
|
-
debounce: `
|
|
3138
|
-
emptyMessage: "
|
|
3139
|
-
loading: "
|
|
3140
|
+
searching: "Buscando...",
|
|
3141
|
+
debounce: `Digite pelo menos {debounce} caracteres`,
|
|
3142
|
+
emptyMessage: "Nenhuma op\xE7\xE3o encontrada",
|
|
3143
|
+
loading: "Carregando..."
|
|
3140
3144
|
}
|
|
3141
3145
|
}) => {
|
|
3142
3146
|
var _a;
|
|
3143
|
-
const { Option, SingleValue } =
|
|
3147
|
+
const { Option, SingleValue } = Select.components;
|
|
3144
3148
|
const selectRef = React4.useRef(null);
|
|
3145
3149
|
const [inputValue, setInputValue] = React4.useState("");
|
|
3146
3150
|
const [loading, setLoading] = React4.useState(false);
|
|
@@ -3222,15 +3226,15 @@ var SelectFieldBip = ({
|
|
|
3222
3226
|
}
|
|
3223
3227
|
);
|
|
3224
3228
|
} else if (debounce2 && inputValue.length < debounce2) {
|
|
3225
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 text-
|
|
3229
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "var(--label)" }, className: "p-2 text-[14px]", children: messages.debounce.replace("{debounce}", String(debounce2)) });
|
|
3226
3230
|
}
|
|
3227
3231
|
};
|
|
3228
3232
|
const NoOptionsMessage = (props) => {
|
|
3229
3233
|
var _a2;
|
|
3230
3234
|
if (inputValue.length == 0 && debounce2 > 0 || debounce2 > 0 && inputValue.length < debounce2) {
|
|
3231
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 text-
|
|
3235
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 text-[14px]", style: { color: "var(--label)" }, children: messages.debounce.replace("{debounce}", String(debounce2)) });
|
|
3232
3236
|
} else if (inputValue.length > 0 && ((_a2 = props == null ? void 0 : props.options) == null ? void 0 : _a2.length) == 0) {
|
|
3233
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 text-
|
|
3237
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 text-[14px]", style: { color: "var(--label)" }, children: messages.emptyMessage });
|
|
3234
3238
|
}
|
|
3235
3239
|
};
|
|
3236
3240
|
const DropdownIndicatorCustom = (props) => {
|
|
@@ -3372,7 +3376,7 @@ var SelectFieldBip = ({
|
|
|
3372
3376
|
);
|
|
3373
3377
|
};
|
|
3374
3378
|
var ValueContainer2 = ({ children, ...props }) => {
|
|
3375
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3379
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Select.components.ValueContainer, { ...props, children });
|
|
3376
3380
|
};
|
|
3377
3381
|
var Radio = ({
|
|
3378
3382
|
disabled,
|
|
@@ -4608,6 +4612,1616 @@ var EditableText = ({
|
|
|
4608
4612
|
}
|
|
4609
4613
|
);
|
|
4610
4614
|
};
|
|
4615
|
+
var EditableTextSelect = ({
|
|
4616
|
+
control,
|
|
4617
|
+
name,
|
|
4618
|
+
emptyLabel,
|
|
4619
|
+
options,
|
|
4620
|
+
optionStyle,
|
|
4621
|
+
valueStyle,
|
|
4622
|
+
showInputSeach,
|
|
4623
|
+
onChangeValue
|
|
4624
|
+
}) => {
|
|
4625
|
+
const [showModal, setShowModal] = React4.useState(false);
|
|
4626
|
+
const [optionsList, setOptionsList] = React4.useState(() => options);
|
|
4627
|
+
const [inputSearch, setInputSearch] = React4.useState("");
|
|
4628
|
+
const optionsFuse = {
|
|
4629
|
+
includeScore: false,
|
|
4630
|
+
keys: ["name"]
|
|
4631
|
+
};
|
|
4632
|
+
const fuse = new Fuse__default.default(optionsList, optionsFuse);
|
|
4633
|
+
const filter = () => {
|
|
4634
|
+
var _a;
|
|
4635
|
+
let results = [...options];
|
|
4636
|
+
if (inputSearch) {
|
|
4637
|
+
results = (_a = fuse.search(inputSearch)) == null ? void 0 : _a.map((result) => result.item);
|
|
4638
|
+
}
|
|
4639
|
+
setOptionsList(results);
|
|
4640
|
+
};
|
|
4641
|
+
React4.useEffect(() => {
|
|
4642
|
+
setOptionsList(() => options);
|
|
4643
|
+
}, [options]);
|
|
4644
|
+
React4.useEffect(() => {
|
|
4645
|
+
filter();
|
|
4646
|
+
}, [inputSearch]);
|
|
4647
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4648
|
+
reactHookForm.Controller,
|
|
4649
|
+
{
|
|
4650
|
+
control,
|
|
4651
|
+
name,
|
|
4652
|
+
render: ({ field }) => {
|
|
4653
|
+
var _a;
|
|
4654
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(react.Menu, { children: [
|
|
4655
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.Menu.Button, { children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4656
|
+
"div",
|
|
4657
|
+
{
|
|
4658
|
+
className: "group flex gap-[5px] cursor-pointer z-[500] items-center",
|
|
4659
|
+
onClick: () => setShowModal(!showModal),
|
|
4660
|
+
children: [
|
|
4661
|
+
field.value ? valueStyle ? valueStyle(field.value) : (_a = field == null ? void 0 : field.value) == null ? void 0 : _a.name : /* @__PURE__ */ jsxRuntime.jsx(
|
|
4662
|
+
"label",
|
|
4663
|
+
{
|
|
4664
|
+
className: clsx9__default.default(
|
|
4665
|
+
{
|
|
4666
|
+
["text-label"]: !field.value,
|
|
4667
|
+
["text-paragraph"]: field.value
|
|
4668
|
+
},
|
|
4669
|
+
"text-p-md group-hover:underline group-hover:underline-offset-[3px] cursor-pointer decoration-blue-500"
|
|
4670
|
+
),
|
|
4671
|
+
children: emptyLabel ? emptyLabel : "N\xE3o informado"
|
|
4672
|
+
}
|
|
4673
|
+
),
|
|
4674
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4675
|
+
"i",
|
|
4676
|
+
{
|
|
4677
|
+
style: { fontSize: "16px" },
|
|
4678
|
+
className: "uil uil-pen text-sm text-blue-500"
|
|
4679
|
+
}
|
|
4680
|
+
)
|
|
4681
|
+
]
|
|
4682
|
+
}
|
|
4683
|
+
) }),
|
|
4684
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.Menu.Items, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[294px] p-2 bg-white border border-neutral-300 absolute z-[500] rounded-lg", children: [
|
|
4685
|
+
showInputSeach && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4686
|
+
InputSmall,
|
|
4687
|
+
{
|
|
4688
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-search" }),
|
|
4689
|
+
onChange: (e) => setInputSearch(e),
|
|
4690
|
+
value: inputSearch,
|
|
4691
|
+
placeholder: "Pesquisar",
|
|
4692
|
+
clearField: true,
|
|
4693
|
+
onKeyDown: (e) => {
|
|
4694
|
+
if (e.key == " " || e.code == "Space") {
|
|
4695
|
+
e.stopPropagation();
|
|
4696
|
+
}
|
|
4697
|
+
}
|
|
4698
|
+
}
|
|
4699
|
+
) }),
|
|
4700
|
+
optionsList == null ? void 0 : optionsList.map((opt) => {
|
|
4701
|
+
var _a2;
|
|
4702
|
+
const selected = (opt == null ? void 0 : opt.id) === ((_a2 = field == null ? void 0 : field.value) == null ? void 0 : _a2.id);
|
|
4703
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4704
|
+
react.Menu.Item,
|
|
4705
|
+
{
|
|
4706
|
+
onClick: () => {
|
|
4707
|
+
field.onChange(opt);
|
|
4708
|
+
if (onChangeValue) {
|
|
4709
|
+
onChangeValue(opt);
|
|
4710
|
+
}
|
|
4711
|
+
},
|
|
4712
|
+
as: "button",
|
|
4713
|
+
className: clsx9__default.default(
|
|
4714
|
+
"p-3 mb-1 rounded-lg items-center flex whitespace-nowrap no-underline w-full",
|
|
4715
|
+
{
|
|
4716
|
+
"bg-blue-500 hover:bg-blue-500 hover:text-[#FFFFFF] text-[#FFFFFF]": selected
|
|
4717
|
+
},
|
|
4718
|
+
{
|
|
4719
|
+
"hover:bg-neutral-100 text-paragraph": !selected
|
|
4720
|
+
},
|
|
4721
|
+
{
|
|
4722
|
+
"cursor-pointer": !opt.disabled
|
|
4723
|
+
}
|
|
4724
|
+
),
|
|
4725
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2 w-full items-center whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full justify-between items-center", children: [
|
|
4726
|
+
optionStyle ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: optionStyle(opt) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
|
|
4727
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", children: opt == null ? void 0 : opt.title }),
|
|
4728
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4729
|
+
"span",
|
|
4730
|
+
{
|
|
4731
|
+
className: clsx9__default.default({
|
|
4732
|
+
"text-label": opt.disabled
|
|
4733
|
+
}),
|
|
4734
|
+
children: opt.name
|
|
4735
|
+
}
|
|
4736
|
+
),
|
|
4737
|
+
opt == null ? void 0 : opt.description
|
|
4738
|
+
] }),
|
|
4739
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4740
|
+
"span",
|
|
4741
|
+
{
|
|
4742
|
+
className: clsx9__default.default(
|
|
4743
|
+
"group-hover:text-[#fff] ",
|
|
4744
|
+
{
|
|
4745
|
+
"text-[#fff]": selected
|
|
4746
|
+
},
|
|
4747
|
+
{
|
|
4748
|
+
"text-blue-500": !selected
|
|
4749
|
+
}
|
|
4750
|
+
),
|
|
4751
|
+
children: selected && /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-check" })
|
|
4752
|
+
}
|
|
4753
|
+
)
|
|
4754
|
+
] }) })
|
|
4755
|
+
}
|
|
4756
|
+
);
|
|
4757
|
+
})
|
|
4758
|
+
] }) })
|
|
4759
|
+
] });
|
|
4760
|
+
}
|
|
4761
|
+
}
|
|
4762
|
+
);
|
|
4763
|
+
};
|
|
4764
|
+
function ImagePreview({ open, setOpen, previewImage }) {
|
|
4765
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react.Transition.Root, { show: open, as: React4.Fragment, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4766
|
+
react.Dialog,
|
|
4767
|
+
{
|
|
4768
|
+
as: "div",
|
|
4769
|
+
className: "relative z-[999]",
|
|
4770
|
+
onClose: () => setOpen(false),
|
|
4771
|
+
children: [
|
|
4772
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4773
|
+
react.Transition.Child,
|
|
4774
|
+
{
|
|
4775
|
+
as: React4.Fragment,
|
|
4776
|
+
enter: "ease-out duration-300",
|
|
4777
|
+
enterFrom: "opacity-0",
|
|
4778
|
+
enterTo: "opacity-100",
|
|
4779
|
+
leave: "ease-in duration-200",
|
|
4780
|
+
leaveFrom: "opacity-100",
|
|
4781
|
+
leaveTo: "opacity-0",
|
|
4782
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" })
|
|
4783
|
+
}
|
|
4784
|
+
),
|
|
4785
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-10 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4786
|
+
react.Transition.Child,
|
|
4787
|
+
{
|
|
4788
|
+
as: React4.Fragment,
|
|
4789
|
+
enter: "ease-out duration-300",
|
|
4790
|
+
enterFrom: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
|
|
4791
|
+
enterTo: "opacity-100 translate-y-0 sm:scale-100",
|
|
4792
|
+
leave: "ease-in duration-200",
|
|
4793
|
+
leaveFrom: "opacity-100 translate-y-0 sm:scale-100",
|
|
4794
|
+
leaveTo: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
|
|
4795
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(react.Dialog.Panel, { className: "flex flex-col min-w-[350px] min-h-[250px] relative transform overflow-hidden rounded-lg bg-white p-6 text-left shadow-xl transition-all", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full flex-1", children: [
|
|
4796
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between mb-2", children: [
|
|
4797
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-t-sm font-bold", children: "Pr\xE9via da imagem" }),
|
|
4798
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4799
|
+
"i",
|
|
4800
|
+
{
|
|
4801
|
+
className: "uil uil-times text-[28px] cursor-pointer",
|
|
4802
|
+
onClick: () => setOpen(false)
|
|
4803
|
+
}
|
|
4804
|
+
)
|
|
4805
|
+
] }),
|
|
4806
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-neutral-200 mb-4" }),
|
|
4807
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 h-full items-center justify-center rounded-lg w-full ", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: previewImage, alt: "previewImage" }) })
|
|
4808
|
+
] }) })
|
|
4809
|
+
}
|
|
4810
|
+
) }) })
|
|
4811
|
+
]
|
|
4812
|
+
}
|
|
4813
|
+
) });
|
|
4814
|
+
}
|
|
4815
|
+
var FileStatus = ({
|
|
4816
|
+
name,
|
|
4817
|
+
isLoading,
|
|
4818
|
+
size,
|
|
4819
|
+
onRemove,
|
|
4820
|
+
isImage,
|
|
4821
|
+
image
|
|
4822
|
+
}) => {
|
|
4823
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isImage ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
4824
|
+
ImageFile,
|
|
4825
|
+
{
|
|
4826
|
+
isLoading,
|
|
4827
|
+
name,
|
|
4828
|
+
size,
|
|
4829
|
+
onRemove,
|
|
4830
|
+
image
|
|
4831
|
+
}
|
|
4832
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
4833
|
+
File,
|
|
4834
|
+
{
|
|
4835
|
+
isLoading,
|
|
4836
|
+
name,
|
|
4837
|
+
size,
|
|
4838
|
+
onRemove,
|
|
4839
|
+
image
|
|
4840
|
+
}
|
|
4841
|
+
) });
|
|
4842
|
+
};
|
|
4843
|
+
var ImageFile = ({ isLoading, name, size, onRemove, image }) => {
|
|
4844
|
+
const [imagePreviewModal, setImagePreviewModal] = React4.useState(false);
|
|
4845
|
+
const [previewImage, setPreviewImage] = React4.useState();
|
|
4846
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "group h-[130px] w-[130px] flex justify-between border border-neutral-300 rounded-[8px]", children: !isLoading && image ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full relative", children: [
|
|
4847
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden group-hover:block absolute top-3 left-3", children: [
|
|
4848
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4849
|
+
Button,
|
|
4850
|
+
{
|
|
4851
|
+
className: "w-[32px] h-[32px]",
|
|
4852
|
+
variant: "iconSecondary",
|
|
4853
|
+
onClick: (evt) => {
|
|
4854
|
+
setImagePreviewModal(true);
|
|
4855
|
+
let newPreviewImage = new window.Image();
|
|
4856
|
+
newPreviewImage.src = image;
|
|
4857
|
+
setPreviewImage(newPreviewImage);
|
|
4858
|
+
},
|
|
4859
|
+
size: "xs",
|
|
4860
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-search-plus text-[22px]" })
|
|
4861
|
+
}
|
|
4862
|
+
),
|
|
4863
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4864
|
+
ImagePreview,
|
|
4865
|
+
{
|
|
4866
|
+
open: imagePreviewModal,
|
|
4867
|
+
setOpen: setImagePreviewModal,
|
|
4868
|
+
previewImage
|
|
4869
|
+
}
|
|
4870
|
+
)
|
|
4871
|
+
] }),
|
|
4872
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "block absolute top-3 right-3", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4873
|
+
Button,
|
|
4874
|
+
{
|
|
4875
|
+
className: "w-[32px] h-[32px]",
|
|
4876
|
+
variant: "iconSecondary",
|
|
4877
|
+
onClick: onRemove,
|
|
4878
|
+
size: "xs",
|
|
4879
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-times text-xl" })
|
|
4880
|
+
}
|
|
4881
|
+
) }),
|
|
4882
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full group-hover:bg-[#16203499]/60 z-10", children: /* @__PURE__ */ jsxRuntime.jsx("img", { className: "relative -z-10", src: image, alt: "tumbnails" }) })
|
|
4883
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col justify-between p-[10px]", children: [
|
|
4884
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col ", children: [
|
|
4885
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex self-end", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4886
|
+
"i",
|
|
4887
|
+
{
|
|
4888
|
+
onClick: onRemove,
|
|
4889
|
+
className: "uil uil-times text-[28px] cursor-pointer"
|
|
4890
|
+
}
|
|
4891
|
+
) }),
|
|
4892
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex self-center items-center justify-center w-12 h-12 bg-blue-500 rounded-full animate-spin", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4893
|
+
"img",
|
|
4894
|
+
{
|
|
4895
|
+
src: `/spinner-white.svg`,
|
|
4896
|
+
alt: "circle",
|
|
4897
|
+
width: 30,
|
|
4898
|
+
height: 30
|
|
4899
|
+
}
|
|
4900
|
+
) })
|
|
4901
|
+
] }),
|
|
4902
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
|
|
4903
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-p-sm", children: name }),
|
|
4904
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xxs text-label", children: [
|
|
4905
|
+
size.to,
|
|
4906
|
+
" KB"
|
|
4907
|
+
] })
|
|
4908
|
+
] })
|
|
4909
|
+
] }) });
|
|
4910
|
+
};
|
|
4911
|
+
var File = ({ isLoading, name, size, onRemove, image }) => {
|
|
4912
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full md:w-[410px] flex items-center justify-between px-3 py-2 border border-neutral-300 rounded-[4px]", children: [
|
|
4913
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-x-2 items-center", children: [
|
|
4914
|
+
isLoading ? /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { width: 19, height: 19, className: "animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-success-500 flex", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-check-circle text-[23px]" }) }),
|
|
4915
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
|
|
4916
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-1", children: [
|
|
4917
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-label self-end flex", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-file text-xs" }) }),
|
|
4918
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-p-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4919
|
+
"a",
|
|
4920
|
+
{
|
|
4921
|
+
href: image,
|
|
4922
|
+
download: name,
|
|
4923
|
+
className: "text-blue-500 hover:text-blue-500 hover:underline active:text-blue-600 active:underline active:underline-offset-4",
|
|
4924
|
+
children: name
|
|
4925
|
+
}
|
|
4926
|
+
) })
|
|
4927
|
+
] }),
|
|
4928
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xxs text-label", children: [
|
|
4929
|
+
size ? size.toLocaleString("en-US", {
|
|
4930
|
+
style: "decimal"
|
|
4931
|
+
// Other options: 'currency', 'percent', etc.
|
|
4932
|
+
}) : null,
|
|
4933
|
+
" ",
|
|
4934
|
+
"KB"
|
|
4935
|
+
] })
|
|
4936
|
+
] })
|
|
4937
|
+
] }),
|
|
4938
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4939
|
+
"i",
|
|
4940
|
+
{
|
|
4941
|
+
onClick: onRemove,
|
|
4942
|
+
className: "uil uil-times text-[24px] text-neutral-600 cursor-pointer"
|
|
4943
|
+
}
|
|
4944
|
+
)
|
|
4945
|
+
] });
|
|
4946
|
+
};
|
|
4947
|
+
|
|
4948
|
+
// src/components/FileUpload/FileUploadReducer.tsx
|
|
4949
|
+
var initialState = {
|
|
4950
|
+
files: []
|
|
4951
|
+
};
|
|
4952
|
+
function reducer(state, action) {
|
|
4953
|
+
var _a, _b;
|
|
4954
|
+
switch (action.type) {
|
|
4955
|
+
case "UPLOAD_START":
|
|
4956
|
+
return {
|
|
4957
|
+
files: [
|
|
4958
|
+
...state == null ? void 0 : state.files,
|
|
4959
|
+
{
|
|
4960
|
+
name: action.payload.file.name,
|
|
4961
|
+
size: action.payload.file.size,
|
|
4962
|
+
image: action.payload.file,
|
|
4963
|
+
type: action.payload.file.type,
|
|
4964
|
+
loading: true
|
|
4965
|
+
}
|
|
4966
|
+
]
|
|
4967
|
+
};
|
|
4968
|
+
case "UPLOAD_END":
|
|
4969
|
+
return {
|
|
4970
|
+
files: (_a = state == null ? void 0 : state.files) == null ? void 0 : _a.map((file) => {
|
|
4971
|
+
if (file.name === action.payload.name) {
|
|
4972
|
+
return {
|
|
4973
|
+
...file,
|
|
4974
|
+
image: action.payload.result,
|
|
4975
|
+
loading: false
|
|
4976
|
+
};
|
|
4977
|
+
}
|
|
4978
|
+
return file;
|
|
4979
|
+
})
|
|
4980
|
+
};
|
|
4981
|
+
case "REMOVE_FILE":
|
|
4982
|
+
return {
|
|
4983
|
+
files: (_b = state == null ? void 0 : state.files) == null ? void 0 : _b.filter(
|
|
4984
|
+
(file) => file.name !== action.payload.name
|
|
4985
|
+
)
|
|
4986
|
+
};
|
|
4987
|
+
default:
|
|
4988
|
+
return state;
|
|
4989
|
+
}
|
|
4990
|
+
}
|
|
4991
|
+
var IconFile = (props) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
4992
|
+
"svg",
|
|
4993
|
+
{
|
|
4994
|
+
width: "24",
|
|
4995
|
+
height: "30",
|
|
4996
|
+
viewBox: "0 0 24 30",
|
|
4997
|
+
...props,
|
|
4998
|
+
fill: "none",
|
|
4999
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
5000
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5001
|
+
"path",
|
|
5002
|
+
{
|
|
5003
|
+
d: "M24 10.41C23.9844 10.2722 23.9542 10.1364 23.91 10.005V9.87C23.8379 9.71577 23.7417 9.574 23.625 9.45L14.625 0.45C14.501 0.333324 14.3592 0.237121 14.205 0.165H14.07L13.59 0H4.5C3.30653 0 2.16193 0.474106 1.31802 1.31802C0.474106 2.16193 0 3.30653 0 4.5V25.5C0 26.6935 0.474106 27.8381 1.31802 28.682C2.16193 29.5259 3.30653 30 4.5 30H19.5C20.6935 30 21.8381 29.5259 22.682 28.682C23.5259 27.8381 24 26.6935 24 25.5V10.5C24 10.5 24 10.5 24 10.41ZM15 5.115L18.885 9H15V5.115ZM21 25.5C21 25.8978 20.842 26.2794 20.5607 26.5607C20.2794 26.842 19.8978 27 19.5 27H4.5C4.10218 27 3.72064 26.842 3.43934 26.5607C3.15804 26.2794 3 25.8978 3 25.5V4.5C3 4.10217 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H12V10.5C12 10.8978 12.158 11.2794 12.4393 11.5607C12.7206 11.842 13.1022 12 13.5 12H21V25.5Z",
|
|
5004
|
+
fill: "#009EDB"
|
|
5005
|
+
}
|
|
5006
|
+
)
|
|
5007
|
+
}
|
|
5008
|
+
);
|
|
5009
|
+
var IconCheck = (props) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
5010
|
+
"svg",
|
|
5011
|
+
{
|
|
5012
|
+
width: "22",
|
|
5013
|
+
height: "16",
|
|
5014
|
+
viewBox: "0 0 22 16",
|
|
5015
|
+
fill: "none",
|
|
5016
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
5017
|
+
...props,
|
|
5018
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5019
|
+
"path",
|
|
5020
|
+
{
|
|
5021
|
+
d: "M21.065 0.815035C20.9256 0.674443 20.7597 0.562851 20.5769 0.486698C20.3941 0.410545 20.198 0.371338 20 0.371338C19.802 0.371338 19.6059 0.410545 19.4231 0.486698C19.2403 0.562851 19.0744 0.674443 18.935 0.815035L7.76 12.005L3.065 7.29503C2.92022 7.15518 2.74931 7.04521 2.56202 6.9714C2.37474 6.89759 2.17476 6.8614 1.97348 6.86488C1.77221 6.86836 1.5736 6.91145 1.38898 6.99169C1.20436 7.07194 1.03736 7.18775 0.897501 7.33254C0.757643 7.47732 0.647672 7.64823 0.573866 7.83551C0.50006 8.02279 0.463864 8.22278 0.467347 8.42405C0.470829 8.62532 0.513921 8.82394 0.594161 9.00855C0.674401 9.19317 0.790219 9.36018 0.935001 9.50004L6.695 15.26C6.83445 15.4006 7.00035 15.5122 7.18314 15.5884C7.36593 15.6645 7.56198 15.7037 7.76 15.7037C7.95802 15.7037 8.15408 15.6645 8.33687 15.5884C8.51966 15.5122 8.68556 15.4006 8.825 15.26L21.065 3.02004C21.2173 2.87957 21.3388 2.70909 21.4219 2.51935C21.505 2.3296 21.5479 2.12469 21.5479 1.91754C21.5479 1.71038 21.505 1.50548 21.4219 1.31573C21.3388 1.12598 21.2173 0.955499 21.065 0.815035Z",
|
|
5022
|
+
fill: "#009EDB"
|
|
5023
|
+
}
|
|
5024
|
+
)
|
|
5025
|
+
}
|
|
5026
|
+
);
|
|
5027
|
+
var IconFileUpload = (props) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
5028
|
+
"svg",
|
|
5029
|
+
{
|
|
5030
|
+
width: "30",
|
|
5031
|
+
height: "30",
|
|
5032
|
+
viewBox: "0 0 30 30",
|
|
5033
|
+
fill: "none",
|
|
5034
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
5035
|
+
...props,
|
|
5036
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5037
|
+
"path",
|
|
5038
|
+
{
|
|
5039
|
+
d: "M10.0649 8.56503L13.4999 5.11503V19.5C13.4999 19.8979 13.6579 20.2794 13.9392 20.5607C14.2205 20.842 14.6021 21 14.9999 21C15.3977 21 15.7792 20.842 16.0605 20.5607C16.3418 20.2794 16.4999 19.8979 16.4999 19.5V5.11503L19.9349 8.56503C20.0743 8.70562 20.2402 8.81721 20.423 8.89337C20.6058 8.96952 20.8019 9.00873 20.9999 9.00873C21.1979 9.00873 21.394 8.96952 21.5767 8.89337C21.7595 8.81721 21.9254 8.70562 22.0649 8.56503C22.2055 8.42558 22.3171 8.25968 22.3932 8.07689C22.4694 7.8941 22.5086 7.69805 22.5086 7.50003C22.5086 7.30201 22.4694 7.10595 22.3932 6.92316C22.3171 6.74037 22.2055 6.57447 22.0649 6.43503L16.0649 0.435028C15.9222 0.298467 15.754 0.191419 15.5699 0.120028C15.2047 -0.0299994 14.7951 -0.0299994 14.4299 0.120028C14.2457 0.191419 14.0775 0.298467 13.9349 0.435028L7.93488 6.43503C7.79502 6.57489 7.68408 6.74092 7.60839 6.92365C7.5327 7.10639 7.49374 7.30224 7.49374 7.50003C7.49374 7.69782 7.5327 7.89367 7.60839 8.0764C7.68408 8.25914 7.79502 8.42517 7.93488 8.56503C8.07474 8.70489 8.24077 8.81583 8.4235 8.89152C8.60624 8.96721 8.80209 9.00617 8.99988 9.00617C9.19767 9.00617 9.39352 8.96721 9.57625 8.89152C9.75898 8.81583 9.92502 8.70489 10.0649 8.56503ZM28.4999 15C28.1021 15 27.7205 15.1581 27.4392 15.4394C27.1579 15.7207 26.9999 16.1022 26.9999 16.5V25.5C26.9999 25.8979 26.8418 26.2794 26.5605 26.5607C26.2792 26.842 25.8977 27 25.4999 27H4.49988C4.10205 27 3.72052 26.842 3.43922 26.5607C3.15791 26.2794 2.99988 25.8979 2.99988 25.5V16.5C2.99988 16.1022 2.84184 15.7207 2.56054 15.4394C2.27923 15.1581 1.8977 15 1.49988 15C1.10205 15 0.720522 15.1581 0.439218 15.4394C0.157913 15.7207 -0.00012207 16.1022 -0.00012207 16.5V25.5C-0.00012207 26.6935 0.473984 27.8381 1.3179 28.682C2.16181 29.5259 3.3064 30 4.49988 30H25.4999C26.6934 30 27.8379 29.5259 28.6819 28.682C29.5258 27.8381 29.9999 26.6935 29.9999 25.5V16.5C29.9999 16.1022 29.8418 15.7207 29.5605 15.4394C29.2792 15.1581 28.8977 15 28.4999 15Z",
|
|
5040
|
+
fill: "white"
|
|
5041
|
+
}
|
|
5042
|
+
)
|
|
5043
|
+
}
|
|
5044
|
+
);
|
|
5045
|
+
var FileUpload = ({
|
|
5046
|
+
icon = "file",
|
|
5047
|
+
multiple = false,
|
|
5048
|
+
direction = "vertical",
|
|
5049
|
+
isImage = false,
|
|
5050
|
+
setFiles,
|
|
5051
|
+
supportedFormats,
|
|
5052
|
+
validationFunction,
|
|
5053
|
+
files,
|
|
5054
|
+
error,
|
|
5055
|
+
name,
|
|
5056
|
+
limitMessage
|
|
5057
|
+
}) => {
|
|
5058
|
+
var _a;
|
|
5059
|
+
const [state, dispatch] = React4.useReducer(reducer, initialState);
|
|
5060
|
+
const [dragging, setDragging] = React4.useState(false);
|
|
5061
|
+
const [loading, setLoading] = React4.useState(false);
|
|
5062
|
+
const { readString } = reactPapaparse.usePapaParse();
|
|
5063
|
+
const fieldValidationMessages = [error == null ? void 0 : error.message];
|
|
5064
|
+
const hasError = {
|
|
5065
|
+
hasError: fieldValidationMessages.some((item) => item !== void 0)
|
|
5066
|
+
};
|
|
5067
|
+
React4.useEffect(() => {
|
|
5068
|
+
var _a2;
|
|
5069
|
+
if ((_a2 = state == null ? void 0 : state.files) == null ? void 0 : _a2.some((file) => file.loading === true)) {
|
|
5070
|
+
setLoading(true);
|
|
5071
|
+
} else {
|
|
5072
|
+
setLoading(false);
|
|
5073
|
+
}
|
|
5074
|
+
}, [state == null ? void 0 : state.files]);
|
|
5075
|
+
React4.useEffect(() => {
|
|
5076
|
+
if (!files || files.length == 0) {
|
|
5077
|
+
state.files = [];
|
|
5078
|
+
}
|
|
5079
|
+
}, [files]);
|
|
5080
|
+
React4.useEffect(() => {
|
|
5081
|
+
var _a2;
|
|
5082
|
+
if (!multiple && ((_a2 = state == null ? void 0 : state.files) == null ? void 0 : _a2.length) === 0 || multiple) {
|
|
5083
|
+
window.addEventListener("dragover", handleDragOver);
|
|
5084
|
+
window.addEventListener("drop", handleDrop);
|
|
5085
|
+
window.addEventListener("dragleave", handleDragLeave);
|
|
5086
|
+
}
|
|
5087
|
+
return () => {
|
|
5088
|
+
window.removeEventListener("dragover", handleDragOver);
|
|
5089
|
+
window.removeEventListener("drop", handleDrop);
|
|
5090
|
+
window.removeEventListener("dragleave", handleDragLeave);
|
|
5091
|
+
};
|
|
5092
|
+
}, [multiple, state.files]);
|
|
5093
|
+
const handleDragOver = (event) => {
|
|
5094
|
+
var _a2;
|
|
5095
|
+
event.preventDefault();
|
|
5096
|
+
event.stopPropagation();
|
|
5097
|
+
if (!multiple && ((_a2 = state.files) == null ? void 0 : _a2.length) === 1) {
|
|
5098
|
+
setDragging(false);
|
|
5099
|
+
} else {
|
|
5100
|
+
setDragging(true);
|
|
5101
|
+
}
|
|
5102
|
+
};
|
|
5103
|
+
const handleDrop = (event) => {
|
|
5104
|
+
var _a2, _b, _c;
|
|
5105
|
+
event.preventDefault();
|
|
5106
|
+
event.stopPropagation();
|
|
5107
|
+
setDragging(false);
|
|
5108
|
+
let files2 = [...(_a2 = event == null ? void 0 : event.dataTransfer) == null ? void 0 : _a2.files];
|
|
5109
|
+
if (!multiple && (files2 == null ? void 0 : files2.length) === 1 || multiple && (files2 == null ? void 0 : files2.length) > 0) {
|
|
5110
|
+
const existingFiles = (_b = state == null ? void 0 : state.files) == null ? void 0 : _b.map((f) => f.name);
|
|
5111
|
+
files2 = files2.filter((f) => !(existingFiles == null ? void 0 : existingFiles.includes(f.name)));
|
|
5112
|
+
files2.forEach((file) => {
|
|
5113
|
+
const reader = new FileReader();
|
|
5114
|
+
reader.addEventListener("loadstart", () => {
|
|
5115
|
+
dispatch({
|
|
5116
|
+
type: "UPLOAD_START",
|
|
5117
|
+
payload: { file }
|
|
5118
|
+
});
|
|
5119
|
+
});
|
|
5120
|
+
reader.addEventListener("load", () => {
|
|
5121
|
+
if (!validationFunction) {
|
|
5122
|
+
dispatch({
|
|
5123
|
+
type: "UPLOAD_END",
|
|
5124
|
+
payload: {
|
|
5125
|
+
name: file.name,
|
|
5126
|
+
result: reader.result
|
|
5127
|
+
}
|
|
5128
|
+
});
|
|
5129
|
+
setFiles && setFiles(file);
|
|
5130
|
+
}
|
|
5131
|
+
if (validationFunction(file)) {
|
|
5132
|
+
setTimeout(() => {
|
|
5133
|
+
dispatch({
|
|
5134
|
+
type: "UPLOAD_END",
|
|
5135
|
+
payload: {
|
|
5136
|
+
name: file.name,
|
|
5137
|
+
result: reader.result
|
|
5138
|
+
}
|
|
5139
|
+
});
|
|
5140
|
+
}, 1e3);
|
|
5141
|
+
setFiles && setFiles(file);
|
|
5142
|
+
} else {
|
|
5143
|
+
dispatch({
|
|
5144
|
+
type: "REMOVE_FILE",
|
|
5145
|
+
payload: {
|
|
5146
|
+
name: file.name
|
|
5147
|
+
}
|
|
5148
|
+
});
|
|
5149
|
+
}
|
|
5150
|
+
});
|
|
5151
|
+
reader.readAsDataURL(file);
|
|
5152
|
+
});
|
|
5153
|
+
(_c = event == null ? void 0 : event.dataTransfer) == null ? void 0 : _c.clearData();
|
|
5154
|
+
}
|
|
5155
|
+
};
|
|
5156
|
+
const handleDragLeave = (event) => {
|
|
5157
|
+
if (event.screenX === 0 && event.screenY === 0) {
|
|
5158
|
+
setDragging(false);
|
|
5159
|
+
}
|
|
5160
|
+
event.stopPropagation();
|
|
5161
|
+
event.preventDefault();
|
|
5162
|
+
};
|
|
5163
|
+
const onChangeFile = (e) => {
|
|
5164
|
+
const files2 = Object.values(e.target.files);
|
|
5165
|
+
e.target.value = null;
|
|
5166
|
+
files2.forEach((file) => {
|
|
5167
|
+
const reader = new FileReader();
|
|
5168
|
+
reader.addEventListener("loadstart", () => {
|
|
5169
|
+
dispatch({
|
|
5170
|
+
type: "UPLOAD_START",
|
|
5171
|
+
payload: { file }
|
|
5172
|
+
});
|
|
5173
|
+
});
|
|
5174
|
+
reader.addEventListener("load", () => {
|
|
5175
|
+
setTimeout(() => {
|
|
5176
|
+
readString(String(file), {
|
|
5177
|
+
delimiter: ",",
|
|
5178
|
+
worker: true,
|
|
5179
|
+
complete: (results) => {
|
|
5180
|
+
if (!validationFunction) {
|
|
5181
|
+
dispatch({
|
|
5182
|
+
type: "UPLOAD_END",
|
|
5183
|
+
payload: {
|
|
5184
|
+
name: file.name,
|
|
5185
|
+
result: reader.result
|
|
5186
|
+
}
|
|
5187
|
+
});
|
|
5188
|
+
setFiles && setFiles(file);
|
|
5189
|
+
} else if (validationFunction(file)) {
|
|
5190
|
+
dispatch({
|
|
5191
|
+
type: "UPLOAD_END",
|
|
5192
|
+
payload: {
|
|
5193
|
+
name: file.name,
|
|
5194
|
+
result: reader.result
|
|
5195
|
+
}
|
|
5196
|
+
});
|
|
5197
|
+
setFiles && setFiles(file);
|
|
5198
|
+
} else {
|
|
5199
|
+
dispatch({
|
|
5200
|
+
type: "REMOVE_FILE",
|
|
5201
|
+
payload: {
|
|
5202
|
+
name: file.name
|
|
5203
|
+
}
|
|
5204
|
+
});
|
|
5205
|
+
}
|
|
5206
|
+
}
|
|
5207
|
+
});
|
|
5208
|
+
}, 1e3);
|
|
5209
|
+
});
|
|
5210
|
+
reader.readAsDataURL(file);
|
|
5211
|
+
});
|
|
5212
|
+
};
|
|
5213
|
+
const renderContent = () => {
|
|
5214
|
+
var _a2;
|
|
5215
|
+
if (loading) {
|
|
5216
|
+
return /* @__PURE__ */ jsxRuntime.jsx(LoadingContent, {});
|
|
5217
|
+
} else if (dragging) {
|
|
5218
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DraggingContent, {});
|
|
5219
|
+
} else if (!multiple && ((_a2 = state == null ? void 0 : state.files) == null ? void 0 : _a2.length) > 0) {
|
|
5220
|
+
return /* @__PURE__ */ jsxRuntime.jsx(BlockedContent, {});
|
|
5221
|
+
}
|
|
5222
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
5223
|
+
DefaultContent,
|
|
5224
|
+
{
|
|
5225
|
+
icon,
|
|
5226
|
+
formats: supportedFormats == null ? void 0 : supportedFormats.join(", ").replace(/\./g, "").toUpperCase(),
|
|
5227
|
+
limitMessage
|
|
5228
|
+
}
|
|
5229
|
+
);
|
|
5230
|
+
};
|
|
5231
|
+
const removeFile = (name2) => {
|
|
5232
|
+
dispatch({
|
|
5233
|
+
type: "REMOVE_FILE",
|
|
5234
|
+
payload: {
|
|
5235
|
+
name: name2
|
|
5236
|
+
}
|
|
5237
|
+
});
|
|
5238
|
+
setFiles && setFiles(null);
|
|
5239
|
+
};
|
|
5240
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5241
|
+
"div",
|
|
5242
|
+
{
|
|
5243
|
+
className: clsx9__default.default(
|
|
5244
|
+
"flex gap-1 w-full rounded-lg items-center justify-center",
|
|
5245
|
+
{
|
|
5246
|
+
"flex-col gap-1": direction === "vertical"
|
|
5247
|
+
}
|
|
5248
|
+
),
|
|
5249
|
+
children: [
|
|
5250
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5251
|
+
"input",
|
|
5252
|
+
{
|
|
5253
|
+
id: "file-upload",
|
|
5254
|
+
name: "file-upload",
|
|
5255
|
+
type: "file",
|
|
5256
|
+
accept: supportedFormats == null ? void 0 : supportedFormats.join(","),
|
|
5257
|
+
multiple,
|
|
5258
|
+
className: "sr-only",
|
|
5259
|
+
onChange: onChangeFile
|
|
5260
|
+
}
|
|
5261
|
+
),
|
|
5262
|
+
renderContent(),
|
|
5263
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5264
|
+
"div",
|
|
5265
|
+
{
|
|
5266
|
+
className: clsx9__default.default(
|
|
5267
|
+
{
|
|
5268
|
+
"flex flex-col w-full gap-y-[6px]": direction === "vertical" && !isImage
|
|
5269
|
+
},
|
|
5270
|
+
{
|
|
5271
|
+
"flex flex-col gap-y-[6px] w-full": direction === "horizontal" && !isImage
|
|
5272
|
+
},
|
|
5273
|
+
{
|
|
5274
|
+
"flex gap-[6px]": direction === "vertical" && isImage
|
|
5275
|
+
},
|
|
5276
|
+
{
|
|
5277
|
+
"flex gap-[6px]": direction === "horizontal" && !isImage
|
|
5278
|
+
}
|
|
5279
|
+
),
|
|
5280
|
+
children: (_a = state == null ? void 0 : state.files) == null ? void 0 : _a.map((file) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
5281
|
+
FileStatus,
|
|
5282
|
+
{
|
|
5283
|
+
name: file == null ? void 0 : file.name,
|
|
5284
|
+
onRemove: () => removeFile(file == null ? void 0 : file.name),
|
|
5285
|
+
isLoading: file.loading,
|
|
5286
|
+
size: file.size,
|
|
5287
|
+
isImage: file.image && isImage,
|
|
5288
|
+
image: file.image
|
|
5289
|
+
},
|
|
5290
|
+
file.name
|
|
5291
|
+
))
|
|
5292
|
+
}
|
|
5293
|
+
),
|
|
5294
|
+
hasError && fieldValidationMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
5295
|
+
"div",
|
|
5296
|
+
{
|
|
5297
|
+
className: "text-dangerous-500 text-xs -mt-[6px]",
|
|
5298
|
+
role: "alert",
|
|
5299
|
+
"aria-label": message,
|
|
5300
|
+
children: message
|
|
5301
|
+
},
|
|
5302
|
+
index
|
|
5303
|
+
))
|
|
5304
|
+
]
|
|
5305
|
+
}
|
|
5306
|
+
) });
|
|
5307
|
+
};
|
|
5308
|
+
var DefaultContent = ({ formats, icon, limitMessage }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full md:w-[410px] h-full flex flex-col p-4 custom-border", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col text-center items-center", children: [
|
|
5309
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5310
|
+
"div",
|
|
5311
|
+
{
|
|
5312
|
+
className: "flex items-center justify-center w-14 h-14 mb-2 bg-blue-100 rounded-full",
|
|
5313
|
+
children: icon === "file" ? /* @__PURE__ */ jsxRuntime.jsx(IconFile, {}) : /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-image-plus text-[28px] text-blue-500" })
|
|
5314
|
+
}
|
|
5315
|
+
),
|
|
5316
|
+
/* @__PURE__ */ jsxRuntime.jsx("h1", { className: "font-bold text-base", children: icon === "file" ? "Arraste o arquivo e solte aqui" : "Arraste as imagens e solte aqui" }),
|
|
5317
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5318
|
+
"label",
|
|
5319
|
+
{
|
|
5320
|
+
htmlFor: "file-upload",
|
|
5321
|
+
className: "relative leading-none cursor-pointer text-sm bg-white focus-within:outline-none",
|
|
5322
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
|
|
5323
|
+
"ou\xA0",
|
|
5324
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-blue-500", children: "selecione do seu computador" })
|
|
5325
|
+
] })
|
|
5326
|
+
}
|
|
5327
|
+
),
|
|
5328
|
+
/* @__PURE__ */ jsxRuntime.jsxs("small", { className: "text-label text-xxs leading-5", children: [
|
|
5329
|
+
"Formatos: ",
|
|
5330
|
+
formats,
|
|
5331
|
+
" | ",
|
|
5332
|
+
limitMessage ? limitMessage : "At\xE9 25 MB"
|
|
5333
|
+
] })
|
|
5334
|
+
] }) });
|
|
5335
|
+
var BlockedContent = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full md:w-[410px] h-full flex flex-col p-4 custom-border", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col text-center items-center justify-center", children: [
|
|
5336
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5337
|
+
"div",
|
|
5338
|
+
{
|
|
5339
|
+
className: "flex items-center justify-center w-14 h-14 mb-1 bg-blue-100 rounded-full",
|
|
5340
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(IconCheck, {})
|
|
5341
|
+
}
|
|
5342
|
+
),
|
|
5343
|
+
/* @__PURE__ */ jsxRuntime.jsx("h1", { className: "font-bold text-base mt-1", children: "Arquivo carregado!" })
|
|
5344
|
+
] }) });
|
|
5345
|
+
var DraggingContent = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full md:w-[410px] h-[152px] bg-blue-100 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col p-4 custom-border justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col h-full text-center items-center justify-center", children: [
|
|
5346
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5347
|
+
"div",
|
|
5348
|
+
{
|
|
5349
|
+
className: "flex items-center justify-center w-14 h-14 mb-2 bg-blue-500 rounded-full",
|
|
5350
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(IconFileUpload, {})
|
|
5351
|
+
}
|
|
5352
|
+
),
|
|
5353
|
+
/* @__PURE__ */ jsxRuntime.jsx("h1", { className: "font-bold text-base text-blue-500", children: "Solte aqui para carregar o arquivo" })
|
|
5354
|
+
] }) }) });
|
|
5355
|
+
var LoadingContent = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full bg-blue-100 flex flex-col p-4 custom-border", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col text-center items-center justify-center", children: [
|
|
5356
|
+
/* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: "animate-spin" }),
|
|
5357
|
+
/* @__PURE__ */ jsxRuntime.jsx("h1", { className: "font-bold text-base text-blue-500", children: "Carregando arquivo..." })
|
|
5358
|
+
] }) });
|
|
5359
|
+
function InfoIcon({
|
|
5360
|
+
content,
|
|
5361
|
+
id = "info-id"
|
|
5362
|
+
}) {
|
|
5363
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5364
|
+
"div",
|
|
5365
|
+
{
|
|
5366
|
+
"data-tooltip-id": id,
|
|
5367
|
+
"data-tooltip-html": content,
|
|
5368
|
+
"data-tooltip-place": "top",
|
|
5369
|
+
children: [
|
|
5370
|
+
/* @__PURE__ */ jsxRuntime.jsx(Popover3, { id }),
|
|
5371
|
+
/* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-info-circle text-p-lg text-neutral-400" })
|
|
5372
|
+
]
|
|
5373
|
+
}
|
|
5374
|
+
);
|
|
5375
|
+
}
|
|
5376
|
+
|
|
5377
|
+
// src/components/MultiSelect/MultiSelect.styles.tsx
|
|
5378
|
+
var customStyles3 = {
|
|
5379
|
+
indicatorSeparator: (provided, { hasValue }) => {
|
|
5380
|
+
return {
|
|
5381
|
+
...provided,
|
|
5382
|
+
marginTop: "-6px",
|
|
5383
|
+
backgroundColor: hasValue ? "var(--input)" : "transparent"
|
|
5384
|
+
};
|
|
5385
|
+
},
|
|
5386
|
+
input: (provided, state) => ({
|
|
5387
|
+
...provided,
|
|
5388
|
+
outline: "none",
|
|
5389
|
+
paddingLeft: state.selectProps.hasIcon ? "2.5rem" : "0px"
|
|
5390
|
+
}),
|
|
5391
|
+
clearIndicator: (provided) => ({
|
|
5392
|
+
...provided,
|
|
5393
|
+
color: "var(--label)",
|
|
5394
|
+
marginTop: "-6px",
|
|
5395
|
+
":hover": {
|
|
5396
|
+
color: "var(--label)"
|
|
5397
|
+
}
|
|
5398
|
+
}),
|
|
5399
|
+
dropdownIndicator: (provided, state) => ({
|
|
5400
|
+
...provided,
|
|
5401
|
+
color: "var(--paragraph)",
|
|
5402
|
+
display: state.selectProps.isTargeted ? "none" : "flex",
|
|
5403
|
+
paddingRight: "12px",
|
|
5404
|
+
marginTop: "-6px",
|
|
5405
|
+
":hover": {
|
|
5406
|
+
color: "var(--paragraph)"
|
|
5407
|
+
}
|
|
5408
|
+
}),
|
|
5409
|
+
menu: (provided) => ({
|
|
5410
|
+
...provided,
|
|
5411
|
+
marginTop: "4px",
|
|
5412
|
+
border: "1px solid var(--neutral-300)",
|
|
5413
|
+
boxShadow: "none",
|
|
5414
|
+
borderRadius: "8px",
|
|
5415
|
+
padding: "0px 8px",
|
|
5416
|
+
zIndex: 70,
|
|
5417
|
+
background: "white"
|
|
5418
|
+
}),
|
|
5419
|
+
singleValue: (base, state) => ({
|
|
5420
|
+
...base,
|
|
5421
|
+
color: state.data.value === "active" ? "#0EAF86" : "black",
|
|
5422
|
+
display: "flex"
|
|
5423
|
+
}),
|
|
5424
|
+
control: (provided, state) => ({
|
|
5425
|
+
...provided,
|
|
5426
|
+
cursor: "pointer",
|
|
5427
|
+
border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.menuIsOpen ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)",
|
|
5428
|
+
boxShadow: "none",
|
|
5429
|
+
outline: "none",
|
|
5430
|
+
borderRadius: "0.5rem",
|
|
5431
|
+
paddingLeft: "0px",
|
|
5432
|
+
placeholder: " ",
|
|
5433
|
+
minHeight: "46px",
|
|
5434
|
+
alignItems: "end",
|
|
5435
|
+
paddingTop: "8px",
|
|
5436
|
+
":hover": {
|
|
5437
|
+
border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.menuIsOpen ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)"
|
|
5438
|
+
}
|
|
5439
|
+
}),
|
|
5440
|
+
multiValue: (provided) => ({
|
|
5441
|
+
...provided,
|
|
5442
|
+
borderRadius: "20px",
|
|
5443
|
+
backgroundColor: "var(--neutral-100)",
|
|
5444
|
+
padding: "0px"
|
|
5445
|
+
}),
|
|
5446
|
+
multiValueLabel: (provided) => ({
|
|
5447
|
+
...provided,
|
|
5448
|
+
color: "var(--paragraph)",
|
|
5449
|
+
paddingTop: "2px",
|
|
5450
|
+
lineHeight: "16px"
|
|
5451
|
+
}),
|
|
5452
|
+
multiValueRemove: (provided) => ({
|
|
5453
|
+
...provided,
|
|
5454
|
+
color: "var(--neutral-400)",
|
|
5455
|
+
paddingRight: "6px",
|
|
5456
|
+
paddingLeft: "0px",
|
|
5457
|
+
":hover": {
|
|
5458
|
+
color: "var(--dangerous-500)"
|
|
5459
|
+
}
|
|
5460
|
+
}),
|
|
5461
|
+
option: (provided, state) => {
|
|
5462
|
+
let color = state.isSelected && !state.selectProps.isTargeted ? "white" : "var(--paragraph)";
|
|
5463
|
+
if (state.isDisabled) {
|
|
5464
|
+
color = "rgba(0,0,0,0.30)";
|
|
5465
|
+
}
|
|
5466
|
+
return {
|
|
5467
|
+
...provided,
|
|
5468
|
+
height: "44px",
|
|
5469
|
+
cursor: "pointer",
|
|
5470
|
+
borderRadius: "8px",
|
|
5471
|
+
margin: "4px 0px",
|
|
5472
|
+
backgroundColor: state.isSelected && !state.selectProps.isTargeted ? "var(--blue-500)" : state.isFocused ? "var(--neutral-200)" : "white",
|
|
5473
|
+
color,
|
|
5474
|
+
fontWeight: state.isSelected && !state.selectProps.isTargeted ? 700 : 400,
|
|
5475
|
+
"&:hover": {
|
|
5476
|
+
backgroundColor: state.isSelected && !state.selectProps.isTargeted ? "var(--blue-500)" : "var(--neutral-200)"
|
|
5477
|
+
},
|
|
5478
|
+
"&:active": {
|
|
5479
|
+
backgroundColor: "var(--blue-500)",
|
|
5480
|
+
color: "white",
|
|
5481
|
+
fontWeight: 700
|
|
5482
|
+
},
|
|
5483
|
+
"&:active svg": {
|
|
5484
|
+
color: "white",
|
|
5485
|
+
fontWeight: 700
|
|
5486
|
+
},
|
|
5487
|
+
" svg": {
|
|
5488
|
+
color: "white"
|
|
5489
|
+
}
|
|
5490
|
+
};
|
|
5491
|
+
},
|
|
5492
|
+
container: (provided) => ({
|
|
5493
|
+
...provided,
|
|
5494
|
+
border: "none",
|
|
5495
|
+
outline: "none",
|
|
5496
|
+
boxShadow: "none",
|
|
5497
|
+
padding: "none",
|
|
5498
|
+
margin: "none"
|
|
5499
|
+
})
|
|
5500
|
+
};
|
|
5501
|
+
var MultiSelect = ({
|
|
5502
|
+
name,
|
|
5503
|
+
options,
|
|
5504
|
+
label = "",
|
|
5505
|
+
error,
|
|
5506
|
+
defaultValue,
|
|
5507
|
+
control,
|
|
5508
|
+
isSearchable = false,
|
|
5509
|
+
required,
|
|
5510
|
+
disabled
|
|
5511
|
+
}) => {
|
|
5512
|
+
const fieldValidationMessages = [error == null ? void 0 : error.message];
|
|
5513
|
+
const hasError = {
|
|
5514
|
+
hasError: fieldValidationMessages.some((item) => item !== void 0)
|
|
5515
|
+
};
|
|
5516
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
5517
|
+
reactHookForm.Controller,
|
|
5518
|
+
{
|
|
5519
|
+
name,
|
|
5520
|
+
control,
|
|
5521
|
+
defaultValue,
|
|
5522
|
+
render: ({ field }) => {
|
|
5523
|
+
const { DropdownIndicator, Option } = Select.components;
|
|
5524
|
+
const DropdownIndicatorCustom = (props) => {
|
|
5525
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DropdownIndicator, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-down text-[20px]" }) });
|
|
5526
|
+
};
|
|
5527
|
+
const IconOption = (props) => {
|
|
5528
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Option, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5529
|
+
"div",
|
|
5530
|
+
{
|
|
5531
|
+
style: {
|
|
5532
|
+
display: "flex",
|
|
5533
|
+
alignItems: "center",
|
|
5534
|
+
justifyContent: "space-between",
|
|
5535
|
+
height: "100%"
|
|
5536
|
+
},
|
|
5537
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx9__default.default("text-p-md focus:text-white"), children: props.data.label })
|
|
5538
|
+
}
|
|
5539
|
+
) });
|
|
5540
|
+
};
|
|
5541
|
+
const NoOptionsMessage = () => {
|
|
5542
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 text-neutral-300", children: "Nenhum dado encontrado" });
|
|
5543
|
+
};
|
|
5544
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full", id: "multiselect", children: [
|
|
5545
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5546
|
+
Select__default.default,
|
|
5547
|
+
{
|
|
5548
|
+
...field,
|
|
5549
|
+
...hasError,
|
|
5550
|
+
isDisabled: disabled,
|
|
5551
|
+
name: field.name,
|
|
5552
|
+
ref: field.ref,
|
|
5553
|
+
styles: customStyles3,
|
|
5554
|
+
placeholder: " ",
|
|
5555
|
+
isSearchable,
|
|
5556
|
+
options,
|
|
5557
|
+
isMulti: true,
|
|
5558
|
+
tabSelectsValue: true,
|
|
5559
|
+
components: {
|
|
5560
|
+
ValueContainer: ValueContainer3,
|
|
5561
|
+
Option: IconOption,
|
|
5562
|
+
NoOptionsMessage,
|
|
5563
|
+
DropdownIndicator: DropdownIndicatorCustom
|
|
5564
|
+
},
|
|
5565
|
+
isOptionDisabled: (option) => option.blocked,
|
|
5566
|
+
hideSelectedOptions: false,
|
|
5567
|
+
closeMenuOnSelect: false
|
|
5568
|
+
}
|
|
5569
|
+
),
|
|
5570
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5571
|
+
"span",
|
|
5572
|
+
{
|
|
5573
|
+
className: clsx9__default.default("text-label text-sm left-2.5", {
|
|
5574
|
+
[" scale-75 -translate-y-3 "]: field.value && field.value.length > 0,
|
|
5575
|
+
["text-dangerous-500"]: hasError.hasError
|
|
5576
|
+
}),
|
|
5577
|
+
children: [
|
|
5578
|
+
label,
|
|
5579
|
+
required && label && /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-dangerous-500", children: "\xA0*" })
|
|
5580
|
+
]
|
|
5581
|
+
}
|
|
5582
|
+
),
|
|
5583
|
+
fieldValidationMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
5584
|
+
"div",
|
|
5585
|
+
{
|
|
5586
|
+
className: "text-dangerous-500 text-xs -mt-[5px]",
|
|
5587
|
+
role: "alert",
|
|
5588
|
+
"aria-label": message,
|
|
5589
|
+
children: message
|
|
5590
|
+
},
|
|
5591
|
+
index
|
|
5592
|
+
))
|
|
5593
|
+
] });
|
|
5594
|
+
}
|
|
5595
|
+
}
|
|
5596
|
+
);
|
|
5597
|
+
};
|
|
5598
|
+
var ValueContainer3 = ({ children, ...props }) => {
|
|
5599
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Select.components.ValueContainer, { ...props, children });
|
|
5600
|
+
};
|
|
5601
|
+
|
|
5602
|
+
// src/components/InputTag/InputTag.styles.tsx
|
|
5603
|
+
var customStyles4 = {
|
|
5604
|
+
input: (provided) => ({
|
|
5605
|
+
...provided,
|
|
5606
|
+
outline: "none",
|
|
5607
|
+
height: "100%"
|
|
5608
|
+
}),
|
|
5609
|
+
indicatorSeparator: (provided) => ({
|
|
5610
|
+
...provided,
|
|
5611
|
+
backgroundColor: "transparent"
|
|
5612
|
+
}),
|
|
5613
|
+
clearIndicator: (provided) => ({
|
|
5614
|
+
...provided,
|
|
5615
|
+
color: "var(--label)",
|
|
5616
|
+
":hover": {
|
|
5617
|
+
color: "var(--label)"
|
|
5618
|
+
}
|
|
5619
|
+
}),
|
|
5620
|
+
dropdownIndicator: (provided) => ({
|
|
5621
|
+
...provided,
|
|
5622
|
+
display: "none"
|
|
5623
|
+
}),
|
|
5624
|
+
menu: (provided) => ({
|
|
5625
|
+
...provided,
|
|
5626
|
+
marginTop: "4px",
|
|
5627
|
+
border: "1px solid var(--neutral-300)",
|
|
5628
|
+
boxShadow: "none",
|
|
5629
|
+
borderRadius: "8px",
|
|
5630
|
+
padding: "0px 8px",
|
|
5631
|
+
zIndex: 30,
|
|
5632
|
+
background: "white"
|
|
5633
|
+
}),
|
|
5634
|
+
control: (provided, state) => {
|
|
5635
|
+
return {
|
|
5636
|
+
...provided,
|
|
5637
|
+
cursor: "pointer",
|
|
5638
|
+
paddingTop: state.selectProps.hasLabel ? "18px" : "0px",
|
|
5639
|
+
border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.isFocused ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)",
|
|
5640
|
+
boxShadow: "none",
|
|
5641
|
+
outline: "none",
|
|
5642
|
+
borderRadius: "0.5rem",
|
|
5643
|
+
// height: "52px",
|
|
5644
|
+
// paddingLeft: '8px',
|
|
5645
|
+
placeholder: state.selectProps.hasLabel ? " " : state.selectProps.placeholder,
|
|
5646
|
+
alignItems: state.selectProps.hasLabel ? "end" : "center",
|
|
5647
|
+
":hover": {
|
|
5648
|
+
border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.isFocused ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)"
|
|
5649
|
+
// height: "52px",
|
|
5650
|
+
},
|
|
5651
|
+
":focus-within": {
|
|
5652
|
+
// height: "52px",
|
|
5653
|
+
}
|
|
5654
|
+
};
|
|
5655
|
+
},
|
|
5656
|
+
multiValue: (provided) => ({
|
|
5657
|
+
...provided,
|
|
5658
|
+
borderRadius: "20px",
|
|
5659
|
+
backgroundColor: "var(--neutral-100)",
|
|
5660
|
+
padding: "0px 6px"
|
|
5661
|
+
}),
|
|
5662
|
+
multiValueLabel: (provided) => ({
|
|
5663
|
+
...provided,
|
|
5664
|
+
color: "var(--paragraph)"
|
|
5665
|
+
}),
|
|
5666
|
+
multiValueRemove: (provided) => ({
|
|
5667
|
+
...provided,
|
|
5668
|
+
color: "var(--neutral-400)",
|
|
5669
|
+
":hover": {
|
|
5670
|
+
color: "var(--dangerous-500)"
|
|
5671
|
+
}
|
|
5672
|
+
}),
|
|
5673
|
+
container: (provided) => ({
|
|
5674
|
+
...provided,
|
|
5675
|
+
border: "none",
|
|
5676
|
+
outline: "none",
|
|
5677
|
+
boxShadow: "none",
|
|
5678
|
+
padding: "none",
|
|
5679
|
+
margin: "none"
|
|
5680
|
+
})
|
|
5681
|
+
};
|
|
5682
|
+
var InputTag = ({
|
|
5683
|
+
name,
|
|
5684
|
+
label = "",
|
|
5685
|
+
error,
|
|
5686
|
+
defaultValue,
|
|
5687
|
+
control,
|
|
5688
|
+
required,
|
|
5689
|
+
placeholder,
|
|
5690
|
+
blockSpaces = false
|
|
5691
|
+
}) => {
|
|
5692
|
+
const [inputValue, setInputValue] = React4.useState("");
|
|
5693
|
+
const fieldValidationMessages = [error == null ? void 0 : error.message];
|
|
5694
|
+
const hasError = {
|
|
5695
|
+
hasError: fieldValidationMessages.some((item) => item !== void 0)
|
|
5696
|
+
};
|
|
5697
|
+
const removeSpaces = (value) => {
|
|
5698
|
+
return value == null ? void 0 : value.replace(/\s+/g, "-").replace(/[^\w\-]+/g, "").replace(/\-\-+/g, "-").replace(/^-+/, "").replace(/-+$/, "");
|
|
5699
|
+
};
|
|
5700
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
5701
|
+
reactHookForm.Controller,
|
|
5702
|
+
{
|
|
5703
|
+
name,
|
|
5704
|
+
control,
|
|
5705
|
+
defaultValue,
|
|
5706
|
+
render: ({ field }) => {
|
|
5707
|
+
const handleKeyDown = (event) => {
|
|
5708
|
+
if (!inputValue || ((field == null ? void 0 : field.value) || []).find((item) => (item == null ? void 0 : item.value) === inputValue))
|
|
5709
|
+
return;
|
|
5710
|
+
switch (event.key) {
|
|
5711
|
+
case "Enter":
|
|
5712
|
+
case "Tab":
|
|
5713
|
+
field.onChange([
|
|
5714
|
+
...(field == null ? void 0 : field.value) || [],
|
|
5715
|
+
{
|
|
5716
|
+
label: blockSpaces ? removeSpaces(inputValue) : inputValue,
|
|
5717
|
+
value: blockSpaces ? removeSpaces(inputValue) : inputValue
|
|
5718
|
+
}
|
|
5719
|
+
]);
|
|
5720
|
+
setInputValue("");
|
|
5721
|
+
event.preventDefault();
|
|
5722
|
+
}
|
|
5723
|
+
};
|
|
5724
|
+
const hasLabel = {
|
|
5725
|
+
hasLabel: (label == null ? void 0 : label.length) > 0
|
|
5726
|
+
};
|
|
5727
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5728
|
+
"div",
|
|
5729
|
+
{
|
|
5730
|
+
className: `relative ${label ? "with-label" : ""}`,
|
|
5731
|
+
id: "inputtag",
|
|
5732
|
+
children: [
|
|
5733
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5734
|
+
Select__default.default,
|
|
5735
|
+
{
|
|
5736
|
+
...hasError,
|
|
5737
|
+
...hasLabel,
|
|
5738
|
+
...{ placeholder },
|
|
5739
|
+
...field,
|
|
5740
|
+
styles: customStyles4,
|
|
5741
|
+
menuIsOpen: false,
|
|
5742
|
+
placeholder: hasLabel.hasLabel ? " " : placeholder,
|
|
5743
|
+
isMulti: true,
|
|
5744
|
+
tabSelectsValue: true,
|
|
5745
|
+
onKeyDown: handleKeyDown,
|
|
5746
|
+
isClearable: false,
|
|
5747
|
+
inputValue,
|
|
5748
|
+
onInputChange: (newValue) => setInputValue(newValue),
|
|
5749
|
+
isOptionDisabled: (option) => option.blocked
|
|
5750
|
+
}
|
|
5751
|
+
),
|
|
5752
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5753
|
+
"span",
|
|
5754
|
+
{
|
|
5755
|
+
className: clsx9__default.default("text-label text-sm left-2.5", {
|
|
5756
|
+
[" scale-75 -translate-y-3 "]: field.value && field.value.length > 0,
|
|
5757
|
+
["text-dangerous-500"]: hasError.hasError
|
|
5758
|
+
}),
|
|
5759
|
+
children: [
|
|
5760
|
+
label,
|
|
5761
|
+
required && label && /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-dangerous-500", children: "\xA0*" })
|
|
5762
|
+
]
|
|
5763
|
+
}
|
|
5764
|
+
),
|
|
5765
|
+
fieldValidationMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
5766
|
+
"div",
|
|
5767
|
+
{
|
|
5768
|
+
className: "text-dangerous-500 text-xs mt-[2px]",
|
|
5769
|
+
role: "alert",
|
|
5770
|
+
"aria-label": message,
|
|
5771
|
+
children: message
|
|
5772
|
+
},
|
|
5773
|
+
index
|
|
5774
|
+
))
|
|
5775
|
+
]
|
|
5776
|
+
}
|
|
5777
|
+
);
|
|
5778
|
+
}
|
|
5779
|
+
}
|
|
5780
|
+
);
|
|
5781
|
+
};
|
|
5782
|
+
var ValueContainer4 = ({ children, ...props }) => {
|
|
5783
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Select.components.ValueContainer, { ...props, children });
|
|
5784
|
+
};
|
|
5785
|
+
InputTag.displayName = "InputTag";
|
|
5786
|
+
|
|
5787
|
+
// src/components/MultiSelectBottom/MultiSelectBottom.styles.tsx
|
|
5788
|
+
var customStyles5 = {
|
|
5789
|
+
indicatorSeparator: (provided, { hasValue }) => {
|
|
5790
|
+
return {
|
|
5791
|
+
...provided,
|
|
5792
|
+
display: "none"
|
|
5793
|
+
};
|
|
5794
|
+
},
|
|
5795
|
+
input: (provided, state) => ({
|
|
5796
|
+
...provided,
|
|
5797
|
+
outline: "none",
|
|
5798
|
+
paddingLeft: state.selectProps.hasIcon ? "2.5rem" : "0px"
|
|
5799
|
+
}),
|
|
5800
|
+
clearIndicator: (provided) => ({
|
|
5801
|
+
...provided,
|
|
5802
|
+
display: "none"
|
|
5803
|
+
}),
|
|
5804
|
+
dropdownIndicator: (provided, state) => ({
|
|
5805
|
+
...provided,
|
|
5806
|
+
color: "var(--paragraph)",
|
|
5807
|
+
display: state.selectProps.isTargeted ? "none" : "flex",
|
|
5808
|
+
paddingRight: "12px",
|
|
5809
|
+
":hover": {
|
|
5810
|
+
color: "var(--paragraph)"
|
|
5811
|
+
}
|
|
5812
|
+
}),
|
|
5813
|
+
menu: (provided) => ({
|
|
5814
|
+
...provided,
|
|
5815
|
+
marginTop: "4px",
|
|
5816
|
+
border: "1px solid var(--neutral-300)",
|
|
5817
|
+
boxShadow: "none",
|
|
5818
|
+
borderRadius: "8px",
|
|
5819
|
+
padding: "0px 8px",
|
|
5820
|
+
zIndex: 70,
|
|
5821
|
+
background: "white"
|
|
5822
|
+
}),
|
|
5823
|
+
singleValue: (base, state) => ({
|
|
5824
|
+
...base,
|
|
5825
|
+
color: state.data.value === "active" ? "#0EAF86" : "black",
|
|
5826
|
+
display: "flex"
|
|
5827
|
+
}),
|
|
5828
|
+
control: (provided, state) => ({
|
|
5829
|
+
...provided,
|
|
5830
|
+
cursor: "pointer",
|
|
5831
|
+
border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.menuIsOpen ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)",
|
|
5832
|
+
boxShadow: "none",
|
|
5833
|
+
outline: "none",
|
|
5834
|
+
borderRadius: "0.5rem",
|
|
5835
|
+
paddingLeft: "8px",
|
|
5836
|
+
placeholder: " ",
|
|
5837
|
+
height: "46px",
|
|
5838
|
+
alignItems: "end",
|
|
5839
|
+
":hover": {
|
|
5840
|
+
border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.menuIsOpen ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)"
|
|
5841
|
+
}
|
|
5842
|
+
}),
|
|
5843
|
+
multiValue: (provided) => ({
|
|
5844
|
+
...provided,
|
|
5845
|
+
borderRadius: "20px",
|
|
5846
|
+
backgroundColor: "var(--neutral-100)",
|
|
5847
|
+
padding: "0px 0px",
|
|
5848
|
+
display: "none"
|
|
5849
|
+
}),
|
|
5850
|
+
multiValueLabel: (provided) => ({
|
|
5851
|
+
...provided,
|
|
5852
|
+
color: "var(--paragraph)",
|
|
5853
|
+
paddingTop: "6px"
|
|
5854
|
+
}),
|
|
5855
|
+
multiValueRemove: (provided) => ({
|
|
5856
|
+
...provided,
|
|
5857
|
+
paddingRight: "6px",
|
|
5858
|
+
paddingLeft: "0px",
|
|
5859
|
+
color: "var(--neutral-400)",
|
|
5860
|
+
":hover": {
|
|
5861
|
+
color: "var(--dangerous-500)"
|
|
5862
|
+
}
|
|
5863
|
+
}),
|
|
5864
|
+
option: (provided, state) => {
|
|
5865
|
+
let color = state.isSelected && !state.selectProps.isTargeted ? "white" : "var(--paragraph)";
|
|
5866
|
+
if (state.isDisabled) {
|
|
5867
|
+
color = "rgba(0,0,0,0.30)";
|
|
5868
|
+
}
|
|
5869
|
+
return {
|
|
5870
|
+
...provided,
|
|
5871
|
+
height: "44px",
|
|
5872
|
+
cursor: "pointer",
|
|
5873
|
+
borderRadius: "8px",
|
|
5874
|
+
margin: "4px 0px",
|
|
5875
|
+
backgroundColor: state.isSelected && !state.selectProps.isTargeted ? "var(--blue-500)" : state.isFocused ? "var(--neutral-200)" : "white",
|
|
5876
|
+
color,
|
|
5877
|
+
fontWeight: state.isSelected && !state.selectProps.isTargeted ? 700 : 400,
|
|
5878
|
+
"&:hover": {
|
|
5879
|
+
backgroundColor: state.isSelected && !state.selectProps.isTargeted ? "var(--blue-500)" : "var(--neutral-200)"
|
|
5880
|
+
},
|
|
5881
|
+
"&:active": {
|
|
5882
|
+
backgroundColor: "var(--blue-500)",
|
|
5883
|
+
color: "white",
|
|
5884
|
+
fontWeight: 700
|
|
5885
|
+
},
|
|
5886
|
+
"&:active svg": {
|
|
5887
|
+
color: "white",
|
|
5888
|
+
fontWeight: 700
|
|
5889
|
+
},
|
|
5890
|
+
" svg": {
|
|
5891
|
+
color: "white"
|
|
5892
|
+
}
|
|
5893
|
+
};
|
|
5894
|
+
},
|
|
5895
|
+
container: (provided) => ({
|
|
5896
|
+
...provided,
|
|
5897
|
+
border: "none",
|
|
5898
|
+
outline: "none",
|
|
5899
|
+
boxShadow: "none",
|
|
5900
|
+
padding: "none",
|
|
5901
|
+
margin: "none"
|
|
5902
|
+
}),
|
|
5903
|
+
valueContainer: (provided) => ({
|
|
5904
|
+
...provided,
|
|
5905
|
+
padding: "2px 0px"
|
|
5906
|
+
})
|
|
5907
|
+
};
|
|
5908
|
+
var MultiSelectBottom = ({
|
|
5909
|
+
name,
|
|
5910
|
+
options,
|
|
5911
|
+
label = "",
|
|
5912
|
+
error,
|
|
5913
|
+
defaultValue,
|
|
5914
|
+
control,
|
|
5915
|
+
isSearchable = false,
|
|
5916
|
+
required,
|
|
5917
|
+
disabled,
|
|
5918
|
+
emptyMessage,
|
|
5919
|
+
filterOptions,
|
|
5920
|
+
debounce: debounce2 = 0
|
|
5921
|
+
}) => {
|
|
5922
|
+
const [loading, setLoading] = React4.useState(false);
|
|
5923
|
+
const [optionsList, setOptionsList] = React4.useState(() => options || []);
|
|
5924
|
+
const fieldValidationMessages = [error == null ? void 0 : error.message];
|
|
5925
|
+
const hasError = {
|
|
5926
|
+
hasError: fieldValidationMessages.some((item) => item !== void 0)
|
|
5927
|
+
};
|
|
5928
|
+
({
|
|
5929
|
+
hasLabel: (label == null ? void 0 : label.length) > 0
|
|
5930
|
+
});
|
|
5931
|
+
const loadOptions = (inputValue) => {
|
|
5932
|
+
setLoading(true);
|
|
5933
|
+
if (isSearchable && filterOptions) {
|
|
5934
|
+
if (!debounce2 || debounce2 && inputValue.length >= debounce2) {
|
|
5935
|
+
const result = filterOptions(inputValue);
|
|
5936
|
+
setLoading(false);
|
|
5937
|
+
return result;
|
|
5938
|
+
}
|
|
5939
|
+
} else {
|
|
5940
|
+
setOptionsList(options);
|
|
5941
|
+
}
|
|
5942
|
+
};
|
|
5943
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
5944
|
+
reactHookForm.Controller,
|
|
5945
|
+
{
|
|
5946
|
+
name,
|
|
5947
|
+
control,
|
|
5948
|
+
defaultValue,
|
|
5949
|
+
render: ({ field }) => {
|
|
5950
|
+
var _a, _b;
|
|
5951
|
+
const { DropdownIndicator, Option } = Select.components;
|
|
5952
|
+
const DropdownIndicatorCustom = (props) => {
|
|
5953
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DropdownIndicator, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-down text-[20px]" }) });
|
|
5954
|
+
};
|
|
5955
|
+
const NoOptionsMessage = (props) => {
|
|
5956
|
+
var _a2;
|
|
5957
|
+
if (props.selectProps.inputValue.length == 0 && debounce2 > 0 || debounce2 > 0 && props.selectProps.inputValue.length < debounce2) {
|
|
5958
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 text-neutral-300", children: [
|
|
5959
|
+
"Digite ",
|
|
5960
|
+
debounce2,
|
|
5961
|
+
" ou mais caracteres para pesquisar"
|
|
5962
|
+
] });
|
|
5963
|
+
} else if (props.selectProps.inputValue.length > 0 && ((_a2 = props == null ? void 0 : props.options) == null ? void 0 : _a2.length) == 0) {
|
|
5964
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 text-neutral-300", children: "Nenhum dado encontrado" });
|
|
5965
|
+
}
|
|
5966
|
+
};
|
|
5967
|
+
const IconOption = (props) => {
|
|
5968
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Option, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5969
|
+
"div",
|
|
5970
|
+
{
|
|
5971
|
+
style: {
|
|
5972
|
+
display: "flex",
|
|
5973
|
+
alignItems: "center",
|
|
5974
|
+
justifyContent: "space-between",
|
|
5975
|
+
height: "100%"
|
|
5976
|
+
},
|
|
5977
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx9__default.default("text-p-md focus:text-white"), children: props.data.label })
|
|
5978
|
+
}
|
|
5979
|
+
) });
|
|
5980
|
+
};
|
|
5981
|
+
const LoadingMessage = (props) => {
|
|
5982
|
+
if (!debounce2 || debounce2 && props.selectProps.inputValue.length >= debounce2) {
|
|
5983
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5984
|
+
"div",
|
|
5985
|
+
{
|
|
5986
|
+
...props.innerProps,
|
|
5987
|
+
className: "flex items-center gap-[6px] p-2",
|
|
5988
|
+
children: [
|
|
5989
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5990
|
+
"img",
|
|
5991
|
+
{
|
|
5992
|
+
className: "animate-spin ",
|
|
5993
|
+
src: "/spinner.svg",
|
|
5994
|
+
alt: "circle",
|
|
5995
|
+
width: 16,
|
|
5996
|
+
height: 16
|
|
5997
|
+
}
|
|
5998
|
+
),
|
|
5999
|
+
"Buscando..."
|
|
6000
|
+
]
|
|
6001
|
+
}
|
|
6002
|
+
);
|
|
6003
|
+
} else if (debounce2 && props.selectProps.inputValue.length < debounce2) {
|
|
6004
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 text-neutral-300", children: [
|
|
6005
|
+
"Digite ",
|
|
6006
|
+
debounce2,
|
|
6007
|
+
" ou mais caracteres para pesquisar"
|
|
6008
|
+
] });
|
|
6009
|
+
}
|
|
6010
|
+
};
|
|
6011
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full", id: "multiselectbottom", children: [
|
|
6012
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6013
|
+
AsyncSelect__default.default,
|
|
6014
|
+
{
|
|
6015
|
+
...field,
|
|
6016
|
+
...hasError,
|
|
6017
|
+
isDisabled: disabled,
|
|
6018
|
+
name: field.name,
|
|
6019
|
+
ref: field.ref,
|
|
6020
|
+
styles: customStyles5,
|
|
6021
|
+
placeholder: " ",
|
|
6022
|
+
isSearchable,
|
|
6023
|
+
options: optionsList,
|
|
6024
|
+
isMulti: true,
|
|
6025
|
+
defaultOptions: debounce2 > 0 ? false : options ? optionsList : true,
|
|
6026
|
+
loadOptions,
|
|
6027
|
+
tabSelectsValue: true,
|
|
6028
|
+
components: {
|
|
6029
|
+
ValueContainer: ValueContainer5,
|
|
6030
|
+
Option: IconOption,
|
|
6031
|
+
NoOptionsMessage,
|
|
6032
|
+
LoadingMessage,
|
|
6033
|
+
DropdownIndicator: DropdownIndicatorCustom
|
|
6034
|
+
},
|
|
6035
|
+
isOptionDisabled: (option) => option.blocked,
|
|
6036
|
+
hideSelectedOptions: false,
|
|
6037
|
+
closeMenuOnSelect: false,
|
|
6038
|
+
backspaceRemovesValue: false
|
|
6039
|
+
}
|
|
6040
|
+
),
|
|
6041
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
6042
|
+
"span",
|
|
6043
|
+
{
|
|
6044
|
+
className: clsx9__default.default("text-label text-sm left-2.5", {
|
|
6045
|
+
["text-dangerous-500"]: hasError.hasError
|
|
6046
|
+
}),
|
|
6047
|
+
children: [
|
|
6048
|
+
label,
|
|
6049
|
+
required && label && /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-dangerous-500", children: "\xA0*" })
|
|
6050
|
+
]
|
|
6051
|
+
}
|
|
6052
|
+
),
|
|
6053
|
+
fieldValidationMessages == null ? void 0 : fieldValidationMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
6054
|
+
"div",
|
|
6055
|
+
{
|
|
6056
|
+
className: "text-dangerous-500 text-xs mt-[3px]",
|
|
6057
|
+
role: "alert",
|
|
6058
|
+
"aria-label": message,
|
|
6059
|
+
children: message
|
|
6060
|
+
},
|
|
6061
|
+
index
|
|
6062
|
+
)),
|
|
6063
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-x-2 gap-y-1 flex-wrap", children: ((_a = field == null ? void 0 : field.value) == null ? void 0 : _a.length) > 0 ? (_b = field == null ? void 0 : field.value) == null ? void 0 : _b.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-p-sm bg-neutral-100 rounded-[20px] py-2 px-3 flex items-center justify-between mt-3", children: [
|
|
6064
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: item.label }),
|
|
6065
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6066
|
+
"button",
|
|
6067
|
+
{
|
|
6068
|
+
type: "button",
|
|
6069
|
+
onClick: () => {
|
|
6070
|
+
const copy = [...field.value];
|
|
6071
|
+
const index = copy.findIndex(
|
|
6072
|
+
(opt) => opt.value == item.value
|
|
6073
|
+
);
|
|
6074
|
+
copy.splice(index, 1);
|
|
6075
|
+
field.onChange(copy);
|
|
6076
|
+
},
|
|
6077
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-times text-sm text-neutral-400" })
|
|
6078
|
+
}
|
|
6079
|
+
)
|
|
6080
|
+
] })) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-p-md text-label pt-2 pl-2", children: emptyMessage || "Nenhuma op\xE7\xE3o selecionada" }) })
|
|
6081
|
+
] });
|
|
6082
|
+
}
|
|
6083
|
+
}
|
|
6084
|
+
);
|
|
6085
|
+
};
|
|
6086
|
+
var ValueContainer5 = ({ children, ...props }) => {
|
|
6087
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Select.components.ValueContainer, { ...props, children });
|
|
6088
|
+
};
|
|
6089
|
+
MultiSelectBottom.displayName = "MultiSelectBottom";
|
|
6090
|
+
function PageBox(props) {
|
|
6091
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-5 px-4 border border-neutral-200 rounded-lg", children: [
|
|
6092
|
+
(props == null ? void 0 : props.title) && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-t-xs font-bold text-title mb-4", children: props.title }),
|
|
6093
|
+
props == null ? void 0 : props.children
|
|
6094
|
+
] });
|
|
6095
|
+
}
|
|
6096
|
+
var PageHeader = ({
|
|
6097
|
+
title,
|
|
6098
|
+
breadcrumbs,
|
|
6099
|
+
children,
|
|
6100
|
+
description
|
|
6101
|
+
}) => {
|
|
6102
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row place-content-between font-sans pb-4 w-full", children: [
|
|
6103
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
|
|
6104
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center text-p-lg text-label", children: breadcrumbs && breadcrumbs.map((breadcrumb, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: breadcrumb.link ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
6105
|
+
"a",
|
|
6106
|
+
{
|
|
6107
|
+
href: breadcrumb.link,
|
|
6108
|
+
className: "hover:no-underline hover:text-paragraph",
|
|
6109
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cursor-pointer flex items-center", children: [
|
|
6110
|
+
index > 0 && /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-right" }),
|
|
6111
|
+
breadcrumb.name
|
|
6112
|
+
] })
|
|
6113
|
+
}
|
|
6114
|
+
) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
|
|
6115
|
+
/* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-right" }),
|
|
6116
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6117
|
+
"span",
|
|
6118
|
+
{
|
|
6119
|
+
className: index === breadcrumbs.length - 1 ? "text-paragraph" : "",
|
|
6120
|
+
children: breadcrumb.name
|
|
6121
|
+
}
|
|
6122
|
+
)
|
|
6123
|
+
] }) }, index)) }),
|
|
6124
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
6125
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-t-md text-title font-bold mb-1", children: title }),
|
|
6126
|
+
description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-p-lg text-label", children: description })
|
|
6127
|
+
] })
|
|
6128
|
+
] }),
|
|
6129
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-6 md:justify-end flex-1 mt-2 md:mt-0", children })
|
|
6130
|
+
] });
|
|
6131
|
+
};
|
|
6132
|
+
var variants4 = {
|
|
6133
|
+
primary: {
|
|
6134
|
+
bar: "bg-gradient-to-b from-blue-start to-blue-end",
|
|
6135
|
+
text: "text-blue-500"
|
|
6136
|
+
},
|
|
6137
|
+
success: {
|
|
6138
|
+
bar: "bg-gradient-to-b from-success-start to-success-end",
|
|
6139
|
+
text: "text-success-500"
|
|
6140
|
+
},
|
|
6141
|
+
danger: {
|
|
6142
|
+
bar: "bg-gradient-to-b from-danger-start to-danger-end",
|
|
6143
|
+
text: "text-dangerous-600"
|
|
6144
|
+
},
|
|
6145
|
+
info: {
|
|
6146
|
+
bar: "bg-gradient-to-b from-blue-start to-blue-end",
|
|
6147
|
+
text: "text-blue-500"
|
|
6148
|
+
}
|
|
6149
|
+
};
|
|
6150
|
+
var ProgressBar = ({
|
|
6151
|
+
percentage,
|
|
6152
|
+
variant = "primary",
|
|
6153
|
+
status
|
|
6154
|
+
}) => {
|
|
6155
|
+
const [barPercentage, setBarPercentage] = React4.useState(() => fixPercentage());
|
|
6156
|
+
function fixPercentage() {
|
|
6157
|
+
if (percentage > 100) {
|
|
6158
|
+
return 100;
|
|
6159
|
+
} else {
|
|
6160
|
+
return percentage;
|
|
6161
|
+
}
|
|
6162
|
+
}
|
|
6163
|
+
React4.useEffect(() => {
|
|
6164
|
+
setBarPercentage(fixPercentage());
|
|
6165
|
+
}, [percentage]);
|
|
6166
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-[2px] min-w-[170px]", children: [
|
|
6167
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full p-[1px] border border-neutral-300 rounded-[15px]", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
6168
|
+
"div",
|
|
6169
|
+
{
|
|
6170
|
+
className: clsx9__default.default(variants4[variant].bar, "h-[14px] rounded-[15px]"),
|
|
6171
|
+
style: { width: `${barPercentage}%` }
|
|
6172
|
+
}
|
|
6173
|
+
) }),
|
|
6174
|
+
status && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx9__default.default(variants4[variant].text, "text-blue-500 text-xs"), children: [
|
|
6175
|
+
status,
|
|
6176
|
+
percentage && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold", children: [
|
|
6177
|
+
"\xA0- ",
|
|
6178
|
+
percentage,
|
|
6179
|
+
" %"
|
|
6180
|
+
] })
|
|
6181
|
+
] })
|
|
6182
|
+
] });
|
|
6183
|
+
};
|
|
6184
|
+
function SimpleTab({ tabs, onClick }) {
|
|
6185
|
+
const [currentTab, setCurrentTab] = React4.useState(0);
|
|
6186
|
+
function isCurrentTab(index) {
|
|
6187
|
+
return index === currentTab;
|
|
6188
|
+
}
|
|
6189
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full flex-1", children: [
|
|
6190
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-neutral-200", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-mb-px flex", "aria-label": "Tabs", children: tabs.filter((item) => !item.hidden).map((tab, index) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
6191
|
+
"nav",
|
|
6192
|
+
{
|
|
6193
|
+
className: clsx9__default.default(
|
|
6194
|
+
isCurrentTab(index) ? "border-rose-700 text-rose-700 font-bold hover:border-rose-800 hover:text-rose-800 hover:font-bold" : "border-transparent text-label hover:text-paragraph",
|
|
6195
|
+
"group cursor-pointer flex items-center border-b-2 py-1 px-4 text-base"
|
|
6196
|
+
),
|
|
6197
|
+
"aria-current": isCurrentTab(index) ? "page" : void 0,
|
|
6198
|
+
onClick: () => {
|
|
6199
|
+
setCurrentTab(index);
|
|
6200
|
+
if (onClick) {
|
|
6201
|
+
onClick(tabs[index]);
|
|
6202
|
+
}
|
|
6203
|
+
},
|
|
6204
|
+
children: [
|
|
6205
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6206
|
+
"div",
|
|
6207
|
+
{
|
|
6208
|
+
id: "tab-icon",
|
|
6209
|
+
className: clsx9__default.default(
|
|
6210
|
+
isCurrentTab(index) ? "text-rose-700 group-hover:text-rose-800" : "text-label group-hover:text-paragraph",
|
|
6211
|
+
{ "-ml-0.5 mr-2": tab.icon }
|
|
6212
|
+
),
|
|
6213
|
+
"aria-hidden": "true",
|
|
6214
|
+
children: tab.icon
|
|
6215
|
+
}
|
|
6216
|
+
),
|
|
6217
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: tab.label })
|
|
6218
|
+
]
|
|
6219
|
+
},
|
|
6220
|
+
tab.key
|
|
6221
|
+
)) }) }),
|
|
6222
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full flex-1 flex flex-col", children: tabs[currentTab].children })
|
|
6223
|
+
] }) });
|
|
6224
|
+
}
|
|
4611
6225
|
|
|
4612
6226
|
exports.Accordion = Accordion;
|
|
4613
6227
|
exports.Badge = Badge;
|
|
@@ -4621,23 +6235,33 @@ exports.DataTablePagination = DataTablePagination;
|
|
|
4621
6235
|
exports.DatePickerInput = DatePickerInput;
|
|
4622
6236
|
exports.EditableButton = EditableButton;
|
|
4623
6237
|
exports.EditableText = EditableText;
|
|
6238
|
+
exports.EditableTextSelect = EditableTextSelect;
|
|
6239
|
+
exports.FileUpload = FileUpload;
|
|
4624
6240
|
exports.FilterCalendar = FilterCalendar;
|
|
4625
6241
|
exports.FilterOptions = FilterOptions;
|
|
6242
|
+
exports.InfoIcon = InfoIcon;
|
|
4626
6243
|
exports.Input = Input;
|
|
4627
6244
|
exports.InputMoney = InputMoney;
|
|
4628
6245
|
exports.InputNumber = InputNumber;
|
|
4629
6246
|
exports.InputPercentage = InputPercentage;
|
|
6247
|
+
exports.InputTag = InputTag;
|
|
4630
6248
|
exports.Item = Item;
|
|
4631
6249
|
exports.Logo = Logo;
|
|
4632
6250
|
exports.MaskedInput = MaskedInput;
|
|
4633
6251
|
exports.Menu = Menu;
|
|
4634
6252
|
exports.ModalDialog = ModalDialog;
|
|
6253
|
+
exports.MultiSelect = MultiSelect;
|
|
6254
|
+
exports.MultiSelectBottom = MultiSelectBottom;
|
|
6255
|
+
exports.PageBox = PageBox;
|
|
6256
|
+
exports.PageHeader = PageHeader;
|
|
4635
6257
|
exports.PaginationSelect = PaginationSelect;
|
|
4636
6258
|
exports.Popover = Popover3;
|
|
6259
|
+
exports.ProgressBar = ProgressBar;
|
|
4637
6260
|
exports.Radio = Radio;
|
|
4638
6261
|
exports.RocketIcon = RocketIcon;
|
|
4639
6262
|
exports.SelectField = SelectField;
|
|
4640
6263
|
exports.SelectFieldBip = SelectFieldBip;
|
|
6264
|
+
exports.SimpleTab = SimpleTab;
|
|
4641
6265
|
exports.SpinnerIcon = SpinnerIcon;
|
|
4642
6266
|
exports.Table = Table;
|
|
4643
6267
|
exports.TableBody = TableBody;
|
|
@@ -4648,7 +6272,7 @@ exports.TableHead = TableHead;
|
|
|
4648
6272
|
exports.TableHeader = TableHeader;
|
|
4649
6273
|
exports.TableRow = TableRow;
|
|
4650
6274
|
exports.Toggle = Toggle;
|
|
4651
|
-
exports.ValueContainer =
|
|
6275
|
+
exports.ValueContainer = ValueContainer4;
|
|
4652
6276
|
exports.sizes = sizes2;
|
|
4653
6277
|
//# sourceMappingURL=index.cjs.map
|
|
4654
6278
|
//# sourceMappingURL=index.cjs.map
|