@sis-cc/dotstatsuite-visions 12.55.0 → 13.0.0

package/es/DynamicDrawer/AdvancedSelection.js

@@ -1,503 +0,0 @@
-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/Divider';
-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: {
-      padding: 24
-    },
-    narrowSelectionMenu: {
-      width: '100%'
-    },
-    selectModeContainer: {
-      display: 'flex',
-      flexDirection: 'column',
-      flexWrap: 'wrap',
-      alignItems: 'flex-start'
-    },
-    selectButtonNarrow: {
-      width: 160,
-      height: 50,
-      border: '1px solid ' + theme.palette.primary.light,
-      margin: 5
-    },
-    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: 30
-      }
-    },
-    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;
-
-  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) {
-    var selectedIds = R.propOr([], id, allSelection);
-    return _extends({}, item, {
-      isSelected: R.includes(item.id, selectedIds) ? !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(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,
-          labels: labels
-        })
-      )
-    ),
-    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 : 450,
-        scopeGetter: scopeGetter,
-        expandedIds: expandedIds
-      }))
-    ),
-    !isNarrow && React.createElement(
-      Grid,
-      { item: true, container: true, xs: 4 },
-      React.createElement(
-        'div',
-        { className: cx(classes.selectModeContainer) },
-        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, classes.selectionMenu) },
-          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));