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

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 }) => (
+            <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'>
+          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 }) => (
+            <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'>
+          Custom mode keeps the active slide centered while scaling neighbors.
+        </text>
+      </view>
     </view>
   )
 }

package/CustomTinder/index.tsx

@@ -85,8 +85,8 @@ function SwiperEntry() {
           overflow: 'visible',
         }}
       >
-        {({ index, realIndex }) => (
-          <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
+        {({ index }) => (
+          <SwiperItem>
             <view
               class='block-view'
               style={{

package/CustomTinder/styles.css

@@ -11,7 +11,7 @@
   background: linear-gradient(
     0deg,
     var(--gradient-a),
-    var(--gradient-b),
+    var(--gradient-b)
   );
   align-items: center;
 }

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

@@ -53,12 +53,12 @@ function SwiperEntry(): JSX.Element {
             alignItems: 'end',
           }}
         >
-          {({ index, realIndex }) => (
-            <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
+          {({ index }) => (
+            <SwiperItem>
               <Card
-                index={realIndex}
+                index={index}
                 style={{
-                  height: `${itemHeights[realIndex % itemHeights.length]}px`,
+                  height: `${itemHeights[index % itemHeights.length]}px`,
                 }}
               />
             </SwiperItem>

package/DifferentHeight/styles.css

@@ -23,7 +23,7 @@
   background: linear-gradient(
     0deg,
     var(--gradient-a),
-    var(--gradient-b),
+    var(--gradient-b)
   );
   padding-top: 96px;
   flex-direction: column;

package/Direction/index.tsx

@@ -6,118 +6,110 @@ 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,
+}: {
+  index: number
+}) {
+  return (
+    <SwiperItem>
+      <Card
+        index={index}
+        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>
   )
 }