feat: Tabs in column (#16593)
* fix:fix get permission function * feat: add tabs inside column * lint: fix lint * test: fix test * test: fix tests * test: fix tests * fix: pass onChangeTab function through layout
This commit is contained in:
simcha90
GitHub
parent
51acadad74
commit
668ae23f28
|
|
@ -83,6 +83,7 @@ describe('isValidChild', () => {
|
|||
[ROOT, TABS, TAB, ROW, COLUMN, ROW, COLUMN, CHART],
|
||||
[ROOT, TABS, TAB, ROW, COLUMN, ROW, COLUMN, MARKDOWN],
|
||||
[ROOT, TABS, TAB, TABS, TAB, ROW, COLUMN, ROW, COLUMN, MARKDOWN],
|
||||
[ROOT, GRID, ROW, COLUMN, TABS],
|
||||
];
|
||||
|
||||
validExamples.forEach((example, exampleIdx) => {
|
||||
|
|
@ -127,7 +128,6 @@ describe('isValidChild', () => {
|
|||
[ROOT, GRID, ROW, [TABS]],
|
||||
[ROOT, GRID, ROW, [TAB]],
|
||||
[ROOT, GRID, ROW, [DIVIDER]],
|
||||
[ROOT, GRID, ROW, COLUMN, [TABS]],
|
||||
[ROOT, GRID, ROW, COLUMN, [TAB]],
|
||||
[ROOT, GRID, ROW, COLUMN, ROW, [DIVIDER]],
|
||||
[ROOT, GRID, ROW, COLUMN, ROW, COLUMN, [ROW]], // too nested
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@ const propTypes = {
|
|||
dashboardId: PropTypes.number.isRequired,
|
||||
component: componentShape.isRequired,
|
||||
parentComponent: componentShape.isRequired,
|
||||
getComponentById: PropTypes.func.isRequired,
|
||||
index: PropTypes.number.isRequired,
|
||||
depth: PropTypes.number.isRequired,
|
||||
editMode: PropTypes.bool.isRequired,
|
||||
|
|
@ -268,16 +269,22 @@ class ChartHolder extends React.Component {
|
|||
isComponentVisible,
|
||||
dashboardId,
|
||||
fullSizeChartId,
|
||||
getComponentById = () => undefined,
|
||||
} = this.props;
|
||||
|
||||
const { chartId } = component.meta;
|
||||
const isFullSize = fullSizeChartId === chartId;
|
||||
|
||||
// inherit the size of parent columns
|
||||
const widthMultiple =
|
||||
parentComponent.type === COLUMN_TYPE
|
||||
? parentComponent.meta.width || GRID_MIN_COLUMN_COUNT
|
||||
: component.meta.width || GRID_MIN_COLUMN_COUNT;
|
||||
const columnParentWidth = getComponentById(
|
||||
parentComponent.parents?.find(parent => parent.startsWith(COLUMN_TYPE)),
|
||||
)?.meta?.width;
|
||||
let widthMultiple = component.meta.width || GRID_MIN_COLUMN_COUNT;
|
||||
if (parentComponent.type === COLUMN_TYPE) {
|
||||
widthMultiple = parentComponent.meta.width || GRID_MIN_COLUMN_COUNT;
|
||||
} else if (columnParentWidth && widthMultiple > columnParentWidth) {
|
||||
widthMultiple = columnParentWidth;
|
||||
}
|
||||
|
||||
let chartWidth = 0;
|
||||
let chartHeight = 0;
|
||||
|
|
|
|||
|
|
@ -110,6 +110,7 @@ class Column extends React.PureComponent {
|
|||
onResizeStop,
|
||||
handleComponentDrop,
|
||||
editMode,
|
||||
onChangeTab,
|
||||
isComponentVisible,
|
||||
} = this.props;
|
||||
|
||||
|
|
@ -191,6 +192,7 @@ class Column extends React.PureComponent {
|
|||
onResize={onResize}
|
||||
onResizeStop={onResizeStop}
|
||||
isComponentVisible={isComponentVisible}
|
||||
onChangeTab={onChangeTab}
|
||||
/>
|
||||
))}
|
||||
|
||||
|
|
|
|||
|
|
@ -109,6 +109,7 @@ class Row extends React.PureComponent {
|
|||
onResizeStop,
|
||||
handleComponentDrop,
|
||||
editMode,
|
||||
onChangeTab,
|
||||
isComponentVisible,
|
||||
} = this.props;
|
||||
|
||||
|
|
@ -176,6 +177,7 @@ class Row extends React.PureComponent {
|
|||
onResize={onResize}
|
||||
onResizeStop={onResizeStop}
|
||||
isComponentVisible={isComponentVisible}
|
||||
onChangeTab={onChangeTab}
|
||||
/>
|
||||
))}
|
||||
|
||||
|
|
|
|||
|
|
@ -75,6 +75,7 @@ function mapStateToProps(
|
|||
const component = dashboardLayout[id];
|
||||
const props = {
|
||||
component,
|
||||
getComponentById: id => dashboardLayout[id],
|
||||
parentComponent: dashboardLayout[parentId],
|
||||
editMode: dashboardState.editMode,
|
||||
filters: getActiveFilters(),
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ import {
|
|||
import { DASHBOARD_ROOT_DEPTH as rootDepth } from './constants';
|
||||
|
||||
const depthOne = rootDepth + 1;
|
||||
const depthTwo = rootDepth + 2;
|
||||
// const depthTwo = rootDepth + 2; // Meantime no need
|
||||
const depthThree = rootDepth + 3;
|
||||
const depthFour = rootDepth + 4;
|
||||
const depthFive = rootDepth + 5;
|
||||
|
|
@ -77,17 +77,17 @@ const parentMaxDepthLookup = {
|
|||
},
|
||||
|
||||
[TABS_TYPE]: {
|
||||
[TAB_TYPE]: depthTwo,
|
||||
[TAB_TYPE]: depthThree,
|
||||
},
|
||||
|
||||
[TAB_TYPE]: {
|
||||
[CHART_TYPE]: depthTwo,
|
||||
[MARKDOWN_TYPE]: depthTwo,
|
||||
[COLUMN_TYPE]: depthTwo,
|
||||
[DIVIDER_TYPE]: depthTwo,
|
||||
[HEADER_TYPE]: depthTwo,
|
||||
[ROW_TYPE]: depthTwo,
|
||||
[TABS_TYPE]: depthTwo,
|
||||
[CHART_TYPE]: depthFive,
|
||||
[MARKDOWN_TYPE]: depthFive,
|
||||
[COLUMN_TYPE]: depthThree,
|
||||
[DIVIDER_TYPE]: depthFive,
|
||||
[HEADER_TYPE]: depthFive,
|
||||
[ROW_TYPE]: depthThree,
|
||||
[TABS_TYPE]: depthThree,
|
||||
},
|
||||
|
||||
[COLUMN_TYPE]: {
|
||||
|
|
@ -96,6 +96,7 @@ const parentMaxDepthLookup = {
|
|||
[MARKDOWN_TYPE]: depthFive,
|
||||
[ROW_TYPE]: depthThree,
|
||||
[DIVIDER_TYPE]: depthThree,
|
||||
[TABS_TYPE]: depthThree,
|
||||
},
|
||||
|
||||
// these have no valid children
|
||||
|
|
|
|||
Loading…
Reference in New Issue