@soyfri/shared-library 1.5.0-beta.1 → 1.5.0-beta.3
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/components/Autocomplete/Autocomplete.cjs +49 -47
- package/components/Autocomplete/Autocomplete.cjs.map +1 -1
- package/components/Autocomplete/Autocomplete.d.ts +4 -13
- package/components/Autocomplete/Autocomplete.definitions.d.ts +9 -9
- package/components/Autocomplete/Autocomplete.js +49 -47
- package/components/Autocomplete/Autocomplete.js.map +1 -1
- package/package.json +1 -1
|
@@ -23,11 +23,12 @@ const jsxRuntime = require("react/jsx-runtime");
|
|
|
23
23
|
const React = require("react");
|
|
24
24
|
const material = require("@mui/material");
|
|
25
25
|
const ClearIcon = require("@mui/icons-material/Clear");
|
|
26
|
-
const reactHookForm = require("react-hook-form");
|
|
27
26
|
function AutocompleteSelect(props) {
|
|
28
27
|
const {
|
|
29
28
|
label,
|
|
30
29
|
options = [],
|
|
30
|
+
value,
|
|
31
|
+
onChange,
|
|
31
32
|
placeholder,
|
|
32
33
|
multiple = false,
|
|
33
34
|
disabled = false,
|
|
@@ -38,10 +39,9 @@ function AutocompleteSelect(props) {
|
|
|
38
39
|
renderChipLabel,
|
|
39
40
|
maxChipsToShow = 3
|
|
40
41
|
} = props;
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
-
const
|
|
44
|
-
const hidden = value.length - maxChipsToShow;
|
|
42
|
+
const renderTags = (value2, getTagProps) => {
|
|
43
|
+
const displayed = value2.slice(0, maxChipsToShow);
|
|
44
|
+
const hidden = value2.length - maxChipsToShow;
|
|
45
45
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
46
46
|
displayed.map((option, index) => /* @__PURE__ */ React.createElement(
|
|
47
47
|
material.Chip,
|
|
@@ -56,52 +56,54 @@ function AutocompleteSelect(props) {
|
|
|
56
56
|
] });
|
|
57
57
|
};
|
|
58
58
|
const renderOption = (propsLi, option) => /* @__PURE__ */ React.createElement("li", __spreadProps(__spreadValues({}, propsLi), { key: option.value }), renderOptionItem ? renderOptionItem(option) : option.label);
|
|
59
|
-
const renderAutocomplete = (
|
|
60
|
-
|
|
61
|
-
{
|
|
62
|
-
multiple,
|
|
63
|
-
options,
|
|
64
|
-
value,
|
|
65
|
-
disabled,
|
|
66
|
-
loading,
|
|
67
|
-
getOptionLabel: (opt) => {
|
|
68
|
-
var _a;
|
|
69
|
-
return (_a = opt == null ? void 0 : opt.label) != null ? _a : "";
|
|
70
|
-
},
|
|
71
|
-
isOptionEqualToValue: (a, b) => a.value === b.value,
|
|
72
|
-
onChange: (_, newValue) => onChange(newValue),
|
|
73
|
-
renderOption,
|
|
74
|
-
renderTags: multiple ? renderTags : void 0,
|
|
75
|
-
noOptionsText: "No hay opciones",
|
|
76
|
-
loadingText: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
|
|
77
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 20 }),
|
|
78
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { children: "Cargando..." })
|
|
79
|
-
] }),
|
|
80
|
-
renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
81
|
-
material.TextField,
|
|
82
|
-
__spreadProps(__spreadValues({}, params), {
|
|
83
|
-
label,
|
|
84
|
-
placeholder,
|
|
85
|
-
error,
|
|
86
|
-
helperText
|
|
87
|
-
})
|
|
88
|
-
)
|
|
89
|
-
}
|
|
90
|
-
);
|
|
91
|
-
if (isRHFMode) {
|
|
92
|
-
const rhfProps = props;
|
|
59
|
+
const renderAutocomplete = (value2, onChange2) => {
|
|
60
|
+
var _a, _b;
|
|
93
61
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
94
|
-
|
|
62
|
+
material.Autocomplete,
|
|
95
63
|
{
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
64
|
+
multiple,
|
|
65
|
+
options,
|
|
66
|
+
value: multiple ? (_a = options.filter(
|
|
67
|
+
(o) => value2 == null ? void 0 : value2.includes(o.value)
|
|
68
|
+
)) != null ? _a : [] : (_b = options.find((o) => o.value === value2)) != null ? _b : null,
|
|
69
|
+
disabled,
|
|
70
|
+
loading,
|
|
71
|
+
getOptionLabel: (opt) => {
|
|
72
|
+
var _a2;
|
|
73
|
+
return (_a2 = opt == null ? void 0 : opt.label) != null ? _a2 : "";
|
|
74
|
+
},
|
|
75
|
+
isOptionEqualToValue: (a, b) => a.value === b.value,
|
|
76
|
+
onChange: onChange2,
|
|
77
|
+
renderOption,
|
|
78
|
+
renderTags: multiple ? renderTags : void 0,
|
|
79
|
+
noOptionsText: "No hay opciones",
|
|
80
|
+
loadingText: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
|
|
81
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 20 }),
|
|
82
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { children: "Cargando..." })
|
|
83
|
+
] }),
|
|
84
|
+
renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
85
|
+
material.TextField,
|
|
86
|
+
__spreadProps(__spreadValues({}, params), {
|
|
87
|
+
label,
|
|
88
|
+
placeholder,
|
|
89
|
+
error,
|
|
90
|
+
helperText
|
|
91
|
+
})
|
|
92
|
+
)
|
|
100
93
|
}
|
|
101
94
|
);
|
|
102
|
-
}
|
|
103
|
-
const
|
|
104
|
-
|
|
95
|
+
};
|
|
96
|
+
const handleChangeInternal = (event, newValue) => {
|
|
97
|
+
var _a;
|
|
98
|
+
if (multiple) {
|
|
99
|
+
const values = (newValue != null ? newValue : []).map((opt) => opt.value);
|
|
100
|
+
onChange == null ? void 0 : onChange(values);
|
|
101
|
+
} else {
|
|
102
|
+
const value2 = (_a = newValue == null ? void 0 : newValue.value) != null ? _a : "";
|
|
103
|
+
onChange == null ? void 0 : onChange(value2);
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
return renderAutocomplete(value, handleChangeInternal);
|
|
105
107
|
}
|
|
106
108
|
exports.Autocomplete = AutocompleteSelect;
|
|
107
109
|
//# sourceMappingURL=Autocomplete.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Autocomplete.cjs","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import React
|
|
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 <Autocomplete\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) => opt?.label ?? \"\"}\n isOptionEqualToValue={(a, b) => 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 );\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","jsxs","Fragment","createElement","Chip","jsx","Avatar","onChange","Autocomplete","_a","Box","CircularProgress","Typography","TextField"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0CO,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;AAEJ,QAAM,aAAa,CAACA,QAAuB,gBAAqB;AAC9D,UAAM,YAAYA,OAAM,MAAM,GAAG,cAAc;AAC/C,UAAM,SAASA,OAAM,SAAS;AAE9B,WACEC,2BAAAA,KAAAC,qBAAA,EACG,UAAA;AAAA,MAAA,UAAU,IAAI,CAAC,QAAQ,UACtBC,sBAAAA;AAAAA,QAACC,SAAAA;AAAAA,QAAA,iCACK,YAAY,EAAE,OAAO,IAD1B;AAAA,UAEC,KAAK,OAAO;AAAA,UACZ,OAAO,kBAAkB,gBAAgB,MAAM,IAAI,OAAO;AAAA,UAC1D,QAAQ,OAAO,MAAMC,+BAACC,SAAAA,UAAO,KAAK,OAAO,KAAK,IAAK;AAAA,UACnD,2CAAa,WAAA,CAAA,CAAU;AAAA,QAAA;AAAA,MAAA,CAE1B;AAAA,MAEA,SAAS,KAAKD,2BAAAA,IAACD,iBAAK,OAAO,IAAI,MAAM,OAAA,CAAQ;AAAA,IAAA,GAChD;AAAA,EAEJ;AAEA,QAAM,eAAe,CAAC,SAAc,WAClCD,sBAAAA,cAAC,uCAAO,YAAS,KAAK,OAAO,UAC1B,mBAAmB,iBAAiB,MAAM,IAAI,OAAO,KACxD;AAGF,QAAM,qBAAqB,CAACH,QAAYO;;AACtCF,sCAAAA;AAAAA,MAACG,SAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OACE,YACK,aAAQ;AAAA,UAAO,CAAC,MACdR,iCAAgC,SAAS,EAAE;AAAA,QAAe,MAD5D,YAEI,CAAA,KACJ,aAAQ,KAAK,CAAC,MAAM,EAAE,UAAUA,MAAK,MAArC,YAA0C;AAAA,QAEjD;AAAA,QACA;AAAA,QACA,gBAAgB,CAAC;;AAAQ,kBAAAS,MAAA,2BAAK,UAAL,OAAAA,MAAc;AAAA;AAAA,QACvC,sBAAsB,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE;AAAA,QAC9C,UAAUF;AAAAA,QACV;AAAA,QACA,YAAY,WAAW,aAAa;AAAA,QACpC,eAAc;AAAA,QACd,aACEN,2BAAAA,KAACS,SAAAA,KAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAA,GACrD,UAAA;AAAA,UAAAL,2BAAAA,IAACM,SAAAA,kBAAA,EAAiB,MAAM,GAAA,CAAI;AAAA,UAC5BN,2BAAAA,IAACO,SAAAA,cAAW,UAAA,cAAA,CAAW;AAAA,QAAA,GACzB;AAAA,QAEF,aAAa,CAAC,WACZP,2BAAAA;AAAAA,UAACQ,SAAAA;AAAAA,UAAA,iCACK,SADL;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA;AAKN,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,YAAMb,UAAQ,0CAAU,UAAV,YAAmB;AAChC,2CAAqCA;AAAAA,IACxC;AAAA,EACF;AAEA,SAAO,mBAAmB,OAAO,oBAAoB;AACvD;;"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
import { Control, RegisterOptions } from 'react-hook-form';
|
|
3
2
|
export interface SelectOption {
|
|
4
3
|
value: string | number;
|
|
5
4
|
label: string;
|
|
@@ -10,8 +9,10 @@ export interface SelectOption {
|
|
|
10
9
|
}
|
|
11
10
|
type RenderOptionItem = (item: SelectOption) => React.ReactNode;
|
|
12
11
|
type RenderChipLabel = (item: SelectOption) => React.ReactNode;
|
|
13
|
-
interface
|
|
12
|
+
interface AutocompleteProps<TValue extends SelectOption["value"] = SelectOption["value"]> {
|
|
14
13
|
label?: string;
|
|
14
|
+
value: TValue | TValue[];
|
|
15
|
+
onChange: (val: TValue | TValue[]) => void;
|
|
15
16
|
options?: SelectOption[];
|
|
16
17
|
placeholder?: string;
|
|
17
18
|
multiple?: boolean;
|
|
@@ -23,15 +24,5 @@ interface BaseAutocompleteProps {
|
|
|
23
24
|
renderOptionItem?: RenderOptionItem;
|
|
24
25
|
renderChipLabel?: RenderChipLabel;
|
|
25
26
|
}
|
|
26
|
-
|
|
27
|
-
name: string;
|
|
28
|
-
control: Control<any>;
|
|
29
|
-
validation?: RegisterOptions;
|
|
30
|
-
}
|
|
31
|
-
interface StandardAutocompleteProps extends BaseAutocompleteProps {
|
|
32
|
-
value: SelectOption | SelectOption[] | null;
|
|
33
|
-
onChange: (val: SelectOption | SelectOption[] | null) => void;
|
|
34
|
-
}
|
|
35
|
-
export type AutocompleteProps = RHFAutocompleteProps | StandardAutocompleteProps;
|
|
36
|
-
export declare function AutocompleteSelect(props: AutocompleteProps): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
export declare function AutocompleteSelect<TValue extends SelectOption["value"] = SelectOption["value"]>(props: AutocompleteProps<TValue>): import("react/jsx-runtime").JSX.Element;
|
|
37
28
|
export default AutocompleteSelect;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
export declare const SimpleAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete
|
|
2
|
-
export declare const WithPlaceholderAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete
|
|
3
|
-
export declare const MultipleAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete
|
|
4
|
-
export declare const MultipleWithLimitAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete
|
|
5
|
-
export declare const CustomRenderOptionAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete
|
|
6
|
-
export declare const CustomChipRenderAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete
|
|
7
|
-
export declare const LoadingAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete
|
|
8
|
-
export declare const EmptyOptionsAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete
|
|
9
|
-
export declare const ManyOptionsAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete
|
|
1
|
+
export declare const SimpleAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\nimport { Box, Typography } from '@mui/material';\n\nconst options = [\n { value: '10', label: '10' },\n { value: '25', label: '25' },\n];\n\nexport const SimpleExample = () => {\n const [value, setValue] = useState(options[1]);\n\n return (\n <Box sx={{ width: 250 }}>\n <Autocomplete\n label=\"Registros por p\u00E1gina\"\n options={options}\n value={value}\n onChange={(val) => {\n setValue(val as string);\n }}\n />\n <Typography sx={{ mt: 2 }}>\n Valor: {value}\n </Typography>\n </Box>\n );\n};\n";
|
|
2
|
+
export declare const WithPlaceholderAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\nimport { Box, Typography } from '@mui/material';\n\nexport const WithPlaceholderExample = () => {\n const [value, setValue] = useState(null);\n\n return (\n <Box sx={{ width: 300 }}>\n <Autocomplete\n label=\"Seleccione una opci\u00F3n\"\n options={[]}\n value={value}\n onChange={(val) => {\n setValue(val as string);\n }}\n placeholder=\"Ninguna opci\u00F3n seleccionada\"\n />\n <Typography sx={{ mt: 2 }}>\n {value || 'Ninguno'}\n </Typography>\n </Box>\n );\n};\n";
|
|
3
|
+
export declare const MultipleAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\nimport { Box } from '@mui/material';\n\nconst options = [\n { value: 'pending', label: 'Pendiente' },\n { value: 'approved', label: 'Aprobado' },\n];\n\nexport const MultipleExample = () => {\n const [value, setValue] = useState([]);\n\n return (\n <Box sx={{ width: 400 }}>\n <Autocomplete\n multiple\n options={options}\n value={value}\n onChange={(val) => {\n setValue(val as string[]);\n }}\n />\n </Box>\n );\n};\n";
|
|
4
|
+
export declare const MultipleWithLimitAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\n\nexport const MultipleWithLimitExample = () => {\n const [value, setValue] = useState([]);\n\n return (\n <Autocomplete\n multiple\n maxChipsToShow={2}\n options={[]}\n value={value}\n onChange={(val) => {\n setValue(val as string[]);\n }}\n />\n );\n};\n";
|
|
5
|
+
export declare const CustomRenderOptionAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\nimport { Avatar, Box } from '@mui/material';\n\nconst users = [\n { value: 'admin', label: 'Administrador', img: '...' },\n];\n\nexport const CustomRenderExample = () => {\n const [value, setValue] = useState([]);\n\n return (\n <Autocomplete\n multiple\n options={users}\n value={value}\n onChange={(val) => {\n setValue(val as string[]);\n }}\n renderOptionItem={(item) => (\n <Box sx={{ display: 'flex', gap: 1 }}>\n <Avatar src={item.img} />\n {item.label}\n </Box>\n )}\n />\n );\n};\n";
|
|
6
|
+
export declare const CustomChipRenderAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\nimport { Typography } from '@mui/material';\n\nexport const CustomChipExample = () => {\n const [value, setValue] = useState([]);\n\n return (\n <Autocomplete\n multiple\n options={[]}\n value={value}\n onChange={(val) => {\n setValue(val as string[]);\n }}\n renderChipLabel={(item) => (\n <Typography variant=\"caption\">\n {item.label.charAt(0)}\n </Typography>\n )}\n />\n );\n};\n";
|
|
7
|
+
export declare const LoadingAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\n\nexport const LoadingExample = () => {\n const [value, setValue] = useState(null);\n\n return (\n <Autocomplete\n loading\n options={[]}\n value={value}\n onChange={(val) => {\n\t\t\t\tsetValue(val as string);\n\t\t\t}}\n />\n );\n};\n";
|
|
8
|
+
export declare const EmptyOptionsAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\n\nexport const EmptyExample = () => {\n const [value, setValue] = useState(null);\n\n return (\n <Autocomplete\n options={[]}\n value={value}\n onChange={(val) => {\n\t\t\t\tsetValue(val as string);\n\t\t\t}}\n placeholder=\"No hay opciones\"\n />\n );\n};\n";
|
|
9
|
+
export declare const ManyOptionsAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\n\nconst options = Array.from({ length: 50 }, (_, i) => ({\n value: i,\n label: 'Opci\u00F3n ' + i,\n}));\n\nexport const ManyOptionsExample = () => {\n const [value, setValue] = useState(null);\n\n return (\n <Autocomplete\n options={options}\n value={value}\n onChange={(val) => {\n\t\t\t\tsetValue(val as string);\n\t\t\t}}\n />\n );\n};\n";
|
|
@@ -21,11 +21,12 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
|
21
21
|
import { createElement } from "react";
|
|
22
22
|
import { Autocomplete, TextField, Box, CircularProgress, Typography, Chip, Avatar } from "@mui/material";
|
|
23
23
|
import ClearIcon from "@mui/icons-material/Clear";
|
|
24
|
-
import { Controller } from "react-hook-form";
|
|
25
24
|
function AutocompleteSelect(props) {
|
|
26
25
|
const {
|
|
27
26
|
label,
|
|
28
27
|
options = [],
|
|
28
|
+
value,
|
|
29
|
+
onChange,
|
|
29
30
|
placeholder,
|
|
30
31
|
multiple = false,
|
|
31
32
|
disabled = false,
|
|
@@ -36,10 +37,9 @@ function AutocompleteSelect(props) {
|
|
|
36
37
|
renderChipLabel,
|
|
37
38
|
maxChipsToShow = 3
|
|
38
39
|
} = props;
|
|
39
|
-
const
|
|
40
|
-
|
|
41
|
-
const
|
|
42
|
-
const hidden = value.length - maxChipsToShow;
|
|
40
|
+
const renderTags = (value2, getTagProps) => {
|
|
41
|
+
const displayed = value2.slice(0, maxChipsToShow);
|
|
42
|
+
const hidden = value2.length - maxChipsToShow;
|
|
43
43
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
44
44
|
displayed.map((option, index) => /* @__PURE__ */ createElement(
|
|
45
45
|
Chip,
|
|
@@ -54,52 +54,54 @@ function AutocompleteSelect(props) {
|
|
|
54
54
|
] });
|
|
55
55
|
};
|
|
56
56
|
const renderOption = (propsLi, option) => /* @__PURE__ */ createElement("li", __spreadProps(__spreadValues({}, propsLi), { key: option.value }), renderOptionItem ? renderOptionItem(option) : option.label);
|
|
57
|
-
const renderAutocomplete = (
|
|
58
|
-
|
|
59
|
-
{
|
|
60
|
-
multiple,
|
|
61
|
-
options,
|
|
62
|
-
value,
|
|
63
|
-
disabled,
|
|
64
|
-
loading,
|
|
65
|
-
getOptionLabel: (opt) => {
|
|
66
|
-
var _a;
|
|
67
|
-
return (_a = opt == null ? void 0 : opt.label) != null ? _a : "";
|
|
68
|
-
},
|
|
69
|
-
isOptionEqualToValue: (a, b) => a.value === b.value,
|
|
70
|
-
onChange: (_, newValue) => onChange(newValue),
|
|
71
|
-
renderOption,
|
|
72
|
-
renderTags: multiple ? renderTags : void 0,
|
|
73
|
-
noOptionsText: "No hay opciones",
|
|
74
|
-
loadingText: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
|
|
75
|
-
/* @__PURE__ */ jsx(CircularProgress, { size: 20 }),
|
|
76
|
-
/* @__PURE__ */ jsx(Typography, { children: "Cargando..." })
|
|
77
|
-
] }),
|
|
78
|
-
renderInput: (params) => /* @__PURE__ */ jsx(
|
|
79
|
-
TextField,
|
|
80
|
-
__spreadProps(__spreadValues({}, params), {
|
|
81
|
-
label,
|
|
82
|
-
placeholder,
|
|
83
|
-
error,
|
|
84
|
-
helperText
|
|
85
|
-
})
|
|
86
|
-
)
|
|
87
|
-
}
|
|
88
|
-
);
|
|
89
|
-
if (isRHFMode) {
|
|
90
|
-
const rhfProps = props;
|
|
57
|
+
const renderAutocomplete = (value2, onChange2) => {
|
|
58
|
+
var _a, _b;
|
|
91
59
|
return /* @__PURE__ */ jsx(
|
|
92
|
-
|
|
60
|
+
Autocomplete,
|
|
93
61
|
{
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
62
|
+
multiple,
|
|
63
|
+
options,
|
|
64
|
+
value: multiple ? (_a = options.filter(
|
|
65
|
+
(o) => value2 == null ? void 0 : value2.includes(o.value)
|
|
66
|
+
)) != null ? _a : [] : (_b = options.find((o) => o.value === value2)) != null ? _b : null,
|
|
67
|
+
disabled,
|
|
68
|
+
loading,
|
|
69
|
+
getOptionLabel: (opt) => {
|
|
70
|
+
var _a2;
|
|
71
|
+
return (_a2 = opt == null ? void 0 : opt.label) != null ? _a2 : "";
|
|
72
|
+
},
|
|
73
|
+
isOptionEqualToValue: (a, b) => a.value === b.value,
|
|
74
|
+
onChange: onChange2,
|
|
75
|
+
renderOption,
|
|
76
|
+
renderTags: multiple ? renderTags : void 0,
|
|
77
|
+
noOptionsText: "No hay opciones",
|
|
78
|
+
loadingText: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
|
|
79
|
+
/* @__PURE__ */ jsx(CircularProgress, { size: 20 }),
|
|
80
|
+
/* @__PURE__ */ jsx(Typography, { children: "Cargando..." })
|
|
81
|
+
] }),
|
|
82
|
+
renderInput: (params) => /* @__PURE__ */ jsx(
|
|
83
|
+
TextField,
|
|
84
|
+
__spreadProps(__spreadValues({}, params), {
|
|
85
|
+
label,
|
|
86
|
+
placeholder,
|
|
87
|
+
error,
|
|
88
|
+
helperText
|
|
89
|
+
})
|
|
90
|
+
)
|
|
98
91
|
}
|
|
99
92
|
);
|
|
100
|
-
}
|
|
101
|
-
const
|
|
102
|
-
|
|
93
|
+
};
|
|
94
|
+
const handleChangeInternal = (event, newValue) => {
|
|
95
|
+
var _a;
|
|
96
|
+
if (multiple) {
|
|
97
|
+
const values = (newValue != null ? newValue : []).map((opt) => opt.value);
|
|
98
|
+
onChange == null ? void 0 : onChange(values);
|
|
99
|
+
} else {
|
|
100
|
+
const value2 = (_a = newValue == null ? void 0 : newValue.value) != null ? _a : "";
|
|
101
|
+
onChange == null ? void 0 : onChange(value2);
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
return renderAutocomplete(value, handleChangeInternal);
|
|
103
105
|
}
|
|
104
106
|
export {
|
|
105
107
|
AutocompleteSelect as Autocomplete
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Autocomplete.js","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import React
|
|
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 <Autocomplete\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) => opt?.label ?? \"\"}\n isOptionEqualToValue={(a, b) => 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 );\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":";;;;;;;;;;;;;;;;;;;;;;;AA0CO,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;AAEJ,QAAM,aAAa,CAACA,QAAuB,gBAAqB;AAC9D,UAAM,YAAYA,OAAM,MAAM,GAAG,cAAc;AAC/C,UAAM,SAASA,OAAM,SAAS;AAE9B,WACE,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA,UAAU,IAAI,CAAC,QAAQ,UACtB;AAAA,QAAC;AAAA,QAAA,iCACK,YAAY,EAAE,OAAO,IAD1B;AAAA,UAEC,KAAK,OAAO;AAAA,UACZ,OAAO,kBAAkB,gBAAgB,MAAM,IAAI,OAAO;AAAA,UAC1D,QAAQ,OAAO,MAAM,oBAAC,UAAO,KAAK,OAAO,KAAK,IAAK;AAAA,UACnD,gCAAa,WAAA,CAAA,CAAU;AAAA,QAAA;AAAA,MAAA,CAE1B;AAAA,MAEA,SAAS,KAAK,oBAAC,QAAK,OAAO,IAAI,MAAM,OAAA,CAAQ;AAAA,IAAA,GAChD;AAAA,EAEJ;AAEA,QAAM,eAAe,CAAC,SAAc,WAClC,8BAAC,uCAAO,YAAS,KAAK,OAAO,UAC1B,mBAAmB,iBAAiB,MAAM,IAAI,OAAO,KACxD;AAGF,QAAM,qBAAqB,CAACA,QAAYC;;AACtC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OACE,YACK,aAAQ;AAAA,UAAO,CAAC,MACdD,iCAAgC,SAAS,EAAE;AAAA,QAAe,MAD5D,YAEI,CAAA,KACJ,aAAQ,KAAK,CAAC,MAAM,EAAE,UAAUA,MAAK,MAArC,YAA0C;AAAA,QAEjD;AAAA,QACA;AAAA,QACA,gBAAgB,CAAC;;AAAQ,kBAAAE,MAAA,2BAAK,UAAL,OAAAA,MAAc;AAAA;AAAA,QACvC,sBAAsB,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE;AAAA,QAC9C,UAAUD;AAAAA,QACV;AAAA,QACA,YAAY,WAAW,aAAa;AAAA,QACpC,eAAc;AAAA,QACd,aACE,qBAAC,KAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAA,GACrD,UAAA;AAAA,UAAA,oBAAC,kBAAA,EAAiB,MAAM,GAAA,CAAI;AAAA,UAC5B,oBAAC,cAAW,UAAA,cAAA,CAAW;AAAA,QAAA,GACzB;AAAA,QAEF,aAAa,CAAC,WACZ;AAAA,UAAC;AAAA,UAAA,iCACK,SADL;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA;AAKN,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;"}
|