Merge branch 'master' into feat/chart-lib-export

MarcusNotheis · web-flow · commit f6a7be3bb1be · 2019-07-22T12:13:59.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.4.2-rc.2](https://github.com/SAP/ui5-webcomponents-react/compare/v0.4.2-rc.1...v0.4.2-rc.2) (2019-07-22)
+
+**Note:** Version bump only for package ui5-webcomponents-react
+
+
+
+
+
 ## [0.4.2-rc.1](https://github.com/SAP/ui5-webcomponents-react/compare/v0.4.2-rc.0...v0.4.2-rc.1) (2019-07-22)
 
 
diff --git a/lerna.json b/lerna.json
@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.4.2-rc.1",
+  "version": "0.4.2-rc.2",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "command": {
diff --git a/packages/base/CHANGELOG.md b/packages/base/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.4.2-rc.2](https://github.com/SAP/ui5-webcomponents-react/compare/v0.4.2-rc.1...v0.4.2-rc.2) (2019-07-22)
+
+**Note:** Version bump only for package @ui5/webcomponents-react-base
+
+
+
+
+
 ## [0.4.2-rc.1](https://github.com/SAP/ui5-webcomponents-react/compare/v0.4.2-rc.0...v0.4.2-rc.1) (2019-07-22)
 
 **Note:** Version bump only for package @ui5/webcomponents-react-base
diff --git a/packages/base/package.json b/packages/base/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-react-base",
-  "version": "0.4.2-rc.1",
+  "version": "0.4.2-rc.2",
   "description": "Base for ui5-webcomponents-react",
   "main": "index.cjs.js",
   "module": "index.esm.js",
diff --git a/packages/charts/CHANGELOG.md b/packages/charts/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.4.2-rc.2](https://github.com/SAP/ui5-webcomponents-react/compare/v0.4.2-rc.1...v0.4.2-rc.2) (2019-07-22)
+
+**Note:** Version bump only for package @ui5/webcomponents-react-charts
+
+
+
+
+
 ## [0.4.2-rc.1](https://github.com/SAP/ui5-webcomponents-react/compare/v0.4.2-rc.0...v0.4.2-rc.1) (2019-07-22)
 
 
diff --git a/packages/charts/package.json b/packages/charts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-react-charts",
-  "version": "0.4.2-rc.1",
+  "version": "0.4.2-rc.2",
   "description": "Charts for ui5-webcomponents-react",
   "main": "index.cjs.js",
   "module": "index.esm.js",
@@ -20,7 +20,7 @@
     "@types/chart.js": "^2.7.53"
   },
   "dependencies": {
-    "@ui5/webcomponents-react-base": "0.4.2-rc.1",
+    "@ui5/webcomponents-react-base": "0.4.2-rc.2",
     "chart.js": "^2.8.0",
     "chartjs-plugin-datalabels": "^0.6.0",
     "deepmerge": "^4.0.0",
diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.4.2-rc.2](https://github.com/SAP/ui5-webcomponents-react/compare/v0.4.2-rc.1...v0.4.2-rc.2) (2019-07-22)
+
+**Note:** Version bump only for package @ui5/webcomponents-react-cli
+
+
+
+
+
 ## [0.4.2-rc.1](https://github.com/SAP/ui5-webcomponents-react/compare/v0.4.2-rc.0...v0.4.2-rc.1) (2019-07-22)
 
 **Note:** Version bump only for package @ui5/webcomponents-react-cli
diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ui5/webcomponents-react-cli",
   "private": true,
-  "version": "0.4.2-rc.1",
+  "version": "0.4.2-rc.2",
   "description": "CLI for creating React Components",
   "repository": {
     "type": "git",
diff --git a/packages/main/CHANGELOG.md b/packages/main/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.4.2-rc.2](https://github.com/SAP/ui5-webcomponents-react/compare/v0.4.2-rc.1...v0.4.2-rc.2) (2019-07-22)
+
+**Note:** Version bump only for package @ui5/webcomponents-react
+
+
+
+
+
 ## [0.4.2-rc.1](https://github.com/SAP/ui5-webcomponents-react/compare/v0.4.2-rc.0...v0.4.2-rc.1) (2019-07-22)
 
 **Note:** Version bump only for package @ui5/webcomponents-react
diff --git a/packages/main/__karma_snapshots__/FilterBar.md b/packages/main/__karma_snapshots__/FilterBar.md
diff --git a/packages/main/package.json b/packages/main/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-react",
-  "version": "0.4.2-rc.1",
+  "version": "0.4.2-rc.2",
   "description": "React Wrapper for UI5 Web Components and additional components",
   "repository": {
     "type": "git",
@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@ui5/webcomponents": "1.0.0-rc.2",
-    "@ui5/webcomponents-react-base": "0.4.2-rc.1",
+    "@ui5/webcomponents-react-base": "0.4.2-rc.2",
     "lodash.debounce": "^4.0.8",
     "react-scroll": "^1.7.11",
     "react-table": "6.8.6",
diff --git a/packages/main/src/components/FilterBar/demo.stories.tsx b/packages/main/src/components/FilterBar/demo.stories.tsx
@@ -46,6 +46,7 @@ function renderStory() {
         label="Classification"
         key="classification"
         type={FilterType.Select}
+        loading={boolean('loading', false)}
       />
       <FilterItem
         key={'filter2'}
diff --git a/packages/main/src/components/FilterBar/index.tsx b/packages/main/src/components/FilterBar/index.tsx
@@ -25,7 +25,7 @@ export class FilterBar extends PureComponent<FilterBarPropTypes> {
     showFilters: true
   };
 
-  handelHideFilterBar = () => {
+  handleHideFilterBar = () => {
     this.setState({ showFilters: !this.state.showFilters });
   };
 
@@ -38,7 +38,7 @@ export class FilterBar extends PureComponent<FilterBarPropTypes> {
           {renderVariants && renderVariants()}
           {renderSearch && <div className={classes.vLine}> {renderSearch()} </div>}
           <div className={classes.headerRowRight}>
-            <Button onClick={this.handelHideFilterBar} design={ButtonDesign.Transparent}>
+            <Button onClick={this.handleHideFilterBar} design={ButtonDesign.Transparent}>
               {this.state.showFilters ? 'Hide Filter Bar' : 'Show Filter Bar'}
             </Button>
           </div>
diff --git a/packages/main/src/components/FilterItem/FilterItem.jss.ts b/packages/main/src/components/FilterItem/FilterItem.jss.ts
@@ -3,6 +3,16 @@ const styles = {
     minWidth: '10rem',
     height: 'fit-content',
     marginRight: '0.5rem'
+  },
+  innerFilterItemContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'start'
+  },
+  loadingContainer: {
+    display: 'flex',
+    width: '100%',
+    justifyContent: 'center'
   }
 };
 
diff --git a/packages/main/src/components/FilterItem/index.tsx b/packages/main/src/components/FilterItem/index.tsx
@@ -1,14 +1,14 @@
-import { Event, StyleClassHelper, withStyles } from '@ui5/webcomponents-react-base';
-import React, { PureComponent, ReactNode } from 'react';
-import { ClassProps } from '../../interfaces/ClassProps';
+import { Event, StyleClassHelper } from '@ui5/webcomponents-react-base';
+import React, { forwardRef, ReactNode, RefObject, useMemo } from 'react';
 import { CommonProps } from '../../interfaces/CommonProps';
 import { BusyIndicator } from '../../lib/BusyIndicator';
 import { FilterType } from '../../lib/FilterType';
 import { Input } from '../../lib/Input';
 import { Label } from '../../lib/Label';
-import { ListItemTypes } from '../../lib/ListItemTypes';
+// @ts-ignore
+import { createUseStyles } from 'react-jss';
 import { Select } from '../../lib/Select';
-import { StandardListItem } from '../../lib/StandardListItem';
+import { Option } from '../../lib/Option';
 import styles from './FilterItem.jss';
 import { BusyIndicatorType } from '../../lib/BusyIndicatorType';
 
@@ -25,108 +25,102 @@ export interface FilterItemPropTypes extends CommonProps {
   changeEventName?: string;
 }
 
-interface FilterItemInternalProps extends FilterItemPropTypes, ClassProps {}
+const useStyles = createUseStyles(styles);
 
-@withStyles(styles)
-export class FilterItem extends PureComponent<FilterItemPropTypes> {
-  state = {
-    selectedText: ''
-  };
+export const FilterItem = forwardRef((props: FilterItemPropTypes, ref: RefObject<HTMLDivElement>) => {
+  const {
+    filterItems,
+    onChange,
+    type,
+    placeholder,
+    children,
+    loading,
+    changeEventName,
+    valueParamName,
+    label,
+    style,
+    tooltip
+  } = props as FilterItemPropTypes;
+  const classes = useStyles();
 
-  static defaultProps = {
-    placeholder: '',
-    renderText: (item) => (item && item.text) || '',
-    type: FilterType.Default,
-    filterItems: [],
-    label: '',
-    onChange: () => null,
-    loading: false
-  };
-
-  private onSelect = (e) => {
-    const selectedKey = e.getParameter('selectedItem').getAttribute('data-key');
-    const { filterItems } = this.props;
-    const selectedItem = this._getItemByKey(selectedKey, filterItems) || filterItems[0];
-    this.setState({ selectedItem });
-    this.props.onChange(Event.of(this, e.getOriginalEvent(), { selectedItem }));
-  };
+  function getItemByKey(key) {
+    return filterItems.filter((item) => item.key === key)[0];
+  }
 
-  _getItemByKey(key, items) {
-    return items.filter((item) => item.key === key)[0];
+  function onSelect(e) {
+    const selectedKey = e.getParameter('selectedOption').getAttribute('data-key');
+    const item = getItemByKey(selectedKey) || filterItems[0];
+    onChange(Event.of(null, e.getOriginalEvent(), { selectedItem: item }));
   }
 
-  private getFilterComponent = () => {
-    const { type, filterItems, placeholder, children, loading } = this.props as FilterItemInternalProps;
+  const filterComponent = useMemo(() => {
+    if (loading) {
+      return (
+        <div className={classes.loadingContainer}>
+          <BusyIndicator
+            active
+            size={BusyIndicatorType.Medium}
+            style={{ backgroundColor: 'transparent', width: '80px' }}
+          />
+        </div>
+      );
+    }
+
     switch (type) {
       case FilterType.Default:
-        return <Input placeholder={placeholder} onChange={this.onSelect} style={{ width: '100%' }} />;
+        return <Input placeholder={placeholder} onChange={onSelect} style={{ width: '100%' }} />;
       case FilterType.Select:
-        if (loading) {
-          return (
-            <BusyIndicator
-              active
-              size={BusyIndicatorType.Medium}
-              style={{ backgroundColor: 'transparent', width: '80px' }}
-            />
-          );
-        }
         return (
-          <Select onChange={this.onSelect} style={{ width: '100%' }}>
+          <Select onChange={onSelect} style={{ width: '100%' }}>
             {filterItems.map((item) => (
-              <StandardListItem type={ListItemTypes.Active} key={item.key} data-key={item.key}>
+              <Option key={item.key} data-key={item.key}>
                 {item.text}
-              </StandardListItem>
+              </Option>
             ))}
           </Select>
         );
       case FilterType.Custom:
-        if (loading) {
-          return (
-            <BusyIndicator
-              active
-              size={BusyIndicatorType.Medium}
-              style={{ backgroundColor: 'transparent', width: '80px' }}
-            />
-          );
-        }
         return (
           <div>
             {React.Children.map(children, (child) => {
               return React.cloneElement(child as React.ReactElement<any>, {
-                [this.props.changeEventName]: (event) => {
-                  this.onSelect(event);
+                [changeEventName]: (event) => {
+                  onSelect(event);
                   // @ts-ignore
-                  if (child.props.hasOwnProperty(this.props.changeEventName)) {
+                  if (child.props.hasOwnProperty(changeEventName)) {
                     // @ts-ignore
-                    child.props[this.props.changeEventName](event);
+                    child.props[changeEventName](event);
                   }
                 },
-                valueParameter: this.props.valueParamName,
+                valueParameter: valueParamName,
                 style: { width: '100%' }
               });
             })}
           </div>
         );
     }
-  };
+  }, [valueParamName, changeEventName, filterItems, loading, type, children]);
 
-  render() {
-    const { label, classes, style, tooltip, innerRef } = this.props as FilterItemInternalProps;
-    const filterItemClasses = StyleClassHelper.of(classes.filterItem);
+  const filterItemClasses = StyleClassHelper.of(classes.filterItem);
 
-    return (
-      <div ref={innerRef} className={filterItemClasses.toString()} style={style} title={tooltip}>
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'start'
-          }}
-        >
-          <Label>{label}</Label>
-          {this.getFilterComponent()}
-        </div>
+  return (
+    <div ref={ref} className={filterItemClasses.toString()} style={style} title={tooltip}>
+      <div className={classes.innerFilterItemContainer}>
+        <Label>{label}</Label>
+        {filterComponent}
       </div>
-    );
-  }
-}
+    </div>
+  );
+});
+
+FilterItem.defaultProps = {
+  placeholder: '',
+  renderText: (item) => (item && item.text) || '',
+  type: FilterType.Default,
+  filterItems: [],
+  label: '',
+  onChange: () => null,
+  loading: false
+};
+
+FilterItem.displayName = 'FilterItem';

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@ui5/webcomponents-react-base",`
`3`		`- "version": "0.4.2-rc.1",`
	`3`	`+ "version": "0.4.2-rc.2",`
`4`	`4`	`"description": "Base for ui5-webcomponents-react",`
`5`	`5`	`"main": "index.cjs.js",`
`6`	`6`	`"module": "index.esm.js",`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@ui5/webcomponents-react-cli",`
`3`	`3`	`"private": true,`
`4`		`- "version": "0.4.2-rc.1",`
	`4`	`+ "version": "0.4.2-rc.2",`
`5`	`5`	`"description": "CLI for creating React Components",`
`6`	`6`	`"repository": {`
`7`	`7`	`"type": "git",`