@sis-cc/dotstatsuite-visions 10.8.0 → 10.10.0

package/lib/VirtualizedTree/Item.js

@@ -75,19 +75,17 @@ var Item = function Item(_ref) {
       style = _ref.style,
       isRtl = _ref.isRtl,
       accessibility = _ref.accessibility,
-      index = _ref.index,
       HTMLRenderer = _ref.HTMLRenderer,
       hierarchicalId = _ref.hierarchicalId,
       labels = _ref.labels,
       _ref$depth = _ref.depth,
       depth = _ref$depth === undefined ? 0 : _ref$depth,
-      eventsCallbacks = _ref.eventsCallbacks;
+      eventsListeners = _ref.eventsListeners;
 
   var _React$useState = _react2.default.useState(false),
       isTooltipShown = _React$useState[0],
       setIsTooltipShown = _React$useState[1];
 
-  var callbacks = eventsCallbacks(hierarchicalId || id, index);
   var padding = depth * 30 + (depth > 0 && !hasChildrenOnLevel ? 30 : 0) + (!hasChild && hasChildrenOnLevel ? 30 : 0);
   return _react2.default.createElement(
     _ListItem2.default,
@@ -117,23 +115,21 @@ var Item = function Item(_ref) {
       },
       _react2.default.createElement(NavigateIcon, null)
     ),
-    _react2.default.createElement(_ListItemText2.default, _extends({
+    _react2.default.createElement(_ListItemText2.default, {
       'data-testid': 'value_' + id,
       tabIndex: 0,
-      'aria-label': isDisabled ? R.propOr('', 'disableItemLabel')(labels) + ' ' + label : label,
+      'aria-label': isGreyed ? R.propOr('', 'disableItemLabel')(labels) + ' ' + label : label,
       'aria-pressed': isSelected,
       'aria-disabled': isDisabled,
       primaryTypographyProps: { noWrap: true, color: 'inherit' },
       secondaryTypographyProps: { color: 'inherit' },
       classes: { root: classes.listItem },
-      className: (0, _classnames2.default)((_cx = {}, _cx[classes.accessibilityItemHover] = accessibility, _cx[classes.listItemSelected] = isSelected && (!isDisabled || !isGreyed), _cx[classes.listItemHover] = !isDisabled || !isGreyed, _cx)),
-      onClick: isDisabled ? null : callbacks.onClick,
-      onMouseDown: isDisabled || isTooltipShown ? null : callbacks.onMouseDown,
-      onMouseUp: isDisabled || isTooltipShown ? null : callbacks.onMouseUp,
-      onMouseEnter: isDisabled || isTooltipShown ? null : callbacks.onMouseEnter
-    }, R.pick(['onKeyPress'], callbacks), {
-      title: isDisabled ? R.propOr('', 'disableItemLabel')(labels) + ' ' + label : label,
-      style: { opacity: isDisabled ? '0.5' : '1' },
+      className: (0, _classnames2.default)((_cx = {}, _cx[classes.accessibilityItemHover] = accessibility, _cx[classes.listItemSelected] = isSelected, _cx[classes.listItemHover] = !isDisabled, _cx)),
+      onClick: isDisabled ? null : eventsListeners.onClick,
+      onMouseDown: isDisabled || isTooltipShown ? null : eventsListeners.onMouseDown,
+      onMouseEnter: isDisabled || isTooltipShown ? null : eventsListeners.onMouseEnter,
+      title: isGreyed ? R.propOr('', 'disableItemLabel')(labels) + ' ' + label : label,
+      style: { opacity: isDisabled && isGreyed ? '0.5' : '1' },
       primary: _react2.default.createElement(
         'div',
         {
@@ -144,7 +140,8 @@ var Item = function Item(_ref) {
           _SvgIcon2.default,
           {
             color: 'primary',
-            className: (0, _classnames2.default)(classes.labelIcon, (_cx3 = {}, _cx3[classes.disabledLabel] = isDisabled, _cx3))
+            className: (0, _classnames2.default)(classes.labelIcon, (_cx3 = {}, _cx3[classes.disabledLabel] = isDisabled, _cx3)),
+            style: { opacity: isDisabled ? '0.5' : '1' }
           },
           isSelected ? _react2.default.createElement(_CheckBoxOutlined2.default, null) : _react2.default.createElement(_CheckBoxOutlineBlankOutlined2.default, null)
         ),
@@ -194,7 +191,7 @@ var Item = function Item(_ref) {
           ')'
         )
       )
-    }))
+    })
   );
 };
 
@@ -218,13 +215,12 @@ Item.propTypes = process.env.NODE_ENV !== "production" ? {
   style: _propTypes2.default.object,
   isRtl: _propTypes2.default.bool,
   accessibility: _propTypes2.default.bool,
-  index: _propTypes2.default.number,
   labelRenderer: _propTypes2.default.func,
   HTMLRenderer: _propTypes2.default.func,
   hierarchicalId: _propTypes2.default.string,
   labels: _propTypes2.default.object,
   depth: _propTypes2.default.number,
-  eventsCallbacks: _propTypes2.default.func,
+  eventsListeners: _propTypes2.default.object,
   isGreyed: _propTypes2.default.bool
 } : {};
 

package/lib/VirtualizedTree/VirtualizedTree.js

@@ -100,7 +100,9 @@ var VirtualizedTree = function VirtualizedTree(props) {
       _props$scopeGetter = props.scopeGetter,
       scopeGetter = _props$scopeGetter === undefined ? singleScopeGetter : _props$scopeGetter,
       _props$treeHeight = props.treeHeight,
-      treeHeight = _props$treeHeight === undefined ? 0 : _props$treeHeight;
+      treeHeight = _props$treeHeight === undefined ? 0 : _props$treeHeight,
+      _props$simpleSelectio = props.simpleSelectionMode,
+      simpleSelectionMode = _props$simpleSelectio === undefined ? false : _props$simpleSelectio;
 
   var theme = (0, _core.useTheme)();
 
@@ -216,56 +218,63 @@ var VirtualizedTree = function VirtualizedTree(props) {
       setIsMouseDown(false);
     }
   };
-  var eventsCallbacks = function eventsCallbacks(id, index) {
+
+  var onMouseUp = function onMouseUp(e) {
+    if (!isMouseDown) {
+      return;
+    }
+    e.preventDefault();
+    apply();
+    setIsMouseDown(false);
+  };
+
+  var onMouseLeave = function onMouseLeave() {
+    if (isMouseDown) {
+      apply();
+    }
+  };
+
+  var onKeyUp = function onKeyUp(e) {
+    e.preventDefault();
+    if (e.key === 'Shift' && !R.isEmpty(shiftIndexes)) {
+      apply();
+    } else if (e.key === 'Control' && !R.isEmpty(selectIds)) {
+      apply();
+    }
+  };
+
+  var itemEventsListeners = function itemEventsListeners(id, index) {
     return {
-      onMouseUp: isMouseDown ? function (e) {
-        e.preventDefault();
-        apply();
-        if (!R.isEmpty(selectIds)) {
-          setLastItemId(id);
-        }
-        setIsMouseDown(false);
-      } : null,
       onMouseDown: function onMouseDown(e) {
-        e.preventDefault();
-        if (e.ctrlKey || e.shiftKey) {
+        if (!simpleSelectionMode && (e.ctrlKey || e.shiftKey)) {
           return;
         }
         setIsMouseDown(true);
         multiSelect(id);
       },
-      onMouseEnter: isMouseDown ? function (e) {
+      onMouseEnter: function onMouseEnter(e) {
         e.preventDefault();
-        if (e.ctrlKey || e.shiftKey) {
+        if (!isMouseDown || simpleSelectionMode || e.ctrlKey || e.shiftKey) {
           return;
         }
         multiSelect(id);
-      } : null,
+        setLastItemId(id);
+      },
       onClick: function onClick(e) {
         e.preventDefault();
-
-        if (e.ctrlKey) {
+        if (e.ctrlKey && !simpleSelectionMode) {
           multiSelect(id);
-        } else if (e.shiftKey) {
+        } else if (e.shiftKey && !simpleSelectionMode) {
           shiftSelect(index);
         } else {
           setIsMouseDown(false);
           setLastItemId(id);
         }
       }
-      // ondblclick: () => null
     };
   };
-  var onKeyUp = function onKeyUp(e) {
-    if (e.key === 'Shift' && !R.isEmpty(shiftIndexes)) {
-      apply();
-    } else if (e.key === 'Control' && !R.isEmpty(selectIds)) {
-      apply();
-    }
-  };
   var ref = (0, _react.useRef)();
   var classes = (0, _styles.useStyles)();
-
   (0, _react.useEffect)(function () {
     var current = ref.current;
     var handler = function handler(event) {
@@ -288,7 +297,6 @@ var VirtualizedTree = function VirtualizedTree(props) {
       setScrollTop(undefined);
     }
     if (R.isNil(current)) return;
-
     current.addEventListener('wheel', handler, { passive: false });
     return function () {
       current.removeEventListener('wheel', handler, { passive: false });
@@ -306,7 +314,8 @@ var VirtualizedTree = function VirtualizedTree(props) {
       disablePadding: true,
       style: { height: maxHeight + 2 },
       onKeyUp: onKeyUp,
-      onMouseLeave: isMouseDown ? apply : null,
+      onMouseUp: onMouseUp,
+      onMouseLeave: onMouseLeave,
       ref: ref
     },
     _react2.default.createElement(
@@ -343,11 +352,10 @@ var VirtualizedTree = function VirtualizedTree(props) {
               },
               NavigateIcon: R.has(itemId, expandedIds) ? _ExpandLess2.default : _ExpandMore2.default,
               isRtl: isRtl,
-              eventsCallbacks: eventsCallbacks,
+              eventsListeners: itemEventsListeners((0, _utils.getHierarchicalId)(item), index),
               HTMLRenderer: HTMLRenderer,
               classes: classes,
               labels: labels,
-              index: index,
               style: style,
               accessibility: accessibility,
               ariaLabel: R.prop('navigateNext')(labels),
@@ -379,7 +387,8 @@ VirtualizedTree.propTypes = process.env.NODE_ENV !== "production" ? {
   collapse: _propTypes2.default.func,
   treeHeight: _propTypes2.default.number,
   isGreyed: _propTypes2.default.func,
-  scopeGetter: _propTypes2.default.func
+  scopeGetter: _propTypes2.default.func,
+  simpleSelectionMode: _propTypes2.default.bool
 } : {};
 
 exports.default = VirtualizedTree;

package/package.json

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