diff --git a/packages/patternfly-3/patternfly-react/package.json b/packages/patternfly-3/patternfly-react/package.json index 718b586333a..6258ee61a9d 100644 --- a/packages/patternfly-3/patternfly-react/package.json +++ b/packages/patternfly-3/patternfly-react/package.json @@ -28,7 +28,7 @@ "breakjs": "^1.0.0", "classnames": "^2.2.5", "css-element-queries": "^1.0.1", - "patternfly": "^3.52.1", + "patternfly": "^3.52.4", "react-bootstrap": "^0.32.1", "react-bootstrap-switch": "^15.5.3", "react-bootstrap-typeahead": "^3.1.3", diff --git a/packages/patternfly-3/patternfly-react/src/components/Filter/Filter.test.js b/packages/patternfly-3/patternfly-react/src/components/Filter/Filter.test.js index 4339899d732..dfa78ef688d 100644 --- a/packages/patternfly-3/patternfly-react/src/components/Filter/Filter.test.js +++ b/packages/patternfly-3/patternfly-react/src/components/Filter/Filter.test.js @@ -19,7 +19,7 @@ test('Filter input renders properly', () => { expect(component.render()).toMatchSnapshot(); }); -test('Filter select renders propeurly', () => { +test('Filter select renders properly', () => { const component = mount( diff --git a/packages/patternfly-3/patternfly-react/src/components/Filter/FilterCategorySelector.js b/packages/patternfly-3/patternfly-react/src/components/Filter/FilterCategorySelector.js index 98f7ca3111e..f402ee6623f 100644 --- a/packages/patternfly-3/patternfly-react/src/components/Filter/FilterCategorySelector.js +++ b/packages/patternfly-3/patternfly-react/src/components/Filter/FilterCategorySelector.js @@ -28,15 +28,14 @@ const FilterCategorySelector = ({ let menuId = 'filterCategoryMenu'; menuId += id ? `_${id}` : ''; + const dropdownClasses = classNames('filter-pf-select-dropdown', { + 'filter-selected': title !== placeholder + }); + return (
- - {placeholder && ( - - {placeholder} - - )} + {filterCategories && filterCategories.map((item, index) => { const menuItemClasses = { diff --git a/packages/patternfly-3/patternfly-react/src/components/Filter/FilterCategoryValueSelector.js b/packages/patternfly-3/patternfly-react/src/components/Filter/FilterCategoryValueSelector.js index 4bbcec11cb0..9b47d7adbb0 100644 --- a/packages/patternfly-3/patternfly-react/src/components/Filter/FilterCategoryValueSelector.js +++ b/packages/patternfly-3/patternfly-react/src/components/Filter/FilterCategoryValueSelector.js @@ -27,14 +27,13 @@ const FilterCategoryValueSelector = ({ let menuId = 'filterCategoryMenu'; menuId += id ? `_${id}` : ''; + const dropdownClasses = classNames('filter-pf-category-select-value', 'filter-pf-select-dropdown', { + 'filter-selected': title !== placeholder + }); + return (
- - {placeholder && ( - onCategoryValueSelected()}> - {placeholder} - - )} + {categoryValues && categoryValues.map((item, index) => { const menuItemClasses = { diff --git a/packages/patternfly-3/patternfly-react/src/components/Filter/FilterValueSelector.js b/packages/patternfly-3/patternfly-react/src/components/Filter/FilterValueSelector.js index 0c079b72c85..c850811cdec 100644 --- a/packages/patternfly-3/patternfly-react/src/components/Filter/FilterValueSelector.js +++ b/packages/patternfly-3/patternfly-react/src/components/Filter/FilterValueSelector.js @@ -27,14 +27,13 @@ const FilterValueSelector = ({ let menuId = 'filterCategoryMenu'; menuId += id ? `_${id}` : ''; + const dropdownClasses = classNames('filter-pf-select-dropdown', { + 'filter-selected': title !== placeholder + }); + return (
- - {placeholder && ( - - {placeholder} - - )} + {filterValues && filterValues.map((item, index) => { const menuItemClasses = { diff --git a/packages/patternfly-3/patternfly-react/src/components/Filter/__mocks__/mockFilterExample.js b/packages/patternfly-3/patternfly-react/src/components/Filter/__mocks__/mockFilterExample.js index b892218492a..37a0215c3b1 100644 --- a/packages/patternfly-3/patternfly-react/src/components/Filter/__mocks__/mockFilterExample.js +++ b/packages/patternfly-3/patternfly-react/src/components/Filter/__mocks__/mockFilterExample.js @@ -1,5 +1,6 @@ import React from 'react'; import { Filter, FormControl, Toolbar } from '../../../index'; +import { findIndex, find, remove } from 'lodash'; export const mockFilterExampleFields = [ { @@ -125,6 +126,10 @@ export class MockFilterExample extends React.Component { filterText += value; } + if ((field.filterType === 'select' || field.filterType === 'complex-select') && this.filterExists(field.title)) { + this.enforceSingleSelect(field.title); + } + const activeFilters = [...this.state.activeFilters, { label: filterText }]; this.setState({ activeFilters }); }; @@ -147,6 +152,23 @@ export class MockFilterExample extends React.Component { } }; + filterExists = fieldTitle => { + const { activeFilters } = this.state; + const index = findIndex(activeFilters, filter => filter.label.startsWith(fieldTitle)); + return index !== -1; + }; + + getFilterValue = fieldTitle => { + const { activeFilters } = this.state; + const existingFilter = find(activeFilters, filter => filter.label.startsWith(fieldTitle)); + return existingFilter.label.substring(existingFilter.label.indexOf(': ') + 2); + }; + + enforceSingleSelect = fieldTitle => { + const { activeFilters } = this.state; + remove(activeFilters, filter => filter.label.startsWith(fieldTitle)); + }; + removeFilter = filter => { const { activeFilters } = this.state; @@ -160,12 +182,26 @@ export class MockFilterExample extends React.Component { selectFilterType = filterType => { const { currentFilterType } = this.state; if (currentFilterType !== filterType) { - this.setState(prevState => ({ - currentValue: '', + let newCurrentValue = ''; + let newFilterCategory; + // set selected value(s) in dropdown(s) if filter exists + if (filterType.filterType === 'select' || filterType.filterType === 'complex-select') { + if (this.filterExists(filterType.title)) { + const filterValue = this.getFilterValue(filterType.title); + if (filterType.filterType === 'select') { + newCurrentValue = filterValue; + } else { + const categoryValues = filterValue.split('-'); + [newFilterCategory, newCurrentValue] = categoryValues; + newFilterCategory = find(filterType.filterCategories, filterCat => filterCat.title === newFilterCategory); + } + } + } + this.setState({ currentFilterType: filterType, - filterCategory: filterType.filterType === 'complex-select' ? undefined : prevState.filterCategory, - categoryValue: filterType.filterType === 'complex-select' ? '' : prevState.categoryValue - })); + currentValue: newCurrentValue, + filterCategory: newFilterCategory + }); } }; @@ -179,6 +215,16 @@ export class MockFilterExample extends React.Component { return null; } + if (currentFilterType.filterType === 'select' || currentFilterType.filterType === 'complex-select') { + // remove selected value in dropdown(s) if filter was removed + if (currentValue !== '' && !this.filterExists(currentFilterType.title)) { + this.setState({ + currentValue: '', + filterCategory: currentFilterType.filterType === 'complex-select' ? '' : filterCategory + }); + } + } + if (currentFilterType.filterType === 'select') { return ( { const { currentFilterType } = this.state; if (currentFilterType !== filterType) { - this.setState(prevState => { - return { - currentValue: '', - currentFilterType: filterType, - filterCategory: - filterType.filterType === 'complex-select' - ? undefined - : prevState.filterCategory, - categoryValue: - filterType.filterType === 'complex-select' - ? '' - : prevState.categoryValue - }; + let newCurrentValue = ''; + let newFilterCategory; + // set selected value(s) in dropdown(s) if filter exists + if (filterType.filterType === 'select' || filterType.filterType === 'complex-select') { + if (this.filterExists(filterType.title)) { + const filterValue = this.getFilterValue(filterType.title); + if (filterType.filterType === 'select') { + newCurrentValue = filterValue; + } else { + const categoryValues = filterValue.split('-'); + [newFilterCategory, newCurrentValue] = categoryValues; + newFilterCategory = find(filterType.filterCategories, filterCat => filterCat.title === newFilterCategory); + } + } + } + this.setState({ + currentFilterType: filterType, + currentValue: newCurrentValue, + filterCategory: newFilterCategory }); } } @@ -431,6 +488,23 @@ export class MockFilterExample extends React.Component { } } + filterExists = fieldTitle => { + const { activeFilters } = this.state; + const index = findIndex(activeFilters, filter => filter.label.startsWith(fieldTitle)); + return index !== -1; + }; + + getFilterValue = fieldTitle => { + const { activeFilters } = this.state; + const existingFilter = find(activeFilters, filter => filter.label.startsWith(fieldTitle)); + return existingFilter.label.substring(existingFilter.label.indexOf(': ') + 2); + }; + + enforceSingleSelect = fieldTitle => { + const { activeFilters } = this.state; + remove(activeFilters, filter => filter.label.startsWith(fieldTitle)); + }; + removeFilter = filter => { const { activeFilters } = this.state; @@ -454,6 +528,16 @@ export class MockFilterExample extends React.Component { return null; } + if (currentFilterType.filterType === 'select' || currentFilterType.filterType === 'complex-select') { + // remove selected value in dropdown(s) if filter was removed + if (currentValue !== '' && !this.filterExists(currentFilterType.title)) { + this.setState({ + currentValue: '', + filterCategory: currentFilterType.filterType === 'complex-select' ? '' : filterCategory + }); + } + } + if (currentFilterType.filterType === 'select') { return (