@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
248 lines • 8.91 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["onClick"];
/* eslint-disable no-shadow */
/* eslint-disable react/no-array-index-key */
import React from 'react';
import { Box, Chip, MenuItem, Paper, Typography, Grid, darken, useTheme, alpha } from '@mui/material';
import { Icon } from '@iconify/react';
import { groupByObject } from './utils';
import { useOnClickOutside } from '../../hooks';
import { ICONS_NAME } from '../../helpers';
import { TextFieldV5LabelOut } from '../TextFieldV5LabelOut';
import { IconButtonComponent } from '../IconButtonComponent';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var MultiFilter = function MultiFilter(props) {
var _InputProps$WrapperPr, _InputProps$InputProp;
var _ref = props || {},
_ref$options = _ref.options,
options = _ref$options === void 0 ? [] : _ref$options,
_ref$selected = _ref.selected,
selected = _ref$selected === void 0 ? [] : _ref$selected,
_ref$InputProps = _ref.InputProps,
_InputProps = _ref$InputProps === void 0 ? {} : _ref$InputProps,
_ref$PaperProps = _ref.PaperProps,
_PaperProps = _ref$PaperProps === void 0 ? {} : _ref$PaperProps,
onChipDelete = _ref.onChipDelete,
onInputChange = _ref.onInputChange,
onSelectedOption = _ref.onSelectedOption,
groupBy = _ref.groupBy,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
_ref$placeholder = _ref.placeholder,
placeholder = _ref$placeholder === void 0 ? 'Search' : _ref$placeholder,
backgroundColor = _ref.backgroundColor;
var onClick = _InputProps.onClick,
InputProps = _objectWithoutProperties(_InputProps, _excluded);
var _React$useState = React.useState(''),
_React$useState2 = _slicedToArray(_React$useState, 2),
inputValue = _React$useState2[0],
setInputValue = _React$useState2[1];
var _React$useState3 = React.useState([]),
_React$useState4 = _slicedToArray(_React$useState3, 2),
innerOptions = _React$useState4[0],
setInnerOptions = _React$useState4[1];
var _React$useState5 = React.useState([]),
_React$useState6 = _slicedToArray(_React$useState5, 2),
innerSelected = _React$useState6[0],
setInnerSelected = _React$useState6[1];
var _React$useState7 = React.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2),
showOptions = _React$useState8[0],
setShowOptions = _React$useState8[1];
var groupedOptions = groupByObject(innerOptions, groupBy);
var rootRef = React.useRef(null);
var boxRef = React.useRef(null);
var handleOnClick = function handleOnClick(e) {
if (!showOptions) {
setShowOptions(true);
}
onClick == null || onClick(e);
};
var handleOnChange = function handleOnChange(e) {
var value = e.target.value;
setInputValue(value);
onInputChange == null || onInputChange(value);
};
var handleOnSelectOption = function handleOnSelectOption(option) {
setInputValue('');
onInputChange == null || onInputChange('');
setInnerOptions(innerOptions.filter(function (o) {
return o.id !== option.id;
}));
var newSelected = [].concat(_toConsumableArray(innerSelected), [option]);
setInnerSelected(function (prev) {
return [].concat(_toConsumableArray(prev), [option]);
});
onSelectedOption(newSelected);
};
var handleDelete = function handleDelete(option) {
var newSelected = innerSelected.filter(function (item) {
return item.id !== option.id;
});
setInnerSelected(newSelected);
setInnerOptions(function (prev) {
return [].concat(_toConsumableArray(prev), [option]);
});
onSelectedOption(newSelected);
onChipDelete == null || onChipDelete(option);
};
React.useEffect(function () {
if (showOptions && rootRef.current && boxRef.current) {
var w = rootRef.current.clientWidth;
boxRef.current.style.width = "".concat(w, "px");
}
}, [showOptions]);
React.useEffect(function () {
if (options && selected) {
var newOptions = options.filter(function (opt) {
var found = selected.find(function (sel) {
return sel.id === opt.id;
});
return !found;
});
setInnerOptions(newOptions);
setInnerSelected(selected);
}
if (options && !selected) {
setInnerOptions(options);
}
}, [selected, options]);
useOnClickOutside(boxRef, function () {
return showOptions && setShowOptions(false);
}, 'mouseup');
var theme = useTheme();
return /*#__PURE__*/_jsxs(Box, {
sx: {
width: '100%',
position: 'relative'
},
children: [/*#__PURE__*/_jsx(TextFieldV5LabelOut, Object.assign({
type: "text",
variant: variant,
disabledHoverVariantOutAndFlo: true,
backgroundColor: backgroundColor || theme.palette.mode === 'dark' ? darken(theme.palette.background.paper, 0.05) : alpha(theme.palette.background.paper, 0.5),
size: "small"
}, InputProps, {
placeholder: placeholder,
WrapperProps: Object.assign({
onClick: handleOnClick,
ref: rootRef
}, InputProps.WrapperProps, {
sx: Object.assign({
py: 0.25,
height: '100%',
minHeight: 'unset'
}, (_InputProps$WrapperPr = InputProps.WrapperProps) == null ? void 0 : _InputProps$WrapperPr.sx)
}),
value: inputValue,
onChange: handleOnChange,
InputProps: {
startAdornment: (InputProps == null || (_InputProps$InputProp = InputProps.InputProps) == null ? void 0 : _InputProps$InputProp.startAdornment) || /*#__PURE__*/_jsx(IconButtonComponent, {
iconProps: {
sx: {
backgroundColor: 'transparent',
color: theme.palette.text.secondary,
pl: 0,
'&:hover': {
backgroundColor: 'transparent'
}
},
size: 'small'
},
children: /*#__PURE__*/_jsx(Icon, {
icon: ICONS_NAME.search,
color: "inherit"
})
})
}
})), showOptions && /*#__PURE__*/_jsxs(Paper, Object.assign({
ref: boxRef,
elevation: 2,
sx: {
p: 0,
listStyle: 'none',
py: '0.5rem',
position: 'absolute',
maxHeight: 350,
overflow: 'auto',
zIndex: 1500,
'& .MuiAutocomplete-listbox .MuiAutocomplete-option': {
p: '10px'
},
backgroundColor: theme.palette.background["default"],
padding: '10px',
borderRadius: '15px',
border: "1px solid ".concat(theme.palette.background.paper),
boxShadow: theme.shadows[2]
// backgroundImage: 'unset',
}
}, _PaperProps, {
children: [innerOptions.length >= 0 && innerSelected.length > 0 && /*#__PURE__*/_jsxs(Box, {
component: "li",
sx: {
my: 1
},
children: [/*#__PURE__*/_jsx(Typography, {
variant: "body1",
color: "primary.main",
sx: {
px: 2,
pb: 1
},
children: "Seleccionados"
}), /*#__PURE__*/_jsx(Grid, {
container: true,
columnGap: 1,
sx: {
px: 1
},
children: innerSelected.map(function (selected, i) {
return /*#__PURE__*/_jsx(Chip, {
label: selected.name,
variant: "outlined",
color: "primary",
onDelete: function onDelete() {
return handleDelete(selected);
},
sx: {
color: 'text.primary'
}
}, i);
})
})]
}), innerOptions.length >= 0 && Object.keys(groupedOptions).map(function (key) {
return /*#__PURE__*/_jsxs(Box, {
component: "li",
children: [/*#__PURE__*/_jsx(Typography, {
variant: "body1",
color: "primary.main",
sx: {
px: 2,
py: 1,
backgroundColor: 'background.paper'
},
children: key
}), groupedOptions[key].map(function (option) {
return /*#__PURE__*/_jsx(MenuItem, {
component: "div",
onClick: function onClick() {
return handleOnSelectOption(option);
},
children: option.name
}, option.id);
})]
}, key);
}), innerOptions.length === 0 && /*#__PURE__*/_jsx(Typography, {
variant: "body1",
sx: {
px: 2,
py: 1
},
children: "No hay opciones disponibles"
})]
}))]
});
};
export default MultiFilter;