Merge pull request #56 from mondaycom/moshe/fix_dropdown_abilities

Moshe/fix dropdown abilities

src/components/Dropdown/Dropdown.jsx

@@ -6,10 +6,10 @@ import NOOP from "lodash/noop";
 import { WindowedMenuList } from "react-windowed-select";
 import PropTypes from "prop-types";
 import cx from "classnames";
-import MenuComponent from "./components/Menu/Menu";
+import MenuComponent from "./components/menu/menu";
 import DropdownIndicatorComponent from "./components/DropdownIndicator/DropdownIndicator";
-import OptionComponent from "./components/Option/Option";
-import SingleValueComponent from "./components/SingleValue/SingleValue";
+import OptionComponent from "./components/option/option";
+import SingleValueComponent from "./components/singleValue/singleValue";
 import ClearIndicatorComponent from "./components/ClearIndicator/ClearIndicator";
 import { SIZE, defaultCustomStyles } from "./DropdownConstants";
 import styles, { customTheme } from "./Dropdown.styles";
@@ -32,18 +32,25 @@ const Dropdown = ({
   openMenuOnClick,
   clearable,
   OptionRenderer,
+  optionRenderer,
   ValueRenderer,
+  valueRenderer,
+  menuRenderer,
   rtl,
   size,
   asyncOptions,
   cacheOptions,
   defaultOptions,
   isVirtualized,
   menuPortalTarget,
-  extraStyles
+  extraStyles,
+  menuIsOpen
 }) => {
   const [isOpen, setOpen] = useState(false);
 
+  const finalOptionRenderer = optionRenderer || OptionRenderer;
+  const finalValueRenderer = valueRenderer || ValueRenderer;
+
   const handleMenuOpen = useCallback(
     data => {
       onMenuOpen(data);
@@ -62,16 +69,21 @@ const Dropdown = ({
 
   const customStyles = useMemo(() => extraStyles(styles({ size, rtl })), [size, rtl, extraStyles]);
 
-  const Menu = useCallback(props => <MenuComponent {...props} isOpen={isOpen} />, [isOpen]);
+  const Menu = useCallback(props => <MenuComponent {...props} isOpen={isOpen} Renderer={menuRenderer} />, [
+    isOpen,
+    menuRenderer
+  ]);
 
   const DropdownIndicator = useCallback(props => <DropdownIndicatorComponent {...props} size={size} />, [size]);
 
-  const Option = useCallback(props => <OptionComponent {...props} OptionRenderer={OptionRenderer} />, [OptionRenderer]);
+  const Option = useCallback(props => <OptionComponent {...props} Renderer={finalOptionRenderer} />, [
+    finalOptionRenderer
+  ]);
 
   const Input = useCallback(props => <components.Input {...props} aria-label="Dropdown input" />, []);
 
-  const SingleValue = useCallback(props => <SingleValueComponent {...props} ValueRenderer={ValueRenderer} />, [
-    ValueRenderer
+  const SingleValue = useCallback(props => <SingleValueComponent {...props} Renderer={finalValueRenderer} />, [
+    finalValueRenderer
   ]);
 
   const ClearIndicator = useCallback(props => <ClearIndicatorComponent {...props} size={size} />, [size]);
@@ -98,8 +110,8 @@ const Dropdown = ({
         Menu,
         ClearIndicator,
         Input,
-        ...(OptionRenderer && { Option }),
-        ...(ValueRenderer && { SingleValue }),
+        ...(finalOptionRenderer && { Option }),
+        ...(finalValueRenderer && { SingleValue }),
         ...(isVirtualized && { MenuList: WindowedMenuList })
       }}
       size={size}
@@ -120,6 +132,7 @@ const Dropdown = ({
       styles={customStyles}
       theme={customTheme}
       menuPortalTarget={menuPortalTarget}
+      menuIsOpen={menuIsOpen}
       {...asyncAdditions}
       {...additions}
     />
@@ -204,11 +217,15 @@ Dropdown.propTypes = {
   /**
    * custom option render function
    */
-  OptionRenderer: PropTypes.func,
+  optionRenderer: PropTypes.func,
   /**
    * custom value render function
    */
-  ValueRenderer: PropTypes.func,
+  valueRenderer: PropTypes.func,
+  /**
+   * custom menu render function
+   */
+  menuRenderer: PropTypes.func,
   /**
    * If set to true, the dropdown will be in Right to Left mode
    */

src/components/Dropdown/Dropdown.styles.js

@@ -45,7 +45,7 @@ const disabledContainerStyle = isDisabled => {
   return {
     backgroundColor: getCSSVar("disabled-background-color"),
     color: getCSSVar("primary-text-color"),
-    border: "none",
+    borderColor: "transparent",
     cursor: "not-allowed",
     ":active, :focus, :hover": {
       borderColor: `${getCSSVar("ui-border-color")}`,

src/components/Dropdown/__stories__/dropdown.stories.js

@@ -136,7 +136,7 @@ export const CustomRender = () => (
   <section>
     <StoryStateRow>
       <StoryStateColumn title="Custom render" centerize>
-        <Dropdown className="dropdown-story" OptionRenderer={Icon} searchable name="color" options={mockIcons} />
+        <Dropdown className="dropdown-story" optionRenderer={Icon} searchable name="color" options={mockIcons} />
       </StoryStateColumn>
     </StoryStateRow>
   </section>

src/components/Dropdown/components/Menu/Menu.jsx → src/components/Dropdown/components/menu/menu.jsx

@@ -2,18 +2,19 @@
 import React from "react";
 import cx from "classnames";
 import { components } from "react-select";
-import "./Menu.scss";
+import "./menu.scss";
 
 const Menu = props => {
-  const { isOpen, children } = props;
+  const { isOpen, children, Renderer } = props;
   return (
     <components.Menu
       {...props}
       className={cx("menu", {
         "dropdown-wrapper__menu--open": isOpen
       })}
     >
-      {children}
+      {Renderer && Renderer(props)}
+      {!Renderer && children}
     </components.Menu>
   );
 };

src/components/Dropdown/components/Option/Option.jsx → src/components/Dropdown/components/option/option.jsx

@@ -1,14 +1,15 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from "react";
 import { components } from "react-select";
-import "./Option.scss";
+import "./option.scss";
 
-const Option = ({ OptionRenderer, ...props }) => {
+const Option = ({ Renderer, ...props }) => {
   const { data } = props;
-  if (!OptionRenderer) return null;
+  if (!Renderer) return null;
+
   return (
     <components.Option {...props} className="dropdown-wrapper__option--reset">
-      <OptionRenderer {...data} />
+      <Renderer {...data} />
     </components.Option>
   );
 };

src/components/Dropdown/components/SingleValue/SingleValue.jsx → src/components/Dropdown/components/singleValue/singleValue.jsx

@@ -1,14 +1,14 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from "react";
 import { components } from "react-select";
-import "./SingleValue.scss";
+import "./singleValue.scss";
 
 const SingleValue = props => {
-  const { ValueRenderer, data } = props;
-  if (!ValueRenderer) return null;
+  const { Renderer, data } = props;
+  if (!Renderer) return null;
   return (
     <components.SingleValue {...props} className="dropdown-wrapper__single-value--reset">
-      <ValueRenderer {...data} />
+      <Renderer {...data} />
     </components.SingleValue>
   );
 };