import { Box, List as MUIList, ListItem as MUIListItem } from '@mui/material';
import { FC, ReactElement } from 'react';
import { REP_LABEL_PASSW } from '../lib/consts/REG_EXP_PATTERNS';
import disassembleCamel from '../lib/disassembleCamel';
import FlexBox from './FlexBox';
import { BodyText, MonoText, SensitiveText } from './Text';
const renderEntryValueWithMono: RenderFormValueFunction = ({ entry }) => (
{String(entry)}
);
const renderEntryValueWithPassword: RenderFormValueFunction = (args) => {
const { entry, key } = args;
return REP_LABEL_PASSW.test(key) ? (
{String(entry)}
) : (
renderEntryValueWithMono(args)
);
};
const renderEntryValueBase: RenderFormValueFunction = (args) => {
const { entry, hasPassword } = args;
if (
['', null, undefined].some((bad) => entry === bad) ||
Number.isNaN(entry)
) {
return none;
}
return hasPassword
? renderEntryValueWithPassword(args)
: renderEntryValueWithMono(args);
};
const renderEntryBase: RenderFormEntryFunction = (args) => {
const { depth, entry, getLabel, hasPassword, key, nest, renderValue } = args;
return (
{getLabel({ cap: disassembleCamel, depth, entry, hasPassword, key })}
{!nest &&
renderValue(renderEntryValueBase, { depth, entry, hasPassword, key })}
);
};
const skipBase: SkipFormEntryFunction = ({ key }) => !/confirm|uuid/i.test(key);
const buildEntryList = ({
depth = 0,
entries,
getEntryLabel,
getListProps,
getListItemProps,
hasPassword,
listKey,
maxDepth,
renderEntry,
renderEntryValue,
skip,
}: {
depth?: number;
entries: FormEntries;
getEntryLabel: GetFormEntryLabelFunction;
getListProps?: GetFormEntriesPropsFunction;
getListItemProps?: GetFormEntryPropsFunction;
listKey?: string;
} & Required<
Pick<
FormSummaryProps,
'hasPassword' | 'maxDepth' | 'renderEntry' | 'renderEntryValue' | 'skip'
>
>): ReactElement => {
const result: ReactElement[] = [];
Object.entries(entries).forEach(([itemKey, entry]) => {
const itemId = `form-summary-entry-${itemKey}`;
const nest = entry !== null && typeof entry === 'object';
const value = nest ? null : entry;
const fnArgs: CommonFormEntryHandlerArgs = {
depth,
entry: value,
hasPassword,
key: itemKey,
};
if (skip(skipBase, fnArgs)) {
result.push(
{renderEntry({
depth,
entry: value,
getLabel: getEntryLabel,
hasPassword,
key: itemKey,
nest,
renderValue: renderEntryValue,
})}
,
);
}
if (nest && depth < maxDepth) {
result.push(
buildEntryList({
depth: depth + 1,
entries: entry,
getEntryLabel,
hasPassword,
listKey: itemKey,
maxDepth,
renderEntry,
renderEntryValue,
skip,
}),
);
}
});
const listId = `form-summary-list-${listKey ?? 'root'}`;
return (
{result}
);
};
const FormSummary = ({
entries,
getEntryLabel = ({ cap, key }) => cap(key),
getListProps,
getListItemProps,
hasPassword = false,
maxDepth = 3,
renderEntry = renderEntryBase,
renderEntryValue = (base, ...args) => base(...args),
skip = (base, ...args) => base(...args),
}: FormSummaryProps): ReturnType>> =>
buildEntryList({
entries,
getEntryLabel,
getListProps,
getListItemProps,
hasPassword,
maxDepth,
renderEntry,
renderEntryValue,
skip,
});
export default FormSummary;