From 01eac8d769768bb0b0e3dc2ca86cbaa629719bf0 Mon Sep 17 00:00:00 2001 From: Cesar Ferreyra-Mansilla Date: Mon, 24 Jun 2024 14:39:50 -0400 Subject: [PATCH] feat: support separate maxHeights for facets and results tables --- src/components/browse/EmbeddedSearchView.js | 2 +- .../browse/components/ControlsAndResults.js | 12 ++++++---- .../browse/components/FacetList/index.js | 8 +++---- .../browse/components/SearchResultTable.js | 24 ++++++++++--------- 4 files changed, 25 insertions(+), 21 deletions(-) diff --git a/src/components/browse/EmbeddedSearchView.js b/src/components/browse/EmbeddedSearchView.js index 7baf7398..9f77f7d0 100644 --- a/src/components/browse/EmbeddedSearchView.js +++ b/src/components/browse/EmbeddedSearchView.js @@ -166,7 +166,7 @@ export class EmbeddedSearchView extends React.PureComponent { // If facets are null (hidden/excluded) and no props.tableColumnClassName set table col to be full width of container instead of the default set by ControlsAndResults. const tableColumnClassName = propTableColumnClassName || (facets === null ? "col-12" : undefined); - // Includes pass-through props like `maxHeight`, `hideFacets`, etc. + // Includes pass-through props like `maxHeight`, `maxFacetsBodyHeight`, `maxResultsBodyHeight`, `hideFacets`, etc. const viewProps = { ...passProps, aboveTableComponent, aboveFacetListComponent, facetListComponent, tableColumnClassName, facetColumnClassName, clearSelectedItemsOnFilter, selectedItems, onSelectItem, onResetSelectedItems }; const filterFacetFxn = propFacetFilterFxn || this.filterFacetFxn; diff --git a/src/components/browse/components/ControlsAndResults.js b/src/components/browse/components/ControlsAndResults.js index 78970f60..2861e8c2 100644 --- a/src/components/browse/components/ControlsAndResults.js +++ b/src/components/browse/components/ControlsAndResults.js @@ -75,8 +75,10 @@ export class ControlsAndResults extends React.PureComponent { isOwnPage = true, // <- False when rendered by EmbeddedSearchView, else is true when from a SearchView isContextLoading = false, // <- Only applicable for EmbeddedSearchView, passed in by VirtualHrefController only, else is false always since we initialize immediately over search-response context that already has first 25 results - // From EmbeddedSearchView/manual-entry, used if isOwnPage is true - maxHeight = SearchResultTable.defaultProps.maxHeight, + // From EmbeddedSearchView/manual-entry, used if isOwnPage is true, + maxHeight, + maxFacetsBodyHeight = SearchResultTable.defaultProps.maxHeight, + maxResultsBodyHeight = SearchResultTable.defaultProps.maxHeight, // From CustomColumnController: hiddenColumns, addHiddenColumn, removeHiddenColumn, visibleColumnDefinitions, @@ -99,11 +101,10 @@ export class ControlsAndResults extends React.PureComponent { columnDefinitions, visibleColumnDefinitions, defaultColAlignment, setColumnWidths, columnWidths, detailPane, stickyFirstColumn, isOwnPage, sortBy, sortColumns, termTransformFxn, windowWidth, registerWindowOnScrollHandler, rowHeight, - defaultOpenIndices, maxHeight, targetTabKey, + defaultOpenIndices, maxHeight, maxResultsBodyHeight, targetTabKey, isContextLoading // <- Only applicable for EmbeddedSearchView, else is false always }; - /** * To Consider: * We could have 1 collection/object of props that is combination of @@ -154,7 +155,8 @@ export class ControlsAndResults extends React.PureComponent { showClearFiltersButton, separateSingleTermFacets, requestedCompoundFilterSet, - maxBodyHeight: (!isOwnPage && maxHeight) || null + // Default to maxHeight when provided + maxFacetsBodyHeight: (!isOwnPage && (maxHeight ?? maxFacetsBodyHeight)) || null, }; extendedFacetListComponent = React.Children.map(facetListComponent, extendChild.bind(null, facetListProps)); } diff --git a/src/components/browse/components/FacetList/index.js b/src/components/browse/components/FacetList/index.js index b68f5093..0bda6083 100644 --- a/src/components/browse/components/FacetList/index.js +++ b/src/components/browse/components/FacetList/index.js @@ -139,7 +139,7 @@ export class FacetList extends React.PureComponent { 'onFilter' : PropTypes.func, // What happens when Term is clicked. 'onFilterMultiple': PropTypes.func, // Same as onFilter, but processes multiple filter changes in one go 'separateSingleTermFacets' : PropTypes.bool, - 'maxBodyHeight' : PropTypes.number, + 'maxFacetsBodyHeight' : PropTypes.number, 'useRadioIcon': PropTypes.bool.isRequired, // Show either checkbox (False) or radio icon (True) for term component - it is only for styling, not intended to implement single selection (radio) or multiple selection (checkbox) 'persistSelectedTerms': PropTypes.bool.isRequired, // if True selected/omitted terms are escalated to top, otherwise each term is rendered in regular order. Moreover, inline search options are not displayed if it is False. 'isContextLoading': PropTypes.bool, @@ -731,7 +731,7 @@ export class FacetList extends React.PureComponent { title, onClearFilters = null, showClearFiltersButton = false, - maxBodyHeight: maxHeight = null, + maxFacetsBodyHeight = null, isContextLoading = false, hideHeaderToggle = false } = this.props; @@ -747,8 +747,8 @@ export class FacetList extends React.PureComponent { } const bodyProps = { - className: "facets-body" + (typeof maxHeight === "number" ? " has-max-height" : ""), - style: typeof maxHeight === "number" ? { maxHeight } : null + className: "facets-body" + (typeof maxFacetsBodyHeight === "number" ? " has-max-height" : ""), + style: typeof maxFacetsBodyHeight === "number" ? { maxHeight: maxFacetsBodyHeight } : null }; const { staticFacetElements, selectableFacetElements } = this.renderFacetComponents(); diff --git a/src/components/browse/components/SearchResultTable.js b/src/components/browse/components/SearchResultTable.js index 12a38e33..59f5fd47 100644 --- a/src/components/browse/components/SearchResultTable.js +++ b/src/components/browse/components/SearchResultTable.js @@ -363,7 +363,7 @@ class LoadMoreAsYouScroll extends React.Component { 'results' : PropTypes.array.isRequired, // From parent 'rowHeight' : PropTypes.number.isRequired, 'isOwnPage' : PropTypes.bool.isRequired, - 'maxHeight' : PropTypes.number, + 'maxResultsBodyHeight' : PropTypes.number, 'tableContainerScrollLeft' : PropTypes.number.isRequired, // From parent 'tableContainerWidth' : PropTypes.number, // From parent; required but may be null if table not visible/displayed in DOM. 'setResults' : PropTypes.func.isRequired, // From parent @@ -392,11 +392,11 @@ class LoadMoreAsYouScroll extends React.Component { * Used for memoization of styles that dont frequently change (prevent needless PureComponent updates). * `scrollableStyle` is applied to Infinite's outermost div element/container. */ - static getStyles(maxHeight){ + static getStyles(maxResultsBodyHeight){ const styles = {}; styles.scrollableStyle = { - maxHeight, - height: null, // Unset, let maxHeight take over. + maxHeight: maxResultsBodyHeight, + height: null, // Unset, let maxResultsBodyHeight take over. overflow: "auto" // Override "hidden scroll" default. }; return styles; @@ -537,7 +537,7 @@ class LoadMoreAsYouScroll extends React.Component { render(){ const { children, rowHeight, openRowHeight, openDetailPanes, tableContainerWidth, tableContainerScrollLeft, - mounted: propMounted, isOwnPage, maxHeight, canLoadMore + mounted: propMounted, isOwnPage, maxResultsBodyHeight, canLoadMore } = this.props; const { mounted: stateMounted, isLoading } = this.state; if (!(propMounted || stateMounted)){ @@ -555,7 +555,7 @@ class LoadMoreAsYouScroll extends React.Component { className="react-infinite-container" ref={this.infiniteComponentRef} elementHeight={elementHeight} - containerHeight={(!isOwnPage && maxHeight) || undefined} + containerHeight={(!isOwnPage && maxResultsBodyHeight) || undefined} useWindowAsScrollContainer={isOwnPage} onInfiniteLoad={this.handleLoad} isInfiniteLoading={isLoading} @@ -565,7 +565,7 @@ class LoadMoreAsYouScroll extends React.Component { infiniteLoadBeginEdgeOffset={canLoadMore ? 200 : undefined} preloadAdditionalHeight={Infinite.containerHeightScaleFactor(1.5)} preloadBatchSize={Infinite.containerHeightScaleFactor(1.5)} - styles={isOwnPage ? null : this.memoized.getStyles(maxHeight)}> + styles={isOwnPage ? null : this.memoized.getStyles(maxResultsBodyHeight)}> { children } ); @@ -965,7 +965,8 @@ class DimensioningContainer extends React.PureComponent { navigate, rowHeight = 47, // `rowHeight - rowBottomPadding` must be aligned in CSS stylesheets openRowHeight = null, // Will default to `rowHeight` if not supplied. - maxHeight = 500, // Only used if not isOwnPage + maxHeight, // Only used if not isOwnPage + maxResultsBodyHeight, // Only used if not isOwnPage isContextLoading = false, setColumnWidths, columnWidths, @@ -984,7 +985,7 @@ class DimensioningContainer extends React.PureComponent { const loadMoreAsYouScrollProps = { ..._.pick(this.props, 'href', 'onDuplicateResultsFoundCallback', 'schemas', 'requestedCompoundFilterSet'), context, navigate, rowHeight, openRowHeight, - results, openDetailPanes, maxHeight, isOwnPage, fullRowWidth, canLoadMore, anyResults, + results, openDetailPanes, maxResultsBodyHeight: (maxHeight || maxResultsBodyHeight), isOwnPage, fullRowWidth, canLoadMore, anyResults, tableContainerWidth, tableContainerScrollLeft, windowWidth, mounted, setResults: this.setResults }; @@ -1123,7 +1124,9 @@ export class SearchResultTable extends React.Component { })), 'termTransformFxn' : PropTypes.func.isRequired, 'isOwnPage' : PropTypes.bool, - 'maxHeight' : PropTypes.number, //PropTypes.oneOfType([PropTypes.number, PropTypes.string]) // Used only if isOwnPage is false + // Used only if isOwnPage is false + 'maxHeight' : PropTypes.number, //PropTypes.oneOfType([PropTypes.number, PropTypes.string]) + 'maxResultsBodyHeight' : PropTypes.number, 'isContextLoading' : PropTypes.bool }; @@ -1143,7 +1146,6 @@ export class SearchResultTable extends React.Component { 'fullWidthContainerSelectorString' : '.browse-page-container', 'currentAction' : null, 'isOwnPage' : true, - 'maxHeight' : 400, // Used only if isOwnPage is false; todo: maybe move this defaultProp definition higher up into EmbeddedSearchView and leave null here. 'isContextLoading' : false // Used only if isOwnPage is false };