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} }
+ { row.listResults && (
+ {row.listResults.map((listItem: string, listIndex: number) => (
+ {snip(listItem)}
+ ))}
+
)}
)
})}
@@ -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 {children};
return (
@@ -157,6 +203,12 @@ const Row = (props: RowProps) => {
copyToClipboard(val)}>
{formatValue(val)}
+ { plaintext && {plaintext} }
+ { listResults && (
+ {listResults.map((listItem: string, listIndex: number) => (
+ {snip(listItem)}
+ ))}
+
)}
);
};