@sis-cc/dotstatsuite-visions 7.18.6 → 7.19.0

package/es/VirtualizedTree/Item.js

@@ -0,0 +1,187 @@
+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 from 'react';
+import * as R from 'ramda';
+import PropTypes from 'prop-types';
+import ListItem from '@material-ui/core/ListItem';
+import Typography from '@material-ui/core/Typography';
+import ListItemText from '@material-ui/core/ListItemText';
+import IconButton from '@material-ui/core/IconButton';
+import SvgIcon from '@material-ui/core/SvgIcon';
+import cx from 'classnames';
+import { Tooltip } from '../';
+
+var checkBoxPath = 'M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z';
+var checkPath = 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z';
+
+var Item = function Item(_ref) {
+  var _cx, _extends2, _cx2, _cx3, _cx4, _cx5, _cx6;
+
+  var classes = _ref.classes,
+      id = _ref.id,
+      label = _ref.label,
+      _ref$description = _ref.description,
+      description = _ref$description === undefined ? '' : _ref$description,
+      isSelected = _ref.isSelected,
+      isDisabled = _ref.isDisabled,
+      changeList = _ref.changeList,
+      ariaLabel = _ref.ariaLabel,
+      NavigateIcon = _ref.NavigateIcon,
+      hasChild = _ref.hasChild,
+      hasChildrenOnLevel = _ref.hasChildrenOnLevel,
+      count = _ref.count,
+      svgPath = _ref.svgPath,
+      testId = _ref.testId,
+      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;
+
+  var _React$useState = React.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 React.createElement(
+    ListItem,
+    {
+      disableGutters: true,
+      classes: { disabled: classes.disabled },
+      className: cx(classes.listItemContainer, (_cx = {}, _cx[classes.disableSecondaryAction] = R.not(hasChild), _cx)),
+      disabled: isDisabled,
+      tabIndex: -1,
+      style: _extends({}, style, (_extends2 = {
+        flexDirection: isRtl ? 'row-reverse' : 'row'
+      }, _extends2['' + (isRtl ? 'paddingRight' : 'paddingLeft')] = padding + 'px', _extends2))
+    },
+    R.and(NavigateIcon, hasChild) && React.createElement(
+      IconButton,
+      {
+        disableRipple: true,
+        disableFocusRipple: true,
+        className: classes.arrow,
+        'aria-label': ariaLabel,
+        tabIndex: -1,
+        size: 'small',
+        color: 'inherit',
+        onClick: function onClick() {
+          return changeList(hierarchicalId || id);
+        }
+      },
+      React.createElement(NavigateIcon, null)
+    ),
+    React.createElement(ListItemText, _extends({
+      tabIndex: 0,
+      'aria-label': isDisabled ? 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: cx((_cx2 = {}, _cx2[classes.accessibilityItemHover] = accessibility, _cx2[classes.listItemSelected] = R.and(isSelected, R.not(isDisabled)), _cx2[classes.listItemHover] = R.not(isDisabled), _cx2)),
+      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,
+      primary: React.createElement(
+        'div',
+        {
+          className: cx(classes.labelContainer, (_cx3 = {}, _cx3[classes.rtlLabelContainer] = isRtl, _cx3))
+        },
+        React.createElement(
+          SvgIcon,
+          {
+            color: 'primary',
+            className: cx(classes.labelIcon, (_cx4 = {}, _cx4[classes.disabledLabel] = isDisabled, _cx4))
+          },
+          React.createElement('path', { d: R.and(isSelected, R.not(isDisabled)) ? checkPath : checkBoxPath })
+        ),
+        svgPath && React.createElement(
+          SvgIcon,
+          {
+            color: 'primary',
+            className: cx(classes.labelIcon, (_cx5 = {}, _cx5[classes.disabledLabel] = isDisabled, _cx5))
+          },
+          React.createElement('path', { d: svgPath })
+        ),
+        React.createElement(
+          Tooltip,
+          {
+            title: R.or(R.isNil(HTMLRenderer), R.isEmpty(description)) ? description : React.createElement(HTMLRenderer, { html: description, onClick: function onClick(e) {
+                return e.stopPropagation();
+              } }),
+            enterDelay: 400,
+            tabIndex: 0,
+            'aria-label': description,
+            'aria-hidden': false,
+            placement: 'top',
+            interactive: Boolean(HTMLRenderer),
+            onOpen: function onOpen() {
+              return setIsTooltipShown(true);
+            },
+            onClose: function onClose() {
+              return setIsTooltipShown(false);
+            }
+          },
+          React.createElement(
+            Typography,
+            {
+              'data-testid': testId + '_value_' + id,
+              color: 'inherit',
+              variant: 'body2',
+              className: cx(classes.label, (_cx6 = {}, _cx6[classes.disabledLabel] = isDisabled, _cx6[classes.tooltipNotice] = !R.isEmpty(description), _cx6))
+            },
+            label
+          )
+        ),
+        R.not(R.isNil(count)) && React.createElement(
+          Typography,
+          { variant: 'body2', className: classes.count },
+          '(',
+          count,
+          ')'
+        )
+      )
+    }))
+  );
+};
+
+Item.propTypes = process.env.NODE_ENV !== "production" ? {
+  classes: PropTypes.object,
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  label: PropTypes.string,
+  description: PropTypes.string,
+  parentId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  ariaLabel: PropTypes.string,
+  NavigateIcon: PropTypes.object,
+  isSelected: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  hasChild: PropTypes.bool,
+  hasChildrenOnLevel: PropTypes.bool,
+  isSection: PropTypes.bool,
+  changeList: PropTypes.func,
+  changeListDescription: PropTypes.string,
+  count: PropTypes.number,
+  svgPath: PropTypes.string,
+  style: PropTypes.object,
+  isRtl: PropTypes.bool,
+  testId: PropTypes.string,
+  accessibility: PropTypes.bool,
+  index: PropTypes.number,
+  labelRenderer: PropTypes.func,
+  HTMLRenderer: PropTypes.func,
+  hierarchicalId: PropTypes.string,
+  labels: PropTypes.object,
+  depth: PropTypes.number,
+  eventsCallbacks: PropTypes.func
+} : {};
+
+export default Item;

package/es/VirtualizedTree/VirtualizedTree.js

@@ -0,0 +1,341 @@
+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 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';
+import Item from './Item';
+import { useTheme } from '@material-ui/core';
+import { useStyles, height as rowHeight } from '../ScopeList/styles';
+import { getIsRtl } from '../utils';
+
+var getSingleItemScope = function getSingleItemScope(item) {
+  return [item];
+};
+
+export var getHierarchicalId = function getHierarchicalId(item) {
+  return R.prop('hierarchicalId', item) || R.prop('id', item);
+};
+
+export var 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);
+};
+
+export var 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);
+  };
+};
+
+export var 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 = useTheme();
+
+  var _useState = useState({}),
+      expandedIds = _useState[0],
+      setExpandedIds = _useState[1];
+
+  var _useState2 = useState(undefined),
+      scrollTop = _useState2[0],
+      setScrollTop = _useState2[1];
+
+  var _useState3 = useState([]),
+      shiftIndexes = _useState3[0],
+      setShiftIndexes = _useState3[1];
+
+  var _useState4 = useState({}),
+      selectIds = _useState4[0],
+      setSelectIds = _useState4[1];
+
+  var _useState5 = useState(false),
+      isMouseDown = _useState5[0],
+      setIsMouseDown = _useState5[1];
+
+  var _useMemo = 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 = 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 = useRef();
+  var classes = useStyles();
+
+  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(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,
+    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)
+              }));
+            }
+          });
+        }
+      )
+    ),
+    withExpandControl && React.createElement(
+      'div',
+      null,
+      React.createElement(
+        Button,
+        { onClick: collapseAll, color: 'primary' },
+        R.prop('colapseAll', labels)
+      ),
+      React.createElement(
+        Button,
+        { onClick: expandAll, color: 'primary' },
+        R.prop('expandAll', labels)
+      )
+    )
+  );
+};
+
+VirtualizedTree.propTypes = process.env.NODE_ENV !== "production" ? {
+  accessibility: PropTypes.bool,
+  changeSelection: PropTypes.func,
+  disableAccessor: PropTypes.func,
+  getItemScope: PropTypes.func,
+  HTMLRenderer: PropTypes.func,
+  isRtl: PropTypes.bool,
+  items: PropTypes.array,
+  labels: PropTypes.shape({
+    disableItemLabel: PropTypes.string,
+    colapseAll: PropTypes.string,
+    expandAll: PropTypes.string
+  }),
+  labelRenderer: PropTypes.func,
+  withExpandControl: PropTypes.bool,
+  maxTreeHeight: PropTypes.number
+} : {};
+
+export default VirtualizedTree;

package/es/VirtualizedTree/index.js

@@ -0,0 +1,38 @@
+/**
+ *
+ * Virtualized Tree visualization of a hierarchical list with handling of single selection
+ * and Ctrl and shift binding keys multi selections.
+ *
+ * @memberOf VISIONS
+ * @name VirtualizedTree
+ * @tag component
+ * @api public
+ * @props
+ * VirtualizedTree.propTypes = {
+ *   accessibility: PropTypes.bool,
+ *   items: PropTypes.arrayOf(PropTypes.shape({
+ *     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+ *     label: PropTypes.string,
+ *     parentId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ *     isSelected: PropTypes.bool,
+ *     isDisabled: PropTypes.bool,
+ *     count: PropTypes.number,
+ *     path: PropTypes.arrayOf(PropTypes.shape({
+ *       id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+ *       label: PropTypes.string,
+ *       parentId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ *       isSelected: PropTypes.bool,
+ *     })),
+ *     [yourDisplayAccessorKey]: PropTypes.bool,
+ *   })),
+ *   labels: PropTypes.shape({
+ *     childrenNavigateDesc: PropTypes.string,
+ *     navigateNext: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *     backHelper: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *     disableItemLabel: PropTypes.string,
+ *   }),
+ *   labelRenderer: PropTypes.func,
+ * }
+ */
+
+export { default } from './VirtualizedTree';

package/es/index.js

@@ -43,4 +43,7 @@ export { default as Tooltip } from './Tooltip';
 export { default as UserRightForm } from './UserRightForm';
 export { default as VerticalButton } from './VerticalButton';
 export { default as AuthDialog } from './AuthDialog';
+export { default as VirtualizedTree } from './VirtualizedTree';
+export { default as AdvancedFilterDialog } from './AdvancedFilterDialog';
+export { default as HierarchicalFilter } from './HierarchicalFilter';
 export { sisccTheme, innerPalette, T4_BREAKPOINTS } from './theme';