import * as React from 'react' ; class props { collapsed : boolean ; onClick : any ; } const plusIconPath = 'M352 240v32c0 6.6-5.4 12-12 12h-88v88c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-88h-88c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h88v-88c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v88h88c6.6 0 12 5.4 12 12zm96-160v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z' ; const minusIconPath = 'M108 284c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h232c6.6 0 12 5.4 12 12v32c0 6.6-5.4 12-12 12H108zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z' ; export const CollapseButton = ( { collapsed , onClick } ) : JSX . Element => { return ( < span unselectable className = 'collapse-button' onClick = { onClick } > < svg aria - hidden = 'true' data - prefix = 'far' data - icon = 'plus-square' className = 'svg-inline--fa fa-plus-square fa-w-14' role = 'img' xmlns = 'http://www.w3.org/2000/svg' viewBox = '0 0 512 512' > < path d = { collapsed ? plusIconPath : minusIconPath } /> < /svg> < /span>); } ; export const TableButton = ( { collapsed , onClick } ) : JSX . Element | null => { return collapsed ? null : ( < span unselectable className = 'collapse-button' onClick = { onClick } > < svg aria - hidden = 'true' data - prefix = 'fas' data - icon = 'table' role = 'img' xmlns = 'http://www.w3.org/2000/svg' viewBox = '0 0 512 512' > < path d = 'M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM224 416H64v-96h160v96zm0-160H64v-96h160v96zm224 160H288v-96h160v96zm0-160H288v-96h160v96z' / > < /svg> < /span>); } ;