Added better param and return foldout animations

Author: Kariaro

package.json

@@ -12,6 +12,7 @@
     "@testing-library/user-event": "^12.1.10",
     "node-sass": "4.14.1",
     "react": "^17.0.2",
+    "react-animate-height": "^2.0.23",
     "react-copy-to-clipboard": "^5.0.3",
     "react-device-detect": "^2.1.2",
     "react-dom": "^17.0.2",

src/components/viewer/Editor.module.scss

@@ -51,8 +51,8 @@
 	&_folding {
 		overflow: hidden;
 		& * {
-			opacity: 0;
-			height: 0px;
+			user-select: none;
+			pointer-events: none;
 		}
 
 		&::before {

src/components/viewer/drawers/FunctionView.js

@@ -4,15 +4,21 @@ import overview from './../Overview.module.scss';
 import functionStyle from './../Function.module.scss';
 import editor from './../Editor.module.scss';
 
-import FunctionRender from './FunctionRender'
+import FunctionRender from './FunctionRender';
+import AnimateHeight from 'react-animate-height';
 
 // TODO: Maybe tint function boxes depending on the sandbox
 
 class FunctionView extends React.Component {
 	constructor(props) {
 		super(props);
 		let data = props.data;
-		this.state = {data: props.data, menu: false};
+		this.state = {
+			data: props.data,
+			menu: false,
+			paramFoldout: false,
+			returnFoldout: false
+		};
 		this.id = `${data.namespace}_${data.name}_${data.isLocal}`;
 		this.onSandboxChanged = this.onSandboxChanged.bind(this);
 		this.onDescriptionChange = this.onDescriptionChange.bind(this);
@@ -21,7 +27,12 @@ class FunctionView extends React.Component {
 	}
 
 	componentWillReceiveProps(nextProps) {
-		this.setState({data: nextProps.data, menu: false});
+		this.setState({
+			data: nextProps.data,
+			menu: false,
+			paramFoldout: false,
+			returnFoldout: false
+		});
 	}
 
 	onSandboxChanged(event) {
@@ -118,7 +129,7 @@ class FunctionView extends React.Component {
 	}
 
 	refresh() {
-		this.setState({data: this.state.data, menu: true});
+		this.setState({data: this.state.data});
 	}
 
 	createSandboxSelection() {
@@ -267,9 +278,18 @@ class FunctionView extends React.Component {
 		let descriptionEditor = this.createDescriptionEditor();
 		let returnParamEditor = this.createReturnParams();
 
-		let folding = (event) => {
+		let isParamFoldout = this.state.paramFoldout;
+		let isReturnFoldout = this.state.returnFoldout;
+
+		let foldingParam = (event) => {
+			if(event.currentTarget === event.target) {
+				this.setState({paramFoldout: !isParamFoldout});
+			}
+		};
+
+		let foldingReturn = (event) => {
 			if(event.currentTarget === event.target) {
-				event.currentTarget.classList.toggle(`${editor.Param_folding}`);
+				this.setState({returnFoldout: !isReturnFoldout});
 			}
 		};
 
@@ -279,13 +299,17 @@ class FunctionView extends React.Component {
 					Sandbox:
 					{sandboxSelection}
 				</div>
-				<div className={`${editor.Param_label} ${editor.Param_folding}`} onClick={folding}>
+				<div className={`${editor.Param_label} ${isParamFoldout ? '':editor.Param_folding}`} onClick={foldingParam}>
 					Params:
-					{paramsEditor}
+					<AnimateHeight duration={300} height={isParamFoldout ? 'auto':0}>
+						{paramsEditor}
+					</AnimateHeight>
 				</div>
-				<div className={`${editor.Param_label} ${editor.Param_folding}`} onClick={folding}>
+				<div className={`${editor.Param_label} ${isReturnFoldout ? '':editor.Param_folding}`} onClick={foldingReturn}>
 					Return:
-					{returnParamEditor}
+					<AnimateHeight duration={300} height={isReturnFoldout ? 'auto':0}>
+						{returnParamEditor}
+					</AnimateHeight>
 				</div>
 				<div className={`${editor.Param_label_single}`}>
 					Description:

yarn.lock

@@ -3442,6 +3442,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.5:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 clean-css@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -9577,6 +9582,15 @@ prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+prop-types@^15.6.1:
+  version "15.8.0"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.0.tgz#d237e624c45a9846e469f5f31117f970017ff588"
+  integrity sha512-fDGekdaHh65eI3lMi5OnErU6a8Ighg2KjcjQxO7m8VHyWjcPyj5kiOgV1LQDOOOgVy3+5FgjXvdSSX7B8/5/4g==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 property-information@^5.0.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69"
@@ -9744,6 +9758,14 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+react-animate-height@^2.0.23:
+  version "2.0.23"
+  resolved "https://registry.yarnpkg.com/react-animate-height/-/react-animate-height-2.0.23.tgz#2e14ac707b20ae67b87766ccfd581e693e0e7ec7"
+  integrity sha512-DucSC/1QuxWEFzR9IsHMzrf2nrcZ6qAmLIFoENa2kLK7h72XybcMA9o073z7aHccFzdMEW0/fhAdnQG7a4rDow==
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.6.1"
+
 react-app-polyfill@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-2.0.0.tgz#a0bea50f078b8a082970a9d853dc34b6dcc6a3cf"
@@ -9820,7 +9842,7 @@ react-ga@^3.3.0:
   resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.3.0.tgz#c91f407198adcb3b49e2bc5c12b3fe460039b3ca"
   integrity sha512-o8RScHj6Lb8cwy3GMrVH6NJvL+y0zpJvKtc0+wmH7Bt23rszJmnqEQxRbyrqUzk9DTJIHoP42bfO5rswC9SWBQ==
 
-react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==