@sis-cc/dotstatsuite-visions 10.24.1 → 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/lib/ShortUrls/ShortUrls.js

@@ -0,0 +1,132 @@
+'use strict';
+
+exports.__esModule = true;
+
+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; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _Grid = require('@material-ui/core/Grid');
+
+var _Grid2 = _interopRequireDefault(_Grid);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _ramda = require('ramda');
+
+var R = _interopRequireWildcard(_ramda);
+
+var _styles = require('@material-ui/core/styles');
+
+var _TextareaAutosize = require('@material-ui/core/TextareaAutosize');
+
+var _TextareaAutosize2 = _interopRequireDefault(_TextareaAutosize);
+
+var _Typography = require('@material-ui/core/Typography');
+
+var _Typography2 = _interopRequireDefault(_Typography);
+
+var _useMediaQuery = require('@material-ui/core/useMediaQuery');
+
+var _useMediaQuery2 = _interopRequireDefault(_useMediaQuery);
+
+var _ = require('../');
+
+var _core = require('@material-ui/core');
+
+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 useStyles = (0, _styles.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 = (0, _useMediaQuery2.default)(function (theme) {
+    return theme.breakpoints.down('sm');
+  });
+  var classes = useStyles();
+  return _react2.default.createElement(
+    _Grid2.default,
+    { className: classes.container },
+    _react2.default.createElement(
+      _Typography2.default,
+      { variant: 'h6', className: classes.title },
+      R.prop('title')(labels)
+    ),
+    _react2.default.createElement(
+      _Grid2.default,
+      {
+        container: true,
+        justifyContent: isNarrow ? 'center' : 'flex-start',
+        alignItems: isNarrow ? 'left' : 'center',
+        direction: isNarrow ? 'column-reverse' : 'row'
+      },
+      _react2.default.createElement(
+        _Grid2.default,
+        { item: true, xs: 12, sm: 12, md: 4, lg: 5 },
+        _react2.default.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 ? _react2.default.createElement(_core.CircularProgress, { size: 24 }) : R.propOr('', 'generateUrl')(labels)
+        )
+      ),
+      _react2.default.createElement(
+        _Grid2.default,
+        { item: true, xs: 12, sm: 12, md: 8, lg: 7 },
+        _react2.default.createElement(_TextareaAutosize2.default, {
+          'aria-label': contentValue,
+          className: classes.textarea,
+          minRows: 2,
+          maxRows: 2,
+          readOnly: true,
+          value: contentValue
+        })
+      )
+    )
+  );
+};
+ShortUrls.propTypes = process.env.NODE_ENV !== "production" ? {
+  onClick: _propTypes2.default.func,
+  isLoading: _propTypes2.default.bool,
+  contentValue: _propTypes2.default.string,
+  labels: _propTypes2.default.shape({
+    generateUrl: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+    title: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+    errorMessage: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element])
+  })
+} : {};
+exports.default = ShortUrls;
+module.exports = exports['default'];

package/lib/ShortUrls/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _ShortUrls = require('./ShortUrls');
+
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_ShortUrls).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+module.exports = exports['default'];

package/lib/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 exports.__esModule = true;
-exports.T4_BREAKPOINTS = exports.innerPalette = exports.sisccTheme = exports.HierarchicalFilter = exports.AdvancedFilterDialog = exports.VirtualizedTree = exports.AuthDialog = exports.VerticalButton = exports.UserRightForm = exports.Tooltip = exports.ToggleButton = exports.Tag = exports.TablePreview = exports.TableLayout = exports.Cell = exports.TableHtml5 = exports.TableHeader = exports.TableFooter = exports.Spotlight = exports.SisccFooter = exports.Share = exports.Select = exports.reduceChildren = exports.spotlightScopeListEngine = exports.PeriodPicker = exports.Pagination = exports.Mode = exports.NoData = exports.Logo = exports.Loading = exports.LabelDivider = exports.InputNumber = exports.Input = exports.ExpansionPanel = exports.DataFooter = exports.DataHeader = exports.Dataflow = exports.DataEdit = exports.Contact = exports.CollapsibleTree = exports.CollapseButtons = exports.GroupedChips = exports.DeleteAllChip = exports.ChartsConfig = exports.Button = exports.Breadcrumbs = exports.ApiQueries = exports.Alert = undefined;
+exports.T4_BREAKPOINTS = exports.innerPalette = exports.sisccTheme = exports.HierarchicalFilter = exports.AdvancedFilterDialog = exports.VirtualizedTree = exports.AuthDialog = exports.VerticalButton = exports.UserRightForm = exports.Tooltip = exports.ToggleButton = exports.Tag = exports.TablePreview = exports.TableLayout = exports.Cell = exports.TableHtml5 = exports.TableHeader = exports.TableFooter = exports.Spotlight = exports.SisccFooter = exports.ShortUrls = exports.Share = exports.Select = exports.reduceChildren = exports.spotlightScopeListEngine = exports.PeriodPicker = exports.Pagination = exports.Mode = exports.NoData = exports.Logo = exports.Loading = exports.LabelDivider = exports.InputNumber = exports.Input = exports.ExpansionPanel = exports.DataFooter = exports.DataHeader = exports.Dataflow = exports.DataEdit = exports.Contact = exports.CollapsibleTree = exports.CollapseButtons = exports.GroupedChips = exports.DeleteAllChip = exports.ChartsConfig = exports.Button = exports.Breadcrumbs = exports.ApiQueries = exports.Alert = undefined;
 
 var _Alert = require('./Alert');
 
@@ -261,6 +261,15 @@ Object.defineProperty(exports, 'Share', {
   }
 });
 
+var _ShortUrls = require('./ShortUrls');
+
+Object.defineProperty(exports, 'ShortUrls', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_ShortUrls).default;
+  }
+});
+
 var _SisccFooter = require('./SisccFooter');
 
 Object.defineProperty(exports, 'SisccFooter', {

package/package.json

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