fix(skeleton): fix some bugs for skeleton (#1832)

src/packages/__VUE/skeleton/__test__/__snapshots__/skeleton.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should change avatar shape when using avatarShape prop 1`] = `
-"<view style=\\"width: 50px; height: 50px; background-color: rgb(239, 239, 239); color: rgb(102, 102, 102);\\" class=\\"nut-avatar nut-avatar-normal nut-avatar-square avatarClass avatarClass--square\\">
+"<view style=\\"width: 50px; height: 50px; background-color: rgb(238, 238, 238); color: rgb(102, 102, 102);\\" class=\\"nut-avatar nut-avatar-normal nut-avatar-square avatarClass avatarClass--square\\">
   <!--v-if-->
   <!--v-if-->
   <!-- 折叠头像 -->
@@ -18,10 +18,9 @@ exports[`should render default slot 1`] = `
   <!--v-if-->
   <view class=\\"content\\">
     <!--v-if-->
-    <view class=\\"blockClass\\" style=\\"width: 100px; height: 100px;\\"></view>
-    <view class=\\"content-line\\">
-      <view class=\\"title\\"></view>
-      <view class=\\"blockClass\\" style=\\"width: 100px; height: 100px;\\"></view>
+    <view class=\\"content-line\\" style=\\"width: 100px;\\">
+      <view class=\\"blockTitle\\" style=\\"height: 100px;\\"></view>
+      <view class=\\"blockLine\\" style=\\"height: 100px;\\"></view>
     </view>
   </view>
 </view>"

src/packages/__VUE/skeleton/__test__/skeleton.spec.ts

@@ -15,13 +15,13 @@ afterAll(() => {
   config.global.components = {};
 });
 
-test('should render with row width array correctly', () => {
+test('should render with row‘s father content width correctly', () => {
   const wrapper = mount(Skeleton, {
     props: {
       width: '100px'
     }
   });
-  const skeleton: any = wrapper.find('.blockClass');
+  const skeleton: any = wrapper.find('.content-line');
   expect(skeleton.element.style.width).toBe('100px');
 });
 
@@ -80,3 +80,17 @@ test('should render default slot', () => {
   });
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should render correctly when title uses false', () => {
+  const wrapper = mount(Skeleton, {
+    props: {
+      title: false,
+      row: '1'
+    }
+  });
+
+  const content = wrapper.find('.content-line');
+
+  expect(content.find('.blockTitle').exists()).toBeFalsy();
+  expect(content.findAll('.blockLine').length).toBe(1);
+});

src/packages/__VUE/skeleton/common.ts

@@ -68,13 +68,12 @@ export const component = {
       };
     });
 
-    const blockClass = computed(() => {
-      const prefixCls = 'blockClass';
+    const getBlockClass = (prefixCls: string) => {
       return {
         [prefixCls]: true,
         [`${prefixCls}--round`]: round.value
       };
-    });
+    };
 
     const getStyle = (): import('vue').CSSProperties => {
       const style: import('vue').CSSProperties = {};
@@ -97,7 +96,7 @@ export const component = {
     return {
       avatarShape,
       avatarClass,
-      blockClass,
+      getBlockClass,
       getStyle
     };
   }

src/packages/__VUE/skeleton/index.scss

@@ -7,30 +7,32 @@
     display: flex;
     .avatarClass {
       margin-right: 20px;
-      background: rgb(239, 239, 239);
-    }
-
-    .blockClass,
-    .blockClass--round {
-      width: 100%;
-      height: 100%;
-      background: rgb(239, 239, 239);
-      margin-top: 10px;
-      &:last-child {
-        width: 70% !important;
-      }
-    }
-    .blockClass--round {
-      border-radius: 10px;
+      background-color: $skeleton-content-avatar-background-color;
     }
 
     .content-line {
       display: flex;
       flex-direction: column;
-      .title {
+      .blockTitle,
+      .blockLine {
+        width: 100%;
+        margin-bottom: 10px;
+        background-color: $skeleton-content-line-background-color;
+      }
+      .blockTitle {
         width: 30%;
-        height: 15px;
-        background: $skeleton-content-line-title-background-color;
+      }
+      .blockLine ~ .blockLine:last-of-type {
+        width: 70%;
+      }
+      .blockTitle:last-of-type,
+      .blockLine:last-of-type {
+        margin-bottom: 0;
+      }
+
+      .blockTitle--round,
+      .blockLine--round {
+        border-radius: 10px;
       }
     }
   }
@@ -42,7 +44,7 @@
     width: 100%;
     height: 100%;
     z-index: 1;
-    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80%);
+    background: $skeleton-animation-background-color;
     background-repeat: no-repeat;
     animation: backpos 2s ease-in-out 0s infinite;
   }

src/packages/__VUE/skeleton/index.taro.vue

@@ -3,22 +3,14 @@
     <slot></slot>
   </view>
   <view v-else class="skeleton">
-    <view class="skeleton-animation"></view>
+    <view class="skeleton-animation" v-if="animated"></view>
     <view class="content">
-      <nut-avatar
-        v-if="avatar"
-        :class="avatarClass"
-        :shape="avatarShape"
-        :style="getStyle()"
-        bg-color="rgb(239, 239, 239)"
-      ></nut-avatar>
+      <nut-avatar v-if="avatar" :class="avatarClass" :shape="avatarShape" :style="getStyle()"></nut-avatar>
 
-      <view v-if="Number(row) == 1" :class="blockClass" :style="{ width, height }"> </view>
-
-      <view class="content-line">
-        <view v-if="title" class="title"></view>
-        <view v-for="(item, index) in Number(row)" :key="index" :class="blockClass" :style="{ width, height }"> </view
-      ></view>
+      <view class="content-line" :style="{ width }">
+        <view v-if="title" :class="getBlockClass('blockTitle')" :style="{ height }"></view>
+        <view v-for="_ in Number(row)" :key="_" :class="getBlockClass('blockLine')" :style="{ height }" />
+      </view>
     </view>
   </view>
 </template>

src/packages/__VUE/skeleton/index.vue

@@ -5,20 +5,12 @@
   <view v-else class="skeleton">
     <view class="skeleton-animation" v-if="animated"></view>
     <view class="content">
-      <nut-avatar
-        v-if="avatar"
-        :class="avatarClass"
-        :shape="avatarShape"
-        :style="getStyle()"
-        bg-color="rgb(239, 239, 239)"
-      ></nut-avatar>
+      <nut-avatar v-if="avatar" :class="avatarClass" :shape="avatarShape" :style="getStyle()"></nut-avatar>
 
-      <view v-if="Number(row) == 1" :class="blockClass" :style="{ width, height }"> </view>
-
-      <view class="content-line">
-        <view v-if="title" class="title"></view>
-        <view v-for="(item, index) in Number(row)" :key="index" :class="blockClass" :style="{ width, height }"> </view
-      ></view>
+      <view class="content-line" :style="{ width }">
+        <view v-if="title" :class="getBlockClass('blockTitle')" :style="{ height }"></view>
+        <view v-for="_ in Number(row)" :key="_" :class="getBlockClass('blockLine')" :style="{ height }" />
+      </view>
     </view>
   </view>
 </template>

src/packages/styles/variables-jdb.scss

@@ -771,7 +771,14 @@ $form-item-tip-font-size: 10px !default;
 $form-item-tip-text-align: left !default;
 
 // skeleton
-$skeleton-content-line-title-background-color: #efefef !default;
+$skeleton-content-avatar-background-color: #efefef !default;
+$skeleton-content-line-background-color: #efefef !default;
+$skeleton-animation-background-color: linear-gradient(
+  90deg,
+  hsla(0, 0%, 100%, 0),
+  hsla(0, 0%, 100%, 0.5) 50%,
+  hsla(0, 0%, 100%, 0) 80%
+) !default;
 
 // sku
 $sku-item-border: 1px solid $primary-color !default;

src/packages/styles/variables-jddkh.scss

@@ -702,7 +702,14 @@ $form-item-tip-font-size: 10px !default;
 $form-item-tip-text-align: left !default;
 
 // skeleton
-$skeleton-content-line-title-background-color: #fafafa !default;
+$skeleton-content-avatar-background-color: #efefef !default;
+$skeleton-content-line-background-color: #fafafa !default;
+$skeleton-animation-background-color: linear-gradient(
+  90deg,
+  hsla(0, 0%, 100%, 0),
+  hsla(0, 0%, 100%, 0.5) 50%,
+  hsla(0, 0%, 100%, 0) 80%
+) !default;
 
 // sku
 $sku-item-border: 0 !default;

src/packages/styles/variables-jdt.scss

@@ -678,7 +678,14 @@ $form-item-tip-font-size: 12px !default;
 $form-item-tip-text-align: right !default;
 
 // skeleton
-$skeleton-content-line-title-background-color: #efefef !default;
+$skeleton-content-avatar-background-color: #efefef !default;
+$skeleton-content-line-background-color: #efefef !default;
+$skeleton-animation-background-color: linear-gradient(
+  90deg,
+  hsla(0, 0%, 100%, 0),
+  hsla(0, 0%, 100%, 0.5) 50%,
+  hsla(0, 0%, 100%, 0) 80%
+) !default;
 
 // sku
 $sku-item-border: 1px solid $primary-color !default;

src/packages/styles/variables.scss

@@ -702,7 +702,14 @@ $form-item-tip-font-size: 10px !default;
 $form-item-tip-text-align: left !default;
 
 // skeleton
-$skeleton-content-line-title-background-color: #efefef !default;
+$skeleton-content-avatar-background-color: #efefef !default;
+$skeleton-content-line-background-color: #efefef !default;
+$skeleton-animation-background-color: linear-gradient(
+  90deg,
+  hsla(0, 0%, 100%, 0),
+  hsla(0, 0%, 100%, 0.5) 50%,
+  hsla(0, 0%, 100%, 0) 80%
+) !default;
 
 // sku
 $sku-item-border: 1px solid $primary-color !default;