Skip to content

Commit

Permalink
Merge pull request #876 from sharetribe/fix-filter-panel
Browse files Browse the repository at this point in the history
Fix multi select filters in filter panel
  • Loading branch information
lyyder authored Aug 1, 2018
2 parents 31f4dda + d1369ed commit 378e3d0
Show file tree
Hide file tree
Showing 10 changed files with 27 additions and 13 deletions.
5 changes: 4 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,12 @@ way to update this template, but currently, we follow a pattern:

---

## Upcoming version
## v1.3.0
* [change] Reusable SearchMap.
[#877](https://github.com/sharetribe/flex-template-web/pull/877)
* [fix] Fix a search filters panel bug where selecting an option in a multi select filter ends up
invoking a mobile filter callback function.
[#876](https://github.com/sharetribe/flex-template-web/pull/876)
* [change] Use seeded random for client side coordinate obfuscation
[#874](https://github.com/sharetribe/flex-template-web/pull/874)

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "app",
"version": "1.2.0",
"version": "1.3.0",
"private": true,
"license": "Apache-2.0",
"dependencies": {
Expand Down
9 changes: 7 additions & 2 deletions src/components/SearchFilters/SearchFilters.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,13 @@ const SearchFiltersComponent = props => {
id: 'SearchFilters.amenitiesLabel',
});

const initialAmenities = initialValues(urlQueryParams, amenitiesFilter.paramName);
const initialAmenities = amenitiesFilter
? initialValues(urlQueryParams, amenitiesFilter.paramName)
: null;

const initialCategory = initialValue(urlQueryParams, categoryFilter.paramName);
const initialCategory = categoryFilter
? initialValue(urlQueryParams, categoryFilter.paramName)
: null;

const handleSelectOptions = (urlParam, options) => {
const queryParams =
Expand Down Expand Up @@ -89,6 +93,7 @@ const SearchFiltersComponent = props => {

const amenitiesFilterElement = amenitiesFilter ? (
<SelectMultipleFilter
id={'SearchFilters.amenitiesFilter'}
name="amenities"
urlParam={amenitiesFilter.paramName}
label={amenitiesLabel}
Expand Down
3 changes: 2 additions & 1 deletion src/components/SearchFiltersMobile/SearchFiltersMobile.js
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ class SearchFiltersMobileComponent extends Component {
const categoryLabel = intl.formatMessage({
id: 'SearchFiltersMobile.categoryLabel',
});
const initialCategory = this.initialValue(categoryFilter.paramName);
const initialCategory = categoryFilter ? this.initialValue(categoryFilter.paramName) : null;

const categoryFilterElement = categoryFilter ? (
<SelectSingleFilterPlain
Expand All @@ -172,6 +172,7 @@ class SearchFiltersMobileComponent extends Component {

const amenitiesFilterElement = amenitiesFilter ? (
<SelectMultipleFilterPlain
id="SearchFiltersMobile.amenitiesFilter"
name="amenities"
urlParam={amenitiesFilter.paramName}
label={amenitiesLabel}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ const AmenitiesFilterComponent = withRouter(props => {

return (
<SelectMultipleFilter
id="SelectMultipleFilterExample"
name="amenities"
urlParam={URL_PARAM}
label="Amenities"
Expand Down
5 changes: 3 additions & 2 deletions src/components/SelectMultipleFilter/SelectMultipleFilter.js
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ class SelectMultipleFilter extends Component {
}

render() {
const { rootClassName, className, name, label, options, initialValues, intl } = this.props;
const { rootClassName, className, id, name, label, options, initialValues, intl } = this.props;
const classes = classNames(rootClassName || css.root, className);

const hasInitialValues = initialValues.length > 0;
Expand Down Expand Up @@ -123,7 +123,7 @@ class SelectMultipleFilter extends Component {
{buttonLabel}
</button>
<SelectMultipleFilterForm
form={`SelectMultipleFilterForm.${name}`}
id={id}
onSubmit={this.handleSubmit}
initialValues={namedInitialValues}
enableReinitialize={true}
Expand Down Expand Up @@ -153,6 +153,7 @@ SelectMultipleFilter.defaultProps = {
SelectMultipleFilter.propTypes = {
rootClassName: string,
className: string,
id: string.isRequired,
name: string.isRequired,
urlParam: string.isRequired,
label: string.isRequired,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ const AmenitiesFilterComponent = props => {

return (
<SelectMultipleFilterPlain
id="SelectMultipleFilterPlainExample"
name="amenities"
urlParam={URL_PARAM}
label="Amenities"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ class SelectMultipleFilterPlainComponent extends Component {
</button>
</div>
<SelectMultipleFilterPlainForm
form={`SelectMultipleFilterPlainForm.${id ? id : name}`}
id={id}
className={optionsContainerClass}
name={name}
options={options}
Expand All @@ -94,15 +94,14 @@ class SelectMultipleFilterPlainComponent extends Component {
SelectMultipleFilterPlainComponent.defaultProps = {
rootClassName: null,
className: null,
id: undefined,
initialValues: [],
twoColumns: false,
};

SelectMultipleFilterPlainComponent.propTypes = {
rootClassName: string,
className: string,
id: string,
id: string.isRequired,
name: string.isRequired,
urlParam: string.isRequired,
label: string.isRequired,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const SelectMultipleFilterFormComponent = props => {
const {
form,
handleSubmit,
id,
name,
onClear,
onCancel,
Expand Down Expand Up @@ -48,7 +49,7 @@ const SelectMultipleFilterFormComponent = props => {
<FieldCheckboxGroup
className={css.fieldGroup}
name={name}
id={`${name}-checkbox-group`}
id={`${id}-checkbox-group`}
options={options}
/>
<div className={css.buttonsWrapper}>
Expand All @@ -75,6 +76,7 @@ SelectMultipleFilterFormComponent.defaultProps = {
};

SelectMultipleFilterFormComponent.propTypes = {
id: string.isRequired,
name: string.isRequired,
onClear: func.isRequired,
onCancel: func.isRequired,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@ const SelectMultipleFilterPlainForm = props => {
onSubmit={() => null}
mutators={{ ...arrayMutators }}
render={formRenderProps => {
const { className, name, options, twoColumns } = formRenderProps;
const { className, id, name, options, twoColumns } = formRenderProps;
return (
<Form className={className}>
<FormSpy onChange={handleChange} subscription={{ values: true, dirty: true }} />
<FieldCheckboxGroup name={name} id={name} options={options} twoColumns={twoColumns} />
<FieldCheckboxGroup name={name} id={id} options={options} twoColumns={twoColumns} />
</Form>
);
}}
Expand All @@ -40,6 +40,7 @@ SelectMultipleFilterPlainForm.defaultProps = {

SelectMultipleFilterPlainForm.propTypes = {
className: string,
id: string.isRequired,
name: string.isRequired,
options: arrayOf(
shape({
Expand Down

0 comments on commit 378e3d0

Please sign in to comment.