fix(striker-ui): revise header override and item checkbox in List

main
Tsu-ba-me 2 years ago
parent c32471658d
commit 3abd21df72
  1. 202
      striker-ui/components/List.tsx

@ -14,77 +14,71 @@ import {
SxProps,
Theme,
} from '@mui/material';
import { FC, ReactNode, useMemo } from 'react';
import { FC, ReactNode, useCallback, useMemo, useState } from 'react';
import { v4 as uuidv4 } from 'uuid';
import { BLUE, DIVIDER, GREY, RED } from '../lib/consts/DEFAULT_THEME';
import { BLUE, GREY, RED } from '../lib/consts/DEFAULT_THEME';
import Checkbox, { CheckboxProps } from './Checkbox';
import Divider from './Divider';
import FlexBox, { FlexBoxProps } from './FlexBox';
import IconButton, { IconButtonProps } from './IconButton';
import { BodyText } from './Text';
type ListOptionalProps<T = unknown> = {
header?: ReactNode;
isAllowAddItem?: boolean;
isAllowCheckItem?: boolean;
isAllowDelete?: boolean;
isAllowEdit?: boolean;
isAllowEditItem?: boolean;
isEdit?: boolean;
isScroll?: boolean;
listEmpty?: ReactNode;
type OnCheckboxChange = Exclude<CheckboxProps['onChange'], undefined>;
type ListOptionalPropsWithDefaults<T = unknown> = {
allowCheckAll?: boolean;
allowEdit?: boolean;
edit?: boolean;
initialCheckAll?: boolean;
insertHeader?: boolean;
listItemKeyPrefix?: string;
listItemProps?: MUIListItemProps;
listProps?: MUIListProps;
renderListItem?: (key: string, value: T) => ReactNode;
scroll?: boolean;
};
type ListOptionalPropsWithoutDefaults<T = unknown> = {
allowAddItem?: boolean;
allowCheckItem?: boolean;
allowDelete?: boolean;
allowEditItem?: boolean;
header?: ReactNode;
listEmpty?: ReactNode;
onAdd?: IconButtonProps['onClick'];
onDelete?: IconButtonProps['onClick'];
onEdit?: IconButtonProps['onClick'];
onItemCheckboxChange?: CheckboxProps['onChange'];
renderListItem?: (key: string, value: T) => ReactNode;
onAllCheckboxChange?: CheckboxProps['onChange'];
onItemCheckboxChange?: (
key: string,
...onChangeParams: Parameters<OnCheckboxChange>
) => ReturnType<OnCheckboxChange>;
renderListItemCheckboxState?: (key: string, value: T) => boolean;
};
type ListOptionalProps<T = unknown> = ListOptionalPropsWithDefaults<T> &
ListOptionalPropsWithoutDefaults<T>;
type ListProps<T = unknown> = FlexBoxProps &
ListOptionalProps<T> & {
listItems: Record<string, T>;
};
const LIST_DEFAULT_PROPS: Required<
Omit<
ListOptionalProps,
| 'header'
| 'isAllowAddItem'
| 'isAllowCheckItem'
| 'isAllowDelete'
| 'isAllowEditItem'
| 'listEmpty'
| 'onAdd'
| 'onDelete'
| 'onEdit'
| 'onItemCheckboxChange'
>
> &
Pick<
ListOptionalProps,
| 'header'
| 'isAllowAddItem'
| 'isAllowCheckItem'
| 'isAllowDelete'
| 'isAllowEditItem'
| 'listEmpty'
| 'onAdd'
| 'onDelete'
| 'onEdit'
| 'onItemCheckboxChange'
> = {
const HEADER_SPACING = '.3em';
const LIST_DEFAULT_PROPS: Required<ListOptionalPropsWithDefaults> &
ListOptionalPropsWithoutDefaults = {
header: undefined,
isAllowAddItem: undefined,
isAllowCheckItem: undefined,
isAllowDelete: undefined,
isAllowEdit: false,
isAllowEditItem: undefined,
isEdit: false,
isScroll: false,
allowAddItem: undefined,
allowCheckAll: false,
allowCheckItem: undefined,
allowDelete: undefined,
allowEdit: false,
allowEditItem: undefined,
edit: false,
initialCheckAll: false,
insertHeader: true,
listEmpty: undefined,
listItemKeyPrefix: uuidv4(),
listItemProps: {},
@ -92,15 +86,23 @@ const LIST_DEFAULT_PROPS: Required<
onAdd: undefined,
onDelete: undefined,
onEdit: undefined,
onAllCheckboxChange: undefined,
onItemCheckboxChange: undefined,
renderListItem: (key) => <BodyText>{key}</BodyText>,
renderListItemCheckboxState: undefined,
scroll: false,
};
const LIST_ICON_MIN_WIDTH = '56px';
const CHECK_ALL_MIN_WIDTH = `calc(${LIST_ICON_MIN_WIDTH} - ${HEADER_SPACING})`;
const List = <T,>({
header,
isAllowEdit = LIST_DEFAULT_PROPS.isAllowEdit,
isEdit = LIST_DEFAULT_PROPS.isEdit,
isScroll = LIST_DEFAULT_PROPS.isScroll,
allowCheckAll: isAllowCheckAll = LIST_DEFAULT_PROPS.allowCheckAll,
allowEdit: isAllowEdit = LIST_DEFAULT_PROPS.allowEdit,
edit: isEdit = LIST_DEFAULT_PROPS.edit,
initialCheckAll = LIST_DEFAULT_PROPS.initialCheckAll,
insertHeader: isInsertHeader = LIST_DEFAULT_PROPS.insertHeader,
listEmpty = LIST_DEFAULT_PROPS.listEmpty,
listItemKeyPrefix = LIST_DEFAULT_PROPS.listItemKeyPrefix,
listItemProps: {
@ -112,16 +114,21 @@ const List = <T,>({
onAdd,
onDelete,
onEdit,
onAllCheckboxChange,
onItemCheckboxChange,
renderListItem = LIST_DEFAULT_PROPS.renderListItem,
renderListItemCheckboxState,
scroll: isScroll = LIST_DEFAULT_PROPS.scroll,
// Input props that depend on other input props.
isAllowAddItem = isAllowEdit,
isAllowCheckItem = isAllowEdit,
isAllowDelete = isAllowEdit,
isAllowEditItem = isAllowEdit,
allowAddItem: isAllowAddItem = isAllowEdit,
allowCheckItem: isAllowCheckItem = isAllowEdit,
allowDelete: isAllowDelete = isAllowEdit,
allowEditItem: isAllowEditItem = isAllowEdit,
...rootProps
}: ListProps<T>): ReturnType<FC<ListProps<T>>> => {
const [isCheckAll, setIsCheckAll] = useState<boolean>(initialCheckAll);
const addItemButton = useMemo(
() =>
isAllowAddItem ? (
@ -160,19 +167,49 @@ const List = <T,>({
return undefined;
}, [isAllowEditItem, isEdit, onEdit]);
const headerElement = useMemo(
() =>
typeof header === 'string' ? (
<FlexBox row spacing=".3em" sx={{ height: '2.4em' }}>
<BodyText>{header}</BodyText>
<MUIBox
sx={{
borderTopColor: DIVIDER,
borderTopStyle: 'solid',
borderTopWidth: '1px',
flexGrow: 1,
const checkAllElement = useMemo(() => {
let element;
if (isEdit && isAllowCheckItem) {
element = isAllowCheckAll ? (
<MUIBox sx={{ minWidth: CHECK_ALL_MIN_WIDTH }}>
<Checkbox
checked={isCheckAll}
edge="start"
onChange={(...args) => {
const [, isChecked] = args;
onAllCheckboxChange?.call(null, ...args);
setIsCheckAll(isChecked);
}}
/>
</MUIBox>
) : (
<Divider sx={{ minWidth: CHECK_ALL_MIN_WIDTH }} />
);
}
return element;
}, [
isAllowCheckAll,
isAllowCheckItem,
isCheckAll,
isEdit,
onAllCheckboxChange,
]);
const headerElement = useMemo(
() =>
isInsertHeader ? (
<FlexBox row spacing={HEADER_SPACING} sx={{ height: '2.4em' }}>
{checkAllElement}
{typeof header === 'string' ? (
<>
<BodyText>{header}</BodyText>
<Divider sx={{ flexGrow: 1 }} />
</>
) : (
header
)}
{deleteItemButton}
{editItemButton}
{addItemButton}
@ -180,7 +217,14 @@ const List = <T,>({
) : (
header
),
[addItemButton, deleteItemButton, editItemButton, header],
[
addItemButton,
checkAllElement,
deleteItemButton,
editItemButton,
header,
isInsertHeader,
],
);
const listEmptyElement = useMemo(
() =>
@ -191,15 +235,23 @@ const List = <T,>({
),
[listEmpty],
);
const listItemCheckbox = useMemo(
() =>
const listItemCheckbox = useCallback(
(key: string, checked?: boolean) =>
isEdit && isAllowCheckItem ? (
<MUIListItemIcon>
<Checkbox edge="start" onChange={onItemCheckboxChange} />
<MUIListItemIcon sx={{ minWidth: LIST_ICON_MIN_WIDTH }}>
<Checkbox
checked={checked}
edge="start"
onChange={(...args) =>
onItemCheckboxChange?.call(null, key, ...args)
}
/>
</MUIListItemIcon>
) : undefined,
[isAllowCheckItem, isEdit, onItemCheckboxChange],
);
const listItemElements = useMemo(() => {
const entries = Object.entries(listItems);
@ -210,7 +262,10 @@ const List = <T,>({
key={`${listItemKeyPrefix}-${key}`}
sx={{ paddingLeft: 0, paddingRight: 0, ...listItemSx }}
>
{listItemCheckbox}
{listItemCheckbox(
key,
renderListItemCheckboxState?.call(null, key, value),
)}
{renderListItem(key, value)}
</MUIListItem>
))
@ -222,6 +277,7 @@ const List = <T,>({
listItems,
listItemSx,
renderListItem,
renderListItemCheckboxState,
restListItemProps,
]);
const listScrollSx: SxProps<Theme> | undefined = useMemo(

Loading…
Cancel
Save