cloudhubui/dist/baseweb/BaseWebSelect.js

Various components to use in react projects

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _isPlainObject = _interopRequireDefault(require("lodash/isPlainObject"));

var _isEqual = _interopRequireDefault(require("lodash/isEqual"));

var _select = require("baseui/select");

var _LayersManager = _interopRequireDefault(require("./LayersManager"));

var _Block = _interopRequireDefault(require("../Block"));

var _Text = _interopRequireDefault(require("../Text"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var BaseWebSelect = function BaseWebSelect(props) {
  var options = props.options,
      input = props.input,
      value = props.value,
      _onChange = props.onChange,
      meta = props.meta,
      multi = props.multi,
      isMulti = props.isMulti,
      returnkeys = props.returnkeys,
      _props$showError = props.showError,
      showError = _props$showError === void 0 ? true : _props$showError,
      search = props.search,
      select = props.select,
      labelExtractor = props.labelExtractor,
      onSelectChange = props.onSelectChange,
      getOptionLabel = props.getOptionLabel,
      getValueLabel = props.getValueLabel,
      placeholder = props.placeholder,
      labelKey = props.labelKey,
      valueKey = props.valueKey,
      labelField = props.labelField,
      valueField = props.valueField,
      filterOptions = props.filterOptions,
      rest = _objectWithoutProperties(props, ["options", "input", "value", "onChange", "meta", "multi", "isMulti", "returnkeys", "showError", "search", "select", "labelExtractor", "onSelectChange", "getOptionLabel", "getValueLabel", "placeholder", "labelKey", "valueKey", "labelField", "valueField", "filterOptions"]);

  var val = input.value || value || [];

  var _React$useState = _react.default.useState(Array.isArray(val) ? val : [val]),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      initialValue = _React$useState2[0],
      setValue = _React$useState2[1];

  var _React$useState3 = _react.default.useState(''),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      searchTerm = _React$useState4[0],
      setsearchTerm = _React$useState4[1]; // Effect clears displayed value on form reinitialize


  _react.default.useEffect(function () {
    var initVal = Array.isArray(val) ? val : [val];

    if (!(0, _isEqual.default)(initVal, initialValue)) {
      setValue(initVal);
    } // eslint-disable-next-line

  }, [JSON.stringify(val)]);

  var _React$useState5 = _react.default.useState(options),
      _React$useState6 = _slicedToArray(_React$useState5, 2),
      itemOptions = _React$useState6[0],
      setitemOptions = _React$useState6[1];

  var containerRef = _react.default.useRef();

  if (returnkeys) {
    if (Array.isArray(returnkeys)) {
      rest.valueExtractor = function (item) {
        var obj = {};
        returnkeys.forEach(function (k) {
          obj[k] = item[k];
        });
        return obj;
      };
    }
  }

  if (Array.isArray(options) && (typeof options[0] === 'string' || typeof options[0] === 'number' || typeof options[0] === 'boolean')) {
    rest.valueExtractor = function (item) {
      return item && item.id ? item.id : item;
    };
  }

  _react.default.useEffect(function () {
    if (Array.isArray(options) && (typeof options[0] === 'string' || typeof options[0] === 'number' || typeof options[0] === 'boolean')) {
      setitemOptions(options.map(function (item) {
        return typeof options[0] === 'string' || typeof options[0] === 'number' || typeof options[0] === 'boolean' ? {
          id: item
        } : item || {
          id: item
        };
      }));
    } else {
      setitemOptions(options);
    }
  }, [JSON.stringify(options)]);

  var optionLabelExtractor = function optionLabelExtractor(_ref) {
    var option = _ref.option,
        index = _ref.index;

    if (labelExtractor) {
      return labelExtractor(option);
    }

    return getOptionLabel({
      option: option,
      index: index
    });
  };

  var valueLabelExtractor = function valueLabelExtractor(_ref2) {
    var option = _ref2.option,
        index = _ref2.index;

    if (typeof getValueLabel === 'function') {
      return getValueLabel({
        option: option,
        index: index
      });
    }

    if (labelExtractor) {
      var _valLabel = labelExtractor(option);

      return /*#__PURE__*/_react.default.createElement("div", null, _valLabel);
    }

    var valLabel = getOptionLabel({
      option: option,
      index: index
    });
    return /*#__PURE__*/_react.default.createElement("div", null, valLabel);
  };

  var customFilter = function customFilter(opts) {
    if (Array.isArray(opts) && searchTerm) {
      return opts.map(function (option) {
        return JSON.stringify(option || {}).toLowerCase().includes((searchTerm || '').toLowerCase()) ? option : null;
      }).filter(Boolean);
    }

    return opts;
  };

  var handleInputChange = function handleInputChange(event) {
    var target = event.target;
    setsearchTerm((target || {}).value || '');
  };

  return /*#__PURE__*/_react.default.createElement(_Block.default, {
    ref: containerRef
  }, /*#__PURE__*/_react.default.createElement(_select.Select, _extends({
    options: itemOptions || [],
    value: initialValue,
    onChange: function onChange(params) {
      var val = multi || isMulti ? params.value.map(function (item) {
        return rest.valueExtractor(item);
      }) : rest.valueExtractor(params.value[0] || null);

      if (typeof _onChange === 'function') {
        _onChange(val);
      }

      onSelectChange(multi || isMulti ? params.value : (params.value || [])[0]);
      input.onChange(val);
      input.onBlur();
      setValue(params.value);
    },
    multi: Boolean(multi || isMulti),
    type: search ? _select.TYPE.search : _select.TYPE.select,
    overrides: {
      Popover: {
        props: {
          mountNode: containerRef.current
        }
      }
    },
    getOptionLabel: optionLabelExtractor,
    getValueLabel: valueLabelExtractor,
    labelKey: labelKey || labelField,
    valueKey: valueKey || valueField,
    filterOptions: filterOptions || (options || [])[0] && _typeof((options || [])[0]) === 'object' && !labelKey && !valueKey && !labelField && !valueField ? customFilter : undefined,
    onInputChange: rest.onInputChange || handleInputChange
  }, rest)), showError && /*#__PURE__*/_react.default.createElement(_Text.default, {
    small: true,
    error: true,
    style: {
      height: 10
    }
  }, meta.touched && meta.error && meta.error));
};

BaseWebSelect.defaultProps = {
  input: {
    value: null,
    onChange: function onChange() {},
    onBlur: function onBlur() {}
  },
  multi: false,
  meta: {},
  options: [],
  valueExtractor: function valueExtractor(item) {
    return item;
  },
  getOptionLabel: function getOptionLabel(_ref3) {
    var option = _ref3.option,
        index = _ref3.index;
    return (0, _isPlainObject.default)(option) ? option.id || "option-".concat(index) : "".concat(option);
  },
  // getValueLabel: ({ option, index }) =>
  //   isPlainObject(option) ? option.id || `option-${index}` : `option-${index}`,
  onSelectChange: function onSelectChange() {}
};
var _default = BaseWebSelect;
exports.default = _default;