diff --git a/packages/main/__karma_snapshots__/FilterBar.md b/packages/main/__karma_snapshots__/FilterBar.md index fdc9d12f08f..760484e00b6 100644 --- a/packages/main/__karma_snapshots__/FilterBar.md +++ b/packages/main/__karma_snapshots__/FilterBar.md @@ -10,49 +10,45 @@
- - - -
-
- - - <ui5-title level="H4" class=""> - Variant 1 - </ui5-title> - - - -
+ + +
+
+ + <ui5-title level="H4" class="Variant-Management--VariantManagementText---"> + Variant 1 + </ui5-title> + +
- - - - - - - - Variant 1 - - - - - Variant 2 - - - - - - - - - +
+ + + + + + + + Variant 1 + + + + + Variant 2 + + + + + + + +
@@ -129,49 +125,45 @@
- - - -
-
- - - <ui5-title level="H4" class=""> - Variant 1 - </ui5-title> - - - -
+ + +
+
+ + <ui5-title level="H4" class="Variant-Management--VariantManagementText---"> + Variant 1 + </ui5-title> + +
- - - - - - - - Variant 1 - - - - - Variant 2 - - - - - - - - - +
+ + + + + + + + Variant 1 + + + + + Variant 2 + + + + + + + +
-
+ + +
+
+ + <ui5-title level="H4" class="Variant-Management--VariantManagementText---"> + Variant 1 + </ui5-title> + +
- - - - - - - - Variant 1 - - - - - Variant 2 - - - - - - - - - +
+ + + + + + + + Variant 1 + + + + + Variant 2 + + + + + + + +
-
+ + +
+
+ + <ui5-title level="H4" class="Variant-Management--VariantManagementText---"> + Variant 1 + </ui5-title> + +
- - - - - - - - Variant 1 - - - - - Variant 2 - - - - - - - - - +
+ + + + + + + + Variant 1 + + + + + Variant 2 + + + + + + + + diff --git a/packages/main/src/components/VariantManagement/VariantManagement.karma.tsx b/packages/main/src/components/VariantManagement/VariantManagement.karma.tsx index 8d5c6410be4..6fd1c3ec07a 100644 --- a/packages/main/src/components/VariantManagement/VariantManagement.karma.tsx +++ b/packages/main/src/components/VariantManagement/VariantManagement.karma.tsx @@ -9,17 +9,6 @@ const variantItems = [{ label: 'Variant 1', key: '1' }, { label: 'Variant 2', ke use(matchSnapshot); describe('VariantManagement', () => { - let appRoot: HTMLElement; - - before(() => { - appRoot = document.createElement('div'); - document.body.appendChild(appRoot); - }); - - after(() => { - document.body.removeChild(appRoot); - }); - it('Render without crashing', () => { const wrapper = mountThemedComponent(); expect(wrapper.debug()).to.matchSnapshot(); diff --git a/packages/main/src/components/VariantManagement/demo.stories.tsx b/packages/main/src/components/VariantManagement/demo.stories.tsx index 4b9d9bccd17..a01a2c49952 100644 --- a/packages/main/src/components/VariantManagement/demo.stories.tsx +++ b/packages/main/src/components/VariantManagement/demo.stories.tsx @@ -1,5 +1,5 @@ import { action } from '@storybook/addon-actions'; -import { boolean, select } from '@storybook/addon-knobs'; +import { boolean, text, select } from '@storybook/addon-knobs'; import { storiesOf } from '@storybook/react'; import React from 'react'; import { PlacementType } from '../../lib/PlacementType'; @@ -13,11 +13,12 @@ function renderStory() { ); } diff --git a/packages/main/src/components/VariantManagement/index.tsx b/packages/main/src/components/VariantManagement/index.tsx index 13093fc5282..673042ac217 100644 --- a/packages/main/src/components/VariantManagement/index.tsx +++ b/packages/main/src/components/VariantManagement/index.tsx @@ -1,6 +1,6 @@ -import { Event, withStyles } from '@ui5/webcomponents-react-base'; -import React, { Component, ReactElement } from 'react'; -import { ClassProps } from '../../interfaces/ClassProps'; +import { Event } from '@ui5/webcomponents-react-base'; +import React, { FC, forwardRef, Ref, useCallback, useMemo, useState, useEffect } from 'react'; +import { createUseStyles } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; import { JSSTheme } from '../../interfaces/JSSTheme'; import { Button } from '../../lib/Button'; @@ -13,7 +13,6 @@ import { Popover } from '../../lib/Popover'; import { StandardListItem } from '../../lib/StandardListItem'; import { Title } from '../../lib/Title'; import { TitleLevel } from '../../lib/TitleLevel'; -import { ButtonPropTypes } from '../../webComponents/Button'; export interface VariantItem { key: string; @@ -29,15 +28,7 @@ export interface VariantManagementPropTypes extends CommonProps { variantItems: VariantItem[]; onSelect?: (event: Event) => void; level?: TitleLevel; -} - -interface VariantManagementInternalProps extends VariantManagementPropTypes, ClassProps { - theme: JSSTheme; -} - -interface VariantManagementState { - selectedKey: string; - open: boolean; + disabled?: boolean; } const styles = ({ parameters }: JSSTheme) => ({ @@ -48,9 +39,23 @@ const styles = ({ parameters }: JSSTheme) => ({ cursor: 'pointer' }, VariantManagementText: { - '& > *': { - cursor: 'pointer', - textShadow: parameters.sapUiContentShadowColor + cursor: 'pointer', + color: parameters.sapUiButtonTextColor, + '&:hover': { + color: parameters.sapUiHighlight + }, + '&:active': { + color: parameters.sapUiHighlight + } + }, + disabled: { + color: parameters.sapUiGroupTitleTextColor, + cursor: 'default', + '&:hover': { + color: parameters.sapUiGroupTitleTextColor + }, + '&:active': { + color: parameters.sapUiGroupTitleTextColor } }, footer: { @@ -59,101 +64,109 @@ const styles = ({ parameters }: JSSTheme) => ({ } }); -@withStyles(styles) -export class VariantManagement extends Component { - static defaultProps = { - enabled: true, - popupTitle: 'Variants', - initialSelectedKey: null, - onSelect: () => {}, - closeOnItemSelect: true, - placement: PlacementType.Bottom, - level: TitleLevel.H4 - }; - - private initialSelectedKey = this.props.variantItems && this.props.variantItems[0] && this.props.variantItems[0].key; - - state = { - selectedKey: this.initialSelectedKey, - open: false - }; - - _getItemByKey(key, items) { - return items.filter((item) => item.key === key)[0]; - } - - private handleCancelButtonClick = () => { - this.setState({ open: false }); - }; - - private handleAfterOpen = () => { - this.setState({ open: true }); - }; - - private handleVariantItemSelect = (event) => { - const selectedKey = event.getParameter('item').getAttribute('data-key'); - const { variantItems } = this.props as VariantManagementInternalProps; - const selectedItem = this._getItemByKey(selectedKey, variantItems) || variantItems[0]; - this.setState({ selectedKey }); - this.props.onSelect(Event.of(this, event.getOriginalEvent(), { selectedItem })); - if (this.props.closeOnItemSelect) { - const openPopover = !this.state.open; - this.setState({ open: openPopover }); - } - }; - - private get variantManagementButton() { - const { classes, variantItems, level } = this.props as VariantManagementInternalProps; - const { selectedKey } = this.state; - const selectedItem = this._getItemByKey(selectedKey, variantItems) || variantItems[0]; - - return ( -
- - {selectedItem.label} - -
+const useStyles = createUseStyles>(styles, { name: 'Variant Management' }); + +const VariantManagement: FC = forwardRef( + (props: VariantManagementPropTypes, ref: Ref) => { + const { + variantItems, + popupTitle, + className, + style, + tooltip, + placement, + level, + initialSelectedKey, + onSelect, + closeOnItemSelect, + disabled + } = props; + const classes = useStyles(); + const [open, setOpen] = useState(false); + const [selectedKey, setSelectedKey] = useState( + initialSelectedKey ? initialSelectedKey : variantItems.length ? variantItems[0].key : null ); - } - - private getVariantManagementFooterButtons = () => { - const { classes } = this.props as VariantManagementInternalProps; - return [ - - ] as Array>; - }; - - render() { - const { variantItems, popupTitle, className, style, tooltip, innerRef } = this - .props as VariantManagementInternalProps; - const { selectedKey } = this.state; if (!variantItems || variantItems.length < 1) { return null; } + useEffect(() => { + if (initialSelectedKey) { + setSelectedKey(initialSelectedKey); + } + }, [initialSelectedKey, setSelectedKey]); + + const handleCancelButtonClick = useCallback(() => { + setOpen(false); + }, [setOpen]); + + const handleAfterOpen = useCallback(() => { + setOpen(true); + }, [setOpen]); + + const footerButtons = useMemo(() => { + return [ + + ]; + }, [classes.footer]); + + const getItemByKey = (key) => { + return variantItems.find((item) => item.key === key); + }; + + const variantManagementButton = useMemo(() => { + const selectedItem = getItemByKey(selectedKey) || variantItems[0]; + + let textClasses = classes.VariantManagementText; + if (disabled) { + textClasses += ` ${classes.disabled}`; + } + + return ( +
+ + {selectedItem.label} + +
+ ); + }, [classes, variantItems, level, selectedKey, disabled]); + + const handleVariantItemSelect = useCallback( + (event) => { + const newSelectedKey = event.getParameter('item').dataset.key; + const selectedItem = getItemByKey(newSelectedKey) || variantItems[0]; + setSelectedKey(newSelectedKey); + onSelect(Event.of(null, event.getOriginalEvent(), { selectedItem })); + if (closeOnItemSelect) { + handleCancelButtonClick(); + } + }, + [handleCancelButtonClick, closeOnItemSelect, selectedKey, variantItems, setSelectedKey] + ); + return ( >} + placementType={placement} + openBy={variantManagementButton} + footer={footerButtons} className={className} innerStyles={style} tooltip={tooltip} > - + {variantItems.map((item) => ( ); } -} +); + +VariantManagement.defaultProps = { + enabled: true, + popupTitle: 'Variants', + initialSelectedKey: null, + onSelect: () => {}, + closeOnItemSelect: true, + placement: PlacementType.Bottom, + level: TitleLevel.H4, + disabled: false +}; +VariantManagement.displayName = 'Variant Management'; + +export { VariantManagement };