@activecollab/components/dist/esm/components/MenuSelector/MenuSelector.js

ActiveCollab Components

import React, { useCallback } from "react";
import classNames from "classnames";
import { StyledMenuSelector, StyledMenuSelectorBack, StyledMenuSelectorDots, StyledMenuSelectorInner } from "./Styles";
import { Input } from "../Input";
export const MenuSelector = _ref => {
  let defaultValue = _ref.defaultValue,
    children = _ref.children,
    placeholder = _ref.placeholder,
    onChange = _ref.onChange,
    onBack = _ref.onBack,
    onEdit = _ref.onEdit,
    _ref$autoFocus = _ref.autoFocus,
    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
    className = _ref.className,
    onFocus = _ref.onFocus,
    onBlur = _ref.onBlur,
    _ref$autoComplete = _ref.autoComplete,
    autoComplete = _ref$autoComplete === void 0 ? false : _ref$autoComplete;
  const handleChange = useCallback(e => {
    if (typeof onChange === "function") {
      onChange(e.target.value);
    }
  }, [onChange]);
  return /*#__PURE__*/React.createElement(StyledMenuSelector, {
    className: classNames("c-menu-selector", className)
  }, /*#__PURE__*/React.createElement(StyledMenuSelectorInner, null, typeof onBack === "function" ? /*#__PURE__*/React.createElement(StyledMenuSelectorBack, {
    onClick: onBack,
    width: "16px",
    height: "16px"
  }) : null, /*#__PURE__*/React.createElement(Input, {
    onChange: handleChange,
    placeholder: placeholder,
    autoFocus: autoFocus,
    defaultValue: defaultValue,
    onFocus: onFocus,
    onBlur: onBlur,
    autoComplete: autoComplete ? "on" : "off"
  }), typeof onEdit === "function" ? /*#__PURE__*/React.createElement(StyledMenuSelectorDots, {
    onClick: onEdit
  }) : null), children);
};
MenuSelector.displayName = "MenuSelector";
//# sourceMappingURL=MenuSelector.js.map