react-elegant-ui/esm/components/Select/Select.hocs/withNativeControl.js

Elegant UI components, made by BEM best practices for react

var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
import React, { useCallback, useMemo } from 'react';
import { cnSelect, getTextOfOption, isGroup } from '../Select';
import { SelectNativeControl } from '../NativeControl/Select-NativeControl';
var renderOptions = function (options) {
  return options.map(function (option, idx) {
    if (isGroup(option)) {
      return /*#__PURE__*/React.createElement("optgroup", {
        label: option.title,
        hidden: option.hidden,
        key: idx
      }, renderOptions(option.items));
    }
    return /*#__PURE__*/React.createElement("option", {
      value: option.id,
      hidden: option.hidden,
      disabled: option.disabled,
      key: idx
    }, getTextOfOption(option));
  });
};
/**
 * HOC who render native select for touch devices
 */
export var withNativeControl = function (BaseComponent) {
  return function (props) {
    var options = props.options,
      value = props.value,
      disabled = props.disabled,
      setValue = props.setValue,
      addonAfter = props.addonAfter;
    var isMultiple = Array.isArray(value);
    var onChange = useCallback(function (evt) {
      if (setValue !== undefined) {
        var value_1 = !isMultiple ? evt.target.value : Array.from(evt.target.selectedOptions, function (option) {
          return option.value;
        });
        setValue(value_1);
      }
    }, [isMultiple, setValue]);
    var renderedOptions = useMemo(function () {
      return renderOptions(options);
    }, [options]);
    return /*#__PURE__*/React.createElement(BaseComponent, __assign({}, props, {
      options: options,
      value: value,
      addonAfter: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectNativeControl, {
        className: cnSelect('NativeControl'),
        disabled: disabled,
        multiple: isMultiple,
        value: value,
        onChange: onChange,
        tabIndex: -1
      }, renderedOptions), addonAfter)
    }));
  };
};