@lynx-example/refresh 0.0.0 → 0.6.9

package/LICENSE

@@ -1,4 +1,3 @@
-
                                  Apache License
                            Version 2.0, January 2004
                         http://www.apache.org/licenses/

package/lynx.config.mjs

@@ -0,0 +1,30 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { pluginQRCode } from "@lynx-js/qrcode-rsbuild-plugin";
+import { pluginReactLynx } from "@lynx-js/react-rsbuild-plugin";
+import { defineConfig } from "@lynx-js/rspeedy";
+import { pluginSass } from "@rsbuild/plugin-sass";
+import { pluginTypeCheck } from "@rsbuild/plugin-type-check";
+
+export default defineConfig({
+  source: {
+    entry: {
+      base: "./src/base/index.tsx",
+    },
+  },
+  plugins: [
+    pluginReactLynx(),
+    pluginSass(),
+    pluginQRCode(),
+    pluginTypeCheck(),
+  ],
+  output: {
+    assetPrefix: "https://lynxjs.org/lynx-examples/refresh/dist",
+    filename: "[name].[platform].bundle",
+  },
+  environments: {
+    lynx: {},
+  },
+});

package/package.json

@@ -1,9 +1,35 @@
 {
   "name": "@lynx-example/refresh",
-  "version": "0.0.0",
+  "version": "0.6.9",
   "description": "An example shows how to use `<refresh>` in Lynx",
-  "keywords": [],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lynx-family/lynx-examples.git",
+    "directory": "examples/refresh"
+  },
   "license": "Apache-2.0",
+  "author": "Lynx Authors",
   "type": "module",
-  "main": "index.js"
-}
+  "files": [
+    "dist/",
+    "src/",
+    "lynx.config.mjs"
+  ],
+  "dependencies": {
+    "@lynx-js/react": "0.115.3"
+  },
+  "devDependencies": {
+    "@lynx-js/qrcode-rsbuild-plugin": "0.4.3",
+    "@lynx-js/react-rsbuild-plugin": "0.12.4",
+    "@lynx-js/rspeedy": "0.12.5",
+    "@lynx-js/types": "3.6.0",
+    "@rsbuild/plugin-sass": "1.4.0",
+    "@types/react": "^18.3.25",
+    "typescript": "~5.9.3"
+  },
+  "scripts": {
+    "build": "rspeedy build",
+    "dev": "rspeedy dev",
+    "preview": "rspeedy preview"
+  }
+}

package/src/base/index.tsx

@@ -0,0 +1,81 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { root, useRef, useState } from "@lynx-js/react";
+import type { NodesRef } from "@lynx-js/types";
+
+const App = () => {
+  const refreshViewRef = useRef<NodesRef>(null);
+  const [refreshCount, setRefreshCount] = useState<number>(0);
+  const [items, setItems] = useState<number[]>([0, 1, 2, 4, 5, 6, 7, 8]);
+  const onStartRefresh = () => {
+    console.log("on start refresh");
+    setTimeout(() => {
+      refreshViewRef.current?.invoke({
+        method: "finishRefresh",
+      }).exec();
+      setItems([0, 1, 2, 4, 5, 6, 7, 8]);
+      setRefreshCount(refreshCount + 1);
+    }, 1000);
+  };
+
+  return (
+    <view
+      style={{
+        width: "100%",
+        height: "100%",
+        flexDirection: "column",
+        backgroundColor: "white",
+      }}
+    >
+      {
+        // @ts-expect-error type error
+
+
+          <refresh ref={refreshViewRef} style={{ width: "100%", height: "100%" }} bindstartrefresh={onStartRefresh}>
+            <refresh-header
+              style={{
+                width: "100%",
+                height: "50px",
+                position: "absolute",
+                justifyContent: "center",
+                alignItems: "center",
+                backgroundColor: "red",
+              }}
+            >
+              <text style={{ fontSize: "30px" }}>Refreshing...</text>
+            </refresh-header>
+            <list style={{ width: "100%", height: "100%" }} scroll-orientation="vertical" bounces={true}>
+              {items.map((item, index) => {
+                return (
+                  <list-item key={item + ""} item-key={item + ""}>
+                    <text
+                      style={{
+                        "height": "200px",
+                        width: "100%",
+                        fontSize: "100px",
+                        color: refreshCount % 2 === 0 ? "red" : "green",
+                        padding: "25px",
+                        textAlign: "center",
+                        border: "1px solid black",
+                      }}
+                    >
+                      {`item-${index}`}
+                    </text>
+                  </list-item>
+                );
+              })}
+            </list>
+          </refresh>
+
+      }
+    </view>
+  );
+};
+
+root.render(<App />);
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept();
+}

package/index.js

@@ -1 +0,0 @@
-export {}