Skip to content

Commit

Permalink
fix(CatalogTileView): Behave correctly when CatalogTile components ar…
Browse files Browse the repository at this point in the history 
…e wrapped. (#835)

fixes #759
  • Loading branch information
@jeff-phillips-18 @dtaylor113
jeff-phillips-18 authored and dtaylor113 committed Oct 29, 2018
1 parent d1a5526 commit 5527ae3
Show file tree
Hide file tree
Showing 4 changed files with 289 additions and 4 deletions.
51 changes: 51 additions & 0 deletions ...nfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileView.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,3 +112,54 @@ test('CatalogTile renders no tiles state properly', () => {
expect(component.render()).toMatchSnapshot();
component.unmount();
});

test('CatalogTile renders wrapped tiles properly', () => {
const component = mount(
<CatalogTileView id="test-catalog-tile-view">
<CatalogTileViewCategory id="category-1" title="Category 1" totalItems={4} viewAll={false}>
<span>
<CatalogTile
featured
iconImg={pfBrand}
badges={[<CatalogTile.Badge type="fa" name="cog" title="Certified" id="certified" />]}
title="Patternfly"
vendor={
<span>
PatternFly is a <a href="redhat.com">Red Hat</a> sponsored project.
</span>
}
description="A community of designers and developers collaborating to build a UI framework for enterprise web applications."
/>
</span>
<div>
<a href="#">
<CatalogTile
iconImg={github}
badges={[
<CatalogTileBadge type="fa" name="cog" title="Certified" id="certified" />,
<CatalogTileBadge type="pf" name="ok" title="USDA Approved" id="approved" />
]}
title="GitHub Desktop"
vendor="provided by GitHub"
description="Simple collaboration from your desktop."
/>
</a>
</div>
<CatalogTile
featured
iconImg={pfBrand}
badges={[<CatalogTile.Badge type="fa" name="cog" title="Certified" id="certified" />]}
title="Patternfly"
vendor={
<span>
PatternFly is a <a href="redhat.com">Red Hat</a> sponsored project.
</span>
}
description="A community of designers and developers collaborating to build a UI framework for enterprise web applications."
/>
</CatalogTileViewCategory>
</CatalogTileView>
);
expect(component.render()).toMatchSnapshot();
component.unmount();
});
19 changes: 16 additions & 3 deletions ...y-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileViewCategory.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Button, debounce, filterChildren, hasDisplayName, noop } from 'patternfly-react';
import { Button, debounce, childrenToArray, hasDisplayName, noop } from 'patternfly-react';
import { ResizeSensor } from 'css-element-queries';
import Break from 'breakjs';
import CatalogTile from '../CatalogTile/CatalogTile';
Expand Down Expand Up @@ -59,12 +59,25 @@ class CatalogTileViewCategory extends React.Component {
const { numShown, rightSpacerWidth } = this.state;
const classes = classNames('catalog-tile-view-pf-category', className);

const tileValidator = child => hasDisplayName(child, CatalogTile.displayName);
const filterCatalogTiles = childrenArray =>
childrenArray &&
childrenArray.filter(
child =>
tileValidator(child) ||
(child.props && filterCatalogTiles(childrenToArray(child.props.children), tileValidator))
);

const allChildren = childrenToArray(children);

/* Find the children that are tiles (or are wrapped tiles) and those that are not */
let catalogTiles = filterCatalogTiles(allChildren);
const nonTiles = allChildren.filter(child => !catalogTiles.includes(child));

// Only show the tiles that fit in a single row, unless viewAll is specified
let catalogTiles = filterChildren(children, child => hasDisplayName(child, CatalogTile.displayName));
if (!viewAll && numShown && numShown < totalItems) {
catalogTiles = catalogTiles.slice(0, numShown);
}
const nonTiles = filterChildren(children, child => !hasDisplayName(child, CatalogTile.displayName));

return (
<div className={classes} {...props} ref={this.handleRef}>
Expand Down
2 changes: 1 addition & 1 deletion ...y-react-extensions/src/components/CatalogTileView/__mocks__/mockCatalogTileViewExample.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ class MockCatalogTileViewExample extends React.Component {
<CatalogTileView.Category
key={category.id}
title={category.category}
totalItems={!emptyState && category.items && category.items.length}
totalItems={emptyState ? 0 : category.items && category.items.length}
viewAll={showAll === category.id}
onViewAll={() => this.onViewAll(category.id)}
>
Expand Down
221 changes: 221 additions & 0 deletions ...eact-extensions/src/components/CatalogTileView/__snapshots__/CatalogTileView.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -503,3 +503,224 @@ exports[`CatalogTile renders properly 1`] = `
</div>
</div>
`;

exports[`CatalogTile renders wrapped tiles properly 1`] = `
<div
class="catalog-tile-view-pf"
id="test-catalog-tile-view"
>
<div
class="catalog-tile-view-pf-category"
id="category-1"
>
<div
class="catalog-tile-view-pf-category-header"
>
<span
class="catalog-tile-view-pf-category-header-title"
>
Category 1
</span>
<span
class="pull-right"
>
<button
class="catalog-tile-view-pf-category-view-all pull-right btn btn-link"
style="margin-right: 0px;"
type="button"
>
View All (4)
</button>
</span>
</div>
<div
class="catalog-tile-view-pf-category-body"
>
<span>
<div
class="catalog-tile-pf featured"
>
<div
class="catalog-tile-pf-header"
>
<img
alt=""
class="catalog-tile-pf-icon"
src="<PatternFly Brand Image here>"
/>
<div
class="catalog-tile-pf-badge-container"
>
<span>
<span
class="catalog-tile-pf-badge"
name="cog"
type="fa"
>
<span
class="sr-only"
>
Certified
</span>
</span>
</span>
</div>
</div>
<div
class="catalog-tile-pf-body"
>
<div
class="catalog-tile-pf-title"
>
Patternfly
</div>
<div
class="catalog-tile-pf-subtitle"
>
<span>
PatternFly is a
<a
href="redhat.com"
>
Red Hat
</a>
sponsored project.
</span>
</div>
<div
class="catalog-tile-pf-description"
>
A community of designers and developers collaborating to build a UI framework for enterprise web applications.
</div>
</div>
</div>
</span>
<div>
<a
href="#"
>
<div
class="catalog-tile-pf"
>
<div
class="catalog-tile-pf-header"
>
<img
alt=""
class="catalog-tile-pf-icon"
src="<GitHub Brand Image here>"
/>
<div
class="catalog-tile-pf-badge-container"
>
<span>
<span
class="catalog-tile-pf-badge"
name="cog"
type="fa"
>
<span
class="sr-only"
>
Certified
</span>
</span>
</span>
<span>
<span
class="catalog-tile-pf-badge"
name="ok"
type="pf"
>
<span
class="sr-only"
>
USDA Approved
</span>
</span>
</span>
</div>
</div>
<div
class="catalog-tile-pf-body"
>
<div
class="catalog-tile-pf-title"
>
GitHub Desktop
</div>
<div
class="catalog-tile-pf-subtitle"
>
provided by GitHub
</div>
<div
class="catalog-tile-pf-description"
>
Simple collaboration from your desktop.
</div>
</div>
</div>
</a>
</div>
<div
class="catalog-tile-pf featured"
>
<div
class="catalog-tile-pf-header"
>
<img
alt=""
class="catalog-tile-pf-icon"
src="<PatternFly Brand Image here>"
/>
<div
class="catalog-tile-pf-badge-container"
>
<span>
<span
class="catalog-tile-pf-badge"
name="cog"
type="fa"
>
<span
class="sr-only"
>
Certified
</span>
</span>
</span>
</div>
</div>
<div
class="catalog-tile-pf-body"
>
<div
class="catalog-tile-pf-title"
>
Patternfly
</div>
<div
class="catalog-tile-pf-subtitle"
>
<span>
PatternFly is a
<a
href="redhat.com"
>
Red Hat
</a>
sponsored project.
</span>
</div>
<div
class="catalog-tile-pf-description"
>
A community of designers and developers collaborating to build a UI framework for enterprise web applications.
</div>
</div>
</div>
</div>
</div>
</div>
`;

0 comments on commit 5527ae3

Please sign in to comment.