From eec584d797b8ea8148fca8690a5d0ccab2024156 Mon Sep 17 00:00:00 2001 From: DiamondYuan <541832074@qq.com> Date: Wed, 17 Jan 2024 14:57:49 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20skeleton=20=E7=9A=84=20axm?= =?UTF-8?q?l=20(#1021)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 更新 skeleton 的 axml * feat: 更新 skeleton 的 axml * fix: remove comments * feat: 更新 skeleton page 的 demo * fix: 删除多余的括号 * fix: 删除了多余的 classname --------- Co-authored-by: DiamondYuan --- .../alipay/demo/pages/Skeleton/index.axml | 16 ++--- compiled/alipay/demo/pages/Skeleton/index.js | 16 ++--- .../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 | 15 +++-- compiled/alipay/src/Skeleton/Title/index.axml | 6 +- compiled/alipay/src/Skeleton/index.axml | 20 +++--- compiled/alipay/src/Skeleton/props.ts | 29 +++++---- demo/pages/Skeleton/index.axml | 51 --------------- demo/pages/Skeleton/index.axml.tsx | 62 +++++++++++++++++++ demo/pages/Skeleton/{index.js => index.ts} | 0 scripts/tsxml/fixtures/command.tsx | 10 +++ scripts/tsxml/fixtures/snapshot/command.axml | 6 ++ scripts/tsxml/fixtures/snapshot/command.wxml | 6 ++ scripts/tsxml/index.spec.ts | 8 ++- scripts/tsxml/parser.ts | 15 ++++- 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 | 38 ++++++++++++ src/Skeleton/props.ts | 29 +++++---- src/tsxml/index.tsx | 4 ++ 35 files changed, 356 insertions(+), 196 deletions(-) delete mode 100644 demo/pages/Skeleton/index.axml create mode 100644 demo/pages/Skeleton/index.axml.tsx rename demo/pages/Skeleton/{index.js => index.ts} (100%) create mode 100644 scripts/tsxml/fixtures/command.tsx create mode 100644 scripts/tsxml/fixtures/snapshot/command.axml create mode 100644 scripts/tsxml/fixtures/snapshot/command.wxml 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/demo/pages/Skeleton/index.axml b/compiled/alipay/demo/pages/Skeleton/index.axml index 8dc144122..a429dae2e 100644 --- a/compiled/alipay/demo/pages/Skeleton/index.axml +++ b/compiled/alipay/demo/pages/Skeleton/index.axml @@ -3,11 +3,11 @@ - + - + @@ -15,7 +15,7 @@ + rows="{{ 1 }}" /> @@ -27,10 +27,10 @@ + loading="{{ showLoading }}" + title="{{ false }}" + avatar="{{ true }}" + paragraph="{{ paragraph }}"> @@ -45,7 +45,7 @@ 显示骨架 diff --git a/compiled/alipay/demo/pages/Skeleton/index.js b/compiled/alipay/demo/pages/Skeleton/index.js index cec1c4553..05c9b92bd 100644 --- 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 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" /> + a:if="{{ loading }}" + style="{{ style }}" + class="ant-skeleton-avatar ant-skeleton-avatar-{{ shape }} {{ animate ? 'ant-skeleton-avatar-animate' : '' }} {{ utils.getClass(size) }} {{ className || '' }}" /> 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" /> + a:if="{{ loading }}" + class="ant-skeleton-button {{ animate ? 'ant-skeleton-button-animate' : '' }} {{ utils.getClass(size) }} {{ className || '' }}" + style="{{ style }}" /> 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 @@ + a:if="{{ loading }}" + class="ant-skeleton-input {{ animate ? 'ant-skeleton-input-animate' : '' }} {{ className || '' }}" + style="{{ style }}" /> diff --git a/compiled/alipay/src/Skeleton/Paragraph/index.axml b/compiled/alipay/src/Skeleton/Paragraph/index.axml index 5438f32d3..a64fc1e64 100644 --- a/compiled/alipay/src/Skeleton/Paragraph/index.axml +++ b/compiled/alipay/src/Skeleton/Paragraph/index.axml @@ -1,9 +1,12 @@ - + a:if="{{ loading && rows > 0 }}" + class="ant-skeleton-paragraph {{ animate ? 'ant-skeleton-paragraph-animate' : '' }} {{ className || '' }}" + style="{{ style }}"> + + + 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 @@ + a:if="{{ loading }}" + class="ant-skeleton-title {{ animate ? 'ant-skeleton-title-animate' : '' }} {{ className || '' }}" + style="{{ style }}" /> diff --git a/compiled/alipay/src/Skeleton/index.axml b/compiled/alipay/src/Skeleton/index.axml index 04852f796..975d6df18 100644 --- a/compiled/alipay/src/Skeleton/index.axml +++ b/compiled/alipay/src/Skeleton/index.axml @@ -1,23 +1,23 @@ + a:if="{{ loading }}" + class="ant-skeleton {{ className || '' }}"> + size="{{ avatar.size }}" /> <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 index 500141a00..ea790c343 100644 --- 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 deleted file mode 100644 index 8dc144122..000000000 --- a/demo/pages/Skeleton/index.axml +++ /dev/null @@ -1,51 +0,0 @@ -<container title="基础用法"> - <skeleton /> -</container> - -<container title="有动画的骨架屏"> - <skeleton animate /> -</container> - -<container title="带avatar"> - <skeleton avatar /> -</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 - 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> diff --git a/demo/pages/Skeleton/index.axml.tsx b/demo/pages/Skeleton/index.axml.tsx new file mode 100644 index 000000000..d32ca23c2 --- /dev/null +++ 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 b/demo/pages/Skeleton/index.ts similarity index 100% rename from demo/pages/Skeleton/index.js rename to demo/pages/Skeleton/index.ts diff --git a/scripts/tsxml/fixtures/command.tsx b/scripts/tsxml/fixtures/command.tsx new file mode 100644 index 000000000..f1d4d39d8 --- /dev/null +++ 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 new file mode 100644 index 000000000..0e03fd93b --- /dev/null +++ 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 new file mode 100644 index 000000000..00537f1e9 --- /dev/null +++ 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> diff --git a/scripts/tsxml/index.spec.ts b/scripts/tsxml/index.spec.ts index 0403999b2..032a97312 100644 --- a/scripts/tsxml/index.spec.ts +++ b/scripts/tsxml/index.spec.ts @@ -1,5 +1,5 @@ -import fs from 'fs/promises'; -import path from 'path'; +import * as fs from 'fs/promises'; +import * as path from 'path'; import { expect, it } from 'vitest'; import { TransformContext } from './context'; import { tsxmlToAxml } from './parser'; @@ -48,3 +48,7 @@ it('测试事件', async () => { it('template', async () => { await textTsXml('template'); }); + +it('command', async () => { + await textTsXml('command'); +}); diff --git a/scripts/tsxml/parser.ts b/scripts/tsxml/parser.ts index 7e690bb27..cbe2d141e 100644 --- a/scripts/tsxml/parser.ts +++ b/scripts/tsxml/parser.ts @@ -1,6 +1,6 @@ import * as types from '@babel/types'; import { ITransformContext, TransformContext } from './context'; -import { parseXmlScript, getAxmlArrowFunctionExpression } from './utils'; +import { getAxmlArrowFunctionExpression, parseXmlScript } from './utils'; export function getJSXElementName( ctx: ITransformContext<types.JSXElement> @@ -143,7 +143,9 @@ export function transformJSXElement(ctx: ITransformContext) { if (ctx.node.callee.type !== 'MemberExpression') { throw ctx.throw(ctx.node); } + const callee = ctx.node.callee; + if ( !types.isIdentifier(callee.property) || callee.property.name !== 'map' @@ -175,8 +177,17 @@ export function transformJSXElement(ctx: ITransformContext) { indexName = mapFunctionItemIndex.name; } } + + let forItem = ctx.extends(callee.object).toAxmlExpression(); + + if ( + types.isCallExpression(callee.object) && + types.isIdentifier(callee.object.callee, { name: '$toArray' }) + ) { + forItem = ctx.extends(callee.object.arguments[0]).toAxmlExpression(); + } const forProps = { - [ctx.for()]: ctx.extends(callee.object).toAxmlExpression(), + [ctx.for()]: forItem, [ctx.forIndex()]: indexName, [ctx.forItem()]: itemName, }; 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..33b5cb048 --- /dev/null +++ b/src/Skeleton/Avatar/index.axml.tsx @@ -0,0 +1,25 @@ +import { View, Slot, TSXMLProps, Component } 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..f01e47eb3 --- /dev/null +++ b/src/Skeleton/Paragraph/index.axml.tsx @@ -0,0 +1,27 @@ +import { $toArray, Slot, TSXMLProps, View, Component } 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} + > + {$toArray(rows).map(() => ( + <View 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..182181ad3 --- /dev/null +++ b/src/Skeleton/index.axml.tsx @@ -0,0 +1,38 @@ +import { Component, Slot, TSXMLProps, View } from 'tsxml'; +import Avatar from './Avatar/index.axml'; +import Paragraph from './Paragraph/index.axml'; +import { ISkeletonProps } from './props'; +import Title from './Title/index.axml'; + +export default ({ + loading, + className, + animate, + avatar, + title, + paragraph, +}: TSXMLProps<ISkeletonProps>) => ( + <Component> + {loading ? ( + <View class={`ant-skeleton ${className || ''}`}> + {avatar && ( + <View class="ant-skeleton-avatar-wrapper"> + {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} + {/* @ts-expect-error */} + <Avatar animate={animate} loading size={avatar.size} /> + </View> + )} + <View class="ant-skeleton-content-wrapper"> + {title && <Title animate={animate} loading />} + {paragraph && ( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + //@ts-expect-error + <Paragraph animate={animate} rows={paragraph.rows} loading /> + )} + </View> + </View> + ) : ( + <Slot /> + )} + </Component> +); diff --git a/src/Skeleton/props.ts b/src/Skeleton/props.ts index 500141a00..ea790c343 100644 --- a/src/Skeleton/props.ts +++ b/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/src/tsxml/index.tsx b/src/tsxml/index.tsx index 92d48ffbf..54d81fd34 100644 --- a/src/tsxml/index.tsx +++ b/src/tsxml/index.tsx @@ -54,3 +54,7 @@ export type TSXMLProps<T> = Partial< >; export type InternalData = any; + +export function $toArray(num: number): Array<string> { + return []; +}