@sis-cc/dotstatsuite-visions 10.25.0 → 10.26.0

package/lib/AdvancedFilterDialog/AdvancedFilterDialog.js

@@ -123,7 +123,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     },
     selectionTitle: {
       fontSize: '12px',
-      fontFamily: 'Helvetica Neue',
+      fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
       fontWeight: '500',
       color: theme.palette.grey['A700']
     },
@@ -187,11 +187,13 @@ var useStyles = (0, _styles.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,
@@ -218,12 +220,21 @@ var useStyles = (0, _styles.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,
@@ -253,11 +264,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
       setSelection = _useState2[1];
 
   var classes = useStyles();
-
-  var _useState3 = (0, _react.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);
@@ -266,13 +273,13 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
     }
     return total;
   };
-  var measureRef = _react2.default.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
@@ -280,7 +287,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
   }, items);
   var indexedFilteredItems = R.indexBy(_utils.getHierarchicalId, selectionItems);
 
-  var selectionOptions = [{
+  var selectionOptions = [[{
     value: 'single',
     label: R.prop('singleSelection', labels),
     img: _singleSelection2.default
@@ -288,7 +295,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
     value: 'children',
     label: R.prop('childrenSelection', labels),
     img: _childrenSelection2.default
-  }, {
+  }], [{
     value: 'branch',
     label: R.prop('branchSelection', labels),
     img: _branchSelection2.default
@@ -296,7 +303,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
     value: 'level',
     label: R.prop('levelSelection', labels),
     img: _levelSelection2.default
-  }];
+  }]];
 
   var _allGroupedItems = R.pipe(R.map(function (item) {
     return _extends({}, item, {
@@ -351,7 +358,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);
   };
 
@@ -361,99 +367,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 _react2.default.createElement(
     _Dialog2.default,
     {
       open: isOpen,
       PaperComponent: PaperComponent,
       'aria-labelledby': 'draggable-dialog-title',
-      onClose: onClose,
-      ref: measureRef,
-      'aria-modal': true
+      onClose: onClose
+      // ref={measureRef}
+      , 'aria-modal': true
     },
     _react2.default.createElement(
       _DialogTitle2.default,
       { style: { cursor: 'move' }, id: 'draggable-dialog-title' },
       _react2.default.createElement(
         'div',
-        { className: classes.header },
+        { className: (0, _classnames2.default)(classes.header, (_cx = {}, _cx[classes.narrowHeader] = isNarrow, _cx)) },
         _react2.default.createElement(
           'div',
-          { className: classes.headerLabel, 'aria-label': title },
-          '\xA0',
-          title
-        ),
-        _react2.default.createElement(
-          'div',
-          { className: classes.selectModeContainer },
+          { className: isNarrow ? classes.subheader : classes.header },
           _react2.default.createElement(
             'div',
-            { className: classes.hint },
-            _react2.default.createElement(
-              _.Tooltip,
-              {
-                variant: 'light',
-                title: _react2.default.createElement(
-                  _Typography2.default,
-                  { variant: 'body2' },
-                  R.prop('hint', labels)
-                ),
-                'aria-label': R.prop('hint', labels),
-                tabIndex: 0
-              },
-              _react2.default.createElement(_EmojiObjects2.default, null)
-            ),
-            _react2.default.createElement(
-              _Typography2.default,
-              {
-                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 _react2.default.createElement(
-              _.Tooltip,
-              {
-                key: value,
-                classes: { tooltip: classes.tooltip },
-                title: _react2.default.createElement('img', { style: { width: '72px', height: '90px' }, src: img, alt: value }),
-                tabIndex: -1
-              },
+          _react2.default.createElement(
+            'div',
+            { className: (0, _classnames2.default)(classes.selectModeContainer, (_cx2 = {}, _cx2[classes.narrowHeader] = isNarrow, _cx2)) },
+            _react2.default.createElement(
+              'div',
+              { className: classes.hint },
               _react2.default.createElement(
-                _.Button,
+                _.Tooltip,
                 {
-                  className: classes.selectButton,
-                  selected: value === selectionMode,
-                  onClick: function onClick() {
-                    setSelectionMode(value);
-                  },
-                  'aria-pressed': value === selectionMode,
-                  'aria-label': label,
-                  tabIndex: 0
-                },
-                _react2.default.createElement(
-                  _Paper2.default,
-                  { className: classes.selectModeItem, key: value },
-                  _react2.default.createElement(
+                  variant: 'light',
+                  title: _react2.default.createElement(
                     _Typography2.default,
-                    null,
-                    label
+                    { variant: 'body2' },
+                    R.prop('hint', labels)
                   ),
-                  !R.isNil(img) && R.is(String, img) && _react2.default.createElement('img', { src: img, alt: value })
-                )
+                  'aria-label': R.prop('hint', labels),
+                  tabIndex: 0
+                },
+                _react2.default.createElement(_EmojiObjects2.default, null)
+              ),
+              _react2.default.createElement(
+                _Typography2.default,
+                {
+                  className: classes.selectionTitle,
+                  'aria-label': R.prop('selectionMode', labels),
+                  tabIndex: 0
+                },
+                R.prop('selectionMode', labels)
               )
-            );
-          }, selectionOptions)
+            ),
+            _react2.default.createElement(
+              'div',
+              {
+                className: (0, _classnames2.default)(classes.selectModeContainer, (_cx3 = {}, _cx3[classes.narrowHeader] = isNarrow, _cx3))
+              },
+              mapIndexed(function (el, index) {
+                return _react2.default.createElement(
+                  'div',
+                  { key: index },
+                  R.map(function (_ref) {
+                    var value = _ref.value,
+                        label = _ref.label,
+                        img = _ref.img;
+                    return _react2.default.createElement(
+                      _.Tooltip,
+                      {
+                        key: value,
+                        classes: { tooltip: classes.tooltip },
+                        title: _react2.default.createElement('img', {
+                          style: { width: '72px', height: '90px' },
+                          src: img,
+                          alt: value
+                        }),
+                        tabIndex: -1
+                      },
+                      _react2.default.createElement(
+                        _.Button,
+                        {
+                          className: classes.selectButton,
+                          selected: value === selectionMode,
+                          onClick: function onClick() {
+                            setSelectionMode(value);
+                          },
+                          'aria-pressed': value === selectionMode,
+                          'aria-label': label,
+                          tabIndex: 0
+                        },
+                        _react2.default.createElement(
+                          _Paper2.default,
+                          { className: classes.selectModeItem, key: value },
+                          _react2.default.createElement(
+                            _Typography2.default,
+                            null,
+                            label
+                          ),
+                          !R.isNil(img) && R.is(String, img) && _react2.default.createElement('img', { src: img, alt: value })
+                        )
+                      )
+                    );
+                  }, el)
+                );
+              }, selectionOptions)
+            )
+          )
         ),
         _react2.default.createElement(
           'div',
@@ -478,7 +503,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
         { container: true },
         _react2.default.createElement(
           _Grid2.default,
-          { item: true, xs: 12, className: (0, _classnames2.default)(classes.topElements, (_cx = {}, _cx[classes.narrowTop] = isNarrow, _cx)) },
+          { item: true, xs: 12, className: (0, _classnames2.default)(classes.topElements, (_cx4 = {}, _cx4[classes.narrowTop] = isNarrow, _cx4)) },
           _react2.default.createElement(
             'div',
             { className: isNarrow ? classes.narrowSpotlight : classes.spotlight },
@@ -493,26 +518,34 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
           ),
           _react2.default.createElement(
             'div',
-            null,
+            { style: { display: 'flex', flexDirection: isNarrow ? 'column' : 'row' } },
             _react2.default.createElement(
-              _.Button,
-              { onClick: collapseAll, color: 'primary' },
-              R.prop('colapseAll', labels)
-            ),
-            _react2.default.createElement(
-              _.Button,
-              { style: { marginLeft: 10 }, onClick: expandAll, color: 'primary' },
-              R.prop('expandAll', labels)
-            ),
-            _react2.default.createElement(
-              _.Button,
-              { onClick: selectAll, color: 'primary' },
-              R.prop('selectAll', labels)
+              'div',
+              null,
+              _react2.default.createElement(
+                _.Button,
+                { onClick: collapseAll, color: 'primary' },
+                R.prop('colapseAll', labels)
+              ),
+              _react2.default.createElement(
+                _.Button,
+                { style: { marginLeft: 10 }, onClick: expandAll, color: 'primary' },
+                R.prop('expandAll', labels)
+              )
             ),
             _react2.default.createElement(
-              _.Button,
-              { style: { marginLeft: 10 }, onClick: deselectAll, color: 'primary' },
-              R.prop('deselectAll', labels)
+              'div',
+              null,
+              _react2.default.createElement(
+                _.Button,
+                { onClick: selectAll, color: 'primary' },
+                R.prop('selectAll', labels)
+              ),
+              _react2.default.createElement(
+                _.Button,
+                { style: { marginLeft: 10 }, onClick: deselectAll, color: 'primary' },
+                R.prop('deselectAll', labels)
+              )
             )
           ),
           _react2.default.createElement(_core.Divider, { className: classes.divider })
@@ -528,7 +561,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
             items: selectionItems,
             changeSelection: onChangeSelection,
             withExpandControl: true,
-            treeHeight: listHeight,
+            treeHeight: 0,
             scopeGetter: scopeGetter,
             expandedIds: expandedIds
           }))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "10.25.0",
+  "version": "10.26.0",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",