@soyfri/shared-library 1.5.0-beta.3 → 1.5.0-beta.4
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.
|
@@ -20,9 +20,41 @@ var __spreadValues = (a, b) => {
|
|
|
20
20
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
21
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
22
22
|
const jsxRuntime = require("react/jsx-runtime");
|
|
23
|
-
|
|
23
|
+
require("react");
|
|
24
24
|
const material = require("@mui/material");
|
|
25
|
-
|
|
25
|
+
require("@mui/icons-material/Clear");
|
|
26
|
+
const system = require("@mui/system");
|
|
27
|
+
const StyledAutocomplete = system.styled(material.Autocomplete)(
|
|
28
|
+
({ theme }) => ({
|
|
29
|
+
"& .MuiOutlinedInput-root": {
|
|
30
|
+
maxHeight: "36px",
|
|
31
|
+
padding: "8px 10px",
|
|
32
|
+
borderRadius: "10px",
|
|
33
|
+
display: "flex",
|
|
34
|
+
alignItems: "center",
|
|
35
|
+
fontSize: "14px"
|
|
36
|
+
},
|
|
37
|
+
"& .MuiAutocomplete-inputRoot": {
|
|
38
|
+
padding: "0 !important"
|
|
39
|
+
},
|
|
40
|
+
"& .MuiAutocomplete-input": {
|
|
41
|
+
padding: "0 !important",
|
|
42
|
+
height: "28px",
|
|
43
|
+
marginLeft: "8px"
|
|
44
|
+
},
|
|
45
|
+
"& .MuiOutlinedInput-notchedOutline": {
|
|
46
|
+
marginBottom: "-4px",
|
|
47
|
+
borderRadius: "10px"
|
|
48
|
+
},
|
|
49
|
+
"& .MuiOutlinedInput-notchedOutline > legend": {
|
|
50
|
+
display: "none"
|
|
51
|
+
},
|
|
52
|
+
"& .MuiAutocomplete-endAdornment": {
|
|
53
|
+
top: "50%",
|
|
54
|
+
transform: "translateY(-50%)"
|
|
55
|
+
}
|
|
56
|
+
})
|
|
57
|
+
);
|
|
26
58
|
function AutocompleteSelect(props) {
|
|
27
59
|
const {
|
|
28
60
|
label,
|
|
@@ -39,56 +71,47 @@ function AutocompleteSelect(props) {
|
|
|
39
71
|
renderChipLabel,
|
|
40
72
|
maxChipsToShow = 3
|
|
41
73
|
} = props;
|
|
42
|
-
const renderTags = (value2, getTagProps) => {
|
|
43
|
-
const displayed = value2.slice(0, maxChipsToShow);
|
|
44
|
-
const hidden = value2.length - maxChipsToShow;
|
|
45
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
46
|
-
displayed.map((option, index) => /* @__PURE__ */ React.createElement(
|
|
47
|
-
material.Chip,
|
|
48
|
-
__spreadProps(__spreadValues({}, getTagProps({ index })), {
|
|
49
|
-
key: option.value,
|
|
50
|
-
label: renderChipLabel ? renderChipLabel(option) : option.label,
|
|
51
|
-
avatar: option.img ? /* @__PURE__ */ jsxRuntime.jsx(material.Avatar, { src: option.img }) : void 0,
|
|
52
|
-
deleteIcon: /* @__PURE__ */ jsxRuntime.jsx(ClearIcon, {})
|
|
53
|
-
})
|
|
54
|
-
)),
|
|
55
|
-
hidden > 0 && /* @__PURE__ */ jsxRuntime.jsx(material.Chip, { label: `+${hidden} más` })
|
|
56
|
-
] });
|
|
57
|
-
};
|
|
58
|
-
const renderOption = (propsLi, option) => /* @__PURE__ */ React.createElement("li", __spreadProps(__spreadValues({}, propsLi), { key: option.value }), renderOptionItem ? renderOptionItem(option) : option.label);
|
|
59
74
|
const renderAutocomplete = (value2, onChange2) => {
|
|
60
75
|
var _a, _b;
|
|
61
76
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
62
|
-
material.
|
|
77
|
+
material.Box,
|
|
63
78
|
{
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
disabled,
|
|
70
|
-
loading,
|
|
71
|
-
getOptionLabel: (opt) => {
|
|
72
|
-
var _a2;
|
|
73
|
-
return (_a2 = opt == null ? void 0 : opt.label) != null ? _a2 : "";
|
|
79
|
+
sx: {
|
|
80
|
+
width: "100%",
|
|
81
|
+
display: "grid",
|
|
82
|
+
marginBottom: "10px",
|
|
83
|
+
marginTop: "10px"
|
|
74
84
|
},
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
85
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
86
|
+
StyledAutocomplete,
|
|
87
|
+
{
|
|
88
|
+
multiple,
|
|
89
|
+
options,
|
|
90
|
+
value: multiple ? (_a = options.filter(
|
|
91
|
+
(o) => value2 == null ? void 0 : value2.includes(o.value)
|
|
92
|
+
)) != null ? _a : [] : (_b = options.find((o) => o.value === value2)) != null ? _b : null,
|
|
93
|
+
disabled,
|
|
94
|
+
loading,
|
|
95
|
+
getOptionLabel: (opt) => {
|
|
96
|
+
var _a2;
|
|
97
|
+
return (_a2 = opt == null ? void 0 : opt.label) != null ? _a2 : "";
|
|
98
|
+
},
|
|
99
|
+
isOptionEqualToValue: (a, b) => a.value === b.value,
|
|
100
|
+
onChange: onChange2,
|
|
101
|
+
noOptionsText: "No hay opciones",
|
|
102
|
+
loadingText: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
|
|
103
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 20 }),
|
|
104
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { children: "Cargando..." })
|
|
105
|
+
] }),
|
|
106
|
+
renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
107
|
+
material.TextField,
|
|
108
|
+
__spreadProps(__spreadValues({}, params), {
|
|
109
|
+
placeholder,
|
|
110
|
+
error,
|
|
111
|
+
helperText
|
|
112
|
+
})
|
|
113
|
+
)
|
|
114
|
+
}
|
|
92
115
|
)
|
|
93
116
|
}
|
|
94
117
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Autocomplete.cjs","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n Autocomplete,\n TextField,\n Chip,\n Avatar,\n Box,\n Typography,\n CircularProgress,\n} from \"@mui/material\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\n\nexport interface SelectOption {\n value: string | number;\n label: string;\n img?: string;\n disabled?: boolean;\n group?: string;\n [key: string]: any;\n}\n\ntype RenderOptionItem = (item: SelectOption) => React.ReactNode;\ntype RenderChipLabel = (item: SelectOption) => React.ReactNode;\n\ninterface AutocompleteProps<\n TValue extends SelectOption[\"value\"] = SelectOption[\"value\"],\n> {\n label?: string;\n value: TValue | TValue[];\n onChange: (val: TValue | TValue[]) => void;\n options?: SelectOption[];\n placeholder?: string;\n multiple?: boolean;\n disabled?: boolean;\n loading?: boolean;\n error?: boolean;\n helperText?: string;\n maxChipsToShow?: number;\n renderOptionItem?: RenderOptionItem;\n renderChipLabel?: RenderChipLabel;\n}\n\nexport function AutocompleteSelect<\n TValue extends SelectOption[\"value\"] = SelectOption[\"value\"],\n>(props: AutocompleteProps<TValue>) {\n const {\n label,\n options = [],\n value,\n onChange,\n placeholder,\n multiple = false,\n disabled = false,\n loading = false,\n error = false,\n helperText,\n renderOptionItem,\n renderChipLabel,\n maxChipsToShow = 3,\n } = props;\n\n const renderTags = (value: SelectOption[], getTagProps: any) => {\n const displayed = value.slice(0, maxChipsToShow);\n const hidden = value.length - maxChipsToShow;\n\n return (\n <>\n {displayed.map((option, index) => (\n <Chip\n {...getTagProps({ index })}\n key={option.value}\n label={renderChipLabel ? renderChipLabel(option) : option.label}\n avatar={option.img ? <Avatar src={option.img} /> : undefined}\n deleteIcon={<ClearIcon />}\n />\n ))}\n\n {hidden > 0 && <Chip label={`+${hidden} más`} />}\n </>\n );\n };\n\n const renderOption = (propsLi: any, option: SelectOption) => (\n <li {...propsLi} key={option.value}>\n {renderOptionItem ? renderOptionItem(option) : option.label}\n </li>\n );\n\n const renderAutocomplete = (value: any, onChange: any) => (\n <
|
|
1
|
+
{"version":3,"file":"Autocomplete.cjs","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n Autocomplete,\n TextField,\n Chip,\n Avatar,\n Box,\n Typography,\n CircularProgress,\n} from \"@mui/material\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { styled } from \"@mui/system\";\n\nexport interface SelectOption {\n value: string | number;\n label: string;\n img?: string;\n disabled?: boolean;\n group?: string;\n [key: string]: any;\n}\n\ntype RenderOptionItem = (item: SelectOption) => React.ReactNode;\ntype RenderChipLabel = (item: SelectOption) => React.ReactNode;\n\ninterface AutocompleteProps<\n TValue extends SelectOption[\"value\"] = SelectOption[\"value\"],\n> {\n label?: string;\n value: TValue | TValue[];\n onChange: (val: TValue | TValue[]) => void;\n options?: SelectOption[];\n placeholder?: string;\n multiple?: boolean;\n disabled?: boolean;\n loading?: boolean;\n error?: boolean;\n helperText?: string;\n maxChipsToShow?: number;\n renderOptionItem?: RenderOptionItem;\n renderChipLabel?: RenderChipLabel;\n}\n\nconst StyledAutocomplete = styled(Autocomplete as typeof Autocomplete)(\n ({ theme }) => ({\n \"& .MuiOutlinedInput-root\": {\n maxHeight: \"36px\",\n padding: \"8px 10px\",\n borderRadius: \"10px\",\n display: \"flex\",\n alignItems: \"center\",\n fontSize: \"14px\",\n },\n\n \"& .MuiAutocomplete-inputRoot\": {\n padding: \"0 !important\",\n },\n\n \"& .MuiAutocomplete-input\": {\n padding: \"0 !important\",\n height: \"28px\",\n marginLeft: \"8px\",\n },\n\n \"& .MuiOutlinedInput-notchedOutline\": {\n marginBottom: \"-4px\",\n borderRadius: \"10px\",\n },\n\n \"& .MuiOutlinedInput-notchedOutline > legend\": {\n display: \"none\",\n },\n\n \"& .MuiAutocomplete-endAdornment\": {\n top: \"50%\",\n transform: \"translateY(-50%)\",\n },\n }),\n);\n\nexport function AutocompleteSelect<\n TValue extends SelectOption[\"value\"] = SelectOption[\"value\"],\n>(props: AutocompleteProps<TValue>) {\n const {\n label,\n options = [],\n value,\n onChange,\n placeholder,\n multiple = false,\n disabled = false,\n loading = false,\n error = false,\n helperText,\n renderOptionItem,\n renderChipLabel,\n maxChipsToShow = 3,\n } = props;\n\n const renderTags = (value: SelectOption[], getTagProps: any) => {\n const displayed = value.slice(0, maxChipsToShow);\n const hidden = value.length - maxChipsToShow;\n\n return (\n <>\n {displayed.map((option, index) => (\n <Chip\n {...getTagProps({ index })}\n key={option.value}\n label={renderChipLabel ? renderChipLabel(option) : option.label}\n avatar={option.img ? <Avatar src={option.img} /> : undefined}\n deleteIcon={<ClearIcon />}\n />\n ))}\n\n {hidden > 0 && <Chip label={`+${hidden} más`} />}\n </>\n );\n };\n\n const renderOption = (propsLi: any, option: SelectOption) => (\n <li {...propsLi} key={option.value}>\n {renderOptionItem ? renderOptionItem(option) : option.label}\n </li>\n );\n\n const renderAutocomplete = (value: any, onChange: any) => (\n <Box\n sx={{\n width: \"100%\",\n display: \"grid\",\n marginBottom: \"10px\",\n marginTop: \"10px\",\n }}\n >\n <StyledAutocomplete\n multiple={multiple}\n options={options}\n value={\n multiple\n ? (options.filter((o) =>\n (value as string[] | undefined)?.includes(o.value as string),\n ) ?? [])\n : (options.find((o) => o.value === value) ?? null)\n }\n disabled={disabled}\n loading={loading}\n getOptionLabel={(opt: any) => opt?.label ?? \"\"}\n isOptionEqualToValue={(a: any, b: any) => a.value === b.value}\n onChange={onChange}\n // renderOption={renderOption}\n // renderTags={multiple ? renderTags : undefined}\n noOptionsText=\"No hay opciones\"\n loadingText={\n <Box sx={{ display: \"flex\", alignItems: \"center\", gap: 1 }}>\n <CircularProgress size={20} />\n <Typography>Cargando...</Typography>\n </Box>\n }\n renderInput={(params) => (\n <TextField\n {...params}\n // label={label}\n placeholder={placeholder}\n error={error}\n helperText={helperText}\n />\n )}\n />\n </Box>\n );\n\n const handleChangeInternal = (event: any, newValue: any) => {\n if (multiple) {\n const values = (newValue ?? []).map((opt: any) => opt.value);\n (onChange as (val: TValue[]) => void)?.(values);\n } else {\n const value = newValue?.value ?? \"\";\n (onChange as (val: TValue) => void)?.(value);\n }\n };\n\n return renderAutocomplete(value, handleChangeInternal);\n}\n\nexport default AutocompleteSelect;\n"],"names":["styled","Autocomplete","value","onChange","jsx","Box","_a","jsxs","CircularProgress","Typography","TextField"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,qBAAqBA,OAAAA,OAAOC,qBAAmC;AAAA,EACnE,CAAC,EAAE,MAAA,OAAa;AAAA,IACd,4BAA4B;AAAA,MAC1B,WAAW;AAAA,MACX,SAAS;AAAA,MACT,cAAc;AAAA,MACd,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,IAAA;AAAA,IAGZ,gCAAgC;AAAA,MAC9B,SAAS;AAAA,IAAA;AAAA,IAGX,4BAA4B;AAAA,MAC1B,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,YAAY;AAAA,IAAA;AAAA,IAGd,sCAAsC;AAAA,MACpC,cAAc;AAAA,MACd,cAAc;AAAA,IAAA;AAAA,IAGhB,+CAA+C;AAAA,MAC7C,SAAS;AAAA,IAAA;AAAA,IAGX,mCAAmC;AAAA,MACjC,KAAK;AAAA,MACL,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ;AAEO,SAAS,mBAEd,OAAkC;AAClC,QAAM;AAAA,IACJ;AAAA,IACA,UAAU,CAAA;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,EAAA,IACf;AA6BJ,QAAM,qBAAqB,CAACC,QAAYC;;AACtCC,sCAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,OAAO;AAAA,UACP,SAAS;AAAA,UACT,cAAc;AAAA,UACd,WAAW;AAAA,QAAA;AAAA,QAGb,UAAAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,OACE,YACK,aAAQ;AAAA,cAAO,CAAC,MACdF,iCAAgC,SAAS,EAAE;AAAA,YAAe,MAD5D,YAEI,CAAA,KACJ,aAAQ,KAAK,CAAC,MAAM,EAAE,UAAUA,MAAK,MAArC,YAA0C;AAAA,YAEjD;AAAA,YACA;AAAA,YACA,gBAAgB,CAAC;;AAAa,sBAAAI,MAAA,2BAAK,UAAL,OAAAA,MAAc;AAAA;AAAA,YAC5C,sBAAsB,CAAC,GAAQ,MAAW,EAAE,UAAU,EAAE;AAAA,YACxD,UAAUH;AAAAA,YAGV,eAAc;AAAA,YACd,aACEI,2BAAAA,KAACF,SAAAA,KAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAA,GACrD,UAAA;AAAA,cAAAD,2BAAAA,IAACI,SAAAA,kBAAA,EAAiB,MAAM,GAAA,CAAI;AAAA,cAC5BJ,2BAAAA,IAACK,SAAAA,cAAW,UAAA,cAAA,CAAW;AAAA,YAAA,GACzB;AAAA,YAEF,aAAa,CAAC,WACZL,2BAAAA;AAAAA,cAACM,SAAAA;AAAAA,cAAA,iCACK,SADL;AAAA,gBAGC;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA;AAAA;AAIJ,QAAM,uBAAuB,CAAC,OAAY,aAAkB;;AAC1D,QAAI,UAAU;AACZ,YAAM,UAAU,8BAAY,CAAA,GAAI,IAAI,CAAC,QAAa,IAAI,KAAK;AAC1D,2CAAuC;AAAA,IAC1C,OAAO;AACL,YAAMR,UAAQ,0CAAU,UAAV,YAAmB;AAChC,2CAAqCA;AAAAA,IACxC;AAAA,EACF;AAEA,SAAO,mBAAmB,OAAO,oBAAoB;AACvD;;"}
|
|
@@ -17,10 +17,42 @@ var __spreadValues = (a, b) => {
|
|
|
17
17
|
return a;
|
|
18
18
|
};
|
|
19
19
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
import { jsx, jsxs
|
|
21
|
-
import
|
|
22
|
-
import { Autocomplete,
|
|
23
|
-
import
|
|
20
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
21
|
+
import "react";
|
|
22
|
+
import { Autocomplete, Box, TextField, CircularProgress, Typography } from "@mui/material";
|
|
23
|
+
import "@mui/icons-material/Clear";
|
|
24
|
+
import { styled } from "@mui/system";
|
|
25
|
+
const StyledAutocomplete = styled(Autocomplete)(
|
|
26
|
+
({ theme }) => ({
|
|
27
|
+
"& .MuiOutlinedInput-root": {
|
|
28
|
+
maxHeight: "36px",
|
|
29
|
+
padding: "8px 10px",
|
|
30
|
+
borderRadius: "10px",
|
|
31
|
+
display: "flex",
|
|
32
|
+
alignItems: "center",
|
|
33
|
+
fontSize: "14px"
|
|
34
|
+
},
|
|
35
|
+
"& .MuiAutocomplete-inputRoot": {
|
|
36
|
+
padding: "0 !important"
|
|
37
|
+
},
|
|
38
|
+
"& .MuiAutocomplete-input": {
|
|
39
|
+
padding: "0 !important",
|
|
40
|
+
height: "28px",
|
|
41
|
+
marginLeft: "8px"
|
|
42
|
+
},
|
|
43
|
+
"& .MuiOutlinedInput-notchedOutline": {
|
|
44
|
+
marginBottom: "-4px",
|
|
45
|
+
borderRadius: "10px"
|
|
46
|
+
},
|
|
47
|
+
"& .MuiOutlinedInput-notchedOutline > legend": {
|
|
48
|
+
display: "none"
|
|
49
|
+
},
|
|
50
|
+
"& .MuiAutocomplete-endAdornment": {
|
|
51
|
+
top: "50%",
|
|
52
|
+
transform: "translateY(-50%)"
|
|
53
|
+
}
|
|
54
|
+
})
|
|
55
|
+
);
|
|
24
56
|
function AutocompleteSelect(props) {
|
|
25
57
|
const {
|
|
26
58
|
label,
|
|
@@ -37,56 +69,47 @@ function AutocompleteSelect(props) {
|
|
|
37
69
|
renderChipLabel,
|
|
38
70
|
maxChipsToShow = 3
|
|
39
71
|
} = props;
|
|
40
|
-
const renderTags = (value2, getTagProps) => {
|
|
41
|
-
const displayed = value2.slice(0, maxChipsToShow);
|
|
42
|
-
const hidden = value2.length - maxChipsToShow;
|
|
43
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
44
|
-
displayed.map((option, index) => /* @__PURE__ */ createElement(
|
|
45
|
-
Chip,
|
|
46
|
-
__spreadProps(__spreadValues({}, getTagProps({ index })), {
|
|
47
|
-
key: option.value,
|
|
48
|
-
label: renderChipLabel ? renderChipLabel(option) : option.label,
|
|
49
|
-
avatar: option.img ? /* @__PURE__ */ jsx(Avatar, { src: option.img }) : void 0,
|
|
50
|
-
deleteIcon: /* @__PURE__ */ jsx(ClearIcon, {})
|
|
51
|
-
})
|
|
52
|
-
)),
|
|
53
|
-
hidden > 0 && /* @__PURE__ */ jsx(Chip, { label: `+${hidden} más` })
|
|
54
|
-
] });
|
|
55
|
-
};
|
|
56
|
-
const renderOption = (propsLi, option) => /* @__PURE__ */ createElement("li", __spreadProps(__spreadValues({}, propsLi), { key: option.value }), renderOptionItem ? renderOptionItem(option) : option.label);
|
|
57
72
|
const renderAutocomplete = (value2, onChange2) => {
|
|
58
73
|
var _a, _b;
|
|
59
74
|
return /* @__PURE__ */ jsx(
|
|
60
|
-
|
|
75
|
+
Box,
|
|
61
76
|
{
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
disabled,
|
|
68
|
-
loading,
|
|
69
|
-
getOptionLabel: (opt) => {
|
|
70
|
-
var _a2;
|
|
71
|
-
return (_a2 = opt == null ? void 0 : opt.label) != null ? _a2 : "";
|
|
77
|
+
sx: {
|
|
78
|
+
width: "100%",
|
|
79
|
+
display: "grid",
|
|
80
|
+
marginBottom: "10px",
|
|
81
|
+
marginTop: "10px"
|
|
72
82
|
},
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
83
|
+
children: /* @__PURE__ */ jsx(
|
|
84
|
+
StyledAutocomplete,
|
|
85
|
+
{
|
|
86
|
+
multiple,
|
|
87
|
+
options,
|
|
88
|
+
value: multiple ? (_a = options.filter(
|
|
89
|
+
(o) => value2 == null ? void 0 : value2.includes(o.value)
|
|
90
|
+
)) != null ? _a : [] : (_b = options.find((o) => o.value === value2)) != null ? _b : null,
|
|
91
|
+
disabled,
|
|
92
|
+
loading,
|
|
93
|
+
getOptionLabel: (opt) => {
|
|
94
|
+
var _a2;
|
|
95
|
+
return (_a2 = opt == null ? void 0 : opt.label) != null ? _a2 : "";
|
|
96
|
+
},
|
|
97
|
+
isOptionEqualToValue: (a, b) => a.value === b.value,
|
|
98
|
+
onChange: onChange2,
|
|
99
|
+
noOptionsText: "No hay opciones",
|
|
100
|
+
loadingText: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
|
|
101
|
+
/* @__PURE__ */ jsx(CircularProgress, { size: 20 }),
|
|
102
|
+
/* @__PURE__ */ jsx(Typography, { children: "Cargando..." })
|
|
103
|
+
] }),
|
|
104
|
+
renderInput: (params) => /* @__PURE__ */ jsx(
|
|
105
|
+
TextField,
|
|
106
|
+
__spreadProps(__spreadValues({}, params), {
|
|
107
|
+
placeholder,
|
|
108
|
+
error,
|
|
109
|
+
helperText
|
|
110
|
+
})
|
|
111
|
+
)
|
|
112
|
+
}
|
|
90
113
|
)
|
|
91
114
|
}
|
|
92
115
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Autocomplete.js","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n Autocomplete,\n TextField,\n Chip,\n Avatar,\n Box,\n Typography,\n CircularProgress,\n} from \"@mui/material\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\n\nexport interface SelectOption {\n value: string | number;\n label: string;\n img?: string;\n disabled?: boolean;\n group?: string;\n [key: string]: any;\n}\n\ntype RenderOptionItem = (item: SelectOption) => React.ReactNode;\ntype RenderChipLabel = (item: SelectOption) => React.ReactNode;\n\ninterface AutocompleteProps<\n TValue extends SelectOption[\"value\"] = SelectOption[\"value\"],\n> {\n label?: string;\n value: TValue | TValue[];\n onChange: (val: TValue | TValue[]) => void;\n options?: SelectOption[];\n placeholder?: string;\n multiple?: boolean;\n disabled?: boolean;\n loading?: boolean;\n error?: boolean;\n helperText?: string;\n maxChipsToShow?: number;\n renderOptionItem?: RenderOptionItem;\n renderChipLabel?: RenderChipLabel;\n}\n\nexport function AutocompleteSelect<\n TValue extends SelectOption[\"value\"] = SelectOption[\"value\"],\n>(props: AutocompleteProps<TValue>) {\n const {\n label,\n options = [],\n value,\n onChange,\n placeholder,\n multiple = false,\n disabled = false,\n loading = false,\n error = false,\n helperText,\n renderOptionItem,\n renderChipLabel,\n maxChipsToShow = 3,\n } = props;\n\n const renderTags = (value: SelectOption[], getTagProps: any) => {\n const displayed = value.slice(0, maxChipsToShow);\n const hidden = value.length - maxChipsToShow;\n\n return (\n <>\n {displayed.map((option, index) => (\n <Chip\n {...getTagProps({ index })}\n key={option.value}\n label={renderChipLabel ? renderChipLabel(option) : option.label}\n avatar={option.img ? <Avatar src={option.img} /> : undefined}\n deleteIcon={<ClearIcon />}\n />\n ))}\n\n {hidden > 0 && <Chip label={`+${hidden} más`} />}\n </>\n );\n };\n\n const renderOption = (propsLi: any, option: SelectOption) => (\n <li {...propsLi} key={option.value}>\n {renderOptionItem ? renderOptionItem(option) : option.label}\n </li>\n );\n\n const renderAutocomplete = (value: any, onChange: any) => (\n <
|
|
1
|
+
{"version":3,"file":"Autocomplete.js","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n Autocomplete,\n TextField,\n Chip,\n Avatar,\n Box,\n Typography,\n CircularProgress,\n} from \"@mui/material\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { styled } from \"@mui/system\";\n\nexport interface SelectOption {\n value: string | number;\n label: string;\n img?: string;\n disabled?: boolean;\n group?: string;\n [key: string]: any;\n}\n\ntype RenderOptionItem = (item: SelectOption) => React.ReactNode;\ntype RenderChipLabel = (item: SelectOption) => React.ReactNode;\n\ninterface AutocompleteProps<\n TValue extends SelectOption[\"value\"] = SelectOption[\"value\"],\n> {\n label?: string;\n value: TValue | TValue[];\n onChange: (val: TValue | TValue[]) => void;\n options?: SelectOption[];\n placeholder?: string;\n multiple?: boolean;\n disabled?: boolean;\n loading?: boolean;\n error?: boolean;\n helperText?: string;\n maxChipsToShow?: number;\n renderOptionItem?: RenderOptionItem;\n renderChipLabel?: RenderChipLabel;\n}\n\nconst StyledAutocomplete = styled(Autocomplete as typeof Autocomplete)(\n ({ theme }) => ({\n \"& .MuiOutlinedInput-root\": {\n maxHeight: \"36px\",\n padding: \"8px 10px\",\n borderRadius: \"10px\",\n display: \"flex\",\n alignItems: \"center\",\n fontSize: \"14px\",\n },\n\n \"& .MuiAutocomplete-inputRoot\": {\n padding: \"0 !important\",\n },\n\n \"& .MuiAutocomplete-input\": {\n padding: \"0 !important\",\n height: \"28px\",\n marginLeft: \"8px\",\n },\n\n \"& .MuiOutlinedInput-notchedOutline\": {\n marginBottom: \"-4px\",\n borderRadius: \"10px\",\n },\n\n \"& .MuiOutlinedInput-notchedOutline > legend\": {\n display: \"none\",\n },\n\n \"& .MuiAutocomplete-endAdornment\": {\n top: \"50%\",\n transform: \"translateY(-50%)\",\n },\n }),\n);\n\nexport function AutocompleteSelect<\n TValue extends SelectOption[\"value\"] = SelectOption[\"value\"],\n>(props: AutocompleteProps<TValue>) {\n const {\n label,\n options = [],\n value,\n onChange,\n placeholder,\n multiple = false,\n disabled = false,\n loading = false,\n error = false,\n helperText,\n renderOptionItem,\n renderChipLabel,\n maxChipsToShow = 3,\n } = props;\n\n const renderTags = (value: SelectOption[], getTagProps: any) => {\n const displayed = value.slice(0, maxChipsToShow);\n const hidden = value.length - maxChipsToShow;\n\n return (\n <>\n {displayed.map((option, index) => (\n <Chip\n {...getTagProps({ index })}\n key={option.value}\n label={renderChipLabel ? renderChipLabel(option) : option.label}\n avatar={option.img ? <Avatar src={option.img} /> : undefined}\n deleteIcon={<ClearIcon />}\n />\n ))}\n\n {hidden > 0 && <Chip label={`+${hidden} más`} />}\n </>\n );\n };\n\n const renderOption = (propsLi: any, option: SelectOption) => (\n <li {...propsLi} key={option.value}>\n {renderOptionItem ? renderOptionItem(option) : option.label}\n </li>\n );\n\n const renderAutocomplete = (value: any, onChange: any) => (\n <Box\n sx={{\n width: \"100%\",\n display: \"grid\",\n marginBottom: \"10px\",\n marginTop: \"10px\",\n }}\n >\n <StyledAutocomplete\n multiple={multiple}\n options={options}\n value={\n multiple\n ? (options.filter((o) =>\n (value as string[] | undefined)?.includes(o.value as string),\n ) ?? [])\n : (options.find((o) => o.value === value) ?? null)\n }\n disabled={disabled}\n loading={loading}\n getOptionLabel={(opt: any) => opt?.label ?? \"\"}\n isOptionEqualToValue={(a: any, b: any) => a.value === b.value}\n onChange={onChange}\n // renderOption={renderOption}\n // renderTags={multiple ? renderTags : undefined}\n noOptionsText=\"No hay opciones\"\n loadingText={\n <Box sx={{ display: \"flex\", alignItems: \"center\", gap: 1 }}>\n <CircularProgress size={20} />\n <Typography>Cargando...</Typography>\n </Box>\n }\n renderInput={(params) => (\n <TextField\n {...params}\n // label={label}\n placeholder={placeholder}\n error={error}\n helperText={helperText}\n />\n )}\n />\n </Box>\n );\n\n const handleChangeInternal = (event: any, newValue: any) => {\n if (multiple) {\n const values = (newValue ?? []).map((opt: any) => opt.value);\n (onChange as (val: TValue[]) => void)?.(values);\n } else {\n const value = newValue?.value ?? \"\";\n (onChange as (val: TValue) => void)?.(value);\n }\n };\n\n return renderAutocomplete(value, handleChangeInternal);\n}\n\nexport default AutocompleteSelect;\n"],"names":["value","onChange","_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,qBAAqB,OAAO,YAAmC;AAAA,EACnE,CAAC,EAAE,MAAA,OAAa;AAAA,IACd,4BAA4B;AAAA,MAC1B,WAAW;AAAA,MACX,SAAS;AAAA,MACT,cAAc;AAAA,MACd,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,IAAA;AAAA,IAGZ,gCAAgC;AAAA,MAC9B,SAAS;AAAA,IAAA;AAAA,IAGX,4BAA4B;AAAA,MAC1B,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,YAAY;AAAA,IAAA;AAAA,IAGd,sCAAsC;AAAA,MACpC,cAAc;AAAA,MACd,cAAc;AAAA,IAAA;AAAA,IAGhB,+CAA+C;AAAA,MAC7C,SAAS;AAAA,IAAA;AAAA,IAGX,mCAAmC;AAAA,MACjC,KAAK;AAAA,MACL,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ;AAEO,SAAS,mBAEd,OAAkC;AAClC,QAAM;AAAA,IACJ;AAAA,IACA,UAAU,CAAA;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,EAAA,IACf;AA6BJ,QAAM,qBAAqB,CAACA,QAAYC;;AACtC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,OAAO;AAAA,UACP,SAAS;AAAA,UACT,cAAc;AAAA,UACd,WAAW;AAAA,QAAA;AAAA,QAGb,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,OACE,YACK,aAAQ;AAAA,cAAO,CAAC,MACdD,iCAAgC,SAAS,EAAE;AAAA,YAAe,MAD5D,YAEI,CAAA,KACJ,aAAQ,KAAK,CAAC,MAAM,EAAE,UAAUA,MAAK,MAArC,YAA0C;AAAA,YAEjD;AAAA,YACA;AAAA,YACA,gBAAgB,CAAC;;AAAa,sBAAAE,MAAA,2BAAK,UAAL,OAAAA,MAAc;AAAA;AAAA,YAC5C,sBAAsB,CAAC,GAAQ,MAAW,EAAE,UAAU,EAAE;AAAA,YACxD,UAAUD;AAAAA,YAGV,eAAc;AAAA,YACd,aACE,qBAAC,KAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAA,GACrD,UAAA;AAAA,cAAA,oBAAC,kBAAA,EAAiB,MAAM,GAAA,CAAI;AAAA,cAC5B,oBAAC,cAAW,UAAA,cAAA,CAAW;AAAA,YAAA,GACzB;AAAA,YAEF,aAAa,CAAC,WACZ;AAAA,cAAC;AAAA,cAAA,iCACK,SADL;AAAA,gBAGC;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA;AAAA;AAIJ,QAAM,uBAAuB,CAAC,OAAY,aAAkB;;AAC1D,QAAI,UAAU;AACZ,YAAM,UAAU,8BAAY,CAAA,GAAI,IAAI,CAAC,QAAa,IAAI,KAAK;AAC1D,2CAAuC;AAAA,IAC1C,OAAO;AACL,YAAMD,UAAQ,0CAAU,UAAV,YAAmB;AAChC,2CAAqCA;AAAAA,IACxC;AAAA,EACF;AAEA,SAAO,mBAAmB,OAAO,oBAAoB;AACvD;"}
|