@bento-core/facet-filter 1.0.1-ccdiintegrated.2 → 1.0.1-ccdiintegrated.4

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 +38 -27
  2. package/dist/components/inputs/SearchFilterItems.js +1 -1
  3. package/package.json +1 -1
  4. package/src/components/inputs/FilterItems.js +46 -27
  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; }
@@ -21,7 +23,8 @@ const FilterItems = _ref => {
21
23
  queryParams,
22
24
  sortBy,
23
25
  timeUnit,
24
- basePath
26
+ basePath,
27
+ classes
25
28
  } = _ref;
26
29
  const {
27
30
  type,
@@ -31,31 +34,39 @@ const FilterItems = _ref => {
31
34
  const sortFilters = (0, _Sort.sortBySection)(_objectSpread(_objectSpread({}, facet), {}, {
32
35
  sortBy
33
36
  }));
34
- const filterItems = () => {
35
- switch (type) {
36
- case _Types.InputTypes.CHECKBOX:
37
- return sortFilters.map((item, index) => /*#__PURE__*/_react.default.createElement(_ReduxCheckbox.default, {
38
- checkboxItem: _objectSpread(_objectSpread({}, item), {}, {
39
- index,
40
- section
41
- }),
42
- datafield: datafield,
43
- facet: facet,
44
- queryParams: queryParams,
45
- basePath: basePath
46
- }));
47
- case _Types.InputTypes.SLIDER:
48
- return /*#__PURE__*/_react.default.createElement(_ReduxSlider.default, {
49
- facet: facet,
50
- queryParams: queryParams,
51
- timeUnit: timeUnit,
52
- basePath: basePath
53
- });
54
- default:
55
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
56
- }
57
- };
58
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, filterItems());
37
+ if (type === _Types.InputTypes.SLIDER) {
38
+ return /*#__PURE__*/_react.default.createElement(_ReduxSlider.default, {
39
+ facet: facet,
40
+ queryParams: queryParams,
41
+ timeUnit: timeUnit
42
+ });
43
+ }
44
+ if (type !== _Types.InputTypes.CHECKBOX) {
45
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
46
+ }
47
+ const checkedItems = sortFilters.filter(item => item.isChecked).map((item, index) => /*#__PURE__*/_react.default.createElement(_ReduxCheckbox.default, {
48
+ checkboxItem: _objectSpread(_objectSpread({}, item), {}, {
49
+ index,
50
+ section
51
+ }),
52
+ datafield: datafield,
53
+ facet: facet,
54
+ queryParams: queryParams,
55
+ basePath: basePath
56
+ }));
57
+ const uncheckedItems = sortFilters.filter(item => !item.isChecked).map((item, index) => /*#__PURE__*/_react.default.createElement(_ReduxCheckbox.default, {
58
+ checkboxItem: _objectSpread(_objectSpread({}, item), {}, {
59
+ index,
60
+ section
61
+ }),
62
+ datafield: datafield,
63
+ facet: facet,
64
+ queryParams: queryParams,
65
+ basePath: basePath
66
+ }));
67
+ return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, checkedItems), uncheckedItems.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
68
+ className: classes.itemsContainer
69
+ }, uncheckedItems));
59
70
  };
60
- var _default = FilterItems;
71
+ var _default = (0, _core.withStyles)(_FilterItemStyle.default)(FilterItems);
61
72
  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.2",
3
+ "version": "1.0.1-ccdiintegrated.4",
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,10 +1,12 @@
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,
@@ -12,40 +14,57 @@ const FilterItems = ({
12
14
  sortBy,
13
15
  timeUnit,
14
16
  basePath,
17
+ classes,
15
18
  }) => {
16
19
  const {
17
20
  type, datafield, section,
18
21
  } = facet;
19
22
  const sortFilters = sortBySection({ ...facet, sortBy });
20
- const filterItems = () => {
21
- switch (type) {
22
- case InputTypes.CHECKBOX:
23
- return sortFilters.map((item, index) => (
24
- <ReduxCheckbox
25
- checkboxItem={{ ...item, index, section }}
26
- datafield={datafield}
27
- facet={facet}
28
- queryParams={queryParams}
29
- basePath={basePath}
30
- />
31
- ));
32
- case InputTypes.SLIDER:
33
- return (<ReduxSlider
34
- facet={facet}
35
- queryParams={queryParams}
36
- timeUnit={timeUnit}
37
- basePath={basePath}
38
- />);
39
- default:
40
- return (<></>);
41
- }
42
- };
23
+
24
+ if (type === InputTypes.SLIDER) {
25
+ return (
26
+ <ReduxSlider facet={facet} queryParams={queryParams} timeUnit={timeUnit} />
27
+ );
28
+ }
29
+
30
+ if (type !== InputTypes.CHECKBOX) {
31
+ return (<></>);
32
+ }
33
+
34
+ const checkedItems = sortFilters.filter((item) => item.isChecked)
35
+ .map((item, index) => (
36
+ <ReduxCheckbox
37
+ checkboxItem={{ ...item, index, section }}
38
+ datafield={datafield}
39
+ facet={facet}
40
+ queryParams={queryParams}
41
+ basePath={basePath}
42
+ />
43
+ ));
44
+
45
+ const uncheckedItems = sortFilters.filter((item) => !item.isChecked)
46
+ .map((item, index) => (
47
+ <ReduxCheckbox
48
+ checkboxItem={{ ...item, index, section }}
49
+ datafield={datafield}
50
+ facet={facet}
51
+ queryParams={queryParams}
52
+ basePath={basePath}
53
+ />
54
+ ));
43
55
 
44
56
  return (
45
- <>
46
- {filterItems()}
47
- </>
57
+ <div>
58
+ <div>
59
+ {checkedItems}
60
+ </div>
61
+ {uncheckedItems.length > 0 && (
62
+ <div className={classes.itemsContainer}>
63
+ {uncheckedItems}
64
+ </div>
65
+ )}
66
+ </div>
48
67
  );
49
68
  };
50
69
 
51
- export default FilterItems;
70
+ 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
  );