@flexis/ui/components/CustomSelect/CustomSelect.es.js

Styleless React Components

import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
import _extends from "@babel/runtime-corejs3/helpers/extends";
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
import _createClass from "@babel/runtime-corejs3/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime-corejs3/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime-corejs3/helpers/getPrototypeOf";
import _inherits from "@babel/runtime-corejs3/helpers/inherits";

function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(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 _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }

import { __decorate } from "tslib";
import React from 'react';
var _createElement = React.createElement;
var PureComponent = React.PureComponent,
    Children = React.Children;
import PropTypes from 'prop-types';
import { Bind, omit, getAriaLabelProps } from '../../helpers';
import isCurrentValue from '../common/isCurrentValue';
import Dropdown, { DropdownContent } from '../Dropdown';
import CustomFlatSelect from '../CustomFlatSelect';
import { isCustomSelectFace } from './CustomSelectFace';
import { style, classes } from './CustomSelect.st.css';
export * from './CustomSelectFace';
export * from './CustomSelectOption';

var _ref = /*#__PURE__*/_createElement("i", null, "\xA0");

var CustomSelect =
/** @class */
function () {
  var CustomSelect = /*#__PURE__*/function (_PureComponent) {
    _inherits(CustomSelect, _PureComponent);

    function CustomSelect(props) {
      var _this;

      _classCallCheck(this, CustomSelect);

      _this = _possibleConstructorReturn(this, _getPrototypeOf(CustomSelect).call(this, props));
      _this.dropdownRef = null;
      var defaultValue = props.defaultValue;
      _this.state = {
        value: defaultValue
      };
      return _this;
    }

    _createClass(CustomSelect, [{
      key: "render",
      value: function render() {
        var _this$props = this.props,
            className = _this$props.className,
            ariaLabelledBy = _this$props['aria-labelledby'],
            ariaLabel = _this$props['aria-label'],
            styleProp = _this$props.style,
            name = _this$props.name,
            placeholder = _this$props.placeholder,
            multiple = _this$props.multiple,
            disabled = _this$props.disabled,
            children = _this$props.children,
            props = _objectWithoutProperties(_this$props, ["className", "aria-labelledby", "aria-label", "style", "name", "placeholder", "multiple", "disabled", "children"]);

        var value = this.state.value;
        var ariaLabelProps = getAriaLabelProps({
          labelledBy: ariaLabelledBy,
          label: ariaLabel || placeholder
        });
        var label = multiple ? [] : '';
        var selectFace = null;

        var options = _mapInstanceProperty(Children).call(Children, children, function (child) {
          if (!child) {
            return null;
          }

          if (child.type[isCustomSelectFace]) {
            selectFace = child;
            return null;
          }

          var _child$props = child.props,
              optionValue = _child$props.value,
              optionLabel = _child$props.children;
          var option = typeof optionValue === 'undefined' ? optionLabel : optionValue;
          var checked = isCurrentValue(multiple, value, option);

          if (checked) {
            if (multiple) {
              label.push(optionLabel);
            } else {
              label = optionLabel;
            }
          }

          return child;
        });

        return _createElement(Dropdown, {
          ref: this.onDropdownRef,
          className: style(classes.root, className),
          style: styleProp,
          disabled: disabled
        }, this.face(selectFace, label), _createElement(DropdownContent, _extends({}, ariaLabelProps, {
          className: classes.dropdownContent,
          role: "region",
          "aria-multiselectable": multiple
        }), _createElement(CustomFlatSelect, _extends({}, omit(props, ['elementRef']), ariaLabelProps, {
          className: classes.options,
          name: name,
          multiple: multiple,
          onClick: this.onDropdownHide,
          onChange: this.onChange,
          value: value,
          disabled: disabled
        }), options)), name && _createElement("input", {
          type: "hidden",
          name: name,
          value: value || ''
        }));
      }
    }, {
      key: "face",
      value: function face(faceChild, label) {
        var _this$props2 = this.props,
            multiple = _this$props2.multiple,
            placeholder = _this$props2.placeholder,
            disabled = _this$props2.disabled;

        var faceLabel = (multiple ? label.join(', ') : label) || placeholder && _createElement("span", {
          className: classes.placeholder
        }, placeholder) || _ref;

        if (!faceChild) {
          return _createElement("button", {
            type: "button",
            disabled: disabled
          }, faceLabel);
        }

        var _faceChild$props = faceChild.props,
            renderFace = _faceChild$props.children,
            props = _objectWithoutProperties(_faceChild$props, ["children"]);

        var faceProps = _objectSpread({
          multiple: multiple,
          disabled: disabled
        }, props);

        return renderFace(faceLabel, faceProps);
      }
    }, {
      key: "onDropdownRef",
      value: function onDropdownRef(ref) {
        var elementRef = this.props.elementRef;
        this.dropdownRef = ref;

        if (typeof elementRef === 'function') {
          elementRef(ref);
        }
      }
    }, {
      key: "onDropdownHide",
      value: function onDropdownHide(event) {
        var multiple = this.props.multiple;
        var dropdownRef = this.dropdownRef;

        if (!multiple && dropdownRef) {
          dropdownRef.toggleActiveState(false, event);
        }
      }
    }, {
      key: "onChange",
      value: function onChange(nextValue, event) {
        var onChange = this.props.onChange;
        this.setState(function () {
          return {
            value: nextValue
          };
        });

        if (typeof onChange === 'function') {
          onChange(nextValue, event);
        }
      }
    }]);

    return CustomSelect;
  }(PureComponent);

  process.env.NODE_ENV !== "production" ? CustomSelect.propTypes = _objectSpread({}, CustomFlatSelect.propTypes, {
    elementRef: PropTypes.func,
    style: PropTypes.object,
    placeholder: PropTypes.string
  }) : void 0;
  CustomSelect.defaultProps = CustomFlatSelect.defaultProps;
  CustomSelect.getDerivedStateFromProps = CustomFlatSelect.getDerivedStateFromProps;

  __decorate([Bind()], CustomSelect.prototype, "onDropdownRef", null);

  __decorate([Bind()], CustomSelect.prototype, "onDropdownHide", null);

  __decorate([Bind()], CustomSelect.prototype, "onChange", null);

  return CustomSelect;
}();

export default CustomSelect;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0N1c3RvbVNlbGVjdC9DdXN0b21TZWxlY3QudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFQLE1BUU8sT0FSUDs7OztBQVNBLE9BQU8sU0FBUCxNQUFzQixZQUF0QjtBQUNBLFNBRUMsSUFGRCxFQUdDLElBSEQsRUFJQyxpQkFKRCxRQUtPLGVBTFA7QUFTQSxPQUFPLGNBQVAsTUFBMkIsMEJBQTNCO0FBQ0EsT0FBTyxRQUFQLElBRUMsZUFGRCxRQUdPLGFBSFA7QUFJQSxPQUFPLGdCQUFQLE1BRU8scUJBRlA7QUFHQSxTQUNDLGtCQURELFFBRU8sb0JBRlA7QUFHQSxTQUNDLEtBREQsRUFFQyxPQUZELFFBR08sdUJBSFA7QUFLQSxjQUFjLG9CQUFkO0FBQ0EsY0FBYyxzQkFBZDs7d0JBNEpJLGlDOztBQTNJSixJQUFBLFlBQUE7QUFBQTtBQUFBLFlBQUE7QUFBQSxNQUFxQixZQUFyQjtBQUFBOztBQWVDLDBCQUFZLEtBQVosRUFBaUI7QUFBQTs7QUFBQTs7QUFFaEIsd0ZBQU0sS0FBTjtBQUpPLFlBQUEsV0FBQSxHQUF3QixJQUF4QjtBQUVTLFVBS2YsWUFMZSxHQU1aLEtBTlksQ0FLZixZQUxlO0FBUWhCLFlBQUssS0FBTCxHQUFhO0FBQ1osUUFBQSxLQUFLLEVBQUU7QUFESyxPQUFiO0FBUmdCO0FBV2hCOztBQTFCRjtBQUFBO0FBQUEsK0JBNEJPO0FBQUEsMEJBYUQsS0FBSyxLQWJKO0FBQUEsWUFHSixTQUhJLGVBR0osU0FISTtBQUFBLFlBSWUsY0FKZixlQUlKLGlCQUpJO0FBQUEsWUFLVSxTQUxWLGVBS0osWUFMSTtBQUFBLFlBTUcsU0FOSCxlQU1KLEtBTkk7QUFBQSxZQU9KLElBUEksZUFPSixJQVBJO0FBQUEsWUFRSixXQVJJLGVBUUosV0FSSTtBQUFBLFlBU0osUUFUSSxlQVNKLFFBVEk7QUFBQSxZQVVKLFFBVkksZUFVSixRQVZJ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