clxx 2.1.2 → 2.1.4

package/test/src/scrollview/index.css

@@ -0,0 +1,10 @@
+.ScrollView {
+  height: 400px;
+  background-color: #f4f5f6;
+  padding: 0 0.1rem;
+  border: 1px solid #000;
+  .content {
+    height: 500px;
+    background-image: linear-gradient(to top, #fff, green);
+  }
+}

package/test/src/scrollview/index.jsx

@@ -0,0 +1,52 @@
+import "./index.css";
+import React, { useRef, useState } from "react";
+import { ScrollView } from "@";
+
+export default function Index() {
+  const [list, setList] = useState([1]);
+  const isLoading = useRef(false);
+  const [showLoading, setShowLoading] = useState(true);
+
+  const loadMore = async () => {
+    if (!showLoading) return;
+
+    isLoading.current = true;
+    return new Promise((resolve) => {
+      window.setTimeout(() => {
+        const num = list.length + 1;
+        list.push(num);
+        setList([...list]);
+        resolve();
+        isLoading.current = false;
+        if (num > 5) {
+          setShowLoading(false);
+        }
+      }, 800);
+    });
+  };
+
+  return (
+    <div className="ScrollView">
+      <ScrollView
+        onReachTop={(e) => {
+          console.log("reachTop", e);
+        }}
+        onReachBottom={(e) => {
+          console.log("reachBottom", e);
+          if (!isLoading.current) {
+            loadMore();
+          }
+        }}
+        showLoading={showLoading}
+      >
+        {list.map((item, index) => {
+          return (
+            <div className="content" key={index}>
+              {item}
+            </div>
+          );
+        })}
+      </ScrollView>
+    </div>
+  );
+}

package/test/src/toast/index.jsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { showToast, showUniqToast } from "@";
+
+export default function Index () {
+  return (
+    <div>
+      <p>toast内容为纯文本</p>
+      <button
+        onClick={() => {
+          showToast("一个简单的Toast轻提示");
+        }}
+      >
+        显示Toast，默认屏幕居中
+      </button>
+
+      <p>toast内容为可定制组件</p>
+      <button
+        onClick={() => {
+          showToast(
+            <div style={{ border: "1px solid red", background: "green" }}>
+              一个简单的<span style={{ color: "red" }}>Toast</span>轻提示
+            </div>
+          );
+        }}
+      >
+        显示Toast
+      </button>
+
+      <p>toast内容在顶部显示</p>
+      <button
+        onClick={() => {
+          showToast({
+            content: "抱歉，发生了很多错误",
+            position: "top",
+          });
+        }}
+      >
+        显示Toast
+      </button>
+
+      <p>toast内容在底部显示</p>
+      <button
+        onClick={() => {
+          showToast({
+            content: "一个简单的Toast轻提示Toast轻提示Toast轻提示Toast轻提示",
+            position: "bottom",
+          });
+        }}
+      >
+        显示Toast
+      </button>
+
+      <p>内容非常长的Toast</p>
+      <button
+        onClick={() => {
+          showToast(
+            "这是一个内容非常长的提示，你看看它的内容到底有多么的长，长度超出屏幕的宽度"
+          );
+        }}
+      >
+        显示Toast
+      </button>
+
+      <p>全局唯一的Toast</p>
+      <button
+        onClick={() => {
+          showUniqToast("全局唯一的Toast");
+        }}
+      >
+        显示Toast
+      </button>
+      <p>全局唯一的顶部Toast,永不消失</p>
+      <button
+        onClick={() => {
+          showUniqToast({
+            content: "全局唯一的Toast顶部",
+            position: "top",
+            duration: 10000000
+          });
+        }}
+      >
+        显示Toast
+      </button>
+    </div>
+  );
+}

package/test/vite.config.js

@@ -0,0 +1,15 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "../build/index"),
+      react: path.resolve(__dirname, "node_modules/react"),
+      "react-dom": path.resolve(__dirname, "node_modules/react-dom"),
+    },
+  },
+});