@bento-core/facet-filter 1.0.1-icdc.0 → 1.0.1-icdc.1

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 (12) hide show
  1. package/README.md +57 -3
  2. package/dist/FacetFilterController.js +23 -16
  3. package/dist/FacetFilterView.js +1 -6
  4. package/dist/components/facet/FacetView.js +2 -2
  5. package/dist/components/inputs/checkbox/CheckboxView.js +16 -12
  6. package/dist/utils/Sort.js +8 -6
  7. package/package.json +1 -1
  8. package/src/FacetFilterController.js +18 -13
  9. package/src/FacetFilterView.js +1 -9
  10. package/src/components/facet/FacetView.js +8 -5
  11. package/src/components/inputs/checkbox/CheckboxView.js +23 -13
  12. package/src/utils/Sort.js +14 -8
package/README.md CHANGED
@@ -244,12 +244,66 @@ className={clsx(classes.sectionSummaryText, classes[facetClasses])}
244
244
  ## 10 CLearAllFilterButton Component
245
245
  Bento Core provides 1. function to clear all active filters, 2. disable flag (true incase of no active filters). Client is responsible for defining view (custom html).
246
246
  ```
247
- import { generateClearAllFilterBtn } from 'bento-core';
247
+ import { ClearAllFiltersBtn, FacetFilter } from '@bento-core/facet-filter';
248
+ import { getFilters } from '@bento-core/facet-filter';
248
249
 
249
250
  const CustomClearAllFiltersBtn = ({ onClearAllFilters, disable }) => {
250
251
  //...custom component 1. bind onClearFilters fn
251
252
  // 2. disable flag to disable button
252
- }
253
+ }
254
+ // get filter data
255
+ // filterState: state.statusReducer.filterState, (from reducer)
256
+ // const activeFilters = getFilters(filterState) // formating
257
+
258
+ <ClearAllFiltersBtn
259
+ Component={CustomClearAllFiltersBtn}
260
+ activeFilters={activeFilters}
261
+ />
262
+ ```
263
+
264
+ ## 11 Facet Value Component
265
+ ```
266
+ // response
267
+ // filterCaseCountByProgram: [{group: "COP", subjects: 301}]
268
+ const {
269
+ name,
270
+ customName,
271
+ subjects,
272
+ customSubjects,
273
+ tooltip,
274
+ } = checkboxItem;
275
+
276
+ // 1. by default facet value component display group ("COP")
277
+ // 2. set customName to display customize value
278
+ // 3. by default facet value component display subjects (301)
279
+ // 4. set customSubjects to display customize value or adjust correct field for subject count
280
+ // 5. tooltip - provide text value to tooltip text
281
+
282
+ /**
283
+ * Add Bento frontend filter count/subjects
284
+ * Add tootip text
285
+ */
286
+ const filterData = facetsConfig.reduce((acc, item) => {
287
+ const facetValues = searchData[item.apiPath];
288
+ if (!facetValues) {
289
+ return acc;
290
+ }
291
+ const subjectCounts = [...facetValues].map((checkbox) => {
292
+ const text = tooltipText[item.tooltipKey];
293
+ return {
294
+ ...checkbox,
295
+ customSubjects: checkbox.count,
296
+ tooltip: text ? text[checkbox.group] : undefined,
297
+ };
298
+ });
299
+ return { ...acc, [item.apiPath]: [...subjectCounts] };
300
+ }, {});
253
301
 
254
- const ClearAllFiltersButton = () => generateClearAllFilterBtn(CustomClearAllFiltersBtn);
302
+ <FacetFilter
303
+ data={filterData}
304
+ facetSectionConfig={facetSectionVariables}
305
+ facetsConfig={facetsConfig}
306
+ CustomFacetSection={CustomFacetSection}
307
+ CustomFacetView={CustomFacetView}
308
+ />
255
309
  ```
package/dist/FacetFilterController.js CHANGED
@@ -12,13 +12,13 @@ var _FacetFilterView = _interopRequireDefault(require("./FacetFilterView"));
12
12
  const _excluded = ["section"];
13
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
14
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
15
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
16
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
15
17
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
16
18
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
17
19
  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; }
18
20
  function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
19
21
  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); }
20
- function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
21
- function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
22
22
  const FacetFilterController = props => {
23
23
  /**
24
24
  * update checkbox state
@@ -29,7 +29,8 @@ const FacetFilterController = props => {
29
29
  filterState,
30
30
  data,
31
31
  facetsConfig,
32
- facetSectionConfig
32
+ facetSectionConfig,
33
+ tooltipText = {}
33
34
  } = props;
34
35
  const updateFacetState = filterSections => {
35
36
  const updateSections = [...filterSections];
@@ -37,9 +38,16 @@ const FacetFilterController = props => {
37
38
  for (const [key, value] of Object.entries(filterState)) {
38
39
  updateSections.forEach(sideBar => {
39
40
  if (sideBar.type === _Types.InputTypes.CHECKBOX && sideBar.datafield === key) {
40
- sideBar.facetValues.forEach(item => {
41
- item.isChecked = value[item.name] ? value[item.name] : false;
41
+ const {
42
+ facetValues = []
43
+ } = sideBar;
44
+ const updateFacetVals = facetValues.map(item => {
45
+ const facetVal = item[sideBar.field];
46
+ return _objectSpread(_objectSpread({}, item), {}, {
47
+ isChecked: value[facetVal] ? value[facetVal] : false
48
+ });
42
49
  });
50
+ sideBar.facetValues = updateFacetVals;
43
51
  }
44
52
  if (sideBar.type === _Types.InputTypes.SLIDER && sideBar.datafield === key) {
45
53
  sideBar.facetValues = value;
@@ -49,9 +57,13 @@ const FacetFilterController = props => {
49
57
  } else {
50
58
  updateSections.forEach(sideBar => {
51
59
  if (sideBar.type === _Types.InputTypes.CHECKBOX) {
52
- sideBar.facetValues.forEach(item => {
53
- item.isChecked = false;
54
- });
60
+ const {
61
+ facetValues = []
62
+ } = sideBar;
63
+ const updateFacetVals = facetValues.map(item => _objectSpread(_objectSpread({}, item), {}, {
64
+ isChecked: false
65
+ }));
66
+ sideBar.facetValues = updateFacetVals;
55
67
  }
56
68
  /**
57
69
  * set default value for slider - on clear all filter
@@ -96,6 +108,7 @@ const FacetFilterController = props => {
96
108
  * Construct filter object
97
109
  * 1. add facet values to facets
98
110
  * 2. add 'name' key to each facet value
111
+ * 3. add '
99
112
  */
100
113
  const addFacetValues = facets => {
101
114
  const updateFacets = [];
@@ -105,19 +118,13 @@ const FacetFilterController = props => {
105
118
  facetValues: []
106
119
  });
107
120
  const {
108
- field,
109
121
  ApiLowerBoundName,
110
122
  ApiUpperBoundName,
111
123
  apiForFiltering
112
124
  } = updateFacet;
113
125
  if (data[apiForFiltering]) {
114
126
  if (Array.isArray(data[apiForFiltering])) {
115
- const updateField = data[apiForFiltering].map(item => {
116
- const addField = _objectSpread({}, item);
117
- addField.name = item[field];
118
- return addField;
119
- });
120
- updateFacet.facetValues = updateField;
127
+ updateFacet.facetValues = data[apiForFiltering];
121
128
  }
122
129
  /**
123
130
  * add object to facet values
@@ -140,7 +147,7 @@ const FacetFilterController = props => {
140
147
  * Generate facet sections state
141
148
  *
142
149
  */
143
- const displayFacets = facetsConfig.filter(facet => facet.show).slice(0, 16);
150
+ const displayFacets = facetsConfig.filter(facet => facet.show);
144
151
  const facetStates = addFacetValues(displayFacets);
145
152
  const updateState = updateFacetState(facetStates);
146
153
  const facetSections = arrangeBySections(updateState);
package/dist/FacetFilterView.js CHANGED
@@ -9,7 +9,6 @@ var _core = require("@material-ui/core");
9
9
  var _FacetFilterStyle = _interopRequireDefault(require("./FacetFilterStyle"));
10
10
  var _FacetSectionView = _interopRequireDefault(require("./components/section/FacetSectionView"));
11
11
  var _ReduxFacetView = _interopRequireDefault(require("./components/facet/ReduxFacetView"));
12
- var _FilterItems = _interopRequireDefault(require("./components/inputs/FilterItems"));
13
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
13
  /* eslint-disable arrow-body-style */
15
14
  /* eslint-disable padded-blocks */
@@ -29,11 +28,7 @@ const BentoFacetFilter = _ref => {
29
28
  }, section.items.map(facet => /*#__PURE__*/_react.default.createElement(_ReduxFacetView.default, {
30
29
  facet: facet,
31
30
  CustomView: CustomFacetView
32
- }, /*#__PURE__*/_react.default.createElement(_core.List, {
33
- className: "List_".concat(facet.label)
34
- }, /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
35
- facet: facet
36
- }))))))));
31
+ }))))));
37
32
  };
38
33
  var _default = (0, _core.withStyles)(_FacetFilterStyle.default)(BentoFacetFilter);
39
34
  exports.default = _default;
package/dist/components/facet/FacetView.js CHANGED
@@ -114,10 +114,10 @@ const FacetView = _ref => {
114
114
  onClick: () => {
115
115
  onSortFacet(_Sort.sortType.NUMERIC);
116
116
  }
117
- }, "Sort by count"))), /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
117
+ }, "Sort by count"))), expand && /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
118
118
  facet: facet,
119
119
  sortBy: sortBy
120
- })), !expand && type === _Types.InputTypes.CHECKBOX && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.List, {
120
+ })), !expand && type === _Types.InputTypes.CHECKBOX && selectedItems.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.List, {
121
121
  id: "filter_Items"
122
122
  }, /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
123
123
  facet: displayFacet
package/dist/components/inputs/checkbox/CheckboxView.js CHANGED
@@ -18,8 +18,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
18
18
  /* eslint-disable object-curly-newline */
19
19
  /* eslint-disable object-shorthand */
20
20
  /* eslint-disable react/jsx-one-expression-per-line */
21
+ /* eslint-disable no-useless-escape */
21
22
 
22
- const alignment = 'flex-start';
23
23
  const CheckBoxView = _ref => {
24
24
  let {
25
25
  classes,
@@ -29,16 +29,19 @@ const CheckBoxView = _ref => {
29
29
  facet
30
30
  } = _ref;
31
31
  const {
32
- name,
33
- subjects,
34
32
  isChecked = false,
35
33
  index,
36
34
  section,
37
- tooltip,
38
- label
35
+ tooltip
39
36
  } = checkboxItem;
37
+ const {
38
+ field = 'group',
39
+ count = 'subjects',
40
+ customCount = text => "(".concat(text, ")")
41
+ } = facet;
40
42
  const indexType = index % 2 === 0 ? 'Even' : 'Odd';
41
- const checkedSection = "".concat(section).toLowerCase().replace(' ', '_');
43
+ const checkedSection = "".concat(section).toLowerCase().replace(/\ /g, '_');
44
+ const name = checkboxItem[field] || 'N/A';
42
45
  const handleToggle = () => {
43
46
  const toggleCheckBoxItem = {
44
47
  name: name,
@@ -53,9 +56,7 @@ const CheckBoxView = _ref => {
53
56
  ["".concat(checkedSection, "NameUnChecked")]: !isChecked,
54
57
  ["".concat(checkedSection, "NameChecked")]: isChecked
55
58
  })
56
- }, label ? /*#__PURE__*/_react.default.createElement(_core.Typography, {
57
- className: classes.checkboxLabel
58
- }, label) : /*#__PURE__*/_react.default.createElement(_core.Typography, {
59
+ }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
59
60
  className: classes.checkboxName
60
61
  }, name));
61
62
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.ListItem, {
@@ -74,7 +75,8 @@ const CheckBoxView = _ref => {
74
75
  icon: /*#__PURE__*/_react.default.createElement(_icons.CheckBoxOutlineBlank, {
75
76
  style: {
76
77
  fontSize: 18
77
- }
78
+ },
79
+ className: checkedSection
78
80
  }),
79
81
  onClick: handleToggle,
80
82
  checked: isChecked,
@@ -94,12 +96,14 @@ const CheckBoxView = _ref => {
94
96
  title: tooltip
95
97
  }, /*#__PURE__*/_react.default.createElement("div", {
96
98
  className: datafield
97
- }, /*#__PURE__*/_react.default.createElement(LabelComponent, null))) : /*#__PURE__*/_react.default.createElement(LabelComponent, null), /*#__PURE__*/_react.default.createElement(_core.ListItemText, null), /*#__PURE__*/_react.default.createElement(_core.Typography, {
99
+ }, name)) : /*#__PURE__*/_react.default.createElement(LabelComponent, null), /*#__PURE__*/_react.default.createElement(_core.ListItemText, {
100
+ className: "".concat(checkedSection, "_md_space")
101
+ }), /*#__PURE__*/_react.default.createElement(_core.Typography, {
98
102
  className: (0, _clsx.default)("".concat(checkedSection, "Subjects"), {
99
103
  ["".concat(checkedSection, "SubjectUnChecked")]: !isChecked,
100
104
  ["".concat(checkedSection, "SubjectChecked")]: isChecked
101
105
  })
102
- }, "(".concat(subjects, ")"))), /*#__PURE__*/_react.default.createElement(_core.Divider, {
106
+ }, customCount(checkboxItem[count] || 0))), /*#__PURE__*/_react.default.createElement(_core.Divider, {
103
107
  style: {
104
108
  backgroundColor: isChecked ? '#FFFFFF' : '#b1b1b1',
105
109
  margin: '0px',
package/dist/utils/Sort.js CHANGED
@@ -46,28 +46,30 @@ const sortBySection = _ref => {
46
46
  let {
47
47
  facetValues,
48
48
  sort_type,
49
- sortBy
49
+ sortBy,
50
+ field,
51
+ count = 'subjects'
50
52
  } = _ref;
51
53
  const sortfacetValues = [...facetValues];
52
54
  if (!sortfacetValues) {
53
55
  return facetValues;
54
56
  }
55
57
  if (sortBy === sortType.NUMERIC) {
56
- sortfacetValues.sort((a, b) => b.subjects - a.subjects);
58
+ sortfacetValues.sort((a, b) => b[count] - a[count]);
57
59
  } else {
58
- sortfacetValues.sort((a, b) => lowerCaseString(a.name) > lowerCaseString(b.name) || -(lowerCaseString(a.name) < lowerCaseString(b.name)));
60
+ sortfacetValues.sort((a, b) => lowerCaseString(a[field]) > lowerCaseString(b[field]) || -(lowerCaseString(a[field]) < lowerCaseString(b[field])));
59
61
  }
60
62
  if (sort_type === sortType.CUSTOM_NUMBER && sortBy !== sortType.NUMERIC) {
61
63
  sortfacetValues.sort((a, b) => {
62
- const aNumbs = getNumberArray(a.name);
63
- const bNumbs = getNumberArray(b.name);
64
+ const aNumbs = getNumberArray(a[field]);
65
+ const bNumbs = getNumberArray(b[field]);
64
66
  const aNumb = Number(aNumbs[0]);
65
67
  const bNumb = Number(bNumbs[0]);
66
68
  return aNumbs.length === bNumbs.length ? aNumb > bNumb : -(aNumb <= bNumb);
67
69
  });
68
70
  }
69
71
  if (sort_type === sortType.RANGE && sortBy !== sortType.NUMERIC) {
70
- sortfacetValues.sort((a, b) => startIndex(a.name) > startIndex(b.name) || -(startIndex(a.name) < startIndex(b.name)));
72
+ sortfacetValues.sort((a, b) => startIndex(a[field]) > startIndex(b[field]) || -(startIndex(a[field]) < startIndex(b[field])));
71
73
  }
72
74
  /**
73
75
  * Display checked item always on top
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bento-core/facet-filter",
3
- "version": "1.0.1-icdc.0",
3
+ "version": "1.0.1-icdc.1",
4
4
  "description": "### Bento core sidebar design:",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/FacetFilterController.js CHANGED
@@ -25,6 +25,7 @@ const FacetFilterController = (props) => {
25
25
  data,
26
26
  facetsConfig,
27
27
  facetSectionConfig,
28
+ tooltipText = {},
28
29
  } = props;
29
30
 
30
31
  const updateFacetState = (filterSections) => {
@@ -33,9 +34,15 @@ const FacetFilterController = (props) => {
33
34
  for (const [key, value] of Object.entries(filterState)) {
34
35
  updateSections.forEach((sideBar) => {
35
36
  if (sideBar.type === InputTypes.CHECKBOX && sideBar.datafield === key) {
36
- sideBar.facetValues.forEach((item) => {
37
- item.isChecked = value[item.name] ? value[item.name] : false;
37
+ const { facetValues = [] } = sideBar;
38
+ const updateFacetVals = facetValues.map((item) => {
39
+ const facetVal = item[sideBar.field];
40
+ return {
41
+ ...item,
42
+ isChecked: value[facetVal] ? value[facetVal] : false,
43
+ };
38
44
  });
45
+ sideBar.facetValues = updateFacetVals;
39
46
  }
40
47
  if (sideBar.type === InputTypes.SLIDER && sideBar.datafield === key) {
41
48
  sideBar.facetValues = value;
@@ -45,9 +52,12 @@ const FacetFilterController = (props) => {
45
52
  } else {
46
53
  updateSections.forEach((sideBar) => {
47
54
  if (sideBar.type === InputTypes.CHECKBOX) {
48
- sideBar.facetValues.forEach((item) => {
49
- item.isChecked = false;
50
- });
55
+ const { facetValues = [] } = sideBar;
56
+ const updateFacetVals = facetValues.map((item) => ({
57
+ ...item,
58
+ isChecked: false,
59
+ }));
60
+ sideBar.facetValues = updateFacetVals;
51
61
  }
52
62
  /**
53
63
  * set default value for slider - on clear all filter
@@ -83,6 +93,7 @@ const FacetFilterController = (props) => {
83
93
  * Construct filter object
84
94
  * 1. add facet values to facets
85
95
  * 2. add 'name' key to each facet value
96
+ * 3. add '
86
97
  */
87
98
  const addFacetValues = (facets) => {
88
99
  const updateFacets = [];
@@ -90,19 +101,13 @@ const FacetFilterController = (props) => {
90
101
  facets.forEach((facet) => {
91
102
  const updateFacet = { ...facet, facetValues: [] };
92
103
  const {
93
- field,
94
104
  ApiLowerBoundName,
95
105
  ApiUpperBoundName,
96
106
  apiForFiltering,
97
107
  } = updateFacet;
98
108
  if (data[apiForFiltering]) {
99
109
  if (Array.isArray(data[apiForFiltering])) {
100
- const updateField = data[apiForFiltering].map((item) => {
101
- const addField = { ...item };
102
- addField.name = item[field];
103
- return addField;
104
- });
105
- updateFacet.facetValues = updateField;
110
+ updateFacet.facetValues = data[apiForFiltering];
106
111
  }
107
112
  /**
108
113
  * add object to facet values
@@ -125,7 +130,7 @@ const FacetFilterController = (props) => {
125
130
  * Generate facet sections state
126
131
  *
127
132
  */
128
- const displayFacets = facetsConfig.filter((facet) => facet.show).slice(0, 16);
133
+ const displayFacets = facetsConfig.filter((facet) => facet.show);
129
134
  const facetStates = addFacetValues(displayFacets);
130
135
  const updateState = updateFacetState(facetStates);
131
136
  const facetSections = arrangeBySections(updateState);
package/src/FacetFilterView.js CHANGED
@@ -3,13 +3,11 @@
3
3
  import React from 'react';
4
4
  import {
5
5
  Divider,
6
- List,
7
6
  withStyles,
8
7
  } from '@material-ui/core';
9
8
  import styles from './FacetFilterStyle';
10
9
  import FacetSectionView from './components/section/FacetSectionView';
11
10
  import FacetView from './components/facet/ReduxFacetView';
12
- import FilterItems from './components/inputs/FilterItems';
13
11
 
14
12
  const BentoFacetFilter = ({
15
13
  sideBarSections,
@@ -33,13 +31,7 @@ const BentoFacetFilter = ({
33
31
  <FacetView
34
32
  facet={facet}
35
33
  CustomView={CustomFacetView}
36
- >
37
- <List className={`List_${facet.label}`}>
38
- <FilterItems
39
- facet={facet}
40
- />
41
- </List>
42
- </FacetView>
34
+ />
43
35
  ))}
44
36
  </FacetSectionView>
45
37
  </>
package/src/components/facet/FacetView.js CHANGED
@@ -152,13 +152,16 @@ const FacetView = ({
152
152
  </div>
153
153
  )
154
154
  }
155
- <FilterItems
156
- facet={facet}
157
- sortBy={sortBy}
158
- />
155
+ {(expand)
156
+ && (
157
+ <FilterItems
158
+ facet={facet}
159
+ sortBy={sortBy}
160
+ />
161
+ )}
159
162
  </Accordion>
160
163
  {
161
- (!expand && type === InputTypes.CHECKBOX) && (
164
+ (!expand && type === InputTypes.CHECKBOX && selectedItems.length > 0) && (
162
165
  <>
163
166
  <List id="filter_Items">
164
167
  <FilterItems
package/src/components/inputs/checkbox/CheckboxView.js CHANGED
@@ -5,6 +5,8 @@
5
5
  /* eslint-disable object-curly-newline */
6
6
  /* eslint-disable object-shorthand */
7
7
  /* eslint-disable react/jsx-one-expression-per-line */
8
+ /* eslint-disable no-useless-escape */
9
+
8
10
  import React from 'react';
9
11
  import { withStyles } from '@material-ui/core/styles';
10
12
  import {
@@ -22,8 +24,6 @@ import {
22
24
  } from '@material-ui/icons';
23
25
  import styles from './CheckboxStyle';
24
26
 
25
- const alignment = 'flex-start';
26
-
27
27
  const CheckBoxView = ({
28
28
  classes,
29
29
  checkboxItem,
@@ -32,16 +32,21 @@ const CheckBoxView = ({
32
32
  facet,
33
33
  }) => {
34
34
  const {
35
- name,
36
- subjects,
37
35
  isChecked = false,
38
36
  index,
39
37
  section,
40
38
  tooltip,
41
- label,
42
39
  } = checkboxItem;
40
+ const {
41
+ field = 'group',
42
+ count = 'subjects',
43
+ customCount = (text) => `(${text})`,
44
+ } = facet;
45
+
43
46
  const indexType = index % 2 === 0 ? 'Even' : 'Odd';
44
- const checkedSection = `${section}`.toLowerCase().replace(' ', '_');
47
+ const checkedSection = `${section}`.toLowerCase().replace(/\ /g, '_');
48
+
49
+ const name = checkboxItem[field] || 'N/A';
45
50
 
46
51
  const handleToggle = () => {
47
52
  const toggleCheckBoxItem = {
@@ -60,9 +65,9 @@ const CheckBoxView = ({
60
65
  [`${checkedSection}NameChecked`]: isChecked,
61
66
  })}
62
67
  >
63
- {label ? (
64
- <Typography className={classes.checkboxLabel}>{label}</Typography>
65
- ) : (<Typography className={classes.checkboxName}>{name}</Typography>)}
68
+ <Typography className={classes.checkboxName}>
69
+ {name}
70
+ </Typography>
66
71
  </Box>
67
72
  );
68
73
 
@@ -78,7 +83,12 @@ const CheckBoxView = ({
78
83
  >
79
84
  <Checkbox
80
85
  id={`checkbox_${facet.label}_${name}`}
81
- icon={<CheckBoxBlankIcon style={{ fontSize: 18 }} />}
86
+ icon={
87
+ <CheckBoxBlankIcon
88
+ style={{ fontSize: 18 }}
89
+ className={checkedSection}
90
+ />
91
+ }
82
92
  onClick={handleToggle}
83
93
  checked={isChecked}
84
94
  checkedIcon={(
@@ -96,20 +106,20 @@ const CheckBoxView = ({
96
106
  { tooltip ? (
97
107
  <Tooltip id={datafield} title={tooltip}>
98
108
  <div className={datafield}>
99
- <LabelComponent />
109
+ {name}
100
110
  </div>
101
111
  </Tooltip>
102
112
  ) : (
103
113
  <LabelComponent />
104
114
  )}
105
- <ListItemText />
115
+ <ListItemText className={`${checkedSection}_md_space`} />
106
116
  <Typography
107
117
  className={clsx(`${checkedSection}Subjects`, {
108
118
  [`${checkedSection}SubjectUnChecked`]: !isChecked,
109
119
  [`${checkedSection}SubjectChecked`]: isChecked,
110
120
  })}
111
121
  >
112
- {`(${subjects})`}
122
+ {customCount(checkboxItem[count] || 0)}
113
123
  </Typography>
114
124
  </ListItem>
115
125
  <Divider
package/src/utils/Sort.js CHANGED
@@ -37,22 +37,28 @@ export const getNumberArray = (range) => {
37
37
  * @param {array} checkboxData
38
38
  * @return {array}
39
39
  */
40
- export const sortBySection = ({ facetValues, sort_type, sortBy }) => {
40
+ export const sortBySection = ({
41
+ facetValues,
42
+ sort_type,
43
+ sortBy,
44
+ field,
45
+ count = 'subjects',
46
+ }) => {
41
47
  const sortfacetValues = [...facetValues];
42
48
  if (!sortfacetValues) {
43
49
  return facetValues;
44
50
  }
45
51
  if (sortBy === sortType.NUMERIC) {
46
- sortfacetValues.sort((a, b) => b.subjects - a.subjects);
52
+ sortfacetValues.sort((a, b) => b[count] - a[count]);
47
53
  } else {
48
- sortfacetValues.sort(((a, b) => (lowerCaseString(a.name) > lowerCaseString(b.name)
49
- || -(lowerCaseString(a.name) < lowerCaseString(b.name)))));
54
+ sortfacetValues.sort(((a, b) => (lowerCaseString(a[field]) > lowerCaseString(b[field])
55
+ || -(lowerCaseString(a[field]) < lowerCaseString(b[field])))));
50
56
  }
51
57
 
52
58
  if (sort_type === sortType.CUSTOM_NUMBER && sortBy !== sortType.NUMERIC) {
53
59
  sortfacetValues.sort((a, b) => {
54
- const aNumbs = getNumberArray(a.name);
55
- const bNumbs = getNumberArray(b.name);
60
+ const aNumbs = getNumberArray(a[field]);
61
+ const bNumbs = getNumberArray(b[field]);
56
62
  const aNumb = Number(aNumbs[0]);
57
63
  const bNumb = Number(bNumbs[0]);
58
64
  return (aNumbs.length === bNumbs.length) ? aNumb > bNumb : -(aNumb <= bNumb);
@@ -60,8 +66,8 @@ export const sortBySection = ({ facetValues, sort_type, sortBy }) => {
60
66
  }
61
67
 
62
68
  if (sort_type === sortType.RANGE && sortBy !== sortType.NUMERIC) {
63
- sortfacetValues.sort(((a, b) => (startIndex(a.name) > startIndex(b.name)
64
- || -(startIndex(a.name) < startIndex(b.name)))));
69
+ sortfacetValues.sort(((a, b) => (startIndex(a[field]) > startIndex(b[field])
70
+ || -(startIndex(a[field]) < startIndex(b[field])))));
65
71
  }
66
72
  /**
67
73
  * Display checked item always on top