@sis-cc/dotstatsuite-visions 12.18.0 → 12.20.0

package/lib/DynamicDrawer/AdvancedSelection.js

@@ -0,0 +1,590 @@
+'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 _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _utils = require('../VirtualizedTree/utils');
+
+var _Button = require('@mui/material/Button');
+
+var _Button2 = _interopRequireDefault(_Button);
+
+var _Paper = require('@mui/material/Paper');
+
+var _Paper2 = _interopRequireDefault(_Paper);
+
+var _Grid = require('@mui/material/Grid');
+
+var _Grid2 = _interopRequireDefault(_Grid);
+
+var _Typography = require('@mui/material/Typography');
+
+var _Typography2 = _interopRequireDefault(_Typography);
+
+var _ = require('..');
+
+var _withExpansionTree = require('../VirtualizedTree/withExpansionTree');
+
+var _withSpotlight = require('../VirtualizedTree/withSpotlight');
+
+var _makeStyles = require('@mui/styles/makeStyles');
+
+var _makeStyles2 = _interopRequireDefault(_makeStyles);
+
+var _EmojiObjects = require('@mui/icons-material/EmojiObjects');
+
+var _EmojiObjects2 = _interopRequireDefault(_EmojiObjects);
+
+var _singleSelection = require('../AdvancedFilterDialog/images/single-selection.png');
+
+var _singleSelection2 = _interopRequireDefault(_singleSelection);
+
+var _childrenSelection = require('../AdvancedFilterDialog/images/children-selection.png');
+
+var _childrenSelection2 = _interopRequireDefault(_childrenSelection);
+
+var _branchSelection = require('../AdvancedFilterDialog/images/branch-selection.png');
+
+var _branchSelection2 = _interopRequireDefault(_branchSelection);
+
+var _levelSelection = require('../AdvancedFilterDialog/images/level-selection.png');
+
+var _levelSelection2 = _interopRequireDefault(_levelSelection);
+
+var _material = require('@mui/material');
+
+var _SelectionModesMobile = require('./SelectionModesMobile');
+
+var _SelectionModesMobile2 = _interopRequireDefault(_SelectionModesMobile);
+
+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 }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var useStyles = (0, _makeStyles2.default)(function (theme) {
+  return {
+    header: {
+      color: 'black',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      width: '100%'
+    },
+    headerLabel: {
+      fontSize: '16px',
+      fontFamily: 'PT Sans Narrow',
+      fontWeight: '700',
+      color: theme.palette.grey[700]
+    },
+    selectionTitle: {
+      fontSize: '12px',
+      fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
+      fontWeight: '500',
+      color: theme.palette.grey['A700']
+    },
+    closeButton: {
+      color: 'grey !important',
+      padding: 0
+    },
+    selectMode: {
+      marginLeft: 10,
+      '& .MuiInputBase-root': {
+        height: 32
+      }
+    },
+    narrowTop: {
+      flexDirection: 'column',
+      alignItems: 'flex-start'
+    },
+    spotlight: { width: '45%' },
+    selection: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    narrowSpotlight: { width: '100%' },
+    selectionButton: {
+      marginLeft: 24,
+      marginRight: 15,
+      height: 32
+    },
+    narrowSelectionButton: {
+      height: 32,
+      marginTop: 15,
+      marginRight: 10
+    },
+    selectionMenu: {
+      width: '50%',
+      maxHeight: '100%',
+      position: 'absolute',
+      top: 110,
+      right: 48,
+      zIndex: 1
+    },
+    narrowSelectionMenu: {
+      width: '100%'
+    },
+    selectModeContainer: {
+      display: 'flex',
+      flexDirection: 'column',
+      flexWrap: 'wrap',
+      alignItems: 'flex-start'
+    },
+    selectButton: {
+      color: theme.palette.primary.main,
+      '&:hover': {
+        color: theme.palette.primary.main,
+        backgroundColor: theme.palette.action.hover
+      }
+    },
+    selectModeItem: {
+      boxShadow: 'none',
+      display: 'flex',
+      backgroundColor: 'transparent',
+      flexDirection: 'row-reverse',
+      alignItems: 'center',
+      '& p': {
+        paddingLeft: '5px',
+        fontSize: '12px',
+        fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
+        color: theme.palette.primary.main,
+        fontWeight: '500',
+        lineHeight: 1.43,
+        textAlign: 'left'
+      },
+      '& img': {
+        width: 21,
+        height: 24
+      }
+    },
+    hint: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginRight: 7,
+      color: theme.palette.primary.main
+    },
+    divider: {
+      backgroundColor: theme.palette.primary.light
+    },
+    actions: {
+      justifyContent: 'flex-end'
+    },
+    ellipsis: {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    tooltip: {
+      backgroundColor: theme.palette.action.hover
+    },
+    subheader: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      justifyContent: 'space-between'
+    },
+    narrowHeader: {
+      alignItems: 'flex-start',
+      width: '100%'
+    },
+    topElements: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between'
+    }
+  };
+});
+
+var AdvancedSelection = function AdvancedSelection(props) {
+  var _cx, _cx2, _cx3, _cx4;
+
+  var id = props.id,
+      items = props.items,
+      labelRenderer = props.labelRenderer,
+      isNarrow = props.isNarrow,
+      labels = props.labels,
+      _props$disableAccesso = props.disableAccessor,
+      disableAccessor = _props$disableAccesso === undefined ? R.always(false) : _props$disableAccesso,
+      expandAll = props.expandAll,
+      collapseAll = props.collapseAll,
+      selection = props.selection,
+      setSelection = props.setSelection,
+      allSelection = props.allSelection,
+      setAllSelection = props.setAllSelection,
+      spotlight = props.spotlight,
+      setSpotlight = props.setSpotlight,
+      expandedIds = props.expandedIds,
+      allItems = props.allItems,
+      filter = props.filter,
+      rest = _objectWithoutProperties(props, ['id', 'items', 'labelRenderer', 'isNarrow', 'labels', 'disableAccessor', 'expandAll', 'collapseAll', 'selection', 'setSelection', 'allSelection', 'setAllSelection', 'spotlight', 'setSpotlight', 'expandedIds', 'allItems', 'filter']);
+
+  var _useState = (0, _react.useState)('single'),
+      selectionMode = _useState[0],
+      setSelectionMode = _useState[1];
+
+  var classes = useStyles();
+  var getTotal = function getTotal(items, spotlightAcc) {
+    var itemsIds = R.pluck('id', items);
+    var total = R.pipe(R.uniq, R.length)(itemsIds);
+    if (R.is(Function, spotlightAcc)) {
+      return spotlightAcc(total);
+    }
+    return total;
+  };
+
+  var selectionItems = R.map(function (item) {
+    return _extends({}, item, {
+      isSelected: R.has(item.id, selection) ? !item.isSelected : !!item.isSelected
+    });
+  }, items);
+  var indexedFilteredItems = R.indexBy(_utils.getHierarchicalId, selectionItems);
+
+  var selectionOptions = [{
+    value: 'single',
+    label: R.prop('singleSelection', labels),
+    img: _singleSelection2.default
+  }, {
+    value: 'children',
+    label: R.prop('childrenSelection', labels),
+    img: _childrenSelection2.default
+  }, {
+    value: 'branch',
+    label: R.prop('branchSelection', labels),
+    img: _branchSelection2.default
+  }, {
+    value: 'level',
+    label: R.prop('levelSelection', labels),
+    img: _levelSelection2.default
+  }];
+
+  var _allGroupedItems = R.pipe(R.map(function (item) {
+    return _extends({}, item, {
+      isSelected: R.has(item.id, selection) ? !item.isSelected : !!item.isSelected
+    });
+  }), R.groupBy(R.propOr('#ROOT', 'parentId')))(allItems);
+
+  var isChildInSelectionScope = function isChildInSelectionScope(child, ancestor) {
+    if (!R.has((0, _utils.getHierarchicalId)(child), indexedFilteredItems)) {
+      return false;
+    }
+    if (selectionMode === 'single' || selectionMode === 'level') {
+      return false;
+    }
+    if (selectionMode === 'children') {
+      return child.parentId === (0, _utils.getHierarchicalId)(ancestor);
+    }
+    return true;
+  };
+
+  var _disableAccessor = (0, _utils.getEvolvedDisableAccessor)(_allGroupedItems, disableAccessor, isChildInSelectionScope);
+
+  var isDisabled = function isDisabled(item) {
+    return R.is(Function, disableAccessor) ? disableAccessor(item) : false;
+  };
+  var scopeGetter = R.prop(selectionMode, _utils.getScopeGetters);
+
+  var onChangeSelection = function onChangeSelection(ids) {
+    var _extends2;
+
+    var nextSelection = R.reduce(function (acc, id) {
+      return R.has(id, acc) ? R.dissoc(id, acc) : R.assoc(id, id, acc);
+    }, selection, ids);
+    setSelection(nextSelection);
+    setAllSelection(_extends({}, allSelection, (_extends2 = {}, _extends2[id] = R.values(nextSelection), _extends2)));
+  };
+
+  var rejectonlyDisabledItems = function rejectonlyDisabledItems(item) {
+    return _disableAccessor(item);
+  };
+  var getSelectedItems = function getSelectedItems(item) {
+    return R.propOr(false, 'isSelected')(item);
+  };
+
+  var selectAll = function selectAll() {
+    var _extends3;
+
+    var imposedIds = R.reduce(function (acc, item) {
+      return R.uniq(R.concat(R.propOr([], 'imposedIds', item), acc));
+    }, [])(items);
+    var ids = R.pluck('id', R.reject(getSelectedItems, R.reject(rejectonlyDisabledItems, items)));
+    var allIds = R.concat(imposedIds, ids);
+    var nextSelection = R.reduce(function (acc, id) {
+      return R.has(id, acc) ? acc : R.assoc(id, id, acc);
+    }, {}, allIds);
+    setSelection(nextSelection);
+    setAllSelection(_extends({}, allSelection, (_extends3 = {}, _extends3[id] = R.values(nextSelection), _extends3)));
+  };
+
+  var deselectAll = function deselectAll() {
+    var _extends4;
+
+    var itemIds = R.pipe(R.filter(getSelectedItems), R.pluck('id'))(items);
+    var ids = R.difference(itemIds, selection);
+    var nextSelection = R.reduce(function (acc, id) {
+      return R.has(id, acc) ? acc : R.assoc(id, id, acc);
+    }, {}, ids);
+    setSelection(nextSelection);
+    setAllSelection(_extends({}, allSelection, (_extends4 = {}, _extends4[id] = R.values(nextSelection), _extends4)));
+  };
+  var mapIndexed = R.addIndex(R.map);
+  return _react2.default.createElement(
+    _Grid2.default,
+    { container: true },
+    _react2.default.createElement(
+      _Grid2.default,
+      {
+        item: true,
+        container: true,
+        xs: 12,
+        className: (0, _classnames2.default)(classes.topElements, (_cx = {}, _cx[classes.narrowTop] = isNarrow, _cx))
+      },
+      isNarrow && _react2.default.createElement(
+        _Grid2.default,
+        { item: true, container: true, xs: 12 },
+        _react2.default.createElement(
+          'div',
+          { className: (0, _classnames2.default)(classes.selectModeContainer, (_cx2 = {}, _cx2[classes.narrowHeader] = isNarrow, _cx2)) },
+          _react2.default.createElement(
+            'div',
+            { className: classes.hint },
+            _react2.default.createElement(
+              _.Tooltip,
+              {
+                role: 'tooltip',
+                variant: 'light',
+                title: _react2.default.createElement(
+                  _Typography2.default,
+                  { variant: 'body2' },
+                  R.prop('hint', labels)
+                ),
+                'aria-label': R.prop('hint', labels),
+                tabIndex: 0
+              },
+              _react2.default.createElement(
+                _Button2.default,
+                null,
+                _react2.default.createElement(_EmojiObjects2.default, null)
+              )
+            ),
+            _react2.default.createElement(
+              _Typography2.default,
+              {
+                className: classes.selectionTitle,
+                'aria-label': R.prop('selectionMode', labels),
+                tabIndex: 0
+              },
+              R.prop('selectionMode', labels)
+            )
+          ),
+          _react2.default.createElement(_SelectionModesMobile2.default, {
+            selectionModes: selectionOptions,
+            selectionMode: selectionMode,
+            setSelectionMode: setSelectionMode,
+            classes: classes,
+            isNarrow: isNarrow
+          })
+        )
+      ),
+      _react2.default.createElement(
+        'div',
+        { className: classes.spotlight },
+        _react2.default.createElement(_.Spotlight, {
+          hasClearAll: true,
+          placeholder: getTotal(items, R.prop('placeholder', labels)),
+          term: spotlight.term,
+          hasCommit: false,
+          spotlight: { fields: {} },
+          action: setSpotlight
+        })
+      )
+    ),
+    _react2.default.createElement(
+      _Grid2.default,
+      { item: true, xs: isNarrow ? 12 : 8 },
+      _react2.default.createElement(
+        'div',
+        { style: { display: 'flex', flexDirection: 'row' } },
+        _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,
+          _react2.default.createElement(
+            _.Button,
+            { onClick: selectAll, color: 'primary' },
+            R.prop('selectAll', labels)
+          ),
+          _react2.default.createElement(
+            _.Button,
+            { style: { marginLeft: 10 }, onClick: deselectAll, color: 'primary' },
+            R.prop('deselectAll', labels)
+          )
+        )
+      ),
+      _react2.default.createElement(_material.Divider, { className: classes.divider }),
+      _react2.default.createElement(_.VirtualizedTree, _extends({}, rest, {
+        disableAccessor: _disableAccessor,
+        isGreyed: isDisabled,
+        labels: labels,
+        labelRenderer: labelRenderer,
+        items: selectionItems,
+        changeSelection: function changeSelection(selection, ids) {
+          return onChangeSelection(selection, ids, filter);
+        },
+        withExpandControl: true,
+        treeHeight: isNarrow ? 0 : '700px',
+        scopeGetter: scopeGetter,
+        expandedIds: expandedIds
+      }))
+    ),
+    !isNarrow && _react2.default.createElement(
+      _Grid2.default,
+      { item: true, container: true, xs: 4 },
+      _react2.default.createElement(
+        'div',
+        { className: (0, _classnames2.default)(classes.selectModeContainer, (_cx3 = {}, _cx3[classes.narrowHeader] = isNarrow, _cx3)) },
+        _react2.default.createElement(
+          'div',
+          { className: classes.hint },
+          _react2.default.createElement(
+            _.Tooltip,
+            {
+              role: 'tooltip',
+              variant: 'light',
+              title: _react2.default.createElement(
+                _Typography2.default,
+                { variant: 'body2' },
+                R.prop('hint', labels)
+              ),
+              'aria-label': R.prop('hint', labels),
+              tabIndex: 0
+            },
+            _react2.default.createElement(
+              _Button2.default,
+              null,
+              _react2.default.createElement(_EmojiObjects2.default, null)
+            )
+          ),
+          _react2.default.createElement(
+            _Typography2.default,
+            {
+              className: classes.selectionTitle,
+              'aria-label': R.prop('selectionMode', labels),
+              tabIndex: 0
+            },
+            R.prop('selectionMode', labels)
+          )
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: (0, _classnames2.default)(classes.selectModeContainer, (_cx4 = {}, _cx4[classes.narrowHeader] = isNarrow, _cx4)) },
+          mapIndexed(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 }),
+                tabIndex: -1
+              },
+              _react2.default.createElement(
+                _.Button,
+                {
+                  className: classes.selectButton,
+                  selected: value === selectionMode,
+                  onClick: function onClick() {
+                    setSelectionMode(value);
+                  },
+                  'aria-pressed': value === selectionMode,
+                  'aria-label': label,
+                  tabIndex: 0
+                },
+                _react2.default.createElement(
+                  _Paper2.default,
+                  { elevation: 0, className: classes.selectModeItem, key: value },
+                  _react2.default.createElement(
+                    _Typography2.default,
+                    null,
+                    label
+                  ),
+                  !R.isNil(img) && R.is(String, img) && _react2.default.createElement('img', { src: img, alt: value })
+                )
+              )
+            );
+          }, selectionOptions)
+        )
+      )
+    )
+  );
+};
+
+AdvancedSelection.propTypes = process.env.NODE_ENV !== "production" ? {
+  id: _propTypes2.default.string,
+  accessibility: _propTypes2.default.bool,
+  disableAccessor: _propTypes2.default.func,
+  HTMLRenderer: _propTypes2.default.func,
+  filter: _propTypes2.default.object,
+  selection: _propTypes2.default.object,
+  allSelection: _propTypes2.default.object,
+  setAllSelection: _propTypes2.default.func,
+  setSelection: _propTypes2.default.func,
+  isRtl: _propTypes2.default.bool,
+  isNarrow: _propTypes2.default.bool,
+  items: _propTypes2.default.array,
+  labels: _propTypes2.default.shape({
+    placeholder: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
+    disableItemLabel: _propTypes2.default.string,
+    singleSelection: _propTypes2.default.string,
+    childrenSelection: _propTypes2.default.string,
+    branchSelection: _propTypes2.default.string,
+    levelSelection: _propTypes2.default.string,
+    selectAll: _propTypes2.default.string,
+    deselectAll: _propTypes2.default.string,
+    apply: _propTypes2.default.string,
+    cancel: _propTypes2.default.string
+  }),
+  labelRenderer: _propTypes2.default.func,
+  expandAll: _propTypes2.default.func,
+  collapseAll: _propTypes2.default.func,
+  spotlight: _propTypes2.default.object,
+  setSpotlight: _propTypes2.default.func,
+  expandedIds: _propTypes2.default.object,
+  allItems: _propTypes2.default.array
+} : {};
+
+exports.default = (0, _withSpotlight.withSpotlight)((0, _withExpansionTree.withExpansionTree)(AdvancedSelection));
+module.exports = exports['default'];