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;