@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
120 lines (119 loc) • 6.12 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
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 = _interopRequireWildcard(require("react"));
var _base = require("../../base");
var _InputBox = require("../InputBox");
var _styled = require("./styled");
var _Tooltip = require("../Tooltip");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["options", "defaultValue", "label", "variant", "slots", "borderColor", "isTooltip", "multiple", "onChange", "value"];
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" != _typeof(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 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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
var _ref2 = slots || {},
slabel = _ref2.label,
sroot = _ref2.root,
swrapperBody = _ref2.wrapperBody;
var _React$useState = _react["default"].useState(defaultValue != null ? defaultValue : null),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
state = _React$useState2[0],
setState = _React$useState2[1];
var handleChange = (0, _react.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((0, _toConsumableArray2["default"])((_ref3 = state) != null ? _ref3 : []), (0, _toConsumableArray2["default"])(newValues)));
onChange == null || onChange([].concat((0, _toConsumableArray2["default"])((_ref4 = state) != null ? _ref4 : []), (0, _toConsumableArray2["default"])(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 = (0, _react.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["default"].useEffect(function () {
setState(value);
}, [value]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.Root, Object.assign({}, sroot, {
children: [variant === 'labelOut' && label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.InputLabel, Object.assign({
variant: variant
}, slabel, {
children: label
})), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_base.WrapperInputVariant, {
variant: variant || 'divider',
size: "auto",
backgroundColor: props.backgroundColor,
children: [variant !== 'labelOut' && label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.InputLabel, Object.assign({
variant: variant || 'divider'
}, slabel, {
children: label
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.WrapperBody, Object.assign({}, swrapperBody, {
children: options == null ? void 0 : options.map(function (option) {
return isTooltip ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
title: option.contentTooltip || '',
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputBox.InputBox, {
active: isActive(option),
onClick: function onClick() {
return handleChange([option]);
},
size: props.sizeElement,
borderColor: borderColor,
disabled: option.isDisabled,
children: option.children
})
}, option.id) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputBox.InputBox, {
active: isActive(option),
onClick: function onClick() {
return handleChange([option]);
},
size: props.sizeElement,
borderColor: borderColor,
disabled: option.isDisabled,
children: option.children
}, option.id);
})
}))]
})]
}));
};
var _default = exports["default"] = InputBoxGroup;