Merge pull request #1203 from xieliuduo/dev47-viewBoard

refactor: useWidgetAutoFetch  and ZIndex

Author: scottsut

frontend/src/app/components/ChartEditor.tsx

@@ -60,6 +60,7 @@ import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router';
 import styled from 'styled-components/macro';
+import { EMPHASIS_LEVEL } from 'styles/StyleConstants';
 import { CloneValueDeep, isEmptyArray } from 'utils/object';
 import ChartWorkbench from '../pages/ChartWorkbenchPage/components/ChartWorkbench/ChartWorkbench';
 import {
@@ -597,7 +598,7 @@ const StyledChartWorkbenchPage = styled.div`
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 55;
+  z-index: ${EMPHASIS_LEVEL * 6};
   display: flex;
   min-width: 0;
   min-height: 0;

frontend/src/app/components/ChartGraph/BasicTableChart/TableComponents.tsx

@@ -3,7 +3,7 @@ import { Tooltip } from 'antd';
 import React from 'react';
 import { Resizable } from 'react-resizable';
 import styled from 'styled-components/macro';
-import { BLUE } from 'styles/StyleConstants';
+import { BLUE, STICKY_LEVEL } from 'styles/StyleConstants';
 
 export const TableComponentsTd = ({
   children,
@@ -78,7 +78,7 @@ const ResizableHandleStyle = styled.span`
   position: absolute;
   right: -5px;
   bottom: 0;
-  z-index: 1;
+  z-index: ${STICKY_LEVEL};
   width: 10px;
   height: 100%;
   cursor: col-resize;

frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartDraggable/ChartDragLayer.tsx

@@ -16,9 +16,9 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import { DragLayer } from 'react-dnd';
 import styled from 'styled-components';
+import { EMPHASIS_LEVEL } from 'styles/StyleConstants';
 import ChartDragPreview from './ChartDragPreview';
 
 const collect = monitor => {
@@ -72,10 +72,10 @@ export default DragLayer(collect)(CardDragLayer);
 
 const LayerStyles = styled.div`
   position: fixed;
-  pointer-events: none;
-  z-index: 100;
-  left: 0;
   top: 0;
   right: 0;
   bottom: 0;
+  left: 0;
+  z-index: ${EMPHASIS_LEVEL * 10};
+  pointer-events: none;
 `;

frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartPresentPanel/ChartPresentPanel.tsx

@@ -33,6 +33,7 @@ import { useSelector } from 'react-redux';
 import styled from 'styled-components/macro';
 import {
   BORDER_RADIUS,
+  EMPHASIS_LEVEL,
   LINE_HEIGHT_ICON_XXL,
   SPACE_LG,
   SPACE_MD,
@@ -173,12 +174,12 @@ const ChartPresentPanel: FC<{
 export default ChartPresentPanel;
 
 const StyledChartPresentPanel = styled.div`
+  position: relative;
   display: flex;
   flex: 1;
   flex-direction: column;
   background-color: ${p => p.theme.componentBackground};
   border-radius: ${BORDER_RADIUS};
-  position: relative;
 `;
 
 const StyledReusableChartContainer = styled.div``;
@@ -203,16 +204,16 @@ const ReloadMask = styled.div`
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 10;
-  width: 100%;
-  height: 100%;
+  z-index: ${EMPHASIS_LEVEL};
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 100%;
+  height: 100%;
   background: rgba(255, 255, 255, 0.9);
   .fetchDataIcon {
-    cursor: pointer;
-    color: ${p => p.theme.primary};
     font-size: ${LINE_HEIGHT_ICON_XXL};
+    color: ${p => p.theme.primary};
+    cursor: pointer;
   }
 `;

…ge/components/BoardHeader/ViewHeader.tsx …e/components/BoardHeader/TitleHeader.tsxfrontend/src/app/pages/DashBoardPage/components/BoardHeader/ViewHeader.tsx renamed to frontend/src/app/pages/DashBoardPage/components/BoardHeader/TitleHeader.tsx frontend/src/app/pages/DashBoardPage/components/BoardHeader/ViewHeader.tsx renamed to frontend/src/app/pages/DashBoardPage/components/BoardHeader/TitleHeader.tsx

@@ -40,7 +40,7 @@ import { BoardDropdownList } from '../BoardDropdownList/BoardDropdownList';
 import { BoardContext } from '../BoardProvider/BoardProvider';
 import SaveToStoryBoard from '../SaveToStoryBoard';
 
-const TitleHeader: FC = memo(() => {
+export const TitleHeader: FC = memo(() => {
   const t = useI18NPrefix(`viz.action`);
   const publishLoading = useSelector(selectPublishLoading);
   const history = useHistory();
@@ -137,7 +137,6 @@ const TitleHeader: FC = memo(() => {
   );
 });
 
-export default TitleHeader;
 const Wrapper = styled.div`
   display: flex;
   flex-shrink: 0;

frontend/src/app/pages/DashBoardPage/components/FullScreenPanel/FullScreenPanel.tsx

@@ -27,7 +27,7 @@ import { BoardState } from 'app/pages/DashBoardPage/pages/Board/slice/types';
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components/macro';
-import { G90, WHITE } from 'styles/StyleConstants';
+import { EMPHASIS_LEVEL, G90, WHITE } from 'styles/StyleConstants';
 import { CanFullScreenWidgetTypes } from '../../constants';
 import { BoardContext } from '../BoardProvider/BoardProvider';
 import { FullScreenWidgetMapper } from './FullScreenWidgetMapper';
@@ -131,7 +131,7 @@ const FullScreenWrap = styled.div<{ show: boolean }>`
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 100;
+  z-index: ${EMPHASIS_LEVEL * 10};
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -158,7 +158,7 @@ const FullScreenWrap = styled.div<{ show: boolean }>`
     position: absolute;
     top: 64px;
     left: ${p => (p.show ? '0' : '-300px')};
-    z-index: 10;
+    z-index: ${EMPHASIS_LEVEL};
     width: 300px;
     height: 100%;
 

frontend/src/app/pages/DashBoardPage/components/WidgetComponents/BlockMaskLayer.tsx

@@ -23,7 +23,7 @@ import {
 import React, { memo, useCallback, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components/macro';
-import { INFO, SUCCESS } from 'styles/StyleConstants';
+import { EMPHASIS_LEVEL, INFO, SUCCESS } from 'styles/StyleConstants';
 import {
   editDashBoardInfoActions,
   editWidgetInfoActions,
@@ -104,7 +104,7 @@ const MaskLayer = styled.div<MaskLayerProps>`
   position: absolute;
   top: -5px;
   left: -5px;
-  z-index: ${p => (p.front ? 20 : 9)};
+  z-index: ${p => (p.front ? EMPHASIS_LEVEL + 10 : EMPHASIS_LEVEL - 5)};
   width: calc(100% + 10px);
   height: calc(100% + 10px);
   cursor: move;

frontend/src/app/pages/DashBoardPage/components/WidgetComponents/StyledWidgetToolBar.tsx

@@ -17,14 +17,15 @@
  */
 import { memo } from 'react';
 import styled from 'styled-components/macro';
+import { EMPHASIS_LEVEL } from 'styles/StyleConstants';
 export const StyledWidgetToolBar: React.FC<{}> = memo(props => {
   return <StyleWrap>{props.children} </StyleWrap>;
 });
 const StyleWrap = styled.div`
   position: absolute;
   top: 0;
   right: 0;
-  z-index: 30;
+  z-index: ${EMPHASIS_LEVEL * 3};
   overflow: hidden;
   text-align: right;
   .widget-tool-dropdown {

frontend/src/app/pages/DashBoardPage/components/WidgetComponents/WidgetDndHandleMask.tsx

@@ -23,6 +23,7 @@ import {
 import React, { memo } from 'react';
 import { useDrag } from 'react-dnd';
 import { useDispatch } from 'react-redux';
+import { EMPHASIS_LEVEL } from 'styles/StyleConstants';
 import { editBoardStackActions } from '../../pages/BoardEditor/slice';
 export interface WidgetDndHandleMaskProps {
   widgetId: string;
@@ -85,7 +86,7 @@ export const WidgetDndHandleMask: React.FC<WidgetDndHandleMaskProps> = memo(
             position: 'absolute',
             cursor: 'grabbing',
             top: '0',
-            zIndex: 15,
+            zIndex: EMPHASIS_LEVEL + 5,
             width: '100%',
             height: '100%',
           }}

…nents/WidgetComponents/ZIndexWrapper.tsx …components/WidgetComponents/constants.tsfrontend/src/app/pages/DashBoardPage/components/WidgetComponents/ZIndexWrapper.tsx renamed to frontend/src/app/pages/DashBoardPage/components/WidgetComponents/constants.ts frontend/src/app/pages/DashBoardPage/components/WidgetComponents/ZIndexWrapper.tsx renamed to frontend/src/app/pages/DashBoardPage/components/WidgetComponents/constants.ts

@@ -15,15 +15,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { memo } from 'react';
-import styled from 'styled-components/macro';
-export const ZIndexWrapper: React.FC<{}> = memo(props => {
-  return <Wrapper>{props.children} </Wrapper>;
-});
-const Wrapper = styled.div`
-  z-index: 10;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-`;
+
+import type { CSSProperties } from 'react';
+import { EMPHASIS_LEVEL } from 'styles/StyleConstants';
+export const FlexStyle: CSSProperties = {
+  display: 'flex',
+  flex: '1',
+  minHeight: '0',
+};
+export const ZIndexStyle: CSSProperties = {
+  zIndex: EMPHASIS_LEVEL,
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  height: ' 100%',
+};