fix: Popper visual fixes

DevoInc · Oct 3, 2022 · feb99a5 · feb99a5
1 parent a576fd0
commit feb99a5
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git a/stories/components/Gallery/Gallery.tsx b/stories/components/Gallery/Gallery.tsx
@@ -57,11 +57,11 @@ export const Gallery: FC<GalleryProps> = ({ icons, search }) => {
     handler: deselect,
   });
 
-  const handleItemClick = (name, tags) => {
+  const handleItemClick = (name, tags, Component) => {
     const clickedItem =
       selectedItem && selectedItem.name[1] === name[1]
         ? undefined
-        : new SingleItem(name, search, tags);
+        : new SingleItem(name, search, tags, Component);
     setSelectedItem(clickedItem);
     const coords = getItemDOMCoords(clickedItem);
     setPopperStyles({
@@ -76,8 +76,14 @@ export const Gallery: FC<GalleryProps> = ({ icons, search }) => {
       {icons.map(({ key, tags, Component }) => (
         <Item
           key={key[1]}
-          item={new SingleItem(key, search, tags)}
-          handleClick={handleItemClick}
+          item={new SingleItem(key, search, tags, Component)}
+          handleClick={() =>
+            handleItemClick(
+              key,
+              tags,
+              <Component key={key} title={key} size={32} />
+            )
+          }
           isSelected={selectedItem?.name[1] === key[1]}
         >
           <Component key={key} title={key} size={32} />

diff --git a/stories/components/Gallery/styles.tsx b/stories/components/Gallery/styles.tsx
@@ -23,7 +23,7 @@ export const getStyledInfoContainer = (styles) => styled.div`
   position: ${styles.position};
   top: ${styles.top}px;
   left: ${styles.left - DEFAULT_POPPER_WIDTH / 2}px;
-  flex-direction: column;
+  flex-direction: row;
   display: flex;
   gap: 12px;
   z-index: 1;

diff --git a/stories/components/Gallery/types.ts b/stories/components/Gallery/types.ts
@@ -2,10 +2,12 @@ export class SingleItem {
   name: [string, string];
   match?: string;
   tags: string[];
+  component: React.ReactNode;
 
-  constructor(name, match, tags) {
+  constructor(name, match, tags, component) {
     this.name = name;
     this.match = match;
     this.tags = tags;
+    this.component = component;
   }
 }
diff --git a/stories/components/Popper/Popper.tsx b/stories/components/Popper/Popper.tsx
@@ -47,6 +47,7 @@ export const Popper = forwardRef(function Popper(props: PopperProps, ref) {
     >
       <div>
         <StyledSvgWrapper>
+          {props.item.component}
           <div className={'d-flex flex-js-center'}>
             <StyledButton
               onClick={() => true}