misc_pterodactyl-panel/resources/scripts/components/server/users/PermissionTitleBox.tsx

51 lines
1.6 KiB
TypeScript
Raw Normal View History

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;