Feat typography (#1216)

* feat: 新增Typography组件 * feat: Typography内置类型 * feat: 排版组件属性增强 * feat: 排版组件文档完善 * feat: 排版组件文档完善 * feat: 排版组件文档完善 * feat: 添加typography测试用例 * feat: 添加typography测试用例 * feat: 复制功能的demo 新增 * feat: typography排版组件去掉type属性
ant-design · Jun 27, 2024 · 47a767f · 47a767f
1 parent b24c76e
commit 47a767f
Show file tree

Hide file tree

Showing 28 changed files with 968 additions and 1 deletion.
diff --git a/compiled/alipay/demo/app.json b/compiled/alipay/demo/app.json
@@ -97,7 +97,8 @@
     "pages/Slider/index",
     "pages/TabsElevator/index",
     "pages/IndexBarScrollView/index",
-    "pages/SelectorFilter/index"
+    "pages/SelectorFilter/index",
+    "pages/Typography/index"
   ],
   "window": {
     "enableWK": "YES",

diff --git a/compiled/alipay/demo/pages/Typography/index.axml b/compiled/alipay/demo/pages/Typography/index.axml
@@ -0,0 +1,136 @@
+<ant-container title="基础排版">
+  <ant-typography
+    className="typography"
+  >
+    简短文字
+  </ant-typography>
+
+  <ant-typography
+    className="typography"
+    fontWeight="medium"
+  >
+    简短文字中等加粗
+  </ant-typography>
+
+  <ant-typography
+    className="typography"
+    fontWeight="bold"
+  >
+    简短文字重度加粗
+  </ant-typography>
+
+  <ant-typography
+    className="typography"
+    lineThrough
+  >
+    简短文字
+  </ant-typography>
+
+  <ant-typography
+    className="typography"
+    underline
+  >
+    简短文字
+  </ant-typography>
+
+  <ant-typography
+    className="typography"
+    selectable
+  >
+    完整展示：Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
+  </ant-typography>
+
+  <ant-typography
+    className="typography"
+    ellipsisRow="{{3}}"
+    selectable
+  >
+    超出 3 行的内容省略展示：Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
+  </ant-typography>
+</ant-container>
+
+<ant-container title="带图标的排版">
+  <ant-typography
+    className="typography"
+    icon="RightOutline"
+    disabled
+    style="color: #1677ff"
+    data-type="link"
+    onDisabledTap="handleDisabledTap"
+  >
+    链接禁用
+  </ant-typography>
+
+  <ant-typography
+    className="typography"
+    icon="RightOutline"
+    style="color: #1677ff"
+    data-type="link"
+    onTap="handleTap"
+  >
+    链接
+  </ant-typography>
+
+  <ant-typography
+    className="typography"
+    icon="TextOutline"
+    style="color: #1677ff"
+    data-type="copy"
+    data-text="想要复制的内容"
+    onTap="handleTap"
+  >
+    复制
+  </ant-typography>
+
+  <ant-typography
+    className="typography"
+    icon="DeleteOutline"
+    style="color: #1677ff"
+    data-type="delete"
+    onTap="handleTap"
+  >
+    删除
+  </ant-typography>
+
+  <ant-typography
+    className="typography"
+    icon="EditSOutline"
+    style="color: #1677ff"
+    data-type="edit"
+    onTap="handleTap"
+  >
+    编辑
+  </ant-typography>
+
+  <ant-typography
+    className="typography"
+    icon="LocationOutline"
+    style="color: #1677ff"
+    data-type="location"
+    onTap="handleTap"
+  >
+    定位
+  </ant-typography>
+
+  <ant-typography
+    className="typography"
+    icon="SendOutline"
+    style="color: #1677ff"
+    data-type="share"
+    onTap="handleTap"
+  >
+    分享
+  </ant-typography>
+
+
+  <ant-typography
+    className="typography"
+    icon="SendOutline"
+    iconPosition="left"
+    style="color: #1677ff"
+    data-type="share"
+    onTap="handleTap"
+  >
+    分享试试
+  </ant-typography>
+</ant-container>
diff --git a/compiled/alipay/demo/pages/Typography/index.js b/compiled/alipay/demo/pages/Typography/index.js
@@ -0,0 +1,20 @@
+Page({
+    data: {},
+    handleTap(e) {
+        const { type, text } = e.currentTarget.dataset;
+        if (type === 'copy') {
+            my.setClipboard({
+                text,
+                success() {
+                    my.showToast({ type: 'success', content: `复制成功` });
+                },
+            });
+            return;
+        }
+        my.alert({ content: `点击${type}` });
+    },
+    handleDisabledTap(e) {
+        const { type } = e.currentTarget.dataset;
+        my.alert({ content: `禁用状态下点击${type}` });
+    },
+});
diff --git a/compiled/alipay/demo/pages/Typography/index.json b/compiled/alipay/demo/pages/Typography/index.json
@@ -0,0 +1,7 @@
+{
+  "defaultTitle": "Typography",
+  "usingComponents": {
+    "ant-typography": "../../../src/Typography/index",
+    "ant-container": "../../../src/Container/index"
+  }
+}
diff --git a/compiled/alipay/demo/pages/Typography/index.less b/compiled/alipay/demo/pages/Typography/index.less
@@ -0,0 +1,3 @@
+.typography {
+  margin-bottom: 16px;
+}
diff --git a/compiled/alipay/demo/utils/constants.js b/compiled/alipay/demo/utils/constants.js
@@ -464,5 +464,15 @@ export const componentList = [
             },
         ],
     },
+    {
+        type: '实验性质的组件',
+        list: [
+            {
+                name: 'Typography',
+                nameZN: '排版',
+                path: '/pages/Typography/index',
+            },
+        ],
+    },
 ];
 export const allComponents = componentList.reduce((re, v) => [...re, ...v.list], []);
diff --git a/compiled/alipay/src/Typography/index.axml b/compiled/alipay/src/Typography/index.axml
@@ -0,0 +1,41 @@
+<import-sjs name="util" from="./index.sjs" />
+
+<view
+  class="ant-typography-container {{disabled ? 'ant-typography-disabled' : ''}} {{className}}"
+  hover-class="{{onTap || catchTap ? `ant-typography-hover {{activeClassName}}` : ''}}"
+  hover-start-time="{{20}}"
+  hover-stay-time="{{40}}"
+  style="{{style}}"
+  onTap="{{ onTap || onDisabledTap ? 'onTap' : '' }}"
+  catchTap="{{ catchTap ? 'catchTap' : '' }}"
+>
+  <!-- 左侧图标 -->
+  <view class="ant-typography-icon-container {{iconPosition}}" a:if="{{iconPosition === 'left'}}">
+    <icon
+      a:if="{{!util.isUrl(icon)}}"
+      type="{{icon}}"
+      className="ant-typography-icon"
+    />
+    <image a:else class="ant-typography-icon-image" style="width: {{fontSize}};height: {{fontSize}};" src="{{icon}}"/>
+  </view>
+
+  <!-- 文案 -->
+  <text
+    selectable="{{selectable}}"
+    number-of-lines="{{ellipsisRow}}"
+    class="ant-typography-text {{lineThrough ? 'lineThrough' : ''}} {{underline ? 'underline' : ''}} {{util.isiOS(phonemodel) ? `ant-typography-text-${fontWeight || 'normal'}` : ''}}"
+    style="{{!util.isiOS(phonemodel) ? `font-weight: ${util.getFontWeight(fontWeight, phonemodel)};` : ''}}"
+  >
+    <slot>{{text}}</slot>
+  </text>
+
+  <!-- 右侧图标 -->
+  <view class="ant-typography-icon-container {{iconPosition}}" a:if="{{iconPosition === 'right'}}">
+    <icon
+      a:if="{{!util.isUrl(icon)}}"
+      type="{{icon}}"
+      className="ant-typography-icon"
+    />
+    <image a:else class="ant-typography-icon-image" style="width: {{fontSize}};height: {{fontSize}};" src="{{icon}}"/>
+  </view>
+</view>
diff --git a/compiled/alipay/src/Typography/index.json b/compiled/alipay/src/Typography/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "icon": "../Icon/index"
+  }
+}
diff --git a/compiled/alipay/src/Typography/index.less b/compiled/alipay/src/Typography/index.less
@@ -0,0 +1,60 @@
+@import (reference) '../style/themes/index.less';
+
+@tabsPrefix: ant-typography;
+
+.@{tabsPrefix} {
+  &-container {
+    font-size: 28 * @rpx;
+    display: flex;
+    align-items: center;
+    width: fit-content;
+    .@{tabsPrefix} {
+      &-text {
+        line-height: @default-line-height;
+
+        &.lineThrough {
+          text-decoration: line-through;
+        }
+        &.underline {
+          text-decoration: underline;
+          text-decoration-skip-ink: auto;
+        }
+
+        &-normal {
+          font-family: PingFangSC-Regular;
+        }
+
+        &-medium {
+          font-family: PingFangSC-Medium;
+        }
+
+        &-bold {
+          font-family: PingFangSC-SemiBold;
+        }
+      }
+      &-icon {
+        &-container {
+          display: flex;
+          align-items: center;
+          &.left {
+            margin-right: @size-1;
+          }
+          &.right {
+            margin-left: @size-1;
+          }
+        }
+        &-image {
+          display: block;
+        }
+      }
+    }
+  }
+
+  &-disabled {
+    opacity: @opacity-disabled;
+  }
+
+  &-hover {
+    opacity: @opacity-disabled;
+  }
+}
diff --git a/compiled/alipay/src/Typography/index.md b/compiled/alipay/src/Typography/index.md
@@ -0,0 +1,46 @@
+---
+nav:
+  path: /components
+group:
+  title: 实验性质的组件
+  order: 15
+toc: content
+---
+
+# Typography 排版
+
+## 何时使用
+
+- 需要对一段文本进行展示时使用，支持省略，兼容不同平台的加粗等。
+- 当需要带图标的行动点操作按钮时可以使用。
+
+## 注意事项
+
+- `icon` 属性可以支持 `Icon` 组件的 `type` 属性，也可以直接传入图标的链接地址。
+- 禁用模式下，可以传入 `onDisabledTap` 事件，用于监听禁用状态下，用户对文本的点击。
+
+## 代码示例
+
+### 基础用法
+
+<code src='pages/Typography/index'></code>
+
+## 属性
+
+| 属性            | 说明                                                                | 类型                                                               | 默认值   |
+| --------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------ | -------- |
+| text            | 文本内容                                                            | string                                                             | -        |
+| iconPosition    | 图标位置                                                            | `left` \| `right`                                                  | `right`  |
+| icon            | 图标，可以支持 Icon 组件的 type 属性，也可以直接传入图标的链接地址  | IconType \| string                                                 | ''       |
+| className       | 样式类                                                              | string                                                             | -        |
+| activeClassName | 点击是激活态样式类                                                  | string                                                             | -        |
+| style           | 样式                                                                | string                                                             | -        |
+| disabled        | 是否禁用                                                            | boolean                                                            | false    |
+| selectable      | 是否可被选中                                                        | boolean                                                            | false    |
+| fontWeight      | 字重，兼容 iOS、Android 平台的加粗效果                              | `normal` \| `medium` \| `bold`                                     | `normal` |
+| lineThrough     | 添加删除线样式                                                      | boolean                                                            | false    |
+| underline       | 添加下划线样式                                                      | boolean                                                            | false    |
+| ellipsisRow     | 多行省略，值须大于等于 1，表现同 css 的 -webkit-line-clamp 属性一致 | number                                                             | -        |
+| onTap           | 点击按钮，触发此回调                                                | (e: Event) => void                                                 | -        |
+| catchTap        | 点击按钮，触发此回调，非冒泡                                        | (e: Event) => void                                                 | -        |
+| onDisabledTap   | 禁用状态下，点击按钮，触发此回调                                    | (e: Event) => void                                                 | -        |
diff --git a/compiled/alipay/src/Typography/index.sjs b/compiled/alipay/src/Typography/index.sjs
@@ -0,0 +1,28 @@
+function isUrl(string) {
+  return !!(string.startsWith('http://') || string.startsWith('https://'));
+}
+function getFontWeight(fontWeight, phonemodel) {
+  var type2weight = {
+    normal: {
+      Android: 'normal',
+      iOS: 'normal'
+    },
+    medium: {
+      Android: 'bold',
+      iOS: '500'
+    },
+    bold: {
+      Android: 'bold',
+      iOS: 'bold'
+    }
+  };
+  return (type2weight[fontWeight] || type2weight['normal'])[phonemodel];
+}
+function isiOS(phonemodel) {
+  return phonemodel === 'iOS';
+}
+export default {
+  isUrl: isUrl,
+  getFontWeight: getFontWeight,
+  isiOS: isiOS
+};