You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
264 lines
6.8 KiB
264 lines
6.8 KiB
import { |
|
Add as MUIAddIcon, |
|
Delete, |
|
Done as MUIDoneIcon, |
|
Edit as MUIEditIcon, |
|
} from '@mui/icons-material'; |
|
import { |
|
Box as MUIBox, |
|
List as MUIList, |
|
ListItem as MUIListItem, |
|
ListItemIcon as MUIListItemIcon, |
|
SxProps, |
|
Theme, |
|
} from '@mui/material'; |
|
import { |
|
FC, |
|
ForwardedRef, |
|
forwardRef, |
|
useCallback, |
|
useImperativeHandle, |
|
useMemo, |
|
useState, |
|
} from 'react'; |
|
import { v4 as uuidv4 } from 'uuid'; |
|
|
|
import { BLUE, GREY, RED } from '../lib/consts/DEFAULT_THEME'; |
|
|
|
import Checkbox from './Checkbox'; |
|
import Divider from './Divider'; |
|
import FlexBox from './FlexBox'; |
|
import IconButton from './IconButton'; |
|
import { BodyText } from './Text'; |
|
|
|
const List = forwardRef( |
|
<T,>( |
|
{ |
|
allowCheckAll: isAllowCheckAll = false, |
|
allowEdit: isAllowEdit = false, |
|
edit: isEdit = false, |
|
flexBoxProps, |
|
header, |
|
headerSpacing = '.3em', |
|
initialCheckAll = false, |
|
insertHeader: isInsertHeader = true, |
|
listEmpty, |
|
listItemIconMinWidth = '56px', |
|
listItemKeyPrefix = uuidv4(), |
|
listItemProps: { sx: listItemSx, ...restListItemProps } = {}, |
|
listItems, |
|
listProps: { sx: listSx, ...restListProps } = {}, |
|
onAdd, |
|
onDelete, |
|
onEdit, |
|
onAllCheckboxChange, |
|
onItemCheckboxChange, |
|
renderListItem = (key) => <BodyText>{key}</BodyText>, |
|
renderListItemCheckboxState, |
|
scroll: isScroll = false, |
|
// Input props that depend on other input props. |
|
allowAddItem: isAllowAddItem = isAllowEdit, |
|
allowCheckItem: isAllowCheckItem = isAllowEdit, |
|
allowDelete: isAllowDelete = isAllowEdit, |
|
allowEditItem: isAllowEditItem = isAllowEdit, |
|
}: ListProps<T>, |
|
ref: ForwardedRef<ListForwardedRefContent>, |
|
) => { |
|
const [isCheckAll, setIsCheckAll] = useState<boolean>(initialCheckAll); |
|
|
|
const checkAllMinWidth = useMemo( |
|
() => `calc(${listItemIconMinWidth} - ${headerSpacing})`, |
|
[headerSpacing, listItemIconMinWidth], |
|
); |
|
|
|
const addItemButton = useMemo( |
|
() => |
|
isAllowAddItem ? ( |
|
<IconButton onClick={onAdd} size="small"> |
|
<MUIAddIcon /> |
|
</IconButton> |
|
) : undefined, |
|
[isAllowAddItem, onAdd], |
|
); |
|
const deleteItemButton = useMemo( |
|
() => |
|
isEdit && isAllowDelete ? ( |
|
<IconButton |
|
onClick={onDelete} |
|
size="small" |
|
sx={{ |
|
backgroundColor: RED, |
|
color: GREY, |
|
|
|
'&:hover': { backgroundColor: `${RED}F0` }, |
|
}} |
|
> |
|
<Delete /> |
|
</IconButton> |
|
) : undefined, |
|
[isAllowDelete, isEdit, onDelete], |
|
); |
|
const editItemButton = useMemo(() => { |
|
if (isAllowEditItem) { |
|
return ( |
|
<IconButton onClick={onEdit} size="small"> |
|
{isEdit ? <MUIDoneIcon sx={{ color: BLUE }} /> : <MUIEditIcon />} |
|
</IconButton> |
|
); |
|
} |
|
|
|
return undefined; |
|
}, [isAllowEditItem, isEdit, onEdit]); |
|
const checkAllElement = useMemo(() => { |
|
let element; |
|
|
|
if (isEdit && isAllowCheckItem) { |
|
element = isAllowCheckAll ? ( |
|
<MUIBox sx={{ minWidth: checkAllMinWidth }}> |
|
<Checkbox |
|
checked={isCheckAll} |
|
edge="start" |
|
onChange={(...args) => { |
|
const [, isChecked] = args; |
|
|
|
onAllCheckboxChange?.call(null, ...args); |
|
setIsCheckAll(isChecked); |
|
}} |
|
/> |
|
</MUIBox> |
|
) : ( |
|
<Divider sx={{ minWidth: checkAllMinWidth }} /> |
|
); |
|
} |
|
|
|
return element; |
|
}, [ |
|
checkAllMinWidth, |
|
isAllowCheckAll, |
|
isAllowCheckItem, |
|
isCheckAll, |
|
isEdit, |
|
onAllCheckboxChange, |
|
]); |
|
const headerElement = useMemo( |
|
() => |
|
isInsertHeader && header ? ( |
|
<FlexBox row spacing={headerSpacing} sx={{ height: '2.4em' }}> |
|
{checkAllElement} |
|
{typeof header === 'string' ? ( |
|
<> |
|
<BodyText>{header}</BodyText> |
|
<Divider sx={{ flexGrow: 1 }} /> |
|
</> |
|
) : ( |
|
header |
|
)} |
|
{deleteItemButton} |
|
{editItemButton} |
|
{addItemButton} |
|
</FlexBox> |
|
) : ( |
|
header |
|
), |
|
[ |
|
addItemButton, |
|
checkAllElement, |
|
deleteItemButton, |
|
editItemButton, |
|
header, |
|
headerSpacing, |
|
isInsertHeader, |
|
], |
|
); |
|
const listEmptyElement = useMemo( |
|
() => |
|
typeof listEmpty === 'string' ? ( |
|
<BodyText>{listEmpty}</BodyText> |
|
) : ( |
|
listEmpty |
|
), |
|
[listEmpty], |
|
); |
|
|
|
const listItemCheckbox = useCallback( |
|
(key: string, checked?: boolean) => |
|
isEdit && isAllowCheckItem ? ( |
|
<MUIListItemIcon sx={{ minWidth: listItemIconMinWidth }}> |
|
<Checkbox |
|
checked={checked} |
|
edge="start" |
|
onChange={(...args) => |
|
onItemCheckboxChange?.call(null, key, ...args) |
|
} |
|
/> |
|
</MUIListItemIcon> |
|
) : undefined, |
|
[isAllowCheckItem, isEdit, listItemIconMinWidth, onItemCheckboxChange], |
|
); |
|
|
|
const listItemElements = useMemo(() => { |
|
let result = listEmptyElement; |
|
|
|
if (listItems) { |
|
const entries = Object.entries(listItems); |
|
|
|
if (entries.length > 0) { |
|
result = entries.map(([key, value]) => ( |
|
<MUIListItem |
|
{...restListItemProps} |
|
key={`${listItemKeyPrefix}-${key}`} |
|
sx={{ paddingLeft: 0, paddingRight: 0, ...listItemSx }} |
|
> |
|
{listItemCheckbox( |
|
key, |
|
renderListItemCheckboxState?.call(null, key, value), |
|
)} |
|
{renderListItem(key, value)} |
|
</MUIListItem> |
|
)); |
|
} |
|
} |
|
|
|
return result; |
|
}, [ |
|
listEmptyElement, |
|
listItemCheckbox, |
|
listItemKeyPrefix, |
|
listItems, |
|
listItemSx, |
|
renderListItem, |
|
renderListItemCheckboxState, |
|
restListItemProps, |
|
]); |
|
const listScrollSx: SxProps<Theme> | undefined = useMemo( |
|
() => (isScroll ? { maxHeight: '100%', overflowY: 'scroll' } : undefined), |
|
[isScroll], |
|
); |
|
|
|
useImperativeHandle( |
|
ref, |
|
() => ({ |
|
setCheckAll: (value) => setIsCheckAll(value), |
|
}), |
|
[], |
|
); |
|
|
|
return ( |
|
<FlexBox spacing={0} {...flexBoxProps}> |
|
{headerElement} |
|
<MUIList |
|
{...restListProps} |
|
sx={{ paddingBottom: 0, paddingTop: 0, ...listScrollSx, ...listSx }} |
|
> |
|
{listItemElements} |
|
</MUIList> |
|
</FlexBox> |
|
); |
|
}, |
|
); |
|
|
|
List.displayName = 'List'; |
|
|
|
export default List as <T>( |
|
props: ListProps<T> & { ref?: ForwardedRef<ListForwardedRefContent> }, |
|
) => ReturnType<FC<ListProps<T>>>;
|
|
|