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

package/EmptyDataBug/index.tsx

@@ -22,6 +22,7 @@ import type { SwiperRef } from '@lynx-js/lynx-ui'
 import { Button } from '../Common/Button'
 import { Card } from '../Common/Card'
 
+import '../Common/Demo/styles.css'
 import './styles.css'
 
 const DEFAULT_DATA: number[] = [1, 2, 3, 4, 5]
@@ -101,9 +102,9 @@ function EmptyDataWithAutoPlay(): JSX.Element {
         autoPlayInterval={2000}
         modeConfig={{ align: 'center' }}
       >
-        {({ index, realIndex }) => (
-          <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
-            <Card index={realIndex} style={{ height: '200px' }} />
+        {({ index }) => (
+          <SwiperItem>
+            <Card index={index} style={{ height: '200px' }} />
           </SwiperItem>
         )}
       </Swiper>
@@ -186,9 +187,9 @@ function EmptyDataWithManualSwipe(): JSX.Element {
         onSwipeStart={handleSwipeStart}
         onSwipeStop={handleSwipeStop}
       >
-        {({ index, realIndex }) => (
-          <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
-            <Card index={realIndex} style={{ height: '200px' }} />
+        {({ index }) => (
+          <SwiperItem>
+            <Card index={index} style={{ height: '200px' }} />
           </SwiperItem>
         )}
       </Swiper>
@@ -263,9 +264,9 @@ function DataBecomesEmpty(): JSX.Element {
         autoPlayInterval={3000}
         modeConfig={{ align: 'center' }}
       >
-        {({ index, realIndex }) => (
-          <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
-            <Card index={realIndex} style={{ height: '200px' }} />
+        {({ index }) => (
+          <SwiperItem>
+            <Card index={index} style={{ height: '200px' }} />
           </SwiperItem>
         )}
       </Swiper>
@@ -329,9 +330,9 @@ function ResetWithCorruptedIndex(): JSX.Element {
         autoPlay={false}
         modeConfig={{ align: 'center' }}
       >
-        {({ index, realIndex }) => (
-          <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
-            <Card index={realIndex} style={{ height: '200px' }} />
+        {({ index }) => (
+          <SwiperItem>
+            <Card index={index} style={{ height: '200px' }} />
           </SwiperItem>
         )}
       </Swiper>
@@ -352,7 +353,7 @@ function ResetWithCorruptedIndex(): JSX.Element {
 
 function EmptyDataBugExample(): JSX.Element {
   return (
-    <scroll-view class='container' scroll-orientation='vertical'>
+    <scroll-view class='container lunaris-dark' scroll-orientation='vertical'>
       <text class='main-title'>Empty Data Bug Reproduction</text>
       <text class='main-description'>
         These examples demonstrate the "calcBounceOffset: invalid offset" error

package/EmptyDataBug/styles.css

@@ -1,4 +1,7 @@
+@import "@lynx-js/luna-styles/index.css";
+
 .container {
+  background-color: var(--canvas);
   width: 100%;
   height: 100%;
   padding: 16px;
@@ -7,14 +10,14 @@
 
 .main-title {
   font-size: 24px;
-  font-weight: bold;
+  font-weight: 600;
   margin-bottom: 8px;
-  color: #333;
+  color: var(--content);
 }
 
 .main-description {
   font-size: 14px;
-  color: #666;
+  color: var(--content-muted);
   margin-bottom: 24px;
   line-height: 1.5;
 }
@@ -22,20 +25,22 @@
 .section {
   margin-bottom: 32px;
   padding: 16px;
-  background-color: #f5f5f5;
+  background-color: var(--neutral-ambient);
   border-radius: 8px;
+  border-width: 1px;
+  border-color: var(--line);
 }
 
 .title {
   font-size: 16px;
-  font-weight: bold;
+  font-weight: 600;
   margin-bottom: 8px;
-  color: #333;
+  color: var(--content);
 }
 
 .description {
   font-size: 12px;
-  color: #888;
+  color: var(--content-muted);
   margin-bottom: 16px;
   line-height: 1.4;
 }
@@ -53,23 +58,25 @@
   gap: 4px;
   margin-top: 12px;
   padding: 8px;
-  background-color: #e8e8e8;
+  background-color: var(--canvas);
   border-radius: 4px;
+  border-width: 1px;
+  border-color: var(--line);
 }
 
 .info text {
   font-size: 12px;
-  color: #666;
+  color: var(--content-muted);
 }
 
 .log-title {
-  font-weight: bold;
+  font-weight: 600;
   margin-top: 8px;
-  color: #333;
+  color: var(--content);
 }
 
 .log-item {
   font-size: 11px;
-  color: #888;
+  color: var(--content-subtle);
   padding-left: 8px;
 }

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 }) => (
+            <SwiperItem>
+              <Card
+                index={index}
+                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 }) => (
+            <SwiperItem>
+              <LazyComponent
+                scene='scene'
+                pid={`pid_${index}`}
+                estimatedStyle={{ width: '100%', height: '100%' }}
+              >
+                <Card
+                  index={index}
+                  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 }) => (
+            <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>
-        <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'