@bento-core/facet-filter 1.0.1-ccdiintegrated.1 → 1.0.1-ccdiintegrated.3

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 (5) hide show
  1. package/dist/components/inputs/FilterItems.js +36 -25
  2. package/dist/components/inputs/SearchFilterItems.js +1 -1
  3. package/package.json +1 -1
  4. package/src/components/inputs/FilterItems.js +44 -21
  5. package/src/components/inputs/SearchFilterItems.js +5 -3
package/dist/components/inputs/FilterItems.js CHANGED
@@ -5,10 +5,12 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var _react = _interopRequireDefault(require("react"));
8
+ var _core = require("@material-ui/core");
8
9
  var _ReduxCheckbox = _interopRequireDefault(require("./checkbox/ReduxCheckbox"));
9
10
  var _ReduxSlider = _interopRequireDefault(require("./slider/ReduxSlider"));
10
11
  var _Types = require("./Types");
11
12
  var _Sort = require("../../utils/Sort");
13
+ var _FilterItemStyle = _interopRequireDefault(require("./FilterItemStyle"));
12
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
15
  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; }
14
16
  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; }
@@ -20,7 +22,8 @@ const FilterItems = _ref => {
20
22
  facet,
21
23
  queryParams,
22
24
  sortBy,
23
- timeUnit
25
+ timeUnit,
26
+ classes
24
27
  } = _ref;
25
28
  const {
26
29
  type,
@@ -30,29 +33,37 @@ const FilterItems = _ref => {
30
33
  const sortFilters = (0, _Sort.sortBySection)(_objectSpread(_objectSpread({}, facet), {}, {
31
34
  sortBy
32
35
  }));
33
- const filterItems = () => {
34
- switch (type) {
35
- case _Types.InputTypes.CHECKBOX:
36
- return sortFilters.map((item, index) => /*#__PURE__*/_react.default.createElement(_ReduxCheckbox.default, {
37
- checkboxItem: _objectSpread(_objectSpread({}, item), {}, {
38
- index,
39
- section
40
- }),
41
- datafield: datafield,
42
- facet: facet,
43
- queryParams: queryParams
44
- }));
45
- case _Types.InputTypes.SLIDER:
46
- return /*#__PURE__*/_react.default.createElement(_ReduxSlider.default, {
47
- facet: facet,
48
- queryParams: queryParams,
49
- timeUnit: timeUnit
50
- });
51
- default:
52
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
53
- }
54
- };
55
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, filterItems());
36
+ if (type === _Types.InputTypes.SLIDER) {
37
+ return /*#__PURE__*/_react.default.createElement(_ReduxSlider.default, {
38
+ facet: facet,
39
+ queryParams: queryParams,
40
+ timeUnit: timeUnit
41
+ });
42
+ }
43
+ if (type !== _Types.InputTypes.CHECKBOX) {
44
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
45
+ }
46
+ const checkedItems = sortFilters.filter(item => item.isChecked).map((item, index) => /*#__PURE__*/_react.default.createElement(_ReduxCheckbox.default, {
47
+ checkboxItem: _objectSpread(_objectSpread({}, item), {}, {
48
+ index,
49
+ section
50
+ }),
51
+ datafield: datafield,
52
+ facet: facet,
53
+ queryParams: queryParams
54
+ }));
55
+ const uncheckedItems = sortFilters.filter(item => !item.isChecked).map((item, index) => /*#__PURE__*/_react.default.createElement(_ReduxCheckbox.default, {
56
+ checkboxItem: _objectSpread(_objectSpread({}, item), {}, {
57
+ index,
58
+ section
59
+ }),
60
+ datafield: datafield,
61
+ facet: facet,
62
+ queryParams: queryParams
63
+ }));
64
+ return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, checkedItems), uncheckedItems.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
65
+ className: classes.itemsContainer
66
+ }, uncheckedItems));
56
67
  };
57
- var _default = FilterItems;
68
+ var _default = (0, _core.withStyles)(_FilterItemStyle.default)(FilterItems);
58
69
  exports.default = _default;
package/dist/components/inputs/SearchFilterItems.js CHANGED
@@ -90,7 +90,7 @@ const SearchFilterItems = _ref => {
90
90
  }
91
91
  }
92
92
  };
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", {
93
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, checkedItems), uncheckedItems.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
94
94
  ref: scrollableRef,
95
95
  className: classes.itemsContainer,
96
96
  onScroll: handleScroll
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bento-core/facet-filter",
3
- "version": "1.0.1-ccdiintegrated.1",
3
+ "version": "1.0.1-ccdiintegrated.3",
4
4
  "description": "### Bento core sidebar design:",
5
5
  "homepage": "https://github.com/CBIIT/bento-frontend#readme",
6
6
  "bugs": {
package/src/components/inputs/FilterItems.js CHANGED
@@ -1,44 +1,67 @@
1
1
  /* eslint-disable react/jsx-wrap-multilines */
2
2
  /* eslint-disable react/jsx-indent */
3
3
  import React from 'react';
4
+ import { withStyles } from '@material-ui/core';
4
5
  import ReduxCheckbox from './checkbox/ReduxCheckbox';
5
6
  import ReduxSlider from './slider/ReduxSlider';
6
7
  import { InputTypes } from './Types';
7
8
  import { sortBySection } from '../../utils/Sort';
9
+ import styles from './FilterItemStyle';
8
10
 
9
11
  const FilterItems = ({
10
12
  facet,
11
13
  queryParams,
12
14
  sortBy,
13
15
  timeUnit,
16
+ classes,
14
17
  }) => {
15
18
  const {
16
19
  type, datafield, section,
17
20
  } = facet;
18
21
  const sortFilters = sortBySection({ ...facet, sortBy });
19
- const filterItems = () => {
20
- switch (type) {
21
- case InputTypes.CHECKBOX:
22
- return sortFilters.map((item, index) => (
23
- <ReduxCheckbox
24
- checkboxItem={{ ...item, index, section }}
25
- datafield={datafield}
26
- facet={facet}
27
- queryParams={queryParams}
28
- />
29
- ));
30
- case InputTypes.SLIDER:
31
- return (<ReduxSlider facet={facet} queryParams={queryParams} timeUnit={timeUnit} />);
32
- default:
33
- return (<></>);
34
- }
35
- };
22
+
23
+ if (type === InputTypes.SLIDER) {
24
+ return (
25
+ <ReduxSlider facet={facet} queryParams={queryParams} timeUnit={timeUnit} />
26
+ );
27
+ }
28
+
29
+ if (type !== InputTypes.CHECKBOX) {
30
+ return (<></>);
31
+ }
32
+
33
+ const checkedItems = sortFilters.filter((item) => item.isChecked)
34
+ .map((item, index) => (
35
+ <ReduxCheckbox
36
+ checkboxItem={{ ...item, index, section }}
37
+ datafield={datafield}
38
+ facet={facet}
39
+ queryParams={queryParams}
40
+ />
41
+ ));
42
+
43
+ const uncheckedItems = sortFilters.filter((item) => !item.isChecked)
44
+ .map((item, index) => (
45
+ <ReduxCheckbox
46
+ checkboxItem={{ ...item, index, section }}
47
+ datafield={datafield}
48
+ facet={facet}
49
+ queryParams={queryParams}
50
+ />
51
+ ));
36
52
 
37
53
  return (
38
- <>
39
- {filterItems()}
40
- </>
54
+ <div>
55
+ <div>
56
+ {checkedItems}
57
+ </div>
58
+ {uncheckedItems.length > 0 && (
59
+ <div className={classes.itemsContainer}>
60
+ {uncheckedItems}
61
+ </div>
62
+ )}
63
+ </div>
41
64
  );
42
65
  };
43
66
 
44
- export default FilterItems;
67
+ export default withStyles(styles)(FilterItems);
package/src/components/inputs/SearchFilterItems.js CHANGED
@@ -83,9 +83,11 @@ const SearchFilterItems = ({
83
83
  <div>
84
84
  {checkedItems}
85
85
  </div>
86
- <div ref={scrollableRef} className={classes.itemsContainer} onScroll={handleScroll}>
87
- {uncheckedItems}
88
- </div>
86
+ {uncheckedItems.length > 0 && (
87
+ <div ref={scrollableRef} className={classes.itemsContainer} onScroll={handleScroll}>
88
+ {uncheckedItems}
89
+ </div>
90
+ )}
89
91
  </div>
90
92
  </>
91
93
  );