responsive list placeholder (#175)

mondaycom · Jul 25, 2021 · 15aa031 · 15aa031
1 parent 5ccbe1d
commit 15aa031
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/components/ResponsiveList/ResponsiveList.jsx b/src/components/ResponsiveList/ResponsiveList.jsx
@@ -54,6 +54,13 @@ const ResponsiveList = forwardRef(
       return childrenArray.slice(index, childrenArray.length);
     }, [children, index]);
 
+
+    const hiddenChildren = useMemo(() => {
+      const childrenArray = React.Children.toArray(children);
+
+      return childrenArray.map(el => el?.props?.responsiveListPlaceholder || el);
+    }, [children]);
+
     return (
       <div className={cx("responsive-list--root", rootClassName)} id={id}>
         {index !== null && (
@@ -74,7 +81,7 @@ const ResponsiveList = forwardRef(
           </div>
         )}
         <div ref={mergedRef} className={cx("responsive-list--wrapper responsive-list--dummy", className)}>
-          {children}
+          {hiddenChildren}
           <MenuButton
             componentClassName={cx("responsive-list-menu-button", menuButtonClassName)}
             size={menuButtonSize}

diff --git a/src/components/ResponsiveList/__stories__/responsiveList.stories.js b/src/components/ResponsiveList/__stories__/responsiveList.stories.js
@@ -39,7 +39,13 @@ const DefaultExampleTemplate = (responseListProps) => {
     <SplitButton size={SplitButton.sizes.MAIN} marginRight secondaryDialogContent={<SecondaryContentComponent />}>
       Add Item
     </SplitButton>
-    <div className="responsive-lst-search">
+    <div className="responsive-lst-search" responsiveListPlaceholder={<Search
+      id={"search-icon-inside"}
+      size={Search.sizes.MEDIUM}
+      placeholder="search for content"
+      iconName={() => <SearchIcon />}
+      secondaryIconName={() => <CloseSmall />}
+    />}>
       <Search
         size={Search.sizes.MEDIUM}
         placeholder="search for content"