@lynx-example/lynx-ui-swiper 0.0.3 → 0.0.5

package/Indicator/index.tsx

@@ -2,63 +2,69 @@
 // 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 } from '@lynx-js/react'
+import { root, useState } from '@lynx-js/react'
 
 import { Swiper, SwiperItem } 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]
 
 function SwiperEntry() {
+  const [currentIndex, setCurrentIndex] = useState(0)
+
   return (
-    <Swiper
-      data={colorsArr}
-      itemWidth={375}
-      itemHeight={200}
-      loop={false}
-      duration={500}
-      initialIndex={0}
-      mode='normal'
-      bounceConfig={{
-        enable: true,
-        startBounceItemWidth: 100,
-        startBounceItem: (
-          <view>
-            <text>123</text>
-          </view>
-        ),
-      }}
-      onChange={i => {
-        console.log('change', i)
-      }}
-    >
-      {({ 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 className='demo-container lunaris-dark'>
+      <view className='top-area' />
+      <view className='content-area'>
+        <Swiper
+          data={itemArr}
+          itemWidth={300}
+          itemHeight={250}
+          containerWidth={lynx.__globalProps.screenWidth - 32
+            || SystemInfo.pixelWidth / SystemInfo.pixelRatio - 32}
+          loop={false}
+          duration={500}
+          initialIndex={0}
+          mode='normal'
+          modeConfig={{
+            align: 'center',
+            spaceBetween: 16,
+          }}
+          bounceConfig={{
+            enable: true,
+            startBounceItemWidth: 100,
+            startBounceItem: (
+              <view className='bounce-item'>
+                <text className='bounce-item-text'>Start</text>
+              </view>
+            ),
+          }}
+          onChange={setCurrentIndex}
+          style={{
+            overflow: 'visible',
+          }}
+        >
+          {({ index, realIndex }) => (
+            <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
+              <Card
+                index={realIndex}
+                style={{
+                  height: '250px',
+                }}
+              />
+            </SwiperItem>
+          )}
+        </Swiper>
+        <Indicator
+          current={currentIndex}
+          count={itemArr.length}
+        />
+      </view>
+    </view>
   )
 }
 

package/Lazy/index.tsx

@@ -2,79 +2,83 @@
 // 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 } from '@lynx-js/react'
+import { root, useState } from '@lynx-js/react'
 
 import { LazyComponent, Swiper, SwiperItem } 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',
-  'lightblue',
-  'lightgreen',
-  'lightyellow',
-]
+import '../Common/Demo/styles.css'
+
+const itemArr: number[] = [1, 2, 3, 4, 5, 6, 7]
 
 function SwiperEntry() {
+  const [currentIndex, setCurrentIndex] = useState(0)
+
   return (
-    <Swiper
-      data={colorsArr}
-      itemWidth={250}
-      itemHeight={200}
-      loop={false}
-      duration={500}
-      initialIndex={0}
-      mode='normal'
-      modeConfig={{
-        align: 'start',
-      }}
-      bounceConfig={{
-        enable: true,
-        startBounceItemWidth: 0,
-        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}>
-          <LazyComponent
-            scene='scene'
-            pid={`pid_${realIndex}`}
-            estimatedStyle={{ width: '100%', height: '100%' }}
-          >
-            <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 className='demo-container lunaris-dark'>
+      <view className='top-area' />
+      <view className='content-area'>
+        <Swiper
+          data={itemArr}
+          itemWidth={250}
+          itemHeight={250}
+          containerWidth={lynx.__globalProps.screenWidth - 32
+            || SystemInfo.pixelWidth / SystemInfo.pixelRatio - 32}
+          loop={false}
+          duration={500}
+          initialIndex={0}
+          mode='normal'
+          modeConfig={{
+            align: 'start',
+            spaceBetween: 16,
+          }}
+          bounceConfig={{
+            enable: true,
+            startBounceItemWidth: 0,
+            endBounceItem: (
+              <view className='bounce-item'>
+                <text className='bounce-item-text'>Show More</text>
               </view>
-            </view>
-          </LazyComponent>
-        </SwiperItem>
-      )}
-    </Swiper>
+            ),
+            onEndBounceItemBounce: ({ type }) => {
+              console.log('onBounce result', type)
+            },
+          }}
+          onChange={setCurrentIndex}
+          style={{
+            overflow: 'visible',
+          }}
+        >
+          {({ index, realIndex }) => (
+            <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
+              <LazyComponent
+                scene='scene'
+                pid={`pid_${realIndex}`}
+                estimatedStyle={{ width: '100%', height: '100%' }}
+              >
+                <Card
+                  index={realIndex}
+                  style={{
+                    height: '250px',
+                  }}
+                />
+              </LazyComponent>
+            </SwiperItem>
+          )}
+        </Swiper>
+        <Indicator
+          current={currentIndex}
+          count={itemArr.length}
+        />
+      </view>
+      <view className='demo-status'>
+        <text className='demo-status-text'>
+          Each slide body is mounted through LazyComponent.
+        </text>
+      </view>
+    </view>
   )
 }
 

package/Loop/index.tsx

@@ -6,9 +6,12 @@ import { root, useState } from '@lynx-js/react'
 
 import { Swiper, SwiperItem } 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]
 
 function SwiperEntry() {
   const [currentIndex, setCurrentIndex] = useState(0)
@@ -25,48 +28,48 @@ function SwiperEntry() {
     containWidth,
   )
   return (
-    <view>
-      <Swiper
-        data={colorsArr}
-        itemWidth={itemWidth + SwiperItemGap}
-        itemHeight={219.92727272727276}
-        containerWidth={containWidth}
-        loop={true}
-        duration={500}
-        initialIndex={0}
-        mode='normal'
-        autoPlay={true}
-        onChange={setCurrentIndex}
-        experimentalHorizontalSwipeOnly={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
+          data={itemArr}
+          itemWidth={itemWidth + SwiperItemGap}
+          itemHeight={250}
+          containerWidth={containWidth}
+          loop={true}
+          duration={500}
+          initialIndex={0}
+          mode='normal'
+          modeConfig={{
+            spaceBetween: SwiperItemGap,
+          }}
+          autoPlay={true}
+          onChange={setCurrentIndex}
+          experimentalHorizontalSwipeOnly={true}
+          style={{
+            overflow: 'visible',
+          }}
+        >
+          {({ index, realIndex }) => (
+            <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
+              <Card
+                index={realIndex}
                 style={{
-                  backgroundColor: 'white',
-                  width: '4px',
-                  height: '4px',
+                  height: '250px',
                 }}
-              >
-              </view>
-            </view>
-            <text class='image-text'>Number.{index}</text>
-          </SwiperItem>
-        )}
-      </Swiper>
-      <view>
-        <text>currentIndex: {currentIndex}</text>
+              />
+            </SwiperItem>
+          )}
+        </Swiper>
+        <Indicator
+          current={currentIndex}
+          count={itemArr.length}
+        />
+      </view>
+      <view className='demo-status'>
+        <text className='demo-status-text'>
+          Loop mode keeps autoplay continuous across the boundary.
+        </text>
       </view>
     </view>
   )

package/RTL/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/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, realIndex }) => (
+            <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
+              <Card
+                index={realIndex}
                 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>
   )