Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | import React, { useState, FC } from 'react'
import { Button, Alert, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'
import { STATUS } from './UserTable'
function OnlyStatusFactory(user) {
return ({ status, children }) => user.status === status && children
}
interface Props {
me: any
user: any
handleClickEdit: (user: any) => void
handleClickResetPassword: (user: any) => void
handleClickApprove: (user: any) => void
handleClickSuspend: (user: any) => void
handleClickRestore: (user: any) => void
handleClickRemove: (user: any) => void
handleClickRemoveCompletely: (user: any) => void
handleClickRevokeAdmin: (user: any) => void
handleClickGrantAdmin: (user: any) => void
}
const UserEditDropdown: FC<Props> = ({ me, user, ...props }) => {
const { admin, username } = user
const [open, setOpen] = useState(false)
const {
handleClickEdit,
handleClickResetPassword,
handleClickApprove,
handleClickSuspend,
handleClickRestore,
handleClickRemove,
handleClickRemoveCompletely,
handleClickRevokeAdmin,
handleClickGrantAdmin,
} = props
const OnlyStatus = OnlyStatusFactory(user)
return (
<Dropdown isOpen={open} toggle={() => setOpen(!open)}>
<DropdownToggle color="light" caret>
編集
</DropdownToggle>
<DropdownMenu right>
<div className="dropdown-menu-buttons">
<DropdownItem header>編集メニュー</DropdownItem>
<Button color="light" onClick={() => handleClickEdit(user)}>
編集
</Button>
<Button color="light" onClick={() => handleClickResetPassword(user)}>
パスワードの再発行
</Button>
<DropdownItem header>ステータス</DropdownItem>
<OnlyStatus status={STATUS.REGISTERED}>
<Button color="info" onClick={() => handleClickApprove(user)}>
承認する
</Button>
</OnlyStatus>
<OnlyStatus status={STATUS.ACTIVE}>
<Button color="warning" onClick={() => handleClickSuspend(user)}>
アカウント停止
</Button>
</OnlyStatus>
<OnlyStatus status={STATUS.SUSPENDED}>
<Button color="light" onClick={() => handleClickRestore(user)}>
元に戻す
</Button>
</OnlyStatus>
{/* label は同じだけど、こっちは論理削除 */}
<Button color="danger" onClick={() => handleClickRemove(user)}>
削除する
</Button>
{/* label は同じだけど、こっちは物理削除 */}
<OnlyStatus status={STATUS.INVITED}>
<Button color="danger" onClick={() => handleClickRemoveCompletely(user)}>
削除する
</Button>
</OnlyStatus>
<OnlyStatus status={STATUS.ACTIVE}>
{/* activated な人だけこのメニューを表示 */}
<DropdownItem header>管理者メニュー</DropdownItem>
{admin ? (
username !== me.username ? (
<Button color="danger" onClick={() => handleClickRevokeAdmin(user)}>
管理者からはずす
</Button>
) : (
<DropdownItem>
<Alert color="danger">自分自身を管理者から外すことはできません</Alert>
</DropdownItem>
)
) : (
<Button color="primary" onClick={() => handleClickGrantAdmin(user)}>
管理者にする
</Button>
)}
</OnlyStatus>
</div>
</DropdownMenu>
</Dropdown>
)
}
export default UserEditDropdown
|