@geezee/react-ui/esm/auto-complete/auto-complete-dropdown.js

Modern and minimalist React UI library.

import _JSXStyle from "styled-jsx/style";
import React, { useMemo } from 'react';
import useTheme from '../styles/use-theme';
import withDefaults from '../utils/with-defaults';
import { useAutoCompleteContext } from './auto-complete-context';
import Dropdown from '../shared/dropdown';
import { getColors } from '../input/styles';
var defaultProps = {
  variant: 'line',
  className: '',
  dropdownStyle: {}
};

var AutoCompleteDropdown = function AutoCompleteDropdown(_ref) {
  var children = _ref.children,
      variant = _ref.variant,
      visible = _ref.visible,
      className = _ref.className,
      dropdownStyle = _ref.dropdownStyle,
      disableMatchWidth = _ref.disableMatchWidth;
  var isSolid = variant === 'solid';
  var theme = useTheme();

  var _useAutoCompleteConte = useAutoCompleteContext(),
      ref = _useAutoCompleteConte.ref,
      value = _useAutoCompleteConte.value;

  var _useMemo = useMemo(function () {
    return getColors(theme, 'default', isSolid);
  }, [theme, status, isSolid]),
      border = _useMemo.border,
      hoverBorderColor = _useMemo.hoverBorderColor,
      hoverBackgroundColor = _useMemo.hoverBackgroundColor;

  var clickHandler = function clickHandler(event) {
    event.preventDefault();
    event.stopPropagation();
    event.nativeEvent.stopImmediatePropagation();
  };

  return /*#__PURE__*/React.createElement(Dropdown, {
    parent: ref,
    visible: visible,
    disableMatchWidth: disableMatchWidth,
    clearTime: value === '' ? 0 : 60,
    leaveTime: value === '' ? 0 : 60
  }, /*#__PURE__*/React.createElement("div", {
    style: dropdownStyle,
    onClick: clickHandler,
    className: _JSXStyle.dynamic([["943999136", [theme.expressiveness.R2, hoverBackgroundColor, border, hoverBorderColor, theme.layout.gapHalf, theme.layout.gapHalf, theme.layout.gapHalf, theme.palette.cTheme7, hoverBorderColor]]]) + " " + "auto-complete-dropdown ".concat(isSolid ? 'solid' : 'line', " ").concat(className)
  }, /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["943999136", [theme.expressiveness.R2, hoverBackgroundColor, border, hoverBorderColor, theme.layout.gapHalf, theme.layout.gapHalf, theme.layout.gapHalf, theme.palette.cTheme7, hoverBorderColor]]]) + " " + "divider"
  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "943999136",
    dynamic: [theme.expressiveness.R2, hoverBackgroundColor, border, hoverBorderColor, theme.layout.gapHalf, theme.layout.gapHalf, theme.layout.gapHalf, theme.palette.cTheme7, hoverBorderColor]
  }, ".auto-complete-dropdown.__jsx-style-dynamic-selector{margin-top:-3px;border-radius:".concat(theme.expressiveness.R2, ";border-top-left-radius:0;border-top-right-radius:0;background-color:").concat(hoverBackgroundColor, ";border:").concat(border, ";border-top:0;border-color:").concat(hoverBorderColor, ";overflow-y:auto;max-height:15rem;overflow-anchor:none;}.auto-complete-dropdown.__jsx-style-dynamic-selector .divider.__jsx-style-dynamic-selector{height:1px;margin:auto;margin-right:").concat(theme.layout.gapHalf, ";margin-left:").concat(theme.layout.gapHalf, ";margin-bottom:calc(").concat(theme.layout.gapHalf, " * 0.375);z-index:1110;}.solid.auto-complete-dropdown.__jsx-style-dynamic-selector .divider.__jsx-style-dynamic-selector{border-bottom:1px dashed ").concat(theme.palette.cTheme7, ";}.line.auto-complete-dropdown.__jsx-style-dynamic-selector .divider.__jsx-style-dynamic-selector{border-bottom:1px dashed ").concat(hoverBorderColor, ";}"))));
};

export default withDefaults(AutoCompleteDropdown, defaultProps);