[EuiResizableContainer] Allow dynamic direction

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Added support for all `color`s of `EuiPanel` ([#4504](https://github.com/elastic/eui/pull/4504))
 - Added `hasBorder` prop to `EuiPanel` ([#4504](https://github.com/elastic/eui/pull/4504))
 - Added `labelProps` prop to `EuiRadio`, `EuiSwitch` and `EuiCheckbox` ([#4516](https://github.com/elastic/eui/pull/4516))
+- Allowed dynamically changing the `direction` prop on `EuiResizableContainer` ([#4557](https://github.com/elastic/eui/pull/4557))
 
 **Bug fixes**
 

src-docs/src/views/resizable_container/resizable_panel_collapsible.js

@@ -8,7 +8,9 @@ import {
   EuiTitle,
   EuiSpacer,
   EuiPage,
+  EuiCode,
 } from '../../../../src/components';
+import { useIsWithinBreakpoints } from '../../../../src/services/hooks';
 import { fake } from 'faker';
 
 const texts = [];
@@ -52,6 +54,9 @@ export default () => {
     />
   ));
 
+  const isMobile = useIsWithinBreakpoints(['xs', 's']);
+  const style = isMobile ? { height: '100%' } : { minHeight: '100%' };
+
   return (
     <>
       <EuiText>
@@ -159,6 +164,46 @@ export default () => {
           )}
         </EuiResizableContainer>
       </EuiPage>
+
+      <EuiSpacer />
+      <EuiText>
+        <h3>Responsive</h3>
+        <p>
+          It is possible to dynamically change the <EuiCode>direction</EuiCode>{' '}
+          prop to allow for adapting layouts to screen size. Resize the window
+          to see the panel orientation change.
+        </p>
+      </EuiText>
+      <EuiSpacer />
+
+      <EuiPage paddingSize="none">
+        <EuiResizableContainer
+          direction={isMobile ? 'vertical' : 'horizontal'}
+          style={{ height: '400px' }}>
+          {(EuiResizablePanel, EuiResizableButton) => (
+            <>
+              <EuiResizablePanel
+                mode="collapsible"
+                initialSize={20}
+                minSize="10%">
+                <EuiListGroup flush>{itemElements}</EuiListGroup>
+              </EuiResizablePanel>
+
+              <EuiResizableButton />
+
+              <EuiResizablePanel mode="main" initialSize={80} minSize="50px">
+                <EuiPanel paddingSize="l" style={style}>
+                  <EuiTitle>
+                    <p>{itemSelected.label}</p>
+                  </EuiTitle>
+                  <EuiSpacer />
+                  <EuiText>{itemSelected.text}</EuiText>
+                </EuiPanel>
+              </EuiResizablePanel>
+            </>
+          )}
+        </EuiResizableContainer>
+      </EuiPage>
     </>
   );
 };

src/components/resizable_container/helpers.ts

@@ -134,8 +134,8 @@ export const useContainerCallbacks = ({
     state: EuiResizableContainerState,
     action: EuiResizableContainerAction
   ): EuiResizableContainerState {
-    const getContainerSize = () => {
-      return state.isHorizontal
+    const getContainerSize = (isHorizontal: boolean) => {
+      return isHorizontal
         ? containerRef.current!.getBoundingClientRect().width
         : containerRef.current!.getBoundingClientRect().height;
     };
@@ -153,9 +153,11 @@ export const useContainerCallbacks = ({
 
     switch (action.type) {
       case 'EUI_RESIZABLE_CONTAINER_INIT': {
+        const { isHorizontal } = action.payload;
         return {
           ...state,
-          containerSize: getContainerSize(),
+          isHorizontal,
+          containerSize: getContainerSize(isHorizontal),
         };
       }
       case 'EUI_RESIZABLE_PANEL_REGISTER': {
@@ -547,9 +549,10 @@ export const useContainerCallbacks = ({
   const actions: EuiResizableContainerActions = useMemo(() => {
     return {
       reset: () => dispatch({ type: 'EUI_RESIZABLE_RESET' }),
-      initContainer: () =>
+      initContainer: (isHorizontal: boolean) =>
         dispatch({
           type: 'EUI_RESIZABLE_CONTAINER_INIT',
+          payload: { isHorizontal },
         }),
       registerPanel: (panel: EuiResizablePanelController) =>
         dispatch({

src/components/resizable_container/resizable_container.tsx

@@ -118,15 +118,15 @@ export const EuiResizableContainer: FunctionComponent<EuiResizableContainerProps
     onPanelWidthChange,
   });
 
-  const initialize = useCallback(() => {
-    actions.initContainer();
-  }, [actions]);
-
   const containerSize = useResizeObserver(
     containerRef.current,
     isHorizontal ? 'width' : 'height'
   );
 
+  const initialize = useCallback(() => {
+    actions.initContainer(isHorizontal);
+  }, [actions, isHorizontal]);
+
   useEffect(() => {
     if (containerSize.width > 0 && containerSize.height > 0) {
       initialize();

src/components/resizable_container/resizable_panel.tsx

@@ -359,32 +359,33 @@ export const EuiResizablePanel: FunctionComponent<EuiResizablePanelProps> = ({
     (modeType === 'custom' && isCollapsed) || isCollapsible;
 
   let theToggle;
+  let theResizer;
   if ((isCollapsible || modeType === 'custom') && hasLeftToggle) {
+    theResizer = resizers[resizerIds.current[0]];
     theToggle = (
       <EuiResizableCollapseButton
         externalPosition="before"
         direction={isHorizontal ? 'horizontal' : 'vertical'}
         isVisible={
-          resizers[resizerIds.current[0]].isFocused ||
-          resizers[resizerIds.current[0]].isDisabled
+          theResizer && (theResizer.isFocused || theResizer.isDisabled)
         }
-        isCollapsed={resizers[resizerIds.current[0]].isDisabled}
+        isCollapsed={theResizer && theResizer.isDisabled}
         internalPosition={toggleOpts.position as ToggleOptions['position']}
         data-test-subj={toggleOpts['data-test-subj']}
         aria-label={toggleButtonAriaLabel}
         onClick={collapseRight}
       />
     );
   } else if ((isCollapsible || modeType === 'custom') && hasRightToggle) {
+    theResizer = resizers[resizerIds.current[1]];
     theToggle = (
       <EuiResizableCollapseButton
         externalPosition="after"
         direction={isHorizontal ? 'horizontal' : 'vertical'}
         isVisible={
-          resizers[resizerIds.current[1]].isFocused ||
-          resizers[resizerIds.current[1]].isDisabled
+          theResizer && (theResizer.isFocused || theResizer.isDisabled)
         }
-        isCollapsed={resizers[resizerIds.current[1]].isDisabled}
+        isCollapsed={theResizer && theResizer.isDisabled}
         internalPosition={toggleOpts.position as ToggleOptions['position']}
         data-test-subj={toggleOpts['data-test-subj']}
         aria-label={toggleButtonAriaLabel}

src/components/resizable_container/types.ts

@@ -75,6 +75,7 @@ interface ActionReset {
 
 interface ActionInit {
   type: 'EUI_RESIZABLE_CONTAINER_INIT';
+  payload: { isHorizontal: boolean };
 }
 
 export interface ActionDragStart {
@@ -169,7 +170,7 @@ export type EuiResizableContainerAction =
 
 export interface EuiResizableContainerActions {
   reset: () => void;
-  initContainer: () => void;
+  initContainer: (isHorizontal: boolean) => void;
   registerPanel: (panel: EuiResizablePanelController) => void;
   deregisterPanel: (panelId: EuiResizablePanelController['id']) => void;
   registerResizer: (resizer: EuiResizableButtonController) => void;