From 4bceaae687e573d1b1b22bfdcd5c7c73f26de2aa Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Fri, 24 Feb 2023 14:41:42 +0000
Subject: [PATCH] testing stlists

---
 packages/app/src/pages/stlist/index.jsx | 82 +++++++++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 packages/app/src/pages/stlist/index.jsx

diff --git a/packages/app/src/pages/stlist/index.jsx b/packages/app/src/pages/stlist/index.jsx
new file mode 100644
index 00000000..4f471f48
--- /dev/null
+++ b/packages/app/src/pages/stlist/index.jsx
@@ -0,0 +1,82 @@
+import React from "react"
+import * as antd from "antd"
+import { TransitionMotion, spring, presets } from "react-motion"
+
+import "./index.less"
+
+export default (props) => {
+    const [data, setData] = React.useState([])
+
+    const enterRandom = () => {
+        setData(data.concat({
+            key: Math.random(),
+            data: {
+                text: `Entry ${data.length + 1}`,
+            }
+        }))
+    }
+
+    const getDefaultStyles = () => {
+        return data.map((todo) => ({
+            ...todo,
+            style: { height: 0, opacity: 1 }
+        }))
+    }
+
+    const getStyles = () => {
+        return data.map((todo, i) => {
+            console.log(todo, i)
+            return {
+                ...todo,
+                style: {
+                    height: spring(60, presets.gentle),
+                    opacity: spring(1, presets.gentle),
+                }
+            }
+        })
+    }
+
+    const willEnter = () => {
+        return {
+            height: 0,
+            opacity: 1,
+        }
+    }
+
+    const willLeave = () => {
+        return {
+            height: spring(0),
+            opacity: spring(0),
+        }
+    }
+
+    return <div class="list">
+        <antd.Button
+            type="primary"
+            onClick={enterRandom}
+        >
+            Add new
+        </antd.Button>
+        <TransitionMotion
+            defaultStyles={getDefaultStyles()}
+            styles={getStyles()}
+            willLeave={willLeave}
+            willEnter={willEnter}
+        >
+            {(styles) => {
+                return <ul className="ullist">
+                    {
+                        styles.map(({ key, style, data }) =>
+                            <li
+                                key={key}
+                                style={style}
+                            >
+                                <h1>{data.text}</h1>
+                            </li>
+                        )
+                    }
+                </ul>
+            }}
+        </TransitionMotion>
+    </div>
+}
\ No newline at end of file