feeles-ide/lib/jsx/IntegrationReactSelect.js

The hackable and serializable IDE to make learning material

"use strict";

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

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

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

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

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

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

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

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));

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

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

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _reactSelect = _interopRequireDefault(require("react-select"));

var _styles = require("@material-ui/core/styles");

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _NoSsr = _interopRequireDefault(require("@material-ui/core/NoSsr"));

var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));

var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));

var _Chip = _interopRequireDefault(require("@material-ui/core/Chip"));

var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));

var _Cancel = _interopRequireDefault(require("@material-ui/icons/Cancel"));

var _colorManipulator = require("@material-ui/core/styles/colorManipulator");

/* eslint-disable react/prop-types, react/jsx-handler-names */
var styles = function styles(theme) {
  return {
    root: {
      flexGrow: 1
    },
    input: {
      display: 'flex',
      padding: 0
    },
    valueContainer: {
      display: 'flex',
      flexWrap: 'wrap',
      flex: 1,
      alignItems: 'center'
    },
    chip: {
      margin: "".concat(theme.spacing.unit / 2, "px ").concat(theme.spacing.unit / 4, "px")
    },
    chipFocused: {
      backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700], 0.08)
    },
    noOptionsMessage: {
      padding: "".concat(theme.spacing.unit, "px ").concat(theme.spacing.unit * 2, "px")
    },
    singleValue: {
      fontSize: 16
    },
    placeholder: {
      position: 'absolute',
      left: 2,
      fontSize: 16
    },
    paper: {
      position: 'absolute',
      zIndex: 1,
      marginTop: theme.spacing.unit,
      left: 0,
      right: 0
    },
    divider: {
      height: theme.spacing.unit * 2
    }
  };
};

function NoOptionsMessage(props) {
  return _react.default.createElement(_Typography.default, (0, _extends2.default)({
    color: "textSecondary",
    className: props.selectProps.classes.noOptionsMessage
  }, props.innerProps), props.children);
}

function inputComponent(_ref) {
  var inputRef = _ref.inputRef,
      props = (0, _objectWithoutProperties2.default)(_ref, ["inputRef"]);
  return _react.default.createElement("div", (0, _extends2.default)({
    ref: inputRef
  }, props));
}

function Control(props) {
  return _react.default.createElement(_TextField.default, (0, _extends2.default)({
    fullWidth: true,
    InputProps: {
      inputComponent: inputComponent,
      inputProps: (0, _objectSpread2.default)({
        className: props.selectProps.classes.input,
        inputRef: props.innerRef,
        children: props.children
      }, props.innerProps)
    }
  }, props.selectProps.textFieldProps));
}

function Option(props) {
  return _react.default.createElement(_MenuItem.default, (0, _extends2.default)({
    buttonRef: props.innerRef,
    selected: props.isFocused,
    component: "div",
    style: {
      fontWeight: props.isSelected ? 500 : 400
    }
  }, props.innerProps), props.children);
}

function Placeholder(props) {
  return _react.default.createElement(_Typography.default, (0, _extends2.default)({
    color: "textSecondary",
    className: props.selectProps.classes.placeholder
  }, props.innerProps), props.children);
}

function SingleValue(props) {
  return _react.default.createElement(_Typography.default, (0, _extends2.default)({
    className: props.selectProps.classes.singleValue
  }, props.innerProps), props.children);
}

function ValueContainer(props) {
  return _react.default.createElement("div", {
    className: props.selectProps.classes.valueContainer
  }, props.children);
}

function MultiValue(props) {
  return _react.default.createElement(_Chip.default, {
    tabIndex: -1,
    label: props.children,
    className: (0, _classnames.default)(props.selectProps.classes.chip, (0, _defineProperty2.default)({}, props.selectProps.classes.chipFocused, props.isFocused)),
    onDelete: props.removeProps.onClick,
    deleteIcon: _react.default.createElement(_Cancel.default, props.removeProps)
  });
}

function Menu(props) {
  return _react.default.createElement(_Paper.default, (0, _extends2.default)({
    square: true,
    className: props.selectProps.classes.paper
  }, props.innerProps), props.children);
}

var components = {
  Control: Control,
  Menu: Menu,
  MultiValue: MultiValue,
  NoOptionsMessage: NoOptionsMessage,
  Option: Option,
  Placeholder: Placeholder,
  SingleValue: SingleValue,
  ValueContainer: ValueContainer
};

var IntegrationReactSelect =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(IntegrationReactSelect, _React$Component);

  function IntegrationReactSelect() {
    (0, _classCallCheck2.default)(this, IntegrationReactSelect);
    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(IntegrationReactSelect).apply(this, arguments));
  }

  (0, _createClass2.default)(IntegrationReactSelect, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          classes = _this$props.classes,
          theme = _this$props.theme,
          suggestions = _this$props.suggestions,
          value = _this$props.value,
          onChange = _this$props.onChange,
          placeholder = _this$props.placeholder;
      var selectStyles = {
        input: function input(base) {
          return (0, _objectSpread2.default)({}, base, {
            color: theme.palette.text.primary,
            '& input': {
              font: 'inherit'
            }
          });
        }
      };

      if (!suggestions) {
        debugger;
      }

      return _react.default.createElement("div", {
        className: classes.root
      }, _react.default.createElement(_NoSsr.default, null, _react.default.createElement(_reactSelect.default, {
        classes: classes,
        styles: selectStyles,
        options: suggestions,
        components: components,
        value: value,
        onChange: onChange,
        inputValue: value,
        onInputChange: onChange,
        placeholder: placeholder
      })));
    }
  }]);
  return IntegrationReactSelect;
}(_react.default.Component);

IntegrationReactSelect.propTypes = {
  value: _propTypes.default.string.isRequired,
  onChange: _propTypes.default.func.isRequired,
  suggestions: _propTypes.default.array.isRequired,
  placeholder: _propTypes.default.string.isRequired,
  classes: _propTypes.default.object.isRequired,
  theme: _propTypes.default.object.isRequired
};

var _default = (0, _styles.withStyles)(styles, {
  withTheme: true
})(IntegrationReactSelect);

exports.default = _default;