@lynx-example/lynx-ui-swiper 0.0.1 → 0.0.2

package/RTLCustom/index.tsx

@@ -0,0 +1,115 @@
+// Copyright 2026 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 } from '@lynx-js/react'
+
+import {
+  Swiper,
+  SwiperItem,
+  interpolate,
+  interpolateJS,
+} from '@lynx-js/lynx-ui'
+import type { SwiperRef } from '@lynx-js/lynx-ui'
+
+import './styles.css'
+
+const colorsArr: string[] = ['red', 'green', 'yellow', 'purple']
+
+const ITEM_WIDTH = 250
+
+function customAnimation(value: number, _index: number) {
+  'main thread'
+
+  const RTL = true
+  const sign = RTL ? -1 : 1
+
+  const scale = interpolate(value, [-1, 0, 1], [0.8, 1, 0.8])
+
+  const centerOffset = ((lynx.__globalProps.screenWidth
+    ?? SystemInfo.pixelWidth / SystemInfo.pixelRatio) - ITEM_WIDTH) / 2
+  const translateX = interpolate(value, [-1, 0, 1], [
+    -ITEM_WIDTH + centerOffset,
+    centerOffset,
+    ITEM_WIDTH + centerOffset,
+  ], 'extend')
+
+  return {
+    transform: `translateX(${sign * translateX}px) scale(${scale})`,
+    'transform-origin': 'center',
+  }
+}
+
+function customAnimationFirstScreen(value: number, _index: number) {
+  const RTL = true
+  const sign = RTL ? -1 : 1
+
+  const scale = interpolateJS(value, [-1, 0, 1], [0.8, 1, 0.8])
+
+  const centerOffset = ((lynx.__globalProps.screenWidth
+    ?? SystemInfo.pixelWidth / SystemInfo.pixelRatio) - ITEM_WIDTH) / 2
+  const translateX = interpolateJS(value, [-1, 0, 1], [
+    -ITEM_WIDTH + centerOffset,
+    centerOffset,
+    ITEM_WIDTH + centerOffset,
+  ], 'extend')
+
+  return {
+    transform: `translateX(${sign * translateX}px) scale(${scale})`,
+    'transform-origin': 'center',
+  }
+}
+
+function SwiperEntry(): JSX.Element {
+  const swiperRef = useRef<SwiperRef>(null)
+
+  return (
+    <view id='container'>
+      <Swiper
+        ref={swiperRef}
+        data={colorsArr}
+        itemWidth={ITEM_WIDTH}
+        itemHeight={200}
+        duration={500}
+        initialIndex={0}
+        mode='custom'
+        modeConfig={{
+          align: 'center',
+        }}
+        RTL={true}
+        main-thread:customAnimation={customAnimation}
+        customAnimationFirstScreen={customAnimationFirstScreen}
+      >
+        {({ item, index, realIndex }) => (
+          <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
+            <view
+              class='block-view'
+              style={{
+                width: '100%',
+                height: '100%',
+                backgroundColor: item,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <view
+                style={{
+                  backgroundColor: 'white',
+                  width: '4px',
+                  height: '4px',
+                }}
+              >
+              </view>
+            </view>
+            <text class='image-text'>Number.{index}</text>
+          </SwiperItem>
+        )}
+      </Swiper>
+    </view>
+  )
+}
+
+root.render(<SwiperEntry />)
+
+export default SwiperEntry

package/RTLCustom/styles.css

@@ -0,0 +1,41 @@
+.image {
+  width: 100%;
+  height: 100%;
+}
+
+.image-text {
+  position: absolute;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+}
+
+.title-container {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.title-text {
+  font-size: 16px;
+}
+
+.button {
+  border: 1px solid;
+  border-radius: 4px;
+  width: 150px;
+  background-color: red;
+  margin: 4px 8px;
+  padding: 4px 8px;
+}
+
+.button-text {
+  color: white;
+}
+
+.operation {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}

package/RTLLoop/Button.tsx

@@ -0,0 +1,33 @@
+// Copyright 2026 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 './styles.css'
+import { Button as ButtonInner } from '@lynx-js/lynx-ui'
+
+const ButtonStyle = {
+  border: '1px solid',
+  'border-radius': '4px',
+  width: '150px',
+  'background-color': 'red',
+  margin: '4px 8px',
+  padding: '4px 8px',
+}
+
+const ButtonTextStyle = {
+  color: 'white',
+}
+
+export function Button(props: {
+  onClick: () => void
+  text: string
+}) {
+  return (
+    <ButtonInner
+      style={ButtonStyle}
+      onClick={props.onClick}
+    >
+      <text style={ButtonTextStyle}>{props.text}</text>
+    </ButtonInner>
+  )
+}

package/RTLLoop/index.tsx

@@ -0,0 +1,116 @@
+// Copyright 2026 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 { Swiper, SwiperItem } from '@lynx-js/lynx-ui'
+import type { SwiperRef } from '@lynx-js/lynx-ui'
+
+import './styles.css'
+
+import { Button } from './Button'
+
+const colorsArr: string[] = [
+  'red',
+  'green',
+  'yellow',
+  'purple',
+  'lightblue',
+  'lightgreen',
+  'lightyellow',
+]
+
+const itemWidths = [250, 350, 400]
+const alignArr: ['start', 'center', 'end'] = ['start', 'center', 'end']
+
+function SwiperEntry(): JSX.Element {
+  const [itemWidthsIndex, setItemWidthsIndex] = useState<number>(0)
+  const [alignIndex, setAlignIndex] = useState<number>(0)
+  const [currentIndex, setCurrentIndex] = useState<number>(0)
+  const swiperRef = useRef<SwiperRef>(null)
+
+  return (
+    <view id='container'>
+      <Swiper
+        ref={swiperRef}
+        data={colorsArr}
+        itemWidth={itemWidths[itemWidthsIndex] ?? 0}
+        itemHeight={200}
+        duration={500}
+        initialIndex={0}
+        onChange={setCurrentIndex}
+        mode='normal'
+        modeConfig={{
+          align: alignArr[alignIndex] ?? 'start',
+          spaceBetween: 8,
+        }}
+        RTL={true}
+        loop={true}
+      >
+        {({ item, index, realIndex }) => (
+          <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
+            <view
+              class='block-view'
+              style={{
+                width: '100%',
+                height: '100%',
+                backgroundColor: item,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <view
+                style={{
+                  backgroundColor: 'white',
+                  width: '4px',
+                  height: '4px',
+                }}
+              >
+              </view>
+            </view>
+            <text class='image-text'>Number.{index}</text>
+          </SwiperItem>
+        )}
+      </Swiper>
+      <view class='operation'>
+        <view class='block'>
+          <text>Current Index: {currentIndex}</text>
+        </view>
+        <Button
+          onClick={() => {
+            swiperRef.current?.swipePrev()
+          }}
+          text='SwipePrev'
+        >
+        </Button>
+        <Button
+          onClick={() => {
+            swiperRef.current?.swipeNext()
+          }}
+          text='SwipeNext'
+        >
+        </Button>
+        <Button
+          onClick={() => {
+            setItemWidthsIndex(prev => (prev + 1) % itemWidths.length)
+          }}
+          text={`itemWidth: ${itemWidths[itemWidthsIndex]}`}
+        >
+        </Button>
+        <Button
+          onClick={() => {
+            setAlignIndex(prev => (prev + 1) % itemWidths.length)
+          }}
+          text={`alignType: ${alignArr[alignIndex]}`}
+        >
+        </Button>
+      </view>
+    </view>
+  )
+}
+
+root.render(<SwiperEntry />)
+
+export default SwiperEntry

package/RTLLoop/styles.css

@@ -0,0 +1,41 @@
+.image {
+  width: 100%;
+  height: 100%;
+}
+
+.image-text {
+  position: absolute;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+}
+
+.title-container {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.title-text {
+  font-size: 16px;
+}
+
+.button {
+  border: 1px solid;
+  border-radius: 4px;
+  width: 150px;
+  background-color: red;
+  margin: 4px 8px;
+  padding: 4px 8px;
+}
+
+.button-text {
+  color: white;
+}
+
+.operation {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}

package/RTLLoopLynxRTL/Button.tsx

@@ -0,0 +1,33 @@
+// Copyright 2026 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 './styles.css'
+import { Button as ButtonInner } from '@lynx-js/lynx-ui'
+
+const ButtonStyle = {
+  border: '1px solid',
+  'border-radius': '4px',
+  width: '150px',
+  'background-color': 'red',
+  margin: '4px 8px',
+  padding: '4px 8px',
+}
+
+const ButtonTextStyle = {
+  color: 'white',
+}
+
+export function Button(props: {
+  onClick: () => void
+  text: string
+}) {
+  return (
+    <ButtonInner
+      style={ButtonStyle}
+      onClick={props.onClick}
+    >
+      <text style={ButtonTextStyle}>{props.text}</text>
+    </ButtonInner>
+  )
+}

package/RTLLoopLynxRTL/index.tsx

@@ -0,0 +1,116 @@
+// Copyright 2026 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 { Swiper, SwiperItem } from '@lynx-js/lynx-ui'
+import type { SwiperRef } from '@lynx-js/lynx-ui'
+
+import './styles.css'
+
+import { Button } from './Button'
+
+const colorsArr: string[] = [
+  'red',
+  'green',
+  'yellow',
+  'purple',
+  'lightblue',
+  'lightgreen',
+  'lightyellow',
+]
+
+const itemWidths = [250, 350, 400]
+const alignArr: ['start', 'center', 'end'] = ['start', 'center', 'end']
+
+function SwiperEntry(): JSX.Element {
+  const [itemWidthsIndex, setItemWidthsIndex] = useState<number>(0)
+  const [alignIndex, setAlignIndex] = useState<number>(0)
+  const [currentIndex, setCurrentIndex] = useState<number>(0)
+  const swiperRef = useRef<SwiperRef>(null)
+
+  return (
+    <view id='container'>
+      <Swiper
+        ref={swiperRef}
+        data={colorsArr}
+        itemWidth={itemWidths[itemWidthsIndex] ?? 0}
+        itemHeight={200}
+        duration={500}
+        initialIndex={0}
+        onChange={setCurrentIndex}
+        mode='normal'
+        modeConfig={{
+          align: alignArr[alignIndex] ?? 'start',
+          spaceBetween: 8,
+        }}
+        RTL={'lynx-rtl'}
+        loop={true}
+      >
+        {({ item, index, realIndex }) => (
+          <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
+            <view
+              class='block-view'
+              style={{
+                width: '100%',
+                height: '100%',
+                backgroundColor: item,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <view
+                style={{
+                  backgroundColor: 'white',
+                  width: '4px',
+                  height: '4px',
+                }}
+              >
+              </view>
+            </view>
+            <text class='image-text'>Number.{index}</text>
+          </SwiperItem>
+        )}
+      </Swiper>
+      <view class='operation'>
+        <view class='block'>
+          <text>Current Index: {currentIndex}</text>
+        </view>
+        <Button
+          onClick={() => {
+            swiperRef.current?.swipePrev()
+          }}
+          text='SwipePrev'
+        >
+        </Button>
+        <Button
+          onClick={() => {
+            swiperRef.current?.swipeNext()
+          }}
+          text='SwipeNext'
+        >
+        </Button>
+        <Button
+          onClick={() => {
+            setItemWidthsIndex(prev => (prev + 1) % itemWidths.length)
+          }}
+          text={`itemWidth: ${itemWidths[itemWidthsIndex]}`}
+        >
+        </Button>
+        <Button
+          onClick={() => {
+            setAlignIndex(prev => (prev + 1) % itemWidths.length)
+          }}
+          text={`alignType: ${alignArr[alignIndex]}`}
+        >
+        </Button>
+      </view>
+    </view>
+  )
+}
+
+root.render(<SwiperEntry />)
+
+export default SwiperEntry

package/RTLLoopLynxRTL/styles.css

@@ -0,0 +1,41 @@
+.image {
+  width: 100%;
+  height: 100%;
+}
+
+.image-text {
+  position: absolute;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+}
+
+.title-container {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.title-text {
+  font-size: 16px;
+}
+
+.button {
+  border: 1px solid;
+  border-radius: 4px;
+  width: 150px;
+  background-color: red;
+  margin: 4px 8px;
+  padding: 4px 8px;
+}
+
+.button-text {
+  color: white;
+}
+
+.operation {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}

package/WithGap/Button.tsx

@@ -0,0 +1,33 @@
+// Copyright 2026 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 './styles.css'
+import { Button as ButtonInner } from '@lynx-js/lynx-ui'
+
+const ButtonStyle = {
+  border: '1px solid',
+  'border-radius': '4px',
+  width: '150px',
+  'background-color': 'red',
+  margin: '4px 8px',
+  padding: '4px 8px',
+}
+
+const ButtonTextStyle = {
+  color: 'white',
+}
+
+export function Button(props: {
+  onClick: () => void
+  text: string
+}) {
+  return (
+    <ButtonInner
+      style={ButtonStyle}
+      onClick={props.onClick}
+    >
+      <text style={ButtonTextStyle}>{props.text}</text>
+    </ButtonInner>
+  )
+}

package/WithGap/index.tsx

@@ -0,0 +1,118 @@
+// Copyright 2026 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 { Swiper, SwiperItem } from '@lynx-js/lynx-ui'
+import type { SwiperRef } from '@lynx-js/lynx-ui'
+
+import './styles.css'
+
+import { Button } from './Button'
+
+const DEFAULT_COLORS_ARR: string[] = [
+  'red',
+  'green',
+  'yellow',
+  'purple',
+  'lightgreen',
+  'lightyellow',
+  'lightblue',
+  'gray',
+]
+
+const itemWidths = [250, 350, 400]
+const alignArr: ['start', 'center', 'end'] = ['start', 'center', 'end']
+
+function SwiperEntry(): JSX.Element {
+  const [itemWidthsIndex, setItemWidthsIndex] = useState<number>(0)
+  const [alignIndex, setAlignIndex] = useState<number>(0)
+  const [currentIndex, setCurrentIndex] = useState<number>(0)
+  const swiperRef = useRef<SwiperRef>(null)
+  const [colorsArr, _setColorsArr] = useState<string[]>(DEFAULT_COLORS_ARR)
+
+  return (
+    <view id='container'>
+      <Swiper
+        ref={swiperRef}
+        data={colorsArr}
+        itemWidth={itemWidths[itemWidthsIndex] ?? 0}
+        itemHeight={200}
+        duration={500}
+        initialIndex={0}
+        onChange={setCurrentIndex}
+        mode='normal'
+        loop={false}
+        autoPlay={true}
+        modeConfig={{
+          align: alignArr[alignIndex] ?? 'start',
+          spaceBetween: 10,
+        }}
+      >
+        {({ item, index, realIndex }) => (
+          <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
+            <view
+              class='block-view'
+              style={{
+                width: '100%',
+                height: '100%',
+                backgroundColor: item,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <view
+                style={{
+                  backgroundColor: 'white',
+                  width: '4px',
+                  height: '4px',
+                }}
+              >
+              </view>
+            </view>
+            <text class='image-text'>Number.{index}</text>
+          </SwiperItem>
+        )}
+      </Swiper>
+      <view class='operation'>
+        <view class='block'>
+          <text>Current Index: {currentIndex}</text>
+        </view>
+        <Button
+          onClick={() => {
+            swiperRef.current?.swipePrev()
+          }}
+          text='SwipePrev'
+        >
+        </Button>
+        <Button
+          onClick={() => {
+            swiperRef.current?.swipeNext()
+          }}
+          text='SwipeNext'
+        >
+        </Button>
+        <Button
+          onClick={() => {
+            setItemWidthsIndex(prev => (prev + 1) % itemWidths.length)
+          }}
+          text={`itemWidth: ${itemWidths[itemWidthsIndex]}`}
+        >
+        </Button>
+        <Button
+          onClick={() => {
+            setAlignIndex(prev => (prev + 1) % itemWidths.length)
+          }}
+          text={`alignType: ${alignArr[alignIndex]}`}
+        >
+        </Button>
+      </view>
+    </view>
+  )
+}
+
+root.render(<SwiperEntry />)
+
+export default SwiperEntry