feat: skeleton 适配微信 (#1033)

Co-authored-by: DiamondYuan <fandi.yfd@antgroup.com>

compiled/alipay/demo/pages/Skeleton/index.json

@@ -1,7 +1,7 @@
 {
   "defaultTitle": "Skeleton",
   "usingComponents": {
-    "avatar":"../../../src/Avatar/index",
+    "avatar": "../../../src/Avatar/index",
     "skeleton": "../../../src/Skeleton/index",
     "switch": "../../../src/Switch/index",
     "skeleton-avatar": "../../../src/Skeleton/Avatar/index",

compiled/alipay/demo/pages/Skeleton/index.less

@@ -1,7 +1,8 @@
-@import "../../../src/style/themes/color.less";
+@import '../../../src/style/themes/color.less';
 
 page {
   padding: 24px;
+
 }
 
 .list {

compiled/alipay/src/Skeleton/Avatar/index.ts

@@ -1,5 +1,8 @@
+import { mountComponent } from '../../_util/component';
 import { SkeletonAvatarDefaultProps } from './props';
 
-Component({
-  props: SkeletonAvatarDefaultProps,
-});
+const Avatar = () => {
+  //
+};
+
+mountComponent(Avatar, SkeletonAvatarDefaultProps);

compiled/alipay/src/Skeleton/Avatar/props.ts

@@ -1,12 +1,12 @@
-import { ISkeletonBaseProps } from '../props';
+import { ISkeletonBaseProps, SkeletonDefaultBaseProps } from '../props';
 
 export interface SkeletonAvatarProps extends ISkeletonBaseProps {
   shape: 'circle' | 'square';
   size: 'x-small' | 'small' | 'medium' | 'large';
 }
 
 export const SkeletonAvatarDefaultProps: Partial<SkeletonAvatarProps> = {
+  ...SkeletonDefaultBaseProps,
   shape: 'square',
-  loading: true,
   size: 'medium',
 };

compiled/alipay/src/Skeleton/Button/index.ts

@@ -1,5 +1,8 @@
+import { mountComponent } from '../../_util/component';
 import { SkeletonButtonDefaultProps } from './props';
 
-Component({
-  props: SkeletonButtonDefaultProps,
-});
+const Button = () => {
+  //
+};
+
+mountComponent(Button, SkeletonButtonDefaultProps);

compiled/alipay/src/Skeleton/Button/props.ts

@@ -1,10 +1,10 @@
-import { ISkeletonBaseProps } from '../props';
+import { ISkeletonBaseProps, SkeletonDefaultBaseProps } from '../props';
 
 export interface SkeletonButtonProps extends ISkeletonBaseProps {
   size?: 'small' | 'medium' | 'large';
 }
 
 export const SkeletonButtonDefaultProps: Partial<SkeletonButtonProps> = {
-  loading: true,
+  ...SkeletonDefaultBaseProps,
   size: 'medium',
 };

compiled/alipay/src/Skeleton/Input/index.ts

@@ -1,5 +1,8 @@
 import { SkeletonInputDefaultProps } from './props';
+import { mountComponent } from '../../_util/component';
 
-Component({
-  props: SkeletonInputDefaultProps,
-});
+const Input = () => {
+  //
+};
+
+mountComponent(Input, SkeletonInputDefaultProps);

compiled/alipay/src/Skeleton/Input/props.ts

@@ -1,8 +1,7 @@
-import { ISkeletonBaseProps } from '../props';
+import { ISkeletonBaseProps, SkeletonDefaultBaseProps } from '../props';
 
-export interface SkeletonInputProps extends ISkeletonBaseProps {
-}
+export interface SkeletonInputProps extends ISkeletonBaseProps {}
 
 export const SkeletonInputDefaultProps: Partial<SkeletonInputProps> = {
-  loading: true,
+  ...SkeletonDefaultBaseProps,
 };

compiled/alipay/src/Skeleton/Paragraph/index.ts

@@ -1,5 +1,8 @@
+import { mountComponent } from '../../_util/component';
 import { SkeletonParagraphDefaultProps } from './props';
 
-Component({
-  props: SkeletonParagraphDefaultProps,
-});
+const Paragraph = () => {
+  //
+};
+
+mountComponent(Paragraph, SkeletonParagraphDefaultProps);

compiled/alipay/src/Skeleton/Paragraph/props.ts

@@ -1,10 +1,10 @@
-import { ISkeletonBaseProps } from '../props';
+import { ISkeletonBaseProps, SkeletonDefaultBaseProps } from '../props';
 
 export interface SkeletonParagraphProps extends ISkeletonBaseProps {
   rows: number;
 }
 
 export const SkeletonParagraphDefaultProps: Partial<SkeletonParagraphProps> = {
-  loading: true,
+  ...SkeletonDefaultBaseProps,
   rows: 3,
 };

compiled/alipay/src/Skeleton/Title/index.ts

@@ -1,5 +1,8 @@
+import { mountComponent } from '../../_util/component';
 import { SkeletonTitleDefaultProps } from './props';
 
-Component({
-  props: SkeletonTitleDefaultProps,
-});
+const Title = () => {
+  //
+};
+
+mountComponent(Title, SkeletonTitleDefaultProps);

compiled/alipay/src/Skeleton/Title/props.ts

@@ -1,8 +1,7 @@
-import { ISkeletonBaseProps } from '../props';
+import { ISkeletonBaseProps, SkeletonDefaultBaseProps } from '../props';
 
-export interface SkeletonTitleProps extends ISkeletonBaseProps {
-}
+export interface SkeletonTitleProps extends ISkeletonBaseProps {}
 
 export const SkeletonTitleDefaultProps: Partial<SkeletonTitleProps> = {
-  loading: true,
+  ...SkeletonDefaultBaseProps,
 };

compiled/alipay/src/Skeleton/index.axml

@@ -7,7 +7,7 @@
     <avatar
       animate="{{ animate }}"
       loading
-      size="{{ avatar.size }}" />
+      size="{{ avatar === true ? 'medium' : avatar.size }}" />
   </view>
   <view class="ant-skeleton-content-wrapper">
     <title
@@ -17,7 +17,7 @@
     <paragraph
       a:if="{{ paragraph }}"
       animate="{{ animate }}"
-      rows="{{ paragraph.rows }}"
+      rows="{{ paragraph !== true ? paragraph.rows : 3 }}"
       loading />
   </view>
 </view>

compiled/alipay/src/Skeleton/index.ts

@@ -1,7 +1,8 @@
+import { mountComponent } from '../_util/component';
 import { SkeletonDefaultProps } from './props';
-import '../_util/assert-component2';
 
-Component({
-  props: SkeletonDefaultProps,
-  methods: {},
-});
+const Skeleton = () => {
+  //
+};
+
+mountComponent(Skeleton, SkeletonDefaultProps);

compiled/alipay/src/Skeleton/props.ts

@@ -12,15 +12,6 @@ export interface ISkeletonBaseProps extends IBaseProps {
    * @default false
    */
   animate?: boolean;
-  /**
-   * @description 样式
-   */
-  style?: string;
-
-  /**
-   * @description 类名
-   */
-  className?: string;
 }
 /**
  * @description 骨架屏
@@ -52,6 +43,11 @@ export interface ISkeletonProps extends ISkeletonBaseProps {
       };
 }
 
+export const SkeletonDefaultBaseProps: ISkeletonBaseProps = {
+  loading: true,
+  animate: false,
+};
+
 export const SkeletonDefaultProps: Partial<ISkeletonProps> = {
   loading: true,
   animate: false,

compiled/wechat/app.json

@@ -1,5 +1,6 @@
 {
   "pages": [
+    "demo/pages/Skeleton/index",
     "demo/pages/Form/index",
     "demo/pages/FormCustomError/index",
     "demo/pages/FormDependency/index",

compiled/wechat/demo/pages/Skeleton/index.js

@@ -0,0 +1,11 @@
+Page({
+    data: {
+        showLoading: true,
+        paragraph: {
+            rows: 4,
+        },
+    },
+    handleToggleShowLoading: function () {
+        this.setData({ showLoading: !this.data.showLoading });
+    },
+});

compiled/wechat/demo/pages/Skeleton/index.json

@@ -0,0 +1,14 @@
+{
+  "defaultTitle": "Skeleton",
+  "usingComponents": {
+    "avatar": "../../../src/Avatar/index",
+    "skeleton": "../../../src/Skeleton/index",
+    "switch": "../../../src/Switch/index",
+    "skeleton-avatar": "../../../src/Skeleton/Avatar/index",
+    "skeleton-title": "../../../src/Skeleton/Title/index",
+    "skeleton-button": "../../../src/Skeleton/Button/index",
+    "skeleton-paragraph": "../../../src/Skeleton/Paragraph/index",
+    "skeleton-input": "../../../src/Skeleton/Input/index",
+    "container": "../../../src/Container/index"
+  }
+}

compiled/wechat/demo/pages/Skeleton/index.wxml

@@ -0,0 +1,51 @@
+<container title="基础用法">
+  <skeleton />
+</container>
+
+<container title="有动画的骨架屏">
+  <skeleton animate="{{ true }}" />
+</container>
+
+<container title="带avatar">
+  <skeleton avatar="{{ true }}" />
+</container>
+
+<container title="自定义组合">
+  <view class="list">
+    <skeleton-avatar className="custom" />
+    <skeleton-paragraph
+      className="custom"
+      rows="{{ 1 }}" />
+    <skeleton-input className="custom" />
+    <skeleton-input className="custom" />
+    <skeleton-input className="custom" />
+    <skeleton-button
+      className="custom"
+      size="small" />
+  </view>
+</container>
+
+<container title="复杂组合">
+  <skeleton
+    loading="{{ showLoading }}"
+    title="{{ false }}"
+    avatar="{{ true }}"
+    paragraph="{{ paragraph }}">
+    <view class="container">
+      <avatar
+        src="https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ" />
+      <view class="content">
+        We supply a series of design principles, practical patterns and high
+        quality design resources, to help people create their product prototypes
+        beautifully and efficiently.
+      </view>
+    </view>
+  </skeleton>
+  <view slot="headerRight">
+    显示骨架
+    <switch
+      style="margin-left: 8px"
+      checked="{{ showLoading }}"
+      bind:change="handleToggleShowLoading" />
+  </view>
+</container>

compiled/wechat/demo/pages/Skeleton/index.wxss

@@ -0,0 +1,19 @@
+page {
+  padding: 24px;
+  box-sizing: border-box;
+}
+.list {
+  display: flex;
+  flex-direction: column;
+}
+.custom {
+  margin-bottom: 16px;
+}
+.container {
+  display: flex;
+  color: #333333;
+  align-items: flex-start;
+}
+.content {
+  padding: 12px 16px 0 16px;
+}

compiled/wechat/src/Skeleton/Avatar/index.js

@@ -0,0 +1,6 @@
+import { mountComponent } from '../../_util/component';
+import { SkeletonAvatarDefaultProps } from './props';
+var Avatar = function () {
+    //
+};
+mountComponent(Avatar, SkeletonAvatarDefaultProps);

compiled/wechat/src/Skeleton/Avatar/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

compiled/wechat/src/Skeleton/Avatar/index.wxml

@@ -0,0 +1,9 @@
+<wxs
+  src="./index.wxs"
+  module="utils" />
+
+<view
+  wx:if="{{ loading }}"
+  style="{{ style }}"
+  class="ant-skeleton-avatar ant-skeleton-avatar-{{ shape }} {{ animate ? 'ant-skeleton-avatar-animate' : '' }} {{ utils.getClass(size) }} {{ className || '' }}" />
+<slot wx:else />

compiled/wechat/src/Skeleton/Avatar/index.wxs

@@ -0,0 +1,10 @@
+function getClass(size) {
+  var list = ['x-small', 'small', 'medium', 'large'];
+  if (list.indexOf(size) >= 0) {
+    return "ant-skeleton-avatar-".concat(size);
+  }
+  return 'ant-skeleton-avatar-medium';
+}
+module.exports = {
+  getClass: getClass
+};

compiled/wechat/src/Skeleton/Avatar/index.wxss

@@ -0,0 +1,31 @@
+.ant-skeleton-avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: 4px;
+  background: #eeeeee;
+  display: inline-block;
+}
+.ant-skeleton-avatar-animate {
+  background: linear-gradient(90deg, #eeeeee 25%, rgba(204, 204, 204, 0.6) 37%, #eeeeee 63%);
+  background-size: 400% 100%;
+  animation: ant-skeleton-loading 1.4s ease infinite;
+}
+.ant-skeleton-avatar-circle {
+  border-radius: 50%;
+}
+.ant-skeleton-avatar-x-small {
+  width: 40px;
+  height: 40px;
+}
+.ant-skeleton-avatar-small {
+  width: 44px;
+  height: 44px;
+}
+.ant-skeleton-avatar-medium {
+  width: 52px;
+  height: 52px;
+}
+.ant-skeleton-avatar-large {
+  width: 60px;
+  height: 60px;
+}

compiled/wechat/src/Skeleton/Avatar/props.js

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { SkeletonDefaultBaseProps } from '../props';
+export var SkeletonAvatarDefaultProps = __assign(__assign({}, SkeletonDefaultBaseProps), { shape: 'square', size: 'medium' });

compiled/wechat/src/Skeleton/Button/index.js

@@ -0,0 +1,6 @@
+import { mountComponent } from '../../_util/component';
+import { SkeletonButtonDefaultProps } from './props';
+var Button = function () {
+    //
+};
+mountComponent(Button, SkeletonButtonDefaultProps);