Skip to content

Commit

Permalink
chore(autoHideContainer): Generic implementation
Browse files Browse the repository at this point in the history 
Removed `hideContainerWhenNoResults` prop from the props passed to all
components.

`autoHideContainer` now accepts only one prop: `shouldAutoHideContainer`
instead of `hasResults`.

Closes #324
  • Loading branch information
@Jerska
Jerska committed Oct 30, 2015
1 parent 33a4280 commit a124cba
Show file tree
Hide file tree
Showing 19 changed files with 102 additions and 69 deletions.
2 changes: 1 addition & 1 deletion decorators/__tests__/autoHide-test.js → ...ators/__tests__/autoHideContainer-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ describe('autoHideContainer', () => {
});

it('should not render autoHideContainer(<TestComponent />)', () => {
var out = render({hasResults: false, hideContainerWhenNoResults: true});
var out = render({shouldAutoHideContainer: true});
expect(out).toEqualJSX(<div />);
});

Expand Down
12 changes: 3 additions & 9 deletions decorators/autoHideContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,11 @@ function autoHideContainer(ComposedComponent) {

_hideOrShowContainer(props) {
var container = ReactDOM.findDOMNode(this).parentNode;
if (props.hideContainerWhenNoResults === true && props.hasResults === false) {
container.style.display = 'none';
} else if (props.hideContainerWhenNoResults === true) {
container.style.display = '';
}
container.style.display = (props.shouldAutoHideContainer === true) ? 'none' : '';
}

render() {
if (this.props.hasResults === false &&
this.props.hideContainerWhenNoResults === true) {
if (this.props.shouldAutoHideContainer === true) {
return <div />;
}

Expand All @@ -34,8 +29,7 @@ function autoHideContainer(ComposedComponent) {
}

AutoHide.propTypes = {
hasResults: React.PropTypes.bool.isRequired,
hideContainerWhenNoResults: React.PropTypes.bool.isRequired
shouldAutoHideContainer: React.PropTypes.bool.isRequired
};

// precise displayName for ease of debugging (react dev tool, react warnings)
Expand Down
12 changes: 8 additions & 4 deletions widgets/hierarchical-menu/hierarchical-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ var bem = utils.bemHelper('ais-hierarchical-menu');
var cx = require('classnames/dedupe');
var autoHideContainer = require('../../decorators/autoHideContainer');
var headerFooter = require('../../decorators/headerFooter');
var RefinementList = autoHideContainer(headerFooter(require('../../components/RefinementList/RefinementList.js')));

var defaultTemplates = require('./defaultTemplates.js');

Expand Down Expand Up @@ -47,7 +46,12 @@ function hierarchicalMenu({
transformData
}) {
var containerNode = utils.getContainerNode(container);
var usage = 'Usage: hierarchicalMenu({container, attributes, [separator, sortBy, limit, cssClasses.{root, list, item}, templates.{header, item, footer}, transformData]})';
var usage = 'Usage: hierarchicalMenu({container, attributes, [separator, sortBy, limit, cssClasses.{root, list, item}, templates.{header, item, footer}, transformData, hideContainerWhenNoResults]})';

var RefinementList = headerFooter(require('../../components/RefinementList/RefinementList.js'));
if (hideContainerWhenNoResults === true) {
RefinementList = autoHideContainer(RefinementList);
}

if (!container || !attributes || !attributes.length) {
throw new Error(usage);
Expand All @@ -68,6 +72,7 @@ function hierarchicalMenu({
}),
render: function({results, helper, templatesConfig, createURL, state}) {
var facetValues = getFacetValues(results, hierarchicalFacetName, sortBy);
var hasNoRefinements = facetValues.length === 0;

var templateProps = utils.prepareTemplateProps({
transformData,
Expand Down Expand Up @@ -95,9 +100,8 @@ function hierarchicalMenu({
cssClasses={cssClasses}
facetNameKey="path"
facetValues={facetValues}
hasResults={facetValues.length > 0}
hideContainerWhenNoResults={hideContainerWhenNoResults}
limit={limit}
shouldAutoHideContainer={hasNoRefinements}
templateProps={templateProps}
toggleRefinement={toggleRefinement.bind(null, helper, hierarchicalFacetName)}
/>,
Expand Down
6 changes: 3 additions & 3 deletions widgets/hits-per-page-selector/__tests__/hits-per-page-selector-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,8 @@ describe('hitsPerPageSelector()', () => {
search: sinon.spy()
};
results = {
hits: []
hits: [],
nbHits: 0
};
});

Expand All @@ -65,8 +66,7 @@ describe('hitsPerPageSelector()', () => {
item: 'ais-hits-per-page-selector--item custom-item'
},
currentValue: 20,
hasResults: false,
hideContainerWhenNoResults: false,
shouldAutoHideContainer: true,
options: [
{value: 10, label: '10 results'},
{value: 20, label: '20 results'}
Expand Down
13 changes: 8 additions & 5 deletions widgets/hits-per-page-selector/hits-per-page-selector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,13 @@ function hitsPerPageSelector({
hideContainerWhenNoResults = false
}) {
var containerNode = utils.getContainerNode(container);

var usage = 'Usage: hitsPerPageSelector({container, options[, cssClasses.{root,item}, hideContainerWhenNoResults]})';

var Selector = require('../../components/Selector');
if (hideContainerWhenNoResults === true) {
Selector = autoHideContainer(Selector);
}

if (!container || !options) {
throw new Error(usage);
}
Expand All @@ -50,9 +55,8 @@ function hitsPerPageSelector({

render: function({helper, state, results}) {
let currentValue = state.hitsPerPage;
let hasResults = results.hits.length > 0;
let hasNoResults = results.nbHits === 0;
let setHitsPerPage = this.setHitsPerPage.bind(this, helper);
var Selector = autoHideContainer(require('../../components/Selector'));

cssClasses = {
root: cx(bem(null), cssClasses.root),
Expand All @@ -62,10 +66,9 @@ function hitsPerPageSelector({
<Selector
cssClasses={cssClasses}
currentValue={currentValue}
hasResults={hasResults}
hideContainerWhenNoResults={hideContainerWhenNoResults}
options={options}
setValue={setHitsPerPage}
shouldAutoHideContainer={hasNoResults}
/>,
containerNode
);
Expand Down
6 changes: 3 additions & 3 deletions widgets/index-selector/__tests__/index-selector-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,8 @@ describe('indexSelector()', () => {
search: sinon.spy()
};
results = {
hits: []
hits: [],
nbHits: 0
};
});

Expand All @@ -63,8 +64,7 @@ describe('indexSelector()', () => {
item: 'ais-index-selector--item custom-item'
},
currentValue: 'index-a',
hasResults: false,
hideContainerWhenNoResults: false,
shouldAutoHideContainer: true,
options: [
{value: 'index-a', label: 'Index A'},
{value: 'index-b', label: 'Index B'}
Expand Down
13 changes: 8 additions & 5 deletions widgets/index-selector/index-selector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,13 @@ function indexSelector({
hideContainerWhenNoResults = false
}) {
var containerNode = utils.getContainerNode(container);

var usage = 'Usage: indexSelector({container, indices[, cssClasses.{root,item}, hideContainerWhenNoResults]})';

var Selector = require('../../components/Selector');
if (hideContainerWhenNoResults === true) {
Selector = autoHideContainer(Selector);
}

if (!container || !indices) {
throw new Error(usage);
}
Expand All @@ -53,9 +58,8 @@ function indexSelector({

render: function({helper, results}) {
let currentIndex = helper.getIndex();
let hasResults = results.hits.length > 0;
let hasNoResults = results.nbHits === 0;
let setIndex = this.setIndex.bind(this, helper);
var Selector = autoHideContainer(require('../../components/Selector'));

cssClasses = {
root: cx(bem(null), cssClasses.root),
Expand All @@ -65,10 +69,9 @@ function indexSelector({
<Selector
cssClasses={cssClasses}
currentValue={currentIndex}
hasResults={hasResults}
hideContainerWhenNoResults={hideContainerWhenNoResults}
options={selectorOptions}
setValue={setIndex}
shouldAutoHideContainer={hasNoResults}
/>,
containerNode
);
Expand Down
12 changes: 8 additions & 4 deletions widgets/menu/menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ var bem = utils.bemHelper('ais-menu');
var cx = require('classnames/dedupe');
var autoHideContainer = require('../../decorators/autoHideContainer');
var headerFooter = require('../../decorators/headerFooter');
var RefinementList = autoHideContainer(headerFooter(require('../../components/RefinementList/RefinementList.js')));

var defaultTemplates = require('./defaultTemplates.js');

Expand Down Expand Up @@ -45,7 +44,12 @@ function menu({
hideContainerWhenNoResults = true
}) {
var containerNode = utils.getContainerNode(container);
var usage = 'Usage: menu({container, facetName, [sortBy, limit, cssClasses.{root,list,item}, templates.{header,item,footer}, transformData, hideWhenResults]})';
var usage = 'Usage: menu({container, facetName, [sortBy, limit, cssClasses.{root,list,item}, templates.{header,item,footer}, transformData, hideContainerWhenNoResults]})';

var RefinementList = headerFooter(require('../../components/RefinementList/RefinementList.js'));
if (hideContainerWhenNoResults === true) {
RefinementList = autoHideContainer(RefinementList);
}

if (!container || !facetName) {
throw new Error(usage);
Expand All @@ -64,6 +68,7 @@ function menu({
}),
render: function({results, helper, templatesConfig, state, createURL}) {
var facetValues = getFacetValues(results, hierarchicalFacetName, sortBy, limit);
var hasNoRefinements = facetValues.length === 0;

var templateProps = utils.prepareTemplateProps({
transformData,
Expand All @@ -89,8 +94,7 @@ function menu({
createURL={(facetValue) => createURL(state.toggleRefinement(hierarchicalFacetName, facetValue))}
cssClasses={cssClasses}
facetValues={facetValues}
hasResults={facetValues.length > 0}
hideContainerWhenNoResults={hideContainerWhenNoResults}
shouldAutoHideContainer={hasNoRefinements}
templateProps={templateProps}
toggleRefinement={toggleRefinement.bind(null, helper, hierarchicalFacetName)}
/>,
Expand Down
3 changes: 1 addition & 2 deletions widgets/pagination/__tests__/pagination-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,7 @@ describe('pagination()', () => {
return {
cssClasses: {},
currentPage: 0,
hasResults: true,
hideContainerWhenNoResults: true,
shouldAutoHideContainer: false,
labels: {first: '«', last: '»', next: '›', previous: '‹'},
nbHits: results.nbHits,
nbPages: results.nbPages,
Expand Down
11 changes: 7 additions & 4 deletions widgets/pagination/pagination.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,11 @@ function pagination({
var containerNode = utils.getContainerNode(container);
var scrollToNode = scrollTo !== false ? utils.getContainerNode(scrollTo) : false;

var Pagination = require('../../components/Pagination/Pagination.js');
if (hideContainerWhenNoResults === true) {
Pagination = autoHideContainer(Pagination);
}

if (!container) {
throw new Error('Usage: pagination({container[, cssClasses.{root,item,page,previous,next,first,last,active,disabled}, labels.{previous,next,first,last}, maxPages, showFirstLast, hideContainerWhenNoResults]})');
}
Expand All @@ -72,25 +77,23 @@ function pagination({
var currentPage = results.page;
var nbPages = results.nbPages;
var nbHits = results.nbHits;
var hasResults = nbHits > 0;
var hasNoResults = nbHits === 0;

if (maxPages !== undefined) {
nbPages = Math.min(maxPages, results.nbPages);
}

var Pagination = autoHideContainer(require('../../components/Pagination/Pagination.js'));
ReactDOM.render(
<Pagination
createURL={(page) => createURL(state.setPage(page))}
cssClasses={cssClasses}
currentPage={currentPage}
hasResults={hasResults}
hideContainerWhenNoResults={hideContainerWhenNoResults}
labels={labels}
nbHits={nbHits}
nbPages={nbPages}
padding={padding}
setCurrentPage={this.setCurrentPage.bind(this, helper)}
shouldAutoHideContainer={hasNoResults}
showFirstLast={showFirstLast}
/>,
containerNode
Expand Down
4 changes: 2 additions & 2 deletions widgets/price-ranges/__tests__/price-ranges-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ describe('priceRanges()', () => {
widget = priceRanges({container, facetName: 'aFacetname'});
results = {
hits: [1],
nbHits: 1,
getFacetStats: sinon.stub().returns({
min: 1.99,
max: 4999.98,
Expand Down Expand Up @@ -73,8 +74,7 @@ describe('priceRanges()', () => {
range: 'ais-price-ranges--range',
root: 'ais-price-ranges'
},
hasResults: true,
hideContainerWhenNoResults: true,
shouldAutoHideContainer: false,
facetValues: generateRanges(results.getFacetStats()),
labels: {
currency: '$',
Expand Down
12 changes: 8 additions & 4 deletions widgets/price-ranges/price-ranges.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,12 @@ function priceRanges({
hideContainerWhenNoResults = true
}) {
var containerNode = utils.getContainerNode(container);
var usage = 'Usage: priceRanges({container, facetName, [cssClasses, templates, labels]})';
var usage = 'Usage: priceRanges({container, facetName, [cssClasses, templates, labels, hideContainerWhenNoResults]})';

var PriceRanges = headerFooter(require('../../components/PriceRanges'));
if (hideContainerWhenNoResults === true) {
PriceRanges = autoHideContainer(PriceRanges);
}

if (container === null || facetName === null) {
throw new Error(usage);
Expand Down Expand Up @@ -100,7 +105,7 @@ function priceRanges({
},

render: function({results, helper, templatesConfig, state, createURL}) {
var PriceRanges = autoHideContainer(headerFooter(require('../../components/PriceRanges')));
var hasNoResults = results.nbHits === 0;
var facetValues;

if (results.hits.length > 0) {
Expand Down Expand Up @@ -147,10 +152,9 @@ function priceRanges({
}}
cssClasses={cssClasses}
facetValues={facetValues}
hasResults={results.hits.length > 0}
hideContainerWhenNoResults={hideContainerWhenNoResults}
labels={labels}
refine={this._refine.bind(this, helper)}
shouldAutoHideContainer={hasNoResults}
templateProps={templateProps}
/>,
containerNode
Expand Down
3 changes: 1 addition & 2 deletions widgets/range-slider/__tests__/range-slider-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,9 @@ describe('rangeSlider()', () => {
expect(ReactDOM.render.firstCall.args[0]).toEqualJSX(
<Slider
cssClasses={{body: null, root: null}}
hasResults
hideContainerWhenNoResults
onChange={() => {}}
range={{max: 4999.98, min: 1.99}}
shouldAutoHideContainer={false}
start={[-Infinity, Infinity]}
templateProps={{
templates: {footer: '', header: ''},
Expand Down
11 changes: 8 additions & 3 deletions widgets/range-slider/range-slider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,11 @@ function rangeSlider({
}) {
var containerNode = utils.getContainerNode(container);

var Slider = headerFooter(require('../../components/Slider/Slider'));
if (hideContainerWhenNoResults === true) {
Slider = autoHideContainer(Slider);
}

return {
getConfiguration: () => ({
disjunctiveFacets: [facetName]
Expand Down Expand Up @@ -88,20 +93,20 @@ function rangeSlider({
};
}

var hasNoRefinements = stats.min === null && stats.max === null;

var templateProps = utils.prepareTemplateProps({
defaultTemplates,
templatesConfig,
templates
});

var Slider = autoHideContainer(headerFooter(require('../../components/Slider/Slider')));
ReactDOM.render(
<Slider
cssClasses={cssClasses}
hasResults={stats.min !== null && stats.max !== null}
hideContainerWhenNoResults={hideContainerWhenNoResults}
onChange={this._refine.bind(this, helper, stats)}
range={{min: stats.min, max: stats.max}}
shouldAutoHideContainer={hasNoRefinements}
start={[currentRefinement.min, currentRefinement.max]}
templateProps={templateProps}
tooltips={tooltips}
Expand Down
Loading

0 comments on commit a124cba

Please sign in to comment.