@sis-cc/dotstatsuite-visions 7.11.0 → 7.11.1

package/es/Dataflow/Dataflow.js

@@ -6,6 +6,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import cx from 'classnames';
+import useSize from '@react-hook/size';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Collapse from '@material-ui/core/Collapse';
@@ -86,20 +87,17 @@ var useStyles = makeStyles(function (theme) {
       margin: theme.spacing(0.5, 0.5)
     },
     fadeContent: {
-      maxHeight: 70,
       color: theme.palette.grey['A200'],
       position: 'relative',
       overflow: 'hidden'
     },
     fading: {
       position: 'absolute',
-      bottom: 0,
       left: 0,
-      width: '100%',
+      right: 0,
       height: 15,
-      textAlign: 'center',
       margin: 0,
-      padding: theme.spacing(0, 0.5, 0.5, 0.5),
+      padding: 0,
       backgroundImage: 'linear-gradient(to bottom, transparent, white)'
     },
     wrapper: {
@@ -161,6 +159,20 @@ var Dataflow = function Dataflow(_ref2) {
 
   var description = R.propOr('', 'description', body);
 
+  var target = React.useRef();
+
+  var _useSize = useSize(target),
+      height = _useSize[1];
+
+  var handleExpand = function handleExpand() {
+    setExpand(function (prev) {
+      return !prev;
+    });
+  };
+
+  //const collapsedSize = R.min(!isExpanded ? height : !collapsedSize ? height : collapsedSize, 70);
+  var collapsedSize = R.min(height, 70);
+
   return React.createElement(
     Card,
     { elevation: 0, square: true, className: classes.card, 'data-testid': '' + testId },
@@ -196,12 +208,13 @@ var Dataflow = function Dataflow(_ref2) {
           Collapse,
           {
             'in': isExpanded,
-            collapsedSize: 70,
+            collapsedSize: collapsedSize,
             classes: isExpanded ? undefined : { wrapper: classes.wrapper }
           },
           React.createElement(
             CardContent,
             {
+              ref: target,
               className: cx(classes.cardContent, (_cx = {}, _cx[classes.fadeContent] = !isExpanded, _cx))
             },
             React.createElement(
@@ -213,7 +226,7 @@ var Dataflow = function Dataflow(_ref2) {
               },
               React.createElement(HTMLRenderer, { html: description })
             ),
-            !isExpanded && React.createElement('div', { className: classes.fading })
+            !isExpanded && React.createElement('div', { className: classes.fading, style: { top: collapsedSize - 15 } })
           )
         ),
         R.not(R.empty(R.propOr('', 'highlightDescription')(body))) && React.createElement(
@@ -346,9 +359,7 @@ var Dataflow = function Dataflow(_ref2) {
               'data-testid': 'dataflow-expand-button-test-id',
               'aria-label': 'expand',
               onClick: function onClick() {
-                return setExpand(function (prev) {
-                  return !prev;
-                });
+                return handleExpand();
               },
               color: 'primary',
               size: 'small'

package/es/Dataflow/index.js

@@ -1,6 +1,4 @@
 /**
- * Dataflow
- *
  * Without onDownload the button download will disappear
  *
  * @demoReady

package/lib/Dataflow/Dataflow.js

@@ -20,6 +20,10 @@ var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
+var _size = require('@react-hook/size');
+
+var _size2 = _interopRequireDefault(_size);
+
 var _styles = require('@material-ui/core/styles');
 
 var _Typography = require('@material-ui/core/Typography');
@@ -140,20 +144,17 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       margin: theme.spacing(0.5, 0.5)
     },
     fadeContent: {
-      maxHeight: 70,
       color: theme.palette.grey['A200'],
       position: 'relative',
       overflow: 'hidden'
     },
     fading: {
       position: 'absolute',
-      bottom: 0,
       left: 0,
-      width: '100%',
+      right: 0,
       height: 15,
-      textAlign: 'center',
       margin: 0,
-      padding: theme.spacing(0, 0.5, 0.5, 0.5),
+      padding: 0,
       backgroundImage: 'linear-gradient(to bottom, transparent, white)'
     },
     wrapper: {
@@ -215,6 +216,20 @@ var Dataflow = function Dataflow(_ref2) {
 
   var description = R.propOr('', 'description', body);
 
+  var target = _react2.default.useRef();
+
+  var _useSize = (0, _size2.default)(target),
+      height = _useSize[1];
+
+  var handleExpand = function handleExpand() {
+    setExpand(function (prev) {
+      return !prev;
+    });
+  };
+
+  //const collapsedSize = R.min(!isExpanded ? height : !collapsedSize ? height : collapsedSize, 70);
+  var collapsedSize = R.min(height, 70);
+
   return _react2.default.createElement(
     _Card2.default,
     { elevation: 0, square: true, className: classes.card, 'data-testid': '' + testId },
@@ -250,12 +265,13 @@ var Dataflow = function Dataflow(_ref2) {
           _Collapse2.default,
           {
             'in': isExpanded,
-            collapsedSize: 70,
+            collapsedSize: collapsedSize,
             classes: isExpanded ? undefined : { wrapper: classes.wrapper }
           },
           _react2.default.createElement(
             _CardContent2.default,
             {
+              ref: target,
               className: (0, _classnames2.default)(classes.cardContent, (_cx = {}, _cx[classes.fadeContent] = !isExpanded, _cx))
             },
             _react2.default.createElement(
@@ -267,7 +283,7 @@ var Dataflow = function Dataflow(_ref2) {
               },
               _react2.default.createElement(HTMLRenderer, { html: description })
             ),
-            !isExpanded && _react2.default.createElement('div', { className: classes.fading })
+            !isExpanded && _react2.default.createElement('div', { className: classes.fading, style: { top: collapsedSize - 15 } })
           )
         ),
         R.not(R.empty(R.propOr('', 'highlightDescription')(body))) && _react2.default.createElement(
@@ -400,9 +416,7 @@ var Dataflow = function Dataflow(_ref2) {
               'data-testid': 'dataflow-expand-button-test-id',
               'aria-label': 'expand',
               onClick: function onClick() {
-                return setExpand(function (prev) {
-                  return !prev;
-                });
+                return handleExpand();
               },
               color: 'primary',
               size: 'small'

package/package.json

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