From 3e1d440f1900b9a55e7a928492c8c7b9b00536d2 Mon Sep 17 00:00:00 2001 From: Jeff Phillips Date: Thu, 29 Nov 2018 21:02:35 -0500 Subject: [PATCH] fix(extensions): Create local helpers to lessen dependencies (#985) Pulling in the patternfly-react helpers bring in more dependencies than are needed. This PR duplicates some of the small utility helpers in order to reduce the footprint of the extensions package. --- .../patternfly-react-extensions/package.json | 1 + .../src/common/helpers.js | 44 +++++++++++++++++++ .../CatalogTileViewCategory.js | 3 +- .../FilterSidePanelCategory.js | 3 +- .../FilterSidePanelCategoryItem.js | 11 ++--- .../components/TableGrid/TableGrid.test.js | 3 +- .../TableGrid/TableGridColumnHeader.js | 3 +- .../src/components/TableGrid/TableGridHead.js | 3 +- .../src/components/TableGrid/TableGridRow.js | 3 +- 9 files changed, 63 insertions(+), 11 deletions(-) create mode 100644 packages/patternfly-3/patternfly-react-extensions/src/common/helpers.js diff --git a/packages/patternfly-3/patternfly-react-extensions/package.json b/packages/patternfly-3/patternfly-react-extensions/package.json index 32b5755ac7b..51f61316613 100644 --- a/packages/patternfly-3/patternfly-react-extensions/package.json +++ b/packages/patternfly-3/patternfly-react-extensions/package.json @@ -43,6 +43,7 @@ "css-element-queries": "^1.0.1", "patternfly": "^3.58.0", "patternfly-react": "^2.25.1", + "react-bootstrap": "^0.32.1", "react-virtualized": "9.x" }, "peerDependencies": { diff --git a/packages/patternfly-3/patternfly-react-extensions/src/common/helpers.js b/packages/patternfly-3/patternfly-react-extensions/src/common/helpers.js new file mode 100644 index 00000000000..346136f1fb7 --- /dev/null +++ b/packages/patternfly-3/patternfly-react-extensions/src/common/helpers.js @@ -0,0 +1,44 @@ +import React from 'react'; + +/** Implementation of the debounce function */ +export const debounce = (func, wait) => { + let timeout; + function innerFunc(...args) { + const context = this; + clearTimeout(timeout); + timeout = setTimeout(() => func.apply(context, args), wait); + } + return innerFunc; +}; + +/** Returns a subset of the given object including only the given keys, with values optionally replaced by a fn. */ +export const selectKeys = (obj, keys, fn = val => val) => + keys.reduce((values, key) => ({ ...values, [key]: fn(obj[key]) }), {}); + +/** Returns a subset of the given object with a validator function applied to its keys. */ +export const filterKeys = (obj, validator) => selectKeys(obj, Object.keys(obj).filter(validator)); + +/** Returns a subset of the given object with the given keys left out. */ +export const excludeKeys = (obj, keys) => filterKeys(obj, key => !keys.includes(key)); + +/** Returns the given React children prop as a regular array of React nodes. */ +export const childrenToArray = children => + children && React.Children.count(children) > 0 && React.Children.toArray(children); + +/** Returns true if the component has the desired displayName value */ +export const hasDisplayName = (component, displayName) => + component && component.type && component.type.displayName === displayName; + +export const noop = Function.prototype; + +export const helpers = { + debounce, + selectKeys, + filterKeys, + excludeKeys, + childrenToArray, + hasDisplayName, + noop +}; + +export default helpers; diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileViewCategory.js b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileViewCategory.js index cd467e49e37..b60d59eae03 100644 --- a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileViewCategory.js +++ b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileViewCategory.js @@ -1,9 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { Button, helpers } from 'patternfly-react'; +import { Button } from 'patternfly-react'; import { ResizeSensor } from 'css-element-queries'; import Break from 'breakjs'; +import { helpers } from '../../common/helpers'; import CatalogTile from '../CatalogTile/CatalogTile'; const layout = diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/FilterSidePanel/FilterSidePanelCategory.js b/packages/patternfly-3/patternfly-react-extensions/src/components/FilterSidePanel/FilterSidePanelCategory.js index 3ccb7813ad1..e3810cfb9f2 100644 --- a/packages/patternfly-3/patternfly-react-extensions/src/components/FilterSidePanel/FilterSidePanelCategory.js +++ b/packages/patternfly-3/patternfly-react-extensions/src/components/FilterSidePanel/FilterSidePanelCategory.js @@ -1,7 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { Button, helpers } from 'patternfly-react'; +import { Button } from 'patternfly-react'; +import { helpers } from '../../common/helpers'; const FilterSidePanelCategory = ({ children, diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/FilterSidePanel/FilterSidePanelCategoryItem.js b/packages/patternfly-3/patternfly-react-extensions/src/components/FilterSidePanel/FilterSidePanelCategoryItem.js index b80e57310a5..b57b0f6eed9 100644 --- a/packages/patternfly-3/patternfly-react-extensions/src/components/FilterSidePanel/FilterSidePanelCategoryItem.js +++ b/packages/patternfly-3/patternfly-react-extensions/src/components/FilterSidePanel/FilterSidePanelCategoryItem.js @@ -1,18 +1,19 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { helpers, Form } from 'patternfly-react'; +import { Checkbox } from 'react-bootstrap'; +import { helpers } from '../../common/helpers'; const FilterSidePanelCategoryItem = ({ children, className, icon, count, ...props }) => { const classes = classNames('filter-panel-pf-category-item', className); return (
- + {icon && {icon}} {children} {Number.isInteger(count) && {`(${count})`}} - +
); }; @@ -27,7 +28,7 @@ FilterSidePanelCategoryItem.propTypes = { /** Optional count of the items matching the filter */ count: PropTypes.number, /** Properties passed on to the Checkbox */ - ...helpers.excludeKeys(Form.Checkbox.propTypes, ['className', 'children']) + ...helpers.excludeKeys(Checkbox.propTypes, ['className', 'children']) }; FilterSidePanelCategoryItem.defaultProps = { @@ -35,7 +36,7 @@ FilterSidePanelCategoryItem.defaultProps = { className: '', icon: null, count: null, - ...helpers.excludeKeys(Form.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 index 100a36080a3..8fc0c7d520e 100644 --- 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,7 @@ import React from 'react'; import { mount } from 'enzyme'; -import { Grid, Icon, helpers } from 'patternfly-react'; +import { Grid, Icon } from 'patternfly-react'; +import { helpers } from '../../common/helpers'; import { TableGrid } from './index'; diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGridColumnHeader.js b/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGridColumnHeader.js index 9e9065cee63..8095795793a 100644 --- a/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGridColumnHeader.js +++ b/packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/TableGridColumnHeader.js @@ -1,7 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { Button, Grid, Icon, helpers } from 'patternfly-react'; +import { Button, Grid, Icon } from 'patternfly-react'; +import { helpers } from '../../common/helpers'; /** * TableGridColumnHeader Component for PatternFly 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 index 3a867c31554..0741c9a2f2a 100644 --- 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,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { Button, Grid, Icon, OverlayTrigger, Tooltip, helpers } from 'patternfly-react'; +import { Button, Grid, Icon, OverlayTrigger, Tooltip } from 'patternfly-react'; +import { helpers } from '../../common/helpers'; /** * TableGridHead Component for PatternFly 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 index 29c9e3f8988..e0de1de1721 100644 --- 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,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { Grid, helpers } from 'patternfly-react'; +import { Grid } from 'patternfly-react'; +import { helpers } from '../../common/helpers'; /** * TableGridRow Component for PatternFly