@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
314 lines (313 loc) • 14.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
exports.makeOptions = makeOptions;
exports.mapOptions = mapOptions;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _componentHelper = require("../../../../shared/component-helper");
var _components = require("../../../../components");
var _Option = _interopRequireDefault(require("../Option"));
var _hooks = require("../../hooks");
var _useFieldProps = require("../../hooks/useFieldProps");
var _utils = require("../../../../components/flex/utils");
var _FieldBlock = _interopRequireDefault(require("../../FieldBlock"));
var _withCamelCaseProps = require("../../../../shared/helpers/withCamelCaseProps");
var _useDataValue = _interopRequireDefault(require("../../hooks/useDataValue"));
var _em, _em2;
const _excluded = ["value", "title", "children", "error", "help", "size"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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; }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function Selection(props) {
var _props$autocompletePr;
const clearValue = (0, _react.useMemo)(() => `clear-option-${(0, _componentHelper.makeUniqueId)()}`, []);
const {
id,
className,
variant = 'dropdown',
layout = 'vertical',
optionsLayout = 'vertical',
placeholder,
value,
info,
warning,
error,
hasError,
disabled,
size,
emptyValue,
width = 'large',
htmlAttributes,
setHasFocus,
handleChange,
setDisplayValue,
transformSelection,
data,
dataPath,
children,
additionalArgs,
autocompleteProps,
dropdownProps
} = (0, _hooks.useFieldProps)(props);
const {
getValueByPath
} = (0, _useDataValue.default)();
let dataList = data;
if (dataPath) {
dataList = getValueByPath(dataPath);
}
const handleDrawerListChange = (0, _react.useCallback)(_ref => {
var _data$selectedKey;
let {
data,
value
} = _ref;
const selectedKey = (_data$selectedKey = data === null || data === void 0 ? void 0 : data.selectedKey) !== null && _data$selectedKey !== void 0 ? _data$selectedKey : value;
handleChange === null || handleChange === void 0 ? void 0 : handleChange(!selectedKey || selectedKey === clearValue ? emptyValue : selectedKey, {
data
});
}, [handleChange, emptyValue, clearValue]);
const onChangeHandler = (0, _react.useCallback)(_ref2 => {
let {
value
} = _ref2;
handleChange === null || handleChange === void 0 ? void 0 : handleChange(value === undefined ? emptyValue : value);
}, [handleChange, emptyValue]);
const handleShow = (0, _react.useCallback)(_ref3 => {
let {
data
} = _ref3;
setHasFocus(true, data === null || data === void 0 ? void 0 : data.selectedKey);
}, [setHasFocus]);
const handleHide = (0, _react.useCallback)(_ref4 => {
let {
data
} = _ref4;
setHasFocus(false, data === null || data === void 0 ? void 0 : data.selectedKey);
}, [setHasFocus]);
const cn = (0, _classnames.default)(`dnb-forms-field-selection dnb-forms-field-selection__variant--${variant} dnb-forms-field-selection--layout-${layout} dnb-forms-field-selection--options-layout--${optionsLayout}`, className);
const fieldBlockProps = _objectSpread({
forId: id,
className: cn,
disableStatusSummary: true
}, (0, _utils.pickSpacingProps)(props));
const onType = props === null || props === void 0 ? void 0 : (_props$autocompletePr = props.autocompleteProps) === null || _props$autocompletePr === void 0 ? void 0 : _props$autocompletePr.onType;
const onTypeAutocompleteHandler = (0, _react.useCallback)(event => {
const {
value
} = event;
if (typeof onType === 'function') {
onType(value === undefined ? emptyValue : value, _objectSpread(_objectSpread({}, event), additionalArgs));
}
}, [additionalArgs, emptyValue, onType]);
switch (variant) {
case 'radio':
case 'button':
{
const Component = variant === 'radio' ? _components.Radio : _components.ToggleButton;
const items = renderRadioItems({
id,
value,
variant,
info,
warning,
htmlAttributes,
children,
dataList,
hasError,
iterateOverItems: _ref5 => {
let {
value: v,
label
} = _ref5;
if (v === value) {
setDisplayValue(label);
}
}
});
const additionalFieldBlockProps = {
asFieldset: _react.default.Children.count(items) > 1
};
if (!size) {
additionalFieldBlockProps.labelHeight = 'small';
}
return _react.default.createElement(_FieldBlock.default, _extends({}, fieldBlockProps, additionalFieldBlockProps), _react.default.createElement(Component.Group, {
size: size,
className: cn,
layout_direction: optionsLayout === 'horizontal' ? 'row' : 'column',
disabled: disabled,
on_change: onChangeHandler,
value: String(value !== null && value !== void 0 ? value : '') || undefined
}, items));
}
case 'autocomplete':
case 'dropdown':
{
var _data$find;
const data = renderDropdownItems(dataList, transformSelection).concat(makeOptions(children, transformSelection)).filter(Boolean);
const displayValue = (_data$find = data.find(item => item.selectedKey === value)) === null || _data$find === void 0 ? void 0 : _data$find.content;
setDisplayValue(displayValue);
const sharedProps = _objectSpread(_objectSpread({
id,
list_class: 'dnb-forms-field-selection__list',
portal_class: 'dnb-forms-field-selection__portal',
title: placeholder,
value: String(value !== null && value !== void 0 ? value : ''),
status: (hasError || (0, _useFieldProps.checkForError)([error, info, warning])) && 'error',
disabled
}, htmlAttributes), {}, {
data,
size,
on_change: handleDrawerListChange,
on_show: handleShow,
on_hide: handleHide,
stretch: true
});
const specificFieldBlockProps = {
width
};
if (layout === 'horizontal') {
specificFieldBlockProps.width = undefined;
specificFieldBlockProps.contentWidth = width;
}
return _react.default.createElement(_FieldBlock.default, _extends({}, fieldBlockProps, specificFieldBlockProps), variant === 'autocomplete' ? _react.default.createElement(_components.Autocomplete, _extends({}, sharedProps, autocompleteProps ? (0, _withCamelCaseProps.convertCamelCaseProps)(Object.freeze(autocompleteProps)) : null, {
value: autocompleteProps !== null && autocompleteProps !== void 0 && autocompleteProps.preventSelection ? undefined : value,
on_type: onTypeAutocompleteHandler,
data: !props.data && !props.dataPath && (autocompleteProps === null || autocompleteProps === void 0 ? void 0 : autocompleteProps.mode) === 'async' ? undefined : data
})) : _react.default.createElement(_components.Dropdown, _extends({}, sharedProps, dropdownProps ? (0, _withCamelCaseProps.convertCamelCaseProps)(dropdownProps) : null)));
}
}
}
function renderRadioItems(_ref6) {
let {
id,
value: valueProp,
variant,
info,
warning,
htmlAttributes,
children,
dataList,
hasError,
iterateOverItems
} = _ref6;
const optionsCount = _react.default.Children.count(children) + ((dataList === null || dataList === void 0 ? void 0 : dataList.length) || 0);
const createOption = (props, i) => {
const {
value,
title,
children,
error,
help,
size
} = props,
rest = _objectWithoutProperties(props, _excluded);
const label = title !== null && title !== void 0 ? title : children;
const suffix = help ? _react.default.createElement(_components.HelpButton, {
size: "small",
title: (0, _componentHelper.convertJsxToString)(help.title)
}, help.content) : undefined;
iterateOverItems === null || iterateOverItems === void 0 ? void 0 : iterateOverItems({
value,
label
});
const Component = variant === 'radio' ? _components.Radio : _components.ToggleButton;
return _react.default.createElement(Component, _extends({
id: optionsCount === 1 ? id : undefined,
key: `option-${i}-${id}`,
label: variant === 'radio' ? label : undefined,
text: variant === 'button' ? label : undefined,
value: String(value !== null && value !== void 0 ? value : valueProp) || undefined,
status: (hasError || (0, _useFieldProps.checkForError)([error, info, warning])) && 'error',
suffix: suffix,
size: size
}, htmlAttributes, rest));
};
return [...(dataList || []).map((props, i) => {
return createOption(props, i);
}), ...(mapOptions(children, {
createOption
}) || [])].filter(Boolean);
}
function mapOptions(children, _ref7) {
let {
createOption
} = _ref7;
return _react.default.Children.map(children, (child, i) => {
if (_react.default.isValidElement(child)) {
if (child.type === _Option.default) {
return createOption(child.props, i);
}
if (child.props.children) {
const nestedChildren = mapOptions(child.props.children, {
createOption
});
return _react.default.cloneElement(child, child.props, nestedChildren);
}
}
return child;
});
}
function makeOptions(children, transformSelection) {
return _react.default.Children.map(children, child => {
var _child, _child$props, _child$props$children;
if (((_child = child) === null || _child === void 0 ? void 0 : (_child$props = _child['props']) === null || _child$props === void 0 ? void 0 : (_child$props$children = _child$props.children) === null || _child$props$children === void 0 ? void 0 : _child$props$children.type) === _Option.default) {
child = child['props'].children;
}
if (_react.default.isValidElement(child) && child.type === _Option.default) {
var _ref8, _props$title, _props$value;
const props = child.props;
const title = (_ref8 = (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : props.children) !== null && _ref8 !== void 0 ? _ref8 : _em || (_em = _react.default.createElement("em", null, "Untitled"));
const content = props.text ? [title, props.text] : title;
const selected_value = transformSelection ? transformSelection(props) : undefined;
const selectedKey = String((_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : '');
const disabled = props.disabled;
const style = props.style;
return {
selectedKey,
selected_value,
content,
disabled,
style
};
}
if (child) {
return {
content: child
};
}
});
}
function renderDropdownItems(data, transformSelection) {
return (data === null || data === void 0 ? void 0 : data.map(props => {
const {
value,
title,
text,
disabled,
style
} = props;
return {
selectedKey: value,
content: (text ? [title, text] : title) || _em2 || (_em2 = _react.default.createElement("em", null, "Untitled")),
selected_value: transformSelection ? transformSelection(props) : undefined,
disabled,
style
};
})) || [];
}
Selection._supportsSpacingProps = true;
var _default = exports.default = Selection;
//# sourceMappingURL=Selection.js.map