@sis-cc/dotstatsuite-visions 12.18.0 → 12.20.0

package/es/DynamicDrawer/DynamicDrawer.js

@@ -0,0 +1,370 @@
+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 Box from '@mui/material/Box';
+import AdvancedSelection from './AdvancedSelection';
+import { Paper, Tab, Tabs, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import CloseIcon from '@mui/icons-material/Close';
+import IconButton from '@mui/material/Button';
+import BackIcon from '@mui/icons-material/ArrowBack';
+import { Button, Tag as InternalTag } from '..';
+
+var useStyles = makeStyles(function (theme) {
+  return {
+    label: _extends({
+      textTransform: 'none',
+      color: theme.palette.grey[700]
+    }, R.pathOr({}, ['mixins', 'expansionPanel', 'title'], theme)),
+    labelSelected: {
+      color: theme.palette.primary.main
+    },
+    tabSelected: {
+      backgroundColor: theme.palette.action.hover + ' !important',
+      '&:hover': {
+        backgroundColor: theme.palette.action.selected + ' !important'
+      }
+    },
+    tab: {
+      '&:hover': {
+        backgroundColor: '' + theme.palette.action.selected
+      }
+    },
+    tabPanel: {
+      backgroundColor: theme.palette.background.default,
+      position: 'absolute',
+      top: '176px',
+      zIndex: 1000,
+      width: '80vw',
+      height: '100vh',
+      left: '200px'
+    }
+  };
+});
+
+var TabPanel = function TabPanel(props) {
+  var children = props.children,
+      open = props.open,
+      item = props.item,
+      classes = props.classes,
+      labels = props.labels,
+      onClose = props.onClose,
+      isNarrow = props.isNarrow,
+      setOpen = props.setOpen,
+      other = _objectWithoutProperties(props, ['children', 'open', 'item', 'classes', 'labels', 'onClose', 'isNarrow', 'setOpen']);
+
+  return React.createElement(
+    'div',
+    _extends({
+      role: 'tabpanel',
+      hidden: !open,
+      id: 'vertical-tabpanel-' + item.index,
+      'aria-labelledby': 'vertical-tab-' + item.index,
+      className: isNarrow ? classes.tabPanelNarrow : classes.tabPanel
+    }, other),
+    open && React.createElement(
+      Box,
+      { sx: { p: 3 } },
+      isNarrow && React.createElement(
+        IconButton,
+        {
+          onClick: function onClick() {
+            return setOpen(false);
+          },
+          'data-testid': 'back_button',
+          'aria-label': R.prop('cancel', labels),
+          sx: {
+            padding: 0,
+            float: 'left'
+          },
+          size: 'large'
+        },
+        React.createElement(BackIcon, null)
+      ),
+      React.createElement(
+        IconButton,
+        {
+          onClick: onClose,
+          'aria-label': R.prop('cancel', labels),
+          sx: {
+            color: 'grey !important',
+            padding: 0,
+            float: 'right'
+          },
+          size: 'large'
+        },
+        React.createElement(CloseIcon, null)
+      ),
+      children
+    )
+  );
+};
+TabPanel.propTypes = process.env.NODE_ENV !== "production" ? {
+  item: PropTypes.object,
+  open: PropTypes.bool,
+  classes: PropTypes.object,
+  labels: PropTypes.object,
+  onClose: PropTypes.func,
+  children: PropTypes.node,
+  isNarrow: PropTypes.bool,
+  setOpen: PropTypes.func
+} : {};
+
+var PaperComponent = function PaperComponent(props) {
+  var _cx;
+
+  var classes = useStyles();
+  return React.createElement(
+    Paper,
+    props,
+    React.createElement(
+      Box,
+      { sx: { display: 'flex', justifyContent: 'space-between', width: '100%' } },
+      React.createElement(
+        Typography,
+        {
+          noWrap: true,
+          variant: 'body2',
+          title: props.label,
+          className: cx(classes.label, (_cx = {}, _cx[classes.labelSelected] = props.selected, _cx))
+        },
+        props.label
+      ),
+      props.tag
+    )
+  );
+};
+PaperComponent.propTypes = process.env.NODE_ENV !== "production" ? {
+  label: PropTypes.string,
+  tag: PropTypes.elementType,
+  selected: PropTypes.bool
+} : {};
+
+var DynamicDrawer = function DynamicDrawer(props) {
+  var classNames = useStyles();
+
+  var _useState = useState(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  var _useState2 = useState({}),
+      filter = _useState2[0],
+      setFilter = _useState2[1];
+
+  var _useState3 = useState({}),
+      selection = _useState3[0],
+      setSelection = _useState3[1];
+
+  var _useState4 = useState({}),
+      allSelection = _useState4[0],
+      setAllSelection = _useState4[1];
+
+  var getCounter = function getCounter(items, tagAccessor) {
+    var selectedItemsIds = R.reduce(function (acc, item) {
+      if (R.prop('isSelected', item)) {
+        return R.append(item.id, acc);
+      }
+      return acc;
+    }, [], items);
+    var itemsIds = R.pluck('id', items);
+    var count = R.pipe(R.uniq, R.length)(selectedItemsIds);
+    var total = R.pipe(R.uniq, R.length)(itemsIds);
+    if (R.is(Function, tagAccessor)) {
+      return tagAccessor(count, total);
+    }
+    return count + '/' + total;
+  };
+
+  var list = props.list,
+      labelRenderer = props.labelRenderer,
+      onClick = props.onClick,
+      handleChangePanel = props.handleChangePanel,
+      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,
+      expandedIds = props.expandedIds,
+      allItems = props.allItems,
+      periodPanel = props.periodPanel,
+      classes = props.classes,
+      _props$testId = props.testId,
+      testId = _props$testId === undefined ? 'tabs' : _props$testId,
+      tagAccessor = props.tagAccessor,
+      tagAriaLabel = props.tagAriaLabel,
+      children = props.children,
+      rest = _objectWithoutProperties(props, ['list', 'labelRenderer', 'onClick', 'handleChangePanel', 'isNarrow', 'labels', 'disableAccessor', 'expandAll', 'collapseAll', 'expandedIds', 'allItems', 'periodPanel', 'classes', 'testId', 'tagAccessor', 'tagAriaLabel', 'children']);
+
+  var handleChange = function handleChange(e, item) {
+    console.log({ item: item, selection: selection, allSelection: allSelection });
+    setSelection(_extends({}, allSelection[item.id]));
+    handleChangePanel(item.id, allSelection);
+    setFilter(item);
+    setOpen(true);
+  };
+  var handleSubmit = function handleSubmit() {
+    onClick(allSelection);
+    setAllSelection({});
+    setSelection({});
+    setOpen(false);
+  };
+  var handleClose = function handleClose() {
+    setOpen(false);
+    setAllSelection({});
+    setSelection({});
+  };
+  var isHidden = open && isNarrow;
+  var isNotHiddenButton = !R.isEmpty(allSelection) && isNarrow;
+
+  return React.createElement(
+    'div',
+    { style: { display: 'flex', flexDirection: 'row' } },
+    React.createElement(
+      Tabs,
+      {
+        orientation: 'vertical',
+        variant: 'scrollable',
+        value: false,
+        onChange: handleChange,
+        'aria-label': 'filters',
+        'data-testid': testId,
+        sx: {
+          display: isHidden ? 'none' : 'flex',
+          width: '100%',
+          height: '100%',
+          borderRight: 1,
+          borderColor: 'divider'
+        }
+      },
+      R.map(function (item) {
+        var _cx2;
+
+        var Chip = R.isNil(item.tag) ? InternalTag : item.tag;
+        var tagValueLabel = R.isNil(item.tag) && getCounter(item.values, tagAriaLabel);
+
+        return React.createElement(Tab, {
+          key: item.id,
+          id: filter.id,
+          'data-testid': item.id + '-tab',
+          component: function component(props) {
+            return PaperComponent(_extends({
+              label: labelRenderer(item),
+              selected: filter.id === item.id,
+              tag: R.isNil(item.tag) ? React.createElement(
+                Chip,
+                { items: item.values, tagValueLabel: tagValueLabel },
+                getCounter(item.values, tagAccessor)
+              ) : item.tag
+            }, props));
+          },
+          label: labelRenderer(item),
+          'aria-label': labelRenderer(item),
+          value: item,
+          'aria-selected': filter.id === item.id,
+          className: cx(classNames.tab, (_cx2 = {}, _cx2[classNames.tabSelected] = filter.id === item.id, _cx2)),
+          sx: {
+            alignItems: 'start',
+            maxWidth: '100%'
+          },
+          wrapped: true
+        });
+      })(list),
+      open && !isNarrow && React.createElement(
+        Button,
+        {
+          sx: { float: 'bottom', margin: '10px' },
+          'aria-label': R.prop('apply', labels),
+          id: 'apply_button',
+          variant: 'contained',
+          onClick: handleSubmit
+        },
+        R.prop('apply', labels)
+      ),
+      isNotHiddenButton && React.createElement(
+        Button,
+        {
+          sx: { float: 'bottom', margin: '10px' },
+          'aria-label': R.prop('apply', labels),
+          id: 'apply_button',
+          variant: 'contained',
+          onClick: handleSubmit
+        },
+        R.prop('apply', labels)
+      )
+    ),
+    React.createElement(
+      TabPanel,
+      {
+        item: filter,
+        'data-testid': testId + '_panel',
+        open: open,
+        labels: labels,
+        classes: classes,
+        onClose: handleClose,
+        isNarrow: isNarrow,
+        setOpen: setOpen
+      },
+      R.equals(filter.id, periodPanel) ? children : React.createElement(AdvancedSelection, _extends({
+        id: filter.id,
+        items: filter.values,
+        isOpen: open,
+        labelRenderer: labelRenderer,
+        disableAccessor: disableAccessor ? R.pipe(R.prop('isEnabled'), R.not) : undefined,
+        labels: labels,
+        isNarrow: isNarrow,
+        expandAll: expandAll,
+        collapseAll: collapseAll,
+        expandedIds: expandedIds,
+        allItems: allItems,
+        selection: selection,
+        setSelection: setSelection,
+        setAllSelection: setAllSelection,
+        allSelection: allSelection
+      }, rest, {
+        filter: filter
+      }))
+    )
+  );
+};
+DynamicDrawer.propTypes = process.env.NODE_ENV !== "production" ? {
+  classes: PropTypes.object,
+  testId: PropTypes.string,
+  list: PropTypes.array,
+  labelAccessor: PropTypes.func,
+  tagAccessor: PropTypes.func,
+  tagValueLabel: PropTypes.func,
+  tag: PropTypes.elementType,
+  tagAriaLabel: PropTypes.func,
+  handleChangePanel: PropTypes.func,
+  displayChildren: PropTypes.func,
+  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,
+  expandedIds: PropTypes.object,
+  allItems: PropTypes.array,
+  onClick: PropTypes.func,
+  periodPanel: PropTypes.string,
+  isNarrow: PropTypes.bool,
+  disableAccessor: PropTypes.func,
+  children: PropTypes.node
+} : {};
+
+export default DynamicDrawer;

package/es/DynamicDrawer/SelectionModesMobile.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as R from 'ramda';
+import { Box, Button, Paper, Typography } from '@mui/material';
+import { Tooltip } from '..';
+
+var mapIndexed = R.addIndex(R.map);
+var ButtonCarousel = function ButtonCarousel(_ref) {
+  var selectionModes = _ref.selectionModes,
+      selectionMode = _ref.selectionMode,
+      setSelectionMode = _ref.setSelectionMode,
+      classes = _ref.classes;
+
+  return React.createElement(
+    Box,
+    {
+      sx: {
+        overflowX: 'auto',
+        overflowY: 'hidden',
+        whiteSpace: 'nowrap',
+        display: 'block', // allow horizontal scrolling
+        width: '100%',
+        maxWidth: '100%',
+        '&::-webkit-scrollbar': { display: 'none' }, // optional: hide scrollbar
+        scrollbarWidth: 'none'
+      }
+    },
+    mapIndexed(function (_ref2) {
+      var value = _ref2.value,
+          label = _ref2.label,
+          img = _ref2.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,
+            sx: {
+              flex: '0 0 auto', // Prevents buttons from shrinking
+              scrollSnapAlign: 'center',
+              minWidth: 120, // Minimum width for buttons
+              whiteSpace: 'nowrap'
+            }
+          },
+          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 })
+          )
+        )
+      );
+    }, selectionModes)
+  );
+};
+
+export default ButtonCarousel;
+
+ButtonCarousel.propTypes = process.env.NODE_ENV !== "production" ? {
+  selectionModes: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    img: PropTypes.string
+  })).isRequired,
+  selectionMode: PropTypes.string.isRequired,
+  setSelectionMode: PropTypes.func.isRequired,
+  classes: PropTypes.object.isRequired
+} : {};

package/es/DynamicDrawer/index.js

@@ -0,0 +1,44 @@
+/**
+ * @memberOf VISIONS
+ * @name DynamicDrawer
+ * @tag component
+ * @api public
+ * @props
+ * DynamicDrawer.propTypes = {
+ *  classes: PropTypes.object,
+ *  testId: PropTypes.string,
+ *  list: PropTypes.array,
+ *  labelAccessor: PropTypes.func,
+ *  tagAccessor: PropTypes.func,
+ *  tagValueLabel: PropTypes.func,
+ *  tag: PropTypes.elementType,
+ *  tagAriaLabel: PropTypes.func,
+ *  handleChangePanel: PropTypes.func,
+ *  displayChildren: PropTypes.func,
+ *  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,
+ *  expandedIds: PropTypes.object,
+ *  allItems: PropTypes.array,
+ *  onClick: PropTypes.func,
+ * periodPanel: PropTypes.string,
+ * isNarrow: PropTypes.bool,
+ *  disableAccessor: PropTypes.func,
+ *   children: PropTypes.node,
+ *   },
+ * }
+ */
+
+export { default } from './DynamicDrawer';