feat: 添加skeleton组件

README.md

@@ -128,12 +128,12 @@ Button[完成]
 Icon[完成]
 
 Progress[完成]
-Skeleton
+Skeleton[完成]
 CountDown
 Tag
 Sticky[完成]
 Rate[完成]
-Search
+Search[完成]
 NavBar[完成]
 Tab
 TabBar

packages/vantui-demo/src/pages/index/index.tsx

@@ -15,6 +15,7 @@ import {
   Loading,
   Rate,
   Search,
+  Skeleton,
 } from '@antmjs/vantui'
 
 import './index.less'
@@ -51,6 +52,9 @@ export default function Index() {
         <Icon name="chat" size={40} info="9" />
         <Icon name="chat" size={40} info="99+" />
       </View>
+      <View>
+        <Skeleton title avatar row={3} />
+      </View>
       <View>
         <Search
           onSearch={(v) => {

packages/vantui/src/components/skeleton/index.tsx

@@ -0,0 +1,90 @@
+import Taro from '@tarojs/taro'
+import { useState, useEffect } from 'react'
+import { View } from '@tarojs/components'
+import * as utils from '../wxs/utils'
+import { SkeletonProps } from '../../../types/skeleton'
+
+export default function Index(props: SkeletonProps) {
+  const [state, setState] = useState({
+    isArray: false,
+    rowArray: [],
+  })
+  const { isArray, rowArray } = state
+  const {
+    row = 0,
+    animate = true,
+    avatar,
+    avatarShape = 'round',
+    avatarSize = Taro.pxTransform(64),
+    titleWidth = '40%',
+    title,
+    rowWidth = '100%',
+    loading = true,
+    children,
+    style,
+    className,
+    ...others
+  } = props
+
+  useEffect(
+    function () {
+      setState((pre: any) => {
+        return { ...pre, rowArray: Array.from({ length: row }) }
+      })
+    },
+    [row],
+  )
+
+  useEffect(
+    function () {
+      setState((pre: any) => {
+        return { ...pre, isArray: (rowWidth as any) instanceof Array }
+      })
+    },
+    [rowWidth],
+  )
+
+  return loading ? (
+    <View
+      className={
+        'custom-class ' +
+        utils.bem('skeleton', [
+          {
+            animate,
+          },
+        ]) +
+        ` ${className}`
+      }
+      style={style}
+      {...others}
+    >
+      {avatar && (
+        <View
+          className={
+            'avatar-class ' + utils.bem('skeleton__avatar', [avatarShape])
+          }
+          style={'width:' + avatarSize + ';height:' + avatarSize}
+        ></View>
+      )}
+      <View className={utils.bem('skeleton__content')}>
+        {title && (
+          <View
+            className={'title-class ' + utils.bem('skeleton__title')}
+            style={'width:' + titleWidth}
+          ></View>
+        )}
+        {rowArray.map((_item, index) => {
+          return (
+            <View
+              key={index}
+              className={'row-class ' + utils.bem('skeleton__row')}
+              style={'width:' + (isArray ? rowWidth[index] : rowWidth)}
+            ></View>
+          )
+        })}
+      </View>
+    </View>
+  ) : (
+    <View className={utils.bem('skeleton__content')}>{children}</View>
+  )
+}

packages/vantui/src/index.ts

@@ -16,3 +16,4 @@ export { default as Loading } from './components/loading'
 export { default as Rate } from './components/rate'
 export { default as Cell } from './components/cell'
 export { default as Search } from './components/search'
+export { default as Skeleton } from './components/skeleton'

packages/vantui/types/index.d.ts

@@ -16,3 +16,4 @@ export { Row } from './row.d'
 export { Rate } from './rate.d'
 export { Cell } from './cell.d'
 export { Search } from './search.d'
+export { Skeleton } from './skeleton.d'

packages/vantui/types/skeleton.d.ts

@@ -0,0 +1,19 @@
+import { ComponentClass, ReactNode } from 'react'
+import { StandardProps } from '@tarojs/components'
+
+export interface SkeletonProps extends StandardProps {
+  row?: number
+  title?: boolean
+  avatar?: boolean
+  loading?: boolean
+  animate?: boolean
+  avatarSize?: string
+  avatarShape?: 'square' | 'round'
+  titleWidth?: string | string[]
+  rowWidth?: string
+  children?: ReactNode
+}
+
+declare const Skeleton: ComponentClass<SkeletonProps>
+
+export { Skeleton }