feat: toolbar in accordion (#698)

* feat: toolbar add tooltip prop and mouse event to on click params * feat: add toolbar to accordion * refactor: use toolbar tooltip
zakodium-oss · Apr 8, 2024 · 93f8f45 · 93f8f45
1 parent d564f51
commit 93f8f45
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 16 deletions.
diff --git a/src/components/accordion/Accordion.tsx b/src/components/accordion/Accordion.tsx
@@ -23,6 +23,7 @@ export interface AccordionItemProps {
   title: string;
   children: ReactNode;
   defaultOpened?: boolean;
+  toolbar?: ReactNode;
 }
 
 const styles = {
@@ -62,7 +63,8 @@ export function Accordion(props: AccordionProps) {
 }
 
 Accordion.Item = function AccordionItem(props: AccordionItemProps) {
-  const { item, utils } = useAccordionContext(props.title, props.defaultOpened);
+  const { title, children, defaultOpened, toolbar } = props;
+  const { item, utils } = useAccordionContext(title, defaultOpened);
 
   const onClickHandle = useCallback(
     (event: ReactMouseEvent<HTMLButtonElement>) => {
@@ -75,16 +77,10 @@ Accordion.Item = function AccordionItem(props: AccordionItemProps) {
     [utils],
   );
 
-  let displayable = false;
-
-  if (item) {
-    displayable = item.isOpen;
-  }
-
   return (
     <div
       style={{
-        flex: displayable ? '1 1 1px' : 'none',
+        flex: item?.isOpen ? '1 1 1px' : 'none',
         display: 'flex',
         flexDirection: 'column',
       }}
@@ -97,15 +93,24 @@ Accordion.Item = function AccordionItem(props: AccordionItemProps) {
           alignItems: 'center',
           width: '100%',
           userSelect: 'none',
+          justifyContent: 'space-between',
+          padding: '0px 12px',
         }}
         css={styles.header}
       >
-        {props.title}
+        <div
+          style={{
+            padding: '5px 0px',
+          }}
+        >
+          {title}
+        </div>
+        {toolbar}
       </button>
       <div
         style={{
-          display: displayable ? 'flex' : 'none',
-          flex: displayable ? '1 1 1px' : 'none',
+          display: item?.isOpen ? 'flex' : 'none',
+          flex: item?.isOpen ? '1 1 1px' : 'none',
           backgroundColor: 'white',
           maxHeight: '100%',
           overflow: 'hidden',
@@ -120,7 +125,7 @@ Accordion.Item = function AccordionItem(props: AccordionItemProps) {
             flexDirection: 'column',
           }}
         >
-          {props.children}
+          {children}
         </div>
       </div>
     </div>

diff --git a/src/components/toolbar/Toolbar.tsx b/src/components/toolbar/Toolbar.tsx
@@ -15,6 +15,7 @@ import { css } from '@emotion/react';
 import {
   cloneElement,
   JSX,
+  MouseEvent,
   ReactElement,
   ReactNode,
   useLayoutEffect,
@@ -58,7 +59,11 @@ export interface ToolbarItemProps extends ToolbarBaseProps {
   tooltipProps?: Omit<TooltipProps, 'content'>;
   icon: IconName | JSX.Element;
   active?: boolean;
-  onClick?: (item: ToolbarItemProps) => void;
+  onClick?: (
+    item: ToolbarItemProps & {
+      event: MouseEvent;
+    },
+  ) => void;
   className?: string;
   isPopover?: boolean;
   tag?: ReactNode;
@@ -211,8 +216,8 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
           )}
         </div>
       }
-      onClick={() => {
-        onClick?.(props);
+      onClick={(event) => {
+        onClick?.({ event, ...props });
       }}
       tooltipProps={
         !tooltip

diff --git a/stories/components/accordion.stories.tsx b/stories/components/accordion.stories.tsx
@@ -4,6 +4,7 @@ import {
   Accordion,
   SplitPane,
   Toolbar,
+  ToolbarItemProps,
   useToggleAccordion,
 } from '../../src/components';
 import { AccordionDecorator } from '../utils';
@@ -12,6 +13,30 @@ export default {
   title: 'Components / Accordion',
   decorators: [AccordionDecorator],
 };
+const items: Array<
+  Pick<ToolbarItemProps, 'tooltip' | 'icon' | 'disabled'> & {
+    id: string;
+  }
+> = [
+  {
+    id: 'paperclip-blueprint',
+    icon: 'paperclip',
+    tooltip: 'BlueprintJS paperclip icon',
+  },
+
+  {
+    id: 'clipboard-blueprint',
+    icon: 'clipboard',
+    tooltip: 'BlueprintJS paperclip icon',
+  },
+
+  {
+    id: 'credit-card-blueprint',
+    icon: 'credit-card',
+    tooltip: 'BlueprintJS credit-card icon',
+    disabled: false,
+  },
+];
 
 export function Fixed() {
   return (
@@ -21,7 +46,25 @@ export function Fixed() {
       }}
     >
       <Accordion>
-        <Accordion.Item title="First Item" defaultOpened>
+        <Accordion.Item
+          title="First Item"
+          defaultOpened
+          toolbar={
+            <Toolbar>
+              {items.map((item) => (
+                <Toolbar.Item
+                  key={item.id}
+                  id={item.id}
+                  tooltip={item.tooltip}
+                  icon={item.icon}
+                  onClick={({ event }) => {
+                    event?.stopPropagation();
+                  }}
+                />
+              ))}
+            </Toolbar>
+          }
+        >
           This is the first content
         </Accordion.Item>
         <Accordion.Item title="Second Item">