diff --git a/package.json b/package.json
index 6b3eaaa..707a780 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
},
"dependencies": {
"react-redux": "^7.1.3",
+ "react-transition-group": "^4.3.0",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8"
},
@@ -38,6 +39,7 @@
"@types/react": "^16.3.13",
"@types/react-dom": "^16.0.5",
"@types/react-redux": "^7.1.7",
+ "@types/react-transition-group": "^4.2.3",
"babel-core": "^6.26.3",
"babel-runtime": "^6.26.0",
"cross-env": "^5.1.4",
diff --git a/src/components/ASTOutline/ASTOutline.css b/src/components/ASTOutline/ASTOutline.css
index e69de29..b67085a 100644
--- a/src/components/ASTOutline/ASTOutline.css
+++ b/src/components/ASTOutline/ASTOutline.css
@@ -0,0 +1,25 @@
+.enter {
+ opacity: 0.5;
+ transform: translateX(200px);
+ background-color: lightgreen;
+}
+.enter.enterActive {
+ opacity: 1;
+ transform: translateX(0);
+ transition: 1s all;
+}
+.enterDone {
+ background-color: lightgreen;
+}
+.exit {
+ opacity: 1;
+ transform: translateX(0);
+ background-color: pink;
+}
+.exit.exitActive {
+ opacity: 0.5;
+ transform: translateX(200px);
+ transition: 1s all;
+}
+.exitDone {
+}
diff --git a/src/components/ASTOutline/ASTOutline.tsx b/src/components/ASTOutline/ASTOutline.tsx
index 07524fd..e4cf276 100644
--- a/src/components/ASTOutline/ASTOutline.tsx
+++ b/src/components/ASTOutline/ASTOutline.tsx
@@ -1,10 +1,13 @@
import React from "react";
import { connect } from "react-redux";
import * as ts from "typescript";
+import { CSSTransition, TransitionGroup } from "react-transition-group";
import { AppState } from "../../store";
import { forEachChild, syntaxKindNameMapping, ObjectHash } from "../../utils";
+import styles from "./ASTOutline.css";
+
interface ASTOutlineProps {
node?: ts.Node;
sourceFile?: ts.SourceFile;
@@ -18,20 +21,31 @@ function ASTOutline(props: ASTOutlineProps) {
const output = (
<>
-
{syntaxKindNameMapping[node.kind]}
-
- {forEachChild(node).map(childNode => (
-
- ))}
-
+
+ {syntaxKindNameMapping[node.kind]}
+
+
+ {forEachChild(node).map(childNode => (
+
+
+
+ ))}
+
+
+
>
);
if (ts.isSourceFile(node)) {
- return ;
+ return (
+
+ );
} else {
return output;
}
diff --git a/yarn.lock b/yarn.lock
index e11553f..c402b59 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -741,7 +741,7 @@
"@babel/plugin-transform-react-jsx-self" "^7.8.3"
"@babel/plugin-transform-react-jsx-source" "^7.8.3"
-"@babel/runtime@^7.5.5":
+"@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.3.tgz#0811944f73a6c926bb2ad35e918dcc1bfab279f1"
integrity sha512-fVHx1rzEmwB130VTkLnxR+HmxcTjGzH12LYQcFFoBwakMd3aOMD4OsRN7tGG/UOYE2ektgFrS8uACAoRk1CY0w==
@@ -861,6 +861,13 @@
hoist-non-react-statics "^3.3.0"
redux "^4.0.0"
+"@types/react-transition-group@^4.2.3":
+ version "4.2.3"
+ resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.2.3.tgz#4924133f7268694058e415bf7aea2d4c21131470"
+ integrity sha512-Hk8jiuT7iLOHrcjKP/ZVSyCNXK73wJAUz60xm0mVhiRujrdiI++j4duLiL282VGxwAgxetHQFfqA29LgEeSkFA==
+ dependencies:
+ "@types/react" "*"
+
"@types/react@*", "@types/react@^16.3.13":
version "16.9.17"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.17.tgz#58f0cc0e9ec2425d1441dd7b623421a867aa253e"
@@ -3171,7 +3178,7 @@ cssstyle@^2.0.0:
dependencies:
cssom "~0.3.6"
-csstype@^2.2.0:
+csstype@^2.2.0, csstype@^2.6.7:
version "2.6.8"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.8.tgz#0fb6fc2417ffd2816a418c9336da74d7f07db431"
integrity sha512-msVS9qTuMT5zwAGCVm4mxfrZ18BNc6Csd0oJAtiFMZ1FAx1CCvy2+5MDmYoix63LM/6NDbNtodCiGYGmFgO0dA==
@@ -3434,6 +3441,14 @@ dom-converter@^0.2:
dependencies:
utila "~0.4"
+dom-helpers@^5.0.1:
+ version "5.1.3"
+ resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.3.tgz#7233248eb3a2d1f74aafca31e52c5299cc8ce821"
+ integrity sha512-nZD1OtwfWGRBWlpANxacBEZrEuLa16o1nh7YopFWeoF68Zt8GGEmzHu6Xv4F3XaFIC+YXtTLrzgqKxFgLEe4jw==
+ dependencies:
+ "@babel/runtime" "^7.6.3"
+ csstype "^2.6.7"
+
dom-serializer@0:
version "0.2.2"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -7766,7 +7781,7 @@ promise@8.0.1:
dependencies:
asap "~2.0.3"
-prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8027,6 +8042,16 @@ react-scripts-ts@^3.1.0:
optionalDependencies:
fsevents "^1.1.3"
+react-transition-group@^4.3.0:
+ version "4.3.0"
+ resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683"
+ integrity sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==
+ dependencies:
+ "@babel/runtime" "^7.5.5"
+ dom-helpers "^5.0.1"
+ loose-envify "^1.4.0"
+ prop-types "^15.6.2"
+
read-pkg-up@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"