From d4894758bea34e6d23f4c1ef6231270e3100284a Mon Sep 17 00:00:00 2001 From: "Harbarth, Lukas" Date: Wed, 26 Jun 2019 11:29:48 +0200 Subject: [PATCH 1/8] feat(OverflowToolbar): initial implementation --- .../__karma_snapshots__/OverflowToolbar.md | 396 ++++++++++++++++++ .../OverflowToolbar/OverflowToolbar.jss.ts | 59 +++ .../OverflowToolbar/OverflowToolbar.karma.tsx | 61 +++ .../OverflowToolbar/demo.stories.tsx | 27 ++ .../src/components/OverflowToolbar/index.tsx | 207 +++++++++ packages/fiori3/src/enums/ToolbarAlignment.ts | 6 + packages/fiori3/src/enums/ToolbarDesign.ts | 6 + packages/fiori3/src/index.ts | 6 + packages/fiori3/src/lib/OverflowToolbar.ts | 3 + packages/fiori3/src/lib/ToolbarAlignment.ts | 3 + packages/fiori3/src/lib/ToolbarDesign.ts | 3 + 11 files changed, 777 insertions(+) create mode 100644 packages/fiori3/__karma_snapshots__/OverflowToolbar.md create mode 100644 packages/fiori3/src/components/OverflowToolbar/OverflowToolbar.jss.ts create mode 100644 packages/fiori3/src/components/OverflowToolbar/OverflowToolbar.karma.tsx create mode 100644 packages/fiori3/src/components/OverflowToolbar/demo.stories.tsx create mode 100644 packages/fiori3/src/components/OverflowToolbar/index.tsx create mode 100644 packages/fiori3/src/enums/ToolbarAlignment.ts create mode 100644 packages/fiori3/src/enums/ToolbarDesign.ts create mode 100644 packages/fiori3/src/lib/OverflowToolbar.ts create mode 100644 packages/fiori3/src/lib/ToolbarAlignment.ts create mode 100644 packages/fiori3/src/lib/ToolbarDesign.ts diff --git a/packages/fiori3/__karma_snapshots__/OverflowToolbar.md b/packages/fiori3/__karma_snapshots__/OverflowToolbar.md new file mode 100644 index 00000000000..80db8f6db3e --- /dev/null +++ b/packages/fiori3/__karma_snapshots__/OverflowToolbar.md @@ -0,0 +1,396 @@ +# `OverflowToolbar` + +#### `Toolbar with Align:Start and Design:PageFooter` + +``` + + + + + +
+ Test + +
+ + + + + +``` + +#### `Toolbar with Align:Middle and Design:PageFooter` + +``` + + + + + +
+ Test + +
+ + + + + +``` + +#### `Toolbar with Align:End and Design:PageFooter` + +``` + + + + + +
+ Test + +
+ + + + + +``` + +#### `Toolbar with Align:SpaceBetween and Design:PageFooter` + +``` + + + + + +
+ Test + +
+ + + + + +``` + +#### `Toolbar with Align:Start and Design:ContainerBar` + +``` + + + + + +
+ Test + +
+ + + + + +``` + +#### `Toolbar with Align:Middle and Design:ContainerBar` + +``` + + + + + +
+ Test + +
+ + + + + +``` + +#### `Toolbar with Align:End and Design:ContainerBar` + +``` + + + + + +
+ Test + +
+ + + + + +``` + +#### `Toolbar with Align:SpaceBetween and Design:ContainerBar` + +``` + + + + + +
+ Test + +
+ + + + + +``` + +#### `Toolbar with Align:Start and Design:ContentBar` + +``` + + + + + +
+ Test + +
+ + + + + +``` + +#### `Toolbar with Align:Middle and Design:ContentBar` + +``` + + + + + +
+ Test + +
+ + + + + +``` + +#### `Toolbar with Align:End and Design:ContentBar` + +``` + + + + + +
+ Test + +
+ + + + + +``` + +#### `Toolbar with Align:SpaceBetween and Design:ContentBar` + +``` + + + + + +
+ Test + +
+ + + + + +``` + +#### `Toolbar with Align:Start and Design:ContentBarTransparent` + +``` + + + + + +
+ Test + +
+ + + + + +``` + +#### `Toolbar with Align:Middle and Design:ContentBarTransparent` + +``` + + + + + +
+ Test + +
+ + + + + +``` + +#### `Toolbar with Align:End and Design:ContentBarTransparent` + +``` + + + + + +
+ Test + +
+ + + + + +``` + +#### `Toolbar with Align:SpaceBetween and Design:ContentBarTransparent` + +``` + + + + + +
+ Test + +
+ + + + + +``` + +#### `Overflow Toolbar with Spacer` + +``` + + + + + +
+ + Test + + + + Test 2 + + +
+ + + + + +``` + +#### `Overflow Toolbar collapsed Elements` + +``` + + + + + +
+ + + + + + + + + + + + +
+ + + + + +``` + diff --git a/packages/fiori3/src/components/OverflowToolbar/OverflowToolbar.jss.ts b/packages/fiori3/src/components/OverflowToolbar/OverflowToolbar.jss.ts new file mode 100644 index 00000000000..f336d8a66b6 --- /dev/null +++ b/packages/fiori3/src/components/OverflowToolbar/OverflowToolbar.jss.ts @@ -0,0 +1,59 @@ +import { JSSTheme } from '../../interfaces/JSSTheme'; +import { ContentDensity } from '../..'; + +const styles = ({ contentDensity, parameters }: JSSTheme) => ({ + toolbarRoot: { + display: 'flex', + whiteSpace: 'nowrap', + overflow: 'hidden', + alignItems: 'center', + boxSizing: 'border-box', + background: 'transparent', + height: ContentDensity.Compact === contentDensity ? '2rem' : '3rem', + '&:focus': { + outline: 0 + }, + '& :first-child': { + marginLeft: '0.25rem' + }, + '& > *': { + marginRight: '0.5rem !important' // we need the !important here because otherwise e.g. the SearchField has no border + } + }, + toolbarAlignStart: { + justifyContent: 'flex-start' + }, + + toolbarAlignEnd: { + justifyContent: 'flex-end' + }, + + toolbarAlignMiddle: { + justifyContent: 'center' + }, + + toolbarAlignSpaceBetween: { + justifyContent: 'space-between' + }, + pageFooter: { + background: parameters.sapUiPageFooterBackground, + borderTop: `1px solid ${parameters.sapUiPageFooterBorderColor}` + }, + + containerBar: { + background: parameters.sapUiGroupContentBackground + // borderBottom: null + }, + + contentBar: { + background: parameters.sapUiListHeaderBackground, + borderBottom: `1px solid ${parameters.sapUiListHeaderBorderColor}` + }, + + contentBarTransparent: { + background: parameters.sapUiToolbarBackground, + borderBottom: `1px solid ${parameters.sapUiGroupTitleBorderColor}` + } +}); + +export default styles; diff --git a/packages/fiori3/src/components/OverflowToolbar/OverflowToolbar.karma.tsx b/packages/fiori3/src/components/OverflowToolbar/OverflowToolbar.karma.tsx new file mode 100644 index 00000000000..a7f8e852325 --- /dev/null +++ b/packages/fiori3/src/components/OverflowToolbar/OverflowToolbar.karma.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import { OverflowToolbar } from './index'; +import { mountThemedComponent } from '@shared/tests/utils'; +import { expect, use } from 'chai'; +import { ToolbarAlignment } from '../../lib/ToolbarAlignment'; +import { ToolbarDesign } from '../../lib/ToolbarDesign'; +import { Button } from '../../lib/Button'; +import { Label } from '../../lib/Label'; +import { Switch } from '../../lib/Switch'; +import { matchSnapshot } from 'chai-karma-snapshot'; + +use(matchSnapshot); + +const alignDesignFactory = () => { + Object.values(ToolbarDesign).forEach((design) => { + Object.values(ToolbarAlignment).forEach((align) => { + it(`Toolbar with Align:${align} and Design:${design}`, () => { + // console.log(align + design); + expect( + mountThemedComponent( + + Test + + ).debug() + ).to.matchSnapshot(); + }); + }); + }); +}; + +describe('OverflowToolbar', () => { + alignDesignFactory(); + + it(`Overflow Toolbar with Spacer`, () => { + const wrapper = mountThemedComponent( + + Test + + Test 2 + + ); + expect(wrapper.render().children().length).equal(3); + expect(wrapper.debug()).to.matchSnapshot(); + }); + + it(`Overflow Toolbar collapsed Elements`, () => { + const wrapper = mountThemedComponent( + + + + + + + + + + ); + expect(wrapper.update().children().length).equal(1); + expect(wrapper.debug()).to.matchSnapshot(); + }); +}); diff --git a/packages/fiori3/src/components/OverflowToolbar/demo.stories.tsx b/packages/fiori3/src/components/OverflowToolbar/demo.stories.tsx new file mode 100644 index 00000000000..8b04c40b7ff --- /dev/null +++ b/packages/fiori3/src/components/OverflowToolbar/demo.stories.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { select } from '@storybook/addon-knobs'; +import { storiesOf } from '@storybook/react'; +import { OverflowToolbar } from './index'; +import { ToolbarAlignment } from '../../lib/ToolbarAlignment'; +import { ToolbarDesign } from '../../lib/ToolbarDesign'; +import { Button } from '../../lib/Button'; +import { Label } from '../../lib/Label'; +import { Switch } from '../../lib/Switch'; + +const renderOverflowToolbar = () => ( + + + + + + + + + +); + +storiesOf('Components | Overflow Toolbar', module).add('Overflow Toolbar', renderOverflowToolbar); diff --git a/packages/fiori3/src/components/OverflowToolbar/index.tsx b/packages/fiori3/src/components/OverflowToolbar/index.tsx new file mode 100644 index 00000000000..e6e037d90a3 --- /dev/null +++ b/packages/fiori3/src/components/OverflowToolbar/index.tsx @@ -0,0 +1,207 @@ +import React, { Children, Component, CSSProperties, ReactNode, ReactNodeArray, RefObject } from 'react'; +import styles from './OverflowToolbar.jss'; +import { StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base'; +import { ToolbarAlignment } from '../../lib/ToolbarAlignment'; +import { ToolbarDesign } from '../../lib/ToolbarDesign'; +import { CommonProps } from '../../interfaces/CommonProps'; +import { ClassProps } from '../../interfaces/ClassProps'; +import { Popover } from '../../lib/Popover'; +import { Button } from '../../lib/Button'; +import { PlacementType } from '../..'; +import boot from '@ui5/webcomponents-base/src/boot'; + +export interface ToolbarPropTypes extends CommonProps { + width?: CSSProperties['width']; + + children: ReactNode | ReactNodeArray; + + align?: ToolbarAlignment; + + toolbarDesign?: ToolbarDesign; + + overflow?: boolean; +} + +interface ToolbarInternalProps extends ToolbarPropTypes, ClassProps {} + +@withStyles(styles) +export class OverflowToolbar extends Component { + static defaultProps = { + width: 'auto', + align: ToolbarAlignment.Start, + toolbarDesign: ToolbarDesign.ContentBar, + overflow: false + }; + state = { + children: this.props.children, + toolbarWidth: 0, + popoverElements: [], + popoverOpen: true, + renderToggle: false, + previousWidth: [] + }; + private toolbarRef: RefObject = React.createRef(); + + componentDidMount(): void { + boot().then(() => { + if (this.props.overflow) { + if (this.state.toolbarWidth === 0) { + this.setState({ toolbarWidth: this.toolbarRef.current.scrollWidth }); + } + window.addEventListener('resize', () => { + setTimeout(() => { + this.handleResize(); + }, 50); + }); + } + }); + } + + componentDidUpdate(prevProps: Readonly, prevState, snapshot?: any): void { + boot().then(() => { + if (this.props.overflow) { + if (this.toolbarRef.current.clientWidth < this.toolbarRef.current.scrollWidth) { + this.handleResize(); + } + if (this.props.width !== prevProps.width) { + this.handleResize(); + } + } + }); + } + + componentWillUnmount(): void { + window.removeEventListener('resize', this.handleResize); + } + + private handleResize() { + let newChildren = this.state.children; + let { popoverElements, renderToggle, previousWidth } = this.state; + if (this.state.toolbarWidth > this.toolbarRef.current.clientWidth) { + if (this.toolbarRef.current.clientWidth < this.toolbarRef.current.scrollWidth) { + newChildren = Children.toArray(this.state.children).slice(0, -1); + popoverElements = [Children.toArray(this.state.children).slice(-1)[0]].concat(this.state.popoverElements); + renderToggle = true; + previousWidth = [this.toolbarRef.current.scrollWidth + 10].concat(this.state.previousWidth); + } + this.setState({ + toolbarWidth: this.toolbarRef.current.scrollWidth, + children: newChildren, + renderToggle, + popoverElements, + previousWidth + }); + } + if (this.state.toolbarWidth < this.toolbarRef.current.clientWidth) { + this.addToolbarItem(newChildren, popoverElements, previousWidth, renderToggle); + } + } + + private addToolbarItem(newChildren, popoverElements, previousWidth, renderToggle) { + if (Children.count(this.props.children) !== Children.count(this.state.children)) { + if ( + this.toolbarRef.current.clientWidth === this.toolbarRef.current.scrollWidth && + this.toolbarRef.current.clientWidth >= this.state.previousWidth[0] + ) { + const currentChildrenLength = Children.count(this.state.children); + newChildren = Children.toArray(this.state.children).concat([ + Children.only(Children.toArray(this.props.children)[currentChildrenLength]) + ]); + popoverElements.shift(); + previousWidth.shift(); + } + } + this.setState({ + toolbarWidth: this.toolbarRef.current.clientWidth, + children: newChildren, + popoverElements, + previousWidth + }); + if (Children.count(this.props.children) !== Children.count(this.state.children)) { + if ( + this.toolbarRef.current.clientWidth === this.toolbarRef.current.scrollWidth && + this.toolbarRef.current.clientWidth >= this.state.previousWidth[0] + ) { + this.addToolbarItem(newChildren, popoverElements, previousWidth, renderToggle); + } + } else { + this.setState({ renderToggle: false }); + } + } + + render() { + const { width, align, toolbarDesign, classes, className, style, tooltip } = this.props; + const rootClasses = StyleClassHelper.of(classes.toolbarRoot); + const overflowClasses = StyleClassHelper.of(classes.overflowRoot); + + switch (align) { + case ToolbarAlignment.Start: + rootClasses.put(classes.toolbarAlignStart); + break; + case ToolbarAlignment.End: + rootClasses.put(classes.toolbarAlignEnd); + break; + case ToolbarAlignment.Middle: + rootClasses.put(classes.toolbarAlignMiddle); + break; + case ToolbarAlignment.SpaceBetween: + rootClasses.put(classes.toolbarAlignSpaceBetween); + break; + default: + rootClasses.put(classes.toolbarAlignStart); + } + + switch (toolbarDesign) { + case ToolbarDesign.ContentBar: + rootClasses.put(classes.contentBar); + overflowClasses.put(classes.contentBar); + break; + case ToolbarDesign.PageFooter: + rootClasses.put(classes.pageFooter); + overflowClasses.put(classes.pageFooter); + break; + case ToolbarDesign.ContainerBar: + rootClasses.put(classes.containerBar); + overflowClasses.put(classes.containerBar); + break; + case ToolbarDesign.ContentBarTransparent: + rootClasses.put(classes.contentBarTransparent); + overflowClasses.put(classes.contentBarTransparent); + break; + default: + rootClasses.put(classes.containerBar); + overflowClasses.put(classes.containerBar); + } + + if (className) { + rootClasses.put(className); + } + + const inlineStyle = { width }; + if (style) { + Object.assign(inlineStyle, style); + } + const PopoverWrapper = () => { + if (this.state.renderToggle) { + return ( + } + noHeader={true} + placementType={PlacementType.Bottom} + > +
{this.state.popoverElements}
+ + ); + } + return null; + }; + return ( +
+ {this.state.children} + +
+ ); + } +} diff --git a/packages/fiori3/src/enums/ToolbarAlignment.ts b/packages/fiori3/src/enums/ToolbarAlignment.ts new file mode 100644 index 00000000000..1a4b387b4d9 --- /dev/null +++ b/packages/fiori3/src/enums/ToolbarAlignment.ts @@ -0,0 +1,6 @@ +export enum ToolbarAlignment { + Start = 'Start', + Middle = 'Middle', + End = 'End', + SpaceBetween = 'SpaceBetween' +} diff --git a/packages/fiori3/src/enums/ToolbarDesign.ts b/packages/fiori3/src/enums/ToolbarDesign.ts new file mode 100644 index 00000000000..9cf35547648 --- /dev/null +++ b/packages/fiori3/src/enums/ToolbarDesign.ts @@ -0,0 +1,6 @@ +export enum ToolbarDesign { + PageFooter = 'PageFooter', + ContainerBar = 'ContainerBar', + ContentBar = 'ContentBar', + ContentBarTransparent = 'ContentBarTransparent' +} diff --git a/packages/fiori3/src/index.ts b/packages/fiori3/src/index.ts index ac8392617cb..cadbb411898 100644 --- a/packages/fiori3/src/index.ts +++ b/packages/fiori3/src/index.ts @@ -66,6 +66,7 @@ import { ObjectPageSection } from './lib/ObjectPageSection'; import { ObjectPageSubSection } from './lib/ObjectPageSubSection'; import { ObjectStatus } from './lib/ObjectStatus'; import { Option } from './lib/Option'; +import { OverflowToolbar } from './lib/OverflowToolbar'; import { Page } from './lib/Page'; import { PageBackgroundDesign } from './lib/PageBackgroundDesign'; import { Panel } from './lib/Panel'; @@ -107,6 +108,8 @@ import { TitleLevel } from './lib/TitleLevel'; import { ToggleButton } from './lib/ToggleButton'; import { Token } from './lib/Token'; import { Tokenizer } from './lib/Tokenizer'; +import { ToolbarAlignment } from './lib/ToolbarAlignment'; +import { ToolbarDesign } from './lib/ToolbarDesign'; import { ValueState } from './lib/ValueState'; import { VariantManagement } from './lib/VariantManagement'; import { VerticalAlign } from './lib/VerticalAlign'; @@ -177,6 +180,7 @@ export { ObjectPageSubSection, ObjectStatus, Option, + OverflowToolbar, Page, PageBackgroundDesign, Panel, @@ -218,6 +222,8 @@ export { ToggleButton, Token, Tokenizer, + ToolbarAlignment, + ToolbarDesign, ValueState, VariantManagement, VerticalAlign, diff --git a/packages/fiori3/src/lib/OverflowToolbar.ts b/packages/fiori3/src/lib/OverflowToolbar.ts new file mode 100644 index 00000000000..a5815cfe64b --- /dev/null +++ b/packages/fiori3/src/lib/OverflowToolbar.ts @@ -0,0 +1,3 @@ +import { OverflowToolbar } from '../components/OverflowToolbar'; + +export { OverflowToolbar }; diff --git a/packages/fiori3/src/lib/ToolbarAlignment.ts b/packages/fiori3/src/lib/ToolbarAlignment.ts new file mode 100644 index 00000000000..1169eec73c2 --- /dev/null +++ b/packages/fiori3/src/lib/ToolbarAlignment.ts @@ -0,0 +1,3 @@ +import { ToolbarAlignment } from '../enums/ToolbarAlignment'; + +export { ToolbarAlignment }; diff --git a/packages/fiori3/src/lib/ToolbarDesign.ts b/packages/fiori3/src/lib/ToolbarDesign.ts new file mode 100644 index 00000000000..222af42fa76 --- /dev/null +++ b/packages/fiori3/src/lib/ToolbarDesign.ts @@ -0,0 +1,3 @@ +import { ToolbarDesign } from '../enums/ToolbarDesign'; + +export { ToolbarDesign }; From e9a27f277485e0290ebd6ddd238dd9cdceccb3cd Mon Sep 17 00:00:00 2001 From: Lukas Date: Mon, 1 Jul 2019 15:23:15 +0200 Subject: [PATCH 2/8] Update packages/main/src/components/OverflowToolbar/OverflowToolbar.jss.ts Co-Authored-By: Marcus Notheis --- .../main/src/components/OverflowToolbar/OverflowToolbar.jss.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/components/OverflowToolbar/OverflowToolbar.jss.ts b/packages/main/src/components/OverflowToolbar/OverflowToolbar.jss.ts index f336d8a66b6..a8b6c368b7d 100644 --- a/packages/main/src/components/OverflowToolbar/OverflowToolbar.jss.ts +++ b/packages/main/src/components/OverflowToolbar/OverflowToolbar.jss.ts @@ -1,5 +1,5 @@ import { JSSTheme } from '../../interfaces/JSSTheme'; -import { ContentDensity } from '../..'; +import { ContentDensity } from '../../lib/ContentDensity'; const styles = ({ contentDensity, parameters }: JSSTheme) => ({ toolbarRoot: { From 4a886c5a7cfe1a0fb06d175b7d824286f6b16d6f Mon Sep 17 00:00:00 2001 From: Lukas Date: Mon, 1 Jul 2019 15:23:26 +0200 Subject: [PATCH 3/8] Update packages/main/src/components/OverflowToolbar/OverflowToolbar.karma.tsx Co-Authored-By: Marcus Notheis --- .../src/components/OverflowToolbar/OverflowToolbar.karma.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/components/OverflowToolbar/OverflowToolbar.karma.tsx b/packages/main/src/components/OverflowToolbar/OverflowToolbar.karma.tsx index a7f8e852325..3aca6d3585a 100644 --- a/packages/main/src/components/OverflowToolbar/OverflowToolbar.karma.tsx +++ b/packages/main/src/components/OverflowToolbar/OverflowToolbar.karma.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { OverflowToolbar } from './index'; +import { OverflowToolbar } from '../../lib/OverflowToolbar'; import { mountThemedComponent } from '@shared/tests/utils'; import { expect, use } from 'chai'; import { ToolbarAlignment } from '../../lib/ToolbarAlignment'; From 2e234326b7d528a7d48c5e1497ef5a3fc59e0b1d Mon Sep 17 00:00:00 2001 From: Lukas Date: Mon, 1 Jul 2019 15:23:36 +0200 Subject: [PATCH 4/8] Update packages/main/src/components/OverflowToolbar/demo.stories.tsx Co-Authored-By: Marcus Notheis --- packages/main/src/components/OverflowToolbar/demo.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/components/OverflowToolbar/demo.stories.tsx b/packages/main/src/components/OverflowToolbar/demo.stories.tsx index 8b04c40b7ff..681d48ae972 100644 --- a/packages/main/src/components/OverflowToolbar/demo.stories.tsx +++ b/packages/main/src/components/OverflowToolbar/demo.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { select } from '@storybook/addon-knobs'; import { storiesOf } from '@storybook/react'; -import { OverflowToolbar } from './index'; +import { OverflowToolbar } from '../../lib/OverflowToolbar'; import { ToolbarAlignment } from '../../lib/ToolbarAlignment'; import { ToolbarDesign } from '../../lib/ToolbarDesign'; import { Button } from '../../lib/Button'; From a9dc98b6a3264ecb56742271b8b17f3dedd4ba63 Mon Sep 17 00:00:00 2001 From: Lukas Date: Mon, 1 Jul 2019 15:25:13 +0200 Subject: [PATCH 5/8] Update packages/main/src/components/OverflowToolbar/index.tsx Co-Authored-By: Marcus Notheis --- packages/main/src/components/OverflowToolbar/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/components/OverflowToolbar/index.tsx b/packages/main/src/components/OverflowToolbar/index.tsx index e6e037d90a3..281a82364ec 100644 --- a/packages/main/src/components/OverflowToolbar/index.tsx +++ b/packages/main/src/components/OverflowToolbar/index.tsx @@ -7,7 +7,7 @@ import { CommonProps } from '../../interfaces/CommonProps'; import { ClassProps } from '../../interfaces/ClassProps'; import { Popover } from '../../lib/Popover'; import { Button } from '../../lib/Button'; -import { PlacementType } from '../..'; +import { PlacementType } from '../../lib/PlacementType'; import boot from '@ui5/webcomponents-base/src/boot'; export interface ToolbarPropTypes extends CommonProps { From 13d78bc66ad9de988fface0a591786043318de48 Mon Sep 17 00:00:00 2001 From: Lukas Date: Mon, 1 Jul 2019 15:27:01 +0200 Subject: [PATCH 6/8] Update packages/main/src/components/OverflowToolbar/index.tsx Co-Authored-By: Marcus Notheis --- packages/main/src/components/OverflowToolbar/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/components/OverflowToolbar/index.tsx b/packages/main/src/components/OverflowToolbar/index.tsx index 281a82364ec..fe3ee3bd962 100644 --- a/packages/main/src/components/OverflowToolbar/index.tsx +++ b/packages/main/src/components/OverflowToolbar/index.tsx @@ -74,7 +74,7 @@ export class OverflowToolbar extends Component { window.removeEventListener('resize', this.handleResize); } - private handleResize() { + private handleResize = () => { let newChildren = this.state.children; let { popoverElements, renderToggle, previousWidth } = this.state; if (this.state.toolbarWidth > this.toolbarRef.current.clientWidth) { From 1b8d6c69caf0dc981c46cc20c2eddf35e3ef20a8 Mon Sep 17 00:00:00 2001 From: Lukas Date: Mon, 1 Jul 2019 15:33:17 +0200 Subject: [PATCH 7/8] feat(OverflowToolbar): Removed overflow prop from demo --- packages/main/src/components/OverflowToolbar/demo.stories.tsx | 1 - packages/main/src/components/OverflowToolbar/index.tsx | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/main/src/components/OverflowToolbar/demo.stories.tsx b/packages/main/src/components/OverflowToolbar/demo.stories.tsx index 8b04c40b7ff..25fded2e39c 100644 --- a/packages/main/src/components/OverflowToolbar/demo.stories.tsx +++ b/packages/main/src/components/OverflowToolbar/demo.stories.tsx @@ -12,7 +12,6 @@ const renderOverflowToolbar = () => ( diff --git a/packages/main/src/components/OverflowToolbar/index.tsx b/packages/main/src/components/OverflowToolbar/index.tsx index e6e037d90a3..662f27826be 100644 --- a/packages/main/src/components/OverflowToolbar/index.tsx +++ b/packages/main/src/components/OverflowToolbar/index.tsx @@ -1,6 +1,6 @@ import React, { Children, Component, CSSProperties, ReactNode, ReactNodeArray, RefObject } from 'react'; import styles from './OverflowToolbar.jss'; -import { StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base'; +import { StyleClassHelper, withStyles } from '@ui5/webcomponents-react-base'; import { ToolbarAlignment } from '../../lib/ToolbarAlignment'; import { ToolbarDesign } from '../../lib/ToolbarDesign'; import { CommonProps } from '../../interfaces/CommonProps'; @@ -30,7 +30,7 @@ export class OverflowToolbar extends Component { width: 'auto', align: ToolbarAlignment.Start, toolbarDesign: ToolbarDesign.ContentBar, - overflow: false + overflow: true }; state = { children: this.props.children, From de050b315b6bda70d0a6451768b9a7bed31d31bb Mon Sep 17 00:00:00 2001 From: Lukas Date: Mon, 1 Jul 2019 16:00:07 +0200 Subject: [PATCH 8/8] feat(OverflowToolbar): Small enhancements - mainly in readability --- .../__karma_snapshots__/OverflowToolbar.md | 114 ++++++++---------- .../src/components/OverflowToolbar/index.tsx | 65 +++++----- 2 files changed, 76 insertions(+), 103 deletions(-) diff --git a/packages/main/__karma_snapshots__/OverflowToolbar.md b/packages/main/__karma_snapshots__/OverflowToolbar.md index 80db8f6db3e..549d557b5b8 100644 --- a/packages/main/__karma_snapshots__/OverflowToolbar.md +++ b/packages/main/__karma_snapshots__/OverflowToolbar.md @@ -5,12 +5,11 @@ ``` - - - + + +
Test -
@@ -24,12 +23,11 @@ ``` - - - + + +
Test -
@@ -43,12 +41,11 @@ ``` - - - + + +
Test -
@@ -62,12 +59,11 @@ ``` - - - + + +
Test -
@@ -81,12 +77,11 @@ ``` - - - + + +
Test -
@@ -100,12 +95,11 @@ ``` - - - + + +
Test -
@@ -119,12 +113,11 @@ ``` - - - + + +
Test -
@@ -138,12 +131,11 @@ ``` - - - + + +
Test -
@@ -157,12 +149,11 @@ ``` - - - + + +
Test -
@@ -176,12 +167,11 @@ ``` - - - + + +
Test -
@@ -195,12 +185,11 @@ ``` - - - + + +
Test -
@@ -214,12 +203,11 @@ ``` - - - + + +
Test -
@@ -233,12 +221,11 @@ ``` - - - + + +
Test -
@@ -252,12 +239,11 @@ ``` - - - + + +
Test -
@@ -271,12 +257,11 @@ ``` - - - + + +
Test -
@@ -290,12 +275,11 @@ ``` - - - + + +
Test -
@@ -320,7 +304,6 @@ Test 2 - @@ -385,7 +368,6 @@ - diff --git a/packages/main/src/components/OverflowToolbar/index.tsx b/packages/main/src/components/OverflowToolbar/index.tsx index c6a1e73bd59..06aa3c927fa 100644 --- a/packages/main/src/components/OverflowToolbar/index.tsx +++ b/packages/main/src/components/OverflowToolbar/index.tsx @@ -45,13 +45,13 @@ export class OverflowToolbar extends Component { componentDidMount(): void { boot().then(() => { if (this.props.overflow) { - if (this.state.toolbarWidth === 0) { + if (this.state.toolbarWidth === 0 && this.toolbarRef.current !== null) { this.setState({ toolbarWidth: this.toolbarRef.current.scrollWidth }); } window.addEventListener('resize', () => { - setTimeout(() => { + requestAnimationFrame(() => { this.handleResize(); - }, 50); + }); }); } }); @@ -59,7 +59,7 @@ export class OverflowToolbar extends Component { componentDidUpdate(prevProps: Readonly, prevState, snapshot?: any): void { boot().then(() => { - if (this.props.overflow) { + if (this.props.overflow && this.toolbarRef.current !== null) { if (this.toolbarRef.current.clientWidth < this.toolbarRef.current.scrollWidth) { this.handleResize(); } @@ -75,36 +75,36 @@ export class OverflowToolbar extends Component { } private handleResize = () => { + const toolbarRef = this.toolbarRef.current; let newChildren = this.state.children; - let { popoverElements, renderToggle, previousWidth } = this.state; - if (this.state.toolbarWidth > this.toolbarRef.current.clientWidth) { - if (this.toolbarRef.current.clientWidth < this.toolbarRef.current.scrollWidth) { - newChildren = Children.toArray(this.state.children).slice(0, -1); - popoverElements = [Children.toArray(this.state.children).slice(-1)[0]].concat(this.state.popoverElements); + let { popoverElements, renderToggle, previousWidth, toolbarWidth, children } = this.state; + if (toolbarWidth > toolbarRef.clientWidth) { + if (toolbarRef.clientWidth < toolbarRef.scrollWidth) { + newChildren = Children.toArray(children).slice(0, -1); + popoverElements = [Children.toArray(children).slice(-1)[0]].concat(popoverElements); renderToggle = true; - previousWidth = [this.toolbarRef.current.scrollWidth + 10].concat(this.state.previousWidth); + previousWidth = [toolbarRef.scrollWidth + 10].concat(previousWidth); } this.setState({ - toolbarWidth: this.toolbarRef.current.scrollWidth, + toolbarWidth: toolbarRef.scrollWidth, children: newChildren, renderToggle, popoverElements, previousWidth }); } - if (this.state.toolbarWidth < this.toolbarRef.current.clientWidth) { + if (toolbarWidth < toolbarRef.clientWidth) { this.addToolbarItem(newChildren, popoverElements, previousWidth, renderToggle); } - } + }; private addToolbarItem(newChildren, popoverElements, previousWidth, renderToggle) { - if (Children.count(this.props.children) !== Children.count(this.state.children)) { - if ( - this.toolbarRef.current.clientWidth === this.toolbarRef.current.scrollWidth && - this.toolbarRef.current.clientWidth >= this.state.previousWidth[0] - ) { - const currentChildrenLength = Children.count(this.state.children); - newChildren = Children.toArray(this.state.children).concat([ + const toolbarRef = this.toolbarRef.current; + let { children } = this.state; + if (Children.count(this.props.children) !== Children.count(children)) { + if (toolbarRef.clientWidth === toolbarRef.scrollWidth && toolbarRef.clientWidth >= previousWidth[0]) { + const currentChildrenLength = Children.count(children); + newChildren = Children.toArray(children).concat([ Children.only(Children.toArray(this.props.children)[currentChildrenLength]) ]); popoverElements.shift(); @@ -112,16 +112,13 @@ export class OverflowToolbar extends Component { } } this.setState({ - toolbarWidth: this.toolbarRef.current.clientWidth, + toolbarWidth: toolbarRef.clientWidth, children: newChildren, popoverElements, previousWidth }); - if (Children.count(this.props.children) !== Children.count(this.state.children)) { - if ( - this.toolbarRef.current.clientWidth === this.toolbarRef.current.scrollWidth && - this.toolbarRef.current.clientWidth >= this.state.previousWidth[0] - ) { + if (Children.count(this.props.children) !== Children.count(children)) { + if (toolbarRef.clientWidth === toolbarRef.scrollWidth && toolbarRef.clientWidth >= previousWidth[0]) { this.addToolbarItem(newChildren, popoverElements, previousWidth, renderToggle); } } else { @@ -181,9 +178,10 @@ export class OverflowToolbar extends Component { if (style) { Object.assign(inlineStyle, style); } - const PopoverWrapper = () => { - if (this.state.renderToggle) { - return ( + return ( +
+ {this.state.children} + {this.state.renderToggle && ( { >
{this.state.popoverElements}
 - ); - } - return null; - }; - return ( -
- {this.state.children} - + )}
); }