@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
255 lines (254 loc) • 9.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _material = require("@mui/material");
var _react2 = require("@iconify/react");
var _utils = require("./utils");
var _hooks = require("../../hooks");
var _helpers = require("../../helpers");
var _TextFieldV5LabelOut = require("../TextFieldV5LabelOut");
var _IconButtonComponent = require("../IconButtonComponent");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["onClick"];
/* eslint-disable no-shadow */
/* eslint-disable react/no-array-index-key */
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 = (0, _objectWithoutProperties2["default"])(_InputProps, _excluded);
var _React$useState = _react["default"].useState(''),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
inputValue = _React$useState2[0],
setInputValue = _React$useState2[1];
var _React$useState3 = _react["default"].useState([]),
_React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
innerOptions = _React$useState4[0],
setInnerOptions = _React$useState4[1];
var _React$useState5 = _react["default"].useState([]),
_React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
innerSelected = _React$useState6[0],
setInnerSelected = _React$useState6[1];
var _React$useState7 = _react["default"].useState(false),
_React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
showOptions = _React$useState8[0],
setShowOptions = _React$useState8[1];
var groupedOptions = (0, _utils.groupByObject)(innerOptions, groupBy);
var rootRef = _react["default"].useRef(null);
var boxRef = _react["default"].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((0, _toConsumableArray2["default"])(innerSelected), [option]);
setInnerSelected(function (prev) {
return [].concat((0, _toConsumableArray2["default"])(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((0, _toConsumableArray2["default"])(prev), [option]);
});
onSelectedOption(newSelected);
onChipDelete == null || onChipDelete(option);
};
_react["default"].useEffect(function () {
if (showOptions && rootRef.current && boxRef.current) {
var w = rootRef.current.clientWidth;
boxRef.current.style.width = "".concat(w, "px");
}
}, [showOptions]);
_react["default"].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]);
(0, _hooks.useOnClickOutside)(boxRef, function () {
return showOptions && setShowOptions(false);
}, 'mouseup');
var theme = (0, _material.useTheme)();
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
sx: {
width: '100%',
position: 'relative'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextFieldV5LabelOut.TextFieldV5LabelOut, Object.assign({
type: "text",
variant: variant,
disabledHoverVariantOutAndFlo: true,
backgroundColor: backgroundColor || theme.palette.mode === 'dark' ? (0, _material.darken)(theme.palette.background.paper, 0.05) : (0, _material.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__*/(0, _jsxRuntime.jsx)(_IconButtonComponent.IconButtonComponent, {
iconProps: {
sx: {
backgroundColor: 'transparent',
color: theme.palette.text.secondary,
pl: 0,
'&:hover': {
backgroundColor: 'transparent'
}
},
size: 'small'
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
icon: _helpers.ICONS_NAME.search,
color: "inherit"
})
})
}
})), showOptions && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.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__*/(0, _jsxRuntime.jsxs)(_material.Box, {
component: "li",
sx: {
my: 1
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
variant: "body1",
color: "primary.main",
sx: {
px: 2,
pb: 1
},
children: "Seleccionados"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
container: true,
columnGap: 1,
sx: {
px: 1
},
children: innerSelected.map(function (selected, i) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.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__*/(0, _jsxRuntime.jsxs)(_material.Box, {
component: "li",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
variant: "body1",
color: "primary.main",
sx: {
px: 2,
py: 1,
backgroundColor: 'background.paper'
},
children: key
}), groupedOptions[key].map(function (option) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
component: "div",
onClick: function onClick() {
return handleOnSelectOption(option);
},
children: option.name
}, option.id);
})]
}, key);
}), innerOptions.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
variant: "body1",
sx: {
px: 2,
py: 1
},
children: "No hay opciones disponibles"
})]
}))]
});
};
var _default = exports["default"] = MultiFilter;