From 409c084141f60b04e7182cc3b86a2f7193813dfb Mon Sep 17 00:00:00 2001
From: DiamondYuan <fandi.yfd@antgroup.com>
Date: Wed, 10 Jan 2024 17:10:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=20skeleton=20?=
 =?UTF-8?q?=E7=9A=84=20axml?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../alipay/src/Skeleton/Avatar/index.axml     |  6 +--
 compiled/alipay/src/Skeleton/Avatar/index.sjs | 11 ++---
 .../alipay/src/Skeleton/Button/index.axml     |  6 +--
 compiled/alipay/src/Skeleton/Button/index.sjs | 11 ++---
 compiled/alipay/src/Skeleton/Input/index.axml |  6 +--
 .../alipay/src/Skeleton/Paragraph/index.axml  | 18 +++++---
 compiled/alipay/src/Skeleton/Title/index.axml |  6 +--
 compiled/alipay/src/Skeleton/index.axml       | 20 ++++-----
 src/Skeleton/Avatar/index.axml                |  9 ----
 src/Skeleton/Avatar/index.axml.tsx            | 25 +++++++++++
 .../Avatar/{index.sjs => index.sjs.ts}        |  0
 src/Skeleton/Button/index.axml                |  9 ----
 src/Skeleton/Button/index.axml.tsx            | 24 +++++++++++
 .../Button/{index.sjs => index.sjs.ts}        |  0
 src/Skeleton/Input/index.axml                 |  5 ---
 src/Skeleton/Input/index.axml.tsx             | 22 ++++++++++
 src/Skeleton/Paragraph/index.axml             |  9 ----
 src/Skeleton/Paragraph/index.axml.tsx         | 27 ++++++++++++
 src/Skeleton/Title/index.axml                 |  5 ---
 src/Skeleton/Title/index.axml.tsx             | 22 ++++++++++
 src/Skeleton/index.axml                       | 24 -----------
 src/Skeleton/index.axml.tsx                   | 42 +++++++++++++++++++
 22 files changed, 208 insertions(+), 99 deletions(-)
 delete mode 100644 src/Skeleton/Avatar/index.axml
 create mode 100644 src/Skeleton/Avatar/index.axml.tsx
 rename src/Skeleton/Avatar/{index.sjs => index.sjs.ts} (100%)
 delete mode 100644 src/Skeleton/Button/index.axml
 create mode 100644 src/Skeleton/Button/index.axml.tsx
 rename src/Skeleton/Button/{index.sjs => index.sjs.ts} (100%)
 delete mode 100644 src/Skeleton/Input/index.axml
 create mode 100644 src/Skeleton/Input/index.axml.tsx
 delete mode 100644 src/Skeleton/Paragraph/index.axml
 create mode 100644 src/Skeleton/Paragraph/index.axml.tsx
 delete mode 100644 src/Skeleton/Title/index.axml
 create mode 100644 src/Skeleton/Title/index.axml.tsx
 delete mode 100644 src/Skeleton/index.axml
 create mode 100644 src/Skeleton/index.axml.tsx

diff --git a/compiled/alipay/src/Skeleton/Avatar/index.axml b/compiled/alipay/src/Skeleton/Avatar/index.axml
index 7e1b61670..dba491a70 100644
--- 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
index fd832c833..a2710b179 100644
--- 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
+};
\ No newline at end of file
diff --git a/compiled/alipay/src/Skeleton/Button/index.axml b/compiled/alipay/src/Skeleton/Button/index.axml
index c82e99183..3d09b3e5d 100644
--- 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
index 36b045cda..2b12350f6 100644
--- 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
+};
\ No newline at end of file
diff --git a/compiled/alipay/src/Skeleton/Input/index.axml b/compiled/alipay/src/Skeleton/Input/index.axml
index 4b4361a80..27ad7d64b 100644
--- 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
index 5438f32d3..85fc4feea 100644
--- a/compiled/alipay/src/Skeleton/Paragraph/index.axml
+++ b/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 />
diff --git a/compiled/alipay/src/Skeleton/Title/index.axml b/compiled/alipay/src/Skeleton/Title/index.axml
index 6c2956633..2dac9b4de 100644
--- 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
index 04852f796..31b44e7bf 100644
--- 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="{{ 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>
diff --git a/src/Skeleton/Avatar/index.axml b/src/Skeleton/Avatar/index.axml
deleted file mode 100644
index 7e1b61670..000000000
--- a/src/Skeleton/Avatar/index.axml
+++ /dev/null
@@ -1,9 +0,0 @@
-<import-sjs
-  from="./index.sjs"
-  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 || ''}}" />
-<slot a:else />
diff --git a/src/Skeleton/Avatar/index.axml.tsx b/src/Skeleton/Avatar/index.axml.tsx
new file mode 100644
index 000000000..924db504a
--- /dev/null
+++ b/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>
+);
diff --git a/src/Skeleton/Avatar/index.sjs b/src/Skeleton/Avatar/index.sjs.ts
similarity index 100%
rename from src/Skeleton/Avatar/index.sjs
rename to src/Skeleton/Avatar/index.sjs.ts
diff --git a/src/Skeleton/Button/index.axml b/src/Skeleton/Button/index.axml
deleted file mode 100644
index c82e99183..000000000
--- a/src/Skeleton/Button/index.axml
+++ /dev/null
@@ -1,9 +0,0 @@
-<import-sjs
-  from="./index.sjs"
-  name="utils" />
-
-<view
-  a:if="{{loading}}"
-  class="ant-skeleton-button {{animate?'ant-skeleton-button-animate':''}} {{utils.getClass(size)}}  {{className||''}}"
-  style="{{style}}"></view>
-<slot a:else />
diff --git a/src/Skeleton/Button/index.axml.tsx b/src/Skeleton/Button/index.axml.tsx
new file mode 100644
index 000000000..48957785f
--- /dev/null
+++ b/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>
+);
diff --git a/src/Skeleton/Button/index.sjs b/src/Skeleton/Button/index.sjs.ts
similarity index 100%
rename from src/Skeleton/Button/index.sjs
rename to src/Skeleton/Button/index.sjs.ts
diff --git a/src/Skeleton/Input/index.axml b/src/Skeleton/Input/index.axml
deleted file mode 100644
index 4b4361a80..000000000
--- a/src/Skeleton/Input/index.axml
+++ /dev/null
@@ -1,5 +0,0 @@
-<view
-  a:if="{{loading}}"
-  class="ant-skeleton-input {{animate?'ant-skeleton-input-animate':''}} {{className||''}}"
-  style="{{style}}"></view>
-<slot a:else />
diff --git a/src/Skeleton/Input/index.axml.tsx b/src/Skeleton/Input/index.axml.tsx
new file mode 100644
index 000000000..fc90145f7
--- /dev/null
+++ b/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>
+);
diff --git a/src/Skeleton/Paragraph/index.axml b/src/Skeleton/Paragraph/index.axml
deleted file mode 100644
index 5438f32d3..000000000
--- a/src/Skeleton/Paragraph/index.axml
+++ /dev/null
@@ -1,9 +0,0 @@
-<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>
-</view>
-<slot a:else />
diff --git a/src/Skeleton/Paragraph/index.axml.tsx b/src/Skeleton/Paragraph/index.axml.tsx
new file mode 100644
index 000000000..788e3956c
--- /dev/null
+++ b/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>
+);
diff --git a/src/Skeleton/Title/index.axml b/src/Skeleton/Title/index.axml
deleted file mode 100644
index 6c2956633..000000000
--- a/src/Skeleton/Title/index.axml
+++ /dev/null
@@ -1,5 +0,0 @@
-<view
-  a:if="{{loading}}"
-  class="ant-skeleton-title {{animate?'ant-skeleton-title-animate':''}} {{className||''}}"
-  style="{{style}}"></view>
-<slot a:else />
diff --git a/src/Skeleton/Title/index.axml.tsx b/src/Skeleton/Title/index.axml.tsx
new file mode 100644
index 000000000..84718ab89
--- /dev/null
+++ b/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>
+);
diff --git a/src/Skeleton/index.axml b/src/Skeleton/index.axml
deleted file mode 100644
index 04852f796..000000000
--- a/src/Skeleton/index.axml
+++ /dev/null
@@ -1,24 +0,0 @@
-<view
-  a:if="{{loading}}"
-  class="ant-skeleton {{className||''}}">
-  <view
-    a:if="{{avatar}}"
-    class="ant-skeleton-avatar-wrapper">
-    <avatar
-      animate="{{animate}}"
-      loading
-      size="{{avatar.size}}" />
-  </view>
-  <view class="ant-skeleton-content-wrapper">
-    <title
-      a:if="{{title}}"
-      animate="{{animate}}"
-      loading />
-    <paragraph
-      a:if="{{paragraph}}"
-      animate="{{animate}}"
-      rows="{{paragraph.rows}}"
-      loading />
-  </view>
-</view>
-<slot a:else />
diff --git a/src/Skeleton/index.axml.tsx b/src/Skeleton/index.axml.tsx
new file mode 100644
index 000000000..0de532bd2
--- /dev/null
+++ b/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>
+);