ffr-components/es/combobox-input/ComboboxInput.js

Fiori styled UI components

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import classnames from 'classnames';
import Popover from '../popover';
import React from 'react';
import "./style.css";
import "../theme/theme.css";

var ComboboxInput = function ComboboxInput(_ref) {
  var placeholder = _ref.placeholder,
      menu = _ref.menu,
      compact = _ref.compact,
      className = _ref.className,
      popoverProps = _ref.popoverProps,
      inputProps = _ref.inputProps,
      buttonProps = _ref.buttonProps,
      toggleMenu = _ref.toggleMenu,
      suggestUpdate = _ref.suggestUpdate,
      props = _objectWithoutProperties(_ref, ["placeholder", "menu", "compact", "className", "popoverProps", "inputProps", "buttonProps", "toggleMenu", "suggestUpdate"]);

  var comboboxInputClasses = classnames('fd-combobox-input', className);
  var comboboxPopoverClasses = classnames('fd-input-group', {
    'fd-input-group--compact': compact
  });
  var comboboxPopoverInputClasses = classnames('fd-input', {
    'fd-input--compact': compact
  });
  return React.createElement("div", _extends({}, props, {
    className: comboboxInputClasses
  }), React.createElement(Popover, _extends({}, popoverProps, {
    toggleMenu: toggleMenu,
    body: menu,
    control: React.createElement("div", {
      className: "fd-combobox-control"
    }, React.createElement("div", {
      className: comboboxPopoverClasses
    }, React.createElement("input", _extends({}, inputProps, {
      className: comboboxPopoverInputClasses,
      placeholder: placeholder,
      type: "text"
    })), React.createElement("span", {
      className: "fd-input-group__addon  fd-input-group__addon--button"
    }, React.createElement("button", _extends({}, buttonProps, {
      className: " fd-button--light sap-icon--navigation-down-arrow"
    }))))),
    popperModifiers: {
      preventOverflow: {
        enabled: true,
        escapeWithReference: true,
        boundariesElement: 'scrollParent'
      }
    },
    noArrow: true,
    suggestUpdate: true
  })));
};

ComboboxInput.displayName = 'ComboboxInput';
ComboboxInput.defaultProps = {
  suggestUpdate: false
};
export default ComboboxInput;