add actionable Button component

Author: nicoecheza

packages/renderer/src/components/Button/component.tsx

@@ -1,18 +1,88 @@
+import { useCallback, useState } from 'react';
 import cx from 'classnames';
-import { Button } from 'decentraland-ui2';
+import { Button, Divider, IconButton, Menu, MenuItem } from 'decentraland-ui2';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 
-import type { Props } from './types';
+import type { Props, ActionsProps } from './types';
 
 import './styles.css';
 
-export function ButtonComponent({ children, className = '', onClick, ...props }: Props) {
+export function ButtonComponent({
+  children,
+  className = '',
+  onClick,
+  actions = [],
+  actionableIcon,
+  ...props
+}: Props) {
   return (
     <Button
       {...props}
       className={cx('Button', className)}
       onClick={onClick}
     >
       {children}
+      <Actions
+        actions={actions}
+        icon={actionableIcon}
+      />
     </Button>
   );
 }
+
+function Actions({ actions, icon }: ActionsProps) {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleOpen = useCallback((event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  }, []);
+
+  const handleClose = useCallback((event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    event.stopPropagation();
+    setAnchorEl(null);
+  }, []);
+
+  const handleClick = useCallback(
+    (fn: () => void) => (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+      event.stopPropagation();
+      setAnchorEl(null);
+      fn();
+    },
+    [],
+  );
+
+  if (!actions.length) return null;
+
+  return (
+    <div className="Actions">
+      <Divider
+        orientation="vertical"
+        flexItem
+        sx={{ mx: 0.5 }}
+      />
+      <IconButton
+        onClick={handleOpen}
+        size="large"
+      >
+        {icon ?? <ArrowDropDownIcon />}
+      </IconButton>
+      <Menu
+        id="ActionsMenu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+      >
+        {actions.map(({ label, onClick }, i) => (
+          <MenuItem
+            key={i}
+            onClick={handleClick(onClick)}
+          >
+            {label}
+          </MenuItem>
+        ))}
+      </Menu>
+    </div>
+  );
+}

packages/renderer/src/components/Button/styles.css

@@ -24,6 +24,10 @@
   background-color: var(--dcl-dark);
 }
 
+.Button.MuiButton-colorPrimary:hover:has(.Actions:hover) {
+  background-color: var(--dcl);
+}
+
 /* Color secondary */
 .Button.MuiButton-colorSecondary {
   background-color: var(--dark-gray);
@@ -49,3 +53,16 @@
 .Button.MuiButton-outlined {
   background-color: transparent;
 }
+
+.Button.MuiButton-root .Actions {
+  display: flex;
+  margin: 5px;
+}
+
+.Button.MuiButton-root:has(.Actions) {
+  padding: 0 0 0 20px;
+}
+
+.Button.MuiButton-root .MuiIconButton-root {
+  padding: 0;
+}

packages/renderer/src/components/Button/types.ts

@@ -1,6 +1,16 @@
+import type { ReactNode } from 'react';
 import type { ButtonOwnProps } from 'decentraland-ui2';
 
+type Action = { label: string; onClick: () => void };
+
 export type Props = ButtonOwnProps & {
   className?: string;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  actions?: Action[];
+  actionableIcon?: ReactNode;
+};
+
+export type ActionsProps = {
+  actions: Action[];
+  icon?: ReactNode;
 };

packages/renderer/src/components/EditorPage/component.tsx

@@ -23,7 +23,7 @@ import { Row } from '../Row';
 
 import './styles.css';
 
-type ModalType = 'publish';
+type ModalType = 'publish' | 'publish_history';
 
 export function EditorPage() {
   const navigate = useNavigate();
@@ -74,15 +74,19 @@ export function EditorPage() {
 
   const handleOpenModal = useCallback(
     (type: ModalType) => () => {
-      const rpc = iframeRef.current;
-      if (rpc) {
-        saveAndGetThumbnail(rpc);
-        setOpen(type);
-      }
+      setOpen(type);
     },
-    [iframeRef.current],
+    [],
   );
 
+  const handleOpenPublish = useCallback(() => {
+    const rpc = iframeRef.current;
+    if (rpc) {
+      saveAndGetThumbnail(rpc);
+      setOpen('publish');
+    }
+  }, [iframeRef.current]);
+
   const handleCloseModal = useCallback(() => {
     setOpen(undefined);
   }, []);
@@ -174,8 +178,14 @@ export function EditorPage() {
               <Button
                 color="primary"
                 disabled={loadingPublish}
-                onClick={handleOpenModal('publish')}
+                onClick={handleOpenPublish}
                 startIcon={loadingPublish ? <Loader size={20} /> : <PublicIcon />}
+                actions={[
+                  {
+                    label: t('editor.header.actions.publish_history'),
+                    onClick: handleOpenModal('publish_history'),
+                  },
+                ]}
               >
                 {t('editor.header.actions.publish')}
               </Button>

packages/renderer/src/modules/store/translation/locales/en.json

@@ -37,7 +37,8 @@
       "actions": {
         "code": "Code",
         "preview": "Preview",
-        "publish": "Publish"
+        "publish": "Publish",
+        "publish_history": "Publishing History"
       }
     }
   },

packages/renderer/src/modules/store/translation/locales/es.json

@@ -37,7 +37,8 @@
       "actions": {
         "code": "Código",
         "preview": "Previsualizar",
-        "publish": "Publicar"
+        "publish": "Publicar",
+        "publish_history": "Historial de Publicaciones"
       }
     }
   },

packages/renderer/src/modules/store/translation/locales/zh.json

@@ -37,7 +37,8 @@
       "actions": {
         "code": "代码",
         "preview": "预览",
-        "publish": "发布"
+        "publish": "发布",
+        "publish_history": "出版历史"
       }
     }
   },