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

Elegant UI components, made by BEM best practices for react

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.withNativeControl = void 0;
var _react = _interopRequireWildcard(require("react"));
var _Select = require("../Select");
var _SelectNativeControl = require("../NativeControl/Select-NativeControl");
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 && Object.prototype.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 __assign = void 0 && (void 0).__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);
};
var renderOptions = function (options) {
  return options.map(function (option, idx) {
    if ((0, _Select.isGroup)(option)) {
      return /*#__PURE__*/_react.default.createElement("optgroup", {
        label: option.title,
        hidden: option.hidden,
        key: idx
      }, renderOptions(option.items));
    }
    return /*#__PURE__*/_react.default.createElement("option", {
      value: option.id,
      hidden: option.hidden,
      disabled: option.disabled,
      key: idx
    }, (0, _Select.getTextOfOption)(option));
  });
};
/**
 * HOC who render native select for touch devices
 */
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 = (0, _react.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 = (0, _react.useMemo)(function () {
      return renderOptions(options);
    }, [options]);
    return /*#__PURE__*/_react.default.createElement(BaseComponent, __assign({}, props, {
      options: options,
      value: value,
      addonAfter: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SelectNativeControl.SelectNativeControl, {
        className: (0, _Select.cnSelect)('NativeControl'),
        disabled: disabled,
        multiple: isMultiple,
        value: value,
        onChange: onChange,
        tabIndex: -1
      }, renderedOptions), addonAfter)
    }));
  };
};
exports.withNativeControl = withNativeControl;