From 0918833fa88b41b3898457ee0c3322c3336c9b53 Mon Sep 17 00:00:00 2001
From: KongYe <40623993+kongyeah@users.noreply.github.com>
Date: Mon, 4 Nov 2019 20:38:56 +0800
Subject: [PATCH] feat(Skeleton): add new component skeleton (#2244)

---
 example/app.json                  |  3 +-
 example/config.js                 | 12 ++++--
 example/pages/skeleton/index.js   | 11 ++++++
 example/pages/skeleton/index.json |  3 ++
 example/pages/skeleton/index.wxml | 37 +++++++++++++++++
 example/pages/skeleton/index.wxss | 35 ++++++++++++++++
 packages/common/style/var.less    |  8 ++++
 packages/skeleton/README.md       | 66 +++++++++++++++++++++++++++++++
 packages/skeleton/index.json      |  4 ++
 packages/skeleton/index.less      | 57 ++++++++++++++++++++++++++
 packages/skeleton/index.ts        | 43 ++++++++++++++++++++
 packages/skeleton/index.wxml      | 28 +++++++++++++
 12 files changed, 302 insertions(+), 5 deletions(-)
 create mode 100644 example/pages/skeleton/index.js
 create mode 100644 example/pages/skeleton/index.json
 create mode 100644 example/pages/skeleton/index.wxml
 create mode 100644 example/pages/skeleton/index.wxss
 create mode 100644 packages/skeleton/README.md
 create mode 100644 packages/skeleton/index.json
 create mode 100644 packages/skeleton/index.less
 create mode 100644 packages/skeleton/index.ts
 create mode 100644 packages/skeleton/index.wxml

diff --git a/example/app.json b/example/app.json
index 7e6a7040..ff94fcde 100644
--- a/example/app.json
+++ b/example/app.json
@@ -113,7 +113,8 @@
     "van-grid": "./dist/grid/index",
     "van-grid-item": "./dist/grid-item/index",
     "van-dropdown-menu": "./dist/dropdown-menu/index",
-    "van-dropdown-item": "./dist/dropdown-item/index"
+    "van-dropdown-item": "./dist/dropdown-item/index",
+    "van-skeleton": "./dist/skeleton/index"
   },
   "sitemapLocation": "sitemap.json"
 }
diff --git a/example/config.js b/example/config.js
index 68487ff9..d9123b5c 100644
--- a/example/config.js
+++ b/example/config.js
@@ -137,6 +137,10 @@ export default [
         path: '/count-down',
         title: 'CountDown 倒计时'
       },
+      {
+        path: '/divider',
+        title: 'Divider 分割线'
+      },
       {
         path: '/notice-bar',
         title: 'NoticeBar 通告栏'
@@ -149,6 +153,10 @@ export default [
         path: '/progress',
         title: 'Progress 进度条'
       },
+      {
+        path: '/skeleton',
+        title: 'Skeleton 骨架屏'
+      },
       {
         path: '/steps',
         title: 'Steps 步骤条'
@@ -164,10 +172,6 @@ export default [
       {
         path: '/tree-select',
         title: 'TreeSelect 分类选择'
-      },
-      {
-        path: '/divider',
-        title: 'Divider 分割线'
       }
     ]
   },
diff --git a/example/pages/skeleton/index.js b/example/pages/skeleton/index.js
new file mode 100644
index 00000000..0033306d
--- /dev/null
+++ b/example/pages/skeleton/index.js
@@ -0,0 +1,11 @@
+import Page from '../../common/page';
+
+Page({
+  data: {
+    show: false
+  },
+
+  onChange({ detail }) {
+    this.setData({ show: detail });
+  },
+});
diff --git a/example/pages/skeleton/index.json b/example/pages/skeleton/index.json
new file mode 100644
index 00000000..fd5834d3
--- /dev/null
+++ b/example/pages/skeleton/index.json
@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "Skeleton 骨架屏"
+}
diff --git a/example/pages/skeleton/index.wxml b/example/pages/skeleton/index.wxml
new file mode 100644
index 00000000..c3088cf8
--- /dev/null
+++ b/example/pages/skeleton/index.wxml
@@ -0,0 +1,37 @@
+<demo-block title="基础用法">
+  <van-skeleton
+    title
+    row="3"
+    row-width="{{ ['100%', '100%', '80%'] }}"
+  />
+</demo-block>
+
+<demo-block title="显示头像">
+  <van-skeleton
+    title
+    avatar
+    row="3"
+  />
+</demo-block>
+
+<demo-block title="展示子组件">
+  <van-switch
+    checked="{{ show }}"
+    size="24px"
+    bind:change="onChange"
+  />
+  <van-skeleton
+    title
+    avatar
+    row="3"
+    loading="{{ !show }}"
+  >
+    <view class="demo-preview">
+      <image class="demo-preview-img" src="https://img.yzcdn.cn/vant/logo.png" />
+      <view class="demo-content">
+        <view class="demo-content-h3">关于 Vant Weapp</view>
+        <view class="domo-content-p">Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。</view>
+      </view>
+    </view>
+  </van-skeleton>
+</demo-block>
diff --git a/example/pages/skeleton/index.wxss b/example/pages/skeleton/index.wxss
new file mode 100644
index 00000000..24fb7cfd
--- /dev/null
+++ b/example/pages/skeleton/index.wxss
@@ -0,0 +1,35 @@
+page {
+  background-color: white;
+}
+
+.van-switch {
+  margin: 0 16px 8px;
+}
+
+.demo-preview {
+  display: flex;
+  padding: 0 16px;
+}
+
+.demo-content {
+  padding-top: 6px;
+}
+
+.demo-content-h3 {
+  margin: 0;
+  font-size: 18px;
+  line-height: 20px;
+}
+
+.demo-content-p {
+  margin: 13px 0 0;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.demo-preview-img {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  margin-right: 16px;
+}
diff --git a/packages/common/style/var.less b/packages/common/style/var.less
index c6fc507e..7ae21088 100644
--- a/packages/common/style/var.less
+++ b/packages/common/style/var.less
@@ -456,3 +456,11 @@
 @dropdown-menu-title-padding: 0 @padding-xs;
 @dropdown-menu-title-line-height: 18px;
 @dropdown-menu-option-active-color: @blue;
+
+// skeleton
+@skeleton-padding: 0 @padding-md;
+@skeleton-row-height: 16px;
+@skeleton-row-background-color: @active-color;
+@skeleton-row-margin-top: @padding-sm;
+@skeleton-avatar-background-color: @active-color;
+@skeleton-animation-duration: 1.2s;
diff --git a/packages/skeleton/README.md b/packages/skeleton/README.md
new file mode 100644
index 00000000..995a344d
--- /dev/null
+++ b/packages/skeleton/README.md
@@ -0,0 +1,66 @@
+# Skeleton
+
+### Install
+
+```json
+"usingComponents": {
+  "van-skeleton": "path/to/vant-weapp/dist/skeleton/index"
+}
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<van-skeleton title row="3" />
+```
+
+### Show Avatar
+
+```html
+<van-skeleton title avatar row="3" />
+```
+
+### Show Children
+
+```html
+<van-skeleton
+  title
+  avatar
+  row="3"
+  loading="loading"
+>
+  <div>Content</div>
+</van-skeleton>
+```
+
+```js
+Page({
+  data: {
+    loading: true
+  },
+
+  onChange() {
+    this.setData({
+      loading: false
+    });
+  }
+});
+```
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default | Version |
+|------|------|------|------|------|
+| row | Row count | *number* | `0` | - |
+| row-width | Row width, can be array | *string \| string[]* | `100%` | - |
+| title | Whether to show title placeholder | *boolean* | `false` | - |
+| title-width | Title width | string | `40%` | - |
+| avatar | Whether to show avatar placeholder | *boolean* | `false` | - |
+| avatar-size | Size of avatar placeholder | string | `32px` | - |
+| avatar-shape | Shape of avatar placeholder，can be set to `square` | *string* | `round` | - |
+| loading | Whether to show skeleton，pass `false` to show child component | *boolean* | `true` | - |
+| animate | Whether to enable animation | *boolean* | `true` | - |
\ No newline at end of file
diff --git a/packages/skeleton/index.json b/packages/skeleton/index.json
new file mode 100644
index 00000000..e8cfaaf8
--- /dev/null
+++ b/packages/skeleton/index.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file
diff --git a/packages/skeleton/index.less b/packages/skeleton/index.less
new file mode 100644
index 00000000..a02951da
--- /dev/null
+++ b/packages/skeleton/index.less
@@ -0,0 +1,57 @@
+@import '../common/style/var.less';
+@import '../common/style/theme.less';
+
+.van-skeleton {
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  .theme(padding, '@skeleton-padding');
+
+  &__avatar {
+    flex-shrink: 0;
+    .theme(margin-right, '@padding-md');
+    .theme(background-color, '@skeleton-avatar-background-color');
+
+    &--round {
+      border-radius: 100%;
+    }
+  }
+
+  &__content {
+    flex: 1;
+  }
+
+  &__avatar + &__content {
+    .theme(padding-top, '@padding-xs');
+  }
+
+  &__row,
+  &__title {
+    .theme(height, '@skeleton-row-height');
+    .theme(background-color, '@skeleton-row-background-color');
+  }
+
+  &__title {
+    margin: 0;
+  }
+
+  &__row {
+    &:not(:first-child) {
+      .theme(margin-top, '@skeleton-row-margin-top');
+    }
+  }
+
+  &__title + &__row {
+    margin-top: 20px;
+  }
+
+  &--animate {
+    animation: van-skeleton-blink @skeleton-animation-duration ease-in-out infinite;
+  }
+}
+
+@keyframes van-skeleton-blink {
+  50% {
+    opacity: .6;
+  }
+}
diff --git a/packages/skeleton/index.ts b/packages/skeleton/index.ts
new file mode 100644
index 00000000..ef43a33c
--- /dev/null
+++ b/packages/skeleton/index.ts
@@ -0,0 +1,43 @@
+import { VantComponent } from '../common/component';
+
+VantComponent({
+  props: {
+    row: {
+      type: Number,
+      value: 0
+    },
+    title: Boolean,
+    avatar: Boolean,
+    loading: {
+      type: Boolean,
+      value: true
+    },
+    animate: {
+      type: Boolean,
+      value: true
+    },
+    avatarSize: {
+      type: String,
+      value: '32px'
+    },
+    avatarShape: {
+      type: String,
+      value: 'round'
+    },
+    titleWidth: {
+      type: String,
+      value: '40%'
+    },
+    rowWidth: {
+      type: null,
+      value: '100%',
+      observer(val) {
+        this.setData({ isArray: val instanceof Array });
+      }
+    }
+  },
+
+  data: {
+    isArray: false
+  }
+});
diff --git a/packages/skeleton/index.wxml b/packages/skeleton/index.wxml
new file mode 100644
index 00000000..154d299d
--- /dev/null
+++ b/packages/skeleton/index.wxml
@@ -0,0 +1,28 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view
+  wx:if="{{ loading }}"
+  class="custom-class {{ utils.bem('skeleton', [{animate}]) }}"
+>
+  <view
+    wx:if="{{ avatar }}"
+    class="{{ utils.bem('skeleton__avatar', [avatarShape])}}"
+    style="{{ 'width:' + avatarSize + ';height:' + avatarSize }}"
+  />
+  <view class="{{ utils.bem('skeleton__content')}}">
+    <view
+      wx:if="{{ title }}"
+      class="{{ utils.bem('skeleton__title') }}"
+      style="{{ 'width:' + titleWidth }}"
+    />
+    <view
+      wx:for="row"
+      wx:for-index="index"
+      class="{{ utils.bem('skeleton__row') }}"
+      style="{{ 'width:' + (isArray ? rowWidth[index] : rowWidth) }}"
+    />
+  </view>
+</view>
+<view wx:else class="{{ utils.bem('skeleton__content')}}">
+  <slot />
+</view>