@lynx-example/viewpager 0.0.0 → 0.6.12

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/viewpager/dist",
+    filename: "[name].[platform].bundle",
+  },
+  environments: {
+    lynx: {},
+  },
+});

package/package.json

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

package/src/base/index.tsx

@@ -0,0 +1,68 @@
+// 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, useState } from "@lynx-js/react";
+
+const pages = [
+  { title: "Page 1", color: "#FBE2E1" },
+  { title: "Page 2", color: "#DCEEFF" },
+  { title: "Page 3", color: "#E5F7DF" },
+];
+
+const App = () => {
+  const [current, setCurrent] = useState<number>(0);
+
+  return (
+    <view
+      style={{
+        width: "100%",
+        height: "100%",
+        flexDirection: "column",
+        padding: "24px",
+        backgroundColor: "#FFFFFF",
+        boxSizing: "border-box",
+      }}
+    >
+      <text style={{ fontSize: "32px", fontWeight: "700", color: "#1F2329" }}>ViewPager Placeholder</text>
+      <text style={{ marginTop: "12px", fontSize: "24px", color: "#4E5969" }}>
+        {`Current page: ${current + 1}/${pages.length}`}
+      </text>
+      <view
+        style={{ marginTop: "24px", width: "100%", height: "50%", flex: 1, borderRadius: "24px", overflow: "hidden" }}
+      >
+        <viewpager
+          style={{ width: "100%", height: "100%", display: "flex", flexDirection: "row" }}
+          bindchange={(e) => {
+            setCurrent(e.detail.index);
+          }}
+        >
+          {pages.map((page) => {
+            return (
+              <viewpager-item style={{ width: "100%", height: "100%", flexShrink: 0 }}>
+                <view
+                  key={page.title}
+                  style={{
+                    width: "100%",
+                    height: "100%",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    backgroundColor: page.color,
+                  }}
+                >
+                  <text style={{ fontSize: "48px", fontWeight: "600", color: "#1F2329" }}>{page.title}</text>
+                </view>
+              </viewpager-item>
+            );
+          })}
+        </viewpager>
+      </view>
+    </view>
+  );
+};
+
+root.render(<App />);
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept();
+}

package/index.js

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