@sis-cc/dotstatsuite-visions 7.20.3 → 7.20.5

package/es/VirtualizedTree/VirtualizedTree.js

@@ -1,11 +1,10 @@
 var _extends = Object.assign || 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; };
 
-import React, { Fragment, useRef, useEffect, useState, useMemo } from 'react';
+import React, { useRef, useEffect, useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
 import VirtualizedList from 'react-virtualized/dist/commonjs/List';
-import Button from '@material-ui/core/Button';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ExpandLessIcon from '@material-ui/icons/ExpandLess';
 import List from '@material-ui/core/List';
@@ -62,7 +61,9 @@ var VirtualizedTree = function VirtualizedTree(props) {
       items = props.items,
       labelRenderer = props.labelRenderer,
       labels = props.labels,
-      withExpandControl = props.withExpandControl,
+      expandedIds = props.expandedIds,
+      expand = props.expand,
+      collapse = props.collapse,
       _props$maxTreeHeight = props.maxTreeHeight,
       maxTreeHeight = _props$maxTreeHeight === undefined ? 250 : _props$maxTreeHeight,
       _props$getItemScope = props.getItemScope,
@@ -70,25 +71,21 @@ var VirtualizedTree = function VirtualizedTree(props) {
 
   var theme = useTheme();
 
-  var _useState = useState({}),
-      expandedIds = _useState[0],
-      setExpandedIds = _useState[1];
+  var _useState = useState(undefined),
+      scrollTop = _useState[0],
+      setScrollTop = _useState[1];
 
-  var _useState2 = useState(undefined),
-      scrollTop = _useState2[0],
-      setScrollTop = _useState2[1];
+  var _useState2 = useState([]),
+      shiftIndexes = _useState2[0],
+      setShiftIndexes = _useState2[1];
 
-  var _useState3 = useState([]),
-      shiftIndexes = _useState3[0],
-      setShiftIndexes = _useState3[1];
+  var _useState3 = useState({}),
+      selectIds = _useState3[0],
+      setSelectIds = _useState3[1];
 
-  var _useState4 = useState({}),
-      selectIds = _useState4[0],
-      setSelectIds = _useState4[1];
-
-  var _useState5 = useState(false),
-      isMouseDown = _useState5[0],
-      setIsMouseDown = _useState5[1];
+  var _useState4 = useState(false),
+      isMouseDown = _useState4[0],
+      setIsMouseDown = _useState4[1];
 
   var _useMemo = useMemo(function () {
     var indexedItemsById = R.indexBy(getHierarchicalId, items);
@@ -156,21 +153,26 @@ var VirtualizedTree = function VirtualizedTree(props) {
         apply();
       } : null,
       onMouseDown: function onMouseDown(e) {
-        if (e.ctrlKey) {
-          multiSelect(id);
-        } else if (e.shiftKey) {
-          shiftSelect(index);
-        } else {
-          multiSelect(id);
-          setIsMouseDown(true);
+        if (e.ctrlKey || e.shiftKey) {
+          return;
         }
+        multiSelect(id);
+        setIsMouseDown(true);
       },
       onMouseEnter: isMouseDown ? function (e) {
         if (e.ctrlKey || e.shiftKey) {
           return;
         }
         multiSelect(id);
-      } : null
+      } : null,
+      onClick: function onClick(e) {
+        e.preventDefault();
+        if (e.ctrlKey) {
+          multiSelect(id);
+        } else if (e.shiftKey) {
+          shiftSelect(index);
+        }
+      }
     };
   };
   var onKeyUp = function onKeyUp(e) {
@@ -222,99 +224,68 @@ var VirtualizedTree = function VirtualizedTree(props) {
   }, [scrollTop]);
   var maxHeight = R.pipe(R.length, R.multiply(rowHeight), R.ifElse(R.gt(maxTreeHeight), R.add(10), R.always(maxTreeHeight)))(list);
 
-  var expand = function expand(index) {
-    var parentId = R.nth(index, list);
-    setExpandedIds(R.assoc(parentId, parentId, expandedIds));
-  };
-
-  var collapse = function collapse(index) {
-    var parentId = R.nth(index, list);
-    setExpandedIds(R.dissoc(parentId, expandedIds));
-  };
-
-  var expandAll = function expandAll() {
-    setExpandedIds(indexedItemsById);
-  };
-
-  var collapseAll = function collapseAll() {
-    setExpandedIds({});
-  };
-
   if (R.isEmpty(list)) {
     return null;
   }
   var isRtl = getIsRtl(theme);
-
   return React.createElement(
-    Fragment,
-    null,
+    List,
+    {
+      disablePadding: true,
+      style: { height: maxHeight + 2 },
+      onKeyUp: onKeyUp,
+      onMouseLeave: isMouseDown ? apply : null,
+      ref: ref
+    },
     React.createElement(
-      List,
-      { disablePadding: true, style: { height: maxHeight + 2 }, onKeyUp: onKeyUp, ref: ref },
-      React.createElement(
-        AutoSizer,
-        null,
-        function (_ref) {
-          var height = _ref.height,
-              width = _ref.width;
-          return React.createElement(VirtualizedList, {
-            overscan: 10,
-            tabIndex: -1,
-            height: height + 2,
-            width: width,
-            scrollTop: scrollTop // control scroll position with ctrl or shift key
-            , rowCount: R.length(list),
-            rowHeight: R.add(1)(rowHeight) // 1 is space between elements
-            , rowRenderer: function rowRenderer(_ref2) {
-              var index = _ref2.index,
-                  style = _ref2.style;
-
-              var itemId = R.nth(index, list);
-              var item = R.prop(itemId, indexedItemsById);
-              return React.createElement(Item, _extends({}, item, {
-                id: getHierarchicalId(item),
-                label: labelRenderer(item),
-                key: getHierarchicalId(item),
-                depth: getDepth(indexedItemsById)(item),
-                hasChild: R.has(itemId, groupedItemsByParentId),
-                hasChildrenOnLevel: getHasChildrenOnLevel(groupedItemsByParentId)(item),
-                changeList: R.has(itemId, expandedIds) ? function () {
-                  return collapse(index);
-                } : function () {
-                  return expand(index);
-                },
-                NavigateIcon: R.has(itemId, expandedIds) ? ExpandLessIcon : ExpandMoreIcon,
-                isRtl: isRtl,
-                isDisabled: R.is(Function, disableAccessor) ? disableAccessor(item) : false,
-                eventsCallbacks: eventsCallbacks,
-                isSelected: isItemSelected(item, index),
-                HTMLRenderer: HTMLRenderer,
-                classes: classes,
-                labels: labels,
-                index: index,
-                style: style,
-                accessibility: accessibility,
-                ariaLabel: R.prop('navigateNext')(labels),
-                theme: theme
-              }));
-            }
-          });
-        }
-      )
-    ),
-    withExpandControl && React.createElement(
-      'div',
+      AutoSizer,
       null,
-      React.createElement(
-        Button,
-        { onClick: collapseAll, color: 'primary' },
-        R.prop('colapseAll', labels)
-      ),
-      React.createElement(
-        Button,
-        { onClick: expandAll, color: 'primary' },
-        R.prop('expandAll', labels)
-      )
+      function (_ref) {
+        var height = _ref.height,
+            width = _ref.width;
+        return React.createElement(VirtualizedList, {
+          overscan: 10,
+          tabIndex: -1,
+          height: height + 2,
+          width: width,
+          scrollTop: scrollTop // control scroll position with ctrl or shift key
+          , rowCount: R.length(list),
+          rowHeight: R.add(1)(rowHeight) // 1 is space between elements
+          , rowRenderer: function rowRenderer(_ref2) {
+            var index = _ref2.index,
+                style = _ref2.style;
+
+            var itemId = R.nth(index, list);
+            var item = R.prop(itemId, indexedItemsById);
+            return React.createElement(Item, _extends({}, item, {
+              id: getHierarchicalId(item),
+              label: labelRenderer(item),
+              key: getHierarchicalId(item),
+              depth: getDepth(indexedItemsById)(item),
+              hasChild: R.has(itemId, groupedItemsByParentId),
+              hasChildrenOnLevel: getHasChildrenOnLevel(groupedItemsByParentId)(item),
+              changeList: R.has(itemId, expandedIds) ? function () {
+                return collapse(getHierarchicalId(item));
+              } : function () {
+                return expand(getHierarchicalId(item));
+              },
+              NavigateIcon: R.has(itemId, expandedIds) ? ExpandLessIcon : ExpandMoreIcon,
+              isRtl: isRtl,
+              isDisabled: R.is(Function, disableAccessor) ? disableAccessor(item) : false,
+              eventsCallbacks: eventsCallbacks,
+              isSelected: isItemSelected(item, index),
+              HTMLRenderer: HTMLRenderer,
+              classes: classes,
+              labels: labels,
+              index: index,
+              style: style,
+              accessibility: accessibility,
+              ariaLabel: R.prop('navigateNext')(labels),
+              theme: theme
+            }));
+          }
+        });
+      }
     )
   );
 };
@@ -334,7 +305,10 @@ VirtualizedTree.propTypes = process.env.NODE_ENV !== "production" ? {
   }),
   labelRenderer: PropTypes.func,
   withExpandControl: PropTypes.bool,
-  maxTreeHeight: PropTypes.number
+  maxTreeHeight: PropTypes.number,
+  expandedIds: PropTypes.object,
+  expand: PropTypes.func,
+  collapse: PropTypes.func
 } : {};
 
 export default VirtualizedTree;

package/es/VirtualizedTree/withExpansionTree.js

@@ -0,0 +1,56 @@
+var _extends = Object.assign || 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; };
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+/* eslint react/prop-types: 0 */
+import React, { useState, useEffect } from 'react';
+import * as R from 'ramda';
+import { getHierarchicalId } from './VirtualizedTree';
+
+var withExpansionTree = function withExpansionTree(Component) {
+  return function (_ref) {
+    var items = _ref.items,
+        defaultExpandedIds = _ref.defaultExpandedIds,
+        rest = _objectWithoutProperties(_ref, ['items', 'defaultExpandedIds']);
+
+    var _useState = useState({}),
+        expandedIds = _useState[0],
+        setExpandedIds = _useState[1];
+
+    useEffect(function () {
+      if (!R.isNil(defaultExpandedIds) && !R.isEmpty(defaultExpandedIds)) {
+        setExpandedIds(defaultExpandedIds);
+      } else {
+        var ids = R.pipe(R.map(getHierarchicalId), R.indexBy(R.identity))(items);
+        setExpandedIds(ids);
+      }
+    }, [items, defaultExpandedIds]);
+
+    var expand = function expand(id) {
+      setExpandedIds(R.assoc(id, id, expandedIds));
+    };
+
+    var collapse = function collapse(id) {
+      setExpandedIds(R.dissoc(id, expandedIds));
+    };
+
+    var expandAll = function expandAll() {
+      var ids = R.pipe(R.map(getHierarchicalId), R.indexBy(R.identity))(items);
+      setExpandedIds(ids);
+    };
+
+    var collapseAll = function collapseAll() {
+      setExpandedIds({});
+    };
+
+    return React.createElement(Component, _extends({}, rest, {
+      items: items,
+      expand: expand,
+      collapse: collapse,
+      expandAll: expandAll,
+      collapseAll: collapseAll,
+      expandedIds: expandedIds
+    }));
+  };
+};
+export { withExpansionTree };

package/lib/AdvancedFilterDialog/AdvancedFilterDialog.js

@@ -81,6 +81,8 @@ var _reactDraggable2 = _interopRequireDefault(_reactDraggable);
 
 var _ = require('..');
 
+var _withExpansionTree = require('../VirtualizedTree/withExpansionTree');
+
 var _styles = require('@material-ui/core/styles');
 
 var _singleSelection = require('./images/single-selection.png');
@@ -133,7 +135,7 @@ var PaperComponent = function PaperComponent(props) {
   return _react2.default.createElement(
     _reactDraggable2.default,
     { handle: '#draggable-dialog-title', cancel: '[class*="MuiDialogContent-root"]' },
-    _react2.default.createElement(_Paper2.default, _extends({ style: { minWidth: '75%', height: 700 } }, props))
+    _react2.default.createElement(_Paper2.default, _extends({ style: { minWidth: '75%', height: '75%' } }, props))
   );
 };
 
@@ -177,16 +179,19 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     narrowSpotlight: { width: '100%' },
     selectionButton: {
       marginLeft: 24,
+      marginRight: 15,
       height: 32
     },
     narrowSelectionButton: {
       height: 32,
-      marginTop: 5
+      marginTop: 5,
+      marginRight: 15
     },
     selectionMenu: {
       width: '50%',
+      maxHeight: '100%',
       position: 'absolute',
-      top: 105,
+      top: 110,
       right: 48,
       zIndex: 1
     },
@@ -205,12 +210,6 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
         backgroundColor: theme.palette.action.hover
       }
     },
-    selectedButton: {
-      backgroundColor: theme.palette.secondary.main,
-      '&:hover': {
-        backgroundColor: theme.palette.action.selected
-      }
-    },
     selectModeItem: {
       boxShadow: 'none',
       display: 'flex',
@@ -230,6 +229,9 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       marginRight: 10,
       display: 'flex',
       flexDirection: 'row'
+    },
+    actions: {
+      justifyContent: 'space-between'
     }
   };
 });
@@ -272,7 +274,8 @@ var SelectionModeMenu = function SelectionModeMenu(_ref) {
       selected = _ref.selected,
       classes = _ref.classes,
       isNarrow = _ref.isNarrow,
-      hint = _ref.hint;
+      hint = _ref.hint,
+      maxHeight = _ref.maxHeight;
 
   if (!isOpen) {
     return null;
@@ -282,26 +285,24 @@ var SelectionModeMenu = function SelectionModeMenu(_ref) {
     { className: isNarrow ? classes.narrowSelectionMenu : classes.selectionMenu },
     _react2.default.createElement(
       _Card2.default,
-      null,
+      { style: { maxHeight: maxHeight - 5, overflow: 'auto' } },
       _react2.default.createElement(
         _CardContent2.default,
         { className: classes.selectModeContainer },
         R.map(function (_ref2) {
-          var _cx;
-
           var value = _ref2.value,
               label = _ref2.label,
               img = _ref2.img;
           return _react2.default.createElement(
             _.Button,
-            _extends({
-              className: (0, _classnames2.default)(classes.selectButton, (_cx = {}, _cx[classes.selectedButton] = value === selected, _cx))
-            }, value === selected ? { variant: 'contained', color: 'secondary' } : {}, {
+            {
+              className: classes.selectButton,
+              selected: value === selected,
               key: value,
               onClick: function onClick() {
                 return onSelect(value);
               }
-            }),
+            },
             _react2.default.createElement(
               _Paper2.default,
               { className: classes.selectModeItem, key: value },
@@ -335,7 +336,8 @@ SelectionModeMenu.propTypes = process.env.NODE_ENV !== "production" ? {
   isOpen: _propTypes2.default.bool,
   onSelect: _propTypes2.default.func,
   options: _propTypes2.default.array,
-  selected: _propTypes2.default.string
+  selected: _propTypes2.default.string,
+  maxHeight: _propTypes2.default.number
 } : {};
 
 var icons = {
@@ -347,7 +349,7 @@ var icons = {
 };
 
 var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
-  var _cx2;
+  var _cx;
 
   var id = props.id,
       title = props.title,
@@ -359,9 +361,13 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
       isNarrow = props.isNarrow,
       labels = props.labels,
       disableAccessor = props.disableAccessor,
-      rest = _objectWithoutProperties(props, ['id', 'title', 'items', 'labelRenderer', 'onClose', 'changeSelection', 'isOpen', 'isNarrow', 'labels', 'disableAccessor']);
+      expandAll = props.expandAll,
+      collapseAll = props.collapseAll,
+      defaultSpotlight = props.defaultSpotlight,
+      expandedIds = props.expandedIds,
+      rest = _objectWithoutProperties(props, ['id', 'title', 'items', 'labelRenderer', 'onClose', 'changeSelection', 'isOpen', 'isNarrow', 'labels', 'disableAccessor', 'expandAll', 'collapseAll', 'defaultSpotlight', 'expandedIds']);
 
-  var _useState = (0, _react.useState)(''),
+  var _useState = (0, _react.useState)({ term: '' }),
       term = _useState[0].term,
       setSpotlight = _useState[1];
 
@@ -379,6 +385,23 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
 
   var classes = useStyles();
 
+  var _useState5 = (0, _react.useState)(0),
+      height = _useState5[0],
+      setHeight = _useState5[1];
+
+  var measureRef = _react2.default.useCallback(function (node) {
+    if (node !== null) {
+      setHeight(node.getBoundingClientRect().height * 75 / 100);
+    }
+  });
+  (0, _react.useEffect)(function () {
+    if (!R.isNil(defaultSpotlight) && !R.isEmpty(defaultSpotlight)) {
+      setSpotlight(defaultSpotlight);
+    }
+  }, [defaultSpotlight]);
+
+  var listHeight = height - 170;
+
   var groupedItemsByParentId = R.groupBy(R.propOr('#ROOT', 'parentId'), items);
 
   var recurse = R.filter(function (item) {
@@ -438,8 +461,9 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
   };
 
   var handleSubmit = function handleSubmit() {
-    changeSelection(id, R.values(selection));
+    changeSelection(id, R.values(selection), { expandedIds: expandedIds, spotlight: { term: term } });
     setSelection({});
+    setSpotlight({ term: '' });
   };
 
   return _react2.default.createElement(
@@ -448,7 +472,8 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
       open: isOpen,
       PaperComponent: PaperComponent,
       'aria-labelledby': 'draggable-dialog-title',
-      onClose: onClose
+      onClose: onClose,
+      ref: measureRef
     },
     _react2.default.createElement(
       _DialogTitle2.default,
@@ -478,11 +503,12 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
         { container: true },
         _react2.default.createElement(
           _Grid2.default,
-          { item: true, xs: 12, className: (0, _classnames2.default)(classes.topElements, (_cx2 = {}, _cx2[classes.narrowTop] = isNarrow, _cx2)) },
+          { item: true, xs: 12, className: (0, _classnames2.default)(classes.topElements, (_cx = {}, _cx[classes.narrowTop] = isNarrow, _cx)) },
           _react2.default.createElement(
             'div',
             { className: isNarrow ? classes.narrowSpotlight : classes.spotlight },
             _react2.default.createElement(_.Spotlight, {
+              hasClearAll: true,
               placeholder: R.prop('placeholder', labels),
               term: term,
               hasCommit: false,
@@ -513,7 +539,11 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
               _react.Fragment,
               null,
               '\xA0',
-              _react2.default.createElement('img', { src: R.prop(selectionMode, icons), alt: selectionMode })
+              _react2.default.createElement('img', {
+                style: { marginLeft: 15 },
+                src: R.prop(selectionMode, icons),
+                alt: selectionMode
+              })
             )
           )
         ),
@@ -530,7 +560,8 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
               setIsOpenSelectionMenu(false);
             },
             selected: selectionMode,
-            hint: R.prop('hint', labels)
+            hint: R.prop('hint', labels),
+            maxHeight: listHeight
           }),
           _react2.default.createElement(_.VirtualizedTree, _extends({}, rest, {
             disableAccessor: disableAccessor,
@@ -539,36 +570,57 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
             items: selectionItems,
             changeSelection: onChangeSelection,
             withExpandControl: true,
-            maxTreeHeight: 490,
-            getItemScope: R.prop(selectionMode, scopeGetters)
+            maxTreeHeight: listHeight,
+            getItemScope: R.prop(selectionMode, scopeGetters),
+            expandedIds: expandedIds
           }))
         )
       )
     ),
     _react2.default.createElement(
       _DialogActions2.default,
-      null,
-      R.is(Function, onClose) && _react2.default.createElement(
-        _.Button,
-        {
-          onClick: function onClick() {
-            onClose();
-            setSelection({});
-          },
-          color: 'primary'
-        },
-        R.prop('cancel', labels)
+      { className: classes.actions },
+      _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement(
+          _.Button,
+          { onClick: collapseAll, color: 'primary' },
+          R.prop('colapseAll', labels)
+        ),
+        _react2.default.createElement(
+          _.Button,
+          { style: { marginLeft: 10 }, onClick: expandAll, color: 'primary' },
+          R.prop('expandAll', labels)
+        )
       ),
-      R.is(Function, changeSelection) && _react2.default.createElement(
-        _.Button,
-        {
-          disabled: R.isEmpty(selection),
-          onClick: handleSubmit,
-          color: 'primary',
-          variant: 'contained',
-          alternative: 'siscc'
-        },
-        R.prop('apply', labels)
+      _react2.default.createElement(
+        'div',
+        null,
+        R.is(Function, onClose) && _react2.default.createElement(
+          _.Button,
+          {
+            onClick: function onClick() {
+              onClose();
+              setSelection({});
+              setSpotlight({ term: '' });
+            },
+            color: 'primary'
+          },
+          R.prop('cancel', labels)
+        ),
+        R.is(Function, changeSelection) && _react2.default.createElement(
+          _.Button,
+          {
+            disabled: R.isEmpty(selection),
+            onClick: handleSubmit,
+            color: 'primary',
+            variant: 'contained',
+            alternative: 'siscc',
+            style: { marginLeft: 10 }
+          },
+          R.prop('apply', labels)
+        )
       )
     )
   );
@@ -597,7 +649,11 @@ AdvancedFilterDialog.propTypes = process.env.NODE_ENV !== "production" ? {
   }),
   onClose: _propTypes2.default.func,
   labelRenderer: _propTypes2.default.func,
-  title: _propTypes2.default.string
+  title: _propTypes2.default.string,
+  expandAll: _propTypes2.default.func,
+  collapseAll: _propTypes2.default.func,
+  defaultSpotlight: _propTypes2.default.object,
+  expandedIds: _propTypes2.default.object
 } : {};
 
-exports.default = AdvancedFilterDialog;
+exports.default = (0, _withExpansionTree.withExpansionTree)(AdvancedFilterDialog);