@sis-cc/dotstatsuite-visions 12.18.0 → 12.20.0

package/es/DynamicDrawer/AdvancedSelection.js

@@ -0,0 +1,532 @@
+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; };
+
+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; }
+
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import * as R from 'ramda';
+import cx from 'classnames';
+import { getEvolvedDisableAccessor, getHierarchicalId, getScopeGetters } from '../VirtualizedTree/utils';
+import IconButton from '@mui/material/Button';
+import Paper from '@mui/material/Paper';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import { Button, Spotlight, Tooltip, VirtualizedTree } from '..';
+import { withExpansionTree } from '../VirtualizedTree/withExpansionTree';
+import { withSpotlight } from '../VirtualizedTree/withSpotlight';
+import makeStyles from '@mui/styles/makeStyles';
+import HintIcon from '@mui/icons-material/EmojiObjects';
+import singleImg from '../AdvancedFilterDialog/images/single-selection.png';
+import childrenImg from '../AdvancedFilterDialog/images/children-selection.png';
+import branchImg from '../AdvancedFilterDialog/images/branch-selection.png';
+import levelImg from '../AdvancedFilterDialog/images/level-selection.png';
+import { Divider } from '@mui/material';
+import ButtonCarousel from './SelectionModesMobile';
+
+var useStyles = makeStyles(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 = 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(getHierarchicalId, selectionItems);
+
+  var selectionOptions = [{
+    value: 'single',
+    label: R.prop('singleSelection', labels),
+    img: singleImg
+  }, {
+    value: 'children',
+    label: R.prop('childrenSelection', labels),
+    img: childrenImg
+  }, {
+    value: 'branch',
+    label: R.prop('branchSelection', labels),
+    img: branchImg
+  }, {
+    value: 'level',
+    label: R.prop('levelSelection', labels),
+    img: levelImg
+  }];
+
+  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(getHierarchicalId(child), indexedFilteredItems)) {
+      return false;
+    }
+    if (selectionMode === 'single' || selectionMode === 'level') {
+      return false;
+    }
+    if (selectionMode === 'children') {
+      return child.parentId === getHierarchicalId(ancestor);
+    }
+    return true;
+  };
+
+  var _disableAccessor = getEvolvedDisableAccessor(_allGroupedItems, disableAccessor, isChildInSelectionScope);
+
+  var isDisabled = function isDisabled(item) {
+    return R.is(Function, disableAccessor) ? disableAccessor(item) : false;
+  };
+  var scopeGetter = R.prop(selectionMode, 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 React.createElement(
+    Grid,
+    { container: true },
+    React.createElement(
+      Grid,
+      {
+        item: true,
+        container: true,
+        xs: 12,
+        className: cx(classes.topElements, (_cx = {}, _cx[classes.narrowTop] = isNarrow, _cx))
+      },
+      isNarrow && React.createElement(
+        Grid,
+        { item: true, container: true, xs: 12 },
+        React.createElement(
+          'div',
+          { className: cx(classes.selectModeContainer, (_cx2 = {}, _cx2[classes.narrowHeader] = isNarrow, _cx2)) },
+          React.createElement(
+            'div',
+            { className: classes.hint },
+            React.createElement(
+              Tooltip,
+              {
+                role: 'tooltip',
+                variant: 'light',
+                title: React.createElement(
+                  Typography,
+                  { variant: 'body2' },
+                  R.prop('hint', labels)
+                ),
+                'aria-label': R.prop('hint', labels),
+                tabIndex: 0
+              },
+              React.createElement(
+                IconButton,
+                null,
+                React.createElement(HintIcon, null)
+              )
+            ),
+            React.createElement(
+              Typography,
+              {
+                className: classes.selectionTitle,
+                'aria-label': R.prop('selectionMode', labels),
+                tabIndex: 0
+              },
+              R.prop('selectionMode', labels)
+            )
+          ),
+          React.createElement(ButtonCarousel, {
+            selectionModes: selectionOptions,
+            selectionMode: selectionMode,
+            setSelectionMode: setSelectionMode,
+            classes: classes,
+            isNarrow: isNarrow
+          })
+        )
+      ),
+      React.createElement(
+        'div',
+        { className: classes.spotlight },
+        React.createElement(Spotlight, {
+          hasClearAll: true,
+          placeholder: getTotal(items, R.prop('placeholder', labels)),
+          term: spotlight.term,
+          hasCommit: false,
+          spotlight: { fields: {} },
+          action: setSpotlight
+        })
+      )
+    ),
+    React.createElement(
+      Grid,
+      { item: true, xs: isNarrow ? 12 : 8 },
+      React.createElement(
+        'div',
+        { style: { display: 'flex', flexDirection: 'row' } },
+        React.createElement(
+          'div',
+          null,
+          React.createElement(
+            Button,
+            { onClick: collapseAll, color: 'primary' },
+            R.prop('colapseAll', labels)
+          ),
+          React.createElement(
+            Button,
+            { style: { marginLeft: 10 }, onClick: expandAll, color: 'primary' },
+            R.prop('expandAll', labels)
+          )
+        ),
+        React.createElement(
+          'div',
+          null,
+          React.createElement(
+            Button,
+            { onClick: selectAll, color: 'primary' },
+            R.prop('selectAll', labels)
+          ),
+          React.createElement(
+            Button,
+            { style: { marginLeft: 10 }, onClick: deselectAll, color: 'primary' },
+            R.prop('deselectAll', labels)
+          )
+        )
+      ),
+      React.createElement(Divider, { className: classes.divider }),
+      React.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 && React.createElement(
+      Grid,
+      { item: true, container: true, xs: 4 },
+      React.createElement(
+        'div',
+        { className: cx(classes.selectModeContainer, (_cx3 = {}, _cx3[classes.narrowHeader] = isNarrow, _cx3)) },
+        React.createElement(
+          'div',
+          { className: classes.hint },
+          React.createElement(
+            Tooltip,
+            {
+              role: 'tooltip',
+              variant: 'light',
+              title: React.createElement(
+                Typography,
+                { variant: 'body2' },
+                R.prop('hint', labels)
+              ),
+              'aria-label': R.prop('hint', labels),
+              tabIndex: 0
+            },
+            React.createElement(
+              IconButton,
+              null,
+              React.createElement(HintIcon, null)
+            )
+          ),
+          React.createElement(
+            Typography,
+            {
+              className: classes.selectionTitle,
+              'aria-label': R.prop('selectionMode', labels),
+              tabIndex: 0
+            },
+            R.prop('selectionMode', labels)
+          )
+        ),
+        React.createElement(
+          'div',
+          { className: cx(classes.selectModeContainer, (_cx4 = {}, _cx4[classes.narrowHeader] = isNarrow, _cx4)) },
+          mapIndexed(function (_ref) {
+            var value = _ref.value,
+                label = _ref.label,
+                img = _ref.img;
+            return React.createElement(
+              Tooltip,
+              {
+                key: value,
+                classes: { tooltip: classes.tooltip },
+                title: React.createElement('img', { style: { width: '72px', height: '90px' }, src: img, alt: value }),
+                tabIndex: -1
+              },
+              React.createElement(
+                Button,
+                {
+                  className: classes.selectButton,
+                  selected: value === selectionMode,
+                  onClick: function onClick() {
+                    setSelectionMode(value);
+                  },
+                  'aria-pressed': value === selectionMode,
+                  'aria-label': label,
+                  tabIndex: 0
+                },
+                React.createElement(
+                  Paper,
+                  { elevation: 0, className: classes.selectModeItem, key: value },
+                  React.createElement(
+                    Typography,
+                    null,
+                    label
+                  ),
+                  !R.isNil(img) && R.is(String, img) && React.createElement('img', { src: img, alt: value })
+                )
+              )
+            );
+          }, selectionOptions)
+        )
+      )
+    )
+  );
+};
+
+AdvancedSelection.propTypes = process.env.NODE_ENV !== "production" ? {
+  id: PropTypes.string,
+  accessibility: PropTypes.bool,
+  disableAccessor: PropTypes.func,
+  HTMLRenderer: PropTypes.func,
+  filter: PropTypes.object,
+  selection: PropTypes.object,
+  allSelection: PropTypes.object,
+  setAllSelection: PropTypes.func,
+  setSelection: PropTypes.func,
+  isRtl: PropTypes.bool,
+  isNarrow: PropTypes.bool,
+  items: PropTypes.array,
+  labels: PropTypes.shape({
+    placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    disableItemLabel: PropTypes.string,
+    singleSelection: PropTypes.string,
+    childrenSelection: PropTypes.string,
+    branchSelection: PropTypes.string,
+    levelSelection: PropTypes.string,
+    selectAll: PropTypes.string,
+    deselectAll: PropTypes.string,
+    apply: PropTypes.string,
+    cancel: PropTypes.string
+  }),
+  labelRenderer: PropTypes.func,
+  expandAll: PropTypes.func,
+  collapseAll: PropTypes.func,
+  spotlight: PropTypes.object,
+  setSpotlight: PropTypes.func,
+  expandedIds: PropTypes.object,
+  allItems: PropTypes.array
+} : {};
+
+export default withSpotlight(withExpansionTree(AdvancedSelection));