-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feat/summary component #90
Conversation
- move it to a separated file
@@ -52,7 +54,12 @@ const TreeTable = ({ treeTableRows }: ITreeTable): JSX.Element => { | |||
}, [treeTableRows]); | |||
|
|||
return ( | |||
<BaseTable headers={treeTableColumnsLabelId} body={<>{treeTableBody}</>} /> | |||
<BaseTable | |||
headers={treeTableColumnsLabelId.map(columnLabelId => ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
useMemo
here please
</TableCell> | ||
<TableCell> | ||
<div className="flex flex-col gap-1"> | ||
{compilers.map(compiler => ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
useMemo
- do this change to allow the table to receive a more general element, instead of a string containing an id to be used in FormattedMessage
4660c1c
to
fa5f548
Compare
@@ -13,8 +13,10 @@ const containerClassName = | |||
const BaseCard = ({ title, content, className }: IBaseCard): JSX.Element => { | |||
return ( | |||
<div className={classNames(className, containerClassName)}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It is the other way around classNames(containerClassName, className)
that way the className
prop can override the css properties
const summaryBodyRows = useMemo(() => { | ||
return summaryBody.map(row => ( | ||
<SummaryItem | ||
key={row.arch.text} | ||
arch={row.arch} | ||
compilers={row.compilers} | ||
/> | ||
)); | ||
}, [summaryBody]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: I feel like removing the unnecessary return
will make everything cleaner, but it's up to you.
const summaryBodyRows = useMemo(() => { | |
return summaryBody.map(row => ( | |
<SummaryItem | |
key={row.arch.text} | |
arch={row.arch} | |
compilers={row.compilers} | |
/> | |
)); | |
}, [summaryBody]); | |
const summaryBodyRows = useMemo( | |
() => | |
summaryBody.map(row => ( | |
<SummaryItem | |
key={row.arch.text} | |
arch={row.arch} | |
compilers={row.compilers} | |
/> | |
)), | |
[summaryBody], | |
); |
fa5f548
to
9f3a2b4
Compare
Description
Related Issues
How to test it
Run the storybook
Visual reference