@sis-cc/dotstatsuite-visions 10.29.0 → 11.1.0

package/es/AdvancedFilterDialog/AdvancedFilterDialog.js

@@ -550,7 +550,7 @@ AdvancedFilterDialog.propTypes = process.env.NODE_ENV !== "production" ? {
   isOpen: PropTypes.bool,
   items: PropTypes.array,
   labels: PropTypes.shape({
-    placeholder: PropTypes.string,
+    placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     disableItemLabel: PropTypes.string,
     singleSelection: PropTypes.string,
     childrenSelection: PropTypes.string,

package/es/NoData/NoData.js

@@ -20,7 +20,8 @@ var useStyles = makeStyles(function () {
 var NO_RESULT_MESSAGE_ID = 'noResultMessage';
 
 var NoData = function NoData(_ref) {
-  var icon = _ref.icon,
+  var _ref$icon = _ref.icon,
+      icon = _ref$icon === undefined ? React.createElement(Error, { color: 'primary', fontSize: 'large' }) : _ref$icon,
       message = _ref.message;
 
   var classes = useStyles();
@@ -45,8 +46,4 @@ NoData.propTypes = process.env.NODE_ENV !== "production" ? {
   message: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
 } : {};
 
-NoData.defaultProps = {
-  icon: React.createElement(Error, { color: 'primary', fontSize: 'large' })
-};
-
 export default NoData;

package/es/Spotlight/Fields.js

@@ -8,7 +8,8 @@ import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import Check from '@material-ui/icons/Check';
 
 export var Field = function Field(_ref) {
-  var spotlight = _ref.spotlight,
+  var _ref$spotlight = _ref.spotlight,
+      spotlight = _ref$spotlight === undefined ? {} : _ref$spotlight,
       onChangeField = _ref.onChangeField,
       isRtl = _ref.isRtl,
       classes = _ref.classes;
@@ -96,8 +97,4 @@ Field.propTypes = process.env.NODE_ENV !== "production" ? {
   }),
   onChangeField: PropTypes.func.isRequired,
   isRtl: PropTypes.bool
-} : {};
-
-Field.defaultProps = {
-  spotlight: {}
-};
+} : {};

package/es/TableHtml5/TableHtml5.js

@@ -1,6 +1,6 @@
 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, { useRef, useState, useEffect, useMemo, useCallback } from 'react';
+import React, { useRef, useState, useEffect, useMemo } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
@@ -101,8 +101,6 @@ var TableHtml5 = function TableHtml5(_ref) {
   var headerRef = useRef(null);
   var subHeadCellsRef = useRef([]);
 
-  var cellValueAccessorHandler = useCallback(cellValueAccessor, []);
-
   useEffect(function () {
     setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef));
     setSubHeadCellsWidth(getCellsWidth(R.prop('current', subHeadCellsRef)));
@@ -185,7 +183,7 @@ var TableHtml5 = function TableHtml5(_ref) {
         SideIcon: SideIcon,
         subHeadCellsWidth: subHeadCellsWidth,
         HTMLRenderer: HTMLRenderer,
-        cellValueAccessor: cellValueAccessorHandler,
+        cellValueAccessor: cellValueAccessor,
         labelAccessor: labelAccessor,
         isNoWrap: isNoWrap,
         textAlign: textAlign

package/es/TableLayout/TableLayout.js

@@ -1,6 +1,6 @@
 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, { Fragment, useState, useEffect } from 'react';
+import React, { Fragment, useState, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import * as R from 'ramda';
@@ -17,7 +17,7 @@ import { DragDropContext } from 'react-beautiful-dnd';
 import { withBlank } from '../utils';
 import TablePreview from '../TablePreview';
 import Box from './Box';
-import { changeLayout, rejectHiddenElement, addHiddenElement } from './lib';
+import { changeLayout, getIsOptionalActivated } from './lib';
 import { BOX, wcagId } from './constants';
 import { Button } from '../';
 
@@ -34,6 +34,12 @@ export var useStyles = makeStyles(function (theme) {
       flexDirection: 'row',
       alignItems: 'center',
       flexFlow: 'nowrap'
+    },
+    activationButton: {
+      backgroundColor: theme.palette.action.hover,
+      '&:hover': {
+        backgroundColor: theme.palette.action.selected
+      }
     }
   };
 });
@@ -46,7 +52,11 @@ var TableLayout = function TableLayout(_ref) {
   var _boxLabel;
 
   var _ref$layout = _ref.layout,
-      layout = _ref$layout === undefined ? [] : _ref$layout,
+      layout = _ref$layout === undefined ? {} : _ref$layout,
+      _ref$items = _ref.items,
+      items = _ref$items === undefined ? [] : _ref$items,
+      _ref$optionalItem = _ref.optionalItem,
+      optionalItem = _ref$optionalItem === undefined ? {} : _ref$optionalItem,
       _ref$itemRenderer = _ref.itemRenderer,
       itemRenderer = _ref$itemRenderer === undefined ? R.prop('name') : _ref$itemRenderer,
       itemButtonProps = _ref.itemButtonProps,
@@ -56,40 +66,51 @@ var TableLayout = function TableLayout(_ref) {
       accessibility = _ref.accessibility;
 
   var classes = useStyles();
-  var hiddenElement = R.map(R.filter(function (_ref2) {
-    var isHidden = _ref2.isHidden;
-    return isHidden;
-  }))(layout);
 
-  var _useState = useState([]),
+  var _useState = useState(layout),
       currentLayout = _useState[0],
       setCurrentLayout = _useState[1];
 
   var boxLabel = (_boxLabel = {}, _boxLabel[BOX.header] = labels.column || BOX.header, _boxLabel[BOX.sections] = labels.section || BOX.sections, _boxLabel[BOX.rows] = labels.row || BOX.rows, _boxLabel);
-
   useEffect(function () {
-    return setCurrentLayout(rejectHiddenElement(layout));
+    setCurrentLayout(layout);
   }, [layout]);
+  var indexedItems = useMemo(function () {
+    var indexed = R.indexBy(R.prop('id'), items);
+    if (!R.isEmpty(optionalItem) && !R.isNil(optionalItem)) {
+      return R.assoc(optionalItem.id, optionalItem, indexed);
+    }
+    return indexed;
+  }, [items, optionalItem]);
 
   var onChangeLayout = function onChangeLayout(props) {
     return setCurrentLayout(changeLayout(_extends({}, props)));
   };
 
+  var activateOptionalItem = function activateOptionalItem() {
+    var nextLayout = R.over(R.lensProp('header'), R.append(optionalItem.id), currentLayout);
+    setCurrentLayout(nextLayout);
+  };
+
+  var deactivateOptionalItem = function deactivateOptionalItem() {
+    setCurrentLayout(R.map(R.reject(R.equals(optionalItem.id)), currentLayout));
+  };
+
   var onCommit = function onCommit() {
     if (R.is(Function)(commit)) {
-      commit(addHiddenElement(currentLayout)(hiddenElement));
+      commit(currentLayout);
     }
   };
 
   var onCancel = function onCancel() {
     if (R.is(Function)(setCurrentLayout)) {
-      setCurrentLayout(rejectHiddenElement(layout));
+      setCurrentLayout(layout);
     }
   };
 
-  var onDragStart = function onDragStart(_ref3, provided) {
-    var draggableId = _ref3.draggableId,
-        source = _ref3.source;
+  var onDragStart = function onDragStart(_ref2, provided) {
+    var draggableId = _ref2.draggableId,
+        source = _ref2.source;
 
     if (R.is(Function)(labels.wcagDragStart)) {
       // start.source = droppableId & index
@@ -103,9 +124,9 @@ var TableLayout = function TableLayout(_ref) {
     }
   };
 
-  var onDragUpdate = function onDragUpdate(_ref4, provided) {
-    var destination = _ref4.destination,
-        source = _ref4.source;
+  var onDragUpdate = function onDragUpdate(_ref3, provided) {
+    var destination = _ref3.destination,
+        source = _ref3.source;
 
     if (R.isNil(destination)) {
       return;
@@ -127,10 +148,10 @@ var TableLayout = function TableLayout(_ref) {
   };
 
   var onDragEnd = function onDragEnd(layout) {
-    return function (_ref5, provided) {
-      var reason = _ref5.reason,
-          destination = _ref5.destination,
-          source = _ref5.source;
+    return function (_ref4, provided) {
+      var reason = _ref4.reason,
+          destination = _ref4.destination,
+          source = _ref4.source;
 
       if (R.is(String)(labels.wcagDragCancel)) {
         if (R.equals(reason, 'CANCEL')) {
@@ -164,10 +185,16 @@ var TableLayout = function TableLayout(_ref) {
     };
   };
 
+  var getItems = function getItems(level) {
+    return R.pipe(R.prop(level), function (ids) {
+      return R.props(ids, indexedItems);
+    }, R.filter(R.identity))(currentLayout);
+  };
+
   var header = React.createElement(Box, {
     title: labels.column,
     Icon: ViewColumn,
-    items: R.prop(BOX.header)(currentLayout),
+    items: getItems('header'),
     labels: labels,
     dropZoneLabel: BOX.header,
     itemRenderer: itemRenderer,
@@ -182,7 +209,7 @@ var TableLayout = function TableLayout(_ref) {
     React.createElement(Box, {
       title: labels.section,
       Icon: Reorder,
-      items: R.prop(BOX.sections)(currentLayout),
+      items: getItems('sections'),
       labels: labels,
       dropZoneLabel: BOX.sections,
       itemRenderer: itemRenderer,
@@ -193,7 +220,7 @@ var TableLayout = function TableLayout(_ref) {
     React.createElement(Box, {
       title: labels.row,
       Icon: ViewList,
-      items: R.prop(BOX.rows)(currentLayout),
+      items: getItems('rows'),
       labels: labels,
       dropZoneLabel: BOX.rows,
       itemRenderer: itemRenderer,
@@ -203,6 +230,8 @@ var TableLayout = function TableLayout(_ref) {
     })
   );
 
+  var isOptionalActivated = getIsOptionalActivated(currentLayout, R.prop('id', optionalItem));
+
   return React.createElement(
     Grid,
     { 'data-testid': 'table-layout-test-id', container: true },
@@ -267,63 +296,101 @@ var TableLayout = function TableLayout(_ref) {
                 labels.table
               )
             ),
-            React.createElement(TablePreview, _extends({}, currentLayout, { itemRenderer: itemRenderer }))
+            React.createElement(TablePreview, {
+              header: R.props(R.prop('header', currentLayout), indexedItems),
+              sections: R.props(R.prop('sections', currentLayout), indexedItems),
+              rows: R.props(R.prop('rows', currentLayout), indexedItems),
+              itemRenderer: itemRenderer
+            })
           )
         )
       )
     ),
     React.createElement(
       Grid,
-      { container: true, justifyContent: 'flex-end', className: classes.buttonContainer, spacing: 1 },
-      R.map(function (button) {
-        return React.createElement(
-          Grid,
-          { item: true, key: button.id, 'data-testid': button['data-testid'] },
+      {
+        container: true,
+        justifyContent: 'space-between',
+        className: classes.buttonContainer,
+        spacing: 1
+      },
+      React.createElement(
+        Grid,
+        {
+          item: true,
+          'data-testid': isOptionalActivated ? 'table-layout-deactivate-optional' : 'table-layout-activate-optional'
+        },
+        !R.isNil(optionalItem) && !R.isEmpty(optionalItem) && React.createElement(
+          Button,
+          {
+            className: classes.activationButton,
+            'aria-label': R.prop('activationLabel', optionalItem),
+            color: 'primary',
+            onClick: isOptionalActivated ? deactivateOptionalItem : activateOptionalItem,
+            startIcon: React.createElement(Done, null)
+          },
           React.createElement(
-            Button,
-            _extends({ 'aria-label': button.label, color: 'primary' }, button),
-            React.createElement(
-              Typography,
-              { variant: 'body2' },
-              button.label
-            )
+            Typography,
+            { variant: 'body2' },
+            R.prop('activationLabel', optionalItem)
           )
-        );
-      })([{
-        id: 2,
-        label: labels.cancel,
-        onClick: onCancel,
-        startIcon: React.createElement(Undo, null),
-        'datatest-id': 'table-layout-cancel'
-      }, {
-        id: 1,
-        label: labels.commit,
-        onClick: onCommit,
-        startIcon: React.createElement(Done, null),
-        variant: 'contained',
-        alternative: 'siscc',
-        className: classes.applyButton,
-        'data-testid': 'table-layout-apply'
-      }])
+        )
+      ),
+      React.createElement(
+        Grid,
+        { item: true },
+        React.createElement(
+          Grid,
+          { container: true, justifyContent: 'flex-end', display: 'flex', spacing: 1 },
+          R.map(function (button) {
+            return React.createElement(
+              Grid,
+              { item: true, key: button.id, 'data-testid': button['data-testid'] },
+              React.createElement(
+                Button,
+                _extends({ 'aria-label': button.label, color: 'primary' }, button),
+                React.createElement(
+                  Typography,
+                  { variant: 'body2' },
+                  button.label
+                )
+              )
+            );
+          })([{
+            id: 2,
+            label: labels.cancel,
+            onClick: onCancel,
+            startIcon: React.createElement(Undo, null),
+            'datatest-id': 'table-layout-cancel'
+          }, {
+            id: 1,
+            label: labels.commit,
+            onClick: onCommit,
+            startIcon: React.createElement(Done, null),
+            variant: 'contained',
+            alternative: 'siscc',
+            className: classes.applyButton,
+            'data-testid': 'table-layout-apply'
+          }])
+        )
+      )
     )
   );
 };
 
-var patern = {
+var patern = PropTypes.shape({
   id: PropTypes.string,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  values: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
-  }))
-};
+  count: PropTypes.number
+});
 
 TableLayout.propTypes = process.env.NODE_ENV !== "production" ? {
   layout: PropTypes.shape({
-    header: PropTypes.arrayOf(PropTypes.shape(patern)),
-    sections: PropTypes.arrayOf(PropTypes.shape(patern)),
-    rows: PropTypes.arrayOf(PropTypes.shape(patern))
+    header: PropTypes.arrayOf(PropTypes.string),
+    sections: PropTypes.arrayOf(PropTypes.string),
+    rows: PropTypes.arrayOf(PropTypes.string)
   }),
+  items: PropTypes.arrayOf(patern),
+  optionalItem: patern,
   itemRenderer: PropTypes.func,
   commit: PropTypes.func,
   noPreview: PropTypes.bool,
@@ -348,10 +415,10 @@ TableLayout.propTypes = process.env.NODE_ENV !== "production" ? {
   accessibility: PropTypes.bool
 } : {};
 
-export default withBlank(function (_ref6) {
-  var _ref6$layout = _ref6.layout,
-      layout = _ref6$layout === undefined ? [] : _ref6$layout,
-      isBlank = _ref6.isBlank;
+export default withBlank(function (_ref5) {
+  var _ref5$layout = _ref5.layout,
+      layout = _ref5$layout === undefined ? [] : _ref5$layout,
+      isBlank = _ref5.isBlank;
   return {
     isBlank: R.or(isBlank, R.pipe(R.values, R.all(R.isEmpty))(layout))
   };

package/es/TableLayout/lib.js

@@ -23,4 +23,9 @@ export var addHiddenElement = function addHiddenElement(layout) {
   return R.mapObjIndexed(function (values, key) {
     return R.pipe(R.prop(key), R.concat(values))(layout);
   });
+};
+
+export var getIsOptionalActivated = function getIsOptionalActivated(layout, optionalId) {
+  var founded = R.pipe(R.values, R.unnest, R.find(R.equals(optionalId)))(layout);
+  return !R.isNil(founded);
 };