feat(Extensions): Import patternfly-react components individually (#853)

Pull in patternfly-react components individually in patternfly-react-extensions so that tree shaking will not pull in unused patternfly-react components.
patternfly · Oct 29, 2018 · bfe7179 · bfe7179
1 parent 29cdbc2
commit bfe7179
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 29 deletions.
diff --git a/packages/patternfly-3/.babelrc.js b/packages/patternfly-3/.babelrc.js
@@ -17,6 +17,14 @@ module.exports = {
             const moduleDir = !modules ? 'es' : 'lib';
             return `react-bootstrap/${moduleDir}/${importName}`;
           }
+        },
+        'patternfly-react': {
+          preventFullImport: true,
+          transform: importName => {
+            const moduleDir = !modules ? 'esm' : 'js';
+            const srcDir = importName === 'helpers' ? 'common' : 'components';
+            return `patternfly-react/dist/${moduleDir}/${srcDir}/${importName}`;
+          }
         }
       }
     ]

diff --git a/...y-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileViewCategory.js b/...y-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileViewCategory.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Button, debounce, childrenToArray, hasDisplayName, noop } from 'patternfly-react';
+import { Button, helpers } from 'patternfly-react';
 import { ResizeSensor } from 'css-element-queries';
 import Break from 'breakjs';
 import CatalogTile from '../CatalogTile/CatalogTile';
@@ -51,24 +51,24 @@ class CatalogTileViewCategory extends React.Component {
     this.computeNumShown();
 
     // Watch for resizes and recompute the number shown when it does
-    this._resizeSensors.push(new ResizeSensor([this.categoryContainer], debounce(this.computeNumShown, 100)));
+    this._resizeSensors.push(new ResizeSensor([this.categoryContainer], helpers.debounce(this.computeNumShown, 100)));
   };
 
   render() {
     const { children, className, title, totalItems, viewAllText, viewAll, onViewAll, ...props } = this.props;
     const { numShown, rightSpacerWidth } = this.state;
     const classes = classNames('catalog-tile-view-pf-category', className);
 
-    const tileValidator = child => hasDisplayName(child, CatalogTile.displayName);
+    const tileValidator = child => helpers.hasDisplayName(child, CatalogTile.displayName);
     const filterCatalogTiles = childrenArray =>
       childrenArray &&
       childrenArray.filter(
         child =>
           tileValidator(child) ||
-          (child.props && filterCatalogTiles(childrenToArray(child.props.children), tileValidator))
+          (child.props && filterCatalogTiles(helpers.childrenToArray(child.props.children), tileValidator))
       );
 
-    const allChildren = childrenToArray(children);
+    const allChildren = helpers.childrenToArray(children);
 
     /* Find the children that are tiles (or are wrapped tiles) and those that are not */
     let catalogTiles = filterCatalogTiles(allChildren);
@@ -130,7 +130,7 @@ CatalogTileViewCategory.defaultProps = {
   totalItems: 0,
   viewAll: true,
   viewAllText: 'View All',
-  onViewAll: noop
+  onViewAll: helpers.noop
 };
 
 export default CatalogTileViewCategory;
diff --git a/...y-3/patternfly-react-extensions/src/components/FilterSidePanel/FilterSidePanelCategory.js b/...y-3/patternfly-react-extensions/src/components/FilterSidePanel/FilterSidePanelCategory.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Button, noop, childrenToArray } from 'patternfly-react';
+import { Button, helpers } from 'patternfly-react';
 
 const FilterSidePanelCategory = ({
   children,
@@ -16,7 +16,7 @@ const FilterSidePanelCategory = ({
   ...props
 }) => {
   const classes = classNames('filter-panel-pf-category', className);
-  const childrenArray = childrenToArray(children);
+  const childrenArray = helpers.childrenToArray(children);
   const itemCount = childrenArray.length;
   const hiddenCount = itemCount - maxShowCount;
   let shownChildren;
@@ -81,7 +81,7 @@ FilterSidePanelCategory.defaultProps = {
   maxShowCount: 5,
   leeway: 2,
   showAll: false,
-  onShowAllToggle: noop,
+  onShowAllToggle: helpers.noop,
   showText: null,
   hideText: null
 };

diff --git a/...patternfly-react-extensions/src/components/FilterSidePanel/FilterSidePanelCategoryItem.js b/...patternfly-react-extensions/src/components/FilterSidePanel/FilterSidePanelCategoryItem.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Checkbox, excludeKeys } from 'patternfly-react';
+import { Checkbox, helpers } from 'patternfly-react';
 
 const FilterSidePanelCategoryItem = ({ children, className, icon, count, ...props }) => {
   const classes = classNames('filter-panel-pf-category-item', className);
@@ -27,15 +27,15 @@ FilterSidePanelCategoryItem.propTypes = {
   /** Optional count of the items matching the filter */
   count: PropTypes.number,
   /** Properties passed on to the Checkbox */
-  ...excludeKeys(Checkbox.propTypes, ['className', 'children'])
+  ...helpers.excludeKeys(Checkbox.propTypes, ['className', 'children'])
 };
 
 FilterSidePanelCategoryItem.defaultProps = {
   children: null,
   className: '',
   icon: null,
   count: null,
-  ...excludeKeys(Checkbox.defaultProps, ['className', 'children'])
+  ...helpers.excludeKeys(Checkbox.defaultProps, ['className', 'children'])
 };
 
 export default FilterSidePanelCategoryItem;
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGrid.test.js b/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGrid.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { Grid, Icon, noop } from 'patternfly-react';
+import { Grid, Icon, helpers } from 'patternfly-react';
 
 import { TableGrid } from './index';
 
@@ -12,8 +12,8 @@ test('TableGrid renders properly', () => {
           Column 1
         </TableGrid.ColumnHeader>
         <TableGrid.ColumnHeader>Column 2</TableGrid.ColumnHeader>
-        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={noop} />
-        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={noop}>
+        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={helpers.noop} />
+        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={helpers.noop}>
           <div>
             <span>test 1</span>
             <span>and two</span>
@@ -63,8 +63,8 @@ test('Bordered TableGrid renders properly', () => {
           Column 1
         </TableGrid.ColumnHeader>
         <TableGrid.ColumnHeader>Column 2</TableGrid.ColumnHeader>
-        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={noop} />
-        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={noop}>
+        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={helpers.noop} />
+        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={helpers.noop}>
           <div>
             <span>test 1</span>
             <span>and two</span>
@@ -114,8 +114,8 @@ test('TableGrid with Row select renders properly', () => {
           Column 1
         </TableGrid.ColumnHeader>
         <TableGrid.ColumnHeader>Column 2</TableGrid.ColumnHeader>
-        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={noop} />
-        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={noop}>
+        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={helpers.noop} />
+        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={helpers.noop}>
           <div>
             <span>test 1</span>
             <span>and two</span>
@@ -179,8 +179,8 @@ test('TableGrid with Cell select renders properly', () => {
           Column 1
         </TableGrid.ColumnHeader>
         <TableGrid.ColumnHeader>Column 2</TableGrid.ColumnHeader>
-        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={noop} />
-        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={noop}>
+        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={helpers.noop} />
+        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={helpers.noop}>
           <div>
             <span>test 1</span>
             <span>and two</span>
@@ -230,8 +230,8 @@ test('TableGrid with Checkbox select renders properly', () => {
           Column 1
         </TableGrid.ColumnHeader>
         <TableGrid.ColumnHeader>Column 2</TableGrid.ColumnHeader>
-        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={noop} />
-        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={noop}>
+        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={helpers.noop} />
+        <TableGrid.ColumnHeader sortable={false} isSorted={false} isAscending={false} onSortToggle={helpers.noop}>
           <div>
             <span>test 1</span>
             <span>and two</span>

diff --git a/...atternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGridColumnHeader.js b/...atternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGridColumnHeader.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Button, Grid, Icon, noop } from 'patternfly-react';
+import { Button, Grid, Icon, helpers } from 'patternfly-react';
 
 /**
  * TableGridColumnHeader Component for PatternFly
@@ -55,7 +55,7 @@ TableGridColumnHeader.defaultProps = {
   sortable: false,
   isSorted: false,
   isAscending: true,
-  onSortToggle: noop,
+  onSortToggle: helpers.noop,
   ...Grid.Col.defaultProps
 };
 

diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGridHead.js b/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGridHead.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Button, Grid, Icon, OverlayTrigger, Tooltip, noop } from 'patternfly-react';
+import { Button, Grid, Icon, OverlayTrigger, Tooltip, helpers } from 'patternfly-react';
 
 /**
  * TableGridHead Component for PatternFly
@@ -104,7 +104,7 @@ TableGridHead.defaultProps = {
   showCheckbox: false,
   allSelected: false,
   partialSelected: false,
-  onToggleSelection: noop,
+  onToggleSelection: helpers.noop,
   toggleTip: null,
   allSelectedAriaLabel: 'Click to deselect all',
   partialSelectedAriaLabel: 'Click to deselect all',

diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGridRow.js b/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGridRow.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Grid, noop } from 'patternfly-react';
+import { Grid, helpers } from 'patternfly-react';
 
 /**
  * TableGridRow Component for PatternFly
@@ -36,7 +36,7 @@ TableGridRow.defaultProps = {
   children: null,
   className: '',
   selected: false,
-  onToggleSelection: noop,
+  onToggleSelection: helpers.noop,
   checkboxAriaLabel: 'Select'
 };