react-polymorph/lib/skins/simple/SelectSkin.js

React components with highly customizable logic, markup and styles.

"use strict";

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

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

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

var _Options = require("../../components/Options");

var _Input = require("../../components/Input");

var _OptionsSkin = require("./OptionsSkin");

var _InputSkin = require("./InputSkin");

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

// external libraries
// components
// skins
var SelectSkin = function SelectSkin(props) {
  var selectedOption = props.getSelectedOption();
  var inputValue = selectedOption ? selectedOption.label : '';
  var theme = props.theme,
      themeId = props.themeId;
  return /*#__PURE__*/_react["default"].createElement("div", {
    ref: props.rootRef,
    className: (0, _classnames["default"])(props.className, theme[themeId].select, props.isOpen && theme[themeId].isOpen, props.isOpeningUpward && theme[themeId].openUpward, props.disabled && theme[themeId].disabled)
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: theme[themeId].selectInput
  }, /*#__PURE__*/_react["default"].createElement(_Input.Input, {
    skin: _InputSkin.InputSkin,
    theme: theme,
    inputRef: props.inputRef,
    label: props.label,
    value: inputValue,
    onClick: props.handleInputClick,
    placeholder: props.placeholder,
    error: props.error,
    selectionRenderer: props.selectionRenderer,
    readOnly: true,
    disabled: props.disabled,
    selectedOption: selectedOption
  })), /*#__PURE__*/_react["default"].createElement(_Options.Options, {
    skin: _OptionsSkin.OptionsSkin,
    theme: theme,
    hasSearch: props.hasSearch,
    hideSearchClearButton: props.hideSearchClearButton,
    highlightSearch: props.highlightSearch,
    isOpen: props.isOpen,
    optionsRef: props.optionsRef,
    optionsMaxHeight: props.optionsMaxHeight,
    options: props.options,
    isOpeningUpward: props.isOpeningUpward,
    onChange: props.handleChange,
    onSearch: props.onSearch,
    optionRenderer: props.optionRenderer,
    selectedOption: selectedOption,
    noResults: !props.options.length,
    targetRef: props.inputRef,
    toggleMouseLocation: props.toggleMouseLocation,
    toggleOpen: props.toggleOpen,
    optionHeight: props.optionHeight,
    searchHeight: props.searchHeight
  }));
};

exports.SelectSkin = SelectSkin;
//# sourceMappingURL=SelectSkin.js.map