@sis-cc/dotstatsuite-visions 10.20.0 → 10.21.0

package/lib/AdvancedFilterDialog/AdvancedFilterDialog.js

@@ -58,22 +58,10 @@ var _Close = require('@material-ui/icons/Close');
 
 var _Close2 = _interopRequireDefault(_Close);
 
-var _ExpandMore = require('@material-ui/icons/ExpandMore');
-
-var _ExpandMore2 = _interopRequireDefault(_ExpandMore);
-
-var _ExpandLess = require('@material-ui/icons/ExpandLess');
-
-var _ExpandLess2 = _interopRequireDefault(_ExpandLess);
-
 var _reactDraggable = require('react-draggable');
 
 var _reactDraggable2 = _interopRequireDefault(_reactDraggable);
 
-var _SelectionModeMenu = require('./SelectionModeMenu');
-
-var _SelectionModeMenu2 = _interopRequireDefault(_SelectionModeMenu);
-
 var _ = require('..');
 
 var _withExpansionTree = require('../VirtualizedTree/withExpansionTree');
@@ -82,6 +70,10 @@ var _withSpotlight = require('../VirtualizedTree/withSpotlight');
 
 var _styles = require('@material-ui/core/styles');
 
+var _EmojiObjects = require('@material-ui/icons/EmojiObjects');
+
+var _EmojiObjects2 = _interopRequireDefault(_EmojiObjects);
+
 var _singleSelection = require('./images/single-selection.png');
 
 var _singleSelection2 = _interopRequireDefault(_singleSelection);
@@ -98,29 +90,7 @@ var _levelSelection = require('./images/level-selection.png');
 
 var _levelSelection2 = _interopRequireDefault(_levelSelection);
 
-var _allSelection = require('./images/all-selection.png');
-
-var _allSelection2 = _interopRequireDefault(_allSelection);
-
-var _smallSingleSelection = require('./images/small-single-selection.png');
-
-var _smallSingleSelection2 = _interopRequireDefault(_smallSingleSelection);
-
-var _smallChildrenSelection = require('./images/small-children-selection.png');
-
-var _smallChildrenSelection2 = _interopRequireDefault(_smallChildrenSelection);
-
-var _smallBranchSelection = require('./images/small-branch-selection.png');
-
-var _smallBranchSelection2 = _interopRequireDefault(_smallBranchSelection);
-
-var _smallLevelSelection = require('./images/small-level-selection.png');
-
-var _smallLevelSelection2 = _interopRequireDefault(_smallLevelSelection);
-
-var _smallAllSelection = require('./images/small-all-selection.png');
-
-var _smallAllSelection2 = _interopRequireDefault(_smallAllSelection);
+var _core = require('@material-ui/core');
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
@@ -146,8 +116,10 @@ var useStyles = (0, _styles.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',
@@ -159,11 +131,6 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
         height: 32
       }
     },
-    topElements: {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center'
-    },
     narrowTop: {
       flexDirection: 'column',
       alignItems: 'flex-start'
@@ -210,42 +177,42 @@ var useStyles = (0, _styles.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: _smallSingleSelection2.default,
-  children: _smallChildrenSelection2.default,
-  branch: _smallBranchSelection2.default,
-  level: _smallLevelSelection2.default,
-  all: _smallAllSelection2.default
-};
-
 var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
   var _cx;
 
@@ -272,19 +239,19 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
       selectionMode = _useState[0],
       setSelectionMode = _useState[1];
 
-  var _useState2 = (0, _react.useState)(false),
-      isOpenSelectionMenu = _useState2[0],
-      setIsOpenSelectionMenu = _useState2[1];
-
-  var _useState3 = (0, _react.useState)({}),
-      selection = _useState3[0],
-      setSelection = _useState3[1];
+  var _useState2 = (0, _react.useState)({}),
+      selection = _useState2[0],
+      setSelection = _useState2[1];
 
   var classes = useStyles();
 
-  var _useState4 = (0, _react.useState)(0),
-      height = _useState4[0],
-      setHeight = _useState4[1];
+  var _useState3 = (0, _react.useState)(0),
+      height = _useState3[0],
+      setHeight = _useState3[1];
+
+  var _useState4 = (0, _react.useState)({}),
+      selectIds = _useState4[0],
+      setSelectIds = _useState4[1];
 
   var measureRef = _react2.default.useCallback(function (node) {
     if (node !== null) {
@@ -316,10 +283,6 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
     value: 'level',
     label: R.prop('levelSelection', labels),
     img: _levelSelection2.default
-  }, {
-    value: 'all',
-    label: R.prop('allSelection', labels),
-    img: _allSelection2.default
   }];
 
   var _allGroupedItems = R.pipe(R.map(function (item) {
@@ -354,13 +317,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 = (0, _react.useMemo)(function () {
+    var refinedItems = R.map(function (item) {
+      return _extends({}, item, {
+        isSelected: (0, _utils.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(_utils.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 _react2.default.createElement(
     _Dialog2.default,
     {
@@ -382,10 +369,70 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
           '\xA0',
           title
         ),
-        onClose && _react2.default.createElement(
-          _Button2.default,
-          { className: classes.closeButton, onClick: onClose },
-          _react2.default.createElement(_Close2.default, null)
+        _react2.default.createElement(
+          'div',
+          { className: classes.selectModeContainer },
+          _react2.default.createElement(
+            'div',
+            { className: classes.hint },
+            _react2.default.createElement(
+              _.Tooltip,
+              {
+                variant: 'light',
+                title: _react2.default.createElement(
+                  _Typography2.default,
+                  { variant: 'body2' },
+                  R.prop('hint', labels)
+                )
+              },
+              _react2.default.createElement(_EmojiObjects2.default, null)
+            ),
+            _react2.default.createElement(
+              _Typography2.default,
+              { variant: 'body2' },
+              R.prop('selectionMode', labels)
+            )
+          ),
+          R.map(function (_ref) {
+            var value = _ref.value,
+                label = _ref.label,
+                img = _ref.img;
+            return _react2.default.createElement(
+              _.Tooltip,
+              {
+                key: value,
+                classes: { tooltip: classes.tooltip },
+                title: _react2.default.createElement('img', { style: { width: '72px', height: '90px' }, src: img, alt: value })
+              },
+              _react2.default.createElement(
+                _.Button,
+                {
+                  className: classes.selectButton,
+                  selected: value === selectionMode,
+                  onClick: function onClick() {
+                    setSelectionMode(value);
+                  },
+                  'aria-pressed': value === selectionMode,
+                  'aria-label': label
+                },
+                _react2.default.createElement(
+                  _Paper2.default,
+                  { className: classes.selectModeItem, key: value },
+                  _react2.default.createElement(
+                    _Typography2.default,
+                    { variant: 'body2' },
+                    label
+                  ),
+                  !R.isNil(img) && R.is(String, img) && _react2.default.createElement('img', { src: img, alt: value })
+                )
+              )
+            );
+          }, selectionOptions),
+          onClose && _react2.default.createElement(
+            _Button2.default,
+            { className: classes.closeButton, onClick: onClose },
+            _react2.default.createElement(_Close2.default, null)
+          )
         )
       )
     ),
@@ -412,58 +459,35 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
           ),
           _react2.default.createElement(
             'div',
-            { className: classes.selection },
+            null,
             _react2.default.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
-              },
-              _react2.default.createElement(
-                _Typography2.default,
-                { variant: 'body2', className: classes.ellipsis },
-                R.prop('selectionMode', labels)
-              ),
-              '\xA0',
-              isOpenSelectionMenu ? _react2.default.createElement(_ExpandLess2.default, { fontSize: 'small' }) : _react2.default.createElement(_ExpandMore2.default, { fontSize: 'small' })
+              { onClick: collapseAll, color: 'primary' },
+              R.prop('colapseAll', labels)
+            ),
+            _react2.default.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)) && _react2.default.createElement(
-              _react.Fragment,
-              null,
-              '\xA0',
-              _react2.default.createElement('img', {
-                style: { marginLeft: 15 },
-                src: R.prop(selectionMode, icons),
-                alt: selectionMode
-              })
+            _react2.default.createElement(
+              _.Button,
+              { onClick: selectAll, color: 'primary' },
+              R.prop('selectAll', labels)
+            ),
+            _react2.default.createElement(
+              _.Button,
+              { style: { marginLeft: 10 }, onClick: function onClick() {
+                  return setSelection({});
+                }, color: 'primary' },
+              R.prop('deselectAll', labels)
             )
-          )
+          ),
+          _react2.default.createElement(_core.Divider, { className: classes.divider })
         ),
         _react2.default.createElement(
           _Grid2.default,
           { item: true, xs: 12 },
-          _react2.default.createElement(_SelectionModeMenu2.default, {
-            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
-          }),
           _react2.default.createElement(_.VirtualizedTree, _extends({}, rest, {
             disableAccessor: _disableAccessor,
             isGreyed: isDisabled,
@@ -472,9 +496,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
           }))
         )
       )
@@ -482,20 +510,6 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
     _react2.default.createElement(
       _DialogActions2.default,
       { 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)
-        )
-      ),
       _react2.default.createElement(
         'div',
         null,
@@ -545,7 +559,8 @@ AdvancedFilterDialog.propTypes = process.env.NODE_ENV !== "production" ? {
     childrenSelection: _propTypes2.default.string,
     branchSelection: _propTypes2.default.string,
     levelSelection: _propTypes2.default.string,
-    allSelection: _propTypes2.default.string,
+    selectAll: _propTypes2.default.string,
+    deselectAll: _propTypes2.default.string,
     apply: _propTypes2.default.string,
     cancel: _propTypes2.default.string
   }),

package/lib/Tooltip/Tooltip.js

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

package/lib/VirtualizedTree/utils.js

@@ -127,11 +127,6 @@ var getEvolvedDisableAccessor = exports.getEvolvedDisableAccessor = function get
 };
 
 var getScopeGetters = exports.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];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "10.20.0",
+  "version": "10.21.0",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",