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

package/BasicDynamic/index.tsx

@@ -7,119 +7,111 @@ import { root, useEffect, 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 '../Common/Demo/styles.css'
 
-const DEFAULT_COLORS_ARR: string[] = [
-  'red',
-  'green',
-  'yellow',
-  'purple',
-  'lightgreen',
-  'lightyellow',
-  'lightblue',
-  'gray',
-]
+const DEFAULT_ITEM_ARR: number[] = [1, 2, 3, 4, 5, 6, 7, 8]
 
 const itemWidths = [250, 350, 400]
 const alignArr: ['start', 'center', 'end'] = ['start', 'center', 'end']
+const INITIAL_INDEX = 0
 
 function SwiperEntry(): JSX.Element {
   const [itemWidthsIndex, setItemWidthsIndex] = useState<number>(0)
-  const [alignIndex, setAlignIndex] = useState<number>(0)
-  const [currentIndex, setCurrentIndex] = useState<number>(0)
+  const [alignIndex, setAlignIndex] = useState<number>(1)
+  const [currentIndex, setCurrentIndex] = useState<number>(INITIAL_INDEX)
   const swiperRef = useRef<SwiperRef>(null)
-  const [colorsArr, setColorsArr] = useState<string[]>([])
+  const [itemArr, setItemArr] = useState<number[]>([])
 
   useEffect(() => {
     setTimeout(() => {
-      setColorsArr(DEFAULT_COLORS_ARR.slice(0, 4))
+      setItemArr(DEFAULT_ITEM_ARR.slice(0, 4))
     }, 1000)
   }, [])
 
   return (
-    <view id='container'>
-      <Swiper
-        ref={swiperRef}
-        data={colorsArr}
-        itemWidth={itemWidths[itemWidthsIndex] ?? 0}
-        itemHeight={200}
-        duration={500}
-        initialIndex={0}
-        onChange={setCurrentIndex}
-        mode='normal'
-        loop={true}
-        autoPlay={true}
-        modeConfig={{
-          align: alignArr[alignIndex] ?? 'start',
-        }}
-      >
-        {({ 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}
+          containerWidth={lynx.__globalProps.screenWidth - 32
+            || SystemInfo.pixelWidth / SystemInfo.pixelRatio - 32}
+          itemHeight={250}
+          duration={500}
+          initialIndex={INITIAL_INDEX}
+          onChange={setCurrentIndex}
+          mode='normal'
+          loop={true}
+          autoPlay={true}
+          modeConfig={{
+            align: alignArr[alignIndex] ?? 'center',
+            spaceBetween: 16,
+          }}
+          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 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]}`}
+        />
         <Button
           onClick={() => {
-            setColorsArr(prev => DEFAULT_COLORS_ARR.slice(0, prev.length + 1))
+            setItemArr(prev => DEFAULT_ITEM_ARR.slice(0, prev.length + 1))
           }}
-          text={`Add List Length, current: ${colorsArr.length}`}
-        >
-        </Button>
+          text='Add List Item'
+          subText={`Current Length: ${itemArr.length}`}
+        />
       </view>
     </view>
   )

package/BasicUpdateSize/index.tsx

@@ -7,120 +7,110 @@ import { root, useEffect, 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 '../Common/Demo/styles.css'
 
-const DEFAULT_COLORS_ARR: string[] = [
-  'red',
-  'green',
-  'yellow',
-  'purple',
-  'lightgreen',
-  'lightyellow',
-  'lightblue',
-  'gray',
-]
+const DEFAULT_ITEM_ARR: number[] = [1, 2, 3, 4, 5, 6, 7, 8]
 
 const itemWidths = [250, 350, 400]
 const alignArr: ['start', 'center', 'end'] = ['start', 'center', 'end']
+const INITIAL_INDEX = 0
 
 function SwiperEntry(): JSX.Element {
   const [itemWidthsIndex, setItemWidthsIndex] = useState<number>(0)
-  const [alignIndex, setAlignIndex] = useState<number>(0)
-  const [currentIndex, setCurrentIndex] = useState<number>(0)
+  const [alignIndex, setAlignIndex] = useState<number>(1)
+  const [currentIndex, setCurrentIndex] = useState<number>(INITIAL_INDEX)
   const swiperRef = useRef<SwiperRef>(null)
-  const [colorsArr, setColorsArr] = useState<string[]>([])
+  const [itemArr, setItemArr] = useState<number[]>([])
 
   useEffect(() => {
     setTimeout(() => {
-      setColorsArr(DEFAULT_COLORS_ARR.slice(0, 4))
+      setItemArr(DEFAULT_ITEM_ARR.slice(0, 4))
     }, 1000)
   }, [])
 
   return (
-    <view id='container'>
-      <Swiper
-        ref={swiperRef}
-        data={colorsArr}
-        itemWidth={itemWidths[itemWidthsIndex] ?? 0}
-        containerWidth={itemWidths[itemWidthsIndex] ?? 0}
-        itemHeight={200}
-        duration={500}
-        initialIndex={0}
-        onChange={setCurrentIndex}
-        mode='normal'
-        loop={true}
-        autoPlay={false}
-        modeConfig={{
-          align: alignArr[alignIndex] ?? 'start',
-        }}
-      >
-        {({ 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}
+          containerWidth={itemWidths[itemWidthsIndex] ?? 0}
+          itemHeight={250}
+          duration={500}
+          initialIndex={INITIAL_INDEX}
+          onChange={setCurrentIndex}
+          mode='normal'
+          loop={true}
+          autoPlay={false}
+          modeConfig={{
+            align: alignArr[alignIndex] ?? 'center',
+            spaceBetween: 16,
+          }}
+          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 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='Update Container Width'
+          subText={`Width: ${itemWidths[itemWidthsIndex]}`}
+        />
         <Button
           onClick={() => {
             setAlignIndex(prev => (prev + 1) % itemWidths.length)
           }}
-          text={`alignType: ${alignArr[alignIndex]}`}
-        >
-        </Button>
+          text='Change Align Type'
+          subText={`AlignType: ${alignArr[alignIndex]}`}
+        />
         <Button
           onClick={() => {
-            setColorsArr(prev => DEFAULT_COLORS_ARR.slice(0, prev.length + 1))
+            setItemArr(prev => DEFAULT_ITEM_ARR.slice(0, prev.length + 1))
           }}
-          text={`Add List Length, current: ${colorsArr.length}`}
-        >
-        </Button>
+          text='Add List Item'
+          subText={`Current Length: ${itemArr.length}`}
+        />
       </view>
     </view>
   )

package/Bounces/index.tsx

@@ -2,69 +2,85 @@
 // 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 { Card } from '../Common/Card'
+import { Indicator } from '../Common/Indicator'
+
+import '../Common/Demo/styles.css'
 import './styles.css'
 
-const colorsArr: string[] = ['red', 'green', 'yellow', 'purple']
+const itemArr: number[] = [1, 2, 3, 4]
+const CONTAINER_PADDING = 32
+const BOUNCE_WIDTH = 96
+const ITEM_GAP = 16
+const ITEM_HEIGHT = 220
+
+const getScreenWidth = () =>
+  lynx.__globalProps.screenWidth
+  || SystemInfo.pixelWidth / SystemInfo.pixelRatio
 
 function SwiperEntry() {
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const containerWidth = getScreenWidth() - CONTAINER_PADDING
+  const itemWidth = Math.min(300, containerWidth - 48)
+
   return (
-    <Swiper
-      data={colorsArr}
-      itemWidth={250}
-      loop={false}
-      duration={500}
-      initialIndex={0}
-      mode='normal'
-      modeConfig={{
-        align: 'start',
-      }}
-      bounceConfig={{
-        enable: true,
-        startBounceItemWidth: 0,
-        endBounceItemWidth: 100,
-        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)
-        },
-      }}
-      onChange={(index) => {
-        console.log('onChange', index)
-      }}
-    >
-      {({ 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 bounces-content-area'>
+        <Swiper
+          data={itemArr}
+          itemWidth={itemWidth}
+          itemHeight={ITEM_HEIGHT}
+          containerWidth={containerWidth}
+          loop={false}
+          duration={500}
+          initialIndex={2}
+          mode='normal'
+          modeConfig={{
+            align: 'start',
+            spaceBetween: ITEM_GAP,
+          }}
+          style={{
+            overflow: 'hidden',
+          }}
+          bounceConfig={{
+            enable: true,
+            startBounceItemWidth: 0,
+            endBounceItemWidth: BOUNCE_WIDTH,
+            endBounceItem: (
+              <view className='bounce-loading'>
+                <view className='bounce-loading-dot bounce-loading-dot--first' />
+                <view className='bounce-loading-dot bounce-loading-dot--second' />
+                <view className='bounce-loading-dot bounce-loading-dot--third' />
+              </view>
+            ),
+            onEndBounceItemBounce: ({ type }) => {
+              console.log('onBounce result', type)
+            },
+          }}
+          onChange={setCurrentIndex}
+        >
+          {({ index, realIndex }) => (
+            <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
+              <Card
+                index={realIndex}
+                style={{
+                  height: `${ITEM_HEIGHT}px`,
+                }}
+              />
+            </SwiperItem>
+          )}
+        </Swiper>
+        <Indicator
+          current={currentIndex}
+          count={itemArr.length}
+        />
+      </view>
+    </view>
   )
 }
 

package/Bounces/styles.css

@@ -1,41 +1,50 @@
-.image {
-  width: 100%;
-  height: 100%;
-}
+@import "@lynx-js/luna-styles/index.css";
 
-.image-text {
-  position: absolute;
+.bounces-content-area {
+  padding-top: 80px;
+  padding-bottom: 36px;
 }
 
-.container {
-  width: 100%;
+.bounce-loading {
+  display: flex;
+  width: 96px;
   height: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  padding-left: 18px;
 }
 
-.title-container {
-  margin-top: 10px;
-  margin-bottom: 5px;
+.bounce-loading-dot {
+  width: 8px;
+  height: 8px;
+  margin-right: 6px;
+  border-radius: 50%;
+  background-color: var(--gradient-content);
+  animation: bounce-loading-pulse 900ms ease-in-out infinite;
 }
 
-.title-text {
-  font-size: 16px;
+.bounce-loading-dot--second {
+  animation-delay: 150ms;
 }
 
-.button {
-  border: 1px solid;
-  border-radius: 4px;
-  width: 150px;
-  background-color: red;
-  margin: 4px 8px;
-  padding: 4px 8px;
+.bounce-loading-dot--third {
+  animation-delay: 300ms;
 }
 
-.button-text {
-  color: white;
-}
+@keyframes bounce-loading-pulse {
+  0% {
+    opacity: 0.3;
+    transform: scale(0.75);
+  }
 
-.operation {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 0.3;
+    transform: scale(0.75);
+  }
 }

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @lynx-example/lynx-ui-swiper
 
+## 0.0.5
+
+### Patch Changes
+
+- Update swiper examples to match luna theme ([#150](https://github.com/lynx-family/lynx-ui/pull/150))
+
+- Updated dependencies []:
+  - @lynx-js/lynx-ui@3.131.1
+
+## 0.0.4
+
+### Patch Changes
+
+- Updated dependencies [[`c476c26`](https://github.com/lynx-family/lynx-ui/commit/c476c268e42c5116745c1c5be96556714532bdab), [`1778e64`](https://github.com/lynx-family/lynx-ui/commit/1778e644dc0910766d86c1422237c1341e8c726c)]:
+  - @lynx-js/lynx-ui@3.131.0
+
 ## 0.0.3
 
 ### Patch Changes