@lynx-example/lynx-ui-swiper 0.0.4 → 0.0.6

package/RTL/index.tsx

@@ -7,19 +7,13 @@ 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 '../Common/Button'
+import { Card } from '../Common/Card'
+import { Indicator } from '../Common/Indicator'
 
-import { Button } from './Button'
+import '../Common/Demo/styles.css'
 
-const colorsArr: string[] = [
-  'red',
-  'green',
-  'yellow',
-  'purple',
-  'lightblue',
-  'lightgreen',
-  'lightyellow',
-]
+const itemArr: number[] = [1, 2, 3, 4, 5, 6, 7]
 
 const itemWidths = [250, 350, 400]
 const alignArr: ['start', 'center', 'end'] = ['start', 'center', 'end']
@@ -31,98 +25,95 @@ function SwiperEntry(): JSX.Element {
   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}
-        bounceConfig={{
-          enable: true,
-          startBounceItemWidth: 100,
-          endBounceItemWidth: 100,
-          startBounceItem: (
-            <view style='display: linear; linear-orientation: vertical; height: 100%; width: 30px; border: 1px solid #000;'>
-              <text style='color: #000'>Start Show More</text>
-            </view>
-          ),
-          endBounceItem: (
-            <view style='display: linear; linear-orientation: vertical; height: 100%; width: 30px; border: 1px solid #000;'>
-              <text style='color: #000'>Show More</text>
-            </view>
-          ),
-          onEndBounceItemBounce: ({ type }) => {
-            console.log('onBounce result', type)
-          },
-        }}
-      >
-        {({ 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
+    <view className='demo-container lunaris-dark'>
+      <view className='top-area' />
+      <view className='content-area'>
+        <Swiper
+          ref={swiperRef}
+          data={itemArr}
+          itemWidth={itemWidths[itemWidthsIndex] ?? 0}
+          itemHeight={250}
+          containerWidth={lynx.__globalProps.screenWidth - 32
+            || SystemInfo.pixelWidth / SystemInfo.pixelRatio - 32}
+          duration={500}
+          initialIndex={0}
+          onChange={setCurrentIndex}
+          mode='normal'
+          modeConfig={{
+            align: alignArr[alignIndex] ?? 'start',
+            spaceBetween: 16,
+          }}
+          RTL={true}
+          style={{
+            overflow: 'visible',
+          }}
+          bounceConfig={{
+            enable: true,
+            startBounceItemWidth: 100,
+            endBounceItemWidth: 100,
+            startBounceItem: (
+              <view className='bounce-item'>
+                <text className='bounce-item-text'>Start</text>
+              </view>
+            ),
+            endBounceItem: (
+              <view className='bounce-item'>
+                <text className='bounce-item-text'>End</text>
+              </view>
+            ),
+            onEndBounceItemBounce: ({ type }) => {
+              console.log('onBounce result', type)
+            },
+          }}
+        >
+          {({ index }) => (
+            <SwiperItem>
+              <Card
+                index={index}
                 style={{
-                  backgroundColor: 'white',
-                  width: '4px',
-                  height: '4px',
+                  height: '250px',
                 }}
-              >
-              </view>
-            </view>
-            <text class='image-text'>Number.{index}</text>
-          </SwiperItem>
-        )}
-      </Swiper>
-      <view class='operation'>
-        <view class='block'>
-          <text>Current Index: {currentIndex}</text>
-        </view>
+              />
+            </SwiperItem>
+          )}
+        </Swiper>
+        <Indicator
+          current={currentIndex}
+          count={itemArr.length}
+        />
+      </view>
+      <view className='operation'>
         <Button
           onClick={() => {
             swiperRef.current?.swipePrev()
           }}
+          className='expand'
           text='SwipePrev'
-        >
-        </Button>
+        />
         <Button
           onClick={() => {
             swiperRef.current?.swipeNext()
           }}
+          className='expand'
+          type='primary'
           text='SwipeNext'
-        >
-        </Button>
+        />
+      </view>
+      <view className='sub-operation'>
         <Button
           onClick={() => {
             setItemWidthsIndex(prev => (prev + 1) % itemWidths.length)
           }}
-          text={`itemWidth: ${itemWidths[itemWidthsIndex]}`}
-        >
-        </Button>
+          text='Change Item Width'
+          subText={`ItemWidth: ${itemWidths[itemWidthsIndex]}`}
+        />
         <Button
           onClick={() => {
             setAlignIndex(prev => (prev + 1) % itemWidths.length)
           }}
-          text={`alignType: ${alignArr[alignIndex]}`}
-        >
-        </Button>
+          text='Change Align Type'
+          subText={`AlignType: ${alignArr[alignIndex]}`}
+        />
       </view>
     </view>
   )

package/RTLCustom/index.tsx

@@ -2,7 +2,7 @@
 // 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 { root, useRef, useState } from '@lynx-js/react'
 
 import {
   Swiper,
@@ -12,9 +12,12 @@ import {
 } from '@lynx-js/lynx-ui'
 import type { SwiperRef } from '@lynx-js/lynx-ui'
 
-import './styles.css'
+import { Card } from '../Common/Card'
+import { Indicator } from '../Common/Indicator'
 
-const colorsArr: string[] = ['red', 'green', 'yellow', 'purple']
+import '../Common/Demo/styles.css'
+
+const itemArr: number[] = [1, 2, 3, 4, 5]
 
 const ITEM_WIDTH = 250
 
@@ -62,50 +65,49 @@ function customAnimationFirstScreen(value: number, _index: number) {
 
 function SwiperEntry(): JSX.Element {
   const swiperRef = useRef<SwiperRef>(null)
+  const [currentIndex, setCurrentIndex] = useState(0)
 
   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
+    <view className='demo-container lunaris-dark'>
+      <view className='top-area' />
+      <view className='content-area'>
+        <Swiper
+          ref={swiperRef}
+          data={itemArr}
+          itemWidth={ITEM_WIDTH}
+          itemHeight={250}
+          duration={500}
+          initialIndex={0}
+          mode='custom'
+          modeConfig={{
+            align: 'center',
+          }}
+          RTL={true}
+          onChange={setCurrentIndex}
+          main-thread:customAnimation={customAnimation}
+          customAnimationFirstScreen={customAnimationFirstScreen}
+          style={{
+            overflow: 'visible',
+          }}
+        >
+          {({ index }) => (
+            <SwiperItem>
+              <Card
+                index={index}
                 style={{
-                  backgroundColor: 'white',
-                  width: '4px',
-                  height: '4px',
+                  height: '250px',
                 }}
-              >
-              </view>
-            </view>
-            <text class='image-text'>Number.{index}</text>
-          </SwiperItem>
-        )}
-      </Swiper>
+              />
+            </SwiperItem>
+          )}
+        </Swiper>
+        <Indicator current={currentIndex} count={itemArr.length} />
+      </view>
+      <view className='demo-status'>
+        <text className='demo-status-text'>
+          RTL custom mode mirrors the same centered scale animation.
+        </text>
+      </view>
     </view>
   )
 }

package/RTLLoop/Button.tsx

@@ -2,32 +2,4 @@
 // 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>
-  )
-}
+export { Button } from '../Common/Button'

package/RTLLoop/index.tsx

@@ -7,19 +7,13 @@ 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 '../Common/Button'
+import { Card } from '../Common/Card'
+import { Indicator } from '../Common/Indicator'
 
-import { Button } from './Button'
+import '../Common/Demo/styles.css'
 
-const colorsArr: string[] = [
-  'red',
-  'green',
-  'yellow',
-  'purple',
-  'lightblue',
-  'lightgreen',
-  'lightyellow',
-]
+const itemArr: number[] = [1, 2, 3, 4, 5, 6, 7]
 
 const itemWidths = [250, 350, 400]
 const alignArr: ['start', 'center', 'end'] = ['start', 'center', 'end']
@@ -31,81 +25,78 @@ function SwiperEntry(): JSX.Element {
   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
+    <view className='demo-container lunaris-dark'>
+      <view className='top-area' />
+      <view className='content-area'>
+        <Swiper
+          ref={swiperRef}
+          data={itemArr}
+          itemWidth={itemWidths[itemWidthsIndex] ?? 0}
+          itemHeight={250}
+          containerWidth={lynx.__globalProps.screenWidth - 32
+            || SystemInfo.pixelWidth / SystemInfo.pixelRatio - 32}
+          duration={500}
+          initialIndex={0}
+          onChange={setCurrentIndex}
+          mode='normal'
+          modeConfig={{
+            align: alignArr[alignIndex] ?? 'start',
+            spaceBetween: 16,
+          }}
+          RTL={true}
+          loop={true}
+          style={{
+            overflow: 'visible',
+          }}
+        >
+          {({ index }) => (
+            <SwiperItem>
+              <Card
+                index={index}
                 style={{
-                  backgroundColor: 'white',
-                  width: '4px',
-                  height: '4px',
+                  height: '250px',
                 }}
-              >
-              </view>
-            </view>
-            <text class='image-text'>Number.{index}</text>
-          </SwiperItem>
-        )}
-      </Swiper>
-      <view class='operation'>
-        <view class='block'>
-          <text>Current Index: {currentIndex}</text>
-        </view>
+              />
+            </SwiperItem>
+          )}
+        </Swiper>
+        <Indicator
+          current={currentIndex}
+          count={itemArr.length}
+        />
+      </view>
+      <view className='operation'>
         <Button
           onClick={() => {
             swiperRef.current?.swipePrev()
           }}
+          className='expand'
           text='SwipePrev'
-        >
-        </Button>
+        />
         <Button
           onClick={() => {
             swiperRef.current?.swipeNext()
           }}
+          className='expand'
+          type='primary'
           text='SwipeNext'
-        >
-        </Button>
+        />
+      </view>
+      <view className='sub-operation'>
         <Button
           onClick={() => {
             setItemWidthsIndex(prev => (prev + 1) % itemWidths.length)
           }}
-          text={`itemWidth: ${itemWidths[itemWidthsIndex]}`}
-        >
-        </Button>
+          text='Change Item Width'
+          subText={`ItemWidth: ${itemWidths[itemWidthsIndex]}`}
+        />
         <Button
           onClick={() => {
             setAlignIndex(prev => (prev + 1) % itemWidths.length)
           }}
-          text={`alignType: ${alignArr[alignIndex]}`}
-        >
-        </Button>
+          text='Change Align Type'
+          subText={`AlignType: ${alignArr[alignIndex]}`}
+        />
       </view>
     </view>
   )

package/RTLLoopLynxRTL/Button.tsx

@@ -2,32 +2,4 @@
 // 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>
-  )
-}
+export { Button } from '../Common/Button'