feat(ActionsMenuButton): Add component

JF-Cozy · JF-Cozy · commit cd65a6c9c742 · 2025-08-25T12:08:05.000+02:00
we could pass DotsIcon as prop but for now it's not necessary
diff --git a/react/ActionsMenu/Actions/locales/en.json b/react/ActionsMenu/Actions/locales/en.json
@@ -1,4 +1,5 @@
 {
+  "menu": "Menu",
   "viewInContacts": "View in Cozy Contacts",
   "viewInDrive": "Open",
   "modify": "Modify",
diff --git a/react/ActionsMenu/Actions/locales/fr.json b/react/ActionsMenu/Actions/locales/fr.json
@@ -1,4 +1,5 @@
 {
+  "menu": "Menu",
   "viewInContacts": "Voir dans Cozy Contacts",
   "viewInDrive": "Ouvrir",
   "modify": "Modifier",
diff --git a/react/ActionsMenu/ActionsMenuButton.jsx b/react/ActionsMenu/ActionsMenuButton.jsx
@@ -0,0 +1,45 @@
+import React, { useState, useRef } from 'react'
+
+import ActionsMenu from '.'
+import { locales } from './Actions/locales/withActionsLocales'
+import Icon from '../Icon'
+import IconButton from '../IconButton'
+import DotsIcon from '../Icons/Dots'
+import ListItemIcon from '../ListItemIcon'
+import { useI18n, useExtendI18n } from '../providers/I18n'
+
+const ActionsMenuButton = ({ docs, actions }) => {
+  const [showActions, setShowActions] = useState(false)
+  const actionsRef = useRef()
+  useExtendI18n(locales)
+  const { t } = useI18n()
+
+  return (
+    <>
+      <ListItemIcon>
+        <IconButton
+          ref={actionsRef}
+          arial-label={t('menu')}
+          onClick={() => setShowActions(true)}
+        >
+          <Icon icon={DotsIcon} />
+        </IconButton>
+      </ListItemIcon>
+      {showActions && (
+        <ActionsMenu
+          open
+          ref={actionsRef}
+          docs={docs}
+          actions={actions}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right'
+          }}
+          onClose={() => setShowActions(false)}
+        />
+      )}
+    </>
+  )
+}
+
+export default ActionsMenuButton
diff --git a/react/ContactsList/ContactCell.jsx b/react/ContactsList/ContactCell.jsx
@@ -1,20 +1,9 @@
-import React, { useRef, useState } from 'react'
+import React from 'react'
 
 import ContactIdentity from './Contacts/ContactIdentity'
-import { locales } from './locales/withContactsListLocales'
-import ActionsMenu from '../ActionsMenu'
-import Icon from '../Icon'
-import IconButton from '../IconButton'
-import DotsIcon from '../Icons/Dots'
-import ListItemIcon from '../ListItemIcon'
-import { useI18n, useExtendI18n } from '../providers/I18n'
+import ActionsMenuButton from '../ActionsMenu/ActionsMenuButton'
 
 const Cell = ({ row, column, cell, actions }) => {
-  const [showActions, setShowActions] = useState(false)
-  useExtendI18n(locales)
-  const { t } = useI18n()
-  const actionsRef = useRef()
-
   if (column.id === 'fullname') {
     return <ContactIdentity contact={row} noWrapper />
   }
@@ -24,32 +13,7 @@ const Cell = ({ row, column, cell, actions }) => {
       return null
     }
 
-    return (
-      <>
-        <ListItemIcon>
-          <IconButton
-            ref={actionsRef}
-            arial-label={t('menu')}
-            onClick={() => setShowActions(true)}
-          >
-            <Icon icon={DotsIcon} />
-          </IconButton>
-        </ListItemIcon>
-        {showActions && (
-          <ActionsMenu
-            open
-            ref={actionsRef}
-            docs={[row]}
-            actions={actions}
-            anchorOrigin={{
-              vertical: 'bottom',
-              horizontal: 'right'
-            }}
-            onClose={() => setShowActions(false)}
-          />
-        )}
-      </>
-    )
+    return <ActionsMenuButton docs={[row]} actions={actions} />
   }
 
   return cell
diff --git a/react/ContactsList/locales/en.json b/react/ContactsList/locales/en.json
@@ -1,6 +1,5 @@
 {
   "empty": "EMPTY",
   "me": "me",
-  "favorite": "favorites",
-  "menu": "Menu"
+  "favorite": "favorites"
 }
diff --git a/react/ContactsList/locales/fr.json b/react/ContactsList/locales/fr.json
@@ -1,6 +1,5 @@
 {
   "empty": "VIDE",
   "me": "moi",
-  "favorite": "favoris",
-  "menu": "Menu"
+  "favorite": "favoris"
 }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`{`
	`2`	`+ "menu": "Menu",`
`2`	`3`	`"viewInContacts": "View in Cozy Contacts",`
`3`	`4`	`"viewInDrive": "Open",`
`4`	`5`	`"modify": "Modify",`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`{`
	`2`	`+ "menu": "Menu",`
`2`	`3`	`"viewInContacts": "Voir dans Cozy Contacts",`
`3`	`4`	`"viewInDrive": "Ouvrir",`
`4`	`5`	`"modify": "Modifier",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"empty": "EMPTY",`
`3`	`3`	`"me": "me",`
`4`		`- "favorite": "favorites",`
`5`		`- "menu": "Menu"`
	`4`	`+ "favorite": "favorites"`
`6`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"empty": "VIDE",`
`3`	`3`	`"me": "moi",`
`4`		`- "favorite": "favoris",`
`5`		`- "menu": "Menu"`
	`4`	`+ "favorite": "favoris"`
`6`	`5`	`}`