Merge pull request #777 from GuYith/master

feat: add and init link component
Tencent · Aug 9, 2023 · 6b0ff74 · 6b0ff74
2 parents debaa81 + 85f81c3
commit 6b0ff74
Show file tree

Hide file tree

Showing 7 changed files with 244 additions and 0 deletions.
diff --git a/tdesign/desktop/src/link/index.html b/tdesign/desktop/src/link/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html theme-mode="light">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" /> -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TDesign Link</title>
+    <script type="module" src="./theme.tsx"></script>
+  </head>
+
+  <body></body>
+</html>
diff --git a/tdesign/desktop/src/link/link.md b/tdesign/desktop/src/link/link.md
@@ -0,0 +1,13 @@
+:: BASE_DOC ::
+
+## API
+
+### Link Props
+
+<!-- TODO: to be completed -->
+
+### Link Events
+
+| 名称  | 参数              | 描述                               |
+| ----- | ----------------- | ---------------------------------- |
+| click | `(e: MouseEvent)` | 点击事件，禁用状态不会触发点击事件 |
diff --git a/tdesign/desktop/src/link/link.tsx b/tdesign/desktop/src/link/link.tsx
@@ -0,0 +1,126 @@
+import { h, tag, extractClass, WeElement } from 'omi'
+
+import './style/index.js'
+import css from './style/index.ts'
+
+interface LinkProps {
+  /**
+   * 链接内容
+   */
+  content?: string | WeElement
+  /**
+   * 链接内容，同 content
+   */
+  default?: string | WeElement
+  /**
+   * 禁用链接
+   */
+  disabled?: boolean
+  /**
+   * 链接悬浮态样式，有 文本颜色变化、添加下划线等 2 种方法
+   * @default underline
+   */
+  hover?: 'color' | 'underline'
+  /**
+   * 跳转链接
+   * @default ''
+   */
+  href?: string
+  /**
+   * 前置图标: TODO: need to be unified with icon
+   */
+  prefixIcon?: WeElement
+  /**
+   * 尺寸
+   * @default medium
+   */
+  size?: 'small' | 'medium' | 'large'
+  /**
+   * 后置图标
+   */
+  suffixIcon?: WeElement
+  /**
+   * 跳转方式，如：当前页面打开、新页面打开等，同 HTML 属性 target 含义相同
+   * @default ''
+   */
+  target?: string
+  /**
+   * 组件风格，依次为默认色、品牌色、危险色、警告色、成功色
+   * @default default
+   */
+  theme?: 'default' | 'primary' | 'danger' | 'warning' | 'success'
+  /**
+   * 普通状态是否显示链接下划线
+   */
+  underline?: boolean
+  /**
+   * 点击事件，禁用状态不会触发点击事件
+   */
+  onClick?: (e: MouseEvent) => void
+}
+
+@tag('t-link')
+export default class Link extends WeElement<LinkProps> {
+  static css = css as string
+  static defaultProps = {
+    underline: false,
+    disabled: false,
+    size: 'medium'
+  }
+
+  //TODO: enum type?
+  static propTypes = {
+    content: WeElement, //String | WeElement
+    default: WeElement, //String | WeElement
+    disabled: Boolean,
+    hover: String,
+    href: String,
+    prefixIcon: WeElement,
+    size: String,
+    suffixIcon: WeElement,
+    target: String,
+    theme: String,
+    underline: Boolean,
+    onClick: Function
+  }
+
+  handleClick(e: MouseEvent): void {
+    if (this.props.disabled) return
+    this.props.onClick?.(e)
+  }
+
+  render(props: OmiProps<LinkProps>) {
+    const classPrefix = 't'
+    /*
+        TODO: remain size and status
+        remain prefixContent and suffixContent
+    **/
+    const linkClass = extractClass(
+      props,
+      `${classPrefix}-link`,
+      `${classPrefix}-link--theme-${props.theme}`,
+      {
+        // [commonSizeClassName[props.size]]: props.size !== 'medium',
+        // [commonStatusClassName.disabled]: props.disabled,
+        [`${classPrefix}-is-underline`]: props.underline,
+        [`${classPrefix}-link--hover-${props.hover}`]: !props.disabled
+      }
+    )
+
+    return (
+      <h.f>
+        <a
+          {...linkClass}
+          href={props.disabled || !props.href ? undefined : props.href}
+          target={props.target}
+          onClick={this.handleClick}
+        >
+          <span>
+            <slot></slot>
+          </span>
+        </a>
+      </h.f>
+    )
+  }
+}
+export {}
diff --git a/tdesign/desktop/src/link/style/index.ts b/tdesign/desktop/src/link/style/index.ts
@@ -0,0 +1,3 @@
+import linkStyle from '../../_common/style/web/components/link/_index.less'
+import theme from '../../_common/style/web/theme/_index.less'
+export default linkStyle + theme
diff --git a/tdesign/desktop/src/link/theme.tsx b/tdesign/desktop/src/link/theme.tsx
@@ -0,0 +1,25 @@
+import { h, tag, render, WeElement } from 'omi'
+
+import './link'
+
+@tag('link-theme')
+export default class LinkTheme extends WeElement<Props> {
+  static css = `
+    t-link{ margin: 0 5px }
+  `
+  render(props) {
+    return (
+      <div>
+        <t-link theme="default">跳转链接</t-link>
+        <t-link theme="primary">跳转链接</t-link>
+        <t-link theme="danger">跳转链接</t-link>
+        <t-link theme="warning">跳转链接</t-link>
+        <t-link theme="success">跳转链接</t-link>
+      </div>
+    )
+  }
+}
+
+render(<link-theme></link-theme>, 'body', {
+  ignoreAttrs: true
+})
diff --git a/tdesign/desktop/src/link/type.ts b/tdesign/desktop/src/link/type.ts
@@ -0,0 +1,56 @@
+import { WeElement } from 'omi'
+export interface LinkProps {
+  /**
+   * 链接内容
+   */
+  content?: string | WeElement
+  /**
+   * 链接内容，同 content
+   */
+  default?: string | WeElement
+  /**
+   * 禁用链接
+   */
+  disabled?: boolean
+  /**
+   * 链接悬浮态样式，有 文本颜色变化、添加下划线等 2 种方法
+   * @default underline
+   */
+  hover?: 'color' | 'underline'
+  /**
+   * 跳转链接
+   * @default ''
+   */
+  href?: string
+  /**
+   * 前置图标: TODO: need to be unified with icon
+   */
+  prefixIcon?: WeElement
+  /**
+   * 尺寸
+   * @default medium
+   */
+  size?: 'small' | 'medium' | 'large'
+  /**
+   * 后置图标
+   */
+  suffixIcon?: WeElement
+  /**
+   * 跳转方式，如：当前页面打开、新页面打开等，同 HTML 属性 target 含义相同
+   * @default ''
+   */
+  target?: string
+  /**
+   * 组件风格，依次为默认色、品牌色、危险色、警告色、成功色
+   * @default default
+   */
+  theme?: 'default' | 'primary' | 'danger' | 'warning' | 'success'
+  /**
+   * 普通状态是否显示链接下划线
+   */
+  underline?: boolean
+  /**
+   * 点击事件，禁用状态不会触发点击事件
+   */
+  onClick?: (e: MouseEvent) => void
+}
diff --git a/tdesign/desktop/src/link/vite.config.js b/tdesign/desktop/src/link/vite.config.js
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  esbuild: {
+    jsxFactory: 'h',
+    jsxFragment: 'h.f'
+  }
+})