QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-05-11 02:45:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Data tables styling issues on Explore view (#12383)

Browse Source 
* Fix sort icons wrapping

* Fix large table stretching chart section container

* Implement sticky paginattion

* Display "loading" when data is loading

* Lint fix
This commit is contained in:
Kamil Gabryjelski
2021-01-09 17:04:53 +01:00
committed by GitHub
parent 14ccbe43b3
commit 5d04f7dbce
7 changed files with 78 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
superset-frontend/src/explore/components/ExploreChartPanel.jsx
View File

@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import React, { useState, useEffect, useRef } from 'react';
import React, { useState, useEffect, useRef, useCallback } from 'react';
import PropTypes from 'prop-types';
import Split from 'react-split';
import { ParentSize } from '@vx/responsive';
@@ -105,34 +105,38 @@ const ExploreChartPanel = props => {
const gutterHeight = theme.gridUnit * GUTTER_SIZE_FACTOR;
const panelHeadingRef = useRef(null);
const [headerHeight, setHeaderHeight] = useState(props.standalone ? 0 : 50);
const [splitSizes, setSplitSizes] = useState(INITIAL_SIZES);
const calcSectionHeight = percent => {
const containerHeight = parseInt(props.height, 10) - headerHeight - 30;
return (
(containerHeight * percent) / 100 - (gutterHeight / 2 + gutterMargin)
);
};
const calcSectionHeight = useCallback(
percent => {
const headerHeight = props.standalone
? 0
: panelHeadingRef?.current?.offsetHeight ?? 50;
const containerHeight = parseInt(props.height, 10) - headerHeight;
return (
(containerHeight * percent) / 100 - (gutterHeight / 2 + gutterMargin)
);
},
[gutterHeight, gutterMargin, props.height, props.standalone],
);
const [tableSectionHeight, setTableSectionHeight] = useState(
calcSectionHeight(INITIAL_SIZES[1]),
);
useEffect(() => {
const calcHeaderSize = debounce(() => {
setHeaderHeight(
props.standalone ? 0 : panelHeadingRef?.current?.offsetHeight,
);
}, 100);
calcHeaderSize();
window.addEventListener('resize', calcHeaderSize);
return () => window.removeEventListener('resize', calcHeaderSize);
}, [props.standalone]);
const recalcPanelSizes = useCallback(
([, southPercent]) => {
setTableSectionHeight(calcSectionHeight(southPercent));
},
[calcSectionHeight],
);
const recalcPanelSizes = ([, southPercent]) => {
setTableSectionHeight(calcSectionHeight(southPercent));
};
useEffect(() => {
const recalcSizes = debounce(() => recalcPanelSizes(splitSizes), 200);
window.addEventListener('resize', recalcSizes);
return () => window.removeEventListener('resize', recalcSizes);
}, [props.standalone, recalcPanelSizes, splitSizes]);
const onDragEnd = sizes => {
setSplitSizes(sizes);