@sis-cc/dotstatsuite-visions 10.25.0 → 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
           }))