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

package/Common/Demo/styles.css

@@ -0,0 +1,113 @@
+@import "@lynx-js/luna-styles/index.css";
+
+.demo-container {
+  background-color: var(--canvas);
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.demo-scroll-container {
+  background-color: var(--canvas);
+  width: 100%;
+  height: 100%;
+}
+
+.expand {
+  flex: 1;
+}
+
+.top-area {
+  height: 54px;
+  width: 100%;
+}
+
+.content-area {
+  display: flex;
+  background: linear-gradient(
+    0deg,
+    var(--gradient-a),
+    var(--gradient-b)
+  );
+  padding-top: 96px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  row-gap: 24px;
+  padding-bottom: 12px;
+}
+
+.content-area--compact {
+  padding-top: 48px;
+}
+
+.operation {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  padding: 32px 16px;
+}
+
+.sub-operation {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0 16px 72px 16px;
+}
+
+.demo-status {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+  margin: 0 16px;
+  border-radius: 8px;
+  background-color: var(--neutral-ambient);
+}
+
+.demo-status-text {
+  color: var(--content-muted);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.demo-section {
+  padding: 0 16px 32px;
+}
+
+.demo-section-title {
+  color: var(--content);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+  margin-bottom: 8px;
+}
+
+.demo-section-description {
+  color: var(--content-muted);
+  font-size: 12px;
+  line-height: 16px;
+  margin-bottom: 16px;
+}
+
+.bounce-item {
+  display: flex;
+  height: 100%;
+  width: 72px;
+  align-items: center;
+  justify-content: center;
+  border-width: 1px;
+  border-color: var(--line);
+  border-radius: 8px;
+  background-color: var(--neutral-ambient);
+}
+
+.bounce-item-text {
+  color: var(--content-muted);
+  font-size: 12px;
+  line-height: 16px;
+  text-align: center;
+}

package/Custom/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]
 
 function customAnimation(value: number, _index: number) {
   'main thread'
@@ -36,48 +39,47 @@ 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={250}
-        duration={500}
-        initialIndex={0}
-        mode='normal'
-        modeConfig={{
-          align: 'center',
-        }}
-        main-thread:customAnimation={customAnimation}
-        customAnimationFirstScreen={customAnimationFirstScreen}
-      >
-        {({ item, index, realIndex }) => (
-          <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
-            <view
-              class='block-view'
-              style={{
-                width: '100%',
-                height: '250px',
-                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={250}
+          duration={500}
+          initialIndex={0}
+          mode='normal'
+          modeConfig={{
+            align: 'center',
+          }}
+          onChange={setCurrentIndex}
+          main-thread:customAnimation={customAnimation}
+          customAnimationFirstScreen={customAnimationFirstScreen}
+          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>
+              />
+            </SwiperItem>
+          )}
+        </Swiper>
+        <Indicator current={currentIndex} count={itemArr.length} />
+      </view>
+      <view className='demo-status'>
+        <text className='demo-status-text'>
+          Custom animation scales each slide around the active item.
+        </text>
+      </view>
     </view>
   )
 }

package/CustomScale/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
 
@@ -64,49 +67,48 @@ 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',
-        }}
-        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',
+          }}
+          onChange={setCurrentIndex}
+          main-thread:customAnimation={customAnimation}
+          customAnimationFirstScreen={customAnimationFirstScreen}
+          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>
+              />
+            </SwiperItem>
+          )}
+        </Swiper>
+        <Indicator current={currentIndex} count={itemArr.length} />
+      </view>
+      <view className='demo-status'>
+        <text className='demo-status-text'>
+          Custom mode keeps the active slide centered while scaling neighbors.
+        </text>
+      </view>
     </view>
   )
 }

package/DifferentHeight/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/Direction/index.tsx

@@ -6,118 +6,112 @@ import { root } from '@lynx-js/react'
 
 import { Swiper, SwiperItem } from '@lynx-js/lynx-ui'
 
-import './styles.css'
+import { Card } from '../Common/Card'
 
-const colorsArr: string[] = ['red', 'green', 'yellow', 'purple']
+import '../Common/Demo/styles.css'
+
+const itemArr: number[] = [1, 2, 3, 4]
+
+function renderCard({
+  index,
+  realIndex,
+}: {
+  index: number
+  realIndex: number
+}) {
+  return (
+    <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
+      <Card
+        index={realIndex}
+        style={{
+          height: '200px',
+        }}
+      />
+    </SwiperItem>
+  )
+}
 
 function SwiperEntry() {
   return (
-    <scroll-view scroll-y style='height: 230px'>
-      <view>
-        <text>Test Swiper in scroll-view</text>
+    <scroll-view
+      className='demo-scroll-container lunaris-dark'
+      scroll-orientation='vertical'
+    >
+      <view className='top-area' />
+      <view className='demo-section'>
+        <text className='demo-section-title'>Horizontal Swipe Only</text>
+        <text className='demo-section-description'>
+          Swiper stays horizontal while the parent scroll-view moves vertically.
+        </text>
       </view>
-      <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;'>
-              <text>12345</text>
-            </view>
-          ),
-          onEndBounceItemBounce: ({ type }) => {
-            console.log('onBounce result', type)
-          },
-        }}
-        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
-                style={{
-                  backgroundColor: 'white',
-                  width: '4px',
-                  height: '4px',
-                }}
-              >
+      <view className='content-area content-area--compact'>
+        <Swiper
+          data={itemArr}
+          itemWidth={250}
+          itemHeight={200}
+          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'>End</text>
               </view>
-            </view>
-            <text class='image-text'>Number.{index}</text>
-          </SwiperItem>
-        )}
-      </Swiper>
-      <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;'>
-              <text>12345</text>
-            </view>
-          ),
-          onEndBounceItemBounce: ({ type }) => {
-            console.log('onBounce result', type)
-          },
-        }}
-        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
-                style={{
-                  backgroundColor: 'white',
-                  width: '4px',
-                  height: '4px',
-                }}
-              >
+            ),
+            onEndBounceItemBounce: ({ type }) => {
+              console.log('onBounce result', type)
+            },
+          }}
+          experimentalHorizontalSwipeOnly={true}
+          style={{
+            overflow: 'visible',
+          }}
+        >
+          {renderCard}
+        </Swiper>
+        <Swiper
+          data={itemArr}
+          itemWidth={250}
+          itemHeight={200}
+          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'>End</text>
               </view>
-            </view>
-            <text class='image-text'>Number.{index}</text>
-          </SwiperItem>
-        )}
-      </Swiper>
+            ),
+            onEndBounceItemBounce: ({ type }) => {
+              console.log('onBounce result', type)
+            },
+          }}
+          experimentalHorizontalSwipeOnly={true}
+          style={{
+            overflow: 'visible',
+          }}
+        >
+          {renderCard}
+        </Swiper>
+      </view>
     </scroll-view>
   )
 }

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]
@@ -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;
 }