feat: skeleton RN & Harmony

packages/nutui-harmony/entry/src/main/resources/base/profile/main_pages.json

@@ -54,10 +54,10 @@
     "feedback/pages/popover/index",
     "feedback/pages/popup/index",
     "feedback/pages/pulltorefresh/index",
+    "feedback/pages/resultpage/index",
     "feedback/pages/skeleton/index",
     "feedback/pages/swipe/index",
     "feedback/pages/toast/index",
-    "feedback/pages/resultpage/index",
     "exhibition/pages/animate/index",
     "exhibition/pages/animatingnumbers/index",
     "exhibition/pages/avatar/index",

packages/nutui-taro-demo-rn/scripts/taro/adapted.js

@@ -17,6 +17,7 @@ exports = module.exports = [
   'divider',
   'image',
   'resultpage',
+  'skeleton',
   'notify',
   'pagination',
   'swiper',

packages/nutui-taro-demo-rn/src/feedback/pages/skeleton/index.tsx

@@ -1 +1,2 @@
-export default <>button</>;
+import Demo from '@/packages/skeleton/demo.taro'
+export default Demo

src/config.json

@@ -850,7 +850,7 @@
           "author": "oasis"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Skeleton",
           "type": "component",
           "cName": "骨架屏",

src/packages/skeleton/demo.scss

@@ -1,45 +0,0 @@
-.content {
-  .nut-switch {
-    display: flex;
-    margin: 0 16px 8px 0;
-  }
-
-  .nut-skeleton-content {
-    display: flex;
-
-    .right-content {
-      font-family: PingFangSC;
-      display: flex;
-      flex-direction: column;
-
-      .title {
-        font-size: 14px;
-        color: rgba(51, 51, 51, 1);
-      }
-
-      .description {
-        margin-top: 10px;
-        font-size: 13px;
-        color: rgba(154, 155, 157, 1);
-      }
-    }
-  }
-}
-
-.pic-compose {
-  display: flex;
-  justify-content: space-between;
-
-  .item {
-    width: 47%;
-  }
-}
-
-.ske-cell-single {
-  display: block;
-  padding-top: 3px;
-}
-
-.ske-cell-double {
-  display: block;
-}

src/packages/skeleton/demo.taro.tsx

@@ -10,6 +10,7 @@ import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
 import Demo4 from './demos/taro/demo4'
 import Demo5 from './demos/taro/demo5'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const SkeletonDemo = () => {
   const [translated] = useTranslate({
@@ -41,21 +42,25 @@ const SkeletonDemo = () => {
       <Header />
       <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <View className="h2">{translated['84aa6bce']}</View>
-        <Cell className="ske-cell-single">
+        <Cell style={{ display: 'block', paddingTop: '3px' }}>
           <Demo1 />
         </Cell>
         <View className="h2">{translated.ea3bc18a}</View>
-        <Cell className="ske-cell-double">
+        <Cell style={{ display: 'block' }}>
           <Demo2 />
         </Cell>
         <View className="h2">{translated['02a53df5']}</View>
         <Cell>
           <Demo3 />
         </Cell>
-        <View className="h2">{translated['0a001122']}</View>
-        <Cell className="ske-cell-single">
-          <Demo4 />
-        </Cell>
+        {harmonyAndRn() ? null : (
+          <>
+            <View className="h2">{translated['0a001122']}</View>
+            <Cell style={{ display: 'block' }}>
+              <Demo4 />
+            </Cell>
+          </>
+        )}
         <View className="h2">{translated['07d62d5c']}</View>
         <Cell>
           <Demo5 />

src/packages/skeleton/demo.tsx

@@ -37,19 +37,19 @@ const SkeletonDemo = () => {
     <>
       <div className="demo">
         <h2>{translated['84aa6bce']}</h2>
-        <Cell className="ske-cell-single">
+        <Cell style={{ display: 'block' }}>
           <Demo1 />
         </Cell>
         <h2>{translated.ea3bc18a}</h2>
-        <Cell className="ske-cell-double">
+        <Cell style={{ display: 'block', paddingTop: '3px' }}>
           <Demo2 />
         </Cell>
         <h2>{translated['02a53df5']}</h2>
         <Cell>
           <Demo3 />
         </Cell>
         <h2>{translated['0a001122']}</h2>
-        <Cell className="ske-cell-single">
+        <Cell style={{ display: 'block' }}>
           <Demo4 />
         </Cell>
         <h2>{translated['07d62d5c']}</h2>

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

@@ -11,11 +11,15 @@ const Demo5 = () => {
     setChecked(value)
   }
   return (
-    <div className="content" style={{ width: '100%' }}>
-      <Switch onChange={(value, event) => changeStatus(value, event)} />
+    <div style={{ width: '100%' }}>
+      <Switch
+        onChange={(value, event) => changeStatus(value, event)}
+        style={{ display: 'flex', marginBottom: '8px' }}
+      />
       <Skeleton title animated avatar rows={3} visible={checked}>
         <div className="nut-skeleton-content">
           <Avatar
+            className="nut-skeleton-content-avatar"
             size="50"
             icon={
               <Image
@@ -24,9 +28,9 @@ const Demo5 = () => {
               />
             }
           />
-          <div className="right-content">
-            <span className="title">NutUI-React</span>
-            <div className="description">
+          <div>
+            <span>NutUI-React</span>
+            <div>
               一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
             </div>
           </div>

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

@@ -1,6 +1,7 @@
 import { Avatar, Image, Skeleton, Switch } from '@nutui/nutui-react-taro'
 import React, { useState } from 'react'
 import { View, Text } from '@tarojs/components'
+import pxTransform from '@/utils/px-transform'
 
 const Demo5 = () => {
   const [checked, setChecked] = useState(false)
@@ -12,11 +13,19 @@ const Demo5 = () => {
     setChecked(value)
   }
   return (
-    <View className="content" style={{ width: '100%' }}>
-      <Switch onChange={(value, event) => changeStatus(value, event)} />
+    <View style={{ width: '100%' }}>
+      <Switch
+        onChange={(value, event: any) => changeStatus(value, event)}
+        style={{ display: 'flex', marginBottom: pxTransform(8) }}
+      />
       <Skeleton title animated avatar rows={3} visible={checked}>
-        <View className="nut-skeleton-content">
+        <View
+          className="nut-skeleton-content"
+          style={{ display: 'flex', flexDirection: 'row' }}
+        >
           <Avatar
+            className="nut-skeleton-content-avatar"
+            style={{ marginRight: '20px' }}
             size="50"
             icon={
               <Image
@@ -25,8 +34,8 @@ const Demo5 = () => {
               />
             }
           />
-          <View className="right-content">
-            <Text className="title">NutUI-React</Text>
+          <View className="nut-skeleton-content-line">
+            <Text className="nut-skeleton-content-title">NutUI-React</Text>
             <View className="description">
               一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
             </View>