Commit1f562a3

committed

refactor: extract user menu to be TableRowMenu

1 parentef73ad9 commit1f562a3Copy full SHA for 1f562a3

File tree

+59

-5

lines changed

+59

-5

lines changed

Lines changed: 24 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,24 @@`
	`1`	`+import{ComponentMeta,Story}from"@storybook/react"`
	`2`	`+importReactfrom"react"`
	`3`	`+import{TableRowMenu,TableRowMenuProps}from"./TableRowMenu"`
	`4`	`+`
	`5`	`+exportdefault{`
	`6`	`+title:"components/TableRowMenu",`
	`7`	`+component:TableRowMenu,`
	`8`	`+}asComponentMeta<typeofTableRowMenu>`
	`9`	`+`
	`10`	`+typeDataType={`
	`11`	`+id:string`
	`12`	`+}`
	`13`	`+`
	`14`	`+constTemplate:Story<TableRowMenuProps<DataType>>=(args)=><TableRowMenu{...args}/>`
	`15`	`+`
	`16`	`+exportconstExample=Template.bind({})`
	`17`	`+Example.args={`
	`18`	`+data:{id:"123"},`
	`19`	`+menuItems:[`
	`20`	`+{label:"Suspend",onClick:(data)=>alert(data.id)},`
	`21`	`+{label:"Update",onClick:(data)=>alert(data.id)},`
	`22`	`+{label:"Delete",onClick:(data)=>alert(data.id)},`
	`23`	`+],`
	`24`	`+}`

Lines changed: 20 additions & 3 deletions

Original file line number	Diff line number	Diff line change
`@@ -3,9 +3,16 @@ import Menu, { MenuProps } from "@material-ui/core/Menu"`
`3`	`3`	`importMenuItemfrom"@material-ui/core/MenuItem"`
`4`	`4`	`importMoreVertIconfrom"@material-ui/icons/MoreVert"`
`5`	`5`	`importReactfrom"react"`
`6`		`-import{UserResponse}from"../../api/types"`
`7`	`6`
`8`		`-exportconstUserMenu:React.FC<{user:UserResponse}>=()=>{`
	`7`	`+exportinterfaceTableRowMenuProps<TData>{`
	`8`	`+data:TData`
	`9`	`+menuItems:Array<{`
	`10`	`+label:string`
	`11`	`+onClick:(data:TData)=>void`
	`12`	`+}>`
	`13`	`+}`
	`14`	`+`
	`15`	`+exportconstTableRowMenu=<T,>({ data, menuItems}:TableRowMenuProps<T>):JSX.Element=>{`
`9`	`16`	`const[anchorEl,setAnchorEl]=React.useState<MenuProps["anchorEl"]>(null)`
`10`	`17`
`11`	`18`	`consthandleClick=(event:React.MouseEvent)=>{`
`@@ -22,7 +29,17 @@ export const UserMenu: React.FC<{ user: UserResponse }> = () => {`
`22`	`29`	`<MoreVertIcon/>`
`23`	`30`	`</IconButton>`
`24`	`31`	`<Menuid="simple-menu"anchorEl={anchorEl}keepMountedopen={Boolean(anchorEl)}onClose={handleClose}>`
`25`		`-<MenuItemonClick={handleClose}>Suspend</MenuItem>`
	`32`	`+{menuItems.map((item)=>(`
	`33`	`+<MenuItem`
	`34`	`+key={item.label}`
	`35`	`+onClick={()=>{`
	`36`	`+handleClose()`
	`37`	`+item.onClick(data)`
	`38`	`+}}`
	`39`	`+>`
	`40`	`+{item.label}`
	`41`	`+</MenuItem>`
	`42`	`+))}`
`26`	`43`	`</Menu>`
`27`	`44`	`</>`
`28`	`45`	`)`

Lines changed: 15 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -2,14 +2,15 @@ import React from "react"`
`2`	`2`	`import{UserResponse}from"../../api/types"`
`3`	`3`	`import{EmptyState}from"../EmptyState/EmptyState"`
`4`	`4`	`import{Column,Table}from"../Table/Table"`
	`5`	`+import{TableRowMenu}from"../TableRowMenu/TableRowMenu"`
`5`	`6`	`import{UserCell}from"../UserCell/UserCell"`
`6`		`-import{UserMenu}from"./UserMenu"`
`7`	`7`
`8`	`8`	`constLanguage={`
`9`	`9`	`pageTitle:"Users",`
`10`	`10`	`usersTitle:"All users",`
`11`	`11`	`emptyMessage:"No users found",`
`12`	`12`	`usernameLabel:"User",`
	`13`	`+suspendMenuItem:"Suspend",`
`13`	`14`	`}`
`14`	`15`
`15`	`16`	`constemptyState=<EmptyStatemessage={Language.emptyMessage}/>`
`@@ -35,7 +36,19 @@ export const UsersTable: React.FC<UsersTableProps> = ({ users }) => {`
`35`	`36`	`data={users}`
`36`	`37`	`title={Language.usersTitle}`
`37`	`38`	`emptyState={emptyState}`
`38`		`-rowMenu={(user)=><UserMenuuser={user}/>}`
	`39`	`+rowMenu={(user)=>(`
	`40`	`+<TableRowMenu`
	`41`	`+data={user}`
	`42`	`+menuItems={[`
	`43`	`+{`
	`44`	`+label:Language.suspendMenuItem,`
	`45`	`+onClick:()=>{`
	`46`	`+// TO-DO: Add suspend action here`
	`47`	`+},`
	`48`	`+},`
	`49`	`+]}`
	`50`	`+/>`
	`51`	`+)}`
`39`	`52`	`/>`
`40`	`53`	`)`
`41`	`54`	`}`

Comments

(0)