@@ -5940,7 +5940,7 @@ exports[`AnalyticalTable without selection Column 1`] = `
@@ -6003,7 +6003,7 @@ exports[`AnalyticalTable without selection Column 1`] = `
@@ -6038,7 +6038,7 @@ exports[`AnalyticalTable without selection Column 1`] = `
@@ -6073,7 +6073,7 @@ exports[`AnalyticalTable without selection Column 1`] = `
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts
index ca3b771aea6..9c4b1cbc3cb 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts
@@ -61,27 +61,30 @@ const getRowProps = (rowProps, { instance, row }) => {
const { classes, selectionBehavior, selectionMode, alternateRowColor } = webComponentsReactProperties;
const isEmptyRow = row.original?.emptyRow;
let className = classes.tr;
- const rowCanBeSelected =
- [TableSelectionMode.SINGLE_SELECT, TableSelectionMode.MULTI_SELECT].includes(selectionMode) && !isEmptyRow;
if (row.isGrouped) {
className += ` ${classes.tableGroupHeader}`;
}
+ if (isEmptyRow) {
+ className += ` ${classes.emptyRow}`;
+ }
+
if (alternateRowColor && row.index % 2 !== 0) {
className += ` ${classes.alternateRowColor}`;
}
+ if (TableSelectionBehavior.ROW_SELECTOR === selectionBehavior) {
+ className += ` ${classes.selectionModeRowSelector}`;
+ }
+
const newRowProps = {
className,
role: 'row',
'aria-rowindex': row.index
};
- if (rowCanBeSelected) {
- if (TableSelectionBehavior.ROW_SELECTOR !== selectionBehavior) {
- newRowProps.className += ` ${classes.trActive}`;
- }
+ if ([TableSelectionMode.SINGLE_SELECT, TableSelectionMode.MULTI_SELECT].includes(selectionMode) && !isEmptyRow) {
if (row.isSelected) {
newRowProps[ROW_SELECTION_ATTRIBUTE] = '';
}
diff --git a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx
index ed04e476b52..80a2bdb5d9e 100644
--- a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx
+++ b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx
@@ -64,6 +64,9 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
};
const classNames = StyleClassHelper.of(classes.tbody, GlobalStyleClasses.sapScrollBar);
+ if (selectionMode === TableSelectionMode.SINGLE_SELECT || selectionMode === TableSelectionMode.MULTI_SELECT) {
+ classNames.put(classes.selectable);
+ }
const lastScrollTop = useRef(0);
diff --git a/packages/main/src/components/FilterBar/FilterBar.jss.ts b/packages/main/src/components/FilterBar/FilterBar.jss.ts
index 9606b8a4c19..c696b1c210f 100644
--- a/packages/main/src/components/FilterBar/FilterBar.jss.ts
+++ b/packages/main/src/components/FilterBar/FilterBar.jss.ts
@@ -44,18 +44,29 @@ const styles = {
headerRowRight: {
display: 'flex',
justifyContent: 'flex-end',
- flexGrow: 1,
- '& ui5-button': {
- marginLeft: '0.5rem'
- }
- },
- showFiltersBtn: { minWidth: '108px' },
- loadingContainer: {
- marginBottom: '0.5rem',
- display: 'flex',
- width: '100%',
- justifyContent: 'center'
- }
+ flexGrow: 1
+ },
+ // is being applied to the span which represents the InfoLabel Text
+ label: {
+ fontSize: ThemingParameters.sapFontSmallSize,
+ fontFamily: ThemingParameters.sapFontFamily,
+ lineHeight: '1.125rem',
+ fontWeight: 600,
+ letterSpacing: '0.0125rem',
+ textTransform: 'uppercase',
+ textAlign: 'center',
+ verticalAlign: 'top',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
+ display: 'inline-block',
+ color: ThemingParameters.sapTextColor
+ },
+ // specific padding needed for purely numeric input
+ numeric: {},
+ // specific padding needed for text input
+ text: {},
+ // displayOnly mode
+ displayOnly: {}
};
export default styles;
diff --git a/packages/main/src/components/FilterBar/FilterBar.test.tsx b/packages/main/src/components/FilterBar/FilterBar.test.tsx
index 0258f8c08b2..a139d33cbff 100644
--- a/packages/main/src/components/FilterBar/FilterBar.test.tsx
+++ b/packages/main/src/components/FilterBar/FilterBar.test.tsx
@@ -1,287 +1,124 @@
import { createPassThroughPropsTest } from '@shared/tests/utils';
-import { Bar } from '@ui5/webcomponents-react/lib/Bar';
-import { Button } from '@ui5/webcomponents-react/lib/Button';
-import { CheckBox } from '@ui5/webcomponents-react/lib/CheckBox';
-import { DatePicker } from '@ui5/webcomponents-react/lib/DatePicker';
+import { mount } from 'enzyme';
import { FilterBar } from '@ui5/webcomponents-react/lib/FilterBar';
-import { FilterGroupItem } from '@ui5/webcomponents-react/lib/FilterGroupItem';
+import { FilterItem } from '@ui5/webcomponents-react/lib/FilterItem';
+import { FilterType } from '@ui5/webcomponents-react/lib/FilterType';
import { Input } from '@ui5/webcomponents-react/lib/Input';
-import { MultiComboBox } from '@ui5/webcomponents-react/lib/MultiComboBox';
-import { Option } from '@ui5/webcomponents-react/lib/Option';
-import { Select } from '@ui5/webcomponents-react/lib/Select';
import { Switch } from '@ui5/webcomponents-react/lib/Switch';
import { VariantManagement } from '@ui5/webcomponents-react/lib/VariantManagement';
-import { MultiComboBoxItem } from '@ui5/webcomponents-react/lib/MultiComboBoxItem';
-import { mount } from 'enzyme';
import React from 'react';
-import { act } from 'react-dom/test-utils';
const variantItems = [
{ label: 'Variant 1', key: '1' },
{ label: 'Variant 2', key: '2' }
];
+const filterItems = [
+ { text: 'Text 1', key: '1' },
+ { text: 'Text 2', key: '2' }
+];
const variants =
;
const search =
;
describe('FilterBar', () => {
- it('Render without crashing - default props', () => {
- const wrapper = mount(
-
-
-
-
-
- );
- expect(wrapper.render()).toMatchSnapshot();
- });
-
- it('Render without crashing - w/ filter dialog', () => {
+ it('Render without crashing', () => {
const wrapper = mount(
-
-
-
-
-
+
+ alert(e.getParameter('selectedItem').key)}
+ filterItems={filterItems}
+ label="Classification"
+ key="classification"
+ type={FilterType.Select}
+ />
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
);
expect(wrapper.render()).toMatchSnapshot();
});
- it('Hide FilterBar', () => {
+ it('Hide Filter Bar', () => {
const wrapper = mount(
-
-
-
-
-
- );
- const toggleBtn = wrapper.find('Button');
- const toggleBtnBefore = toggleBtn.render();
- act(() => {
- toggleBtn.getElement().props.onClick();
- });
- expect(toggleBtn.render()).not.toBe(toggleBtnBefore);
- expect(wrapper.render()).toMatchSnapshot();
- });
-
- it('Toggle Filters Dialog', () => {
- const wrapper = mount(
-
-
-
-
-
+
+ alert(e.getParameter('selectedItem').key)}
+ filterItems={filterItems}
+ label="Classification"
+ key="classification"
+ type={FilterType.Select}
+ />
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
);
- const openFiltersDialogBtn = wrapper.find('.FilterBar-headerRowRight-0-2-7').childAt(3);
- act(() => {
- openFiltersDialogBtn.prop('onClick')();
- });
- wrapper.update();
- expect(wrapper.find('ui5-dialog').exists()).toBeTruthy();
- expect(wrapper.render()).toMatchSnapshot();
- const filtersDialogBtns = (index) => wrapper.find(Bar).find(Button).at(index);
- act(() => {
- //@ts-ignore
- filtersDialogBtns(0).prop('onClick')();
- });
- wrapper.update();
- expect(wrapper.find('ui5-dialog').exists()).toBeFalsy();
+ const component = wrapper.find('ui5-button').last().instance() as any;
+ component.fireEvent('click');
expect(wrapper.render()).toMatchSnapshot();
- act(() => {
- openFiltersDialogBtn.prop('onClick')();
- });
- wrapper.update();
- expect(wrapper.find('ui5-dialog').exists()).toBeTruthy();
- act(() => {
- //@ts-ignore
- filtersDialogBtns(3).prop('onClick')();
- });
- wrapper.update();
- expect(wrapper.find('ui5-dialog').exists()).toBeFalsy();
- act(() => {
- openFiltersDialogBtn.prop('onClick')();
- });
- wrapper.update();
- expect(wrapper.find('ui5-dialog').exists()).toBeTruthy();
- act(() => {
- //@ts-ignore
- filtersDialogBtns(4).prop('onClick')();
- });
- wrapper.update();
- expect(wrapper.find('ui5-dialog').exists()).toBeFalsy();
});
- it('Group Filter Items mounted in Dialog', () => {
+ it('Select Filter Item', () => {
const wrapper = mount(
-
-
-
-
-
-
-
-
-
-
+
+ alert(e.getParameter('selectedItem').key)}
+ filterItems={filterItems}
+ label="Classification"
+ key="classification"
+ type={FilterType.Select}
+ />
+ alert(e.getParameter('selectedItem').key)}
+ loading
+ filterItems={filterItems}
+ label="Classification"
+ key="classification2"
+ type={FilterType.Select}
+ />
+ alert(e.getParameter('selectedItem').key)}
+ // filterItems={filterItems}
+ label="Classification"
+ key="classification3"
+ type={FilterType.Default}
+ />
+ alert(e.getParameter('selectedItem').key)}
+ filterItems={filterItems}
+ label="Classification"
+ key="classification3"
+ type={FilterType.MultiSelect}
+ />
);
- const filterItemsFB = wrapper.find(FilterGroupItem);
- const openFiltersDialogBtn = wrapper.find('.FilterBar-headerRowRight-0-2-7').childAt(3);
- act(() => {
- openFiltersDialogBtn.prop('onClick')();
- });
- wrapper.update();
+ wrapper.find('ui5-option').at(1).simulate('change');
- const filterItemsDialog = wrapper.find('ui5-dialog').find(FilterGroupItem);
-
- const filterItemsDialogString = filterItemsDialog.debug({ ignoreProps: true });
- const filterItemsFBString = filterItemsFB.debug({ ignoreProps: true });
- // @ts-ignore
- expect(filterItemsDialogString).toEqual(filterItemsFBString);
- const filterItemMandatory = filterItemsDialog.at(2);
- expect(filterItemMandatory.prop('required')).toBeTruthy();
- const checkbox = filterItemMandatory.parents().find(CheckBox).at(0);
- expect(checkbox.prop('disabled')).toBeTruthy();
+ expect(wrapper.render()).toMatchSnapshot();
});
createPassThroughPropsTest(FilterBar);
diff --git a/packages/main/src/components/FilterBar/FilterBarDialog.jss.ts b/packages/main/src/components/FilterBar/FilterBarDialog.jss.ts
deleted file mode 100644
index 74093d4deab..00000000000
--- a/packages/main/src/components/FilterBar/FilterBarDialog.jss.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { CssSizeVariables } from '@ui5/webcomponents-react-base/lib/CssSizeVariables';
-import { sapUiContentPadding } from '@ui5/webcomponents-react-base/lib/spacing';
-
-const styles = {
- dialog: {
- ...sapUiContentPadding,
- display: 'flex',
- flexDirection: 'column',
- maxWidth: '960px',
- width: '80vw',
- maxHeight: '70vh'
- },
- header: {
- padding: '0.25rem 1rem 0 1rem',
- '& *': {
- margin: '0.25rem 0 0.25rem 0'
- },
- '& ui5-input': {
- width: '100%'
- }
- },
- footer: {
- '& :not(:last-child)': {
- marginRight: '0.25rem'
- }
- },
- groupContainer: {
- display: 'flex',
- flexDirection: 'column'
- },
- groupTitle: {
- maxWidth: '85%',
- marginRight: '0.5rem'
- },
- filters: {
- padding: '1rem 0 2rem 0'
- },
- singleFilter: {
- display: 'grid',
- gridTemplateColumns: `auto minmax(${CssSizeVariables.sapWcrCheckBoxWidthHeight},7%)`,
- gridTemplateRows: 'auto',
- gridColumnGap: '0.5rem',
- '@media(max-width:700px)': {
- marginTop: '0.5rem'
- },
- '& ui5-checkbox': {
- placeSelf: 'center start',
- '@media(max-width:700px)': {
- marginTop: '0.8rem',
- paddingLeft: 0,
- placeSelf: 'end start'
- }
- }
- },
-
- fbSearch: {
- '@media(min-width:700px)': {
- display: 'grid',
- gridTemplateColumns: '20% auto 7%',
- gridTemplateRows: 'auto',
- gridRowGap: '0.5rem',
- gridColumnGap: '0.5rem'
- },
- paddingBottom: '2rem',
- width: '100%',
- '& ui5-input': {
- width: '100%'
- }
- }
-};
-
-export default styles;
diff --git a/packages/main/src/components/FilterBar/FilterDialog.tsx b/packages/main/src/components/FilterBar/FilterDialog.tsx
deleted file mode 100644
index 491b999ef45..00000000000
--- a/packages/main/src/components/FilterBar/FilterDialog.tsx
+++ /dev/null
@@ -1,283 +0,0 @@
-import '@ui5/webcomponents-icons/dist/icons/search';
-import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
-import { useI18nText } from '@ui5/webcomponents-react-base/lib/hooks';
-import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
-import {
- BASIC,
- CANCEL,
- CLEAR,
- RESTORE,
- SAVE,
- SEARCH_FOR_FILTERS,
- SHOW_ON_FILTER_BAR
-} from '@ui5/webcomponents-react/dist/assets/i18n/i18n-defaults';
-import { Bar } from '@ui5/webcomponents-react/lib/Bar';
-import { BarDesign } from '@ui5/webcomponents-react/lib/BarDesign';
-import { Button } from '@ui5/webcomponents-react/lib/Button';
-import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign';
-import { CheckBox } from '@ui5/webcomponents-react/lib/CheckBox';
-import { Dialog } from '@ui5/webcomponents-react/lib/Dialog';
-import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
-import { FlexBoxAlignItems } from '@ui5/webcomponents-react/lib/FlexBoxAlignItems';
-import { FlexBoxDirection } from '@ui5/webcomponents-react/lib/FlexBoxDirection';
-import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJustifyContent';
-import { Icon } from '@ui5/webcomponents-react/lib/Icon';
-import { Input } from '@ui5/webcomponents-react/lib/Input';
-import { Text } from '@ui5/webcomponents-react/lib/Text';
-import { Title } from '@ui5/webcomponents-react/lib/Title';
-import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
-import React, { Children, cloneElement, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import styles from './FilterBarDialog.jss';
-import { filterValue, renderSearchWithValue } from './utils';
-
-const useStyles = createComponentStyles(styles, { name: 'FilterBarDialog' });
-export const FilterDialog = (props) => {
- const {
- filterBarRefs,
- open,
- handleDialogClose,
- children,
- showClearButton,
- showRestoreButton,
- showGoButton,
- showSearch,
- renderFBSearch,
- handleClearFilters,
- handleRestoreFilters,
- handleDialogSave,
- searchValue,
- handleSearchValueChange,
- onGo,
- handleSelectionChange,
- handleDialogSearch,
- handleDialogCancel
- } = props;
- const classes = useStyles();
- const [searchString, setSearchString] = useState('');
- const searchRef = useRef(null);
- const [toggledFilters, setToggledFilters] = useState({});
- const dialogRefs = useRef({});
- const dialogRef = useRef();
-
- const [
- basicText,
- cancelText,
- clearText,
- restoreText,
- saveText,
- searchForFiltersText,
- showOnFilterBarText
- ] = useI18nText(
- '@ui5/webcomponents-react',
- BASIC,
- CANCEL,
- CLEAR,
- RESTORE,
- SAVE,
- SEARCH_FOR_FILTERS,
- SHOW_ON_FILTER_BAR
- );
-
- useEffect(() => {
- if (open) {
- dialogRef.current.open();
- }
- }, [open]);
-
- const handleSearch = useCallback(
- (e) => {
- if (handleDialogSearch) {
- handleDialogSearch(enrichEventWithDetails(e, { value: e.target.value }));
- }
- setSearchString(e.target.value);
- },
- [setSearchString, handleDialogSearch]
- );
- const handleSave = useCallback(
- (e) => {
- if (renderFBSearch) {
- handleSearchValueChange(searchRef.current?.children[1].value);
- }
- handleDialogSave(e, dialogRefs.current, toggledFilters);
- },
- [renderFBSearch, handleSearchValueChange, searchRef, handleDialogSave, toggledFilters, dialogRefs]
- );
-
- const handleClose = useCallback(
- (e) => {
- if (!showGoButton) {
- handleSave(e);
- return;
- }
- handleDialogClose(e);
- },
- [showGoButton, handleSave, handleDialogClose]
- );
-
- const handleDialogGo = useCallback(
- (e) => {
- if (onGo) {
- onGo(enrichEventWithDetails(e));
- }
- handleDialogClose(e);
- },
- [onGo, handleDialogClose]
- );
-
- const handleRestore = useCallback(
- (e) => {
- handleRestoreFilters(e, 'dialog');
- },
- [handleRestoreFilters]
- );
-
- const handleCancel = useCallback(
- (e) => {
- if (handleDialogCancel) {
- handleDialogCancel(enrichEventWithDetails(e));
- }
- handleDialogClose(e);
- },
- [handleDialogCancel]
- );
-
- const footerContentRight = useMemo(
- () => (
-
- {showGoButton && (
-
- )}
- {showClearButton && }
- {showRestoreButton && }
-
-
-
- ),
- [
- showGoButton,
- classes.footer,
- handleDialogGo,
- showClearButton,
- handleClearFilters,
- showRestoreButton,
- handleRestore,
- handleSave,
- handleCancel
- ]
- );
-
- const renderFooter = useCallback(() => {
- return ;
- }, [footerContentRight]);
-
- const renderHeader = useCallback(
- () => (
-
- Filters
- {showSearch && (
- } />
- )}
-
- ),
- [classes.header, showSearch, handleSearch]
- );
-
- const renderChildren = useCallback(() => {
- return children
- .filter((item) => {
- if (item.type.displayName !== 'FilterGroupItem') return true; //needed for deprecated FilterItem or custom elements
- return (
- !!item?.props &&
- item.props?.visible &&
- (item.props?.label?.toLowerCase().includes(searchString.toLowerCase()) || searchString.length === 0)
- );
- })
- .map((child) => {
- if (child.type.displayName !== 'FilterGroupItem') return child; //needed for deprecated FilterItem or custom elements
- const filterBarItemRef = filterBarRefs.current[child.key];
- let filterItemProps = {};
- if (filterBarItemRef) {
- filterItemProps = filterValue(filterBarItemRef, child);
- }
- if (!child.props.children) return child;
- return cloneElement(child as ReactElement, {
- children: {
- ...child.props.children,
- props: {
- ...child.props.children.props,
- ...filterItemProps
- },
- ref: (node) => {
- dialogRefs.current[child.key] = node;
- }
- }
- });
- });
- }, [children, searchString, filterBarRefs]);
-
- const handleCheckBoxChange = useCallback(
- (element, toggledFilters) => (e) => {
- if (handleSelectionChange) {
- handleSelectionChange(enrichEventWithDetails(e, { element, checked: e.target.checked }));
- }
- setToggledFilters({ ...toggledFilters, [element.key]: e.target.checked });
- },
- [setToggledFilters, handleSelectionChange]
- );
- const renderGroups = useCallback(() => {
- let groups = {};
- Children.forEach(renderChildren(), (child) => {
- const childGroups = child.props.groupName ?? 'default';
- if (groups[childGroups]) {
- groups[childGroups].push(child);
- } else {
- groups[childGroups] = [child];
- }
- });
- return Object.keys(groups)
- .sort((x, y) => (x === 'default' ? -1 : y === 'role' ? 1 : 0))
- .map((item, index) => {
- const filters = groups[item].map((el) => {
- return (
-
- {el}
-
-
- );
- });
- return (
-
-
-
- {item === 'default' ? basicText : item}
-
- {index === 0 && {showOnFilterBarText}}
-
-
{filters}
-
-`;
-
-exports[`FilterBar Render without crashing - default props 1`] = `
-
-
-
+
+ Custom Filter 1
+
-
-
- Classification
-
+
-
-
- Option 1
-
-
- Option 2
-
-
- Option 3
-
-
- Option 4
-
-
`;
-exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
+exports[`FilterBar Render without crashing 1`] = `
@@ -182,921 +196,74 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
+
+
-
-
-
-
-
-
- SELECT w/ initial selected
-
-
-
-
- Option 1
-
-
- Option 2
-
-
- Option 3
-
-
- Option 4
-
-
-
-
-
-
-
-
-
- SELECT w/o initial selected
-
-
+
+ Classification
+
- Test 1
-
-
- Test 2
-
-
- Test 3
-
-
- Test 4
+ Text 1
- Test 5
+ Text 2
-
-
- Group 2:
- MultBox
-
-
-
-
-
+
+ Custom Filter 1
+
+
+
-
-
-
-
-
-
-
-
-
- Group 2:
- Date Picker
-
-
`;
-exports[`FilterBar Toggle Filters Dialog 1`] = `
-Array [
-
-
-
- Filters
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Basic
-
-
- Show on Filter Bar
-
-
-
-
-
-
-
-
-
-
-
- SELECT w/ initial selected
-
-
-
-
- Option 1
-
-
- Option 2
-
-
- Option 3
-
-
- Option 4
-
-
-
-
-
-
-
-
-
-
-
-
- SELECT w/o initial selected
-
-
-
-
- Test 1
-
-
- Test 2
-
-
- Test 3
-
-
- Test 4
-
-
- Test 5
-
-
-
-
-
-
-
-
-
-
-
- Group 2
-
-
-
-
-
-
-
-
-
- MultBox
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Date Picker
-
-
-
-
-
-
-
-
-
-
,
-
-
-
-
-
-
-
-
-
-
- SELECT w/ initial selected
-
-
-
-
- Option 1
-
-
- Option 2
-
-
- Option 3
-
-
- Option 4
-
-
-
-
-
-
-
-
-
- SELECT w/o initial selected
-
-
-
-
- Test 1
-
-
- Test 2
-
-
- Test 3
-
-
- Test 4
-
-
- Test 5
-
-
-
-
-
-
-
-
- Group 2:
- MultBox
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Group 2:
- Date Picker
-
-
-
-
-
-
-
,
-]
-`;
-
-exports[`FilterBar Toggle Filters Dialog 2`] = `
+exports[`FilterBar Select Filter Item 1`] = `
@@ -1153,243 +320,109 @@ exports[`FilterBar Toggle Filters Dialog 2`] = `
-
-
-
-
-
-
-
-
- SELECT w/ initial selected
-
-
+
+ Classification
+
-
- Option 1
-
- Option 2
-
-
- Option 3
+ Text 1
-
- Option 4
+
+ Text 2
+
+ Classification
+
-
-
- SELECT w/o initial selected
-
+
-
-
- Test 1
-
-
- Test 2
-
-
- Test 3
-
-
- Test 4
-
-
- Test 5
-
-
-
-
- Group 2:
- MultBox
-
-
-
+ Classification
+
+
-
-
-
-
-
+ />
-
+ Classification
+
+
-
- Group 2:
- Date Picker
-
-
-
+ Text 1
+
+
+ Text 2
+
+
diff --git a/packages/main/src/components/FilterBar/demo.stories.tsx b/packages/main/src/components/FilterBar/demo.stories.tsx
index cb348e05d44..304767b878d 100644
--- a/packages/main/src/components/FilterBar/demo.stories.tsx
+++ b/packages/main/src/components/FilterBar/demo.stories.tsx
@@ -1,14 +1,12 @@
import { action } from '@storybook/addon-actions';
-import { boolean, number, text } from '@storybook/addon-knobs';
-import { DatePicker } from '@ui5/webcomponents-react/lib/DatePicker';
+import { boolean, select } from '@storybook/addon-knobs';
import { FilterBar } from '@ui5/webcomponents-react/lib/FilterBar';
-import { FilterGroupItem } from '@ui5/webcomponents-react/lib/FilterGroupItem';
+import { FilterItem } from '@ui5/webcomponents-react/lib/FilterItem';
+import { FilterType } from '@ui5/webcomponents-react/lib/FilterType';
import { Input } from '@ui5/webcomponents-react/lib/Input';
-import { MultiComboBox } from '@ui5/webcomponents-react/lib/MultiComboBox';
-import { MultiComboBoxItem } from '@ui5/webcomponents-react/lib/MultiComboBoxItem';
-import { Option } from '@ui5/webcomponents-react/lib/Option';
-import { Select } from '@ui5/webcomponents-react/lib/Select';
+import { PlacementType } from '@ui5/webcomponents-react/lib/PlacementType';
import { Switch } from '@ui5/webcomponents-react/lib/Switch';
+import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
import { VariantManagement } from '@ui5/webcomponents-react/lib/VariantManagement';
import React from 'react';
@@ -16,176 +14,61 @@ const variantItems = [
{ label: 'Variant 1', key: '1' },
{ label: 'Variant 2', key: '2' }
];
+const filterItems = [
+ { text: 'Text 1', key: '1' },
+ { text: 'Text 2', key: '2' }
+];
-export const renderDefaultStory = () => {
- return (
- }
- variants={}
- useToolbar={boolean('useToolbar', true)}
- filterBarExpanded={boolean('filterBarExpanded', true)}
- loading={boolean('loading', false)}
- considerGroupName={boolean('considerGroupName', false)}
- filterContainerWidth={text('auto', undefined)}
- activeFiltersCount={number('activeFiltersCount', undefined)}
- showClearOnFB={boolean('showClearOnFB', false)}
- showRestoreOnFB={boolean('showRestoreOnFB', false)}
- showGo={boolean('showGo', false)}
- showGoOnFB={boolean('showGoOnFB', false)}
- showFilterConfiguration={boolean('showFilterConfiguration', false)}
- showSearchOnFiltersDialog={boolean('showSearchOnFiltersDialog', false)}
- showClearButton={boolean('showClearButton', false)}
- showRestoreButton={boolean('showRestoreButton', false)}
- onToggleFilters={action('onToggleFilters')}
- onFiltersDialogOpen={action('onFiltersDialogOpen')}
- onFiltersDialogClose={action('onFiltersDialogClose')}
- onFiltersDialogSave={action('onFiltersDialogSave')}
- onFiltersDialogClear={action('onFiltersDialogClear')}
- onClear={action('onClear')}
- onFiltersDialogSelectionChange={action('onFiltersDialogSelectionChange')}
- onFiltersDialogSearch={action('onFiltersDialogSearch')}
- onGo={action('onGo')}
- onRestore={action('onRestore')}
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-renderDefaultStory.story = {
- name: 'Default'
-};
-
-export const renderStoryWithFiltersDialog = () => {
+export const renderStory = () => {
return (
}
- variants={
}
- useToolbar={boolean('useToolbar', true)}
- filterBarExpanded={boolean('filterBarExpanded', true)}
- loading={boolean('loading', false)}
- considerGroupName={boolean('considerGroupName', true)}
- filterContainerWidth={text('filterContainerWidth', '13rem')}
- activeFiltersCount={number('activeFiltersCount', 0)}
- showClearOnFB={boolean('showClearOnFB', true)}
- showRestoreOnFB={boolean('showRestoreOnFB', true)}
- showGo={boolean('showGo', true)}
- showGoOnFB={boolean('showGoOnFB', true)}
- showFilterConfiguration={boolean('showFilterConfiguration', true)}
- showSearchOnFiltersDialog={boolean('showSearchOnFiltersDialog', true)}
- showClearButton={boolean('showClearButton', true)}
- showRestoreButton={boolean('showRestoreButton', true)}
- onToggleFilters={action('onToggleFilters')}
- onFiltersDialogOpen={action('onFiltersDialogOpen')}
- onFiltersDialogClose={action('onFiltersDialogClose')}
- onFiltersDialogSave={action('onFiltersDialogSave')}
- onFiltersDialogClear={action('onFiltersDialogClear')}
- onClear={action('onClear')}
- onFiltersDialogSelectionChange={action('onFiltersDialogSelectionChange')}
- onFiltersDialogSearch={action('onFiltersDialogSearch')}
- onGo={action('onGo')}
- onRestore={action('onRestore')}
+ variants={
+
+ }
>
-
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
);
};
-renderStoryWithFiltersDialog.story = {
- name: 'With Filters Dialog'
-};
+renderStory.storyName = 'Default';
export default {
title: 'Components / FilterBar',
component: FilterBar,
parameters: {
- subcomponents: { FilterGroupItem }
+ subcomponents: { FilterItem }
}
};
diff --git a/packages/main/src/components/FilterBar/index.tsx b/packages/main/src/components/FilterBar/index.tsx
index ca9232dec49..4e560de74c9 100644
--- a/packages/main/src/components/FilterBar/index.tsx
+++ b/packages/main/src/components/FilterBar/index.tsx
@@ -1,153 +1,35 @@
-import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
-import { useI18nText } from '@ui5/webcomponents-react-base/lib/hooks';
import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps';
-import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
-import {
- CLEAR,
- FILTERS,
- GO,
- HIDE_FILTER_BAR,
- RESTORE,
- SHOW_FILTER_BAR
-} from '@ui5/webcomponents-react/dist/assets/i18n/i18n-defaults';
-import { BusyIndicator } from '@ui5/webcomponents-react/lib/BusyIndicator';
-import { BusyIndicatorSize } from '@ui5/webcomponents-react/lib/BusyIndicatorSize';
import { Button } from '@ui5/webcomponents-react/lib/Button';
import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign';
-import React, {
- Children,
- cloneElement,
- CSSProperties,
- FC,
- forwardRef,
- ReactElement,
- ReactNode,
- ReactNodeArray,
- RefObject,
- useCallback,
- useEffect,
- useRef,
- useState
-} from 'react';
+import React, { FC, forwardRef, ReactNode, ReactNodeArray, RefObject, useCallback, useState } from 'react';
+import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
import { CommonProps } from '../../interfaces/CommonProps';
import styles from './FilterBar.jss';
-import { FilterDialog } from './FilterDialog';
-import { filterValue, renderSearchWithValue } from './utils';
export interface FilterBarPropTypes extends CommonProps {
- children: ReactNode | ReactNodeArray;
- search?: ReactNode;
variants?: ReactNode;
- useToolbar?: boolean;
- filterBarExpanded?: boolean;
- filterContainerWidth?: CSSProperties['width'];
- considerGroupName?: boolean;
- showClearOnFB?: boolean;
- showGoOnFB?: boolean;
- showFilterConfiguration?: boolean;
- showClearButton?: boolean;
- showRestoreButton?: boolean;
- showGo?: boolean;
- activeFiltersCount?: number | string;
- loading?: boolean;
- showSearchOnFiltersDialog?: boolean;
- showRestoreOnFB?: boolean;
- onToggleFilters?: (event: CustomEvent<{ visible?: boolean }>) => void;
- onFiltersDialogSave?: (event: CustomEvent<{ elements?: unknown; toggledElements?: unknown }>) => void;
- onFiltersDialogClear?: (event: CustomEvent) => void;
- onFiltersDialogCancel?: (event: CustomEvent) => void;
- onFiltersDialogOpen?: (event: CustomEvent) => void;
- onFiltersDialogClose?: (event: CustomEvent) => void;
- onFiltersDialogSelectionChange?: (event: CustomEvent<{ element?: unknown; checked?: unknown }>) => void;
- onFiltersDialogSearch?: (event: CustomEvent<{ value?: unknown }>) => void;
- onClear?: (event: CustomEvent) => void;
- onGo?: (event: CustomEvent) => void;
- onRestore?: (event: CustomEvent<{ source?: unknown }>) => void;
+ search?: ReactNode;
+ children: ReactNode | ReactNodeArray;
}
+interface FilterBarInternalProps extends FilterBarPropTypes {}
+
const useStyles = createComponentStyles(styles, { name: 'FilterBar' });
/**
*
import { FilterBar } from '@ui5/webcomponents-react/lib/FilterBar';
*/
const FilterBar: FC
= forwardRef((props: FilterBarPropTypes, ref: RefObject) => {
- const {
- children,
- useToolbar,
- loading,
- filterBarExpanded,
- considerGroupName,
- filterContainerWidth,
- activeFiltersCount,
- showClearOnFB,
- showGoOnFB,
- showGo,
- showFilterConfiguration,
- showRestoreOnFB,
- showClearButton,
- showRestoreButton,
- showSearchOnFiltersDialog,
- style,
- className,
- tooltip,
- slot,
- search,
- variants,
-
- onToggleFilters,
- onFiltersDialogOpen,
- onFiltersDialogCancel,
- onFiltersDialogClose,
- onFiltersDialogSave,
- onFiltersDialogClear,
- onClear,
- onFiltersDialogSelectionChange,
- onFiltersDialogSearch,
- onGo,
- onRestore
- } = props;
- const [showFilters, setShowFilters] = useState(useToolbar ? filterBarExpanded : true);
- const [mountFilters, setMountFilters] = useState(true);
- const [dialogOpen, setDialogOpen] = useState(false);
- const [searchValue, setSearchValue] = useState('');
- const searchRef = useRef(null);
- const filterRefs = useRef({});
- const [dialogRefs, setDialogRefs] = useState({});
- const [toggledFilters, setToggledFilters] = useState({});
- const prevVisibleInFilterBarProps = useRef({});
-
- const [clearText, restoreText, showFilterBarText, hideFilterBarText, goText, filtersText] = useI18nText(
- '@ui5/webcomponents-react',
- CLEAR,
- RESTORE,
- SHOW_FILTER_BAR,
- HIDE_FILTER_BAR,
- GO,
- FILTERS
- );
-
- useEffect(() => {
- if (showFilterConfiguration) {
- Children.toArray(children).forEach((item: ReactElement) => {
- if (
- prevVisibleInFilterBarProps.current?.[item.key] !== undefined &&
- prevVisibleInFilterBarProps.current?.[item.key] !== item.props.visibleInFilterBar
- ) {
- const updatedToggledFilters = toggledFilters;
- delete updatedToggledFilters[item.key];
- setToggledFilters(updatedToggledFilters);
- }
- });
- }
- }, [children, prevVisibleInFilterBarProps, setToggledFilters, toggledFilters, showFilterConfiguration]);
-
- useEffect(() => {
- setShowFilters(useToolbar ? filterBarExpanded : true);
- }, [setShowFilters, useToolbar, filterBarExpanded]);
+ const { children, search, variants, className, style, tooltip, slot } = props as FilterBarInternalProps;
+ const [showFilters, setShowFilters] = useState(true);
const classes = useStyles();
+ const handleHideFilterBar = useCallback(() => {
+ setShowFilters(!showFilters);
+ }, [showFilters]);
+
const filterAreaClasses = StyleClassHelper.of(classes.filterArea);
if (showFilters) {
filterAreaClasses.put(classes.filterAreaOpen);
@@ -155,257 +37,35 @@ const FilterBar: FC = forwardRef((props: FilterBarPropTypes,
filterAreaClasses.put(classes.filterAreaClosed);
}
- const handleToggle = useCallback(
- (e) => {
- if (onToggleFilters) {
- onToggleFilters(enrichEventWithDetails(e, { visible: !showFilters }));
- }
- setShowFilters(!showFilters);
- },
- [showFilters, onToggleFilters, setShowFilters]
- );
-
- const handleDialogSave = useCallback(
- (e, dialogRefs, updatedToggledFilters) => {
- setDialogRefs(dialogRefs);
- setToggledFilters({ ...toggledFilters, ...updatedToggledFilters });
- if (onFiltersDialogSave) {
- onFiltersDialogSave(enrichEventWithDetails(e));
- }
- handleDialogClose(e);
- },
- [setDialogOpen, setDialogRefs, setToggledFilters, onFiltersDialogSave, toggledFilters]
- );
+ const passThroughProps = usePassThroughHtmlProps(props);
- const handleDialogOpen = useCallback(
- (e) => {
- setDialogOpen(true);
- if (onFiltersDialogOpen) {
- onFiltersDialogOpen(enrichEventWithDetails(e));
- }
- },
- [setDialogOpen, onFiltersDialogOpen]
- );
-
- const handleDialogClose = useCallback(
- (e) => {
- if (onFiltersDialogClose) {
- onFiltersDialogClose(enrichEventWithDetails(e));
- }
- setDialogOpen(false);
- },
- [setDialogOpen, onFiltersDialogClose]
- );
-
- const passThroughProps = usePassThroughHtmlProps(props, [
- 'onToggleFilters',
- 'onFiltersDialogOpen',
- 'onFiltersDialogClose',
- 'onFiltersDialogSave',
- 'onFiltersDialogClear',
- 'onClear',
- 'onFiltersDialogSelectionChange',
- 'onFiltersDialogSearch',
- 'onGo',
- 'onRestore',
- 'onFiltersDialogCancel'
- ]);
-
- const safeChildren = useCallback(() => {
- if (showFilterConfiguration && Object.keys(toggledFilters).length > 0) {
- return Children.toArray(children).map((child: ReactElement) => {
- if (toggledFilters?.[child.key] !== undefined) {
- return cloneElement(child, {
- visibleInFilterBar: toggledFilters[child.key]
- });
- }
- return child;
- });
- }
- return Children.toArray(children) as any;
- }, [toggledFilters, children]);
-
- const renderChildren = useCallback(() => {
- let childProps = { considerGroupName: considerGroupName, inFB: true } as any;
- return safeChildren()
- .filter((item) => {
- if (item.type.displayName !== 'FilterGroupItem') return true; //needed for deprecated FilterItem or custom elements
-
- return !!item?.props && item?.props.visible && item.props?.visibleInFilterBar;
- })
- .map((child) => {
- if (child.type.displayName !== 'FilterGroupItem') return child; //needed for deprecated FilterItem or custom elements
- if (filterContainerWidth) {
- childProps.style = { width: filterContainerWidth, ...child.props.style };
- }
- if (!showFilterConfiguration) {
- return cloneElement(child as ReactElement, { ...childProps });
- }
- prevVisibleInFilterBarProps.current[child.key] = child.props.visibleInFilterBar;
- let filterItemProps = {};
- if (Object.keys(dialogRefs).length > 0) {
- const dialogItemRef = dialogRefs[child.key];
- if (dialogItemRef) {
- filterItemProps = filterValue(dialogItemRef, child);
- }
- }
- if (!child.props.children)
- return cloneElement(child as ReactElement, {
- ...childProps
- });
- return cloneElement(child as ReactElement, {
- ...childProps,
- children: {
- ...child.props.children,
- props: {
- ...child.props.children.props,
- ...filterItemProps
- },
- ref: (node) => {
- filterRefs.current[child.key] = node;
- }
- }
- });
- });
- }, [filterContainerWidth, considerGroupName, dialogRefs, safeChildren, showFilterConfiguration]);
-
- const handleSearchValueChange = useCallback(
- (newVal) => {
- setSearchValue(newVal);
- },
- [setSearchValue]
- );
-
- const handleRestoreFilters = useCallback(
- (e, source) => {
- if (source === 'dialog' && showGo) {
- setDialogOpen(false);
- setDialogOpen(true);
- } else if (source === 'filterBar' && showGoOnFB) {
- setMountFilters(false);
- setMountFilters(true);
- }
- if (onRestore) {
- onRestore(enrichEventWithDetails(e, { source }));
- }
- },
- [setDialogOpen, showGo, showGoOnFB, onRestore]
- );
-
- const handleFBRestore = useCallback(
- (e) => {
- handleRestoreFilters(e, 'filterBar');
- },
- [handleRestoreFilters]
- );
-
- const cssClasses = StyleClassHelper.of(classes.outerContainer);
+ const filterBarClasses = StyleClassHelper.of(classes.outerContainer);
if (className) {
- cssClasses.put(className);
+ filterBarClasses.put(className);
}
return (
- <>
- {dialogOpen && showFilterConfiguration && (
-
- {safeChildren()}
-
- )}
-
- {loading ? (
-
- ) : (
- <>
-
- {variants}
- {search && (
-
- {renderSearchWithValue(search, searchValue)}
-
- )}
- {useToolbar && (
-
- {showClearOnFB && (
-
- )}
- {showRestoreOnFB && (
-
- )}
-
- {showFilterConfiguration && (
-
- )}
- {showGoOnFB && (
-
- )}
-
- )}
-
- {mountFilters &&
{renderChildren()}
}
-
- )}
+
+
+ {variants}
+ {search &&
{search}
}
+
+
+
-
+
{children}
+
);
});
-FilterBar.defaultProps = {
- useToolbar: true,
- filterBarExpanded: true,
- showClearOnFB: false,
- showGo: false,
- showRestoreOnFB: false,
- showGoOnFB: false,
- showFilterConfiguration: false,
- showClearButton: false,
- showRestoreButton: false,
- showSearchOnFiltersDialog: false,
- considerGroupName: false,
- loading: false,
- onToggleFilters: null,
- onFiltersDialogOpen: null,
- onFiltersDialogCancel: null,
- onFiltersDialogClose: null,
- onFiltersDialogSave: null,
- onFiltersDialogClear: null,
- onClear: null,
- onFiltersDialogSelectionChange: null,
- onFiltersDialogSearch: null,
- onGo: null,
- onRestore: null
-};
-
FilterBar.displayName = 'FilterBar';
export { FilterBar };
diff --git a/packages/main/src/components/FilterBar/utils.tsx b/packages/main/src/components/FilterBar/utils.tsx
deleted file mode 100644
index c8e444574e4..00000000000
--- a/packages/main/src/components/FilterBar/utils.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { cloneElement } from 'react';
-
-export const filterValue = (ref, child) => {
- const tagName = ref.tagName;
- let filterItemProps = {};
- if (
- tagName === 'UI5-INPUT' ||
- tagName === 'UI5-DATEPICKER' ||
- tagName === 'UI5-DATETIME-PICKER' ||
- tagName === 'UI5-DURATION-PICKER'
- ) {
- filterItemProps = { value: ref.value };
- }
- if (tagName === 'UI5-COMBOBOX') {
- filterItemProps = { value: ref.value, filterValue: ref.filterValue };
- }
- if (tagName === 'UI5-SELECT' || tagName === 'UI5-MULTI-COMBOBOX') {
- const selectedIndices = Array.from(ref.children as HTMLCollectionOf
)
- .map((item, index) => (item.selected ? index : false))
- .filter((el) => el !== false);
- const selectedIndicesSet = new Set(selectedIndices);
- const options = child.props.children.props.children?.map((item, index) => {
- if (selectedIndicesSet.has(index)) {
- return cloneElement(item, { selected: true });
- }
- return cloneElement(item, { selected: false });
- });
- filterItemProps = { children: options };
- }
- if (tagName === 'UI5-SWITCH' || tagName === 'UI5-CHECKBOX') {
- filterItemProps = { checked: ref.checked };
- }
- return filterItemProps;
-};
-
-export const renderSearchWithValue = (renderSearchElement, searchValue) => {
- return cloneElement(renderSearchElement, { value: searchValue });
-};
diff --git a/packages/main/src/components/FilterGroupItem/FilterGroupItem.jss.ts b/packages/main/src/components/FilterGroupItem/FilterGroupItem.jss.ts
deleted file mode 100644
index 7a3688639ab..00000000000
--- a/packages/main/src/components/FilterGroupItem/FilterGroupItem.jss.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-const styles = {
- filterItem: {
- width: '13rem',
- marginRight: '1rem',
- marginBottom: '1rem'
- },
- filterItemDialog: {
- flexGrow: 1,
- overflow: 'hidden'
- },
- innerFilterItemContainer: {
- display: 'flex',
- flexDirection: 'column',
- justifyContent: 'start'
- },
- innerFilterItemContainerDialog: {
- display: 'grid',
- gridTemplateColumns: '20% calc(80% - 1rem)',
- '@media(max-width:700px)': {
- gridTemplateColumns: '100%'
- },
- gridTemplateRows: 'auto',
- gridRowGap: '0px',
- gridColumnGap: '1rem',
- '& :first-child': {
- maxWidth: '100%',
- placeSelf: 'center end',
- '@media(max-width:700px)': {
- placeSelf: 'center start'
- }
- },
- '& :last-child': {
- placeSelf: 'center auto',
- width: '100%'
- }
- },
- loadingContainer: {
- display: 'flex',
- width: '100%',
- height: '1.625rem',
- justifyContent: 'center'
- }
-};
-
-export default styles;
diff --git a/packages/main/src/components/FilterGroupItem/index.tsx b/packages/main/src/components/FilterGroupItem/index.tsx
deleted file mode 100644
index 0e0f6e47c7f..00000000000
--- a/packages/main/src/components/FilterGroupItem/index.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
-import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
-import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps';
-import { BusyIndicator } from '@ui5/webcomponents-react/lib/BusyIndicator';
-import { BusyIndicatorSize } from '@ui5/webcomponents-react/lib/BusyIndicatorSize';
-import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
-import { Label } from '@ui5/webcomponents-react/lib/Label';
-import React, { FC, forwardRef, ReactElement, RefObject } from 'react';
-import { CommonProps } from '../../interfaces/CommonProps';
-import styles from './FilterGroupItem.jss';
-
-const useStyles = createComponentStyles(styles, { name: 'FilterGroupItem' });
-
-const emptyObject = {};
-
-export interface FilterGroupItemPropTypes extends CommonProps {
- children: ReactElement;
- label?: string;
- groupName?: string;
- labelTooltip?: string;
- loading?: boolean;
- required?: boolean;
- visible?: boolean;
- visibleInFilterBar?: boolean;
- considerGroupName?: boolean;
-}
-
-export const FilterGroupItem: FC = forwardRef(
- (props: FilterGroupItemPropTypes, ref: RefObject) => {
- const classes = useStyles();
- const {
- groupName,
- considerGroupName,
- label,
- labelTooltip,
- required,
- visible,
- visibleInFilterBar,
- children,
- style,
- loading,
- className,
- tooltip,
- slot,
- // @ts-ignore
- inFB
- } = props;
-
- const passThroughProps = usePassThroughHtmlProps(props);
-
- const styleClasses = StyleClassHelper.of(inFB ? classes.filterItem : classes.filterItemDialog);
- if (className) {
- styleClasses.put(className);
- }
-
- if (!required && (!visible || (inFB && !visibleInFilterBar))) return null;
- return (
-
-
-
-
-
- {loading ? (
-
- ) : (
- children
- )}
-
-
+
+
@@ -54,9 +58,13 @@ exports[`MessageBox Confirm - OK 1`] = `
data-type="Confirm"
slot="header"
>
-
+
+
+
@@ -99,9 +107,13 @@ exports[`MessageBox Error 1`] = `
data-type="Error"
slot="header"
>
-
+
+
+
@@ -137,9 +149,13 @@ exports[`MessageBox Information 1`] = `
data-type="Information"
slot="header"
>
-
+
+
+
@@ -175,9 +191,13 @@ exports[`MessageBox No Title 1`] = `
data-type="Confirm"
slot="header"
>
-
+
+
+
@@ -218,9 +238,13 @@ exports[`MessageBox Not open 1`] = `
data-type="Success"
slot="header"
>
-
+
+
+
@@ -256,9 +280,13 @@ exports[`MessageBox Show 1`] = `
data-type="Confirm"
slot="header"
>
-
+
+
+
@@ -301,9 +329,13 @@ exports[`MessageBox Success 1`] = `
data-type="Success"
slot="header"
>
-
+
+
+
@@ -339,9 +371,13 @@ exports[`MessageBox Success w/ custom title 1`] = `
data-type="Success"
slot="header"
>
-
+
+
+
@@ -377,9 +413,13 @@ exports[`MessageBox Warning 1`] = `
data-type="Warning"
slot="header"
>
-
+
+
+
diff --git a/packages/main/src/components/MessageBox/index.tsx b/packages/main/src/components/MessageBox/index.tsx
index 77112646bff..048f2de10f7 100644
--- a/packages/main/src/components/MessageBox/index.tsx
+++ b/packages/main/src/components/MessageBox/index.tsx
@@ -5,7 +5,7 @@ import '@ui5/webcomponents-icons/dist/icons/message-success';
import '@ui5/webcomponents-icons/dist/icons/message-warning';
import '@ui5/webcomponents-icons/dist/icons/question-mark';
import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
-import { useConsolidatedRef, useI18nText, usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/hooks';
+import { useConsolidatedRef, useI18nBundle, usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/hooks';
import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
import {
@@ -40,15 +40,15 @@ import { Ui5DialogDomRef } from '../../interfaces/Ui5DialogDomRef';
import styles from './MessageBox.jss';
const actionTextMap = new Map();
-actionTextMap.set(MessageBoxActions.ABORT, 0);
-actionTextMap.set(MessageBoxActions.CANCEL, 1);
-actionTextMap.set(MessageBoxActions.CLOSE, 2);
-actionTextMap.set(MessageBoxActions.DELETE, 3);
-actionTextMap.set(MessageBoxActions.IGNORE, 4);
-actionTextMap.set(MessageBoxActions.NO, 5);
-actionTextMap.set(MessageBoxActions.OK, 6);
-actionTextMap.set(MessageBoxActions.RETRY, 7);
-actionTextMap.set(MessageBoxActions.YES, 8);
+actionTextMap.set(MessageBoxActions.ABORT, ABORT);
+actionTextMap.set(MessageBoxActions.CANCEL, CANCEL);
+actionTextMap.set(MessageBoxActions.CLOSE, CLOSE);
+actionTextMap.set(MessageBoxActions.DELETE, DELETE);
+actionTextMap.set(MessageBoxActions.IGNORE, IGNORE);
+actionTextMap.set(MessageBoxActions.NO, NO);
+actionTextMap.set(MessageBoxActions.OK, OK);
+actionTextMap.set(MessageBoxActions.RETRY, RETRY);
+actionTextMap.set(MessageBoxActions.YES, YES);
export interface MessageBoxPropTypes extends CommonProps {
open?: boolean;
@@ -68,6 +68,8 @@ const useStyles = createComponentStyles(styles, { name: 'MessageBox' });
const MessageBox: FC = forwardRef((props: MessageBoxPropTypes, ref: Ref) => {
const { open, type, children, className, style, tooltip, slot, title, icon, actions, onClose } = props;
+ const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
+
const classes = useStyles();
const iconToRender = useMemo(() => {
@@ -90,53 +92,26 @@ const MessageBox: FC = forwardRef((props: MessageBoxPropTyp
return null;
}, [icon, type]);
- const [
- titleConfirmation,
- titleError,
- titleInformation,
- titleSuccess,
- titleWarning,
- titleHighlight,
- ...actionTranslations
- ] = useI18nText(
- '@ui5/webcomponents-react',
- CONFIRMATION,
- ERROR,
- INFORMATION,
- SUCCESS,
- WARNING,
- HIGHLIGHT,
- ABORT,
- CANCEL,
- CLOSE,
- DELETE,
- IGNORE,
- NO,
- OK,
- RETRY,
- YES
- );
-
- const titleToRender = () => {
+ const titleToRender = useMemo(() => {
if (title) {
return title;
}
switch (type) {
case MessageBoxTypes.CONFIRM:
- return titleConfirmation;
+ return i18nBundle.getText(CONFIRMATION);
case MessageBoxTypes.ERROR:
- return titleError;
+ return i18nBundle.getText(ERROR);
case MessageBoxTypes.INFORMATION:
- return titleInformation;
+ return i18nBundle.getText(INFORMATION);
case MessageBoxTypes.SUCCESS:
- return titleSuccess;
+ return i18nBundle.getText(SUCCESS);
case MessageBoxTypes.WARNING:
- return titleWarning;
+ return i18nBundle.getText(WARNING);
case MessageBoxTypes.HIGHLIGHT:
- return titleHighlight;
+ return i18nBundle.getText(HIGHLIGHT);
}
return null;
- };
+ }, [title, type, i18nBundle]);
const actionsToRender = useMemo(() => {
if (actions && actions.length > 0) {
@@ -183,13 +158,14 @@ const MessageBox: FC = forwardRef((props: MessageBoxPropTyp
onAfterClose={open ? handleOnClose : null}
header={
- {iconToRender}
- {titleToRender()}
+ {!!iconToRender && {iconToRender}
}
+ {titleToRender}
}
footer={