feat(skeleton): v15

src/config.json

@@ -1013,7 +1013,7 @@
           "sort": 15,
           "show": true,
           "taro": true,
-          "v15": 2,
+          "v15": 1,
           "author": "swag~jun",
           "dd": true
         },

src/packages/skeleton/__test__/skeleton.spec.tsx

@@ -6,19 +6,13 @@ import { Skeleton } from '../skeleton'
 
 test('should allow to disable animation', () => {
   const { container } = render(<Skeleton rows={1} animated={false} />)
-  expect(container.querySelector('.skeleton-animation')).toBeFalsy()
+  expect(container.querySelector('.nut-skeleton-animation')).toBeFalsy()
 })
 
-test('should change avatar size when using avatarSize prop', () => {
-  const { container } = render(<Skeleton avatar avatarSize="20px" />)
-  expect(container.querySelector('.nut-avatar')).toHaveStyle({
-    width: '20px',
-    height: '20px',
+test('should set duration', () => {
+  const { container } = render(<Skeleton rows={1} duration={2} />)
+  const animation = container.querySelector('.nut-skeleton-animated')
+  expect(animation).toHaveStyle({
+    animationDuration: '2s',
   })
-  expect(container).toMatchSnapshot()
-})
-
-test('should change avatar shape when using avatarShape prop', () => {
-  const { container } = render(<Skeleton avatar avatarShape="square" />)
-  expect(container.querySelector('.nut-avatar')).toMatchSnapshot()
 })

src/packages/skeleton/demo.taro.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
 import { ScrollView, View } from '@tarojs/components'
-import './demo.scss'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
@@ -13,25 +12,25 @@ import Demo5 from './demos/taro/demo5'
 const SkeletonDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
-      '84aa6bce': '基础用法',
-      ea3bc18a: '传入多行',
-      '02a53df5': '显示头像',
-      '0a001122': '标题段落圆角风格',
+      '84aa6bce': '标题',
+      ea3bc18a: '正文',
+      '02a53df5': '模拟头像',
+      '0a001122': '标题段落',
       '07d62d5c': '显示子组件',
     },
     'zh-TW': {
-      '84aa6bce': '基礎用法',
-      ea3bc18a: '傳入多行',
-      '02a53df5': '顯示頭像',
-      '0a001122': '標題段落圓角風格',
-      '07d62d5c': '圖片組合',
+      '84aa6bce': '标题',
+      ea3bc18a: '正文',
+      '02a53df5': '模拟头像',
+      '0a001122': '標題段落',
+      '07d62d5c': '显示子组件',
     },
     'en-US': {
-      '84aa6bce': 'Basic usage',
-      ea3bc18a: 'Pass in multiple lines',
-      '02a53df5': 'show avatar',
-      '0a001122': 'Heading Paragraph Rounded Corner Style',
-      '07d62d5c': 'show subcomponents',
+      '84aa6bce': 'Title',
+      ea3bc18a: 'Paragraph',
+      '02a53df5': 'Mock Avatar',
+      '0a001122': 'Heading Paragraph',
+      '07d62d5c': 'Show Subcomponents',
     },
   })
 

src/packages/skeleton/demo.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { useTranslate } from '@/sites/assets/locale'
-import './demo.scss'
 import Demo1 from './demos/h5/demo1'
 import Demo2 from './demos/h5/demo2'
 import Demo3 from './demos/h5/demo3'
@@ -10,25 +9,25 @@ import Demo5 from './demos/h5/demo5'
 const SkeletonDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
-      '84aa6bce': '基础用法',
-      ea3bc18a: '传入多行',
-      '02a53df5': '显示头像',
-      '0a001122': '标题段落圆角风格',
+      '84aa6bce': '标题',
+      ea3bc18a: '正文',
+      '02a53df5': '模拟头像',
+      '0a001122': '标题段落',
       '07d62d5c': '显示子组件',
     },
     'zh-TW': {
-      '84aa6bce': '基礎用法',
-      ea3bc18a: '傳入多行',
-      '02a53df5': '顯示頭像',
-      '0a001122': '標題段落圓角風格',
-      '07d62d5c': '圖片組合',
+      '84aa6bce': '标题',
+      ea3bc18a: '正文',
+      '02a53df5': '模拟头像',
+      '0a001122': '標題段落',
+      '07d62d5c': '显示子组件',
     },
     'en-US': {
-      '84aa6bce': 'Basic usage',
-      ea3bc18a: 'Pass in multiple lines',
-      '02a53df5': 'show avatar',
-      '0a001122': 'Heading Paragraph Rounded Corner Style',
-      '07d62d5c': 'show subcomponents',
+      '84aa6bce': 'Title',
+      ea3bc18a: 'Paragraph',
+      '02a53df5': 'Mock Avatar',
+      '0a001122': 'Heading Paragraph',
+      '07d62d5c': 'Show Subcomponents',
     },
   })
 

src/packages/skeleton/demos/h5/demo1.tsx

@@ -3,8 +3,8 @@ import { Cell, Skeleton } from '@nutui/nutui-react'
 
 const Demo1 = () => {
   return (
-    <Cell style={{ display: 'block' }}>
-      <Skeleton animated />
+    <Cell>
+      <Skeleton animated size="large" style={{ width: '100%' }} />
     </Cell>
   )
 }

src/packages/skeleton/demos/h5/demo2.tsx

@@ -3,8 +3,8 @@ import { Cell, Skeleton } from '@nutui/nutui-react'
 
 const Demo2 = () => {
   return (
-    <Cell style={{ display: 'block', paddingTop: '3px' }}>
-      <Skeleton rows={3} title animated />
+    <Cell>
+      <Skeleton rows={3} animated size="small" style={{ width: '100%' }} />
     </Cell>
   )
 }

src/packages/skeleton/demos/h5/demo3.tsx

@@ -1,10 +1,13 @@
 import React from 'react'
-import { Cell, Skeleton } from '@nutui/nutui-react'
+import { Cell, Skeleton, Space } from '@nutui/nutui-react'
 
 const Demo3 = () => {
   return (
     <Cell>
-      <Skeleton rows={3} title animated avatar avatarSize="100px" />
+      <Space>
+        <Skeleton width={60} height={60} />
+        <Skeleton width={60} height={60} shape="circle" />
+      </Space>
     </Cell>
   )
 }

src/packages/skeleton/demos/h5/demo4.tsx

@@ -1,16 +1,22 @@
 import React from 'react'
-import { Cell, Skeleton, ConfigProvider } from '@nutui/nutui-react'
+import { Cell, Skeleton } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   return (
-    <Cell style={{ display: 'block' }}>
-      <ConfigProvider
-        theme={{
-          nutuiSkeletonLineBorderRadius: '10px',
+    <Cell>
+      <Skeleton width={132} height={132} />
+      <div
+        style={{
+          display: 'flex',
+          flexGrow: 1,
+          flexDirection: 'column',
+          marginLeft: 10,
         }}
       >
-        <Skeleton rows={3} animated />
-      </ConfigProvider>
+        <Skeleton size="large" style={{ marginBottom: 5 }} />
+        <Skeleton width="30%" style={{ marginBottom: 5 }} />
+        <Skeleton width="80%" size="small" rows={3} />
+      </div>
     </Cell>
   )
 }

src/packages/skeleton/demos/h5/demo5.tsx

@@ -1,4 +1,4 @@
-import { Cell, Avatar, Image, Skeleton, Switch } from '@nutui/nutui-react'
+import { Avatar, Cell, Image, Skeleton, Switch } from '@nutui/nutui-react'
 import React, { useState } from 'react'
 
 const Demo5 = () => {
@@ -17,8 +17,9 @@ const Demo5 = () => {
           onChange={(value, event) => changeStatus(value, event)}
           style={{ marginBottom: '8px' }}
         />
-        <Skeleton title animated avatar rows={3} visible={checked}>
-          <div className="nut-skeleton-content">
+
+        <div style={{ display: 'flex' }}>
+          <Skeleton visible={checked} width={50} height={50} shape="circle">
             <Avatar
               className="nut-skeleton-content-avatar"
               size="50"
@@ -29,14 +30,23 @@ const Demo5 = () => {
                 />
               }
             />
-            <div>
+          </Skeleton>
+          <div style={{ flexGrow: 1, marginLeft: 8 }}>
+            <Skeleton
+              visible={checked}
+              size="large"
+              width="30%"
+              style={{ marginBottom: 8 }}
+            >
               <span>NutUI-React</span>
+            </Skeleton>
+            <Skeleton visible={checked} size="small" rows={2}>
               <div>
                 一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
               </div>
-            </div>
+            </Skeleton>
           </div>
-        </Skeleton>
+        </div>
       </div>
     </Cell>
   )

src/packages/skeleton/demos/taro/demo1.tsx

@@ -3,8 +3,8 @@ import { Cell, Skeleton } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
   return (
-    <Cell style={{ display: 'block', paddingTop: '3px' }}>
-      <Skeleton animated />
+    <Cell>
+      <Skeleton animated size="large" style={{ width: '100%' }} />
     </Cell>
   )
 }

src/packages/skeleton/demos/taro/demo2.tsx

@@ -3,8 +3,8 @@ import { Cell, Skeleton } from '@nutui/nutui-react-taro'
 
 const Demo2 = () => {
   return (
-    <Cell style={{ display: 'block' }}>
-      <Skeleton rows={3} title animated />
+    <Cell>
+      <Skeleton rows={3} animated size="small" style={{ width: '100%' }} />
     </Cell>
   )
 }

src/packages/skeleton/demos/taro/demo3.tsx

@@ -1,10 +1,18 @@
 import React from 'react'
-import { Cell, Skeleton } from '@nutui/nutui-react-taro'
+import { Cell, Skeleton, Space } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo3 = () => {
   return (
     <Cell>
-      <Skeleton rows={3} title animated avatar avatarSize="100px" />
+      <Space>
+        <Skeleton width={pxTransform(60)} height={pxTransform(60)} />
+        <Skeleton
+          width={pxTransform(60)}
+          height={pxTransform(60)}
+          shape="circle"
+        />
+      </Space>
     </Cell>
   )
 }

src/packages/skeleton/demos/taro/demo4.tsx

@@ -1,17 +1,23 @@
 import React from 'react'
-import { Cell, Skeleton, ConfigProvider } from '@nutui/nutui-react-taro'
+import { Cell, Skeleton } from '@nutui/nutui-react-taro'
 import pxTransform from '@/utils/px-transform'
 
 const Demo4 = () => {
   return (
-    <Cell style={{ display: 'block' }}>
-      <ConfigProvider
-        theme={{
-          nutuiSkeletonLineBorderRadius: pxTransform(10),
+    <Cell>
+      <Skeleton width={pxTransform(132)} height={pxTransform(132)} />
+      <div
+        style={{
+          display: 'flex',
+          flexGrow: 1,
+          flexDirection: 'column',
+          marginLeft: pxTransform(10),
         }}
       >
-        <Skeleton rows={3} animated />
-      </ConfigProvider>
+        <Skeleton size="large" style={{ marginBottom: pxTransform(5) }} />
+        <Skeleton width="30%" style={{ marginBottom: pxTransform(5) }} />
+        <Skeleton width="80%" size="small" rows={3} />
+      </div>
     </Cell>
   )
 }