feat: typography排版组件去掉type属性

ant-design · Jun 27, 2024 · dcf5793 · dcf5793
1 parent 04a90ba
commit dcf5793
Show file tree

Hide file tree

Showing 12 changed files with 56 additions and 127 deletions.
diff --git a/compiled/alipay/demo/pages/Typography/index.axml b/compiled/alipay/demo/pages/Typography/index.axml
@@ -52,8 +52,9 @@
 <ant-container title="带图标的排版">
   <ant-typography
     className="typography"
+    icon="RightOutline"
     disabled
-    type="link"
+    style="color: #1677ff"
     data-type="link"
     onDisabledTap="handleDisabledTap"
   >
@@ -62,58 +63,71 @@
 
   <ant-typography
     className="typography"
-    type="link"
+    icon="RightOutline"
+    style="color: #1677ff"
     data-type="link"
     onTap="handleTap"
   >
+    链接
   </ant-typography>
 
   <ant-typography
     className="typography"
-    type="copy"
+    icon="TextOutline"
+    style="color: #1677ff"
     data-type="copy"
     data-text="想要复制的内容"
     onTap="handleTap"
   >
+    复制
   </ant-typography>
 
   <ant-typography
     className="typography"
-    type="delete"
+    icon="DeleteOutline"
+    style="color: #1677ff"
     data-type="delete"
     onTap="handleTap"
   >
+    删除
   </ant-typography>
 
   <ant-typography
     className="typography"
-    type="edit"
+    icon="EditSOutline"
+    style="color: #1677ff"
     data-type="edit"
     onTap="handleTap"
   >
+    编辑
   </ant-typography>
 
   <ant-typography
     className="typography"
-    type="location"
+    icon="LocationOutline"
+    style="color: #1677ff"
     data-type="location"
     onTap="handleTap"
   >
+    定位
   </ant-typography>
 
   <ant-typography
     className="typography"
-    type="share"
+    icon="SendOutline"
+    style="color: #1677ff"
     data-type="share"
     onTap="handleTap"
   >
+    分享
   </ant-typography>
 
 
   <ant-typography
     className="typography"
-    type="share"
+    icon="SendOutline"
     iconPosition="left"
+    style="color: #1677ff"
     data-type="share"
     onTap="handleTap"
   >

diff --git a/compiled/alipay/src/Typography/index.axml b/compiled/alipay/src/Typography/index.axml
@@ -1,7 +1,7 @@
 <import-sjs name="util" from="./index.sjs" />
 
 <view
-  class="ant-typography-container ant-typography-{{type}} {{disabled ? 'ant-typography-disabled' : ''}} {{className}}"
+  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}}"
@@ -13,10 +13,10 @@
   <view class="ant-typography-icon-container {{iconPosition}}" a:if="{{iconPosition === 'left'}}">
     <icon
       a:if="{{!util.isUrl(icon)}}"
-      type="{{type ? util.typeConfig[type].icon : icon}}"
+      type="{{icon}}"
       className="ant-typography-icon"
     />
-    <image a:else class="ant-typography-icon-image" style="width: {{fontSize}};height: {{fontSize}};" src="{{type ? util.typeConfig[type].icon : icon}}"/>
+    <image a:else class="ant-typography-icon-image" style="width: {{fontSize}};height: {{fontSize}};" src="{{icon}}"/>
   </view>
 
   <!-- 文案 -->
@@ -26,16 +26,16 @@
     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>{{type && !text ? util.typeConfig[type].text : text}}</slot>
+    <slot>{{text}}</slot>
   </text>
 
   <!-- 右侧图标 -->
   <view class="ant-typography-icon-container {{iconPosition}}" a:if="{{iconPosition === 'right'}}">
     <icon
       a:if="{{!util.isUrl(icon)}}"
-      type="{{type ? util.typeConfig[type].icon : icon}}"
+      type="{{icon}}"
       className="ant-typography-icon"
     />
-    <image a:else class="ant-typography-icon-image" style="width: {{fontSize}};height: {{fontSize}};" src="{{type ? util.typeConfig[type].icon : 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.less b/compiled/alipay/src/Typography/index.less
@@ -57,23 +57,4 @@
   &-hover {
     opacity: @opacity-disabled;
   }
-
-  &-link {
-    color: @COLOR_BRAND1_DEFAULT;
-  }
-  &-copy {
-    color: @COLOR_BRAND1_DEFAULT;
-  }
-  &-delete {
-    color: @COLOR_BRAND1_DEFAULT;
-  }
-  &-edit {
-    color: @COLOR_BRAND1_DEFAULT;
-  }
-  &-location {
-    color: @COLOR_BRAND1_DEFAULT;
-  }
-  &-share {
-    color: @COLOR_BRAND1_DEFAULT;
-  }
 }
diff --git a/compiled/alipay/src/Typography/index.md b/compiled/alipay/src/Typography/index.md
@@ -30,7 +30,6 @@ toc: content
 | 属性            | 说明                                                                | 类型                                                               | 默认值   |
 | --------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------ | -------- |
 | text            | 文本内容                                                            | string                                                             | -        |
-| type            | 类型                                                                | - \|`copy` \| `delete` \| `edit` \| `link` \|`location` \| `share` | -        |
 | iconPosition    | 图标位置                                                            | `left` \| `right`                                                  | `right`  |
 | icon            | 图标，可以支持 Icon 组件的 type 属性，也可以直接传入图标的链接地址  | IconType \| string                                                 | ''       |
 | className       | 样式类                                                              | string                                                             | -        |

diff --git a/compiled/alipay/src/Typography/index.sjs b/compiled/alipay/src/Typography/index.sjs
@@ -1,32 +1,6 @@
 function isUrl(string) {
   return !!(string.startsWith('http://') || string.startsWith('https://'));
 }
-var typeConfig = {
-  copy: {
-    icon: 'TextOutline',
-    text: '复制'
-  },
-  "delete": {
-    icon: 'DeleteOutline',
-    text: '删除'
-  },
-  edit: {
-    icon: 'EditSOutline',
-    text: '编辑'
-  },
-  link: {
-    icon: 'RightOutline',
-    text: '链接'
-  },
-  location: {
-    icon: 'LocationOutline',
-    text: '定位'
-  },
-  share: {
-    icon: 'SendOutline',
-    text: '分享'
-  }
-};
 function getFontWeight(fontWeight, phonemodel) {
   var type2weight = {
     normal: {
@@ -49,7 +23,6 @@ function isiOS(phonemodel) {
 }
 export default {
   isUrl: isUrl,
-  typeConfig: typeConfig,
   getFontWeight: getFontWeight,
   isiOS: isiOS
 };
diff --git a/compiled/alipay/src/Typography/props.ts b/compiled/alipay/src/Typography/props.ts
@@ -2,7 +2,6 @@ import { IBaseProps, IconType } from '../_util/base';
 
 export interface ITypographyProps extends IBaseProps {
   text?: string;
-  type?: 'copy' | 'delete' | 'edit' | 'link' | 'location' | 'share';
   iconPosition?: 'left' | 'right';
   icon?: IconType | string;
   activeClassName?: string;
@@ -19,7 +18,6 @@ export interface ITypographyProps extends IBaseProps {
 
 export const TypographyDefaultProps: ITypographyProps = {
   text: '',
-  type: null,
   iconPosition: 'right',
   icon: '',
   className: '',

diff --git a/demo/pages/Typography/index.axml b/demo/pages/Typography/index.axml
@@ -52,8 +52,9 @@
 <ant-container title="带图标的排版">
   <ant-typography
     className="typography"
+    icon="RightOutline"
     disabled
-    type="link"
+    style="color: #1677ff"
     data-type="link"
     onDisabledTap="handleDisabledTap"
   >
@@ -62,58 +63,71 @@
 
   <ant-typography
     className="typography"
-    type="link"
+    icon="RightOutline"
+    style="color: #1677ff"
     data-type="link"
     onTap="handleTap"
   >
+    链接
   </ant-typography>
 
   <ant-typography
     className="typography"
-    type="copy"
+    icon="TextOutline"
+    style="color: #1677ff"
     data-type="copy"
     data-text="想要复制的内容"
     onTap="handleTap"
   >
+    复制
   </ant-typography>
 
   <ant-typography
     className="typography"
-    type="delete"
+    icon="DeleteOutline"
+    style="color: #1677ff"
     data-type="delete"
     onTap="handleTap"
   >
+    删除
   </ant-typography>
 
   <ant-typography
     className="typography"
-    type="edit"
+    icon="EditSOutline"
+    style="color: #1677ff"
     data-type="edit"
     onTap="handleTap"
   >
+    编辑
   </ant-typography>
 
   <ant-typography
     className="typography"
-    type="location"
+    icon="LocationOutline"
+    style="color: #1677ff"
     data-type="location"
     onTap="handleTap"
   >
+    定位
   </ant-typography>
 
   <ant-typography
     className="typography"
-    type="share"
+    icon="SendOutline"
+    style="color: #1677ff"
     data-type="share"
     onTap="handleTap"
   >
+    分享
   </ant-typography>
 
 
   <ant-typography
     className="typography"
-    type="share"
+    icon="SendOutline"
     iconPosition="left"
+    style="color: #1677ff"
     data-type="share"
     onTap="handleTap"
   >

diff --git a/src/Typography/index.axml b/src/Typography/index.axml
@@ -1,7 +1,7 @@
 <import-sjs name="util" from="./index.sjs" />
 
 <view
-  class="ant-typography-container ant-typography-{{type}} {{disabled ? 'ant-typography-disabled' : ''}} {{className}}"
+  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}}"
@@ -13,10 +13,10 @@
   <view class="ant-typography-icon-container {{iconPosition}}" a:if="{{iconPosition === 'left'}}">
     <icon
       a:if="{{!util.isUrl(icon)}}"
-      type="{{type ? util.typeConfig[type].icon : icon}}"
+      type="{{icon}}"
       className="ant-typography-icon"
     />
-    <image a:else class="ant-typography-icon-image" style="width: {{fontSize}};height: {{fontSize}};" src="{{type ? util.typeConfig[type].icon : icon}}"/>
+    <image a:else class="ant-typography-icon-image" style="width: {{fontSize}};height: {{fontSize}};" src="{{icon}}"/>
   </view>
 
   <!-- 文案 -->
@@ -26,16 +26,16 @@
     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>{{type && !text ? util.typeConfig[type].text : text}}</slot>
+    <slot>{{text}}</slot>
   </text>
 
   <!-- 右侧图标 -->
   <view class="ant-typography-icon-container {{iconPosition}}" a:if="{{iconPosition === 'right'}}">
     <icon
       a:if="{{!util.isUrl(icon)}}"
-      type="{{type ? util.typeConfig[type].icon : icon}}"
+      type="{{icon}}"
       className="ant-typography-icon"
     />
-    <image a:else class="ant-typography-icon-image" style="width: {{fontSize}};height: {{fontSize}};" src="{{type ? util.typeConfig[type].icon : icon}}"/>
+    <image a:else class="ant-typography-icon-image" style="width: {{fontSize}};height: {{fontSize}};" src="{{icon}}"/>
   </view>
 </view>
diff --git a/src/Typography/index.less b/src/Typography/index.less
@@ -57,23 +57,4 @@
   &-hover {
     opacity: @opacity-disabled;
   }
-
-  &-link {
-    color: @COLOR_BRAND1_DEFAULT;
-  }
-  &-copy {
-    color: @COLOR_BRAND1_DEFAULT;
-  }
-  &-delete {
-    color: @COLOR_BRAND1_DEFAULT;
-  }
-  &-edit {
-    color: @COLOR_BRAND1_DEFAULT;
-  }
-  &-location {
-    color: @COLOR_BRAND1_DEFAULT;
-  }
-  &-share {
-    color: @COLOR_BRAND1_DEFAULT;
-  }
 }
diff --git a/src/Typography/index.md b/src/Typography/index.md
@@ -30,7 +30,6 @@ toc: content
 | 属性            | 说明                                                                | 类型                                                               | 默认值   |
 | --------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------ | -------- |
 | text            | 文本内容                                                            | string                                                             | -        |
-| type            | 类型                                                                | - \|`copy` \| `delete` \| `edit` \| `link` \|`location` \| `share` | -        |
 | iconPosition    | 图标位置                                                            | `left` \| `right`                                                  | `right`  |
 | icon            | 图标，可以支持 Icon 组件的 type 属性，也可以直接传入图标的链接地址  | IconType \| string                                                 | ''       |
 | className       | 样式类                                                              | string                                                             | -        |