@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
237 lines (236 loc) • 9.2 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _parse = _interopRequireDefault(require("core-js-pure/stable/json/parse.js"));
var _push = _interopRequireDefault(require("core-js-pure/stable/instance/push.js"));
var _withComponentMarkers = _interopRequireDefault(require("../../shared/helpers/withComponentMarkers.js"));
var _react = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _useId = _interopRequireDefault(require("../../shared/helpers/useId.js"));
var _componentHelper = require("../../shared/component-helper.js");
var _SpacingUtils = require("../space/SpacingUtils.js");
var _AlignmentHelper2 = _interopRequireDefault(require("../../shared/AlignmentHelper.js"));
var _FormLabel = _interopRequireDefault(require("../FormLabel.js"));
var _FormStatus = _interopRequireDefault(require("../FormStatus.js"));
var _Flex = _interopRequireDefault(require("../Flex.js"));
var _Space = _interopRequireDefault(require("../Space.js"));
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _Suffix = _interopRequireDefault(require("../../shared/helpers/Suffix.js"));
var _ToggleButtonGroupContext = _interopRequireDefault(require("./ToggleButtonGroupContext.js"));
var _filterValidProps = require("../../shared/helpers/filterValidProps.js");
var _jsxRuntime = require("react/jsx-runtime");
var _AlignmentHelper;
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const toggleButtonGroupDefaultProps = {
label: null,
labelDirection: 'vertical',
labelSrOnly: null,
title: null,
multiselect: null,
variant: null,
leftComponent: null,
disabled: null,
skeleton: null,
id: null,
name: null,
size: null,
status: null,
statusState: 'error',
statusProps: null,
statusNoAnimation: null,
globalStatus: null,
suffix: null,
vertical: null,
layoutDirection: 'row',
value: undefined,
values: undefined,
className: null,
children: null,
onChange: null
};
function parseValues(props) {
if (typeof props.values === 'string' && props.values[0] === '[') {
return (0, _parse.default)(props.values);
}
return props.values;
}
function ToggleButtonGroup(ownProps) {
const context = (0, _react.useContext)(_Context.default);
const id = (0, _useId.default)(ownProps.id);
const _name = (0, _useId.default)(ownProps.name);
const [value, setValue] = (0, _react.useState)(ownProps.value);
const [values, setValues] = (0, _react.useState)(() => ownProps.values ? parseValues(ownProps) : undefined);
const [prevPropsValue, setPrevPropsValue] = (0, _react.useState)(ownProps.value);
const [prevPropsValues, setPrevPropsValues] = (0, _react.useState)(ownProps.values);
const prevContextRef = (0, _react.useRef)(undefined);
const ownPropsRef = (0, _react.useRef)(ownProps);
ownPropsRef.current = ownProps;
const valuesRef = (0, _react.useRef)(values);
valuesRef.current = values;
if (typeof ownProps.value !== 'undefined' && ownProps.value !== prevPropsValue) {
setPrevPropsValue(ownProps.value);
setValue(ownProps.value);
}
if (typeof ownProps.values !== 'undefined' && ownProps.values !== prevPropsValues) {
setPrevPropsValues(ownProps.values);
setValues(parseValues(ownProps));
}
const onChangeHandler = (0, _react.useCallback)(({
value: newValue,
event
}) => {
const currentValues = [...(valuesRef.current || [])];
if (ownPropsRef.current.multiselect) {
if (!currentValues.includes(newValue)) {
(0, _push.default)(currentValues).call(currentValues, newValue);
} else {
currentValues.splice(currentValues.indexOf(newValue), 1);
}
}
setValue(newValue);
setValues([...currentValues]);
(0, _componentHelper.dispatchCustomElementEvent)({
props: ownPropsRef.current
}, 'onChange', {
value: newValue,
values: currentValues,
event
});
}, []);
const resolvedProps = {
...toggleButtonGroupDefaultProps,
...(0, _componentHelper.removeUndefinedProps)({
...ownProps
})
};
const props = (0, _componentHelper.extendExistingPropsWithContext)(resolvedProps, toggleButtonGroupDefaultProps, context.getTranslation(ownProps).ToggleButton, (0, _filterValidProps.pickFormElementProps)(context === null || context === void 0 ? void 0 : context.formElement), context.ToggleButtonGroup);
const {
status,
statusState,
statusProps,
statusNoAnimation,
globalStatus,
suffix,
labelDirection,
labelSrOnly,
vertical,
layoutDirection,
label,
variant,
leftComponent,
size,
disabled,
skeleton,
className,
multiselect,
id: _id,
name: _propName,
value: _value,
values: _values,
children,
onChange,
...rest
} = props;
const showStatus = (0, _componentHelper.getStatusState)(status);
const rootProps = (0, _SpacingUtils.applySpacing)(props, {
className: (0, _clsx.default)(`dnb-toggle-button-group dnb-toggle-button-group--${layoutDirection} dnb-form-component`, className, status && `dnb-toggle-button-group__status--${statusState}`, !label && 'dnb-toggle-button-group--no-label')
});
const params = {
...rest
};
if (showStatus || suffix) {
params['aria-describedby'] = (0, _componentHelper.combineDescribedBy)(params, showStatus ? id + '-status' : null, suffix ? id + '-suffix' : null);
}
if (label) {
params['aria-labelledby'] = (0, _componentHelper.combineLabelledBy)(params, id + '-label');
}
(0, _componentHelper.validateDOMAttributes)(ownProps, params);
const setContext = (0, _react.useCallback)(contextArg => {
let resolved;
if (typeof contextArg === 'function') {
resolved = contextArg(prevContextRef.current);
} else {
resolved = contextArg;
}
prevContextRef.current = {
...prevContextRef.current,
...resolved
};
if ('value' in resolved) {
setValue(resolved.value);
}
if ('values' in resolved) {
setValues(resolved.values);
}
}, []);
const groupContext = {
name: _name,
value,
values,
size,
multiselect: multiselect,
variant,
leftComponent,
disabled,
skeleton,
setContext,
onChange: onChangeHandler
};
const Fieldset = label ? 'fieldset' : 'div';
return (0, _jsxRuntime.jsx)(_ToggleButtonGroupContext.default, {
value: groupContext,
children: (0, _jsxRuntime.jsxs)("div", {
...rootProps,
children: [_AlignmentHelper || (_AlignmentHelper = (0, _jsxRuntime.jsx)(_AlignmentHelper2.default, {})), (0, _jsxRuntime.jsx)(Fieldset, {
className: "dnb-toggle-button-group__fieldset",
"aria-labelledby": label ? id + '-label' : undefined,
role: variant === 'radio' ? 'radiogroup' : 'group',
children: (0, _jsxRuntime.jsxs)(_Flex.default.Container, {
direction: vertical || labelDirection === 'vertical' ? 'vertical' : 'horizontal',
gap: vertical ? 'x-small' : 'small',
children: [label && (0, _jsxRuntime.jsx)(_FormLabel.default, {
element: "legend",
id: id + '-label',
srOnly: labelSrOnly,
vertical: false,
children: label
}), (0, _jsxRuntime.jsxs)(_Space.default, {
element: "span",
id: id,
className: "dnb-toggle-button-group__shell",
...params,
children: [(0, _jsxRuntime.jsx)(_FormStatus.default, {
show: showStatus,
id: id + '-form-status',
globalStatus: globalStatus,
label: label,
textId: id + '-status',
text: status,
state: statusState,
noAnimation: statusNoAnimation,
skeleton: skeleton,
...statusProps
}), (0, _jsxRuntime.jsxs)("span", {
className: `dnb-toggle-button-group__shell__children dnb-toggle-button-group__shell__children--${layoutDirection}`,
children: [children, suffix && (0, _jsxRuntime.jsx)(_Suffix.default, {
className: "dnb-toggle-button-group__suffix",
id: id + '-suffix',
context: props,
children: suffix
})]
})]
})]
})
})]
})
});
}
(0, _withComponentMarkers.default)(ToggleButtonGroup, {
_supportsSpacingProps: true
});
var _default = exports.default = ToggleButtonGroup;
//# sourceMappingURL=ToggleButtonGroup.js.map