FilterBar

Author: MarcusNotheis

packages/main/src/components/FilterBar/FilterDialog.tsx

@@ -1,6 +1,6 @@
 import '@ui5/webcomponents-icons/dist/icons/search';
 import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
-import { useI18nBundle } from '@ui5/webcomponents-react-base/lib/hooks';
+import { useI18nText } from '@ui5/webcomponents-react-base/lib/hooks';
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
 import {
   BASIC,
@@ -59,7 +59,24 @@ export const FilterDialog = (props) => {
   const dialogRefs = useRef({});
   const dialogRef = useRef();
 
-  const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
+  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) {
@@ -132,11 +149,11 @@ export const FilterDialog = (props) => {
             Go
           </Button>
         )}
-        {showClearButton && <Button onClick={handleClearFilters}>{i18nBundle.getText(CLEAR)}</Button>}
-        {showRestoreButton && <Button onClick={handleRestore}>{i18nBundle.getText(RESTORE)}</Button>}
-        <Button onClick={handleSave}>{i18nBundle.getText(SAVE)}</Button>
+        {showClearButton && <Button onClick={handleClearFilters}>{clearText}</Button>}
+        {showRestoreButton && <Button onClick={handleRestore}>{restoreText}</Button>}
+        <Button onClick={handleSave}>{saveText}</Button>
         <Button design={ButtonDesign.Transparent} onClick={handleCancel}>
-          {i18nBundle.getText(CANCEL)}
+          {cancelText}
         </Button>
       </FlexBox>
     ),
@@ -162,11 +179,7 @@ export const FilterDialog = (props) => {
       <FlexBox direction={FlexBoxDirection.Column} className={classes.header}>
         <Title level={TitleLevel.H4}>Filters</Title>
         {showSearch && (
-          <Input
-            placeholder={i18nBundle.getText(SEARCH_FOR_FILTERS)}
-            onInput={handleSearch}
-            icon={<Icon name="search" />}
-          />
+          <Input placeholder={searchForFiltersText} onInput={handleSearch} icon={<Icon name="search" />} />
         )}
       </FlexBox>
     ),
@@ -244,9 +257,9 @@ export const FilterDialog = (props) => {
           <div className={classes.groupContainer} key={item}>
             <FlexBox justifyContent={FlexBoxJustifyContent.SpaceBetween} alignItems={FlexBoxAlignItems.Center}>
               <Title level={TitleLevel.H5} className={index === 0 ? classes.groupTitle : ''}>
-                {item === 'default' ? i18nBundle.getText(BASIC) : item}
+                {item === 'default' ? basicText : item}
               </Title>
-              {index === 0 && <Text wrapping={false}>{i18nBundle.getText(SHOW_ON_FILTER_BAR)}</Text>}
+              {index === 0 && <Text wrapping={false}>{showOnFilterBarText}</Text>}
             </FlexBox>
             <div className={classes.filters}>{filters}</div>
           </div>

packages/main/src/components/FilterBar/index.tsx

@@ -1,5 +1,5 @@
 import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
-import { useI18nBundle } from '@ui5/webcomponents-react-base/lib/hooks';
+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';
@@ -117,7 +117,15 @@ const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes,
   const [toggledFilters, setToggledFilters] = useState({});
   const prevVisibleInFilterBarProps = useRef({});
 
-  const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
+  const [clearText, restoreText, showFilterBarText, hideFilterBarText, goText, filtersText] = useI18nText(
+    '@ui5/webcomponents-react',
+    CLEAR,
+    RESTORE,
+    SHOW_FILTER_BAR,
+    HIDE_FILTER_BAR,
+    GO,
+    FILTERS
+  );
 
   useEffect(() => {
     if (showFilterConfiguration) {
@@ -337,20 +345,20 @@ const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes,
                 <div className={classes.headerRowRight}>
                   {showClearOnFB && (
                     <Button onClick={onClear} design={ButtonDesign.Transparent}>
-                      {i18nBundle.getText(CLEAR)}
+                      {clearText}
                     </Button>
                   )}
                   {showRestoreOnFB && (
                     <Button onClick={handleFBRestore} design={ButtonDesign.Transparent}>
-                      {i18nBundle.getText(RESTORE)}
+                      {restoreText}
                     </Button>
                   )}
                   <Button onClick={handleToggle} design={ButtonDesign.Transparent} className={classes.showFiltersBtn}>
-                    {showFilters ? i18nBundle.getText(HIDE_FILTER_BAR) : i18nBundle.getText(SHOW_FILTER_BAR)}
+                    {showFilters ? hideFilterBarText : showFilterBarText}
                   </Button>
                   {showFilterConfiguration && (
                     <Button onClick={handleDialogOpen}>
-                      {`${i18nBundle.getText(FILTERS)}${
+                      {`${filtersText}${
                         activeFiltersCount && parseInt(activeFiltersCount as string) > 0
                           ? ` (${activeFiltersCount})`
                           : ''
@@ -359,7 +367,7 @@ const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes,
                   )}
                   {showGoOnFB && (
                     <Button onClick={onGo} design={ButtonDesign.Emphasized}>
-                      {i18nBundle.getText(GO)}
+                      {goText}
                     </Button>
                   )}
                 </div>