@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
267 lines (266 loc) • 12.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof3 = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
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 = _interopRequireWildcard(require("react"));
var _material = require("@mui/material");
var _react2 = require("@iconify/react");
var _base = require("../../base");
var _helpers = require("../../helpers");
var _jsxRuntime = require("react/jsx-runtime");
var _Icon, _Icon2;
var _excluded = ["variant", "label", "textFieldProps", "onChange", "options", "value", "variantRenderTag", "size", "backgroundColor", "disabledHoverVariantOutAndFlo", "boxProps", "error", "errorMessage", "wrapperInputProps", "helperNode", "onDeleteOption", "errorVariant"];
/* eslint-disable react/no-array-index-key */
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var PaperComponent = function PaperComponent(paperProps) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, Object.assign({}, paperProps, {
sx: {
boxShadow: '0px 4px 24px rgba(0, 0, 0, 0.05)',
paddingTop: '10px'
}
}));
};
var PopperComponent = function PopperComponent(popperProps) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Popper, Object.assign({}, popperProps, {
sx: Object.assign({}, popperProps == null ? void 0 : popperProps.sx, {
'& .MuiAutocomplete-listbox': {
padding: 0,
'& > li': {
margin: 0
}
},
animation: 'top 2s ease-in-out'
})
}));
};
var AutocompleteCheckboxMultiple = function AutocompleteCheckboxMultiple(_ref) {
var _ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'divider' : _ref$variant,
label = _ref.label,
textFieldProps = _ref.textFieldProps,
_onChange = _ref.onChange,
options = _ref.options,
valueFromParent = _ref.value,
_ref$variantRenderTag = _ref.variantRenderTag,
variantRenderTag = _ref$variantRenderTag === void 0 ? 'total' : _ref$variantRenderTag,
size = _ref.size,
backgroundColor = _ref.backgroundColor,
disabledHoverVariantOutAndFlo = _ref.disabledHoverVariantOutAndFlo,
boxProps = _ref.boxProps,
error = _ref.error,
errorMessage = _ref.errorMessage,
wrapperInputProps = _ref.wrapperInputProps,
helperNode = _ref.helperNode,
onDeleteOption = _ref.onDeleteOption,
errorVariant = _ref.errorVariant,
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
var _React$useState = _react["default"].useState(true),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
showPlaceholder = _React$useState2[0],
_setShowPlaceholder = _React$useState2[1];
var _React$useState3 = _react["default"].useState([]),
_React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
selectedValues = _React$useState4[0],
setSelectedValues = _React$useState4[1];
var _React$useState5 = _react["default"].useState([]),
_React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
data = _React$useState6[0],
setData = _React$useState6[1];
var _React$useState7 = _react["default"].useState(false),
_React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
onFocusInput = _React$useState8[0],
setOnFocusInput = _React$useState8[1];
_react["default"].useEffect(function () {
var filtered = options.filter(function (el, i, a) {
return a.findIndex(function (t) {
return (t == null ? void 0 : t.id) === (el == null ? void 0 : el.id) ? t : null;
}) === i;
});
var newFilter = filtered.filter(function (el) {
return selectedValues.indexOf(el) === -1;
});
setData([].concat((0, _toConsumableArray2["default"])(selectedValues), (0, _toConsumableArray2["default"])(newFilter)));
}, [options, selectedValues]);
_react["default"].useEffect(function () {
var filtered = options.filter(function (el, i, a) {
return a.findIndex(function (t) {
return (t == null ? void 0 : t.id) === (el == null ? void 0 : el.id) ? t : null;
}) === i;
});
if (valueFromParent) {
setSelectedValues(valueFromParent);
var filteredOptions = filtered.filter(function (el) {
return valueFromParent.filter(function (dl) {
if ((0, _typeof2["default"])(dl) === 'object' && (0, _typeof2["default"])(el) === 'object') {
return dl.id === el.id;
}
return dl === el;
}).length === 0;
});
setData([].concat((0, _toConsumableArray2["default"])(selectedValues), (0, _toConsumableArray2["default"])(filteredOptions)));
}
}, [options, selectedValues]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, Object.assign({}, boxProps, {
children: [variant === 'labelOut' && label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.InputLabel, {
variant: variant,
htmlFor: props.id,
focused: onFocusInput,
children: label
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_base.WrapperInputVariant, Object.assign({
error: error,
variant: variant,
size: size,
backgroundColor: backgroundColor,
disabledHoverVariantOutAndFlo: disabledHoverVariantOutAndFlo
}, wrapperInputProps, {
children: [variant !== 'labelOut' && label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.InputLabel, {
variant: variant,
htmlFor: props.id,
focused: onFocusInput,
children: label
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Autocomplete, Object.assign({
multiple: true,
freeSolo: true,
options: data
}, props, {
getOptionLabel: function getOptionLabel(option) {
if ((0, _typeof2["default"])(option) === 'object' && option !== null) {
return option.id !== '' ? option.name : '';
}
return option;
},
isOptionEqualToValue: function isOptionEqualToValue(option, value) {
return (option == null ? void 0 : option.id) === (value == null ? void 0 : value.id);
},
fullWidth: true,
PopperComponent: PopperComponent,
PaperComponent: PaperComponent,
renderOption: function renderOption(propsRender, option, _ref2) {
var selected = _ref2.selected;
return /*#__PURE__*/(0, _react.createElement)("li", Object.assign({}, propsRender, {
key: option == null ? void 0 : option.id
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
icon: _Icon || (_Icon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
icon: "ic:outline-check-box-outline-blank",
width: "20",
height: "20"
})),
checkedIcon: _Icon2 || (_Icon2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
icon: "ic:round-check-box",
width: "20",
height: "20"
})),
sx: {
marginRight: 1.5,
padding: 0
},
checked: selected
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
component: "span",
children: option.name
})]
}));
},
renderTags: function renderTags(tagValue, getTagProps) {
if (variantRenderTag === 'chipText') {
return tagValue.map(function (item, i) {
return (
/*#__PURE__*/
// eslint-disable-next-line react/jsx-key
(0, _jsxRuntime.jsx)(_material.Chip, Object.assign({
label: item == null ? void 0 : item.name
}, getTagProps({
index: i
}), {
onDelete: function onDelete(e) {
e.stopPropagation();
getTagProps({
index: i
}).onDelete(e);
onDeleteOption == null || onDeleteOption(e, item);
}
}))
);
});
}
if (variantRenderTag === 'chipAvatar') {
return tagValue.map(function (item, i) {
if (typeof item === 'string') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.RenderTagChipAvatar, {
label: item,
avatarImg: _helpers.consts.backgroundImageRandom
}, i);
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.RenderTagChipAvatar, {
label: item.name,
avatarImg: _helpers.consts.backgroundImageRandom
}, i);
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.RenderTextTotal, {
total: tagValue == null ? void 0 : tagValue.length,
setShowPlaceholder: function setShowPlaceholder(v) {
return _setShowPlaceholder(v);
}
});
},
renderInput: function renderInput(params) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.BaseInputVariant, Object.assign({}, params, textFieldProps, {
variant: variant,
onFocus: function onFocus(e) {
var _textFieldProps$onFoc;
setOnFocusInput(true);
textFieldProps == null || (_textFieldProps$onFoc = textFieldProps.onFocus) == null || _textFieldProps$onFoc.call(textFieldProps, e);
},
onBlur: function onBlur(e) {
var _textFieldProps$onBlu;
setOnFocusInput(false);
textFieldProps == null || (_textFieldProps$onBlu = textFieldProps.onBlur) == null || _textFieldProps$onBlu.call(textFieldProps, e);
},
placeholder: showPlaceholder ? (textFieldProps == null ? void 0 : textFieldProps.placeholder) || 'Select option' : ''
}));
},
onChange: function onChange(e, value) {
if (typeof value === 'string') return;
if (Array.isArray(value) && typeof value[0] === 'string') return;
if ((0, _typeof2["default"])(value) === 'object') {
if (_onChange && !!value) _onChange(e, value);
}
if (Array.isArray(value) && (0, _typeof2["default"])(value[0]) === 'object') {
if (_onChange && !!value) _onChange(e, value);
}
},
value: valueFromParent,
componentsProps: {
paper: {
sx: function sx(theme) {
return {
'& .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]
};
}
}
}
}))]
})), helperNode, error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.ErrorAlert, {
variant: errorVariant,
children: errorMessage
})]
}));
};
var _default = exports["default"] = AutocompleteCheckboxMultiple;