f11a1fd9cc
feat: implement LabelsPickerField component for selecting multiple labels feat: create NotificationPickerField component for managing notification reminders feat: add PriorityPickerField component for selecting task priority levels feat: implement ProjectPickerField component for selecting projects feat: create RepeatPickerField component for setting up recurring tasks feat: add RepeatPickerPreview component for displaying and selecting repeat options
49 lines
1.2 KiB
JavaScript
49 lines
1.2 KiB
JavaScript
import { FolderOpen } from '@mui/icons-material'
|
|
import BaseOptionPicker from './BaseOptionPicker'
|
|
|
|
const ProjectPickerField = ({
|
|
value = 'default',
|
|
onChange,
|
|
onClear,
|
|
projects = [],
|
|
emptyDisplay = 'icon-text',
|
|
}) => {
|
|
const options = [
|
|
{ id: 'default', name: 'Default Project', color: '#9CA3AF' },
|
|
...projects.map(project => ({
|
|
id: project.id,
|
|
name: project.name,
|
|
color: project.color,
|
|
})),
|
|
]
|
|
|
|
return (
|
|
<BaseOptionPicker
|
|
items={options}
|
|
value={value}
|
|
onChange={onChange}
|
|
onClear={onClear}
|
|
emptyDisplay={emptyDisplay}
|
|
emptyLabel='Project'
|
|
getItemValue={item => item.id}
|
|
getItemLabel={item => item.name}
|
|
getItemColor={item => item.color}
|
|
renderTriggerIcon={() => <FolderOpen sx={{ fontSize: '20px' }} />}
|
|
renderItemStart={({ item }) => (
|
|
<FolderOpen
|
|
sx={{
|
|
fontSize: '18px',
|
|
color: item.color || 'text.secondary',
|
|
}}
|
|
/>
|
|
)}
|
|
getTriggerText={({ selectedItems, isEmpty }) =>
|
|
isEmpty ? 'Project' : selectedItems[0].name
|
|
}
|
|
menuMinWidth={240}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default ProjectPickerField
|