@flexis/ui/components/CustomFlatSelect/CustomFlatSelect.js

Styleless React Components

"use strict";

var _Object$keys2 = require("@babel/runtime-corejs3/core-js-stable/object/keys");

var _forEachInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");

var _context4;

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");

_Object$defineProperty2(exports, "__esModule", {
  value: true
});

var _exportNames = {};
exports.default = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));

var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));

var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));

var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));

var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));

var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));

var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));

var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));

var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));

var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));

var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));

var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/inherits"));

var _tslib = require("tslib");

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _helpers = require("../../helpers");

var _types = require("../common/types");

var _isCurrentValue = _interopRequireDefault(require("../common/isCurrentValue"));

var _getNextValue = _interopRequireDefault(require("../common/getNextValue"));

var _CustomFlatSelectSt = require("./CustomFlatSelect.st.css");

var _CustomFlatSelectOption = require("./CustomFlatSelectOption");

_forEachInstanceProperty2(_context4 = _Object$keys2(_CustomFlatSelectOption)).call(_context4, function (key) {
  if (key === "default" || key === "__esModule") return;
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;

  _Object$defineProperty2(exports, key, {
    enumerable: true,
    get: function get() {
      return _CustomFlatSelectOption[key];
    }
  });
});

function ownKeys(object, enumerableOnly) { var keys = (0, _keys.default)(object); if (_getOwnPropertySymbols.default) { var symbols = (0, _getOwnPropertySymbols.default)(object); if (enumerableOnly) symbols = (0, _filter.default)(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor.default)(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; (0, _forEach.default)(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { (0, _defineProperty3.default)(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors.default) { (0, _defineProperties.default)(target, (0, _getOwnPropertyDescriptors.default)(source)); } else { var _context3; (0, _forEach.default)(_context3 = ownKeys(Object(source))).call(_context3, function (key) { (0, _defineProperty2.default)(target, key, (0, _getOwnPropertyDescriptor.default)(source, key)); }); } } return target; }

var _createElement = _react.default.createElement;
var PureComponent = _react.default.PureComponent,
    Children = _react.default.Children,
    cloneElement = _react.default.cloneElement;

var CustomFlatSelect =
/** @class */
function () {
  var CustomFlatSelect = /*#__PURE__*/function (_PureComponent) {
    (0, _inherits2.default)(CustomFlatSelect, _PureComponent);

    function CustomFlatSelect(props) {
      var _this;

      (0, _classCallCheck2.default)(this, CustomFlatSelect);
      _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CustomFlatSelect).call(this, props));
      var defaultValue = props.defaultValue;
      _this.state = {
        value: defaultValue
      };
      return _this;
    }

    (0, _createClass2.default)(CustomFlatSelect, [{
      key: "render",
      value: function render() {
        var _this2 = this;

        var _this$props = this.props,
            className = _this$props.className,
            id = _this$props.id,
            name = _this$props.name,
            multiple = _this$props.multiple,
            disabled = _this$props.disabled,
            children = _this$props.children,
            props = (0, _objectWithoutProperties2.default)(_this$props, ["className", "id", "name", "multiple", "disabled", "children"]);
        var value = this.state.value;
        var activeDescendant = null;
        var options = (0, _map.default)(Children).call(Children, children, function (child) {
          if (!child) {
            return null;
          }

          var _child$props = child.props,
              optionValue = _child$props.value,
              optionLabel = _child$props.children,
              childProps = (0, _objectWithoutProperties2.default)(_child$props, ["value", "children"]);
          var option = typeof optionValue === 'undefined' ? optionLabel : optionValue;
          var checked = (0, _isCurrentValue.default)(multiple, value, option);

          var props = _objectSpread({}, childProps, {
            type: multiple ? 'checkbox' : 'radio',
            value: option,
            onChange: _this2.onChange,
            checked: checked,
            disabled: disabled,
            name: name
          });

          if (typeof id === 'string') {
            var _context;

            props.optionId = (0, _concat.default)(_context = "".concat(id, "-option-")).call(_context, option);

            if (checked && !multiple) {
              activeDescendant = props.optionId;
            }
          }

          return cloneElement(child, props);
        });
        return _createElement("ul", (0, _extends2.default)({
          role: "listbox"
        }, (0, _helpers.omit)(props, ['onChange', 'defaultValue', 'value']), {
          className: (0, _CustomFlatSelectSt.style)(_CustomFlatSelectSt.classes.root, className),
          id: id,
          "aria-activedescendant": activeDescendant,
          "aria-multiselectable": multiple,
          "aria-disabled": disabled
        }), options);
      }
    }, {
      key: "onChange",
      value: function onChange(inputNextValue, event) {
        var _this$props2 = this.props,
            valueProp = _this$props2.value,
            onChange = _this$props2.onChange,
            multiple = _this$props2.multiple,
            disabled = _this$props2.disabled;

        if (disabled) {
          return;
        }

        var value = this.state.value;
        var nextValue = (0, _getNextValue.default)(multiple, value, inputNextValue);

        if (nextValue === value) {
          return;
        }

        if (typeof valueProp === 'undefined') {
          this.setState(function () {
            return {
              value: nextValue
            };
          });
        }

        if (typeof onChange === 'function') {
          onChange(nextValue, event);
        }
      }
    }], [{
      key: "getDerivedStateFromProps",
      value: function getDerivedStateFromProps(_ref, _ref2) {
        var value = _ref.value;
        var prevValue = _ref2.value;
        var nextValue = typeof value === 'undefined' ? prevValue : value;

        if (nextValue === prevValue) {
          return null;
        }

        return {
          value: nextValue
        };
      }
    }]);
    return CustomFlatSelect;
  }(PureComponent);

  process.env.NODE_ENV !== "production" ? CustomFlatSelect.propTypes = {
    id: _propTypes.default.string,
    name: _propTypes.default.string,
    onChange: _propTypes.default.func,
    defaultValue: _types.SelectValuePropType,
    value: _types.SelectValuePropType,
    multiple: _propTypes.default.bool,
    disabled: _propTypes.default.bool,
    children: _propTypes.default.node.isRequired
  } : void 0;
  CustomFlatSelect.defaultProps = {
    multiple: false,
    disabled: false
  };
  (0, _tslib.__decorate)([(0, _helpers.Bind)()], CustomFlatSelect.prototype, "onChange", null);
  return CustomFlatSelect;
}();

var _default = CustomFlatSelect;
exports.default = _default;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0N1c3RvbUZsYXRTZWxlY3QvQ3VzdG9tRmxhdFNlbGVjdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUE7O0FBU0E7O0FBQ0E7O0FBS0E7O0FBSUE7O0FBQ0E7O0FBQ0E7O0FBS0E7O0FBQUE7QUFBQTtBQUFBOztBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBOzs7Ozs7Ozs7OztBQWlDQSxJQUFBLGdCQUFBO0FBQUE7QUFBQSxZQUFBO0FBQUEsTUFBcUIsZ0JBQXJCO0FBQUE7O0FBb0NDLDhCQUFZLEtBQVosRUFBaUI7QUFBQTs7QUFBQTtBQUVoQix3SEFBTSxLQUFOO0FBRmdCLFVBS2YsWUFMZSxHQU1aLEtBTlksQ0FLZixZQUxlO0FBUWhCLFlBQUssS0FBTCxHQUFhO0FBQ1osUUFBQSxLQUFLLEVBQUU7QUFESyxPQUFiO0FBUmdCO0FBV2hCOztBQS9DRjtBQUFBO0FBQUEsK0JBaURPO0FBQUE7O0FBQUEsMEJBVUQsS0FBSyxLQVZKO0FBQUEsWUFHSixTQUhJLGVBR0osU0FISTtBQUFBLFlBSUosRUFKSSxlQUlKLEVBSkk7QUFBQSxZQUtKLElBTEksZUFLSixJQUxJO0FBQUEsWUFNSixRQU5JLGVBTUosUUFOSTtBQUFBLFlBT0osUUFQSSxlQU9KLFFBUEk7QUFBQSxZQVFKLFFBUkksZUFRSixRQVJJO0FBQUEsWUFTRCxLQVRDO0FBQUEsWUFZSixLQVpJLEdBYUQsS0FBSyxLQWJKLENBWUosS0FaSTtBQWNMLFlBQUksZ0JBQWdCLEdBQVcsSUFBL0I7QUFDQSxZQUFNLE9BQU8sR0FBRyxrQkFBQSxRQUFRLE1BQVIsQ0FBQSxRQUFRLEVBQUssUUFBTCxFQUFlLFVBQUMsS0FBRCxFQUE2QjtBQUVuRSxjQUFJLENBQUMsS0FBTCxFQUFZO0FBQ1gsbUJBQU8sSUFBUDtBQUNBOztBQUprRSw2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