Portal/rsconcept/frontend/src/components/select/SelectAccessPolicy.tsx

61 lines
1.7 KiB
TypeScript
Raw Normal View History

2024-06-07 20:17:03 +03:00
'use client';
import { useCallback } from 'react';
import Dropdown from '@/components/ui/Dropdown';
import useDropdown from '@/hooks/useDropdown';
import { AccessPolicy } from '@/models/library';
import { prefixes } from '@/utils/constants';
import { describeAccessPolicy, labelAccessPolicy } from '@/utils/labels';
import { PolicyIcon } from '../DomainIcons';
import DropdownButton from '../ui/DropdownButton';
import MiniButton from '../ui/MiniButton';
interface SelectAccessPolicyProps {
value: AccessPolicy;
onChange: (value: AccessPolicy) => void;
disabled?: boolean;
stretchLeft?: boolean;
}
function SelectAccessPolicy({ value, disabled, stretchLeft, onChange }: SelectAccessPolicyProps) {
const menu = useDropdown();
const handleChange = useCallback(
(newValue: AccessPolicy) => {
menu.hide();
if (newValue !== value) {
onChange(newValue);
}
},
[menu, value, onChange]
);
return (
<div ref={menu.ref}>
<MiniButton
title={`Доступ: ${labelAccessPolicy(value)}`}
hideTitle={menu.isOpen}
className='h-full disabled:cursor-auto'
icon={<PolicyIcon value={value} size='1.25rem' />}
onClick={menu.toggle}
disabled={disabled}
/>
<Dropdown isOpen={menu.isOpen} stretchLeft={stretchLeft}>
{Object.values(AccessPolicy).map((item, index) => (
<DropdownButton
key={`${prefixes.policy_list}${index}`}
text={labelAccessPolicy(item)}
title={describeAccessPolicy(item)}
icon={<PolicyIcon value={item} size='1rem' />}
onClick={() => handleChange(item)}
/>
))}
</Dropdown>
</div>
);
}
export default SelectAccessPolicy;