feat:1.新增link的component2.新增禁用,图标,图标位置功能 (#2875)

* feat:1.新增link的component2.新增禁用,图标,图标位置功能

* feat:1.新增link的component2.新增禁用,图标,图标位置功能

Co-authored-by: limeng60 <limeng60@baidu.com>

__tests__/renderers/__snapshots__/Link.test.tsx.snap

@@ -5,9 +5,16 @@ exports[`Renderer:link 1`] = `
   <a
     class="cxd-Link show"
     href="https://www.baidu.com"
-    target="_blank"
+    style="color: rgb(16, 140, 238); cursor: pointer;"
+    target="_self"
   >
+    <i
+      style="display: inline-block;"
+    />
     https://www.baidu.com
+    <i
+      style="display: none;"
+    />
   </a>
 </div>
 `;

docs/zh-CN/components/link.md

@@ -35,6 +35,36 @@ order: 55
 }
 ```
 
+## 禁用超链接
+
+```schema
+{
+    "type": "page",
+    "body": {
+        "type": "link",
+        "href": "https://www.baidu.com",
+        "body": "百度一下，你就知道",
+        "blank": true,
+        "disabled": true
+    }
+}
+```
+
+## 添加图标
+
+```schema
+{
+    "type": "page",
+    "body": {
+        "type": "link",
+        "href": "https://www.baidu.com",
+        "body": "百度一下，你就知道",
+        "blank": true,
+        "icon": "fa fa-search"
+    }
+}
+```
+
 ## 属性表
 
 | 属性名     | 类型      | 默认值 | 说明                                                                                 |
@@ -43,4 +73,8 @@ order: 55
 | body       | `string`  |        | 标签内文本                                                                           |
 | href       | `string`  |        | 链接地址                                                                             |
 | blank      | `boolean` |        | 是否在新标签页打开                                                                   |
-| htmlTarget | `string`  |        | a 标签的 target                                                                      |
+| htmlTarget | `string`  |        | a 标签的 target，优先于blank属性                                                                      |
+| title | `string`  |        | a 标签的title                                                                      |
+| disabled | `boolean`  |        | 禁用超链接                                                                     |
+| icon | `string`  |        | 超链接图标，以加强显示                                                                   |
+| position | `string`  |        | 图标位置，支持left和right                                                                      |

scss/components/_link.scss

@@ -0,0 +1,6 @@
+.#{$ns}Link {
+  &.is-disabled {
+    cursor: not-allowed;
+    color: var(--text--muted-color);
+  }
+}

scss/themes/_common.scss

@@ -108,5 +108,6 @@
 @import '../components/form/form';
 @import '../components/anchor-nav';
 @import '../components/markdown';
+@import '../components/link';
 
 @import '../utilities';

scss/themes/_cxd-variables.scss

@@ -81,7 +81,7 @@ $R8: 50%;
 
   --text--muted-color: #{$G6};
   --text--loud-color: #333;
-  --link-onHover-decoration: none;
+  --link-onHover-decoration: underline;
 
   --icon-color: #999;
   --icon-onHover-color: var(--primary);

src/components/Link.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import {RendererProps} from '../factory';
+import {BaseSchema, SchemaTpl} from '../Schema';
+import {getPropValue} from '../utils/helper';
+import {filter} from '../utils/tpl';
+import {themeable} from '../theme';
+import {autobind} from '../utils/helper';
+
+export interface LinkSchema extends BaseSchema {
+  /**
+   * 是否新窗口打开。
+   */
+  blank?: boolean;
+
+  /**
+   * 链接内容，如果不配置将显示链接地址。
+   */
+  body?: SchemaTpl;
+
+  /**
+   * 禁用
+   */
+  disabled?: boolean;
+
+  /**
+   * 图标
+   */
+  icon?: string;
+
+  /**
+   * 图标位置
+   */
+  position?: string;
+}
+
+export interface LinkProps
+  extends RendererProps,
+    Omit<LinkSchema, 'type' | 'className'> {}
+
+export class Link extends React.Component<LinkProps, object> {
+  constructor(props: LinkProps) {
+    super(props);
+  }
+
+  @autobind
+  aClick(e: React.MouseEvent<any>) {
+    const {disabled} = this.props;
+    if (disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }
+
+  render() {
+    const {
+      className,
+      body,
+      href,
+      classnames: cx,
+      blank,
+      disabled,
+      htmlTarget,
+      data,
+      title,
+      icon,
+      position
+    } = this.props;
+
+    let value = getPropValue(this.props);
+    const finnalHref = href ? filter(href, data, '| raw') : '';
+
+    return (
+      <a
+        href={finnalHref || value}
+        target={htmlTarget || (blank ? '_blank' : '_self')}
+        className={cx(
+          `Link`,
+          {
+            'is-disabled': disabled
+          },
+          className
+        )}
+        title={title}
+        onClick={this.aClick}
+      >
+        <i className={icon} style={{display: position !== 'right' ? 'inline-block' : 'none' }} />
+        {body}
+        <i className={icon} style={{display: position !== 'right' ? 'none' : 'inline-block' }} />
+      </a>
+    );
+  }
+}
+
+export default themeable(Link);

src/renderers/Link.tsx

@@ -4,6 +4,7 @@ import {BaseSchema, SchemaTpl} from '../Schema';
 import {getPropValue} from '../utils/helper';
 import {filter} from '../utils/tpl';
 import {BadgeSchema, withBadge} from '../components/Badge';
+import Link from '../components/Link';
 
 /**
  * Link 链接展示控件。
@@ -29,16 +30,32 @@ export interface LinkSchema extends BaseSchema {
    * 角标
    */
   badge?: BadgeSchema;
+
+  /**
+   * a标签原生target属性
+   */
+  htmlTarget?: string;
+
+  /**
+   * 图标
+   */
+  icon?: string;
+
+  /**
+   * 图标位置
+   */
+  position?: string;
 }
 
 export interface LinkProps
   extends RendererProps,
     Omit<LinkSchema, 'type' | 'className'> {}
 
-export class LinkField extends React.Component<LinkProps, object> {
+export class LinkCmpt extends React.Component<LinkProps, object> {
   static defaultProps = {
-    className: '',
-    blank: false
+    blank: true,
+    disabled: false,
+    htmlTarget: '_self'
   };
 
   render() {
@@ -48,25 +65,33 @@ export class LinkField extends React.Component<LinkProps, object> {
       href,
       classnames: cx,
       blank,
+      disabled,
       htmlTarget,
       data,
       render,
       translate: __,
-      title
+      title,
+      icon,
+      position
     } = this.props;
 
     let value = getPropValue(this.props);
     const finnalHref = href ? filter(href, data, '| raw') : '';
+    const text = body ? render('body', body) : finnalHref || value || __('link');
 
     return (
-      <a
-        href={finnalHref || value}
-        target={htmlTarget || (blank ? '_blank' : '_self')}
-        className={cx('Link', className)}
+      <Link
+        className={className}
+        href={href}
+        body={text}
+        blank={blank}
+        disabled={disabled}
         title={title}
+        htmlTarget={htmlTarget}
+        icon={icon}
+        position={position}
       >
-        {body ? render('body', body) : finnalHref || value || __('link')}
-      </a>
+      </Link>
     );
   }
 }
@@ -76,4 +101,4 @@ export class LinkField extends React.Component<LinkProps, object> {
 })
 // @ts-ignore 类型没搞定
 @withBadge
-export class LinkFieldRenderer extends LinkField {}
+export class LinkFieldRenderer extends LinkCmpt {}