@sis-cc/dotstatsuite-visions 10.19.0 → 10.21.0

package/es/AdvancedFilterDialog/AdvancedFilterDialog.js

@@ -2,11 +2,11 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 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; }
 
-import React, { useState, Fragment } from 'react';
+import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import cx from 'classnames';
-import { getEvolvedDisableAccessor, getHierarchicalId, getScopeGetters } from '../VirtualizedTree/utils';
+import { getEvolvedDisableAccessor, getHierarchicalId, getScopeGetters, isItemSelected } from '../VirtualizedTree/utils';
 import IconButton from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
 import DialogTitle from '@material-ui/core/DialogTitle';
@@ -16,26 +16,17 @@ import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import CloseIcon from '@material-ui/icons/Close';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import ExpandLessIcon from '@material-ui/icons/ExpandLess';
 import Draggable from 'react-draggable';
-import SelectionModeMenu from './SelectionModeMenu';
-import { Button, Spotlight, VirtualizedTree } from '..';
+import { Button, Spotlight, Tooltip, VirtualizedTree } from '..';
 import { withExpansionTree } from '../VirtualizedTree/withExpansionTree';
 import { withSpotlight } from '../VirtualizedTree/withSpotlight';
 import { makeStyles } from '@material-ui/core/styles';
-
+import HintIcon from '@material-ui/icons/EmojiObjects';
 import singleImg from './images/single-selection.png';
 import childrenImg from './images/children-selection.png';
 import branchImg from './images/branch-selection.png';
 import levelImg from './images/level-selection.png';
-import allImg from './images/all-selection.png';
-
-import singleIcon from './images/small-single-selection.png';
-import childrenIcon from './images/small-children-selection.png';
-import branchIcon from './images/small-branch-selection.png';
-import levelIcon from './images/small-level-selection.png';
-import allIcon from './images/small-all-selection.png';
+import { Divider } from '@material-ui/core';
 
 var PaperComponent = function PaperComponent(props) {
   return React.createElement(
@@ -55,8 +46,10 @@ var useStyles = makeStyles(function (theme) {
       width: '100%'
     },
     headerLabel: {
-      display: 'flex',
-      alignItems: 'center'
+      fontSize: '16px',
+      font: 'PT Sans Narrow',
+      fontWeight: '700',
+      color: theme.palette.grey[700]
     },
     closeButton: {
       color: 'grey !important',
@@ -68,11 +61,6 @@ var useStyles = makeStyles(function (theme) {
         height: 32
       }
     },
-    topElements: {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center'
-    },
     narrowTop: {
       flexDirection: 'column',
       alignItems: 'flex-start'
@@ -119,42 +107,42 @@ var useStyles = makeStyles(function (theme) {
     selectModeItem: {
       boxShadow: 'none',
       display: 'flex',
-      width: 110,
-      height: 200,
       backgroundColor: 'inherit',
-      color: 'inherit',
-      flexDirection: 'column',
-      justifyContent: 'space-between',
+      flexDirection: 'row-reverse',
+      alignItems: 'center',
+      '& p': {
+        fontSize: '12px',
+        font: 'Helvetica Neue',
+        color: '#0549AB',
+        fontWeight: '500px'
+      },
       '& img': {
-        width: 110,
-        height: 140
+        width: 21,
+        height: 24
       }
     },
     hint: {
-      marginLeft: 10,
-      marginRight: 10,
       display: 'flex',
-      flexDirection: 'row'
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    divider: {
+      backgroundColor: theme.palette.primary.light
     },
     actions: {
-      justifyContent: 'space-between'
+      justifyContent: 'flex-end'
     },
     ellipsis: {
       whiteSpace: 'nowrap',
       overflow: 'hidden',
       textOverflow: 'ellipsis'
+    },
+    tooltip: {
+      backgroundColor: theme.palette.action.hover
     }
   };
 });
 
-var icons = {
-  single: singleIcon,
-  children: childrenIcon,
-  branch: branchIcon,
-  level: levelIcon,
-  all: allIcon
-};
-
 var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
   var _cx;
 
@@ -181,19 +169,19 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
       selectionMode = _useState[0],
       setSelectionMode = _useState[1];
 
-  var _useState2 = useState(false),
-      isOpenSelectionMenu = _useState2[0],
-      setIsOpenSelectionMenu = _useState2[1];
-
-  var _useState3 = useState({}),
-      selection = _useState3[0],
-      setSelection = _useState3[1];
+  var _useState2 = useState({}),
+      selection = _useState2[0],
+      setSelection = _useState2[1];
 
   var classes = useStyles();
 
-  var _useState4 = useState(0),
-      height = _useState4[0],
-      setHeight = _useState4[1];
+  var _useState3 = useState(0),
+      height = _useState3[0],
+      setHeight = _useState3[1];
+
+  var _useState4 = useState({}),
+      selectIds = _useState4[0],
+      setSelectIds = _useState4[1];
 
   var measureRef = React.useCallback(function (node) {
     if (node !== null) {
@@ -225,10 +213,6 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
     value: 'level',
     label: R.prop('levelSelection', labels),
     img: levelImg
-  }, {
-    value: 'all',
-    label: R.prop('allSelection', labels),
-    img: allImg
   }];
 
   var _allGroupedItems = R.pipe(R.map(function (item) {
@@ -263,13 +247,37 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
     }, selection, ids);
     setSelection(nextSelection);
   };
-
   var handleSubmit = function handleSubmit() {
     changeSelection(id, R.values(selection), { expandedIds: expandedIds, spotlight: spotlight });
     setSelection({});
     setSpotlight({ term: '' });
   };
 
+  var _useMemo = useMemo(function () {
+    var refinedItems = R.map(function (item) {
+      return _extends({}, item, {
+        isSelected: isItemSelected(selectIds)(item),
+        isGreyed: R.is(Function, isDisabled) ? isDisabled(item) : false,
+        isDisabled: R.is(Function, _disableAccessor) ? _disableAccessor(item, selectIds) : false
+      });
+    }, selectionItems);
+    var indexedItemsById = R.indexBy(getHierarchicalId, refinedItems);
+    var groupedItemsByParentId = R.groupBy(R.propOr('#ROOT', 'parentId'), refinedItems);
+    return { indexedItemsById: indexedItemsById, groupedItemsByParentId: groupedItemsByParentId };
+  }, [selectionItems, selectIds]),
+      indexedItemsById = _useMemo.indexedItemsById,
+      groupedItemsByParentId = _useMemo.groupedItemsByParentId;
+
+  var rejectonlyDisabledItems = function rejectonlyDisabledItems(item) {
+    return R.prop('isDisabled')(item) && !R.has('isForced')(item);
+  };
+  var selectAll = function selectAll() {
+    var ids = R.pluck('id', R.reject(rejectonlyDisabledItems, R.values(indexedItemsById)));
+    var nextSelection = R.reduce(function (acc, id) {
+      return R.has(id, acc) ? acc : R.assoc(id, id, acc);
+    }, selection, ids);
+    setSelection(nextSelection);
+  };
   return React.createElement(
     Dialog,
     {
@@ -291,10 +299,70 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
           '\xA0',
           title
         ),
-        onClose && React.createElement(
-          IconButton,
-          { className: classes.closeButton, onClick: onClose },
-          React.createElement(CloseIcon, null)
+        React.createElement(
+          'div',
+          { className: classes.selectModeContainer },
+          React.createElement(
+            'div',
+            { className: classes.hint },
+            React.createElement(
+              Tooltip,
+              {
+                variant: 'light',
+                title: React.createElement(
+                  Typography,
+                  { variant: 'body2' },
+                  R.prop('hint', labels)
+                )
+              },
+              React.createElement(HintIcon, null)
+            ),
+            React.createElement(
+              Typography,
+              { variant: 'body2' },
+              R.prop('selectionMode', labels)
+            )
+          ),
+          R.map(function (_ref) {
+            var value = _ref.value,
+                label = _ref.label,
+                img = _ref.img;
+            return React.createElement(
+              Tooltip,
+              {
+                key: value,
+                classes: { tooltip: classes.tooltip },
+                title: React.createElement('img', { style: { width: '72px', height: '90px' }, src: img, alt: value })
+              },
+              React.createElement(
+                Button,
+                {
+                  className: classes.selectButton,
+                  selected: value === selectionMode,
+                  onClick: function onClick() {
+                    setSelectionMode(value);
+                  },
+                  'aria-pressed': value === selectionMode,
+                  'aria-label': label
+                },
+                React.createElement(
+                  Paper,
+                  { className: classes.selectModeItem, key: value },
+                  React.createElement(
+                    Typography,
+                    { variant: 'body2' },
+                    label
+                  ),
+                  !R.isNil(img) && R.is(String, img) && React.createElement('img', { src: img, alt: value })
+                )
+              )
+            );
+          }, selectionOptions),
+          onClose && React.createElement(
+            IconButton,
+            { className: classes.closeButton, onClick: onClose },
+            React.createElement(CloseIcon, null)
+          )
         )
       )
     ),
@@ -321,58 +389,35 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
           ),
           React.createElement(
             'div',
-            { className: classes.selection },
+            null,
             React.createElement(
               Button,
-              {
-                'aria-label': 'selection mode',
-                className: isNarrow ? classes.narrowSelectionButton : classes.selectionButton,
-                onClick: function onClick() {
-                  return setIsOpenSelectionMenu(!isOpenSelectionMenu);
-                },
-                color: 'primary',
-                variant: 'contained',
-                alternative: 'siscc',
-                selected: isOpenSelectionMenu
-              },
-              React.createElement(
-                Typography,
-                { variant: 'body2', className: classes.ellipsis },
-                R.prop('selectionMode', labels)
-              ),
-              '\xA0',
-              isOpenSelectionMenu ? React.createElement(ExpandLessIcon, { fontSize: 'small' }) : React.createElement(ExpandMoreIcon, { fontSize: 'small' })
+              { onClick: collapseAll, color: 'primary' },
+              R.prop('colapseAll', labels)
+            ),
+            React.createElement(
+              Button,
+              { style: { marginLeft: 10 }, onClick: expandAll, color: 'primary' },
+              R.prop('expandAll', labels)
             ),
-            '\xA0',
-            R.prop(selectionMode + 'Selection', labels),
-            !R.isNil(R.prop(selectionMode, icons)) && R.is(String, R.prop(selectionMode, icons)) && React.createElement(
-              Fragment,
-              null,
-              '\xA0',
-              React.createElement('img', {
-                style: { marginLeft: 15 },
-                src: R.prop(selectionMode, icons),
-                alt: selectionMode
-              })
+            React.createElement(
+              Button,
+              { onClick: selectAll, color: 'primary' },
+              R.prop('selectAll', labels)
+            ),
+            React.createElement(
+              Button,
+              { style: { marginLeft: 10 }, onClick: function onClick() {
+                  return setSelection({});
+                }, color: 'primary' },
+              R.prop('deselectAll', labels)
             )
-          )
+          ),
+          React.createElement(Divider, { className: classes.divider })
         ),
         React.createElement(
           Grid,
           { item: true, xs: 12 },
-          React.createElement(SelectionModeMenu, {
-            classes: classes,
-            isOpen: isOpenSelectionMenu,
-            isNarrow: isNarrow,
-            options: selectionOptions,
-            onSelect: function onSelect(value) {
-              setSelectionMode(value);
-              setIsOpenSelectionMenu(false);
-            },
-            selected: selectionMode,
-            hint: R.prop('hint', labels),
-            maxHeight: listHeight
-          }),
           React.createElement(VirtualizedTree, _extends({}, rest, {
             disableAccessor: _disableAccessor,
             isGreyed: isDisabled,
@@ -381,9 +426,13 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
             items: selectionItems,
             changeSelection: onChangeSelection,
             withExpandControl: true,
+            setSelectIds: setSelectIds,
+            selectIds: selectIds,
             treeHeight: listHeight,
             scopeGetter: scopeGetter,
-            expandedIds: expandedIds
+            expandedIds: expandedIds,
+            indexedItemsById: indexedItemsById,
+            groupedItemsByParentId: groupedItemsByParentId
           }))
         )
       )
@@ -391,20 +440,6 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
     React.createElement(
       DialogActions,
       { className: classes.actions },
-      React.createElement(
-        'div',
-        null,
-        React.createElement(
-          Button,
-          { onClick: collapseAll, color: 'primary' },
-          R.prop('colapseAll', labels)
-        ),
-        React.createElement(
-          Button,
-          { style: { marginLeft: 10 }, onClick: expandAll, color: 'primary' },
-          R.prop('expandAll', labels)
-        )
-      ),
       React.createElement(
         'div',
         null,
@@ -454,7 +489,8 @@ AdvancedFilterDialog.propTypes = process.env.NODE_ENV !== "production" ? {
     childrenSelection: PropTypes.string,
     branchSelection: PropTypes.string,
     levelSelection: PropTypes.string,
-    allSelection: PropTypes.string,
+    selectAll: PropTypes.string,
+    deselectAll: PropTypes.string,
     apply: PropTypes.string,
     cancel: PropTypes.string
   }),

package/es/Spotlight/Spotlight.js

@@ -29,6 +29,8 @@ var Spotlight = function Spotlight(_ref) {
       action = _ref.action,
       fullWidth = _ref.fullWidth,
       className = _ref.className,
+      _ref$withAutoFocus = _ref.withAutoFocus,
+      withAutoFocus = _ref$withAutoFocus === undefined ? false : _ref$withAutoFocus,
       _ref$testId = _ref.testId,
       testId = _ref$testId === undefined ? 'spotlight' : _ref$testId;
 
@@ -78,6 +80,8 @@ var Spotlight = function Spotlight(_ref) {
         onBlur: function onBlur() {
           return setFocus(false);
         }
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        , autoFocus: withAutoFocus
       }),
       hasClearAll && !R.isEmpty(value) ? React.createElement(
         IconButton,
@@ -135,7 +139,8 @@ Spotlight.propTypes = process.env.NODE_ENV !== "production" ? {
   withBorder: PropTypes.bool,
   fullWidth: PropTypes.bool,
   classes: PropTypes.object,
-  className: PropTypes.object
+  className: PropTypes.object,
+  withAutoFocus: PropTypes.bool
 } : {};
 
 export default Spotlight;

package/es/Tooltip/Tooltip.js

@@ -60,13 +60,12 @@ var CustomTooltip = function CustomTooltip(_ref) {
       }
       // open={true}
       // interactive={true}
-      , enterNextDelay: 100
-    }, props, {
+      , enterNextDelay: 100,
       classes: {
         popper: classes.popper,
         tooltip: cx(R.prop(variant + 'Tooltip')(classes), classes.tooltip)
       }
-    }),
+    }, props),
     children
   );
 };

package/es/VirtualizedTree/utils.js

@@ -118,11 +118,6 @@ export var getEvolvedDisableAccessor = function getEvolvedDisableAccessor(groupe
 };
 
 export var getScopeGetters = {
-  all: function all(items) {
-    return function () {
-      return R.reject(R.prop('isDisabled'), R.values(items.indexedItemsById));
-    };
-  },
   single: function single() {
     return function (item) {
       return [item];