From 06f49595ec8864d6ff1bb95b1517cf70937665a7 Mon Sep 17 00:00:00 2001 From: Bob Date: Wed, 19 Jun 2024 15:53:38 +0100 Subject: [PATCH 1/2] add inlineUseTooltips options prop but not working fully yet --- .../components/src/components/tidytree/TreeTable.tsx | 1 + .../libs/coreui/src/components/Mesa/Ui/DataRow.jsx | 11 ++++++----- packages/libs/coreui/src/components/Mesa/types.ts | 1 + 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/libs/components/src/components/tidytree/TreeTable.tsx b/packages/libs/components/src/components/tidytree/TreeTable.tsx index b19be1a5a7..98046114c8 100644 --- a/packages/libs/components/src/components/tidytree/TreeTable.tsx +++ b/packages/libs/components/src/components/tidytree/TreeTable.tsx @@ -81,6 +81,7 @@ export default function TreeTable(props: TreeTableProps) { ...props.tableProps.options, deriveRowClassName: (_) => rowStyleClassName, inline: true, + inlineUseTooltips: true, inlineMaxHeight: `${rowHeight}px`, inlineMaxWidth: `${maxColumnWidth}px`, }, diff --git a/packages/libs/coreui/src/components/Mesa/Ui/DataRow.jsx b/packages/libs/coreui/src/components/Mesa/Ui/DataRow.jsx index d53ec90a5d..09b3886d80 100644 --- a/packages/libs/coreui/src/components/Mesa/Ui/DataRow.jsx +++ b/packages/libs/coreui/src/components/Mesa/Ui/DataRow.jsx @@ -30,22 +30,23 @@ class DataRow extends React.PureComponent { expandRow() { const { options } = this.props; - if (!options.inline) return; + if (!options.inline || options.inlineUseTooltips) return; this.setState({ expanded: true }); } collapseRow() { const { options } = this.props; - if (!options.inline) return; + if (!options.inline || options.inlineUseTooltips) return; this.setState({ expanded: false }); } handleRowClick() { const { row, rowIndex, options } = this.props; - const { inline, onRowClick } = options; + const { inline, onRowClick, inlineUseTooltips } = options; if (!inline && !onRowClick) return; - - if (inline) this.setState({ expanded: !this.state.expanded }); + console.log({ options }); + if (inline && !inlineUseTooltips) + this.setState({ expanded: !this.state.expanded }); if (typeof onRowClick === 'function') onRowClick(row, rowIndex); } diff --git a/packages/libs/coreui/src/components/Mesa/types.ts b/packages/libs/coreui/src/components/Mesa/types.ts index 54e792ae5a..d8290c7870 100644 --- a/packages/libs/coreui/src/components/Mesa/types.ts +++ b/packages/libs/coreui/src/components/Mesa/types.ts @@ -36,6 +36,7 @@ export interface MesaStateProps< inline?: boolean; inlineMaxWidth?: string; inlineMaxHeight?: string; + inlineUseTooltips?: boolean; // on clicking on a row, don't expand the row height-wise to show the full contents, use a tooltip instead className?: string; errOnOverflow?: boolean; editableColumns?: boolean; From 30da70a6b385f7466a075a42d2ecaebd6ad1e092 Mon Sep 17 00:00:00 2001 From: Bob Date: Fri, 21 Jun 2024 11:50:50 +0100 Subject: [PATCH 2/2] looks good now --- .../src/components/Mesa/Ui/DataCell.jsx | 26 ++++++++++++++++++- .../coreui/src/components/Mesa/Ui/DataRow.jsx | 1 - .../libs/coreui/src/components/Mesa/types.ts | 2 +- 3 files changed, 26 insertions(+), 3 deletions(-) diff --git a/packages/libs/coreui/src/components/Mesa/Ui/DataCell.jsx b/packages/libs/coreui/src/components/Mesa/Ui/DataCell.jsx index 468227edc0..f8136527aa 100644 --- a/packages/libs/coreui/src/components/Mesa/Ui/DataCell.jsx +++ b/packages/libs/coreui/src/components/Mesa/Ui/DataCell.jsx @@ -4,6 +4,8 @@ import PropTypes from 'prop-types'; import Templates from '../Templates'; import { makeClassifier } from '../Utils/Utils'; +import { Tooltip } from '../../../components/info/Tooltip'; + const dataCellClass = makeClassifier('DataCell'); class DataCell extends React.PureComponent { @@ -64,7 +66,29 @@ class DataCell extends React.PureComponent { width = width ? { width, maxWidth: width, minWidth: width } : {}; style = Object.assign({}, style, width, whiteSpace); className = dataCellClass() + (className ? ' ' + className : ''); - const children = this.renderContent(); + + const content = this.renderContent(); + const columnName = column.name ?? column.key; + + // Ideally the tooltip would also be conditional on there + // being actual content, but this is not trivial without + // copy-pasting the getValue logic from this.renderContent(). + // Verdict: not worth it + const children = options.inlineUseTooltips ? ( + + {columnName && {columnName}:} + {content} + + } + > + {content} + + ) : ( + content + ); + const props = { style, children, diff --git a/packages/libs/coreui/src/components/Mesa/Ui/DataRow.jsx b/packages/libs/coreui/src/components/Mesa/Ui/DataRow.jsx index 09b3886d80..6382798461 100644 --- a/packages/libs/coreui/src/components/Mesa/Ui/DataRow.jsx +++ b/packages/libs/coreui/src/components/Mesa/Ui/DataRow.jsx @@ -44,7 +44,6 @@ class DataRow extends React.PureComponent { const { row, rowIndex, options } = this.props; const { inline, onRowClick, inlineUseTooltips } = options; if (!inline && !onRowClick) return; - console.log({ options }); if (inline && !inlineUseTooltips) this.setState({ expanded: !this.state.expanded }); if (typeof onRowClick === 'function') onRowClick(row, rowIndex); diff --git a/packages/libs/coreui/src/components/Mesa/types.ts b/packages/libs/coreui/src/components/Mesa/types.ts index d8290c7870..b7bb7fc266 100644 --- a/packages/libs/coreui/src/components/Mesa/types.ts +++ b/packages/libs/coreui/src/components/Mesa/types.ts @@ -36,7 +36,7 @@ export interface MesaStateProps< inline?: boolean; inlineMaxWidth?: string; inlineMaxHeight?: string; - inlineUseTooltips?: boolean; // on clicking on a row, don't expand the row height-wise to show the full contents, use a tooltip instead + inlineUseTooltips?: boolean; // don't use onClick to show the full contents, use an onMouseOver tooltip instead className?: string; errOnOverflow?: boolean; editableColumns?: boolean;