@@ -8,31 +8,78 @@ import { initColumns } from '../SearchUI/utils';
88import { Tooltip } from '../../data-display/Tooltip' ;
99import './DataBlock.css' ;
1010
11- interface Props {
11+ export interface DataBlockProps {
12+ /**
13+ * The ID used to identify this component in Dash callbacks
14+ */
1215 id ?: string ;
16+ /**
17+ * Dash-assigned callback that should be called whenever any of the
18+ * properties change
19+ */
1320 setProps ?: ( value : any ) => any ;
21+ /**
22+ * Class name(s) to append to the component's default class (`mpc-data-block`)
23+ */
1424 className ?: string ;
25+ /**
26+ * Object to render inside the data block.
27+ * A key value must be a string, number, or array of strings/numbers.
28+ * Key values cannot be objects.
29+ */
1530 data : object ;
31+ /**
32+ * An array of column definition objects to control how keys/values are rendered in the data block.
33+ * See `Column` documentation for specifics on how to construct `Column` objects.
34+ * If no column definitions are supplied, the key names are used as labels and the values are rendered
35+ * without any formatting.
36+ */
1637 columns ?: Column [ ] ;
38+ /**
39+ * Set to true to have bottom columns section expanded on load.
40+ */
1741 expanded ?: boolean ;
42+ /**
43+ * Content to display at the bottom-most section of the block.
44+ */
1845 footer ?: ReactNode ;
46+ /**
47+ * Class name of an icon to display in the top right of the block.
48+ */
1949 iconClassName ?: string ;
50+ /**
51+ * Tooltip text to display when hovering over the icon.
52+ */
2053 iconTooltip ?: string ;
54+ /**
55+ * This is a temporary solution to allow SearchUI's to render in Storybook.
56+ * There is an issue with the dynamic column header components that causes
57+ * Storybook to crash. Rendering column headers as plain strings fixes the problem.
58+ * Note that this will disable column tooltips and unit labels.
59+ */
60+ disableRichColumnHeaders ?: boolean ;
2161}
2262
2363const getColumnsFromKeys = ( data : object ) : Column [ ] => {
2464 const keys = Object . keys ( data ) ;
2565 return keys . map ( ( key ) => {
2666 return {
27- name : key ,
67+ title : key ,
2868 selector : key
2969 } ;
3070 } ) ;
3171} ;
3272
33- export const DataBlock : React . FC < Props > = ( props ) => {
73+ /**
74+ * Component for displaying a single row (object) of data in a card-like block.
75+ * Blocks have a top section that displays data horizontally and an optional collapsible bottom
76+ * section that displays data vertically.
77+ */
78+ export const DataBlock : React . FC < DataBlockProps > = ( props ) => {
3479 const [ columns , setColumns ] = useState ( ( ) => {
35- return props . columns ? initColumns ( props . columns ) : getColumnsFromKeys ( props . data ) ;
80+ return props . columns
81+ ? initColumns ( props . columns , props . disableRichColumnHeaders )
82+ : getColumnsFromKeys ( props . data ) ;
3683 } ) ;
3784 const [ topColumns , setTopColumns ] = useState ( ( ) =>
3885 columns . filter ( ( c ) => ! c . hidden && ( c . isTop || ( ! c . isTop && ! c . isBottom ) ) )
@@ -82,7 +129,7 @@ export const DataBlock: React.FC<Props> = (props) => {
82129 ) }
83130 { props . iconTooltip && < Tooltip id = { tooltipId } > { props . iconTooltip } </ Tooltip > }
84131 </ div >
85- { bottomColumns && (
132+ { bottomColumns && bottomColumns . length > 0 && (
86133 < div className = "mpc-data-block-expandable" >
87134 < Collapsible trigger = { < span > </ span > } open = { expanded } transitionTime = { 250 } >
88135 { ! expanded && < div className = "mpc-data-block-fade" > </ div > }
0 commit comments