Skip to content

Commit af36f59

Browse files
author
Brian Earwood
authored
Merge pull request #25 from swiftype/brianearwood/make-filters-optional
Make filter fields optional and update README. Update Body component for optional sidebar.
2 parents 43ab0cf + 1fdad71 commit af36f59

File tree

9 files changed

+179
-94
lines changed

9 files changed

+179
-94
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,8 @@ The following is a complete list of options available for configuration in [engi
5858
| `titleField` | String | optional | The field to display as the title in results. |
5959
| `urlField` | String | optional | A field with a url to use as a link in results. |
6060
| `urlFieldTemplate` | String | optional | Instead of urlField, you can provide a URL "template" here, which lets you build a URL from other fields. ex: "https://www.example.com/{{id}}". |
61-
| `sortFields` | Array[String] | required | A list of fields that will be used for sort options. |
62-
| `facets` | Array[String] | required | A list of fields that will be available as "facet" filters. Read more about facets within the [App Search documentation](https://swiftype.com/documentation/search-lib/guides/facets). |
61+
| `sortFields` | Array[String] | optional | A list of fields that will be used for sort options. |
62+
| `facets` | Array[String] | optional | A list of fields that will be available as "facet" filters. Read more about facets within the [App Search documentation](https://swiftype.com/documentation/search-lib/guides/facets). |
6363

6464
### External configuration
6565

‎src/App.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ import {
1010
import {
1111
buildFacetConfigFromConfig,
1212
buildSearchOptionsFromConfig,
13-
getConfig
13+
getConfig,
14+
getFacetFields,
15+
getSortFields
1416
} from "./config/config-helper";
1517

1618
function createDriver() {
@@ -49,7 +51,7 @@ class App extends Component {
4951
}`}
5052
>
5153
<Header />
52-
<Body />
54+
<Body hasSidebar={getFacetFields().length > 0 || getSortFields().length > 0 ? true : false} />
5355
</div>
5456
)}
5557
</SearchProvider>

‎src/components/Body.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import PropTypes from "prop-types";
12
import React from "react";
23

34
import {
@@ -11,15 +12,15 @@ import {
1112
} from "../containers";
1213
import { buildSortOptionsFromConfig } from "../config/config-helper";
1314

14-
export default function Body() {
15+
function Body({ hasSidebar = true }) {
1516
return (
1617
<div className="reference-ui-body">
1718
<ErrorBoundary>
1819
<div className="initial-state-message">
1920
Type a search above to begin.
2021
</div>
2122
<div className="search-results">
22-
<div className="sidebar">
23+
<div className={"sidebar" + (hasSidebar ? '' : ' hidden')}>
2324
<Sorting sortOptions={buildSortOptionsFromConfig()} />
2425
<Facets />
2526
</div>
@@ -42,3 +43,9 @@ export default function Body() {
4243
</div>
4344
);
4445
}
46+
47+
Body.propTypes = {
48+
hasSidebar: PropTypes.bool
49+
};
50+
51+
export default Body;

‎src/components/Body.test.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@ import React from "react";
22
import Body from "./Body";
33
import { shallow } from "enzyme";
44

5-
it("renders correctly", () => {
6-
const wrapper = shallow(<Body />);
5+
it("renders correctly with sidebar", () => {
6+
const wrapper = shallow(<Body hasSidebar={true}/>);
7+
expect(wrapper).toMatchSnapshot();
8+
});
9+
10+
it("renders correctly without the sidebar", () => {
11+
const wrapper = shallow(<Body hasSidebar={false} />);
712
expect(wrapper).toMatchSnapshot();
813
});

‎src/components/__snapshots__/Body.test.js.snap‎

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`renders correctly 1`] = `
3+
exports[`renders correctly with sidebar 1`] = `
44
<div
55
className="reference-ui-body"
66
>
@@ -57,3 +57,61 @@ exports[`renders correctly 1`] = `
5757
</Component>
5858
</div>
5959
`;
60+
61+
exports[`renders correctly without the sidebar 1`] = `
62+
<div
63+
className="reference-ui-body"
64+
>
65+
<Component>
66+
<div
67+
className="initial-state-message"
68+
>
69+
Type a search above to begin.
70+
</div>
71+
<div
72+
className="search-results"
73+
>
74+
<div
75+
className="sidebar hidden"
76+
>
77+
<Component
78+
sortOptions={
79+
Array [
80+
Object {
81+
"direction": "",
82+
"name": "Relevance",
83+
"value": "",
84+
},
85+
]
86+
}
87+
/>
88+
<Component />
89+
</div>
90+
<div
91+
className="results"
92+
>
93+
<div
94+
className="results__header"
95+
>
96+
<div
97+
className="meta"
98+
>
99+
<Component />
100+
<Component />
101+
</div>
102+
</div>
103+
<div
104+
className="results__body"
105+
>
106+
<Component />
107+
</div>
108+
<div
109+
className="results__footer"
110+
>
111+
<Component />
112+
</div>
113+
</div>
114+
</div>
115+
</Component>
116+
</div>
117+
`;

‎src/config/config-helper.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,14 @@ export function getUrlField() {
4646
return getConfig().urlField;
4747
}
4848

49+
export function getFacetFields() {
50+
return getConfig().facets || [];
51+
}
52+
53+
export function getSortFields() {
54+
return getConfig().sortFields || [];
55+
}
56+
4957
export function getUrlFieldTemplate() {
5058
return getConfig().urlFieldTemplate;
5159
}

‎src/search-lib/SearchDriver.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -297,12 +297,18 @@ export default class SearchDriver {
297297
current,
298298
size: resultsPerPage
299299
},
300-
facets: removeConditionalFacets(this.facetConfig, filters),
301300
filters: {
302301
all: formatORFiltersAsAND(convertRangeFiltersToDateString(filters))
303302
}
304303
};
305304

305+
const facets = removeConditionalFacets(this.facetConfig, filters);
306+
const numberOfFacets = Object.keys(facets).length;
307+
308+
if (numberOfFacets > 0) {
309+
searchOptions.facets = facets;
310+
}
311+
306312
if (sortField && sortDirection) {
307313
searchOptions.sort = {
308314
[sortField]: sortDirection

‎src/styles/styles.css‎

Lines changed: 77 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -393,7 +393,10 @@ a {
393393
padding: 0 24px; }
394394

395395
.sidebar {
396-
flex: 0 1 30%; }
396+
flex: 0 1 30%;
397+
padding-right: 12px; }
398+
.sidebar.hidden {
399+
display: none; }
397400

398401
.sorting {
399402
padding-top: 32px; }
@@ -476,77 +479,79 @@ a {
476479
width: 100%;
477480
justify-content: space-between;
478481
align-items: center; }
479-
.active-search .results {
480-
padding: 32px 0 0 32px;
481-
border-left: 1px solid #eeeeee; }
482-
483-
.result {
484-
border-top: 1px solid #eeeeee;
485-
padding: 24px 0; }
486-
.result + .result {
487-
margin-top: 20px; }
488-
.result em {
489-
position: relative;
490-
color: #3a56e4;
491-
font-weight: 900;
492-
font-style: inherit; }
493-
.result em:after {
494-
content: "";
495-
position: absolute;
496-
top: -3px;
497-
left: -3px;
498-
width: calc(100% + 6px);
499-
height: calc(100% + 6px);
500-
background: rgba(37, 139, 248, 0.08);
501-
pointer-events: none; }
502-
.result__header {
503-
display: flex;
504-
justify-content: space-between;
505-
align-items: center; }
506-
.result__title {
507-
font-size: 1.8em;
508-
font-weight: 700; }
509-
.result__key {
510-
font-family: monospace;
511-
font-weight: 400;
512-
font-size: 14px;
513-
flex: 0 1 50%;
514-
color: #777777; }
515-
.result__key:before {
516-
content: '"'; }
517-
.result__key:after {
518-
content: '": '; }
519-
.result__value {
520-
font-weight: 400;
521-
font-size: 14px; }
522-
.result__version {
523-
font-size: 12px;
524-
display: inline;
525-
vertical-align: bottom; }
526-
.result__lisence {
527-
font-size: 12px;
528-
color: #999999;
529-
display: inline-block;
530-
border: 1px solid #ccc;
531-
border-radius: 3px;
532-
line-height: 1;
533-
padding: 4px 4px 3px 4px; }
534-
.result__body {
535-
margin-top: 1rem;
536-
line-height: 1.5; }
537-
.result__body p {
538-
margin: 0; }
539-
.result__details {
540-
max-height: 300px;
541-
position: relative;
542-
overflow: hidden;
543-
overflow-y: auto;
544-
padding: 24px;
545-
background-color: #f9f9f9; }
546-
.result__footer {
547-
padding: 0 2rem;
548-
margin-top: 1rem;
549-
line-height: 1; }
482+
483+
.result em {
484+
position: relative;
485+
color: #3a56e4;
486+
font-weight: 900;
487+
font-style: inherit; }
488+
.result em:after {
489+
content: "";
490+
position: absolute;
491+
top: -3px;
492+
left: -3px;
493+
width: calc(100% + 6px);
494+
height: calc(100% + 6px);
495+
background: rgba(37, 139, 248, 0.08);
496+
pointer-events: none; }
497+
498+
.result__header {
499+
display: flex;
500+
justify-content: space-between;
501+
align-items: center; }
502+
503+
.result__title {
504+
font-size: 1.8em;
505+
font-weight: 700;
506+
margin-top: 24px; }
507+
508+
.result__key {
509+
font-family: monospace;
510+
font-weight: 400;
511+
font-size: 14px;
512+
flex: 0 1 50%;
513+
color: #777777; }
514+
.result__key:before {
515+
content: '"'; }
516+
.result__key:after {
517+
content: '": '; }
518+
519+
.result__value {
520+
font-weight: 400;
521+
font-size: 14px; }
522+
523+
.result__version {
524+
font-size: 12px;
525+
display: inline;
526+
vertical-align: bottom; }
527+
528+
.result__lisence {
529+
font-size: 12px;
530+
color: #999999;
531+
display: inline-block;
532+
border: 1px solid #ccc;
533+
border-radius: 3px;
534+
line-height: 1;
535+
padding: 4px 4px 3px 4px; }
536+
537+
.result__body {
538+
margin-top: 1rem;
539+
line-height: 1.5; }
540+
.result__body p {
541+
margin: 0; }
542+
543+
.result__details {
544+
max-height: 300px;
545+
position: relative;
546+
overflow: hidden;
547+
overflow-y: auto;
548+
padding: 24px;
549+
background-color: #f9f9f9; }
550+
551+
.result__footer {
552+
padding: 0 2rem;
553+
margin-top: 1rem;
554+
line-height: 1; }
550555

551556
.rc-pagination {
552557
display: flex;

‎src/styles/styles.scss‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,11 @@ a {
181181

182182
.sidebar {
183183
flex: 0 1 30%;
184+
padding-right: $sizeM;
185+
186+
&.hidden {
187+
display: none;
188+
}
184189
}
185190

186191
.sorting {
@@ -289,21 +294,9 @@ a {
289294
justify-content: space-between;
290295
align-items: center;
291296
}
292-
293-
.active-search & {
294-
padding: $sizeXL 0 0 $sizeXL;
295-
border-left: 1px solid $resultsLeftBorderColor;
296-
}
297297
}
298298

299299
.result {
300-
border-top: 1px solid $resultBorderColor;
301-
padding: $sizeL 0;
302-
303-
& + & {
304-
margin-top: 20px;
305-
}
306-
307300
em {
308301
position: relative;
309302
color: $textMatchColor;
@@ -331,6 +324,7 @@ a {
331324
&__title {
332325
font-size: 1.8em;
333326
font-weight: $fontWeightBold;
327+
margin-top: $sizeL;
334328
}
335329

336330
&__key {

0 commit comments

Comments
 (0)