@sis-cc/dotstatsuite-visions 7.18.6 → 7.19.0

package/es/AdvancedFilterDialog/AdvancedFilterDialog.js

@@ -0,0 +1,459 @@
+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 { getHierarchicalId } from '../VirtualizedTree/VirtualizedTree';
+import IconButton from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogActions from '@material-ui/core/DialogActions';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import PlaylistAddCheckIcon from '@material-ui/icons/PlaylistAddCheck';
+import CloseIcon from '@material-ui/icons/Close';
+import HintIcon from '@material-ui/icons/EmojiObjects';
+import Draggable from 'react-draggable';
+import { Button, Spotlight, VirtualizedTree } from '..';
+import { makeStyles } from '@material-ui/core/styles';
+
+var PaperComponent = function PaperComponent(props) {
+  return React.createElement(
+    Draggable,
+    { handle: '#draggable-dialog-title', cancel: '[class*="MuiDialogContent-root"]' },
+    React.createElement(Paper, _extends({ style: { minWidth: '75%', height: 700 } }, props))
+  );
+};
+
+var useStyles = makeStyles(function (theme) {
+  return {
+    header: {
+      color: 'black',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      width: '100%'
+    },
+    headerLabel: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    closeButton: {
+      color: 'grey !important',
+      padding: 0
+    },
+    selectMode: {
+      marginLeft: 10,
+      '& .MuiInputBase-root': {
+        height: 32
+      }
+    },
+    topElements: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    narrowTop: {
+      flexDirection: 'column',
+      alignItems: 'flex-start'
+    },
+    spotlight: { width: '45%' },
+    narrowSpotlight: { width: '100%' },
+    selectionButton: {
+      marginLeft: 24,
+      height: 32
+    },
+    narrowSelectionButton: {
+      height: 32,
+      marginTop: 5
+    },
+    selectionMenu: {
+      width: '50%',
+      position: 'absolute',
+      top: 105,
+      right: 24,
+      zIndex: 1
+    },
+    narrowSelectionMenu: {
+      width: '100%'
+    },
+    selectModeContainer: {
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    },
+    selectedItem: {
+      backgroundColor: theme.palette.secondary.main
+    },
+    selectModeItem: {
+      boxShadow: 'none',
+      display: 'flex',
+      width: 110,
+      height: 200,
+      flexDirection: 'column',
+      justifyContent: 'flex-end',
+      '& img': {
+        width: 110,
+        height: 140
+      }
+    },
+    hint: {
+      marginLeft: 10,
+      marginRight: 10,
+      display: 'flex',
+      flexDirection: 'row'
+    }
+  };
+});
+
+export var getScopeGetters = function getScopeGetters(items, groupedItems, disableAccessor) {
+  return {
+    all: function all() {
+      return R.reject(disableAccessor, items);
+    },
+    single: function single(item) {
+      return [item];
+    },
+    children: function children(item) {
+      var childItems = R.propOr([], getHierarchicalId(item), groupedItems);
+      return R.reject(disableAccessor, R.prepend(item, childItems));
+    },
+    branch: function branch(item) {
+      var reccurse = function reccurse(_item) {
+        var childItems = R.pipe(R.propOr([], getHierarchicalId(_item)), R.map(reccurse), R.unnest)(groupedItems);
+
+        return R.prepend(_item, childItems);
+      };
+      var items = reccurse(item);
+      return R.reject(disableAccessor, items);
+    },
+    level: function level(item) {
+      var parentId = R.propOr('#ROOT', 'parentId', item);
+      var items = R.prop(parentId, groupedItems);
+      return R.reject(disableAccessor, items);
+    }
+  };
+};
+
+var SelectionModeMenu = function SelectionModeMenu(_ref) {
+  var isOpen = _ref.isOpen,
+      onSelect = _ref.onSelect,
+      options = _ref.options,
+      selected = _ref.selected,
+      classes = _ref.classes,
+      isNarrow = _ref.isNarrow,
+      hint = _ref.hint;
+
+  if (!isOpen) {
+    return null;
+  }
+  return React.createElement(
+    'div',
+    { className: isNarrow ? classes.narrowSelectionMenu : classes.selectionMenu },
+    React.createElement(
+      Card,
+      null,
+      React.createElement(
+        CardContent,
+        { className: classes.selectModeContainer },
+        R.map(function (_ref2) {
+          var _cx;
+
+          var value = _ref2.value,
+              label = _ref2.label,
+              imgSrc = _ref2.imgSrc;
+          return React.createElement(
+            Button,
+            _extends({}, value === selected ? { variant: 'contained', color: 'secondary' } : {}, {
+              key: value,
+              onClick: function onClick() {
+                return onSelect(value);
+              }
+            }),
+            React.createElement(
+              Paper,
+              {
+                className: cx(classes.selectModeItem, (_cx = {}, _cx[classes.selectedItem] = value === selected, _cx)),
+                key: value
+              },
+              React.createElement(
+                Typography,
+                { variant: 'body2' },
+                label
+              ),
+              React.createElement('img', { src: imgSrc, alt: value })
+            )
+          );
+        }, options)
+      ),
+      React.createElement(
+        'div',
+        { className: classes.hint },
+        React.createElement(HintIcon, null),
+        React.createElement(
+          Typography,
+          { variant: 'body2' },
+          hint
+        )
+      )
+    )
+  );
+};
+SelectionModeMenu.propTypes = process.env.NODE_ENV !== "production" ? {
+  classes: PropTypes.object,
+  hint: PropTypes.string,
+  isNarrow: PropTypes.bool,
+  isOpen: PropTypes.bool,
+  onSelect: PropTypes.func,
+  options: PropTypes.array,
+  selected: PropTypes.string
+} : {};
+
+var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
+  var _cx2;
+
+  var id = props.id,
+      title = props.title,
+      items = props.items,
+      labelRenderer = props.labelRenderer,
+      onClose = props.onClose,
+      changeSelection = props.changeSelection,
+      isOpen = props.isOpen,
+      isNarrow = props.isNarrow,
+      labels = props.labels,
+      imgs = props.imgs,
+      disableAccessor = props.disableAccessor,
+      rest = _objectWithoutProperties(props, ['id', 'title', 'items', 'labelRenderer', 'onClose', 'changeSelection', 'isOpen', 'isNarrow', 'labels', 'imgs', 'disableAccessor']);
+
+  var _useState = useState(''),
+      term = _useState[0].term,
+      setSpotlight = _useState[1];
+
+  var _useState2 = useState('single'),
+      selectionMode = _useState2[0],
+      setSelectionMode = _useState2[1];
+
+  var _useState3 = useState(false),
+      isOpenSelectionMenu = _useState3[0],
+      setIsOpenSelectionMenu = _useState3[1];
+
+  var _useState4 = useState({}),
+      selection = _useState4[0],
+      setSelection = _useState4[1];
+
+  var classes = useStyles();
+
+  var groupedItemsByParentId = R.groupBy(R.propOr('#ROOT', 'parentId'), items);
+
+  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(getHierarchicalId(item), groupedItemsByParentId)) {
+      var filtered = recurse(R.prop(getHierarchicalId(item), groupedItemsByParentId));
+      if (!R.isEmpty(filtered)) {
+        return true;
+      }
+    }
+    return false;
+  });
+
+  var filteredItems = R.isEmpty(term) || R.isNil(term) ? items : recurse(items);
+  var selectionItems = R.map(function (item) {
+    return _extends({}, item, {
+      isSelected: R.has(item.id, selection) ? !item.isSelected : !!item.isSelected
+    });
+  }, filteredItems);
+  var groupedFilteredItems = R.groupBy(R.propOr('#ROOT', 'parentId'), selectionItems);
+
+  var selectionOptions = [{
+    value: 'single',
+    label: R.prop('singleSelection', labels),
+    imgSrc: R.prop('singleSelection', imgs)
+  }, {
+    value: 'children',
+    label: R.prop('childrenSelection', labels),
+    imgSrc: R.prop('childrenSelection', imgs)
+  }, {
+    value: 'branch',
+    label: R.prop('branchSelection', labels),
+    imgSrc: R.prop('branchSelection', imgs)
+  }, {
+    value: 'level',
+    label: R.prop('levelSelection', labels),
+    imgSrc: R.prop('levelSelection', imgs)
+  }, { value: 'all', label: R.prop('allSelection', labels), imgSrc: R.prop('allSelection', imgs) }];
+
+  var isDisabled = function isDisabled(item) {
+    return R.is(Function, disableAccessor) ? disableAccessor(item) : false;
+  };
+  var scopeGetters = getScopeGetters(selectionItems, groupedFilteredItems, isDisabled);
+
+  var onChangeSelection = function onChangeSelection(ids) {
+    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);
+  };
+
+  var handleSubmit = function handleSubmit() {
+    changeSelection(id, R.values(selection));
+    setSelection({});
+  };
+
+  return React.createElement(
+    Dialog,
+    {
+      open: isOpen,
+      PaperComponent: PaperComponent,
+      'aria-labelledby': 'draggable-dialog-title',
+      onClose: onClose
+    },
+    React.createElement(
+      DialogTitle,
+      { style: { cursor: 'move' }, id: 'draggable-dialog-title' },
+      React.createElement(
+        'div',
+        { className: classes.header },
+        React.createElement(
+          'div',
+          { className: classes.headerLabel },
+          React.createElement(PlaylistAddCheckIcon, { color: 'primary' }),
+          '\xA0',
+          title
+        ),
+        onClose && React.createElement(
+          IconButton,
+          { className: classes.closeButton, onClick: onClose },
+          React.createElement(CloseIcon, null)
+        )
+      )
+    ),
+    React.createElement(
+      DialogContent,
+      null,
+      React.createElement(
+        Grid,
+        { container: true },
+        React.createElement(
+          Grid,
+          { item: true, xs: 12, className: cx(classes.topElements, (_cx2 = {}, _cx2[classes.narrowTop] = isNarrow, _cx2)) },
+          React.createElement(
+            'div',
+            { className: isNarrow ? classes.narrowSpotlight : classes.spotlight },
+            React.createElement(Spotlight, {
+              placeholder: R.prop('placeholder', labels),
+              term: term,
+              hasCommit: false,
+              spotlight: { fields: {} },
+              action: setSpotlight
+            })
+          ),
+          React.createElement(
+            'div',
+            null,
+            React.createElement(
+              Button,
+              {
+                'aria-label': 'selection mode',
+                className: isNarrow ? classes.narrowSelectionButton : classes.selectionButton,
+                onClick: function onClick() {
+                  return setIsOpenSelectionMenu(!isOpenSelectionMenu);
+                },
+                color: 'primary',
+                variant: 'contained',
+                alternative: 'siscc'
+              },
+              R.prop('selectionMode', labels)
+            ),
+            '\xA0',
+            R.prop(selectionMode + 'Selection', labels)
+          )
+        ),
+        React.createElement(
+          Grid,
+          { item: true, xs: 12 },
+          React.createElement(SelectionModeMenu, {
+            classes: classes,
+            isOpen: isOpenSelectionMenu,
+            isNarrow: isNarrow,
+            options: selectionOptions,
+            onSelect: function onSelect(value) {
+              setSelectionMode(value);
+              setIsOpenSelectionMenu(false);
+            },
+            selected: selectionMode,
+            hint: R.prop('hint', labels)
+          }),
+          React.createElement(VirtualizedTree, _extends({}, rest, {
+            disableAccessor: disableAccessor,
+            labels: labels,
+            labelRenderer: labelRenderer,
+            items: selectionItems,
+            changeSelection: onChangeSelection,
+            withExpandControl: true,
+            maxTreeHeight: 500,
+            getItemScope: R.prop(selectionMode, scopeGetters)
+          }))
+        )
+      )
+    ),
+    React.createElement(
+      DialogActions,
+      null,
+      R.is(Function, onClose) && React.createElement(
+        Button,
+        { onClick: onClose, color: 'primary' },
+        R.prop('cancel', labels)
+      ),
+      R.is(Function, changeSelection) && React.createElement(
+        Button,
+        {
+          disabled: R.isEmpty(selection),
+          onClick: handleSubmit,
+          color: 'primary',
+          variant: 'contained',
+          alternative: 'siscc'
+        },
+        R.prop('apply', labels)
+      )
+    )
+  );
+};
+
+AdvancedFilterDialog.propTypes = process.env.NODE_ENV !== "production" ? {
+  id: PropTypes.string,
+  accessibility: PropTypes.bool,
+  changeSelection: PropTypes.func,
+  disableAccessor: PropTypes.func,
+  HTMLRenderer: PropTypes.func,
+  imgs: PropTypes.object,
+  isRtl: PropTypes.bool,
+  isNarrow: PropTypes.bool,
+  isOpen: PropTypes.bool,
+  items: PropTypes.array,
+  labels: PropTypes.shape({
+    placeholder: PropTypes.string,
+    disableItemLabel: PropTypes.string,
+    singleSelection: PropTypes.string,
+    childrenSelection: PropTypes.string,
+    branchSelection: PropTypes.string,
+    levelSelection: PropTypes.string,
+    allSelection: PropTypes.string,
+    apply: PropTypes.string,
+    cancel: PropTypes.string
+  }),
+  onClose: PropTypes.func,
+  labelRenderer: PropTypes.func,
+  title: PropTypes.string
+} : {};
+
+export default AdvancedFilterDialog;

package/es/AdvancedFilterDialog/index.js

@@ -0,0 +1,26 @@
+/**
+ *
+ * @memberOf VISIONS
+ * @name AdvancedFilterDialog
+ * @tag component
+ * @api public
+ * @props
+ * AdvancedFilterDialog.propTypes = {
+ *   items: {
+ *     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,
+ *     })),
+ *   },
+ * }
+ */
+
+export { default } from './AdvancedFilterDialog';

package/es/HierarchicalFilter/HierarchicalFilter.js

@@ -0,0 +1,142 @@
+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, { useState, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import * as R from 'ramda';
+import Container from '@material-ui/core/Container';
+import PlaylistAddCheckIcon from '@material-ui/icons/PlaylistAddCheck';
+import { ExpansionPanel, Tag as InternalTag, VerticalButton, Spotlight, VirtualizedTree } from '../';
+import { useStyles } from '../ScopeList/styles';
+import { useTheme } from '@material-ui/core';
+import { getIsRtl } from '../utils';
+
+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 = useState({ term: '' }),
+      term = _useState[0].term,
+      setSpotlight = _useState[1];
+
+  var classes = useStyles({ accessibility: accessibility });
+  var theme = useTheme();
+  var isRtl = getIsRtl(theme);
+  var Chip = R.isNil(Tag) ? InternalTag : 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 React.createElement(
+    ExpansionPanel,
+    _extends({
+      isOpen: R.equals(id, activePanelId),
+      id: id,
+      testId: '' + testId,
+      label: labelRenderer({ id: id, label: label }),
+      onChangeActivePanel: onChangeActivePanel,
+      overflow: true,
+      topElementComponent: React.createElement(
+        Fragment,
+        null,
+        React.createElement(
+          Container,
+          { disableGutters: true, className: classes.spotlightContainer },
+          hasSpotligt && React.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) && React.createElement(
+            VerticalButton,
+            {
+              'aria-label': R.prop('advancedSelection')(labels),
+              classes: { root: classes.bulkSelectionIcon },
+              onClick: toggleBulk
+            },
+            React.createElement(PlaylistAddCheckIcon, { color: 'primary' })
+          )
+        )
+      ),
+      tag: React.createElement(
+        Chip,
+        { items: items },
+        tagValue
+      ),
+      isBlank: R.isEmpty(items)
+    }, expansionPanelProps),
+    React.createElement(VirtualizedTree, _extends({}, props, { items: filteredItems, changeSelection: onSelect, isRtl: isRtl }))
+  );
+};
+
+HierarchicalFilter.propTypes = process.env.NODE_ENV !== "production" ? {
+  id: PropTypes.string,
+  accessibility: PropTypes.bool,
+  activePanelId: PropTypes.string,
+  changeSelection: PropTypes.func,
+  onChangeActivePanel: PropTypes.func,
+  disableAccessor: PropTypes.func,
+  displayAccessor: PropTypes.func,
+  HTMLRenderer: PropTypes.func,
+  isRtl: PropTypes.bool,
+  items: PropTypes.array,
+  label: PropTypes.string,
+  labels: PropTypes.shape({
+    disableItemLabel: PropTypes.string,
+    placeholder: PropTypes.string
+  }),
+  labelRenderer: PropTypes.func,
+  Tag: PropTypes.func,
+  testId: PropTypes.string,
+  expansionPanelProps: PropTypes.object,
+  toggleBulk: PropTypes.func,
+  tagAccessor: PropTypes.func
+} : {};
+
+export default HierarchicalFilter;

package/es/HierarchicalFilter/index.js

@@ -0,0 +1,26 @@
+/**
+ *
+ * @memberOf VISIONS
+ * @name HierarchicalFilter
+ * @tag component
+ * @api public
+ * @props
+ * HierarchicalFilter.propTypes = {
+ *   items: {
+ *     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,
+ *     })),
+ *   },
+ * }
+ */
+
+export { default } from './HierarchicalFilter';

package/es/ScopeList/Item.js

@@ -56,7 +56,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 = React.useState(false),
       isTooltipShown = _React$useState[0],
@@ -90,6 +92,7 @@ var Item = function Item(_ref) {
       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)),
+      style: { marginLeft: depth * 20 + 'px' },
       title: isDisabled ? R.propOr('', 'disableItemLabel')(labels) + ' ' + label : label,
       primary: React.createElement(
         'div',
@@ -234,7 +237,8 @@ Item.propTypes = process.env.NODE_ENV !== "production" ? {
   labelRenderer: PropTypes.func,
   HTMLRenderer: PropTypes.func,
   hierarchicalId: PropTypes.string,
-  labels: PropTypes.object
+  labels: PropTypes.object,
+  depth: PropTypes.number
 } : {};
 
 export default Item;