@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
111 lines • 4.7 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
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 = ["options", "defaultValue", "label", "variant", "slots", "borderColor", "isTooltip", "multiple", "onChange", "value"];
import React, { useCallback } from 'react';
import { InputLabel, WrapperInputVariant } from '../../base';
import { InputBox } from '../InputBox';
import { Root, WrapperBody } from './styled';
import { Tooltip } from '../Tooltip';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var InputBoxGroup = function InputBoxGroup(_ref) {
var options = _ref.options,
defaultValue = _ref.defaultValue,
label = _ref.label,
variant = _ref.variant,
slots = _ref.slots,
borderColor = _ref.borderColor,
isTooltip = _ref.isTooltip,
multiple = _ref.multiple,
onChange = _ref.onChange,
value = _ref.value,
props = _objectWithoutProperties(_ref, _excluded);
var _ref2 = slots || {},
slabel = _ref2.label,
sroot = _ref2.root,
swrapperBody = _ref2.wrapperBody;
var _React$useState = React.useState(defaultValue != null ? defaultValue : null),
_React$useState2 = _slicedToArray(_React$useState, 2),
state = _React$useState2[0],
setState = _React$useState2[1];
var handleChange = useCallback(function (newValues) {
if (multiple) {
var exists = state == null ? void 0 : state.some(function (el) {
var _newValues$;
return (el == null ? void 0 : el.id) === ((_newValues$ = newValues[0]) == null ? void 0 : _newValues$.id);
});
if (!exists) {
var _ref3, _ref4;
setState([].concat(_toConsumableArray((_ref3 = state) != null ? _ref3 : []), _toConsumableArray(newValues)));
onChange == null || onChange([].concat(_toConsumableArray((_ref4 = state) != null ? _ref4 : []), _toConsumableArray(newValues)));
}
if (exists) {
var _ref5, _ref6;
var newState = (_ref5 = (_ref6 = state) != null ? _ref6 : []) == null ? void 0 : _ref5.filter(function (el) {
var _newValues$2;
return (el == null ? void 0 : el.id) !== ((_newValues$2 = newValues[0]) == null ? void 0 : _newValues$2.id);
});
setState(newState);
onChange == null || onChange(newState);
}
}
if (!multiple) {
setState(newValues == null ? void 0 : newValues[0]);
onChange == null || onChange(newValues == null ? void 0 : newValues[0]);
}
}, [multiple, state]);
var isActive = useCallback(function (_value) {
if (multiple) {
return state == null ? void 0 : state.some(function (el) {
return (el == null ? void 0 : el.id) === (_value == null ? void 0 : _value.id);
});
}
return (state == null ? void 0 : state.id) === (_value == null ? void 0 : _value.id);
}, [multiple, state]);
React.useEffect(function () {
setState(value);
}, [value]);
return /*#__PURE__*/_jsxs(Root, _extends({}, sroot, {
children: [variant === 'labelOut' && label && /*#__PURE__*/_jsx(InputLabel, _extends({
variant: variant
}, slabel, {
children: label
})), /*#__PURE__*/_jsxs(WrapperInputVariant, {
variant: variant || 'divider',
size: "auto",
backgroundColor: props.backgroundColor,
children: [variant !== 'labelOut' && label && /*#__PURE__*/_jsx(InputLabel, _extends({
variant: variant || 'divider'
}, slabel, {
children: label
})), /*#__PURE__*/_jsx(WrapperBody, _extends({}, swrapperBody, {
children: options == null ? void 0 : options.map(function (option) {
return isTooltip ? /*#__PURE__*/_jsx(Tooltip, {
title: option.contentTooltip || '',
children: /*#__PURE__*/_jsx(InputBox, {
active: isActive(option),
onClick: function onClick() {
return handleChange([option]);
},
size: props.sizeElement,
borderColor: borderColor,
disabled: option.isDisabled,
children: option.children
})
}, option.id) : /*#__PURE__*/_jsx(InputBox, {
active: isActive(option),
onClick: function onClick() {
return handleChange([option]);
},
size: props.sizeElement,
borderColor: borderColor,
disabled: option.isDisabled,
children: option.children
}, option.id);
})
}))]
})]
}));
};
export default InputBoxGroup;