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

package/dist/components/facet/FacetStyle.js

@@ -82,21 +82,32 @@ var _default = () => ({
   },
   searchContainer: {
     display: 'flex',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    position: 'relative'
   },
   searchBox: {
     fontSize: '11px',
     fontFamily: 'Nunito',
-    width: '245px',
+    width: 'calc(100% - 26px)',
     height: '24px',
     marginTop: '12px',
-    marginBottom: '5px',
     borderRadius: '8px',
     background: "url(".concat(_Search_Icon.default, ") right 5px center no-repeat"),
     marginLeft: '6px',
     border: '1px solid',
     padding: '5px'
   },
+  searchBoxWithText: {
+    fontSize: '11px',
+    fontFamily: 'Nunito',
+    width: 'calc(100% - 26px)',
+    height: '24px',
+    marginTop: '12px',
+    borderRadius: '8px',
+    marginLeft: '6px',
+    border: '1px solid',
+    padding: '5px'
+  },
   expandedDisplayButton: {
     background: '#4D889E',
     color: 'white',
@@ -106,6 +117,13 @@ var _default = () => ({
     marginBottom: '5px',
     borderRadius: '8px',
     fontSize: '11px'
+  },
+  clearTextButton: {
+    padding: '0px',
+    height: '20px',
+    position: 'absolute',
+    right: '14px',
+    top: '14px'
   }
 });
 exports.default = _default;

package/dist/components/facet/SearchFacetView.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactRouterDom = require("react-router-dom");
 var _util = require("@bento-core/util");
 var _core = require("@material-ui/core");
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _AccordionSummaryView = _interopRequireDefault(require("../summary/AccordionSummaryView"));
 var _Types = require("../inputs/Types");
@@ -87,12 +88,24 @@ const SearchFacetView = _ref => {
   }, "No data for this field")), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.searchContainer
   }, /*#__PURE__*/_react.default.createElement("input", {
-    className: classes.searchBox,
+    className: searchText && searchText.trim() !== '' ? classes.searchBoxWithText : classes.searchBox,
     value: searchText,
     type: "text",
     placeholder: "e.g. Sarcoma, Neoplasm",
     onChange: e => onSearchTextChange(facet.datafield, e.target.value)
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  }), searchText && searchText.trim() !== '' && /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+    "aria-label": "close",
+    onClick: () => onSearchTextChange(facet.datafield, ''),
+    className: classes.clearTextButton,
+    sx: theme => ({
+      position: 'absolute',
+      right: 7,
+      top: 7,
+      color: theme.palette.grey[500]
+    })
+  }, /*#__PURE__*/_react.default.createElement(_Close.default, {
+    fontSize: "small"
+  }))), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.sortGroup
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: classes.sortGroupIcon
@@ -111,14 +124,14 @@ const SearchFacetView = _ref => {
       [classes.highlight]: sortBy === _Sort.sortType.ALPHABET
     }),
     onClick: () => {
-      onSortChange(_Sort.sortType.ALPHABET);
+      onSortChange(facet.datafield, _Sort.sortType.ALPHABET);
     }
   }, "Sort alphabetically"), /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _clsx.default)(classes.sortGroupItemCounts, {
       [classes.highlight]: sortBy === _Sort.sortType.NUMERIC
     }),
     onClick: () => {
-      onSortChange(_Sort.sortType.NUMERIC);
+      onSortChange(facet.datafield, _Sort.sortType.NUMERIC);
     }
   }, "Sort by count"))), /*#__PURE__*/_react.default.createElement(_SearchFilterItems.default, {
     searchText: searchText,

package/dist/components/inputs/ModalFilterItems.js

@@ -53,12 +53,11 @@ const ModalFilterItems = _ref => {
     section
   } = facet;
   const initialItemSize = 40;
-  const [total, setTotal] = (0, _react.useState)(0);
   const [displayCount, setDisplayCount] = (0, _react.useState)(initialItemSize);
   const contentRef = (0, _react.useRef)(null);
   const [height, setHeight] = (0, _react.useState)(0);
   const scrollableRef = (0, _react.useRef)(null);
-  let sortFilters = (0, _Sort.sortBySection)(_objectSpread(_objectSpread({}, facet), {}, {
+  const sortFilters = (0, _Sort.sortBySection)(_objectSpread(_objectSpread({}, facet), {}, {
     sortBy
   }));
   const checkedItems = sortFilters.filter(item => item.isChecked).map((item, index) => /*#__PURE__*/_react.default.createElement(_ReduxModalCheckbox.default, {
@@ -79,7 +78,8 @@ const ModalFilterItems = _ref => {
       }));
     }
   }
-  const uncheckedItems = searchItems(sortFilters.filter(item => !item.isChecked), searchText).slice(0, displayCount).map((item, index) => /*#__PURE__*/_react.default.createElement(_ReduxModalCheckbox.default, {
+  const newUncheckedFullList = searchItems(sortFilters.filter(item => !item.isChecked), searchText);
+  const uncheckedItems = newUncheckedFullList.slice(0, displayCount).map((item, index) => /*#__PURE__*/_react.default.createElement(_ReduxModalCheckbox.default, {
     checkboxItem: _objectSpread(_objectSpread({}, item), {}, {
       index,
       section
@@ -104,15 +104,10 @@ const ModalFilterItems = _ref => {
   }, [checkedItems.length]);
   (0, _react.useEffect)(() => {
     scrollableRef.current.scrollTo(0, 0);
-    sortFilters = (0, _Sort.sortBySection)(_objectSpread(_objectSpread({}, facet), {}, {
-      sortBy
-    }));
-    const newUncheckedFullList = searchItems(sortFilters.filter(item => !item.isChecked), searchText);
     setDisplayCount(initialItemSize);
-    setTotal(newUncheckedFullList.length);
   }, [searchText, sortBy]);
   const handleScroll = e => {
-    if (displayCount < total) {
+    if (displayCount < newUncheckedFullList.length) {
       const {
         scrollTop,
         scrollHeight,
@@ -131,7 +126,7 @@ const ModalFilterItems = _ref => {
     className: classes.selectionText
   }, "".concat(checkedItems.length, " selections ")), /*#__PURE__*/_react.default.createElement("span", {
     className: classes.totalText
-  }, "of ".concat(total, " search results"))), /*#__PURE__*/_react.default.createElement("span", {
+  }, "of ".concat(checkedItems.length + newUncheckedFullList.length, " search results"))), /*#__PURE__*/_react.default.createElement("span", {
     className: classes.sortGroupIcon
   }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
     style: {

package/dist/components/inputs/SearchFilterItems.js

@@ -50,7 +50,6 @@ const SearchFilterItems = _ref => {
     section
   } = facet;
   const initialItemSize = 20;
-  const [total, setTotal] = (0, _react.useState)(0);
   const [displayCount, setDisplayCount] = (0, _react.useState)(initialItemSize);
   const [open, setOpen] = (0, _react.useState)(false);
   const scrollableRef = (0, _react.useRef)(null);
@@ -66,7 +65,8 @@ const SearchFilterItems = _ref => {
     facet: facet,
     queryParams: queryParams
   }));
-  const uncheckedItems = searchItems(sortFilters.filter(item => !item.isChecked), searchText).slice(0, displayCount).map((item, index) => /*#__PURE__*/_react.default.createElement(_ReduxSearchCheckbox.default, {
+  const newUncheckedFullList = searchItems(sortFilters.filter(item => !item.isChecked), searchText);
+  const uncheckedItems = newUncheckedFullList.slice(0, displayCount).map((item, index) => /*#__PURE__*/_react.default.createElement(_ReduxSearchCheckbox.default, {
     checkboxItem: _objectSpread(_objectSpread({}, item), {}, {
       index,
       section
@@ -77,12 +77,10 @@ const SearchFilterItems = _ref => {
   }));
   (0, _react.useEffect)(() => {
     scrollableRef.current.scrollTo(0, 0);
-    const newUncheckedFullList = searchItems(sortFilters.filter(item => !item.isChecked), searchText);
     setDisplayCount(initialItemSize);
-    setTotal(newUncheckedFullList.length);
   }, [searchText]);
   const handleScroll = e => {
-    if (displayCount < total) {
+    if (displayCount < newUncheckedFullList.length) {
       const {
         scrollTop,
         scrollHeight,
@@ -109,7 +107,7 @@ const SearchFilterItems = _ref => {
     variant: "text",
     className: classes.expandedDisplayButton,
     onClick: () => setOpen(!open)
-  }, "VIEW EXPANDED DISPLAY (".concat(checkedItems.length + total, ")"))));
+  }, "VIEW EXPANDED DISPLAY (".concat(checkedItems.length + newUncheckedFullList.length, ")"))));
 };
 var _default = (0, _core.withStyles)(_FilterItemStyle.default)(SearchFilterItems);
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/facet-filter",
-  "version": "1.0.1-ccdihub.29",
+  "version": "1.0.1-ccdihub.30",
   "description": "### Bento core sidebar design:",
   "main": "dist/index.js",
   "scripts": {

package/src/components/facet/FacetStyle.js

@@ -77,20 +77,31 @@ export default () => ({
   searchContainer: {
     display: 'flex',
     justifyContent: 'center',
+    position: 'relative',
   },
   searchBox: {
     fontSize: '11px',
     fontFamily: 'Nunito',
-    width: '245px',
+    width: 'calc(100% - 26px)',
     height: '24px',
     marginTop: '12px',
-    marginBottom: '5px',
     borderRadius: '8px',
     background: `url(${SearchIcon}) right 5px center no-repeat`,
     marginLeft: '6px',
     border: '1px solid',
     padding: '5px',
   },
+  searchBoxWithText: {
+    fontSize: '11px',
+    fontFamily: 'Nunito',
+    width: 'calc(100% - 26px)',
+    height: '24px',
+    marginTop: '12px',
+    borderRadius: '8px',
+    marginLeft: '6px',
+    border: '1px solid',
+    padding: '5px',
+  },
   expandedDisplayButton: {
     background: '#4D889E',
     color: 'white',
@@ -101,4 +112,11 @@ export default () => ({
     borderRadius: '8px',
     fontSize: '11px',
   },
+  clearTextButton: {
+    padding: '0px',
+    height: '20px',
+    position: 'absolute',
+    right: '14px',
+    top: '14px',
+  },
 });

package/src/components/facet/SearchFacetView.js

@@ -9,7 +9,9 @@ import {
   List,
   withStyles,
   Icon,
+  IconButton,
 } from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
 import clsx from 'clsx';
 import CustomAccordionSummary from '../summary/AccordionSummaryView';
 import { InputTypes } from '../inputs/Types';
@@ -101,7 +103,32 @@ const SearchFacetView = ({
           )
         }
         <div className={classes.searchContainer}>
-          <input className={classes.searchBox} value={searchText} type="text" placeholder="e.g. Sarcoma, Neoplasm" onChange={(e) => onSearchTextChange(facet.datafield, e.target.value)} />
+          <input
+            className={searchText && searchText.trim() !== '' ? classes.searchBoxWithText : classes.searchBox}
+            value={searchText}
+            type="text"
+            placeholder="e.g. Sarcoma, Neoplasm"
+            onChange={(e) => onSearchTextChange(facet.datafield, e.target.value)}
+          />
+          {
+            searchText
+            && searchText.trim() !== ''
+            && (
+            <IconButton
+              aria-label="close"
+              onClick={() => onSearchTextChange(facet.datafield, '')}
+              className={classes.clearTextButton}
+              sx={(theme) => ({
+                position: 'absolute',
+                right: 7,
+                top: 7,
+                color: theme.palette.grey[500],
+              })}
+            >
+              <CloseIcon fontSize="small" />
+            </IconButton>
+            )
+          }
         </div>
         <div className={classes.sortGroup}>
           <span className={classes.sortGroupIcon}>
@@ -128,7 +155,7 @@ const SearchFacetView = ({
                       })
                     }
                 onClick={() => {
-                  onSortChange(sortType.ALPHABET);
+                  onSortChange(facet.datafield, sortType.ALPHABET);
                 }}
               >
                 Sort alphabetically
@@ -140,7 +167,7 @@ const SearchFacetView = ({
                       })
                     }
                 onClick={() => {
-                  onSortChange(sortType.NUMERIC);
+                  onSortChange(facet.datafield, sortType.NUMERIC);
                 }}
               >
                 Sort by count

package/src/components/inputs/ModalFilterItems.js

@@ -44,12 +44,11 @@ const ModalFilterItems = ({
     datafield, section,
   } = facet;
   const initialItemSize = 40;
-  const [total, setTotal] = useState(0);
   const [displayCount, setDisplayCount] = useState(initialItemSize);
   const contentRef = useRef(null);
   const [height, setHeight] = useState(0);
   const scrollableRef = useRef(null);
-  let sortFilters = sortBySection({ ...facet, sortBy });
+  const sortFilters = sortBySection({ ...facet, sortBy });
 
   const checkedItems = sortFilters.filter((item) => item.isChecked)
     .map((item, index) => (<ReduxModalCheckbox
@@ -66,9 +65,11 @@ const ModalFilterItems = ({
     }
   }
 
-  const uncheckedItems = searchItems(sortFilters.filter((item) => !item.isChecked),
-    searchText)
-    .slice(0, displayCount).map((item, index) => (<ReduxModalCheckbox
+  const newUncheckedFullList = searchItems(sortFilters.filter((item) => !item.isChecked),
+    searchText);
+
+  const uncheckedItems = newUncheckedFullList.slice(0, displayCount)
+    .map((item, index) => (<ReduxModalCheckbox
       checkboxItem={{ ...item, index, section }}
       datafield={datafield}
       facet={facet}
@@ -90,15 +91,11 @@ const ModalFilterItems = ({
 
   useEffect(() => {
     scrollableRef.current.scrollTo(0, 0);
-    sortFilters = sortBySection({ ...facet, sortBy });
-    const newUncheckedFullList = searchItems(sortFilters.filter((item) => !item.isChecked),
-      searchText);
     setDisplayCount(initialItemSize);
-    setTotal(newUncheckedFullList.length);
   }, [searchText, sortBy]);
 
   const handleScroll = (e) => {
-    if (displayCount < total) {
+    if (displayCount < newUncheckedFullList.length) {
       const { scrollTop, scrollHeight, clientHeight } = e.target;
       const position = Math.ceil((scrollTop / (scrollHeight - clientHeight)) * 100);
       // console.log('position:', position);
@@ -113,7 +110,7 @@ const ModalFilterItems = ({
       <div className={classes.sortingContainer}>
         <div>
           <span className={classes.selectionText}>{`${checkedItems.length} selections `}</span>
-          <span className={classes.totalText}>{`of ${total} search results`}</span>
+          <span className={classes.totalText}>{`of ${checkedItems.length + newUncheckedFullList.length} search results`}</span>
         </div>
         <span className={classes.sortGroupIcon}>
           <Icon

package/src/components/inputs/SearchFilterItems.js

@@ -41,7 +41,6 @@ const SearchFilterItems = ({
     datafield, section,
   } = facet;
   const initialItemSize = 20;
-  const [total, setTotal] = useState(0);
   const [displayCount, setDisplayCount] = useState(initialItemSize);
   const [open, setOpen] = useState(false);
   const scrollableRef = useRef(null);
@@ -55,9 +54,11 @@ const SearchFilterItems = ({
       queryParams={queryParams}
     />));
 
-  const uncheckedItems = searchItems(sortFilters.filter((item) => !item.isChecked),
-    searchText)
-    .slice(0, displayCount).map((item, index) => (<ReduxSearchCheckbox
+  const newUncheckedFullList = searchItems(sortFilters.filter((item) => !item.isChecked),
+    searchText);
+
+  const uncheckedItems = newUncheckedFullList.slice(0, displayCount)
+    .map((item, index) => (<ReduxSearchCheckbox
       checkboxItem={{ ...item, index, section }}
       datafield={datafield}
       facet={facet}
@@ -66,14 +67,11 @@ const SearchFilterItems = ({
 
   useEffect(() => {
     scrollableRef.current.scrollTo(0, 0);
-    const newUncheckedFullList = searchItems(sortFilters.filter((item) => !item.isChecked),
-      searchText);
     setDisplayCount(initialItemSize);
-    setTotal(newUncheckedFullList.length);
   }, [searchText]);
 
   const handleScroll = (e) => {
-    if (displayCount < total) {
+    if (displayCount < newUncheckedFullList.length) {
       const { scrollTop, scrollHeight, clientHeight } = e.target;
       const position = Math.ceil((scrollTop / (scrollHeight - clientHeight)) * 100);
       if (position >= 90) {
@@ -100,7 +98,7 @@ const SearchFilterItems = ({
       </div>
       <div className={classes.searchContainer}>
         <Button variant="text" className={classes.expandedDisplayButton} onClick={() => setOpen(!open)}>
-          {`VIEW EXPANDED DISPLAY (${checkedItems.length + total})`}
+          {`VIEW EXPANDED DISPLAY (${checkedItems.length + newUncheckedFullList.length})`}
         </Button>
       </div>
     </>