Merge branch 'master' into chore/update-actions

MarcusNotheis · web-flow · commit 2b996fcf2b22 · 2020-07-15T14:56:05.000+02:00
diff --git a/packages/base/src/hooks/usePassThroughHtmlProps.ts b/packages/base/src/hooks/usePassThroughHtmlProps.ts
@@ -1,23 +1,14 @@
-import { useMemo } from 'react';
-
 const PROP_WHITELIST = /^(aria-|data-|id$|on[A-Z])/;
 
 export const usePassThroughHtmlProps = (props, propBlackList: string[] = []) => {
   const componentPropBlacklist = new Set(propBlackList);
-  const passThroughPropNames = Object.keys(props).filter(
-    (name) => PROP_WHITELIST.test(name) && !componentPropBlacklist.has(name)
-  );
 
-  return useMemo(
-    () => {
-      return passThroughPropNames.reduce(
-        (acc, val) => ({
-          ...acc,
-          [val]: props[val]
-        }),
-        {}
-      );
-    },
-    passThroughPropNames.map((name) => props[name])
-  );
+  const returnVal = {};
+  for (const name in props) {
+    if (PROP_WHITELIST.test(name) && !componentPropBlacklist.has(name)) {
+      returnVal[name] = props[name];
+    }
+  }
+
+  return returnVal;
 };
diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.mdx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.mdx
@@ -99,7 +99,7 @@ import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJusti
     infiniteScroll: true,
     infiniteScrollThreshold: 20,
     subRowsKey: 'subRows',
-    isTreeTable: true,
+    isTreeTable: false,
     scaleWidthMode: TableScaleWidthMode.Default,
     selectionMode: TableSelectionMode.SINGLE_SELECT,
     selectionBehavior: TableSelectionBehavior.ROW
diff --git a/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts b/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts
@@ -56,6 +56,7 @@ const styles = {
     borderBottom: `1px solid ${ThemingParameters.sapList_BorderColor}`,
     boxSizing: 'border-box',
     display: 'flex',
+    willChange: 'transform',
     height: CssSizeVariables.sapWcrAnalyticalTableRowHeight,
     '&:hover': {
       backgroundColor: ThemingParameters.sapList_Hover_Background
diff --git a/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap b/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap
@@ -200,6 +200,8 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
         <div
           class="ToolbarSeparator-separator-0"
         />
+      </div>
+      <div>
         <div>
           <ui5-input
             placeholder="Search"
@@ -219,22 +221,30 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
         >
           Clear
         </ui5-button>
+      </div>
+      <div>
         <ui5-button
           design="Transparent"
         >
           Restore
         </ui5-button>
+      </div>
+      <div>
         <ui5-button
           class="FilterBar-showFiltersBtn-0"
           design="Transparent"
         >
           Hide Filter Bar
         </ui5-button>
+      </div>
+      <div>
         <ui5-button
           design="Default"
         >
           Filters (1337)
         </ui5-button>
+      </div>
+      <div>
         <ui5-button
           design="Emphasized"
         >
@@ -884,6 +894,8 @@ Array [
           <div
             class="ToolbarSeparator-separator-0"
           />
+        </div>
+        <div>
           <div>
             <ui5-input
               placeholder="Search"
@@ -903,22 +915,30 @@ Array [
           >
             Clear
           </ui5-button>
+        </div>
+        <div>
           <ui5-button
             design="Transparent"
           >
             Restore
           </ui5-button>
+        </div>
+        <div>
           <ui5-button
             class="FilterBar-showFiltersBtn-0"
             design="Transparent"
           >
             Hide Filter Bar
           </ui5-button>
+        </div>
+        <div>
           <ui5-button
             design="Default"
           >
             Filters (1337)
           </ui5-button>
+        </div>
+        <div>
           <ui5-button
             design="Emphasized"
           >
@@ -1196,6 +1216,8 @@ exports[`FilterBar Toggle Filters Dialog 2`] = `
         <div
           class="ToolbarSeparator-separator-0"
         />
+      </div>
+      <div>
         <div>
           <ui5-input
             placeholder="Search"
@@ -1215,22 +1237,30 @@ exports[`FilterBar Toggle Filters Dialog 2`] = `
         >
           Clear
         </ui5-button>
+      </div>
+      <div>
         <ui5-button
           design="Transparent"
         >
           Restore
         </ui5-button>
+      </div>
+      <div>
         <ui5-button
           class="FilterBar-showFiltersBtn-0"
           design="Transparent"
         >
           Hide Filter Bar
         </ui5-button>
+      </div>
+      <div>
         <ui5-button
           design="Default"
         >
           Filters (1337)
         </ui5-button>
+      </div>
+      <div>
         <ui5-button
           design="Emphasized"
         >
diff --git a/packages/main/src/components/FilterBar/demo.stories.tsx b/packages/main/src/components/FilterBar/demo.stories.tsx
@@ -44,60 +44,6 @@ export const renderDefaultStory = (props) => {
       onFiltersDialogSearch={props.onFiltersDialogSearch}
       onGo={props.onGo}
       onRestore={props.onRestore}
-    >
-      <FilterGroupItem label="Classification" key="classification" loading={props.loading}>
-        <Select>
-          <Option>Option 1</Option>
-          <Option selected>Option 2</Option>
-          <Option>Option 3</Option>
-          <Option>Option 4</Option>
-        </Select>
-      </FilterGroupItem>
-      <FilterGroupItem key={'filter2'} label={'Custom Filter 1'} loading={props.loading}>
-        <Switch />
-      </FilterGroupItem>
-      <FilterGroupItem label="Multi" key="Multi" loading={props.loading}>
-        <MultiComboBox>
-          <MultiComboBoxItem text="MultiComboBoxItem 1" />
-          <MultiComboBoxItem selected text="MultiComboBoxItem 2" />
-          <MultiComboBoxItem text="MultiComboBoxItem 3" />
-          <MultiComboBoxItem selected text="MultiComboBoxItem 4" />
-        </MultiComboBox>
-      </FilterGroupItem>
-    </FilterBar>
-  );
-};
-renderDefaultStory.storyName = 'Default';
-
-export const renderStoryWithFiltersDialog = (props) => {
-  return (
-    <FilterBar
-      search={<Input placeholder={'Search'} />}
-      variants={<VariantManagement selectedKey="2" variantItems={variantItems} />}
-      useToolbar={props.useToolbar}
-      filterBarExpanded={props.filterBarExpanded}
-      loading={props.loading}
-      considerGroupName={props.considerGroupName}
-      filterContainerWidth={props.filterContainerWidth}
-      activeFiltersCount={props.activeFiltersCount}
-      showClearOnFB={props.showClearOnFB}
-      showRestoreOnFB={props.showRestoreOnFB}
-      showGo={props.showGo}
-      showGoOnFB={props.showGoOnFB}
-      showFilterConfiguration={props.showFilterConfiguration}
-      showSearchOnFiltersDialog={props.showSearchOnFiltersDialog}
-      showClearButton={props.showClearButton}
-      showRestoreButton={props.showRestoreButton}
-      onToggleFilters={props.onToggleFilters}
-      onFiltersDialogOpen={props.onFiltersDialogOpen}
-      onFiltersDialogClose={props.onFiltersDialogClose}
-      onFiltersDialogSave={props.onFiltersDialogSave}
-      onFiltersDialogClear={props.onFiltersDialogClear}
-      onClear={props.onClear}
-      onFiltersDialogSelectionChange={props.onFiltersDialogSelectionChange}
-      onFiltersDialogSearch={props.onFiltersDialogSearch}
-      onGo={props.onGo}
-      onRestore={props.onRestore}
     >
       <FilterGroupItem label="Input" loading={props.loading} visibleInFilterBar={props.visibleInFilterBar}>
         <Input placeholder="Placeholder" />
@@ -154,31 +100,35 @@ export const renderStoryWithFiltersDialog = (props) => {
     </FilterBar>
   );
 };
-renderStoryWithFiltersDialog.storyName = 'With Filters Dialog';
+renderDefaultStory.storyName = 'Default';
 
 export default {
   title: 'Components / FilterBar',
   component: FilterBar,
   parameters: {
     subcomponents: { FilterGroupItem }
   },
+  argTypes: {
+    search: { type: null },
+    variants: { type: null }
+  },
   args: {
     useToolbar: true,
     filterBarExpanded: true,
-    considerGroupName: true,
+    considerGroupName: false,
     filterContainerWidth: '13rem',
     activeFiltersCount: 0,
-    showClearOnFB: true,
-    showRestoreOnFB: true,
-    showGo: true,
-    showGoOnFB: true,
-    showFilterConfiguration: true,
-    showSearchOnFiltersDialog: true,
-    showClearButton: true,
-    showRestoreButton: true,
+    showClearOnFB: false,
+    showRestoreOnFB: false,
+    showGo: false,
+    showGoOnFB: false,
+    showFilterConfiguration: false,
+    showSearchOnFiltersDialog: false,
+    showClearButton: false,
+    showRestoreButton: false,
     visibleInFilterBar: true,
     groupName: 'Custom Group',
     visible: true,
-    required: true
+    required: false
   }
 };
diff --git a/packages/main/src/components/FilterBar/index.tsx b/packages/main/src/components/FilterBar/index.tsx
@@ -340,45 +340,35 @@ const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes,
           <>
             <Toolbar className={classes.filterBarHeader} toolbarStyle={ToolbarStyle.Clear}>
               {variants}
-              {search && (
-                <>
-                  <ToolbarSeparator />
-                  <div ref={searchRef}>{renderSearchWithValue(search, searchValue)}</div>
-                </>
-              )}
+              {search && <ToolbarSeparator />}
+              {search && <div ref={searchRef}>{renderSearchWithValue(search, searchValue)}</div>}
               <ToolbarSpacer />
+              {useToolbar && showClearOnFB && (
+                <Button onClick={onClear} design={ButtonDesign.Transparent}>
+                  {clearText}
+                </Button>
+              )}
+              {useToolbar && showRestoreOnFB && (
+                <Button onClick={handleFBRestore} design={ButtonDesign.Transparent}>
+                  {restoreText}
+                </Button>
+              )}
               {useToolbar && (
-                <>
-                  {showClearOnFB && (
-                    <Button onClick={onClear} design={ButtonDesign.Transparent}>
-                      {clearText}
-                    </Button>
-                  )}
-                  {showRestoreOnFB && (
-                    <Button onClick={handleFBRestore} design={ButtonDesign.Transparent}>
-                      {restoreText}
-                    </Button>
-                  )}
-                  {
-                    <Button onClick={handleToggle} design={ButtonDesign.Transparent} className={classes.showFiltersBtn}>
-                      {showFilters ? hideFilterBarText : showFilterBarText}
-                    </Button>
-                  }
-                  {showFilterConfiguration && (
-                    <Button onClick={handleDialogOpen}>
-                      {`${filtersText}${
-                        activeFiltersCount && parseInt(activeFiltersCount as string) > 0
-                          ? ` (${activeFiltersCount})`
-                          : ''
-                      }`}
-                    </Button>
-                  )}
-                  {showGoOnFB && (
-                    <Button onClick={onGo} design={ButtonDesign.Emphasized}>
-                      {goText}
-                    </Button>
-                  )}
-                </>
+                <Button onClick={handleToggle} design={ButtonDesign.Transparent} className={classes.showFiltersBtn}>
+                  {showFilters ? hideFilterBarText : showFilterBarText}
+                </Button>
+              )}
+              {useToolbar && showFilterConfiguration && (
+                <Button onClick={handleDialogOpen}>
+                  {`${filtersText}${
+                    activeFiltersCount && parseInt(activeFiltersCount as string) > 0 ? ` (${activeFiltersCount})` : ''
+                  }`}
+                </Button>
+              )}
+              {useToolbar && showGoOnFB && (
+                <Button onClick={onGo} design={ButtonDesign.Emphasized}>
+                  {goText}
+                </Button>
               )}
             </Toolbar>
             {mountFilters && <div className={filterAreaClasses.valueOf()}>{renderChildren()}</div>}
