types

elastic · Oct 2, 2020 · 21d284c · 21d284c
1 parent 1786760
commit 21d284c
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 27 deletions.
diff --git a/...ugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss b/...ugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss
@@ -17,4 +17,3 @@
 .lnsDimensionContainer__header {
   padding: $euiSizeS;
 }
-
diff --git a/...lugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx b/...lugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx
@@ -5,7 +5,7 @@
  */
 import './dimension_container.scss';
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   EuiFlyoutHeader,
   EuiFlyoutFooter,
@@ -21,21 +21,30 @@ import { i18n } from '@kbn/i18n';
 export function DimensionContainer({
   isOpen,
   groupLabel,
-  close,
+  handleClose,
   panel,
 }: {
   isOpen: boolean;
-  close: () => void;
+  handleClose: () => void;
   panel: React.ReactElement;
   groupLabel: string;
 }) {
   const [focusTrapIsEnabled, setFocusTrapIsEnabled] = useState(false);
 
   const closeFlyout = () => {
-    close();
+    handleClose();
     setFocusTrapIsEnabled(false);
   };
 
+  useEffect(() => {
+    if (isOpen) {
+      // without setTimeout here the flyout pushes content when animating
+      setTimeout(() => {
+        setFocusTrapIsEnabled(true);
+      }, 255);
+    }
+  }, [isOpen]);
+
   return isOpen ? (
     <EuiFocusTrap disabled={!focusTrapIsEnabled} clickOutsideDisables={true}>
       <EuiOutsideClickDetector onOutsideClick={closeFlyout} isDisabled={!isOpen}>

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
@@ -23,11 +23,10 @@ import { DragContext, DragDrop, ChildDragDropProvider } from '../../../drag_drop
 import { LayerSettings } from './layer_settings';
 import { trackUiEvent } from '../../../lens_ui_telemetry';
 import { generateId } from '../../../id_generator';
-import { ConfigPanelWrapperProps, DimensionState } from './types';
+import { ConfigPanelWrapperProps, ActiveDimensionState } from './types';
 import { DimensionContainer } from './dimension_container';
 
-const initialDimensionState = {
-  isOpen: false,
+const initialActiveDimensionState = {
   isNew: false,
 };
 
@@ -69,13 +68,15 @@ export function LayerPanel(
   }
 ) {
   const dragDropContext = useContext(DragContext);
-  const [dimensionState, setDimensionState] = useState<DimensionState>(initialDimensionState);
+  const [activeDimension, setActiveDimension] = useState<ActiveDimensionState>(
+    initialActiveDimensionState
+  );
 
   const { framePublicAPI, layerId, isOnlyLayer, onRemoveLayer, dataTestSubj } = props;
   const datasourcePublicAPI = framePublicAPI.datasourceLayers[layerId];
 
   useEffect(() => {
-    setDimensionState(initialDimensionState);
+    setActiveDimension(initialActiveDimensionState);
   }, [props.activeVisualizationId]);
 
   if (
@@ -114,7 +115,7 @@ export function LayerPanel(
 
   const { groups } = activeVisualization.getConfiguration(layerVisualizationConfigProps);
   const isEmptyLayer = !groups.some((d) => d.accessors.length > 0);
-  const { activeId, activeGroup } = dimensionState;
+  const { activeId, activeGroup } = activeDimension;
   return (
     <ChildDragDropProvider {...dragDropContext}>
       <EuiPanel data-test-subj={dataTestSubj} className="lnsLayerPanel" paddingSize="s">
@@ -209,7 +210,7 @@ export function LayerPanel(
                           : 'add'
                       }
                       data-test-subj={group.dataTestSubj}
-                      draggable={!dimensionState.isOpen}
+                      draggable={!activeId}
                       value={{ columnId: accessor, groupId: group.groupId, layerId }}
                       isValueEqual={isSameConfiguration}
                       label={group.groupLabel}
@@ -253,11 +254,10 @@ export function LayerPanel(
                             filterOperations: group.filterOperations,
                             suggestedPriority: group.suggestedPriority,
                             onClick: () => {
-                              if (dimensionState.isOpen) {
-                                setDimensionState(initialDimensionState);
+                              if (activeId) {
+                                setActiveDimension(initialActiveDimensionState);
                               } else {
-                                setDimensionState({
-                                  isOpen: true,
+                                setActiveDimension({
                                   isNew: false,
                                   activeGroup: group,
                                   activeId: accessor,
@@ -355,11 +355,10 @@ export function LayerPanel(
                         }}
                         data-test-subj="lns-empty-dimension"
                         onClick={() => {
-                          if (dimensionState.isOpen) {
-                            setDimensionState(initialDimensionState);
+                          if (activeId) {
+                            setActiveDimension(initialActiveDimensionState);
                           } else {
-                            setDimensionState({
-                              isOpen: true,
+                            setActiveDimension({
                               isNew: true,
                               activeGroup: group,
                               activeId: newId,
@@ -380,9 +379,9 @@ export function LayerPanel(
           );
         })}
         <DimensionContainer
-          isOpen={dimensionState.isOpen}
+          isOpen={!!activeId}
           groupLabel={activeGroup?.groupLabel || ''}
-          close={() => setDimensionState(initialDimensionState)}
+          handleClose={() => setActiveDimension(initialActiveDimensionState)}
           panel={
             <>
               {activeGroup && activeId && (
@@ -405,8 +404,8 @@ export function LayerPanel(
                           prevState: props.visualizationState,
                         })
                       );
-                      setDimensionState({
-                        ...dimensionState,
+                      setActiveDimension({
+                        ...activeDimension,
                         isNew: false,
                       });
                     },
@@ -415,7 +414,7 @@ export function LayerPanel(
               )}
               {activeGroup &&
                 activeId &&
-                !dimensionState.isNew &&
+                !activeDimension.isNew &&
                 activeVisualization.renderDimensionEditor &&
                 activeGroup?.enableDimensionEditor && (
                   <div className="lnsLayerPanel__styleEditor">

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts
@@ -31,8 +31,7 @@ export interface ConfigPanelWrapperProps {
   core: DatasourceDimensionEditorProps['core'];
 }
 
-export interface DimensionState {
-  isOpen: boolean;
+export interface ActiveDimensionState {
   isNew: boolean;
   activeId?: string;
   activeGroup?: VisualizationDimensionGroupConfig;