diff --git a/src/components/Form/Row.tsx b/src/components/Form/Row.tsx index a46dbd2..96a38a5 100644 --- a/src/components/Form/Row.tsx +++ b/src/components/Form/Row.tsx @@ -11,11 +11,14 @@ export interface RowProps { rowList?: RowProps[], title?: string, open?: boolean, + plaintext?: string, + listResults?: string[], } export const StyledRow = styled.div` display: flex; justify-content: space-between; + flex-wrap: wrap; padding: 0.25rem; &:not(:last-child) { border-bottom: 1px solid ${colors.primary}; } span.lbl { font-weight: bold; } @@ -38,6 +41,7 @@ export const Details = styled.details` transition: all 0.2s ease-in-out; summary { padding-left: 1rem; + cursor: pointer; } summary:before { content: "►"; @@ -63,6 +67,37 @@ const SubRow = styled(StyledRow).attrs({ border-bottom: 1px dashed ${colors.primaryTransparent} !important; `; +const PlainText = styled.pre` + background: ${colors.background}; + width: 95%; + white-space: pre-wrap; + word-wrap: break-word; + border-radius: 4px; + padding: 0.25rem; +`; + +const List = styled.ul` + // background: ${colors.background}; + width: 95%; + white-space: pre-wrap; + word-wrap: break-word; + border-radius: 4px; + margin: 0; + padding: 0.25rem 0.25rem 0.25rem 1rem; + li { + // white-space: nowrap; + // overflow: hidden; + text-overflow: ellipsis; + list-style: circle; + &:first-letter{ + text-transform: capitalize + } + &::marker { + color: ${colors.primary}; + } + } +`; + const isValidDate = (date: any): boolean => { // Checks if a date is within reasonable range const isInRange = (date: Date): boolean => { @@ -106,6 +141,11 @@ const copyToClipboard = (text: string) => { navigator.clipboard.writeText(text); } +const snip = (text: string, length: number = 80) => { + if (text.length < length) return text; + return `${text.substring(0, length)}...`; +}; + export const ExpandableRow = (props: RowProps) => { const { lbl, val, title, rowList, open } = props; return ( @@ -123,6 +163,12 @@ export const ExpandableRow = (props: RowProps) => { copyToClipboard(row.val)}> {formatValue(row.val)} + { row.plaintext && {row.plaintext}</PlainText> } + { row.listResults && (<List> + {row.listResults.map((listItem: string, listIndex: number) => ( + <li key={listItem}>{snip(listItem)}</li> + ))} + </List>)} </SubRow> ) })} @@ -149,7 +195,7 @@ export const ListRow = (props: { list: string[], title: string }) => { } const Row = (props: RowProps) => { - const { lbl, val, title, children } = props; + const { lbl, val, title, plaintext, listResults, children } = props; if (children) return <StyledRow key={`${lbl}-${val}`}>{children}</StyledRow>; return ( <StyledRow key={`${lbl}-${val}`}> @@ -157,6 +203,12 @@ const Row = (props: RowProps) => { <span className="val" title={val} onClick={() => copyToClipboard(val)}> {formatValue(val)} </span> + { plaintext && <PlainText>{plaintext}</PlainText> } + { listResults && (<List> + {listResults.map((listItem: string, listIndex: number) => ( + <li key={listIndex} title={listItem}>{snip(listItem)}</li> + ))} + </List>)} </StyledRow> ); };