feat: 更新 skeleton 的 axml

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 />

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
+};

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 />

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
+};

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 />

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

@@ -1,9 +1,15 @@
 <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="{{ Array.from({
+  length: rows,
+}) }}"
+    a:for-index="index"
+    a:for-item="_"
+    a:key="{{ index }}">
+    <view class="ant-skeleton-paragraph-row" />
+  </block>
 </view>
 <slot a:else />

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 />

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="{{ typeof avatar === 'boolean' ? undefined : 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="{{ typeof paragraph === 'boolean' ? undefined : paragraph.rows }}"
       loading />
   </view>
 </view>

src/Skeleton/Avatar/index.axml.tsx

@@ -0,0 +1,25 @@
+import { View, Slot, TSXMLProps } from 'tsxml';
+import { SkeletonAvatarProps } from './props';
+import utils from './index.sjs';
+
+export default ({
+  loading,
+  style,
+  shape,
+  size,
+  animate,
+  className,
+}: TSXMLProps<SkeletonAvatarProps>) => (
+  <Component>
+    {loading ? (
+      <View
+        style={style}
+        class={`ant-skeleton-avatar ant-skeleton-avatar-${shape} ${
+          animate ? 'ant-skeleton-avatar-animate' : ''
+        } ${utils.getClass(size)} ${className || ''}`}
+      />
+    ) : (
+      <Slot />
+    )}
+  </Component>
+);

src/Skeleton/Button/index.axml.tsx

@@ -0,0 +1,24 @@
+import { View, Slot, TSXMLProps } from 'tsxml';
+import utils from './index.sjs';
+import { SkeletonButtonProps } from './props';
+
+export default ({
+  loading,
+  animate,
+  size,
+  className,
+  style,
+}: TSXMLProps<SkeletonButtonProps>) => (
+  <Component>
+    {loading ? (
+      <View
+        class={`ant-skeleton-button ${
+          animate ? 'ant-skeleton-button-animate' : ''
+        } ${utils.getClass(size)} ${className || ''}`}
+        style={style}
+      />
+    ) : (
+      <Slot />
+    )}
+  </Component>
+);

src/Skeleton/Input/index.axml.tsx

@@ -0,0 +1,22 @@
+import { View, TSXMLProps, Slot } from 'tsxml';
+import { SkeletonInputProps } from './props';
+
+export default ({
+  loading,
+  animate,
+  className,
+  style,
+}: TSXMLProps<SkeletonInputProps>) => (
+  <Component>
+    {loading ? (
+      <View
+        class={`ant-skeleton-input ${
+          animate ? 'ant-skeleton-input-animate' : ''
+        } ${className || ''}`}
+        style={style}
+      ></View>
+    ) : (
+      <Slot />
+    )}
+  </Component>
+);

src/Skeleton/Paragraph/index.axml.tsx

@@ -0,0 +1,27 @@
+import { View, Slot, TSXMLProps } from 'tsxml';
+import { SkeletonParagraphProps } from './props';
+
+export default ({
+  loading,
+  rows,
+  animate,
+  className,
+  style,
+}: TSXMLProps<SkeletonParagraphProps>) => (
+  <Component>
+    {loading && rows > 0 ? (
+      <View
+        class={`ant-skeleton-paragraph ${
+          animate ? 'ant-skeleton-paragraph-animate' : ''
+        } ${className || ''}`}
+        style={style}
+      >
+        {Array.from({ length: rows }).map((_, index) => (
+          <View key={index} class="ant-skeleton-paragraph-row"></View>
+        ))}
+      </View>
+    ) : (
+      <Slot></Slot>
+    )}
+  </Component>
+);

src/Skeleton/Title/index.axml.tsx

@@ -0,0 +1,22 @@
+import { View, Slot, TSXMLProps, Component } from 'tsxml';
+import { SkeletonTitleProps, SkeletonTitleDefaultProps } from './props';
+
+export default ({
+  loading,
+  animate,
+  className,
+  style,
+}: TSXMLProps<SkeletonTitleProps> = SkeletonTitleDefaultProps) => (
+  <Component>
+    {loading ? (
+      <View
+        class={`ant-skeleton-title ${
+          animate ? 'ant-skeleton-title-animate' : ''
+        } ${className || ''}`}
+        style={style}
+      ></View>
+    ) : (
+      <Slot />
+    )}
+  </Component>
+);

src/Skeleton/index.axml.tsx

@@ -0,0 +1,42 @@
+import { Component, Slot, View } from 'tsxml';
+import { ISkeletonProps } from './props';
+import Avatar from './Avatar/index.axml';
+import Paragraph from './Paragraph/index.axml';
+import Title from './Title/index.axml';
+
+export default ({
+  loading,
+  className,
+  animate,
+  avatar,
+  title,
+  paragraph,
+}: ISkeletonProps) => (
+  <Component>
+    {loading ? (
+      <View class={`ant-skeleton ${className || ''}`}>
+        {avatar && (
+          <View class="ant-skeleton-avatar-wrapper">
+            <Avatar
+              animate={animate}
+              loading
+              size={typeof avatar === 'boolean' ? undefined : avatar.size}
+            />
+          </View>
+        )}
+        <View class="ant-skeleton-content-wrapper">
+          {title && <Title animate={animate} loading />}
+          {paragraph && (
+            <Paragraph
+              animate={animate}
+              rows={typeof paragraph === 'boolean' ? undefined : paragraph.rows}
+              loading
+            />
+          )}
+        </View>
+      </View>
+    ) : (
+      <Slot />
+    )}
+  </Component>
+);