feat(list): implement more menu

src/components/sectionList/SectionListRow.tsx

@@ -5,6 +5,11 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import { CheckBoxOnChangeObject } from '../../types'
 import { IdentifiableObject, GistModel } from '../../types/models'
+import {
+    ListActions,
+    ActionEdit,
+    ActionMore,
+} from './listActions/SectionListActions'
 import css from './SectionList.module.css'
 import { SelectedColumns, SelectedColumn } from './types'
 
@@ -51,35 +56,38 @@ export function SectionListRow<Model extends IdentifiableObject>({
                 </DataTableCell>
             ))}
             <DataTableCell>
-                <ListActions modelId={modelData.id} />
+                <ListActions>
+                    <ActionEdit modelId={modelData.id} />
+                    <ActionMore />
+                </ListActions>
             </DataTableCell>
         </DataTableRow>
     )
 }
 
-const ListActions = ({ modelId }: { modelId: string }) => {
-    return (
-        <div className={css.listActions}>
-            <ActionEdit modelId={modelId} />
-            <ActionMore />
-        </div>
-    )
-}
+// const ListActions = ({ modelId }: { modelId: string }) => {
+//     return (
+//         <div className={css.listActions}>
+//             <ActionEdit modelId={modelId} />
+//             <ActionMore />
+//         </div>
+//     )
+// }
 
-const ActionEdit = ({ modelId }: { modelId: string }) => {
-    return (
-        <Link to={`${modelId}`}>
-            <Button small secondary>
-                <IconEdit24 />
-            </Button>
-        </Link>
-    )
-}
+// const ActionEdit = ({ modelId }: { modelId: string }) => {
+//     return (
+//         <Link to={`${modelId}`}>
+//             <Button small secondary>
+//                 <IconEdit24 />
+//             </Button>
+//         </Link>
+//     )
+// }
 
-const ActionMore = () => {
-    return (
-        <Button small secondary>
-            <IconMore24 />
-        </Button>
-    )
-}
+// const ActionMore = () => {
+//     return (
+//         <Button small secondary>
+//             <IconMore24 />
+//         </Button>
+//     )
+// }

src/components/sectionList/listActions/SectionListActions.module.css

@@ -0,0 +1,12 @@
+.listActions {
+    display: flex;
+    gap: var(--spacers-dp8);
+}
+
+.listActions button {
+    padding: 0 2px !important;
+}
+
+.actionMorePopover {
+    box-shadow: none !important;
+}

src/components/sectionList/listActions/SectionListActions.tsx

@@ -0,0 +1,60 @@
+import {
+    Button,
+    FlyoutMenu,
+    IconEdit16,
+    IconEdit24,
+    IconMore16,
+    IconMore24,
+    MenuItem,
+    Popover,
+} from '@dhis2/ui'
+import React, { useRef, useState } from 'react'
+import { Link } from 'react-router-dom'
+import css from './SectionListActions.module.css'
+
+export const ListActions = ({ children }: React.PropsWithChildren) => {
+    return <div className={css.listActions}>{children}</div>
+}
+
+export const ActionEdit = ({ modelId }: { modelId: string }) => {
+    return (
+        <Link to={`${modelId}`}>
+            <Button small secondary>
+                <IconEdit24 />
+            </Button>
+        </Link>
+    )
+}
+
+export const ActionMore = () => {
+    const [open, setOpen] = useState(false)
+    const ref = useRef(null)
+    return (
+        <div ref={ref}>
+            <Button small secondary onClick={() => setOpen(!open)}>
+                <IconMore24 />
+                {open && (
+                    <Popover
+                        className={css.actionMorePopover}
+                        arrow={false}
+                        placement="bottom-end"
+                        reference={ref}
+                    >
+                        <FlyoutMenu>
+                            <MenuItem
+                                dense
+                                label={'Show details'}
+                                icon={<IconMore16 />}
+                            />
+                            <MenuItem
+                                dense
+                                label={'Edit'}
+                                icon={<IconEdit16 />}
+                            />
+                        </FlyoutMenu>
+                    </Popover>
+                )}
+            </Button>
+        </div>
+    )
+}