@bento-core/facet-filter 1.0.1-ccdihub.31 → 1.0.1-ccdihub.33

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 (17) hide show
  1. package/dist/components/facet/FacetStyle.js +11 -9
  2. package/dist/components/facet/SearchFacetView.js +52 -4
  3. package/dist/components/inputs/FilterItemStyle.js +0 -11
  4. package/dist/components/inputs/SearchFilterItems.js +2 -15
  5. package/dist/components/inputs/checkbox/CheckboxView.js +1 -1
  6. package/dist/components/inputs/checkbox/ModalCheckboxView.js +1 -1
  7. package/dist/components/inputs/checkbox/SearchCheckboxView.js +1 -1
  8. package/dist/components/inputs/slider/SliderView.js +3 -3
  9. package/package.json +1 -1
  10. package/src/components/facet/FacetStyle.js +11 -9
  11. package/src/components/facet/SearchFacetView.js +143 -88
  12. package/src/components/inputs/FilterItemStyle.js +0 -11
  13. package/src/components/inputs/SearchFilterItems.js +0 -14
  14. package/src/components/inputs/checkbox/CheckboxView.js +1 -1
  15. package/src/components/inputs/checkbox/ModalCheckboxView.js +1 -1
  16. package/src/components/inputs/checkbox/SearchCheckboxView.js +1 -1
  17. package/src/components/inputs/slider/SliderView.js +4 -4
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")), facetValues.length > 0 && /*#__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,
@@ -105,7 +147,13 @@ const SearchFacetView = _ref => {
105
147
  })
106
148
  }, /*#__PURE__*/_react.default.createElement(_Close.default, {
107
149
  fontSize: "small"
108
- }))), facetValues.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
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
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/inputs/checkbox/CheckboxView.js CHANGED
@@ -135,7 +135,7 @@ const CheckBoxView = _ref => {
135
135
  ["".concat(checkedSection, "SubjectUnChecked")]: !isChecked,
136
136
  ["".concat(checkedSection, "SubjectChecked")]: isChecked
137
137
  })
138
- }, "(".concat(subjects, ")"))), /*#__PURE__*/_react.default.createElement(_core.Divider, {
138
+ }, "(".concat(subjects.toLocaleString(), ")"))), /*#__PURE__*/_react.default.createElement(_core.Divider, {
139
139
  style: {
140
140
  backgroundColor: isChecked ? '#FFFFFF' : '#b1b1b1',
141
141
  margin: '0px',
package/dist/components/inputs/checkbox/ModalCheckboxView.js CHANGED
@@ -135,7 +135,7 @@ const CheckBoxView = _ref => {
135
135
  ["".concat(checkedSection, "SubjectUnChecked")]: !isChecked,
136
136
  ["".concat(checkedSection, "SubjectChecked")]: isChecked
137
137
  })
138
- }, "(".concat(subjects, ")"))));
138
+ }, "(".concat(subjects.toLocaleString(), ")"))));
139
139
  };
140
140
  var _default = (0, _styles.withStyles)(_ModalCheckboxStyle.default)(CheckBoxView);
141
141
  exports.default = _default;
package/dist/components/inputs/checkbox/SearchCheckboxView.js CHANGED
@@ -135,7 +135,7 @@ const CheckBoxView = _ref => {
135
135
  ["".concat(checkedSection, "SubjectUnChecked")]: !isChecked,
136
136
  ["".concat(checkedSection, "SubjectChecked")]: isChecked
137
137
  })
138
- }, "(".concat(subjects, ")"))), /*#__PURE__*/_react.default.createElement(_core.Divider, {
138
+ }, "(".concat(subjects.toLocaleString(), ")"))), /*#__PURE__*/_react.default.createElement(_core.Divider, {
139
139
  style: {
140
140
  backgroundColor: isChecked ? '#FFFFFF' : '#b1b1b1',
141
141
  margin: '0px',
package/dist/components/inputs/slider/SliderView.js CHANGED
@@ -117,11 +117,11 @@ const SliderView = _ref => {
117
117
  className: classes.lowerUpperBound
118
118
  }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
119
119
  className: classes.lowerBound
120
- }, minLowerBound), /*#__PURE__*/_react.default.createElement(_core.Typography, {
120
+ }, minLowerBound.toLocaleString()), /*#__PURE__*/_react.default.createElement(_core.Typography, {
121
121
  className: classes.upperBound
122
- }, maxUpperBound))), (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound) && /*#__PURE__*/_react.default.createElement(_core.Typography, {
122
+ }, maxUpperBound.toLocaleString()))), (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound) && /*#__PURE__*/_react.default.createElement(_core.Typography, {
123
123
  className: isValid() ? classes.sliderText : classes.invalidSliderText
124
- }, sliderValue[0], ' - ', sliderValue[1], "\xA0", quantifier));
124
+ }, sliderValue[0].toLocaleString(), ' - ', sliderValue[1].toLocaleString(), "\xA0", quantifier));
125
125
  };
126
126
  const styles = () => ({
127
127
  colorPrimary: props => props.facet.style && props.facet.style.colorPrimary ? props.facet.style.colorPrimary : {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bento-core/facet-filter",
3
- "version": "1.0.1-ccdihub.31",
3
+ "version": "1.0.1-ccdihub.33",
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,99 +141,106 @@ 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>
144
+ <div className={classes.NonSortGroup}>
145
+ <span
146
+ className={classes.NonSortGroupItem}
147
+ >
148
+ No data for this field
149
+ </span>
150
+ </div>
103
151
  )
104
152
  }
105
153
  {
106
154
  (facetValues.length > 0)
107
155
  && (
108
- <div className={classes.searchContainer}>
109
- <input
110
- className={searchText && searchText.trim() !== '' ? classes.searchBoxWithText : classes.searchBox}
111
- value={searchText}
112
- type="text"
113
- placeholder="e.g. Sarcoma, Neoplasm"
114
- onChange={(e) => onSearchTextChange(facet.datafield, e.target.value)}
115
- />
116
- {
117
- searchText
118
- && searchText.trim() !== ''
119
- && (
120
- <IconButton
121
- aria-label="close"
122
- onClick={() => onSearchTextChange(facet.datafield, '')}
123
- className={classes.clearTextButton}
124
- sx={(theme) => ({
125
- position: 'absolute',
126
- right: 7,
127
- top: 7,
128
- color: theme.palette.grey[500],
129
- })}
130
- >
131
- <CloseIcon fontSize="small" />
132
- </IconButton>
133
- )
134
- }
135
- </div>
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>
190
+ </>
136
191
  )
137
192
  }
138
193
  {
139
194
  (facetValues.length > 0)
140
- && (
141
- <>
142
- <div className={classes.sortGroup}>
143
- <span className={classes.sortGroupIcon}>
144
- <Icon
145
- style={{ fontSize: 10 }}
146
- onClick={onClearSection}
147
- >
148
- <img
149
- src={clearIcon}
150
- height={12}
151
- width={12}
152
- alt="clear-icon"
153
- />
154
- </Icon>
155
- </span>
156
- <span
157
- className={
158
- clsx(classes.sortGroupItem, {
159
- [classes.highlight]: sortBy === sortType.ALPHABET,
160
- })
161
- }
162
- onClick={() => {
163
- onSortChange(facet.datafield, sortType.ALPHABET);
164
- }}
165
- >
166
- Sort alphabetically
167
- </span>
168
- <span
169
- className={
170
- clsx(classes.sortGroupItemCounts, {
171
- [classes.highlight]: sortBy === sortType.NUMERIC,
172
- })
173
- }
174
- onClick={() => {
175
- onSortChange(facet.datafield, sortType.NUMERIC);
176
- }}
195
+ && (
196
+ <>
197
+ <div className={classes.sortGroup}>
198
+ <span className={classes.sortGroupIcon}>
199
+ <Icon
200
+ style={{ fontSize: 10 }}
201
+ onClick={onClearSection}
177
202
  >
178
- Sort by count
179
- </span>
180
- </div>
181
- <SearchFilterItems
182
- searchText={searchText}
183
- facet={facet}
184
- queryParams={queryParams}
185
- sortBy={sortBy}
186
- />
187
- </>
188
- )
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
+ )
189
244
  }
190
245
  </Accordion>
191
246
  {
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/inputs/checkbox/CheckboxView.js CHANGED
@@ -162,7 +162,7 @@ const CheckBoxView = ({
162
162
  [`${checkedSection}SubjectChecked`]: isChecked,
163
163
  })}
164
164
  >
165
- {`(${subjects})`}
165
+ {`(${subjects.toLocaleString()})`}
166
166
  </Typography>
167
167
  </ListItem>
168
168
  <Divider
package/src/components/inputs/checkbox/ModalCheckboxView.js CHANGED
@@ -162,7 +162,7 @@ const CheckBoxView = ({
162
162
  [`${checkedSection}SubjectChecked`]: isChecked,
163
163
  })}
164
164
  >
165
- {`(${subjects})`}
165
+ {`(${subjects.toLocaleString()})`}
166
166
  </Typography>
167
167
  </ListItem>
168
168
  </>
package/src/components/inputs/checkbox/SearchCheckboxView.js CHANGED
@@ -162,7 +162,7 @@ const CheckBoxView = ({
162
162
  [`${checkedSection}SubjectChecked`]: isChecked,
163
163
  })}
164
164
  >
165
- {`(${subjects})`}
165
+ {`(${subjects.toLocaleString()})`}
166
166
  </Typography>
167
167
  </ListItem>
168
168
  <Divider
package/src/components/inputs/slider/SliderView.js CHANGED
@@ -116,10 +116,10 @@ const SliderView = ({
116
116
  </div>
117
117
  <Box className={classes.lowerUpperBound}>
118
118
  <Typography className={classes.lowerBound}>
119
- {minLowerBound}
119
+ {minLowerBound.toLocaleString()}
120
120
  </Typography>
121
121
  <Typography className={classes.upperBound}>
122
- {maxUpperBound}
122
+ {maxUpperBound.toLocaleString()}
123
123
  </Typography>
124
124
  </Box>
125
125
  </div>
@@ -130,9 +130,9 @@ const SliderView = ({
130
130
  <Typography
131
131
  className={isValid() ? classes.sliderText : classes.invalidSliderText}
132
132
  >
133
- {sliderValue[0]}
133
+ {sliderValue[0].toLocaleString()}
134
134
  {' - '}
135
- {sliderValue[1]}
135
+ {sliderValue[1].toLocaleString()}
136
136
  &nbsp;
137
137
  {quantifier}
138
138
  </Typography>