@bento-core/facet-filter 1.0.1-ccdihub.30 → 1.0.1-ccdihub.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/components/facet/FacetStyle.js +11 -9
  2. package/dist/components/facet/SearchFacetView.js +54 -6
  3. package/dist/components/inputs/FilterItemStyle.js +0 -11
  4. package/dist/components/inputs/SearchFilterItems.js +2 -15
  5. package/dist/components/section/FacetSectionView.js +2 -1
  6. package/package.json +1 -1
  7. package/src/components/facet/FacetStyle.js +11 -9
  8. package/src/components/facet/SearchFacetView.js +150 -90
  9. package/src/components/inputs/FilterItemStyle.js +0 -11
  10. package/src/components/inputs/SearchFilterItems.js +0 -14
  11. package/src/components/section/FacetSectionView.js +1 -1
package/dist/components/facet/FacetStyle.js CHANGED
@@ -89,9 +89,9 @@ var _default = () => ({
89
89
  fontSize: '11px',
90
90
  fontFamily: 'Nunito',
91
91
  width: 'calc(100% - 26px)',
92
- height: '24px',
92
+ height: '30px',
93
93
  marginTop: '12px',
94
- borderRadius: '8px',
94
+ borderRadius: '5px',
95
95
  background: "url(".concat(_Search_Icon.default, ") right 5px center no-repeat"),
96
96
  marginLeft: '6px',
97
97
  border: '1px solid',
@@ -101,22 +101,24 @@ var _default = () => ({
101
101
  fontSize: '11px',
102
102
  fontFamily: 'Nunito',
103
103
  width: 'calc(100% - 26px)',
104
- height: '24px',
104
+ height: '30px',
105
105
  marginTop: '12px',
106
- borderRadius: '8px',
106
+ borderRadius: '5px',
107
107
  marginLeft: '6px',
108
108
  border: '1px solid',
109
109
  padding: '5px'
110
110
  },
111
111
  expandedDisplayButton: {
112
- background: '#4D889E',
112
+ backgroundColor: '#4D889E !important',
113
113
  color: 'white',
114
- width: '222px',
114
+ width: 'calc(100% - 26px)',
115
115
  height: '30px',
116
- marginTop: '5px',
117
116
  marginBottom: '5px',
118
- borderRadius: '8px',
119
- fontSize: '11px'
117
+ marginLeft: '6px',
118
+ borderRadius: '5px',
119
+ fontSize: '12px',
120
+ fontWeight: '600',
121
+ top: '8px'
120
122
  },
121
123
  clearTextButton: {
122
124
  padding: '0px',
package/dist/components/facet/SearchFacetView.js CHANGED
@@ -17,6 +17,8 @@ var _FilterItems = _interopRequireDefault(require("../inputs/FilterItems"));
17
17
  var _SearchFilterItems = _interopRequireDefault(require("../inputs/SearchFilterItems"));
18
18
  var _Sort = require("../../utils/Sort");
19
19
  var _clearIcon = _interopRequireDefault(require("./assets/clearIcon.svg"));
20
+ var _ReduxSearchCheckbox = _interopRequireDefault(require("../inputs/checkbox/ReduxSearchCheckbox"));
21
+ var _ReduxFacetModal = _interopRequireDefault(require("./ReduxFacetModal"));
20
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
23
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
22
24
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -25,6 +27,25 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
25
27
  function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
26
28
  function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
27
29
  function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
30
+ const searchItems = (items, searchText) => {
31
+ let matchedItems = [];
32
+ const keyList = searchText.toUpperCase().split(',').filter(item => item.trim() !== '');
33
+ if (keyList.length === 0) {
34
+ matchedItems = items;
35
+ } else {
36
+ for (let i = 0; i < items.length; i += 1) {
37
+ const item = items[i];
38
+ for (let j = 0; j < keyList.length; j += 1) {
39
+ const key = keyList[j].trim();
40
+ if (key === '' || item.name.toUpperCase().includes(key)) {
41
+ matchedItems.push(item);
42
+ break;
43
+ }
44
+ }
45
+ }
46
+ }
47
+ return matchedItems;
48
+ };
28
49
  const SearchFacetView = _ref => {
29
50
  let {
30
51
  classes,
@@ -38,6 +59,7 @@ const SearchFacetView = _ref => {
38
59
  queryParams
39
60
  } = _ref;
40
61
  const [expand, setExpand] = (0, _react.useState)(facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
62
+ const [open, setOpen] = (0, _react.useState)(false);
41
63
  const onExpandFacet = () => setExpand(!expand);
42
64
  const query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
43
65
  const navigate = (0, _reactRouterDom.useNavigate)();
@@ -58,14 +80,34 @@ const SearchFacetView = _ref => {
58
80
  */
59
81
  const {
60
82
  type,
61
- facetValues
83
+ facetValues,
84
+ datafield,
85
+ section
62
86
  } = facet;
63
87
  const selectedItems = facetValues && facetValues.filter(item => item.isChecked);
64
88
  const displayFacet = _objectSpread({}, facet);
65
89
  displayFacet.facetValues = selectedItems;
66
90
  const isActiveFacet = [...selectedItems].length > 0;
67
91
  const limitCheckBoxCount = (facet === null || facet === void 0 ? void 0 : facet.showCheckboxCount) || 5;
68
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Accordion, {
92
+ const sortFilters = (0, _Sort.sortBySection)(_objectSpread(_objectSpread({}, facet), {}, {
93
+ sortBy
94
+ }));
95
+ const checkedItems = sortFilters.filter(item => item.isChecked).map((item, index) => /*#__PURE__*/_react.default.createElement(_ReduxSearchCheckbox.default, {
96
+ checkboxItem: _objectSpread(_objectSpread({}, item), {}, {
97
+ index,
98
+ section
99
+ }),
100
+ datafield: datafield,
101
+ facet: facet,
102
+ queryParams: queryParams
103
+ }));
104
+ const newUncheckedFullList = searchItems(sortFilters.filter(item => !item.isChecked), searchText);
105
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ReduxFacetModal.default, {
106
+ facet: facet,
107
+ queryParams: queryParams,
108
+ open: open,
109
+ onClose: () => setOpen(false)
110
+ }), /*#__PURE__*/_react.default.createElement(_core.Accordion, {
69
111
  square: true,
70
112
  expanded: expand,
71
113
  onChange: onExpandFacet,
@@ -85,7 +127,7 @@ const SearchFacetView = _ref => {
85
127
  className: classes.NonSortGroup
86
128
  }, /*#__PURE__*/_react.default.createElement("span", {
87
129
  className: classes.NonSortGroupItem
88
- }, "No data for this field")), /*#__PURE__*/_react.default.createElement("div", {
130
+ }, "No data for this field")), facetValues.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
89
131
  className: classes.searchContainer
90
132
  }, /*#__PURE__*/_react.default.createElement("input", {
91
133
  className: searchText && searchText.trim() !== '' ? classes.searchBoxWithText : classes.searchBox,
@@ -106,6 +148,12 @@ const SearchFacetView = _ref => {
106
148
  }, /*#__PURE__*/_react.default.createElement(_Close.default, {
107
149
  fontSize: "small"
108
150
  }))), /*#__PURE__*/_react.default.createElement("div", {
151
+ className: classes.searchContainer
152
+ }, /*#__PURE__*/_react.default.createElement(_core.Button, {
153
+ variant: "text",
154
+ className: classes.expandedDisplayButton,
155
+ onClick: () => setOpen(!open)
156
+ }, "VIEW EXPANDED DISPLAY (".concat(checkedItems.length + newUncheckedFullList.length, ")")))), facetValues.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
109
157
  className: classes.sortGroup
110
158
  }, /*#__PURE__*/_react.default.createElement("span", {
111
159
  className: classes.sortGroupIcon
@@ -119,7 +167,7 @@ const SearchFacetView = _ref => {
119
167
  height: 12,
120
168
  width: 12,
121
169
  alt: "clear-icon"
122
- }))), facet.type === _Types.InputTypes.CHECKBOX && facetValues.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
170
+ }))), /*#__PURE__*/_react.default.createElement("span", {
123
171
  className: (0, _clsx.default)(classes.sortGroupItem, {
124
172
  [classes.highlight]: sortBy === _Sort.sortType.ALPHABET
125
173
  }),
@@ -133,12 +181,12 @@ const SearchFacetView = _ref => {
133
181
  onClick: () => {
134
182
  onSortChange(facet.datafield, _Sort.sortType.NUMERIC);
135
183
  }
136
- }, "Sort by count"))), /*#__PURE__*/_react.default.createElement(_SearchFilterItems.default, {
184
+ }, "Sort by count")), /*#__PURE__*/_react.default.createElement(_SearchFilterItems.default, {
137
185
  searchText: searchText,
138
186
  facet: facet,
139
187
  queryParams: queryParams,
140
188
  sortBy: sortBy
141
- })), !expand && type === _Types.InputTypes.CHECKBOX && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.List, {
189
+ }))), !expand && type === _Types.InputTypes.CHECKBOX && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.List, {
142
190
  id: "filter_Items"
143
191
  }, /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
144
192
  facet: displayFacet,
package/dist/components/inputs/FilterItemStyle.js CHANGED
@@ -63,17 +63,6 @@ var _default = () => ({
63
63
  display: 'flex',
64
64
  justifyContent: 'center',
65
65
  height: '54px'
66
- },
67
- expandedDisplayButton: {
68
- backgroundColor: '#4D889E !important',
69
- color: 'white',
70
- width: '222px',
71
- height: '24px',
72
- marginTop: '5px',
73
- marginBottom: '5px',
74
- borderRadius: '8px',
75
- fontSize: '11px',
76
- top: '10px'
77
66
  }
78
67
  });
79
68
  exports.default = _default;
package/dist/components/inputs/SearchFilterItems.js CHANGED
@@ -9,7 +9,6 @@ var _core = require("@material-ui/core");
9
9
  var _ReduxSearchCheckbox = _interopRequireDefault(require("./checkbox/ReduxSearchCheckbox"));
10
10
  var _Sort = require("../../utils/Sort");
11
11
  var _FilterItemStyle = _interopRequireDefault(require("./FilterItemStyle"));
12
- var _ReduxFacetModal = _interopRequireDefault(require("../facet/ReduxFacetModal"));
13
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
13
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
14
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -51,7 +50,6 @@ const SearchFilterItems = _ref => {
51
50
  } = facet;
52
51
  const initialItemSize = 20;
53
52
  const [displayCount, setDisplayCount] = (0, _react.useState)(initialItemSize);
54
- const [open, setOpen] = (0, _react.useState)(false);
55
53
  const scrollableRef = (0, _react.useRef)(null);
56
54
  const sortFilters = (0, _Sort.sortBySection)(_objectSpread(_objectSpread({}, facet), {}, {
57
55
  sortBy
@@ -92,22 +90,11 @@ const SearchFilterItems = _ref => {
92
90
  }
93
91
  }
94
92
  };
95
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ReduxFacetModal.default, {
96
- facet: facet,
97
- queryParams: queryParams,
98
- open: open,
99
- onClose: () => setOpen(false)
100
- }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, checkedItems), /*#__PURE__*/_react.default.createElement("div", {
93
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, checkedItems), /*#__PURE__*/_react.default.createElement("div", {
101
94
  ref: scrollableRef,
102
95
  className: classes.itemsContainer,
103
96
  onScroll: handleScroll
104
- }, uncheckedItems)), /*#__PURE__*/_react.default.createElement("div", {
105
- className: classes.searchContainer
106
- }, /*#__PURE__*/_react.default.createElement(_core.Button, {
107
- variant: "text",
108
- className: classes.expandedDisplayButton,
109
- onClick: () => setOpen(!open)
110
- }, "VIEW EXPANDED DISPLAY (".concat(checkedItems.length + newUncheckedFullList.length, ")"))));
97
+ }, uncheckedItems)));
111
98
  };
112
99
  var _default = (0, _core.withStyles)(_FilterItemStyle.default)(SearchFilterItems);
113
100
  exports.default = _default;
package/dist/components/section/FacetSectionView.js CHANGED
@@ -32,7 +32,8 @@ const FacetSectionView = _ref => {
32
32
  root: classes.expansionPanelsideBarItem
33
33
  }
34
34
  }, CustomSection ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(CustomSection, {
35
- section: section
35
+ section: section,
36
+ expanded: expand
36
37
  })) : /*#__PURE__*/_react.default.createElement(_AccordionSummaryView.default, null, /*#__PURE__*/_react.default.createElement("div", {
37
38
  className: classes.sectionSummaryText
38
39
  }, section && section.sectionName)), /*#__PURE__*/_react.default.createElement(_core.AccordionDetails, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bento-core/facet-filter",
3
- "version": "1.0.1-ccdihub.30",
3
+ "version": "1.0.1-ccdihub.32",
4
4
  "description": "### Bento core sidebar design:",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/components/facet/FacetStyle.js CHANGED
@@ -83,9 +83,9 @@ export default () => ({
83
83
  fontSize: '11px',
84
84
  fontFamily: 'Nunito',
85
85
  width: 'calc(100% - 26px)',
86
- height: '24px',
86
+ height: '30px',
87
87
  marginTop: '12px',
88
- borderRadius: '8px',
88
+ borderRadius: '5px',
89
89
  background: `url(${SearchIcon}) right 5px center no-repeat`,
90
90
  marginLeft: '6px',
91
91
  border: '1px solid',
@@ -95,22 +95,24 @@ export default () => ({
95
95
  fontSize: '11px',
96
96
  fontFamily: 'Nunito',
97
97
  width: 'calc(100% - 26px)',
98
- height: '24px',
98
+ height: '30px',
99
99
  marginTop: '12px',
100
- borderRadius: '8px',
100
+ borderRadius: '5px',
101
101
  marginLeft: '6px',
102
102
  border: '1px solid',
103
103
  padding: '5px',
104
104
  },
105
105
  expandedDisplayButton: {
106
- background: '#4D889E',
106
+ backgroundColor: '#4D889E !important',
107
107
  color: 'white',
108
- width: '222px',
108
+ width: 'calc(100% - 26px)',
109
109
  height: '30px',
110
- marginTop: '5px',
111
110
  marginBottom: '5px',
112
- borderRadius: '8px',
113
- fontSize: '11px',
111
+ marginLeft: '6px',
112
+ borderRadius: '5px',
113
+ fontSize: '12px',
114
+ fontWeight: '600',
115
+ top: '8px',
114
116
  },
115
117
  clearTextButton: {
116
118
  padding: '0px',
package/src/components/facet/SearchFacetView.js CHANGED
@@ -10,6 +10,7 @@ import {
10
10
  withStyles,
11
11
  Icon,
12
12
  IconButton,
13
+ Button,
13
14
  } from '@material-ui/core';
14
15
  import CloseIcon from '@material-ui/icons/Close';
15
16
  import clsx from 'clsx';
@@ -18,8 +19,30 @@ import { InputTypes } from '../inputs/Types';
18
19
  import styles from './FacetStyle';
19
20
  import FilterItems from '../inputs/FilterItems';
20
21
  import SearchFilterItems from '../inputs/SearchFilterItems';
21
- import { sortType } from '../../utils/Sort';
22
+ import { sortType, sortBySection } from '../../utils/Sort';
22
23
  import clearIcon from './assets/clearIcon.svg';
24
+ import ReduxSearchCheckbox from '../inputs/checkbox/ReduxSearchCheckbox';
25
+ import ReduxFacetModal from './ReduxFacetModal';
26
+
27
+ const searchItems = (items, searchText) => {
28
+ let matchedItems = [];
29
+ const keyList = searchText.toUpperCase().split(',').filter((item) => item.trim() !== '');
30
+ if (keyList.length === 0) {
31
+ matchedItems = items;
32
+ } else {
33
+ for (let i = 0; i < items.length; i += 1) {
34
+ const item = items[i];
35
+ for (let j = 0; j < keyList.length; j += 1) {
36
+ const key = keyList[j].trim();
37
+ if (key === '' || item.name.toUpperCase().includes(key)) {
38
+ matchedItems.push(item);
39
+ break;
40
+ }
41
+ }
42
+ }
43
+ }
44
+ return matchedItems;
45
+ };
23
46
 
24
47
  const SearchFacetView = ({
25
48
  classes,
@@ -33,6 +56,7 @@ const SearchFacetView = ({
33
56
  queryParams,
34
57
  }) => {
35
58
  const [expand, setExpand] = useState(facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
59
+ const [open, setOpen] = useState(false);
36
60
  const onExpandFacet = () => setExpand(!expand);
37
61
  const query = new URLSearchParams(useLocation().search);
38
62
  const navigate = useNavigate();
@@ -50,14 +74,38 @@ const SearchFacetView = ({
50
74
  /**
51
75
  * display checked items on facet collapse
52
76
  */
53
- const { type, facetValues } = facet;
77
+ const {
78
+ type, facetValues, datafield, section,
79
+ } = facet;
54
80
  const selectedItems = facetValues && facetValues.filter((item) => item.isChecked);
55
81
  const displayFacet = { ...facet };
56
82
  displayFacet.facetValues = selectedItems;
57
83
  const isActiveFacet = [...selectedItems].length > 0;
58
84
  const limitCheckBoxCount = facet?.showCheckboxCount || 5;
85
+
86
+ const sortFilters = sortBySection({ ...facet, sortBy });
87
+
88
+ const checkedItems = sortFilters.filter((item) => item.isChecked)
89
+ .map((item, index) => (
90
+ <ReduxSearchCheckbox
91
+ checkboxItem={{ ...item, index, section }}
92
+ datafield={datafield}
93
+ facet={facet}
94
+ queryParams={queryParams}
95
+ />
96
+ ));
97
+
98
+ const newUncheckedFullList = searchItems(sortFilters.filter((item) => !item.isChecked),
99
+ searchText);
100
+
59
101
  return (
60
102
  <>
103
+ <ReduxFacetModal
104
+ facet={facet}
105
+ queryParams={queryParams}
106
+ open={open}
107
+ onClose={() => setOpen(false)}
108
+ />
61
109
  <Accordion
62
110
  square
63
111
  expanded={expand}
@@ -67,12 +115,12 @@ const SearchFacetView = ({
67
115
  }}
68
116
  id={facet.section}
69
117
  >
70
- { CustomView ? (
118
+ {CustomView ? (
71
119
  <CustomView
72
120
  facet={facet}
73
121
  facetClasses={
74
- isActiveFacet ? `activeFacet${facet.section}`
75
- : `inactiveFacet${facet.section}`
122
+ isActiveFacet ? `activeFacet${facet.section}`
123
+ : `inactiveFacet${facet.section}`
76
124
  }
77
125
  />
78
126
  ) : (
@@ -93,95 +141,107 @@ const SearchFacetView = ({
93
141
  {
94
142
  (facetValues.length === 0)
95
143
  && (
96
- <div className={classes.NonSortGroup}>
97
- <span
98
- className={classes.NonSortGroupItem}
99
- >
100
- No data for this field
101
- </span>
102
- </div>
103
- )
104
- }
105
- <div className={classes.searchContainer}>
106
- <input
107
- className={searchText && searchText.trim() !== '' ? classes.searchBoxWithText : classes.searchBox}
108
- value={searchText}
109
- type="text"
110
- placeholder="e.g. Sarcoma, Neoplasm"
111
- onChange={(e) => onSearchTextChange(facet.datafield, e.target.value)}
112
- />
113
- {
114
- searchText
115
- && searchText.trim() !== ''
116
- && (
117
- <IconButton
118
- aria-label="close"
119
- onClick={() => onSearchTextChange(facet.datafield, '')}
120
- className={classes.clearTextButton}
121
- sx={(theme) => ({
122
- position: 'absolute',
123
- right: 7,
124
- top: 7,
125
- color: theme.palette.grey[500],
126
- })}
127
- >
128
- <CloseIcon fontSize="small" />
129
- </IconButton>
130
- )
131
- }
132
- </div>
133
- <div className={classes.sortGroup}>
134
- <span className={classes.sortGroupIcon}>
135
- <Icon
136
- style={{ fontSize: 10 }}
137
- onClick={onClearSection}
138
- >
139
- <img
140
- src={clearIcon}
141
- height={12}
142
- width={12}
143
- alt="clear-icon"
144
- />
145
- </Icon>
146
- </span>
147
- {
148
- (facet.type === InputTypes.CHECKBOX && facetValues.length > 0)
149
- && (
150
- <>
151
- <span
152
- className={
153
- clsx(classes.sortGroupItem, {
154
- [classes.highlight]: sortBy === sortType.ALPHABET,
155
- })
156
- }
157
- onClick={() => {
158
- onSortChange(facet.datafield, sortType.ALPHABET);
159
- }}
160
- >
161
- Sort alphabetically
162
- </span>
144
+ <div className={classes.NonSortGroup}>
163
145
  <span
164
- className={
165
- clsx(classes.sortGroupItemCounts, {
166
- [classes.highlight]: sortBy === sortType.NUMERIC,
167
- })
168
- }
169
- onClick={() => {
170
- onSortChange(facet.datafield, sortType.NUMERIC);
171
- }}
146
+ className={classes.NonSortGroupItem}
172
147
  >
173
- Sort by count
148
+ No data for this field
174
149
  </span>
150
+ </div>
151
+ )
152
+ }
153
+ {
154
+ (facetValues.length > 0)
155
+ && (
156
+ <>
157
+ <div className={classes.searchContainer}>
158
+ <input
159
+ className={searchText && searchText.trim() !== '' ? classes.searchBoxWithText : classes.searchBox}
160
+ value={searchText}
161
+ type="text"
162
+ placeholder="e.g. Sarcoma, Neoplasm"
163
+ onChange={(e) => onSearchTextChange(facet.datafield, e.target.value)}
164
+ />
165
+ {
166
+ searchText
167
+ && searchText.trim() !== ''
168
+ && (
169
+ <IconButton
170
+ aria-label="close"
171
+ onClick={() => onSearchTextChange(facet.datafield, '')}
172
+ className={classes.clearTextButton}
173
+ sx={(theme) => ({
174
+ position: 'absolute',
175
+ right: 7,
176
+ top: 7,
177
+ color: theme.palette.grey[500],
178
+ })}
179
+ >
180
+ <CloseIcon fontSize="small" />
181
+ </IconButton>
182
+ )
183
+ }
184
+ </div>
185
+ <div className={classes.searchContainer}>
186
+ <Button variant="text" className={classes.expandedDisplayButton} onClick={() => setOpen(!open)}>
187
+ {`VIEW EXPANDED DISPLAY (${checkedItems.length + newUncheckedFullList.length})`}
188
+ </Button>
189
+ </div>
175
190
  </>
176
- )
177
- }
178
- </div>
179
- <SearchFilterItems
180
- searchText={searchText}
181
- facet={facet}
182
- queryParams={queryParams}
183
- sortBy={sortBy}
184
- />
191
+ )
192
+ }
193
+ {
194
+ (facetValues.length > 0)
195
+ && (
196
+ <>
197
+ <div className={classes.sortGroup}>
198
+ <span className={classes.sortGroupIcon}>
199
+ <Icon
200
+ style={{ fontSize: 10 }}
201
+ onClick={onClearSection}
202
+ >
203
+ <img
204
+ src={clearIcon}
205
+ height={12}
206
+ width={12}
207
+ alt="clear-icon"
208
+ />
209
+ </Icon>
210
+ </span>
211
+ <span
212
+ className={
213
+ clsx(classes.sortGroupItem, {
214
+ [classes.highlight]: sortBy === sortType.ALPHABET,
215
+ })
216
+ }
217
+ onClick={() => {
218
+ onSortChange(facet.datafield, sortType.ALPHABET);
219
+ }}
220
+ >
221
+ Sort alphabetically
222
+ </span>
223
+ <span
224
+ className={
225
+ clsx(classes.sortGroupItemCounts, {
226
+ [classes.highlight]: sortBy === sortType.NUMERIC,
227
+ })
228
+ }
229
+ onClick={() => {
230
+ onSortChange(facet.datafield, sortType.NUMERIC);
231
+ }}
232
+ >
233
+ Sort by count
234
+ </span>
235
+ </div>
236
+ <SearchFilterItems
237
+ searchText={searchText}
238
+ facet={facet}
239
+ queryParams={queryParams}
240
+ sortBy={sortBy}
241
+ />
242
+ </>
243
+ )
244
+ }
185
245
  </Accordion>
186
246
  {
187
247
  (!expand && type === InputTypes.CHECKBOX) && (
package/src/components/inputs/FilterItemStyle.js CHANGED
@@ -58,15 +58,4 @@ export default () => ({
58
58
  justifyContent: 'center',
59
59
  height: '54px',
60
60
  },
61
- expandedDisplayButton: {
62
- backgroundColor: '#4D889E !important',
63
- color: 'white',
64
- width: '222px',
65
- height: '24px',
66
- marginTop: '5px',
67
- marginBottom: '5px',
68
- borderRadius: '8px',
69
- fontSize: '11px',
70
- top: '10px',
71
- },
72
61
  });
package/src/components/inputs/SearchFilterItems.js CHANGED
@@ -3,12 +3,10 @@
3
3
  import React, { useEffect, useState, useRef } from 'react';
4
4
  import {
5
5
  withStyles,
6
- Button,
7
6
  } from '@material-ui/core';
8
7
  import ReduxSearchCheckbox from './checkbox/ReduxSearchCheckbox';
9
8
  import { sortBySection } from '../../utils/Sort';
10
9
  import styles from './FilterItemStyle';
11
- import ReduxFacetModal from '../facet/ReduxFacetModal';
12
10
 
13
11
  const searchItems = (items, searchText) => {
14
12
  let matchedItems = [];
@@ -42,7 +40,6 @@ const SearchFilterItems = ({
42
40
  } = facet;
43
41
  const initialItemSize = 20;
44
42
  const [displayCount, setDisplayCount] = useState(initialItemSize);
45
- const [open, setOpen] = useState(false);
46
43
  const scrollableRef = useRef(null);
47
44
  const sortFilters = sortBySection({ ...facet, sortBy });
48
45
 
@@ -82,12 +79,6 @@ const SearchFilterItems = ({
82
79
 
83
80
  return (
84
81
  <>
85
- <ReduxFacetModal
86
- facet={facet}
87
- queryParams={queryParams}
88
- open={open}
89
- onClose={() => setOpen(false)}
90
- />
91
82
  <div>
92
83
  <div>
93
84
  {checkedItems}
@@ -96,11 +87,6 @@ const SearchFilterItems = ({
96
87
  {uncheckedItems}
97
88
  </div>
98
89
  </div>
99
- <div className={classes.searchContainer}>
100
- <Button variant="text" className={classes.expandedDisplayButton} onClick={() => setOpen(!open)}>
101
- {`VIEW EXPANDED DISPLAY (${checkedItems.length + newUncheckedFullList.length})`}
102
- </Button>
103
- </div>
104
90
  </>
105
91
  );
106
92
  };
package/src/components/section/FacetSectionView.js CHANGED
@@ -29,7 +29,7 @@ const FacetSectionView = ({
29
29
  >
30
30
  {CustomSection ? (
31
31
  <>
32
- <CustomSection section={section} />
32
+ <CustomSection section={section} expanded={expand} />
33
33
  </>
34
34
  ) : (
35
35
  <CustomAccordionSummary>