Merge pull request #781 from GuYith/master

feat: improve link component, add docs and examples
Tencent · Aug 11, 2023 · 4682367 · 4682367
2 parents f199929 + 7854de1
commit 4682367
Show file tree

Hide file tree

Showing 16 changed files with 428 additions and 186 deletions.
diff --git a/tdesign/desktop/src/button/index.tsx b/tdesign/desktop/src/button/index.tsx
@@ -3,70 +3,70 @@ import css from './style'
 import { ButtonProps } from './types'
 import { TdClassNamePefix } from '../utils'
 
-@tag("t-button")
-export default class Button extends WeElement<ButtonProps>{
-
+@tag('t-button')
+export default class Button extends WeElement<ButtonProps> {
   static propTypes = {
     disabled: Boolean,
     loading: Boolean,
     block: Boolean,
-    ghost: Boolean
+    ghost: Boolean,
   }
-  static css = css as string;
+  static css = css as string
 
   render(props: OmiProps<ButtonProps>) {
+    const { disabled, loading, block, ghost } = props
 
-    const { disabled, loading, block, ghost } = props;
-
-    const { href, icon } = props;
-    const { size, suffix, shape, tag, type, validity } = props;
-    const { onClick } = props;
+    const { href, icon } = props
+    const { size, suffix, shape, tag, type, validity } = props
+    const { onClick } = props
 
     return (
       <button
-        className={
-          classNames(
-            TdClassNamePefix('button'),
-            TdClassNamePefix('button--theme-primary'),
-            TdClassNamePefix('button--variant-base'),
-            {
-              [TdClassNamePefix('size-full-width')]: block
-            },
-            {
-              [TdClassNamePefix('is-loading')]: loading
-            },
-            {
-              [TdClassNamePefix('is-disabled')]: disabled
-            },
-            {
-              [TdClassNamePefix('button--ghost')]: ghost
-            }
-          )
-        }
+        className={classNames(
+          TdClassNamePefix('button'),
+          TdClassNamePefix('button--theme-primary'),
+          TdClassNamePefix('button--variant-base'),
+          {
+            [TdClassNamePefix('size-full-width')]: block,
+          },
+          {
+            [TdClassNamePefix('is-loading')]: loading,
+          },
+          {
+            [TdClassNamePefix('is-disabled')]: disabled,
+          },
+          {
+            [TdClassNamePefix('button--ghost')]: ghost,
+          },
+        )}
       >
-        {
-          loading && (
-            <div
-              style="display:flex;"
-              class={clsx(
-                TdClassNamePefix('loading'),
-                TdClassNamePefix('loading--center'),
-                TdClassNamePefix('size-m'),
-                TdClassNamePefix('loading--inherit-color'),
-              )}>
-              <svg
-                className={
-                  clsx(
-                    TdClassNamePefix('loading__gradient'),
-                    TdClassNamePefix('icon-loading')
-                  )
-                } width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path fill="#FFF" d="M8 1.5C4.41038 1.5 1.5 4.41038 1.5 8C1.5 11.5896 4.41038 14.5 8 14.5V12.875C5.30761 12.875 3.125 10.6924 3.125 8C3.125 5.30761 5.30761 3.125 8 3.125C10.6924 3.125 12.875 5.30761 12.875 8H14.5C14.5 4.41038 11.5896 1.5 8 1.5Z" fill-opacity="0.9" />
-              </svg>
-            </div>
-          )
-        }
-        <span className='t-button__text'>
+        {loading && (
+          <div
+            style="display:flex;"
+            class={clsx(
+              TdClassNamePefix('loading'),
+              TdClassNamePefix('loading--center'),
+              TdClassNamePefix('size-m'),
+              TdClassNamePefix('loading--inherit-color'),
+            )}
+          >
+            <svg
+              className={clsx(TdClassNamePefix('loading__gradient'), TdClassNamePefix('icon-loading'))}
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill="#FFF"
+                d="M8 1.5C4.41038 1.5 1.5 4.41038 1.5 8C1.5 11.5896 4.41038 14.5 8 14.5V12.875C5.30761 12.875 3.125 10.6924 3.125 8C3.125 5.30761 5.30761 3.125 8 3.125C10.6924 3.125 12.875 5.30761 12.875 8H14.5C14.5 4.41038 11.5896 1.5 8 1.5Z"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </div>
+        )}
+        <span className="t-button__text">
           <slot></slot>
         </span>
       </button>

diff --git a/tdesign/desktop/src/link/_example/base.tsx b/tdesign/desktop/src/link/_example/base.tsx
@@ -0,0 +1,13 @@
+import { h, tag, WeElement } from 'omi'
+
+import '../index'
+
+@tag('link-base')
+export default class LinkBase extends WeElement {
+  static css = `t-link {
+    margin: 5px 5px;
+  }`
+  render() {
+    return <t-link theme="primary">跳转链接</t-link>
+  }
+}
diff --git a/tdesign/desktop/src/link/_example/disabled.tsx b/tdesign/desktop/src/link/_example/disabled.tsx
@@ -0,0 +1,35 @@
+import { h, tag, WeElement } from 'omi'
+
+import '../index'
+
+@tag('link-disabled')
+export default class LinkDisabled extends WeElement {
+  static css = `t-link {
+    margin: 5px 5px;
+  }`
+  clickLink = () => {
+    console.log('不触发')
+  }
+  render() {
+    return (
+      <div>
+        <t-link theme="default" disabled onClick={this.clickLink}>
+          查看链接
+        </t-link>
+        <t-link theme="primary" underline disabled onClick={this.clickLink}>
+          查看链接
+        </t-link>
+        <t-link theme="danger" hover="color" disabled onClick={this.clickLink}>
+          查看链接
+        </t-link>
+        <t-link theme="warning" hover="underline" disabled onClick={this.clickLink}>
+          查看链接
+        </t-link>
+        {/* TODO: stuck by Icon, need add suffixIcon={<JumpIcon />} */}
+        <t-link theme="success" disabled onClick={this.clickLink}>
+          查看链接
+        </t-link>
+      </div>
+    )
+  }
+}
diff --git a/tdesign/desktop/src/link/_example/hover.tsx b/tdesign/desktop/src/link/_example/hover.tsx
@@ -0,0 +1,67 @@
+import { h, tag, WeElement } from 'omi'
+
+import '../index'
+
+@tag('link-hover')
+export default class LinkHover extends WeElement {
+  static css = `t-link {
+    margin: 5px 5px;
+  }`
+  render() {
+    return (
+      <div direction="vertical">
+        <div>
+          <t-link theme="default" hover="underline">
+            跳转链接
+          </t-link>
+          <t-link theme="primary" hover="underline">
+            跳转链接
+          </t-link>
+          <t-link theme="danger" hover="underline">
+            跳转链接
+          </t-link>
+          <t-link theme="warning" hover="underline">
+            跳转链接
+          </t-link>
+          <t-link theme="success" hover="underline">
+            跳转链接
+          </t-link>
+        </div>
+        <div>
+          <t-link theme="default" hover="color">
+            跳转链接
+          </t-link>
+          <t-link theme="primary" hover="color">
+            跳转链接
+          </t-link>
+          <t-link theme="danger" hover="color">
+            跳转链接
+          </t-link>
+          <t-link theme="warning" hover="color">
+            跳转链接
+          </t-link>
+          <t-link theme="success" hover="color">
+            跳转链接
+          </t-link>
+        </div>
+        <div>
+          <t-link theme="default" hover="color" underline>
+            跳转链接
+          </t-link>
+          <t-link theme="primary" hover="color" underline>
+            跳转链接
+          </t-link>
+          <t-link theme="danger" hover="color" underline>
+            跳转链接
+          </t-link>
+          <t-link theme="warning" hover="color" underline>
+            跳转链接
+          </t-link>
+          <t-link theme="success" hover="color" underline>
+            跳转链接
+          </t-link>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/tdesign/desktop/src/link/_example/icon.tsx b/tdesign/desktop/src/link/_example/icon.tsx
@@ -0,0 +1,27 @@
+import { h, tag, WeElement } from 'omi'
+
+import '../index'
+
+@tag('link-icon')
+export default class LinkIcon extends WeElement {
+  static css = `t-link {
+    margin: 5px 5px;
+  }`
+  render() {
+    return (
+      // TODO: stuck by icon, need to add prefixIcon
+      <div>
+        <t-link theme="default">跳转链接</t-link>
+        <t-link theme="primary" underline href="https://tdesign.tencent.com/" target="_self">
+          跳转链接
+        </t-link>
+        <t-link theme="danger" underline href="https://tdesign.tencent.com/" target="_self">
+          跳转链接
+        </t-link>
+        <t-link theme="warning" underline href="https://tdesign.tencent.com/" target="_self" disabled>
+          跳转链接
+        </t-link>
+      </div>
+    )
+  }
+}
diff --git a/tdesign/desktop/src/link/_example/size.tsx b/tdesign/desktop/src/link/_example/size.tsx
@@ -0,0 +1,71 @@
+import { h, tag, WeElement } from 'omi'
+
+import '../index'
+
+@tag('link-size')
+export default class LinkSize extends WeElement {
+  static css = `t-link {
+    margin: 5px 5px;
+  }`
+  clickLink = () => {
+    console.log('不触发')
+  }
+  render() {
+    return (
+      // TODO: stuck by Icon, need to add suffixIcon and Space
+      <div direction="vertical">
+        <div>
+          <t-link theme="default" size="small">
+            跳转链接
+          </t-link>
+          <t-link theme="primary" size="small">
+            跳转链接
+          </t-link>
+          <t-link theme="danger" size="small">
+            跳转链接
+          </t-link>
+          <t-link theme="warning" size="small" disabled>
+            跳转链接
+          </t-link>
+          <t-link theme="success" size="small">
+            跳转链接
+          </t-link>
+        </div>
+        <div>
+          <t-link theme="default" size="medium">
+            跳转链接
+          </t-link>
+          <t-link theme="primary" size="medium">
+            跳转链接
+          </t-link>
+          <t-link theme="danger" size="medium">
+            跳转链接
+          </t-link>
+          <t-link theme="warning" size="medium" disabled>
+            跳转链接
+          </t-link>
+          <t-link theme="success" size="medium">
+            跳转链接
+          </t-link>
+        </div>
+        <div>
+          <t-link theme="default" size="large">
+            跳转链接
+          </t-link>
+          <t-link theme="primary" size="large">
+            跳转链接
+          </t-link>
+          <t-link theme="danger" size="large">
+            跳转链接
+          </t-link>
+          <t-link theme="warning" size="large" disabled>
+            跳转链接
+          </t-link>
+          <t-link theme="success" size="large">
+            跳转链接
+          </t-link>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/tdesign/desktop/src/link/theme.tsx → tdesign/desktop/src/link/_example/theme.tsx b/tdesign/desktop/src/link/theme.tsx → tdesign/desktop/src/link/_example/theme.tsx
@@ -1,13 +1,13 @@
-import { h, tag, render, WeElement } from 'omi'
+import { h, tag, WeElement } from 'omi'
 
-import './link'
+import '../index'
 
 @tag('link-theme')
-export default class LinkTheme extends WeElement<Props> {
-  static css = `
-    t-link{ margin: 0 5px }
-  `
-  render(props) {
+export default class LinkTheme extends WeElement {
+  static css = `t-link {
+    margin: 5px 5px;
+  }`
+  render() {
     return (
       <div>
         <t-link theme="default">跳转链接</t-link>
@@ -19,7 +19,3 @@ export default class LinkTheme extends WeElement<Props> {
     )
   }
 }
-
-render(<link-theme></link-theme>, 'body', {
-  ignoreAttrs: true
-})