@sis-cc/dotstatsuite-visions 7.18.6 → 7.19.1

package/lib/VirtualizedTree/VirtualizedTree.js

@@ -0,0 +1,382 @@
+'use strict';
+
+exports.__esModule = true;
+exports.getDepth = exports.getHasChildrenOnLevel = exports.getDisplayedIds = exports.getHierarchicalId = undefined;
+
+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; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _ramda = require('ramda');
+
+var R = _interopRequireWildcard(_ramda);
+
+var _AutoSizer = require('react-virtualized/dist/commonjs/AutoSizer');
+
+var _AutoSizer2 = _interopRequireDefault(_AutoSizer);
+
+var _List = require('react-virtualized/dist/commonjs/List');
+
+var _List2 = _interopRequireDefault(_List);
+
+var _Button = require('@material-ui/core/Button');
+
+var _Button2 = _interopRequireDefault(_Button);
+
+var _ExpandMore = require('@material-ui/icons/ExpandMore');
+
+var _ExpandMore2 = _interopRequireDefault(_ExpandMore);
+
+var _ExpandLess = require('@material-ui/icons/ExpandLess');
+
+var _ExpandLess2 = _interopRequireDefault(_ExpandLess);
+
+var _List3 = require('@material-ui/core/List');
+
+var _List4 = _interopRequireDefault(_List3);
+
+var _Item = require('./Item');
+
+var _Item2 = _interopRequireDefault(_Item);
+
+var _core = require('@material-ui/core');
+
+var _styles = require('../ScopeList/styles');
+
+var _utils = require('../utils');
+
+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; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var getSingleItemScope = function getSingleItemScope(item) {
+  return [item];
+};
+
+var getHierarchicalId = exports.getHierarchicalId = function getHierarchicalId(item) {
+  return R.prop('hierarchicalId', item) || R.prop('id', item);
+};
+
+var getDisplayedIds = exports.getDisplayedIds = function getDisplayedIds(items, grouped, expanded) {
+  return R.pipe(R.map(function (item) {
+    var hierarchicalId = getHierarchicalId(item);
+    if (R.has(hierarchicalId, grouped) && R.has(hierarchicalId, expanded)) {
+      var children = getDisplayedIds(R.prop(hierarchicalId, grouped), grouped, expanded);
+      return R.prepend(hierarchicalId, children);
+    }
+    return [hierarchicalId];
+  }), R.unnest)(items);
+};
+
+var getHasChildrenOnLevel = exports.getHasChildrenOnLevel = function getHasChildrenOnLevel(groupedItems) {
+  return function (item) {
+    if (R.has(getHierarchicalId(item), groupedItems)) {
+      return true;
+    }
+    return R.pipe(R.prop(R.propOr('#ROOT', 'parentId', item)), R.find(function (it) {
+      return R.has(getHierarchicalId(it), groupedItems);
+    }), R.complement(R.isNil))(groupedItems);
+  };
+};
+
+var getDepth = exports.getDepth = function getDepth(indexedItems) {
+  return function (item) {
+    if (R.isNil(item.parentId)) {
+      return 0;
+    }
+    var parent = R.prop(item.parentId, indexedItems);
+    return getDepth(indexedItems)(parent) + 1;
+  };
+};
+
+var VirtualizedTree = function VirtualizedTree(props) {
+  var accessibility = props.accessibility,
+      changeSelection = props.changeSelection,
+      disableAccessor = props.disableAccessor,
+      HTMLRenderer = props.HTMLRenderer,
+      items = props.items,
+      labelRenderer = props.labelRenderer,
+      labels = props.labels,
+      withExpandControl = props.withExpandControl,
+      _props$maxTreeHeight = props.maxTreeHeight,
+      maxTreeHeight = _props$maxTreeHeight === undefined ? 250 : _props$maxTreeHeight,
+      _props$getItemScope = props.getItemScope,
+      getItemScope = _props$getItemScope === undefined ? getSingleItemScope : _props$getItemScope;
+
+  var theme = (0, _core.useTheme)();
+
+  var _useState = (0, _react.useState)({}),
+      expandedIds = _useState[0],
+      setExpandedIds = _useState[1];
+
+  var _useState2 = (0, _react.useState)(undefined),
+      scrollTop = _useState2[0],
+      setScrollTop = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      shiftIndexes = _useState3[0],
+      setShiftIndexes = _useState3[1];
+
+  var _useState4 = (0, _react.useState)({}),
+      selectIds = _useState4[0],
+      setSelectIds = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      isMouseDown = _useState5[0],
+      setIsMouseDown = _useState5[1];
+
+  var _useMemo = (0, _react.useMemo)(function () {
+    var indexedItemsById = R.indexBy(getHierarchicalId, items);
+    var groupedItemsByParentId = R.groupBy(R.propOr('#ROOT', 'parentId'), items);
+    return { indexedItemsById: indexedItemsById, groupedItemsByParentId: groupedItemsByParentId };
+  }, [items]),
+      indexedItemsById = _useMemo.indexedItemsById,
+      groupedItemsByParentId = _useMemo.groupedItemsByParentId;
+
+  var list = (0, _react.useMemo)(function () {
+    return getDisplayedIds(R.propOr([], '#ROOT', groupedItemsByParentId), groupedItemsByParentId, expandedIds);
+  }, [items, expandedIds]);
+  var multiSelect = function multiSelect(id) {
+    var item = R.prop(id, indexedItemsById);
+    var ids = R.pipe(getItemScope, R.filter(function (v) {
+      return v.isSelected === item.isSelected;
+    }), R.map(getHierarchicalId))(item);
+    if (R.has(id, selectIds)) {
+      setSelectIds(R.omit(ids, selectIds));
+    } else {
+      setSelectIds(_extends({}, selectIds, R.indexBy(R.identity, ids)));
+    }
+  };
+  var shiftSelect = function shiftSelect(index) {
+    if (R.isEmpty(shiftIndexes)) {
+      var item = R.nth(index, list);
+      var ids = R.pipe(getItemScope, R.filter(function (v) {
+        return v.isSelected === item.isSelected;
+      }), R.map(getHierarchicalId), R.indexBy(R.identity))(item);
+      setShiftIndexes(R.append(index, shiftIndexes));
+      setSelectIds(ids);
+    } else if (R.length(shiftIndexes) === 1 && index === R.head(shiftIndexes)) {
+      setShiftIndexes([]);
+      setSelectIds({});
+    } else {
+      var indexes = [R.head(shiftIndexes), index];
+      var isSelected = void 0;
+      var _selectIds = R.pipe(R.slice(Math.min.apply(Math, indexes), Math.max.apply(Math, indexes) + 1), function (ids) {
+        return R.props(ids, indexedItemsById);
+      }, function (items) {
+        isSelected = R.pipe(R.head, R.prop('isSelected'))(items);
+        return items;
+      }, R.map(getItemScope), R.unnest, R.filter(function (v) {
+        return v.isSelected === isSelected;
+      }), R.map(getHierarchicalId), R.indexBy(R.identity))(list);
+      setShiftIndexes(indexes);
+      setSelectIds(_selectIds);
+    }
+  };
+  var apply = function apply() {
+    if (!R.isEmpty(selectIds)) {
+      var ids = R.values(selectIds);
+      var selection = R.pipe(R.props(ids), R.pluck('id'), R.uniq)(indexedItemsById);
+      changeSelection(selection);
+      setShiftIndexes([]);
+      setSelectIds({});
+      setIsMouseDown(false);
+    }
+  };
+  var eventsCallbacks = function eventsCallbacks(id, index) {
+    return {
+      onMouseUp: isMouseDown ? function () {
+        apply();
+      } : null,
+      onMouseDown: function onMouseDown(e) {
+        if (e.ctrlKey || e.shiftKey) {
+          return;
+        }
+        multiSelect(id);
+        setIsMouseDown(true);
+      },
+      onMouseEnter: isMouseDown ? function (e) {
+        if (e.ctrlKey || e.shiftKey) {
+          return;
+        }
+        multiSelect(id);
+      } : null,
+      onClick: function onClick(e) {
+        if (e.ctrlKey) {
+          multiSelect(id);
+        } else if (e.shiftKey) {
+          shiftSelect(index);
+        }
+      }
+    };
+  };
+  var onKeyUp = function onKeyUp(e) {
+    if (e.key === 'Shift' && !R.isEmpty(shiftIndexes)) {
+      apply();
+    } else if (e.key === 'Control' && !R.isEmpty(selectIds)) {
+      apply();
+    }
+  };
+  var isItemSelected = function isItemSelected(item, index) {
+    if (!R.isEmpty(shiftIndexes) && index >= Math.min.apply(Math, shiftIndexes) && index <= Math.max.apply(Math, shiftIndexes)) {
+      return !item.isSelected;
+    }
+    if (!R.isEmpty(selectIds) && R.has(getHierarchicalId(item), selectIds)) {
+      return !item.isSelected;
+    }
+    return !!item.isSelected;
+  };
+  var ref = (0, _react.useRef)();
+  var classes = (0, _styles.useStyles)();
+
+  (0, _react.useEffect)(function () {
+    var current = ref.current;
+    var handler = function handler(event) {
+      if (R.or(event.ctrlKey, event.shiftKey)) {
+        // ugly hack, to get div element created by react-virtuliase (get scroll height)
+        // ReactVirtualized__Grid ReactVirtualized__List made the scrollbar
+        var scrollEl = R.path(['children', 0, 'children', 0], current);
+        var isBottom = R.gte(R.add(R.prop('scrollTop')(scrollEl), R.prop('clientHeight')(scrollEl)), R.prop('scrollHeight')(scrollEl));
+        var nextpos = (scrollTop || scrollEl.scrollTop) + event.deltaY / 2;
+        if (R.or(event.deltaY < 0, event.deltaY > 0 && R.not(isBottom))) {
+          setScrollTop(nextpos < 0 ? 0 : nextpos);
+        }
+        event.preventDefault();
+      }
+      if (R.not(event.ctrlKey) && R.not(event.shiftKey)) {
+        setScrollTop(undefined); // should be undefined if the user want use the normal scroll
+      }
+    };
+    if (scrollTop === 0) {
+      setScrollTop(undefined);
+    }
+    if (R.isNil(current)) return;
+
+    current.addEventListener('wheel', handler, { passive: false });
+    return function () {
+      current.removeEventListener('wheel', handler, { passive: false });
+    };
+  }, [scrollTop]);
+  var maxHeight = R.pipe(R.length, R.multiply(_styles.height), 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 = (0, _utils.getIsRtl)(theme);
+
+  return _react2.default.createElement(
+    _react.Fragment,
+    null,
+    _react2.default.createElement(
+      _List4.default,
+      { disablePadding: true, style: { height: maxHeight + 2 }, onKeyUp: onKeyUp, ref: ref },
+      _react2.default.createElement(
+        _AutoSizer2.default,
+        null,
+        function (_ref) {
+          var height = _ref.height,
+              width = _ref.width;
+          return _react2.default.createElement(_List2.default, {
+            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)(_styles.height) // 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 _react2.default.createElement(_Item2.default, _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) ? _ExpandLess2.default : _ExpandMore2.default,
+                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)
+              }));
+            }
+          });
+        }
+      )
+    ),
+    withExpandControl && _react2.default.createElement(
+      'div',
+      null,
+      _react2.default.createElement(
+        _Button2.default,
+        { onClick: collapseAll, color: 'primary' },
+        R.prop('colapseAll', labels)
+      ),
+      _react2.default.createElement(
+        _Button2.default,
+        { onClick: expandAll, color: 'primary' },
+        R.prop('expandAll', labels)
+      )
+    )
+  );
+};
+
+VirtualizedTree.propTypes = process.env.NODE_ENV !== "production" ? {
+  accessibility: _propTypes2.default.bool,
+  changeSelection: _propTypes2.default.func,
+  disableAccessor: _propTypes2.default.func,
+  getItemScope: _propTypes2.default.func,
+  HTMLRenderer: _propTypes2.default.func,
+  isRtl: _propTypes2.default.bool,
+  items: _propTypes2.default.array,
+  labels: _propTypes2.default.shape({
+    disableItemLabel: _propTypes2.default.string,
+    colapseAll: _propTypes2.default.string,
+    expandAll: _propTypes2.default.string
+  }),
+  labelRenderer: _propTypes2.default.func,
+  withExpandControl: _propTypes2.default.bool,
+  maxTreeHeight: _propTypes2.default.number
+} : {};
+
+exports.default = VirtualizedTree;

package/lib/VirtualizedTree/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _VirtualizedTree = require('./VirtualizedTree');
+
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_VirtualizedTree).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+module.exports = exports['default'];

package/lib/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 exports.__esModule = true;
-exports.T4_BREAKPOINTS = exports.innerPalette = exports.sisccTheme = exports.AuthDialog = exports.VerticalButton = exports.UserRightForm = exports.Tooltip = exports.ToggleButton = exports.Tag = exports.TablePreview = exports.TableLayout = exports.Cell = exports.TableHtml5 = exports.TableHeader = exports.TableFooter = exports.Spotlight = exports.SisccFooter = exports.Share = exports.Select = exports.ScopeList = exports.reduceChildren = exports.spotlightScopeListEngine = exports.PeriodPicker = exports.Pagination = exports.NoData = exports.Logo = exports.Loading = exports.LabelDivider = exports.InputNumber = exports.Input = exports.ExpansionPanel = exports.DataFooter = exports.DataHeader = exports.Dataflow = exports.DataEdit = exports.Contact = exports.CollapsibleTree = exports.CollapseButtons = exports.Chips = exports.ChartsConfig = exports.Button = exports.Breadcrumbs = exports.ApiQueries = exports.Alert = undefined;
+exports.T4_BREAKPOINTS = exports.innerPalette = exports.sisccTheme = exports.HierarchicalFilter = exports.AdvancedFilterDialog = exports.VirtualizedTree = exports.AuthDialog = exports.VerticalButton = exports.UserRightForm = exports.Tooltip = exports.ToggleButton = exports.Tag = exports.TablePreview = exports.TableLayout = exports.Cell = exports.TableHtml5 = exports.TableHeader = exports.TableFooter = exports.Spotlight = exports.SisccFooter = exports.Share = exports.Select = exports.ScopeList = exports.reduceChildren = exports.spotlightScopeListEngine = exports.PeriodPicker = exports.Pagination = exports.NoData = exports.Logo = exports.Loading = exports.LabelDivider = exports.InputNumber = exports.Input = exports.ExpansionPanel = exports.DataFooter = exports.DataHeader = exports.Dataflow = exports.DataEdit = exports.Contact = exports.CollapsibleTree = exports.CollapseButtons = exports.Chips = exports.ChartsConfig = exports.Button = exports.Breadcrumbs = exports.ApiQueries = exports.Alert = undefined;
 
 var _Alert = require('./Alert');
 
@@ -378,6 +378,33 @@ Object.defineProperty(exports, 'AuthDialog', {
   }
 });
 
+var _VirtualizedTree = require('./VirtualizedTree');
+
+Object.defineProperty(exports, 'VirtualizedTree', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_VirtualizedTree).default;
+  }
+});
+
+var _AdvancedFilterDialog = require('./AdvancedFilterDialog');
+
+Object.defineProperty(exports, 'AdvancedFilterDialog', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_AdvancedFilterDialog).default;
+  }
+});
+
+var _HierarchicalFilter = require('./HierarchicalFilter');
+
+Object.defineProperty(exports, 'HierarchicalFilter', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HierarchicalFilter).default;
+  }
+});
+
 var _theme = require('./theme');
 
 Object.defineProperty(exports, 'sisccTheme', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "7.18.6",
+  "version": "7.19.1",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",
@@ -43,6 +43,7 @@
     "react": "^16.13.0",
     "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^16.8.6",
+    "react-draggable": "^4.4.5",
     "react-router-dom": "^5.0.1",
     "react-virtualized": "^9.21.2",
     "recompose": "^0.30.0"