@sis-cc/dotstatsuite-visions 10.24.1 → 10.26.0

package/es/AdvancedFilterDialog/AdvancedFilterDialog.js

@@ -53,7 +53,7 @@ var useStyles = makeStyles(function (theme) {
     },
     selectionTitle: {
       fontSize: '12px',
-      fontFamily: 'Helvetica Neue',
+      fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
       fontWeight: '500',
       color: theme.palette.grey['A700']
     },
@@ -117,11 +117,13 @@ var useStyles = makeStyles(function (theme) {
       flexDirection: 'row-reverse',
       alignItems: 'center',
       '& p': {
+        paddingLeft: '5px',
         fontSize: '12px',
-        fontFamily: 'Helvetica Neue',
+        fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
         color: theme.palette.primary.main,
         fontWeight: '500',
-        lineHeight: 1.43
+        lineHeight: 1.43,
+        textAlign: 'left'
       },
       '& img': {
         width: 21,
@@ -148,12 +150,21 @@ var useStyles = makeStyles(function (theme) {
     },
     tooltip: {
       backgroundColor: theme.palette.action.hover
+    },
+    subheader: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      justifyContent: 'space-between'
+    },
+    narrowHeader: {
+      alignItems: 'flex-start'
     }
   };
 });
 
 var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
-  var _cx;
+  var _cx, _cx2, _cx3, _cx4;
 
   var id = props.id,
       title = props.title,
@@ -183,11 +194,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
       setSelection = _useState2[1];
 
   var classes = useStyles();
-
-  var _useState3 = useState(0),
-      height = _useState3[0],
-      setHeight = _useState3[1];
-
+  // const [height, setHeight] = useState(0);
   var getTotal = function getTotal(items, spotlightAcc) {
     var itemsIds = R.pluck('id', items);
     var total = R.pipe(R.uniq, R.length)(itemsIds);
@@ -196,13 +203,13 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
     }
     return total;
   };
-  var measureRef = React.useCallback(function (node) {
-    if (node !== null) {
-      setHeight(node.getBoundingClientRect().height * 75 / 100);
-    }
-  });
+  // const measureRef = React.useCallback(node => {
+  //   if (node !== null) {
+  //     setHeight((node.getBoundingClientRect().height * 75) / 100);
+  //   }
+  // });
 
-  var listHeight = height - 170;
+  // const listHeight = height - 170;
   var selectionItems = R.map(function (item) {
     return _extends({}, item, {
       isSelected: R.has(item.id, selection) ? !item.isSelected : !!item.isSelected
@@ -210,7 +217,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
   }, items);
   var indexedFilteredItems = R.indexBy(getHierarchicalId, selectionItems);
 
-  var selectionOptions = [{
+  var selectionOptions = [[{
     value: 'single',
     label: R.prop('singleSelection', labels),
     img: singleImg
@@ -218,7 +225,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
     value: 'children',
     label: R.prop('childrenSelection', labels),
     img: childrenImg
-  }, {
+  }], [{
     value: 'branch',
     label: R.prop('branchSelection', labels),
     img: branchImg
@@ -226,7 +233,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
     value: 'level',
     label: R.prop('levelSelection', labels),
     img: levelImg
-  }];
+  }]];
 
   var _allGroupedItems = R.pipe(R.map(function (item) {
     return _extends({}, item, {
@@ -281,7 +288,6 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
     var nextSelection = R.reduce(function (acc, id) {
       return R.has(id, acc) ? acc : R.assoc(id, id, acc);
     }, {}, allIds);
-    setSelectionMode('selectAll');
     setSelection(nextSelection);
   };
 
@@ -291,99 +297,118 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
     var nextSelection = R.reduce(function (acc, id) {
       return R.has(id, acc) ? acc : R.assoc(id, id, acc);
     }, {}, ids);
-    setSelectionMode('deselectAll');
     setSelection(nextSelection);
   };
-
+  var mapIndexed = R.addIndex(R.map);
   return React.createElement(
     Dialog,
     {
       open: isOpen,
       PaperComponent: PaperComponent,
       'aria-labelledby': 'draggable-dialog-title',
-      onClose: onClose,
-      ref: measureRef,
-      'aria-modal': true
+      onClose: onClose
+      // ref={measureRef}
+      , 'aria-modal': true
     },
     React.createElement(
       DialogTitle,
       { style: { cursor: 'move' }, id: 'draggable-dialog-title' },
       React.createElement(
         'div',
-        { className: classes.header },
+        { className: cx(classes.header, (_cx = {}, _cx[classes.narrowHeader] = isNarrow, _cx)) },
         React.createElement(
           'div',
-          { className: classes.headerLabel, 'aria-label': title },
-          '\xA0',
-          title
-        ),
-        React.createElement(
-          'div',
-          { className: classes.selectModeContainer },
+          { className: isNarrow ? classes.subheader : classes.header },
           React.createElement(
             'div',
-            { className: classes.hint },
-            React.createElement(
-              Tooltip,
-              {
-                variant: 'light',
-                title: React.createElement(
-                  Typography,
-                  { variant: 'body2' },
-                  R.prop('hint', labels)
-                ),
-                'aria-label': R.prop('hint', labels),
-                tabIndex: 0
-              },
-              React.createElement(HintIcon, null)
-            ),
-            React.createElement(
-              Typography,
-              {
-                className: classes.selectionTitle,
-                'aria-label': R.prop('selectionMode', labels),
-                tabIndex: 0
-              },
-              R.prop('selectionMode', labels)
-            )
+            { className: classes.headerLabel, 'aria-label': title },
+            '\xA0',
+            title
           ),
-          R.map(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(
+            'div',
+            { className: cx(classes.selectModeContainer, (_cx2 = {}, _cx2[classes.narrowHeader] = isNarrow, _cx2)) },
+            React.createElement(
+              'div',
+              { className: classes.hint },
               React.createElement(
-                Button,
+                Tooltip,
                 {
-                  className: classes.selectButton,
-                  selected: value === selectionMode,
-                  onClick: function onClick() {
-                    setSelectionMode(value);
-                  },
-                  'aria-pressed': value === selectionMode,
-                  'aria-label': label,
-                  tabIndex: 0
-                },
-                React.createElement(
-                  Paper,
-                  { className: classes.selectModeItem, key: value },
-                  React.createElement(
+                  variant: 'light',
+                  title: React.createElement(
                     Typography,
-                    null,
-                    label
+                    { variant: 'body2' },
+                    R.prop('hint', labels)
                   ),
-                  !R.isNil(img) && R.is(String, img) && React.createElement('img', { src: img, alt: value })
-                )
+                  'aria-label': R.prop('hint', labels),
+                  tabIndex: 0
+                },
+                React.createElement(HintIcon, null)
+              ),
+              React.createElement(
+                Typography,
+                {
+                  className: classes.selectionTitle,
+                  'aria-label': R.prop('selectionMode', labels),
+                  tabIndex: 0
+                },
+                R.prop('selectionMode', labels)
               )
-            );
-          }, selectionOptions)
+            ),
+            React.createElement(
+              'div',
+              {
+                className: cx(classes.selectModeContainer, (_cx3 = {}, _cx3[classes.narrowHeader] = isNarrow, _cx3))
+              },
+              mapIndexed(function (el, index) {
+                return React.createElement(
+                  'div',
+                  { key: index },
+                  R.map(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,
+                          { className: classes.selectModeItem, key: value },
+                          React.createElement(
+                            Typography,
+                            null,
+                            label
+                          ),
+                          !R.isNil(img) && R.is(String, img) && React.createElement('img', { src: img, alt: value })
+                        )
+                      )
+                    );
+                  }, el)
+                );
+              }, selectionOptions)
+            )
+          )
         ),
         React.createElement(
           'div',
@@ -408,7 +433,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
         { container: true },
         React.createElement(
           Grid,
-          { item: true, xs: 12, className: cx(classes.topElements, (_cx = {}, _cx[classes.narrowTop] = isNarrow, _cx)) },
+          { item: true, xs: 12, className: cx(classes.topElements, (_cx4 = {}, _cx4[classes.narrowTop] = isNarrow, _cx4)) },
           React.createElement(
             'div',
             { className: isNarrow ? classes.narrowSpotlight : classes.spotlight },
@@ -423,26 +448,34 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
           ),
           React.createElement(
             'div',
-            null,
+            { style: { display: 'flex', flexDirection: isNarrow ? 'column' : 'row' } },
             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(
-              Button,
-              { onClick: selectAll, color: 'primary' },
-              R.prop('selectAll', labels)
+              '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(
-              Button,
-              { style: { marginLeft: 10 }, onClick: deselectAll, color: 'primary' },
-              R.prop('deselectAll', labels)
+              '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 })
@@ -458,7 +491,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
             items: selectionItems,
             changeSelection: onChangeSelection,
             withExpandControl: true,
-            treeHeight: listHeight,
+            treeHeight: 0,
             scopeGetter: scopeGetter,
             expandedIds: expandedIds
           }))

package/es/ShortUrls/ShortUrls.js

@@ -0,0 +1,100 @@
+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 from 'react';
+import Grid from '@material-ui/core/Grid';
+import PropTypes from 'prop-types';
+import * as R from 'ramda';
+import { makeStyles } from '@material-ui/core/styles';
+import TextareaAutosize from '@material-ui/core/TextareaAutosize';
+import Typography from '@material-ui/core/Typography';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import { Button } from '../';
+import { CircularProgress } from '@material-ui/core';
+
+var useStyles = makeStyles(function (theme) {
+  return {
+    container: {
+      boxShadow: 'none',
+      width: '100%',
+      padding: 20
+    },
+    textarea: {
+      width: '100%',
+      margin: theme.spacing(0.5, 0, 0, 0)
+    },
+    title: _extends({
+      paddingBottom: 30
+    }, R.pathOr({}, ['mixins', 'share', 'title'], theme))
+  };
+});
+
+var ShortUrls = function ShortUrls(_ref) {
+  var labels = _ref.labels,
+      onClick = _ref.onClick,
+      isLoading = _ref.isLoading,
+      contentValue = _ref.contentValue;
+
+  var isNarrow = useMediaQuery(function (theme) {
+    return theme.breakpoints.down('sm');
+  });
+  var classes = useStyles();
+  return React.createElement(
+    Grid,
+    { className: classes.container },
+    React.createElement(
+      Typography,
+      { variant: 'h6', className: classes.title },
+      R.prop('title')(labels)
+    ),
+    React.createElement(
+      Grid,
+      {
+        container: true,
+        justifyContent: isNarrow ? 'center' : 'flex-start',
+        alignItems: isNarrow ? 'left' : 'center',
+        direction: isNarrow ? 'column-reverse' : 'row'
+      },
+      React.createElement(
+        Grid,
+        { item: true, xs: 12, sm: 12, md: 4, lg: 5 },
+        React.createElement(
+          Button,
+          {
+            'aria-label': R.propOr('', 'generateUrl')(labels),
+            type: 'submit',
+            variant: 'contained',
+            color: 'primary',
+            disabled: isLoading || R.isNil(onClick),
+            alternative: 'siscc',
+            onClick: onClick,
+            className: classes.submitButton
+          },
+          isLoading ? React.createElement(CircularProgress, { size: 24 }) : R.propOr('', 'generateUrl')(labels)
+        )
+      ),
+      React.createElement(
+        Grid,
+        { item: true, xs: 12, sm: 12, md: 8, lg: 7 },
+        React.createElement(TextareaAutosize, {
+          'aria-label': contentValue,
+          className: classes.textarea,
+          minRows: 2,
+          maxRows: 2,
+          readOnly: true,
+          value: contentValue
+        })
+      )
+    )
+  );
+};
+ShortUrls.propTypes = process.env.NODE_ENV !== "production" ? {
+  onClick: PropTypes.func,
+  isLoading: PropTypes.bool,
+  contentValue: PropTypes.string,
+  labels: PropTypes.shape({
+    generateUrl: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    errorMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
+  })
+} : {};
+export default ShortUrls;

package/es/ShortUrls/index.js

@@ -0,0 +1,22 @@
+/**
+ * ShortUrls, it's a component to shorten your large URL
+ *
+ * @memberOf VISIONS
+ * @name ShortUrls
+ * @tag component
+ * @api public
+ * @props
+ * ShortUrls.propTypes = {
+ *   onClick: PropTypes.func,
+ *   isLoading: PropTypes.bool,
+ *   contentValue: PropTypes.string,
+ *   labels: PropTypes.shape({
+ *     generateUrl: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *     title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *     errorMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *   }),
+ * };
+ * @demoReady
+ */
+
+export { default } from './ShortUrls';

package/es/index.js

@@ -31,6 +31,7 @@ export { spotlightScopeListEngine, reduceChildren } from './utils';
 //export { default as ScopeList } from './ScopeList';
 export { default as Select } from './Select';
 export { default as Share } from './Share';
+export { default as ShortUrls } from './ShortUrls';
 export { default as SisccFooter } from './SisccFooter';
 export { default as Spotlight } from './Spotlight';
 export { default as TableFooter } from './TableFooter';