@sis-cc/dotstatsuite-visions 7.18.6 → 7.19.1

package/lib/HierarchicalFilter/HierarchicalFilter.js

@@ -0,0 +1,169 @@
+'use strict';
+
+exports.__esModule = true;
+
+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 _Container = require('@material-ui/core/Container');
+
+var _Container2 = _interopRequireDefault(_Container);
+
+var _PlaylistAddCheck = require('@material-ui/icons/PlaylistAddCheck');
+
+var _PlaylistAddCheck2 = _interopRequireDefault(_PlaylistAddCheck);
+
+var _ = require('../');
+
+var _styles = require('../ScopeList/styles');
+
+var _core = require('@material-ui/core');
+
+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 getCounter = function getCounter(items, displayAccessor, tagAccessor) {
+  var count = R.pipe(R.filter(R.prop('isSelected')), R.length)(items);
+  var total = R.pipe(R.when(R.always(R.is(Function, displayAccessor)), R.filter(displayAccessor)), R.length)(items);
+  if (R.is(Function, tagAccessor)) {
+    return tagAccessor(count, total);
+  }
+  return count + '/' + total;
+};
+
+var HierarchicalFilter = function HierarchicalFilter(props) {
+  var id = props.id,
+      items = props.items,
+      changeSelection = props.changeSelection,
+      onChangeActivePanel = props.onChangeActivePanel,
+      activePanelId = props.activePanelId,
+      Tag = props.Tag,
+      testId = props.testId,
+      accessibility = props.accessibility,
+      _props$expansionPanel = props.expansionPanelProps,
+      expansionPanelProps = _props$expansionPanel === undefined ? {} : _props$expansionPanel,
+      _props$labelRenderer = props.labelRenderer,
+      labelRenderer = _props$labelRenderer === undefined ? R.prop('label') : _props$labelRenderer,
+      toggleBulk = props.toggleBulk,
+      label = props.label,
+      labels = props.labels,
+      tagAccessor = props.tagAccessor,
+      displayAccessor = props.displayAccessor;
+
+  var _useState = (0, _react.useState)({ term: '' }),
+      term = _useState[0].term,
+      setSpotlight = _useState[1];
+
+  var classes = (0, _styles.useStyles)({ accessibility: accessibility });
+  var theme = (0, _core.useTheme)();
+  var isRtl = (0, _utils.getIsRtl)(theme);
+  var Chip = R.isNil(Tag) ? _.Tag : Tag;
+  var tagValue = getCounter(items, displayAccessor, tagAccessor);
+  var groupedItemsByParentId = R.groupBy(R.propOr('#ROOT', 'parentId'), items);
+  var hasSpotligt = R.length(items) >= 8;
+  var recurse = R.filter(function (item) {
+    var isValidItem = R.isEmpty(term) || R.isNil(term) ? true : R.includes(R.toLower(term), R.toLower(labelRenderer(item)));
+    if (isValidItem) {
+      return true;
+    }
+    if (R.has(item.id, groupedItemsByParentId)) {
+      var filtered = recurse(R.prop(item.id, groupedItemsByParentId));
+      if (!R.isEmpty(filtered)) {
+        return true;
+      }
+    }
+    return false;
+  });
+
+  var filteredItems = R.isEmpty(term) || R.isNil(term) ? items : recurse(items);
+
+  var onSelect = function onSelect(values) {
+    changeSelection(id, values);
+  };
+  return _react2.default.createElement(
+    _.ExpansionPanel,
+    _extends({
+      isOpen: R.equals(id, activePanelId),
+      id: id,
+      testId: '' + testId,
+      label: labelRenderer({ id: id, label: label }),
+      onChangeActivePanel: onChangeActivePanel,
+      overflow: true,
+      topElementComponent: _react2.default.createElement(
+        _react.Fragment,
+        null,
+        _react2.default.createElement(
+          _Container2.default,
+          { disableGutters: true, className: classes.spotlightContainer },
+          hasSpotligt && _react2.default.createElement(_.Spotlight, {
+            className: { container: classes.middle },
+            fullWidth: true,
+            hasClearAll: true,
+            placeholder: R.prop('placeholder', labels),
+            term: term,
+            hasCommit: false,
+            spotlight: { fields: {} },
+            action: setSpotlight
+          }),
+          R.is(Function, toggleBulk) && _react2.default.createElement(
+            _.VerticalButton,
+            {
+              'aria-label': R.prop('advancedSelection')(labels),
+              classes: { root: classes.bulkSelectionIcon },
+              onClick: toggleBulk
+            },
+            _react2.default.createElement(_PlaylistAddCheck2.default, { color: 'primary' })
+          )
+        )
+      ),
+      tag: _react2.default.createElement(
+        Chip,
+        { items: items },
+        tagValue
+      ),
+      isBlank: R.isEmpty(items)
+    }, expansionPanelProps),
+    _react2.default.createElement(_.VirtualizedTree, _extends({}, props, { items: filteredItems, changeSelection: onSelect, isRtl: isRtl }))
+  );
+};
+
+HierarchicalFilter.propTypes = process.env.NODE_ENV !== "production" ? {
+  id: _propTypes2.default.string,
+  accessibility: _propTypes2.default.bool,
+  activePanelId: _propTypes2.default.string,
+  changeSelection: _propTypes2.default.func,
+  onChangeActivePanel: _propTypes2.default.func,
+  disableAccessor: _propTypes2.default.func,
+  displayAccessor: _propTypes2.default.func,
+  HTMLRenderer: _propTypes2.default.func,
+  isRtl: _propTypes2.default.bool,
+  items: _propTypes2.default.array,
+  label: _propTypes2.default.string,
+  labels: _propTypes2.default.shape({
+    disableItemLabel: _propTypes2.default.string,
+    placeholder: _propTypes2.default.string
+  }),
+  labelRenderer: _propTypes2.default.func,
+  Tag: _propTypes2.default.func,
+  testId: _propTypes2.default.string,
+  expansionPanelProps: _propTypes2.default.object,
+  toggleBulk: _propTypes2.default.func,
+  tagAccessor: _propTypes2.default.func
+} : {};
+
+exports.default = HierarchicalFilter;
+module.exports = exports['default'];

package/lib/HierarchicalFilter/index.js

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

package/lib/ScopeList/Item.js

@@ -94,7 +94,9 @@ var Item = function Item(_ref) {
       labelRenderer = _ref.labelRenderer,
       HTMLRenderer = _ref.HTMLRenderer,
       hierarchicalId = _ref.hierarchicalId,
-      labels = _ref.labels;
+      labels = _ref.labels,
+      _ref$depth = _ref.depth,
+      depth = _ref$depth === undefined ? 0 : _ref$depth;
 
   var _React$useState = _react2.default.useState(false),
       isTooltipShown = _React$useState[0],
@@ -128,6 +130,7 @@ var Item = function Item(_ref) {
       secondaryTypographyProps: { color: 'inherit' },
       classes: { root: classes.listItem },
       className: (0, _classnames2.default)((_cx2 = {}, _cx2[classes.accessibilityItemHover] = accessibility, _cx2[classes.listItemSelected] = R.and(isSelected, R.not(isDisabled)), _cx2[classes.listItemHover] = R.not(isDisabled), _cx2)),
+      style: { marginLeft: depth * 20 + 'px' },
       title: isDisabled ? R.propOr('', 'disableItemLabel')(labels) + ' ' + label : label,
       primary: _react2.default.createElement(
         'div',
@@ -272,7 +275,8 @@ Item.propTypes = process.env.NODE_ENV !== "production" ? {
   labelRenderer: _propTypes2.default.func,
   HTMLRenderer: _propTypes2.default.func,
   hierarchicalId: _propTypes2.default.string,
-  labels: _propTypes2.default.object
+  labels: _propTypes2.default.object,
+  depth: _propTypes2.default.number
 } : {};
 
 exports.default = Item;

package/lib/VirtualizedTree/Item.js

@@ -0,0 +1,223 @@
+'use strict';
+
+exports.__esModule = true;
+
+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 _ramda = require('ramda');
+
+var R = _interopRequireWildcard(_ramda);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _ListItem = require('@material-ui/core/ListItem');
+
+var _ListItem2 = _interopRequireDefault(_ListItem);
+
+var _Typography = require('@material-ui/core/Typography');
+
+var _Typography2 = _interopRequireDefault(_Typography);
+
+var _ListItemText = require('@material-ui/core/ListItemText');
+
+var _ListItemText2 = _interopRequireDefault(_ListItemText);
+
+var _IconButton = require('@material-ui/core/IconButton');
+
+var _IconButton2 = _interopRequireDefault(_IconButton);
+
+var _SvgIcon = require('@material-ui/core/SvgIcon');
+
+var _SvgIcon2 = _interopRequireDefault(_SvgIcon);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _ = require('../');
+
+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 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 = _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,
+    {
+      disableGutters: true,
+      classes: { disabled: classes.disabled },
+      className: (0, _classnames2.default)(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) && _react2.default.createElement(
+      _IconButton2.default,
+      {
+        disableRipple: true,
+        disableFocusRipple: true,
+        className: classes.arrow,
+        'aria-label': ariaLabel,
+        tabIndex: -1,
+        size: 'small',
+        color: 'inherit',
+        onClick: function onClick() {
+          return changeList(hierarchicalId || id);
+        }
+      },
+      _react2.default.createElement(NavigateIcon, null)
+    ),
+    _react2.default.createElement(_ListItemText2.default, _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: (0, _classnames2.default)((_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: _react2.default.createElement(
+        'div',
+        {
+          className: (0, _classnames2.default)(classes.labelContainer, (_cx3 = {}, _cx3[classes.rtlLabelContainer] = isRtl, _cx3))
+        },
+        _react2.default.createElement(
+          _SvgIcon2.default,
+          {
+            color: 'primary',
+            className: (0, _classnames2.default)(classes.labelIcon, (_cx4 = {}, _cx4[classes.disabledLabel] = isDisabled, _cx4))
+          },
+          _react2.default.createElement('path', { d: R.and(isSelected, R.not(isDisabled)) ? checkPath : checkBoxPath })
+        ),
+        svgPath && _react2.default.createElement(
+          _SvgIcon2.default,
+          {
+            color: 'primary',
+            className: (0, _classnames2.default)(classes.labelIcon, (_cx5 = {}, _cx5[classes.disabledLabel] = isDisabled, _cx5))
+          },
+          _react2.default.createElement('path', { d: svgPath })
+        ),
+        _react2.default.createElement(
+          _.Tooltip,
+          {
+            title: R.or(R.isNil(HTMLRenderer), R.isEmpty(description)) ? description : _react2.default.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);
+            }
+          },
+          _react2.default.createElement(
+            _Typography2.default,
+            {
+              'data-testid': testId + '_value_' + id,
+              color: 'inherit',
+              variant: 'body2',
+              className: (0, _classnames2.default)(classes.label, (_cx6 = {}, _cx6[classes.disabledLabel] = isDisabled, _cx6[classes.tooltipNotice] = !R.isEmpty(description), _cx6))
+            },
+            label
+          )
+        ),
+        R.not(R.isNil(count)) && _react2.default.createElement(
+          _Typography2.default,
+          { variant: 'body2', className: classes.count },
+          '(',
+          count,
+          ')'
+        )
+      )
+    }))
+  );
+};
+
+Item.propTypes = process.env.NODE_ENV !== "production" ? {
+  classes: _propTypes2.default.object,
+  id: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
+  label: _propTypes2.default.string,
+  description: _propTypes2.default.string,
+  parentId: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
+  ariaLabel: _propTypes2.default.string,
+  NavigateIcon: _propTypes2.default.object,
+  isSelected: _propTypes2.default.bool,
+  isDisabled: _propTypes2.default.bool,
+  hasChild: _propTypes2.default.bool,
+  hasChildrenOnLevel: _propTypes2.default.bool,
+  isSection: _propTypes2.default.bool,
+  changeList: _propTypes2.default.func,
+  changeListDescription: _propTypes2.default.string,
+  count: _propTypes2.default.number,
+  svgPath: _propTypes2.default.string,
+  style: _propTypes2.default.object,
+  isRtl: _propTypes2.default.bool,
+  testId: _propTypes2.default.string,
+  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
+} : {};
+
+exports.default = Item;
+module.exports = exports['default'];