更新 skeleton 的 axml (#1021)

* feat: 更新 skeleton 的 axml * feat: 更新 skeleton 的 axml * fix: remove comments * feat: 更新 skeleton page 的 demo * fix: 删除多余的括号 * fix: 删除了多余的 classname --------- Co-authored-by: DiamondYuan <fandi.yfd@antgroup.com>
ant-design · Jan 17, 2024 · eec584d · eec584d
1 parent 0cd9f56
commit eec584d
Show file tree

Hide file tree

Showing 35 changed files with 356 additions and 196 deletions.
diff --git a/compiled/alipay/demo/pages/Skeleton/index.axml b/compiled/alipay/demo/pages/Skeleton/index.axml
@@ -3,19 +3,19 @@
 </container>
 
 <container title="有动画的骨架屏">
-  <skeleton animate />
+  <skeleton animate="{{ true }}" />
 </container>
 
 <container title="带avatar">
-  <skeleton avatar />
+  <skeleton avatar="{{ true }}" />
 </container>
 
 <container title="自定义组合">
   <view class="list">
     <skeleton-avatar className="custom" />
     <skeleton-paragraph
       className="custom"
-      rows="{{1}}" />
+      rows="{{ 1 }}" />
     <skeleton-input className="custom" />
     <skeleton-input className="custom" />
     <skeleton-input className="custom" />
@@ -27,10 +27,10 @@
 
 <container title="复杂组合">
   <skeleton
-    loading="{{showLoading}}"
-    title="{{false}}"
-    avatar
-    paragraph="{{paragraph}}">
+    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" />
@@ -45,7 +45,7 @@
     显示骨架
     <switch
       style="margin-left: 8px"
-      checked="{{showLoading}}"
+      checked="{{ showLoading }}"
       onChange="handleToggleShowLoading" />
   </view>
 </container>
diff --git a/compiled/alipay/demo/pages/Skeleton/index.js b/compiled/alipay/demo/pages/Skeleton/index.js
@@ -1,11 +1,11 @@
 Page({
-  data: {
-    showLoading: true,
-    paragraph: {
-      rows: 4,
+    data: {
+        showLoading: true,
+        paragraph: {
+            rows: 4,
+        },
+    },
+    handleToggleShowLoading() {
+        this.setData({ showLoading: !this.data.showLoading });
     },
-  },
-  handleToggleShowLoading() {
-    this.setData({ showLoading: !this.data.showLoading });
-  },
 });
diff --git a/compiled/alipay/src/Skeleton/Avatar/index.axml b/compiled/alipay/src/Skeleton/Avatar/index.axml
@@ -3,7 +3,7 @@
   name="utils" />
 
 <view
-  a:if="{{loading}}"
-  style="{{style}}"
-  class="ant-skeleton-avatar ant-skeleton-avatar-{{shape}} {{animate?'ant-skeleton-avatar-animate':''}} {{utils.getClass(size)}} {{className || ''}}" />
+  a:if="{{ loading }}"
+  style="{{ style }}"
+  class="ant-skeleton-avatar ant-skeleton-avatar-{{ shape }} {{ animate ? 'ant-skeleton-avatar-animate' : '' }} {{ utils.getClass(size) }} {{ className || '' }}" />
 <slot a:else />
diff --git a/compiled/alipay/src/Skeleton/Avatar/index.sjs b/compiled/alipay/src/Skeleton/Avatar/index.sjs
@@ -1,9 +1,10 @@
 function getClass(size) {
-  const list = ['x-small', 'small', 'medium', 'large'];
-  if (list.indexOf(size) >=0) {
-    return `ant-skeleton-avatar-${size}`;
+  var list = ['x-small', 'small', 'medium', 'large'];
+  if (list.indexOf(size) >= 0) {
+    return "ant-skeleton-avatar-".concat(size);
   }
   return 'ant-skeleton-avatar-medium';
 }
-
-export default { getClass };
+export default {
+  getClass: getClass
+};
diff --git a/compiled/alipay/src/Skeleton/Button/index.axml b/compiled/alipay/src/Skeleton/Button/index.axml
@@ -3,7 +3,7 @@
   name="utils" />
 
 <view
-  a:if="{{loading}}"
-  class="ant-skeleton-button {{animate?'ant-skeleton-button-animate':''}} {{utils.getClass(size)}}  {{className||''}}"
-  style="{{style}}"></view>
+  a:if="{{ loading }}"
+  class="ant-skeleton-button {{ animate ? 'ant-skeleton-button-animate' : '' }} {{ utils.getClass(size) }} {{ className || '' }}"
+  style="{{ style }}" />
 <slot a:else />
diff --git a/compiled/alipay/src/Skeleton/Button/index.sjs b/compiled/alipay/src/Skeleton/Button/index.sjs
@@ -1,9 +1,10 @@
 function getClass(size) {
-  const list = ['small', 'medium', 'large'];
-  if (list.indexOf(size) >=0) {
-    return `ant-skeleton-button-${size}`;
+  var list = ['small', 'medium', 'large'];
+  if (list.indexOf(size) >= 0) {
+    return "ant-skeleton-button-".concat(size);
   }
   return 'ant-skeleton-button-medium';
 }
-
-export default { getClass };
+export default {
+  getClass: getClass
+};
diff --git a/compiled/alipay/src/Skeleton/Input/index.axml b/compiled/alipay/src/Skeleton/Input/index.axml
@@ -1,5 +1,5 @@
 <view
-  a:if="{{loading}}"
-  class="ant-skeleton-input {{animate?'ant-skeleton-input-animate':''}} {{className||''}}"
-  style="{{style}}"></view>
+  a:if="{{ loading }}"
+  class="ant-skeleton-input {{ animate ? 'ant-skeleton-input-animate' : '' }} {{ className || '' }}"
+  style="{{ style }}" />
 <slot a:else />
diff --git a/compiled/alipay/src/Skeleton/Paragraph/index.axml b/compiled/alipay/src/Skeleton/Paragraph/index.axml
@@ -1,9 +1,12 @@
 <view
-  a:if="{{loading && rows > 0}}"
-  class="ant-skeleton-paragraph {{animate?'ant-skeleton-paragraph-animate':''}} {{className||''}}"
-  style="{{style}}">
-  <view
-    class="ant-skeleton-paragraph-row"
-    a:for="{{rows}}"></view>
+  a:if="{{ loading && rows > 0 }}"
+  class="ant-skeleton-paragraph {{ animate ? 'ant-skeleton-paragraph-animate' : '' }} {{ className || '' }}"
+  style="{{ style }}">
+  <block
+    a:for="{{ rows }}"
+    a:for-index="index"
+    a:for-item="item">
+    <view class="ant-skeleton-paragraph-row" />
+  </block>
 </view>
 <slot a:else />
diff --git a/compiled/alipay/src/Skeleton/Title/index.axml b/compiled/alipay/src/Skeleton/Title/index.axml
@@ -1,5 +1,5 @@
 <view
-  a:if="{{loading}}"
-  class="ant-skeleton-title {{animate?'ant-skeleton-title-animate':''}} {{className||''}}"
-  style="{{style}}"></view>
+  a:if="{{ loading }}"
+  class="ant-skeleton-title {{ animate ? 'ant-skeleton-title-animate' : '' }} {{ className || '' }}"
+  style="{{ style }}" />
 <slot a:else />
diff --git a/compiled/alipay/src/Skeleton/index.axml b/compiled/alipay/src/Skeleton/index.axml
@@ -1,23 +1,23 @@
 <view
-  a:if="{{loading}}"
-  class="ant-skeleton {{className||''}}">
+  a:if="{{ loading }}"
+  class="ant-skeleton {{ className || '' }}">
   <view
-    a:if="{{avatar}}"
+    a:if="{{ avatar }}"
     class="ant-skeleton-avatar-wrapper">
     <avatar
-      animate="{{animate}}"
+      animate="{{ animate }}"
       loading
-      size="{{avatar.size}}" />
+      size="{{ avatar.size }}" />
   </view>
   <view class="ant-skeleton-content-wrapper">
     <title
-      a:if="{{title}}"
-      animate="{{animate}}"
+      a:if="{{ title }}"
+      animate="{{ animate }}"
       loading />
     <paragraph
-      a:if="{{paragraph}}"
-      animate="{{animate}}"
-      rows="{{paragraph.rows}}"
+      a:if="{{ paragraph }}"
+      animate="{{ animate }}"
+      rows="{{ paragraph.rows }}"
       loading />
   </view>
 </view>

diff --git a/compiled/alipay/src/Skeleton/props.ts b/compiled/alipay/src/Skeleton/props.ts
@@ -6,21 +6,21 @@ export interface ISkeletonBaseProps extends IBaseProps {
    * @description 为 true 时，显示占位图。反之则直接展示子组件
    * @default true
    */
-  loading: boolean;
+  loading?: boolean;
   /**
    * @description 是否展示动画效果
    * @default false
    */
-  animate: boolean;
+  animate?: boolean;
   /**
    * @description 样式
    */
-  style: string;
+  style?: string;
 
   /**
    * @description 类名
    */
-  className: string;
+  className?: string;
 }
 /**
  * @description 骨架屏
@@ -30,23 +30,26 @@ export interface ISkeletonProps extends ISkeletonBaseProps {
    * @description 是否显示头像占位图
    * @default false
    */
-  avatar: boolean | {
-    shape?: 'circle' | 'square';
-    size?: 'x-small' | 'small' | 'medium' | 'large';
-  };
+  avatar?:
+    | boolean
+    | {
+        shape?: 'circle' | 'square';
+        size?: 'x-small' | 'small' | 'medium' | 'large';
+      };
   /**
    * @description 是否显示标题占位图
    * @default true
    */
-  title: boolean;
+  title?: boolean;
   /**
    * @description 段落
    * @default true
    */
-  paragraph: boolean | {
-    rows?: number;
-  };
-
+  paragraph?:
+    | boolean
+    | {
+        rows?: number;
+      };
 }
 
 export const SkeletonDefaultProps: Partial<ISkeletonProps> = {

diff --git a/demo/pages/Skeleton/index.axml b/demo/pages/Skeleton/index.axml
diff --git a/demo/pages/Skeleton/index.axml.tsx b/demo/pages/Skeleton/index.axml.tsx
@@ -0,0 +1,62 @@
+import { Page, View } from 'tsxml';
+import Avatar from '../../../src/Avatar/index.axml';
+import Container from '../../../src/Container/index.axml';
+import SkeletonAvatar from '../../../src/Skeleton/Avatar/index.axml';
+import SkeletonButton from '../../../src/Skeleton/Button/index.axml';
+import Skeleton from '../../../src/Skeleton/index.axml';
+import SkeletonInput from '../../../src/Skeleton/Input/index.axml';
+import SkeletonParagraph from '../../../src/Skeleton/Paragraph/index.axml';
+import Switch from '../../../src/Switch/index.axml';
+
+export default ({ showLoading, paragraph }) => (
+  <Page>
+    <Container title="基础用法">
+      <Skeleton />
+    </Container>
+
+    <Container title="有动画的骨架屏">
+      <Skeleton animate={true} />
+    </Container>
+
+    <Container title="带avatar">
+      <Skeleton avatar={true} />
+    </Container>
+
+    <Container title="自定义组合">
+      <View class="list">
+        <SkeletonAvatar className="custom" />
+        <SkeletonParagraph className="custom" rows={1} />
+        <SkeletonInput className="custom" />
+        <SkeletonInput className="custom" />
+        <SkeletonInput className="custom" />
+        <SkeletonButton 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}
+          onChange="handleToggleShowLoading"
+        />
+      </View>
+    </Container>
+  </Page>
+);
diff --git a/demo/pages/Skeleton/index.js → demo/pages/Skeleton/index.ts b/demo/pages/Skeleton/index.js → demo/pages/Skeleton/index.ts
diff --git a/scripts/tsxml/fixtures/command.tsx b/scripts/tsxml/fixtures/command.tsx
@@ -0,0 +1,10 @@
+import { $toArray, View } from 'tsxml';
+import Component from './component';
+
+export default ({ row }: { row: number }) => (
+  <Component>
+    {$toArray(row).map((_, index) => (
+      <View>{index}</View>
+    ))}
+  </Component>
+);
diff --git a/scripts/tsxml/fixtures/snapshot/command.axml b/scripts/tsxml/fixtures/snapshot/command.axml
@@ -0,0 +1,6 @@
+<block
+  a:for="{{ row }}"
+  a:for-index="index"
+  a:for-item="_">
+  <view>{{ index }}</view>
+</block>
diff --git a/scripts/tsxml/fixtures/snapshot/command.wxml b/scripts/tsxml/fixtures/snapshot/command.wxml
@@ -0,0 +1,6 @@
+<block
+  wx:for="{{ row }}"
+  wx:for-index="index"
+  wx:for-item="_">
+  <view>{{ index }}</view>
+</block>