51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
|
import React, { memo, useCallback } from 'react';
|
||
|
|
import { useField } from 'formik';
|
||
|
|
import TitledGreyBox from '@/components/elements/TitledGreyBox';
|
||
|
|
import tw from 'twin.macro';
|
||
|
|
import Input from '@/components/elements/Input';
|
||
|
|
import isEqual from 'react-fast-compare';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
isEditable: boolean;
|
||
|
|
title: string;
|
||
|
|
permissions: string[];
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const PermissionTitleBox: React.FC<Props> = memo(({ isEditable, title, permissions, className, children }) => {
|
||
|
|
const [ { value }, , { setValue } ] = useField<string[]>('permissions');
|
||
|
|
|
||
|
|
const onCheckboxClicked = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||
|
|
if (e.currentTarget.checked) {
|
||
|
|
setValue([
|
||
|
|
...value,
|
||
|
|
...permissions.filter(p => !value.includes(p)),
|
||
|
|
]);
|
||
|
|
} else {
|
||
|
|
setValue(value.filter(p => !permissions.includes(p)));
|
||
|
|
}
|
||
|
|
}, [ permissions, value ]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<TitledGreyBox
|
||
|
|
title={
|
||
|
|
<div css={tw`flex items-center`}>
|
||
|
|
<p css={tw`text-sm uppercase flex-1`}>{title}</p>
|
||
|
|
{isEditable &&
|
||
|
|
<Input
|
||
|
|
type={'checkbox'}
|
||
|
|
checked={permissions.every(p => value.includes(p))}
|
||
|
|
onChange={onCheckboxClicked}
|
||
|
|
/>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
className={className}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</TitledGreyBox>
|
||
|
|
);
|
||
|
|
}, isEqual);
|
||
|
|
|
||
|
|
export default PermissionTitleBox;
|