@sis-cc/dotstatsuite-visions 7.19.0 → 7.20.0

package/es/Chips/CustomChip.js

@@ -0,0 +1,109 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import * as R from 'ramda';
+import cx from 'classnames';
+import { useTheme } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import Chip from '@material-ui/core/Chip';
+import Cross from '../Icons/Cross';
+import { getIsRtl } from '../utils';
+import Tooltip from '../Tooltip';
+import { useStyles } from './styles';
+import { myTooltipRenderer } from './utils';
+
+var shownTooltip = R.pipe(R.dropLast(1), R.either(R.isEmpty, R.isNil), R.not);
+var showMultiLinedTooltip = R.pipe(R.head, R.propOr([], 'parents'), R.isEmpty, R.not);
+
+var CustomChip = function CustomChip(_ref) {
+  var _cx;
+
+  var id = _ref.id,
+      parentId = _ref.parentId,
+      _ref$items = _ref.items,
+      items = _ref$items === undefined ? [] : _ref$items,
+      label = _ref.label,
+      onDelete = _ref.onDelete,
+      renderer = _ref.renderer,
+      chipClasses = _ref.chipClasses,
+      iconClasses = _ref.iconClasses,
+      labelClasses = _ref.labelClasses,
+      _ref$ariaLabel = _ref.ariaLabel,
+      ariaLabel = _ref$ariaLabel === undefined ? 'delete' : _ref$ariaLabel,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === undefined ? 'deleteChip-test-id' : _ref$testId;
+
+  var theme = useTheme();
+  var isRtl = getIsRtl(theme);
+  var labelRenderer = R.prop('label');
+  var classes = useStyles();
+  var mapIndexed = R.addIndex(R.map);
+  var onChange = R.is(Function)(onDelete) ? function () {
+    return onDelete(parentId, R.isNil(id) ? [] : [id]);
+  } : null;
+  var hasTooltip = shownTooltip(items);
+  var hasMultiLinedTooltip = showMultiLinedTooltip(items);
+  var multiLinedTooltipRenderer = function multiLinedTooltipRenderer(arr) {
+    return mapIndexed(function (item, index) {
+      return React.createElement(
+        'div',
+        { key: index },
+        myTooltipRenderer({ isRtl: isRtl, labelRenderer: labelRenderer })(item),
+        React.createElement('br', null)
+      );
+    })(R.prop('parents')(R.head(arr)));
+  };
+
+  return React.createElement(
+    Tooltip,
+    {
+      placement: 'top',
+      title: hasTooltip ? renderer(items) : hasMultiLinedTooltip ? multiLinedTooltipRenderer(items) : ''
+    },
+    React.createElement(Chip, {
+      'data-testid': testId,
+      size: 'small',
+      'aria-label': label,
+      label: hasTooltip || hasMultiLinedTooltip ? React.createElement(
+        Fragment,
+        null,
+        '...',
+        React.createElement(
+          'span',
+          { className: classes.childrenIndicator },
+          '>'
+        ),
+        label
+      ) : label,
+      deleteIcon: React.createElement(
+        IconButton,
+        {
+          disableRipple: true,
+          className: iconClasses,
+          'aria-label': ariaLabel + ' ' + label,
+          component: 'span',
+          tabIndex: -1
+        },
+        React.createElement(Cross, null)
+      ),
+      clickable: true,
+      onDelete: onChange,
+      className: cx(chipClasses, (_cx = {}, _cx[classes.tooltipIndicator] = hasTooltip || hasMultiLinedTooltip, _cx)),
+      classes: { label: labelClasses }
+    })
+  );
+};
+
+CustomChip.propTypes = process.env.NODE_ENV !== "production" ? {
+  testId: PropTypes.string,
+  id: PropTypes.string,
+  parentId: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  onDelete: PropTypes.func,
+  renderer: PropTypes.func,
+  chipClasses: PropTypes.string,
+  iconClasses: PropTypes.string,
+  labelClasses: PropTypes.string,
+  ariaLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  items: PropTypes.array
+} : {};
+export default CustomChip;

package/es/Chips/DeleteChip.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { useStyles } from './styles';
+import CustomChip from './CustomChip';
+
+var DeleteChip = function DeleteChip(_ref) {
+  var onDeleteAll = _ref.onDeleteAll,
+      clearAllLabel = _ref.clearAllLabel,
+      ariaLabel = _ref.ariaLabel;
+
+  var classes = useStyles();
+  return React.createElement(CustomChip, {
+    label: clearAllLabel,
+    ariaLabel: ariaLabel,
+    chipClasses: cx(classes.mainChip, classes.chip),
+    onDelete: onDeleteAll,
+    iconClasses: classes.icon,
+    labelClasses: cx(classes.spaceLabel, classes.formatLabel)
+  });
+};
+DeleteChip.propTypes = process.env.NODE_ENV !== "production" ? {
+  onDeleteAll: PropTypes.func,
+  ariaLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  clearAllLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
+} : {};
+export default DeleteChip;

package/es/Chips/GroupedChips.js

@@ -0,0 +1,95 @@
+import { useTheme } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import React, { Fragment } from 'react';
+import * as R from 'ramda';
+import cx from 'classnames';
+import { getIsRtl } from '../utils';
+import { useStyles } from './styles';
+import CustomChip from './CustomChip';
+import { myTooltipRenderer } from './utils';
+
+var GroupedChips = function GroupedChips(_ref) {
+  var _ref$itemProps = _ref.itemProps,
+      itemProps = _ref$itemProps === undefined ? {} : _ref$itemProps,
+      onDelete = _ref.onDelete,
+      _ref$labelRenderer = _ref.labelRenderer,
+      labelRenderer = _ref$labelRenderer === undefined ? R.prop('label') : _ref$labelRenderer,
+      tooltipRenderer = _ref.tooltipRenderer,
+      ariaLabel = _ref.ariaLabel,
+      _ref$reducingNbChips = _ref.reducingNbChips,
+      reducingNbChips = _ref$reducingNbChips === undefined ? 15 : _ref$reducingNbChips,
+      labels = _ref.labels,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === undefined ? 'chips-test-id' : _ref$testId;
+  var parentId = itemProps.id,
+      isNotRemovable = itemProps.isNotRemovable,
+      _itemProps$values = itemProps.values,
+      values = _itemProps$values === undefined ? [] : _itemProps$values;
+
+  var theme = useTheme();
+  var isRtl = getIsRtl(theme);
+  var classes = useStyles();
+  return React.createElement(
+    Fragment,
+    null,
+    React.createElement(CustomChip, {
+      testId: testId,
+      parentId: parentId,
+      label: labelRenderer(itemProps) + ':',
+      ariaLabel: ariaLabel,
+      chipClasses: cx(classes.mainChip, classes.chip),
+      onDelete: isNotRemovable ? null : onDelete,
+      iconClasses: classes.icon,
+      labelClasses: cx(classes.spaceLabel, classes.formatLabel)
+    }),
+    R.pipe(R.length, R.flip(R.gt)(reducingNbChips))(values) ? React.createElement(CustomChip, {
+      parentId: parentId,
+      label: R.length(values) + ' ' + R.prop('reducingChip')(labels),
+      chipClasses: cx(classes.secondaryChip, classes.chip),
+      onDelete: isNotRemovable ? null : onDelete,
+      iconClasses: classes.icon,
+      labelClasses: cx(classes.formatLabel)
+    }) : R.map(function (items) {
+      var lastItem = R.last(items);
+      var id = lastItem.id,
+          isNotRemovable = lastItem.isNotRemovable;
+
+
+      return React.createElement(CustomChip, {
+        key: id,
+        id: id,
+        items: R.pipe(R.length, R.gte(2)) ? items : null,
+        renderer: R.is(Function)(tooltipRenderer) ? tooltipRenderer : myTooltipRenderer({ isRtl: isRtl, labelRenderer: labelRenderer }),
+        label: labelRenderer(lastItem),
+        ariaLabel: ariaLabel,
+        parentId: parentId,
+        onDelete: isNotRemovable ? null : onDelete,
+        chipClasses: cx(classes.secondaryChip, classes.chip),
+        iconClasses: classes.icon,
+        labelClasses: cx(classes.formatLabel)
+      });
+    })(values)
+  );
+};
+GroupedChips.propTypes = process.env.NODE_ENV !== "production" ? {
+  testId: PropTypes.string,
+  itemProps: PropTypes.shape({
+    id: PropTypes.string,
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    isNotRemovable: PropTypes.bool,
+    values: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.string,
+      label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+      isNotRemovable: PropTypes.bool
+    })))
+  }),
+  onDelete: PropTypes.func,
+  labelRenderer: PropTypes.func,
+  tooltipRenderer: PropTypes.func,
+  ariaLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  reducingNbChips: PropTypes.number,
+  labels: PropTypes.shape({
+    reducingChip: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
+  })
+} : {};
+export default GroupedChips;

package/es/Chips/index.js

@@ -1,5 +1,6 @@
 /**
- * Chips, is like a small board of whatever you want to show. You can delete sub item, item with sub item or all items
+ * GroupedChips, is like a small board of whatever you want to show. You can delete sub item, item with sub item or all items
+ * DeleteAllChip, is a chip that deletes all items displayed in the board
  * reducingNbChips: default 15, allow a possibility to reduce many chips to one. You will see the numbers of items inside the chip
  *
  * @memberOf VISIONS
@@ -7,31 +8,37 @@
  * @tag component
  * @api public
  * @demoReady
- * Chips.propTypes = {
- *   items: PropTypes.arrayOf(
- *     PropTypes.shape({
- *       id: PropTypes.string,
- *       label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *       isNotRemovable: PropTypes.bool,
- *       values: PropTypes.arrayOf(
- *         PropTypes.shape({
- *           id: PropTypes.string,
- *           label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *           isNotRemovable: PropTypes.bool,
- *         }),
- *       ),
- *     }),
- *   ),
- *   onDelete: PropTypes.func,
- *   onDeleteAll: PropTypes.func,
- *   clearAllLabel: PropTypes.func,
- *   labelRenderer: PropTypes.func,
- *   reducingNbChips: PropTypes.number,
- *   labels: PropTypes.shape({
- *     reducingChip: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *   }),
- *   isVis: PropTypes.bool,
+ * GroupedChips.propTypes = {
+ *  testId: PropTypes.string,
+ *  itemProps: PropTypes.shape({
+ *    id: PropTypes.string,
+ *    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *    isNotRemovable: PropTypes.bool,
+ *    values: PropTypes.arrayOf(
+ *      PropTypes.arrayOf(
+ *        PropTypes.shape({
+ *          id: PropTypes.string,
+ *          label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *          isNotRemovable: PropTypes.bool,
+ *        }),
+ *      ),
+ *    ),
+ *  }),
+ *  onDelete: PropTypes.func,
+ *  labelRenderer: PropTypes.func,
+ *  tooltipRenderer: PropTypes.func,
+ *  ariaLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *  reducingNbChips: PropTypes.number,
+ *  labels: PropTypes.shape({
+ *    reducingChip: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *  }),
  * };
+ * 
+ * DeleteAllChip.propTypes = {
+ * onDeleteAll: PropTypes.func,
+ * ariaLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ * clearAllLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+};
  * @theme
  * {
  *   palette: {
@@ -58,4 +65,5 @@
  * // *tooltip indicator is the dotted line under a chip
  */
 
-export { default } from './Chips';
+export { default } from './GroupedChips';
+export { default as DeleteAllChip } from './DeleteChip';

package/es/Chips/styles.js

@@ -0,0 +1,64 @@
+import { makeStyles } from '@material-ui/core/styles';
+import * as R from 'ramda';
+
+export var useStyles = makeStyles(function (theme) {
+  return {
+    root: {
+      display: 'flex',
+      flexWrap: 'wrap'
+    },
+    chip: {
+      height: 'unset',
+      borderRadius: 3,
+      minHeight: 25,
+      fontSize: 12,
+      margin: theme.spacing(0.25)
+    },
+    mainChip: {
+      background: 'none',
+      color: theme.palette.text.primary
+    },
+    secondaryChip: {
+      backgroundColor: R.path(['palette', 'tertiary', 'light'])(theme) || theme.palette.grey[100],
+      '&:hover, &:focus': {
+        backgroundColor: R.path(['palette', 'tertiary', 'dark'])(theme) || theme.palette.grey[300]
+      },
+      color: theme.palette.primary.main
+    },
+    icon: {
+      color: theme.palette.primary.main,
+      cursor: 'pointer',
+      margin: 0,
+      '&:hover': {
+        color: 'inherit'
+      },
+      '& svg': {
+        fontSize: 15
+      }
+    },
+    divider: {
+      margin: theme.spacing(0.5),
+      backgroundColor: theme.palette.grey[700]
+    },
+    dividerHz: {
+      width: '100%',
+      margin: theme.spacing(0.5),
+      backgroundColor: theme.palette.grey[700]
+    },
+    spaceLabel: {
+      paddingLeft: 0
+    },
+    formatLabel: {
+      whiteSpace: 'pre-wrap',
+      overflowWrap: 'anywhere'
+    },
+    tooltip: theme.typography.body2,
+    childrenIndicator: {
+      margin: '0 2px',
+      fontSize: 10
+    },
+    tooltipIndicator: {
+      borderBottom: '1px dotted ' + theme.palette.primary.main
+    }
+  };
+});

package/es/Chips/utils.js

@@ -0,0 +1,11 @@
+import * as R from 'ramda';
+
+export var myTooltipRenderer = function myTooltipRenderer(_ref) {
+  var isRtl = _ref.isRtl,
+      labelRenderer = _ref.labelRenderer;
+  return R.pipe(R.map(labelRenderer), R.when(R.always(isRtl), R.reverse), R.join(isRtl ? ' < ' : ' > '));
+};
+
+export var isLast = function isLast(index, list) {
+  return index + 1 === R.length(list);
+};

package/es/ExpansionPanel/styles.js

@@ -9,6 +9,7 @@ export var useStyles = makeStyles(function (theme) {
       minHeight: '40px !important',
       maxHeight: 40,
       display: 'flex',
+      flexDirection: 'row-reverse',
       alignItems: 'flex-start',
       padding: theme.spacing(0)
     },
@@ -49,10 +50,9 @@ export var useStyles = makeStyles(function (theme) {
       }
     },
     iconSummaryPanel: {
-      right: -1,
       color: theme.palette.primary.main,
       padding: theme.spacing(0.5, 0.5),
-      margin: theme.spacing(0, -1, 0, 0)
+      margin: theme.spacing(0, 1, 0, 0)
     },
     fullWidth: {
       width: '100%'

package/es/index.js

@@ -8,7 +8,7 @@ export { default as ApiQueries } from './ApiQueries';
 export { default as Breadcrumbs } from './Breadcrumbs';
 export { default as Button } from './Button';
 export { default as ChartsConfig } from './ChartsConfig';
-export { default as Chips } from './Chips';
+export { DeleteAllChip, default as GroupedChips } from './Chips';
 export { default as CollapseButtons } from './CollapseButtons';
 export { default as CollapsibleTree } from './CollapsibleTree';
 export { default as Contact } from './Contact';

package/lib/Chips/CustomChip.js

@@ -0,0 +1,145 @@
+'use strict';
+
+exports.__esModule = true;
+
+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 _styles = require('@material-ui/core/styles');
+
+var _IconButton = require('@material-ui/core/IconButton');
+
+var _IconButton2 = _interopRequireDefault(_IconButton);
+
+var _Chip = require('@material-ui/core/Chip');
+
+var _Chip2 = _interopRequireDefault(_Chip);
+
+var _Cross = require('../Icons/Cross');
+
+var _Cross2 = _interopRequireDefault(_Cross);
+
+var _utils = require('../utils');
+
+var _Tooltip = require('../Tooltip');
+
+var _Tooltip2 = _interopRequireDefault(_Tooltip);
+
+var _styles2 = require('./styles');
+
+var _utils2 = require('./utils');
+
+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 }; }
+
+var shownTooltip = R.pipe(R.dropLast(1), R.either(R.isEmpty, R.isNil), R.not);
+var showMultiLinedTooltip = R.pipe(R.head, R.propOr([], 'parents'), R.isEmpty, R.not);
+
+var CustomChip = function CustomChip(_ref) {
+  var _cx;
+
+  var id = _ref.id,
+      parentId = _ref.parentId,
+      _ref$items = _ref.items,
+      items = _ref$items === undefined ? [] : _ref$items,
+      label = _ref.label,
+      onDelete = _ref.onDelete,
+      renderer = _ref.renderer,
+      chipClasses = _ref.chipClasses,
+      iconClasses = _ref.iconClasses,
+      labelClasses = _ref.labelClasses,
+      _ref$ariaLabel = _ref.ariaLabel,
+      ariaLabel = _ref$ariaLabel === undefined ? 'delete' : _ref$ariaLabel,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === undefined ? 'deleteChip-test-id' : _ref$testId;
+
+  var theme = (0, _styles.useTheme)();
+  var isRtl = (0, _utils.getIsRtl)(theme);
+  var labelRenderer = R.prop('label');
+  var classes = (0, _styles2.useStyles)();
+  var mapIndexed = R.addIndex(R.map);
+  var onChange = R.is(Function)(onDelete) ? function () {
+    return onDelete(parentId, R.isNil(id) ? [] : [id]);
+  } : null;
+  var hasTooltip = shownTooltip(items);
+  var hasMultiLinedTooltip = showMultiLinedTooltip(items);
+  var multiLinedTooltipRenderer = function multiLinedTooltipRenderer(arr) {
+    return mapIndexed(function (item, index) {
+      return _react2.default.createElement(
+        'div',
+        { key: index },
+        (0, _utils2.myTooltipRenderer)({ isRtl: isRtl, labelRenderer: labelRenderer })(item),
+        _react2.default.createElement('br', null)
+      );
+    })(R.prop('parents')(R.head(arr)));
+  };
+
+  return _react2.default.createElement(
+    _Tooltip2.default,
+    {
+      placement: 'top',
+      title: hasTooltip ? renderer(items) : hasMultiLinedTooltip ? multiLinedTooltipRenderer(items) : ''
+    },
+    _react2.default.createElement(_Chip2.default, {
+      'data-testid': testId,
+      size: 'small',
+      'aria-label': label,
+      label: hasTooltip || hasMultiLinedTooltip ? _react2.default.createElement(
+        _react.Fragment,
+        null,
+        '...',
+        _react2.default.createElement(
+          'span',
+          { className: classes.childrenIndicator },
+          '>'
+        ),
+        label
+      ) : label,
+      deleteIcon: _react2.default.createElement(
+        _IconButton2.default,
+        {
+          disableRipple: true,
+          className: iconClasses,
+          'aria-label': ariaLabel + ' ' + label,
+          component: 'span',
+          tabIndex: -1
+        },
+        _react2.default.createElement(_Cross2.default, null)
+      ),
+      clickable: true,
+      onDelete: onChange,
+      className: (0, _classnames2.default)(chipClasses, (_cx = {}, _cx[classes.tooltipIndicator] = hasTooltip || hasMultiLinedTooltip, _cx)),
+      classes: { label: labelClasses }
+    })
+  );
+};
+
+CustomChip.propTypes = process.env.NODE_ENV !== "production" ? {
+  testId: _propTypes2.default.string,
+  id: _propTypes2.default.string,
+  parentId: _propTypes2.default.string,
+  label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+  onDelete: _propTypes2.default.func,
+  renderer: _propTypes2.default.func,
+  chipClasses: _propTypes2.default.string,
+  iconClasses: _propTypes2.default.string,
+  labelClasses: _propTypes2.default.string,
+  ariaLabel: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+  items: _propTypes2.default.array
+} : {};
+exports.default = CustomChip;
+module.exports = exports['default'];

package/lib/Chips/DeleteChip.js

@@ -0,0 +1,46 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _styles = require('./styles');
+
+var _CustomChip = require('./CustomChip');
+
+var _CustomChip2 = _interopRequireDefault(_CustomChip);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var DeleteChip = function DeleteChip(_ref) {
+  var onDeleteAll = _ref.onDeleteAll,
+      clearAllLabel = _ref.clearAllLabel,
+      ariaLabel = _ref.ariaLabel;
+
+  var classes = (0, _styles.useStyles)();
+  return _react2.default.createElement(_CustomChip2.default, {
+    label: clearAllLabel,
+    ariaLabel: ariaLabel,
+    chipClasses: (0, _classnames2.default)(classes.mainChip, classes.chip),
+    onDelete: onDeleteAll,
+    iconClasses: classes.icon,
+    labelClasses: (0, _classnames2.default)(classes.spaceLabel, classes.formatLabel)
+  });
+};
+DeleteChip.propTypes = process.env.NODE_ENV !== "production" ? {
+  onDeleteAll: _propTypes2.default.func,
+  ariaLabel: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+  clearAllLabel: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element])
+} : {};
+exports.default = DeleteChip;
+module.exports = exports['default'];