@dnb/eufemia/cjs/extensions/forms/Field/Selection/Selection.js

DNB Eufemia Design System UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.countOptions = countOptions;
exports.listOfValidDropdownProps = exports.listOfValidAutocompleteProps = exports.default = void 0;
exports.makeOptions = makeOptions;
exports.mapOptions = mapOptions;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _componentHelper = require("../../../../shared/component-helper.js");
var _index = require("../../../../components/index.js");
var _index2 = _interopRequireDefault(require("../Option/index.js"));
var _index3 = require("../../hooks/index.js");
var _useFieldProps = require("../../hooks/useFieldProps.js");
var _utils = require("../../../../components/flex/utils.js");
var _index4 = _interopRequireDefault(require("../../FieldBlock/index.js"));
var _withCamelCaseProps = require("../../../../shared/helpers/withCamelCaseProps.js");
var _useDataValue = _interopRequireDefault(require("../../hooks/useDataValue.js"));
var _em, _em2;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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 _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); }
const validDrawerListProps = ['default_value', 'triangle_position', 'label_direction', 'prevent_selection', 'prevent_close', 'keep_open', 'independent_width', 'fixed_position', 'enable_body_lock', 'skip_keysearch', 'ignore_events', 'align_drawer', 'list_class', 'portal_class', 'no_scroll_animation', 'no_animation', 'skip_portal', 'min_height', 'max_height', 'page_offset', 'observer_element', 'cache_hash', 'wrapper_element', 'options_render', 'on_pre_change', 'on_change', 'on_select', 'on_show', 'on_hide'];
const validAutocompleteProps = ['align_autocomplete', 'aria_live_options', 'disable_filter', 'disable_highlighting', 'disable_reorder', 'drawer_class', 'icon_position', 'icon_size', 'indicator_label', 'input_element', 'input_icon', 'input_ref', 'input_value', 'keep_selection', 'keep_value', 'keep_value_and_selection', 'label_direction', 'label_sr_only', 'no_options', 'open_on_focus', 'prevent_selection', 'search_in_word_index', 'search_numbers', 'selected_sr', 'show_all', 'show_clear_button', 'show_options_sr', 'show_submit_button', 'skip_portal', 'status_props', 'status_state', 'submit_button_icon', 'submit_button_title', 'submit_element', 'triangle_position', 'on_type', 'on_focus', 'on_blur', 'on_change', 'on_select', 'on_show', 'on_hide'];
const listOfValidAutocompleteProps = exports.listOfValidAutocompleteProps = [...validAutocompleteProps, ...validDrawerListProps];
const validDropdownProps = ['icon_size', 'icon_position', 'triangle_position', 'open_on_focus', 'prevent_selection', 'action_menu', 'more_menu', 'align_dropdown', 'independent_width', 'skip_portal', 'status_state', 'status_props', 'label_direction', 'label_sr_only', 'trigger_element', 'on_change', 'on_select', 'on_show', 'on_hide'];
const listOfValidDropdownProps = exports.listOfValidDropdownProps = [...validDropdownProps, ...validDrawerListProps];
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,
    htmlAttributes,
    setHasFocus,
    handleChange,
    setDisplayValue,
    transformSelection,
    data,
    groups,
    dataPath,
    children,
    additionalArgs,
    autocompleteProps,
    dropdownProps
  } = (0, _index3.useFieldProps)(props);
  const {
    getValueByPath
  } = (0, _useDataValue.default)();
  let dataList = data;
  if (dataPath) {
    dataList = getValueByPath(dataPath);
  }
  const hasRenderPropChildren = typeof children === 'function';
  const renderedChildren = (0, _react.useMemo)(() => {
    return resolveChildren(children, value, dataList);
  }, [children, dataList, value]);
  const handleDrawerListChange = (0, _react.useCallback)(({
    data,
    value
  }) => {
    var _data$selectedKey;
    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 || handleChange(!selectedKey || selectedKey === clearValue ? emptyValue : selectedKey, {
      data
    });
  }, [handleChange, emptyValue, clearValue]);
  const onChangeHandler = (0, _react.useCallback)(({
    value
  }) => {
    handleChange === null || handleChange === void 0 || handleChange(value === undefined ? emptyValue : value);
  }, [handleChange, emptyValue]);
  const handleShow = (0, _react.useCallback)(({
    data
  }) => {
    setHasFocus(true, data === null || data === void 0 ? void 0 : data.selectedKey);
  }, [setHasFocus]);
  const handleHide = (0, _react.useCallback)(({
    data
  }) => {
    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 = {
    forId: id,
    className: cn,
    disableStatusSummary: true,
    ...(0, _utils.pickSpacingProps)(props)
  };
  const onType = props === null || props === void 0 || (_props$autocompletePr = props.autocompleteProps) === null || _props$autocompletePr === void 0 ? void 0 : _props$autocompletePr.onType;
  const onTypeAutocompleteHandler = (0, _react.useCallback)(event => {
    if (typeof onType === 'function') {
      const {
        value
      } = event;
      onType({
        ...event,
        ...additionalArgs,
        value: value === '' ? emptyValue : value
      });
    }
  }, [additionalArgs, emptyValue, onType]);
  switch (variant) {
    case 'radio':
    case 'radio-list':
    case 'button':
      {
        const Component = variant === 'radio' || variant === 'radio-list' ? _index.Radio : _index.ToggleButton;
        const items = renderRadioItems({
          id,
          value,
          variant,
          info,
          warning,
          htmlAttributes,
          children: renderedChildren,
          dataList: hasRenderPropChildren ? undefined : dataList,
          hasError,
          iterateOverItems: ({
            value: v,
            label
          }) => {
            if (v === value) {
              setDisplayValue(label);
            }
          }
        });
        const additionalFieldBlockProps = {
          asFieldset: hasRenderPropChildren || _react.default.Children.count(items) > 1,
          fieldsetRole: variant === 'radio' || variant === 'radio-list' ? 'radiogroup' : 'group'
        };
        if (!size) {
          additionalFieldBlockProps.labelHeight = 'small';
        }
        if (width) {
          additionalFieldBlockProps.contentWidth = width;
        }
        return _react.default.createElement(_index4.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 : '')
        }, items));
      }
    case 'autocomplete':
    case 'dropdown':
      {
        var _data$find;
        const data = renderDropdownItems(hasRenderPropChildren ? undefined : dataList, transformSelection).concat(makeOptions(renderedChildren, 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 = {
          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,
          groups,
          size,
          on_change: handleDrawerListChange,
          on_show: handleShow,
          on_hide: handleHide,
          stretch: true
        };
        const specificFieldBlockProps = {
          contentWidth: width !== null && width !== void 0 ? width : 'large'
        };
        return _react.default.createElement(_index4.default, _extends({}, fieldBlockProps, specificFieldBlockProps), variant === 'autocomplete' ? _react.default.createElement(_index.Autocomplete, _extends({}, sharedProps, autocompleteProps ? (0, _withCamelCaseProps.convertCamelCasePropsToSnakeCase)(Object.freeze(autocompleteProps), listOfValidAutocompleteProps) : 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,
          selectall: true
        })) : _react.default.createElement(_index.Dropdown, _extends({}, sharedProps, dropdownProps ? (0, _withCamelCaseProps.convertCamelCasePropsToSnakeCase)(dropdownProps, listOfValidDropdownProps) : null)));
      }
  }
}
function resolveChildren(children, value, options) {
  if (typeof children === 'function') {
    return children({
      value,
      options
    });
  }
  return children;
}
function renderRadioItems({
  id,
  value: valueProp,
  variant,
  info,
  warning,
  htmlAttributes,
  children,
  dataList,
  hasError,
  iterateOverItems
}) {
  const optionsCount = countOptions(children) + ((dataList === null || dataList === void 0 ? void 0 : dataList.length) || 0);
  const createOption = (props, i) => {
    const {
      value,
      title,
      children,
      error,
      help,
      size,
      ...rest
    } = props;
    const label = title !== null && title !== void 0 ? title : children;
    const suffix = help ? _react.default.createElement(_index.HelpButton, {
      size: "small",
      title: (0, _componentHelper.convertJsxToString)(help.title)
    }, help.content) : undefined;
    iterateOverItems === null || iterateOverItems === void 0 || iterateOverItems({
      value,
      label
    });
    const Component = variant === 'radio' || variant === 'radio-list' ? _index.Radio : _index.ToggleButton;
    return _react.default.createElement(Component, _extends({
      id: optionsCount === 1 ? id : undefined,
      key: `option-${i}-${id}`,
      label: variant === 'radio' || variant === 'radio-list' ? label : undefined,
      text: variant === 'button' ? label : undefined,
      role: "radio",
      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 countOptions(children) {
  let count = 0;
  _react.default.Children.forEach(children, child => {
    if (_react.default.isValidElement(child)) {
      if (child.type === _index2.default) {
        count++;
      } else if (child.props.children) {
        count += countOptions(child.props.children);
      }
    }
  });
  return count;
}
function mapOptions(children, {
  createOption
}) {
  return _react.default.Children.map(children, (child, i) => {
    if (_react.default.isValidElement(child)) {
      if (child.type === _index2.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;
    if (((_child = child) === null || _child === void 0 || (_child = _child['props']) === null || _child === void 0 || (_child = _child.children) === null || _child === void 0 ? void 0 : _child.type) === _index2.default) {
      child = child['props'].children;
    }
    if (_react.default.isValidElement(child) && child.type === _index2.default) {
      var _ref, _props$title, _props$value;
      const props = child.props;
      const title = (_ref = (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : props.children) !== null && _ref !== void 0 ? _ref : _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;
      const groupIndex = props.groupIndex;
      return {
        selectedKey,
        selected_value,
        content,
        disabled,
        style,
        groupIndex
      };
    }
    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,
      ...rest
    } = 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,
      ...rest
    };
  })) || [];
}
Selection._supportsSpacingProps = true;
var _default = exports.default = Selection;
//# sourceMappingURL=Selection.js.map