From 26c6adacad4eb55f3480a8c558a72be12a08ed1d Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Fri, 19 Feb 2021 14:54:58 -0600 Subject: [PATCH 1/8] dynamic isHorizontal; prevent reregistry errors --- src/components/resizable_container/helpers.ts | 11 +++++++---- .../resizable_collapse_button.tsx | 4 ++-- .../resizable_container/resizable_container.tsx | 14 +++++++++----- .../resizable_container/resizable_panel.tsx | 13 +++++++------ src/components/resizable_container/types.ts | 3 ++- 5 files changed, 27 insertions(+), 18 deletions(-) diff --git a/src/components/resizable_container/helpers.ts b/src/components/resizable_container/helpers.ts index 4577cb13268..6ede30efa02 100644 --- a/src/components/resizable_container/helpers.ts +++ b/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({ diff --git a/src/components/resizable_container/resizable_collapse_button.tsx b/src/components/resizable_container/resizable_collapse_button.tsx index 51c8c6eb5d6..3a87b240f09 100644 --- a/src/components/resizable_container/resizable_collapse_button.tsx +++ b/src/components/resizable_container/resizable_collapse_button.tsx @@ -17,7 +17,7 @@ * under the License. */ -import React, { FunctionComponent } from 'react'; +import React, { useMemo, FunctionComponent } from 'react'; import classNames from 'classnames'; import { EuiButtonIcon, EuiButtonIconPropsForButton } from '../button'; @@ -58,7 +58,7 @@ export const EuiResizableCollapseButton: FunctionComponent { - const isHorizontal = direction === 'horizontal'; + const isHorizontal = useMemo(() => direction === 'horizontal', [direction]); const classes = classNames( 'euiResizableToggleButton', diff --git a/src/components/resizable_container/resizable_container.tsx b/src/components/resizable_container/resizable_container.tsx index a46ff802f53..36f4c79650a 100644 --- a/src/components/resizable_container/resizable_container.tsx +++ b/src/components/resizable_container/resizable_container.tsx @@ -21,6 +21,7 @@ import React, { ReactNode, ReactElement, useEffect, + useMemo, useRef, useCallback, CSSProperties, @@ -101,7 +102,10 @@ export const EuiResizableContainer: FunctionComponent { const containerRef = useRef(null); - const isHorizontal = direction === containerDirections.horizontal; + const isHorizontal = useMemo( + () => direction === containerDirections.horizontal, + [direction] + ); const classes = classNames( 'euiResizableContainer', @@ -118,15 +122,15 @@ export const EuiResizableContainer: FunctionComponent { - 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(); diff --git a/src/components/resizable_container/resizable_panel.tsx b/src/components/resizable_container/resizable_panel.tsx index cf0d28e3129..a234c948637 100644 --- a/src/components/resizable_container/resizable_panel.tsx +++ b/src/components/resizable_container/resizable_panel.tsx @@ -359,16 +359,17 @@ export const EuiResizablePanel: FunctionComponent = ({ (modeType === 'custom' && isCollapsed) || isCollapsible; let theToggle; + let theResizer; if ((isCollapsible || modeType === 'custom') && hasLeftToggle) { + theResizer = resizers[resizerIds.current[0]]; theToggle = ( = ({ /> ); } else if ((isCollapsible || modeType === 'custom') && hasRightToggle) { + theResizer = resizers[resizerIds.current[1]]; theToggle = ( void; - initContainer: () => void; + initContainer: (isHorizontal: boolean) => void; registerPanel: (panel: EuiResizablePanelController) => void; deregisterPanel: (panelId: EuiResizablePanelController['id']) => void; registerResizer: (resizer: EuiResizableButtonController) => void; From 55f82afd07564d93e61db3a25fe2c797e84ed335 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Fri, 19 Feb 2021 14:58:12 -0600 Subject: [PATCH 2/8] revert me --- .../resizable_container/resizable_panel_collapsible.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/resizable_container/resizable_panel_collapsible.js b/src-docs/src/views/resizable_container/resizable_panel_collapsible.js index f540a3240d0..59fa192f6ed 100644 --- a/src-docs/src/views/resizable_container/resizable_panel_collapsible.js +++ b/src-docs/src/views/resizable_container/resizable_panel_collapsible.js @@ -9,6 +9,7 @@ import { EuiSpacer, EuiPage, } from '../../../../src/components'; +import { useIsWithinBreakpoints } from '../../../../src/services/hooks'; import { fake } from 'faker'; const texts = []; @@ -52,6 +53,9 @@ export default () => { /> )); + const isMobile = useIsWithinBreakpoints(['xs', 's']); + const style = isMobile ? { height: '100%' } : { minHeight: '100%' }; + return ( <> @@ -59,7 +63,9 @@ export default () => { - + {(EuiResizablePanel, EuiResizableButton) => ( <> { - +

{itemSelected.label}

 From ef7519ed20ed8deb432893ab8c79b55ea2810179 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Fri, 19 Feb 2021 15:00:30 -0600 Subject: [PATCH 3/8] required param --- src/components/resizable_container/helpers.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/resizable_container/helpers.ts b/src/components/resizable_container/helpers.ts index 6ede30efa02..83186ee8bb9 100644 --- a/src/components/resizable_container/helpers.ts +++ b/src/components/resizable_container/helpers.ts @@ -134,7 +134,7 @@ export const useContainerCallbacks = ({ state: EuiResizableContainerState, action: EuiResizableContainerAction ): EuiResizableContainerState { - const getContainerSize = (isHorizontal?: boolean) => { + const getContainerSize = (isHorizontal: boolean) => { return isHorizontal ? containerRef.current!.getBoundingClientRect().width : containerRef.current!.getBoundingClientRect().height; From 4e9c664647687139d9d24e86e3890b570015b4fa Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Mon, 22 Feb 2021 12:32:21 -0600 Subject: [PATCH 4/8] remove useMemo --- .../resizable_container/resizable_collapse_button.tsx | 4 ++-- src/components/resizable_container/resizable_container.tsx | 6 +----- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/components/resizable_container/resizable_collapse_button.tsx b/src/components/resizable_container/resizable_collapse_button.tsx index 3a87b240f09..51c8c6eb5d6 100644 --- a/src/components/resizable_container/resizable_collapse_button.tsx +++ b/src/components/resizable_container/resizable_collapse_button.tsx @@ -17,7 +17,7 @@ * under the License. */ -import React, { useMemo, FunctionComponent } from 'react'; +import React, { FunctionComponent } from 'react'; import classNames from 'classnames'; import { EuiButtonIcon, EuiButtonIconPropsForButton } from '../button'; @@ -58,7 +58,7 @@ export const EuiResizableCollapseButton: FunctionComponent { - const isHorizontal = useMemo(() => direction === 'horizontal', [direction]); + const isHorizontal = direction === 'horizontal'; const classes = classNames( 'euiResizableToggleButton', diff --git a/src/components/resizable_container/resizable_container.tsx b/src/components/resizable_container/resizable_container.tsx index 36f4c79650a..e4b5b5b5036 100644 --- a/src/components/resizable_container/resizable_container.tsx +++ b/src/components/resizable_container/resizable_container.tsx @@ -21,7 +21,6 @@ import React, { ReactNode, ReactElement, useEffect, - useMemo, useRef, useCallback, CSSProperties, @@ -102,10 +101,7 @@ export const EuiResizableContainer: FunctionComponent { const containerRef = useRef(null); - const isHorizontal = useMemo( - () => direction === containerDirections.horizontal, - [direction] - ); + const isHorizontal = direction === containerDirections.horizontal; const classes = classNames( 'euiResizableContainer', From d15eef7e24d501084360c80ea40338249335d4f2 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Mon, 22 Feb 2021 15:11:42 -0600 Subject: [PATCH 5/8] docs; CL --- CHANGELOG.md | 1 + .../resizable_panel_collapsible.js | 47 +++++++++++++++++-- 2 files changed, 44 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c9a7f199e4f..48a6e4c85a6 100644 --- a/CHANGELOG.md +++ b/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** diff --git a/src-docs/src/views/resizable_container/resizable_panel_collapsible.js b/src-docs/src/views/resizable_container/resizable_panel_collapsible.js index 59fa192f6ed..f2c2a813b6c 100644 --- a/src-docs/src/views/resizable_container/resizable_panel_collapsible.js +++ b/src-docs/src/views/resizable_container/resizable_panel_collapsible.js @@ -8,6 +8,7 @@ import { EuiTitle, EuiSpacer, EuiPage, + EuiCode, } from '../../../../src/components'; import { useIsWithinBreakpoints } from '../../../../src/services/hooks'; import { fake } from 'faker'; @@ -63,9 +64,7 @@ export default () => { - + {(EuiResizablePanel, EuiResizableButton) => ( <> { - +

{itemSelected.label}

 @@ -165,6 +164,46 @@ export default () => { )} + + + +

Responsive

+

+ It is possible to dynamically change the direction{' '} + prop to allow for adapting layouts to screen size. Resize the window + to see the panel orientation change. +

+ + + + + + {(EuiResizablePanel, EuiResizableButton) => ( + <> + + {itemElements} + + + + + + + +

{itemSelected.label}

+ + + {itemSelected.text} + + + + )} + + ); }; From b3b2da9c0b9d9608caa0c3b22f728a7dfe6d53c0 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Mon, 22 Feb 2021 15:40:54 -0600 Subject: [PATCH 6/8] Revert "revert me" This reverts commit 55f82afd07564d93e61db3a25fe2c797e84ed335. --- .../views/resizable_container/resizable_panel_collapsible.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src-docs/src/views/resizable_container/resizable_panel_collapsible.js b/src-docs/src/views/resizable_container/resizable_panel_collapsible.js index f2c2a813b6c..620df328fed 100644 --- a/src-docs/src/views/resizable_container/resizable_panel_collapsible.js +++ b/src-docs/src/views/resizable_container/resizable_panel_collapsible.js @@ -10,7 +10,6 @@ import { EuiPage, EuiCode, } from '../../../../src/components'; -import { useIsWithinBreakpoints } from '../../../../src/services/hooks'; import { fake } from 'faker'; const texts = []; @@ -54,9 +53,6 @@ export default () => { /> )); - const isMobile = useIsWithinBreakpoints(['xs', 's']); - const style = isMobile ? { height: '100%' } : { minHeight: '100%' }; - return ( <> From e0d981744d15d20d59ef67119e14fd017fde87b9 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Mon, 22 Feb 2021 15:45:47 -0600 Subject: [PATCH 7/8] docs section --- .../resizable_container_example.js | 48 ++++++++++ .../resizable_panel_collapsible.js | 41 --------- .../resizable_panel_collapsible_responsive.js | 89 +++++++++++++++++++ 3 files changed, 137 insertions(+), 41 deletions(-) create mode 100644 src-docs/src/views/resizable_container/resizable_panel_collapsible_responsive.js diff --git a/src-docs/src/views/resizable_container/resizable_container_example.js b/src-docs/src/views/resizable_container/resizable_container_example.js index a2d817755e6..0c6c64d9147 100644 --- a/src-docs/src/views/resizable_container/resizable_container_example.js +++ b/src-docs/src/views/resizable_container/resizable_container_example.js @@ -27,6 +27,7 @@ import ResizableContainerVertical from './resizable_container_vertical'; import ResizableContainerResetValues from './resizable_container_reset_values'; import ResizablePanels from './resizable_panels'; import ResizablePanelCollapsible from './resizable_panel_collapsible'; +import ResizablePanelCollapsibleResponsive from './resizable_panel_collapsible_responsive'; import ResizablePanelCollapsibleOpts from './resizable_panel_collapsible_options'; import ResizablePanelCollapsibleExt from './resizable_panel_collapsible_external'; @@ -35,6 +36,7 @@ const ResizableContainerVerticalSource = require('!!raw-loader!./resizable_conta const ResizableContainerResetValuesSource = require('!!raw-loader!./resizable_container_reset_values'); const ResizablePanelsSource = require('!!raw-loader!./resizable_panels'); const ResizablePanelCollapsibleSource = require('!!raw-loader!./resizable_panel_collapsible'); +const ResizablePanelCollapsibleResponsiveSource = require('!!raw-loader!./resizable_panel_collapsible_responsive'); const ResizablePanelCollapsibleOptsSource = require('!!raw-loader!./resizable_panel_collapsible_options'); const ResizablePanelCollapsibleExtSource = require('!!raw-loader!./resizable_panel_collapsible_external'); @@ -105,6 +107,28 @@ const collapsibleSnippet = ` )} `; +const ResizablePanelCollapsibleResponsiveHtml = renderToHtml( + ResizablePanelCollapsibleResponsive +); +const responsiveSnippet = ` + {(EuiResizablePanel, EuiResizableButton) => ( + <> + + +

{text}

+ + + + + + + +

{text}

+ + + + )} +`; const ResizablePanelCollapsibleOptsHtml = renderToHtml( ResizablePanelCollapsibleOpts ); @@ -366,6 +390,30 @@ export const ResizableContainerExample = { demo: , snippet: collapsibleSnippet, }, + { + source: [ + { + type: GuideSectionTypes.JS, + code: ResizablePanelCollapsibleResponsiveSource, + }, + { + type: GuideSectionTypes.HTML, + code: ResizablePanelCollapsibleResponsiveHtml, + }, + ], + title: 'Responsive layout', + text: ( +
+

+ It is possible to dynamically change the{' '} + direction prop to allow for adapting layouts to + screen size. Resize the window to see the panel orientation change. +

+
+ ), + snippet: responsiveSnippet, + demo: , + }, { source: [ { diff --git a/src-docs/src/views/resizable_container/resizable_panel_collapsible.js b/src-docs/src/views/resizable_container/resizable_panel_collapsible.js index 620df328fed..f540a3240d0 100644 --- a/src-docs/src/views/resizable_container/resizable_panel_collapsible.js +++ b/src-docs/src/views/resizable_container/resizable_panel_collapsible.js @@ -8,7 +8,6 @@ import { EuiTitle, EuiSpacer, EuiPage, - EuiCode, } from '../../../../src/components'; import { fake } from 'faker'; @@ -160,46 +159,6 @@ export default () => { )} - - - -

Responsive

-

- It is possible to dynamically change the direction{' '} - prop to allow for adapting layouts to screen size. Resize the window - to see the panel orientation change. -

- - - - - - {(EuiResizablePanel, EuiResizableButton) => ( - <> - - {itemElements} - - - - - - - -

{itemSelected.label}

- - - {itemSelected.text} - - - - )} - - ); }; diff --git a/src-docs/src/views/resizable_container/resizable_panel_collapsible_responsive.js b/src-docs/src/views/resizable_container/resizable_panel_collapsible_responsive.js new file mode 100644 index 00000000000..cab328dec7f --- /dev/null +++ b/src-docs/src/views/resizable_container/resizable_panel_collapsible_responsive.js @@ -0,0 +1,89 @@ +import React, { useState } from 'react'; +import { + EuiText, + EuiResizableContainer, + EuiListGroup, + EuiListGroupItem, + EuiPanel, + EuiTitle, + EuiSpacer, + EuiPage, +} from '../../../../src/components'; +import { useIsWithinBreakpoints } from '../../../../src/services/hooks'; +import { fake } from 'faker'; + +const texts = []; + +for (let i = 0; i < 4; i++) { + texts.push(

{fake('{{lorem.paragraph}}')}

); +} + +export default () => { + const items = [ + { + id: 1, + label: 'First item', + text: texts[0], + active: true, + }, + { + id: 2, + label: 'Second item', + text: texts[1], + }, + { + id: 3, + label: 'Third item', + text: texts[2], + }, + { + id: 4, + label: 'Forth item', + text: texts[3], + }, + ]; + + const [itemSelected, setItemSelected] = useState(items[0]); + const itemElements = items.map((item, index) => ( + setItemSelected(item)} + label={item.label} + size="s" + /> + )); + + const isMobile = useIsWithinBreakpoints(['xs', 's']); + const style = isMobile ? { height: '100%' } : { minHeight: '100%' }; + + return ( + + + {(EuiResizablePanel, EuiResizableButton) => ( + <> + + {itemElements} + + + + + + + +

{itemSelected.label}

+ + + {itemSelected.text} + + + + )} + + + ); +}; From 941dcf6a3f1a11f28518483ef45316d2686c53cb Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Tue, 23 Feb 2021 11:52:56 -0600 Subject: [PATCH 8/8] useIsWithinBreakpoints export --- CHANGELOG.md | 1 + .../resizable_panel_collapsible_responsive.js | 2 +- src/services/index.ts | 6 +++++- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 48a6e4c85a6..1befa3e695b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ - 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)) +- Exported `useIsWithinBreakpoints` hook ([#4557](https://github.com/elastic/eui/pull/4557)) **Bug fixes** diff --git a/src-docs/src/views/resizable_container/resizable_panel_collapsible_responsive.js b/src-docs/src/views/resizable_container/resizable_panel_collapsible_responsive.js index cab328dec7f..bea5dec88bc 100644 --- a/src-docs/src/views/resizable_container/resizable_panel_collapsible_responsive.js +++ b/src-docs/src/views/resizable_container/resizable_panel_collapsible_responsive.js @@ -9,7 +9,7 @@ import { EuiSpacer, EuiPage, } from '../../../../src/components'; -import { useIsWithinBreakpoints } from '../../../../src/services/hooks'; +import { useIsWithinBreakpoints } from '../../../../src/services'; import { fake } from 'faker'; const texts = []; diff --git a/src/services/index.ts b/src/services/index.ts index 4b4da5d7420..1f6378b9585 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -116,4 +116,8 @@ export { export { EuiWindowEvent } from './window_event'; -export { useCombinedRefs, useDependentState } from './hooks'; +export { + useCombinedRefs, + useDependentState, + useIsWithinBreakpoints, +} from './hooks';