diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js index 0cbb5c40..4dc0fc04 100644 --- a/site/mobile/mobile.config.js +++ b/site/mobile/mobile.config.js @@ -222,5 +222,10 @@ export default { name: 'result', component: () => import('tdesign-mobile-react/result/_example/index.tsx'), }, + { + title: 'Link 链接', + name: 'link', + component: () => import('tdesign-mobile-react/link/_example/index.tsx'), + }, ], }; diff --git a/site/web/site.config.js b/site/web/site.config.js index 09c74e11..d5364146 100644 --- a/site/web/site.config.js +++ b/site/web/site.config.js @@ -40,13 +40,18 @@ export default { path: '/mobile-react/components/fab', component: () => import('tdesign-mobile-react/fab/fab.md'), }, - { title: 'Icon 图标', name: 'icon', path: '/mobile-react/components/icon', component: () => import('tdesign-mobile-react/icon/icon.md'), }, + { + title: 'Link 链接', + name: 'link', + path: '/mobile-react/components/link', + component: () => import('tdesign-mobile-react/link/link.md'), + }, ], }, { diff --git a/src/_common b/src/_common index 762c4d5d..cfcad47f 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 762c4d5d576db1262a4c26d03b133077422749ca +Subproject commit cfcad47f9c27eaf31ad50de07347f8c07685a090 diff --git a/src/index.ts b/src/index.ts index d65a3061..de363141 100644 --- a/src/index.ts +++ b/src/index.ts @@ -5,6 +5,7 @@ export * from './button'; export * from './divider'; export * from './fab'; export * from './progress'; +export * from './link'; /** * 导航（5个） diff --git a/src/link/Link.tsx b/src/link/Link.tsx new file mode 100644 index 00000000..425c9290 --- /dev/null +++ b/src/link/Link.tsx @@ -0,0 +1,67 @@ +import classNames from 'classnames'; +import React from 'react'; +import useConfig from '../_util/useConfig'; +import { TdLinkProps } from './type'; +import { StyledProps } from '../common'; +import parseTNode from '../_util/parseTNode'; +import useDefaultProps from '../hooks/useDefaultProps'; +import { linkDefaultProps } from './defaultProps'; + +export interface LinkProps extends TdLinkProps, StyledProps {} + +const Link = React.forwardRef((props, ref) => { + const { + children, + content, + className, + underline, + prefixIcon, + suffixIcon, + theme, + disabled, + hover, + onClick, + href, + size, + ...otherProps + } = useDefaultProps(props, linkDefaultProps); + + const { classPrefix } = useConfig(); + + const childNode = content || children; + + const handleClick = (e: React.MouseEvent) => { + if (disabled) { + return; + } + onClick?.(e); + }; + + return ( + + {prefixIcon && {parseTNode(prefixIcon)}} + {childNode && {parseTNode(childNode)}} + {suffixIcon && {parseTNode(suffixIcon)}} + + ); +}); + +Link.displayName = 'Link'; + +export default Link; diff --git a/src/link/_example/base.tsx b/src/link/_example/base.tsx new file mode 100644 index 00000000..8b1341cd --- /dev/null +++ b/src/link/_example/base.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { Link } from 'tdesign-mobile-react'; + +import './style/index.less'; + +export default function Base() { + return ( +
+ 跳转链接 + 跳转链接 +
+ ); +} diff --git a/src/link/_example/index.tsx b/src/link/_example/index.tsx new file mode 100644 index 00000000..88a10704 --- /dev/null +++ b/src/link/_example/index.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import TDemoBlock from '../../../site/mobile/components/DemoBlock'; +import TDemoHeader from '../../../site/mobile/components/DemoHeader'; +import BaseDemo from './base'; +import ThemeDemo from './theme'; +import SizeDemo from './linkSize'; +import UnderlineDemo from './underline'; +import PrefixDemo from './prefix'; +import SuffixDemo from './suffix'; +import StatusDemo from './status'; + +import './style/index.less'; + +export default function LinkDemo() { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + +
+ ); +} diff --git a/src/link/_example/linkSize.tsx b/src/link/_example/linkSize.tsx new file mode 100644 index 00000000..f0a77530 --- /dev/null +++ b/src/link/_example/linkSize.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { Link } from 'tdesign-mobile-react'; + +export default function Size() { + return ( +
+ + S跳转链接 + + + M跳转链接 + + + L跳转链接 + +
+ ); +} diff --git a/src/link/_example/prefix.tsx b/src/link/_example/prefix.tsx new file mode 100644 index 00000000..7a1a617f --- /dev/null +++ b/src/link/_example/prefix.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { LinkIcon } from 'tdesign-icons-react'; +import { Link } from 'tdesign-mobile-react'; + +export default function Prefix() { + return ( +
+ }> + 跳转链接 + + }> + 跳转链接 + +
+ ); +} diff --git a/src/link/_example/status.tsx b/src/link/_example/status.tsx new file mode 100644 index 00000000..303b4c46 --- /dev/null +++ b/src/link/_example/status.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { Link } from 'tdesign-mobile-react'; +import { JumpIcon } from 'tdesign-icons-react'; + +import './style/index.less'; + +export default function Status() { + return ( + <> +
+ } disabled> + 跳转链接 + + } disabled> + 跳转链接 + + } disabled> + 跳转链接 + +
+
+ } disabled> + 跳转链接 + + } disabled> + 跳转链接 + +
+ + ); +} diff --git a/src/link/_example/style/index.less b/src/link/_example/style/index.less new file mode 100644 index 00000000..bcb05463 --- /dev/null +++ b/src/link/_example/style/index.less @@ -0,0 +1,8 @@ +.demo-content { + height: 48px; + background-color: var(--bg-color-demo, #fff); + display: flex; + justify-content: space-around; + margin-bottom: 6.4vw; + align-items: center; +} diff --git a/src/link/_example/suffix.tsx b/src/link/_example/suffix.tsx new file mode 100644 index 00000000..e0b2e7cc --- /dev/null +++ b/src/link/_example/suffix.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { JumpIcon } from 'tdesign-icons-react'; +import { Link } from 'tdesign-mobile-react'; + +export default function Suffix() { + return ( +
+ }> + 跳转链接 + + }> + 跳转链接 + +
+ ); +} diff --git a/src/link/_example/theme.tsx b/src/link/_example/theme.tsx new file mode 100644 index 00000000..5028e8ba --- /dev/null +++ b/src/link/_example/theme.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { Link } from 'tdesign-mobile-react'; +import { JumpIcon } from 'tdesign-icons-react'; + +import './style/index.less'; + +export default function Theme() { + return ( + <> +
+ }> + 跳转链接 + + }>跳转链接 + }> + 跳转链接 + +
+
+ }> + 跳转链接 + + }> + 跳转链接 + +
+ + ); +} diff --git a/src/link/_example/underline.tsx b/src/link/_example/underline.tsx new file mode 100644 index 00000000..d53b79d1 --- /dev/null +++ b/src/link/_example/underline.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { Link } from 'tdesign-mobile-react'; + +export default function Underline() { + return ( +
+ + 跳转链接 + + + 跳转链接 + +
+ ); +} diff --git a/src/link/defaultProps.ts b/src/link/defaultProps.ts new file mode 100755 index 00000000..940972e1 --- /dev/null +++ b/src/link/defaultProps.ts @@ -0,0 +1,7 @@ +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdLinkProps } from './type'; + +export const linkDefaultProps: TdLinkProps = { disabled: undefined, size: 'medium', theme: 'default' }; diff --git a/src/link/index.ts b/src/link/index.ts new file mode 100644 index 00000000..982e5c1e --- /dev/null +++ b/src/link/index.ts @@ -0,0 +1,8 @@ +import _Link from './Link'; + +import './style/index.js'; + +export type { LinkProps } from './Link'; + +export const Link = _Link; +export default Link; diff --git a/src/link/link.en-US.md b/src/link/link.en-US.md new file mode 100644 index 00000000..ada84f8d --- /dev/null +++ b/src/link/link.en-US.md @@ -0,0 +1,23 @@ +:: BASE_DOC :: + +## API + + +### Link Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +disabled | Boolean | undefined | make link to be disabled | N +hover | Boolean | - | \- | N +href | String | - | \- | N +prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +suffixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +target | String | - | target is an attribute of `` | N +theme | String | default | options: default/primary/danger/warning/success | N +underline | Boolean | - | \- | N +onClick | Function | | Typescript：`(e: MouseEvent) => void`
click event, it won't trigger when it's disabled | N diff --git a/src/link/link.md b/src/link/link.md new file mode 100644 index 00000000..f3883768 --- /dev/null +++ b/src/link/link.md @@ -0,0 +1,23 @@ +:: BASE_DOC :: + +## API + + +### Link Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +children | TNode | - | 链接内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +content | TNode | - | 链接内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +disabled | Boolean | undefined | 禁用链接。优先级：Link.disabled > Form.disabled | N +hover | Boolean | - | 是否开启点击反馈 | N +href | String | - | 跳转链接 | N +prefixIcon | TElement | - | 前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +size | String | medium | 尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +suffixIcon | TElement | - | 后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +target | String | - | 跳转方式，如：当前页面打开、新页面打开等，同 HTML 属性 target 含义相同 | N +theme | String | default | 组件风格，依次为默认色、品牌色、危险色、警告色、成功色。可选项：default/primary/danger/warning/success | N +underline | Boolean | - | 是否显示链接下划线 | N +onClick | Function | | TS 类型：`(e: MouseEvent) => void`
点击事件，禁用状态不会触发点击事件 | N diff --git a/src/link/style/css.js b/src/link/style/css.js new file mode 100644 index 00000000..6a9a4b13 --- /dev/null +++ b/src/link/style/css.js @@ -0,0 +1 @@ +import './index.css'; diff --git a/src/link/style/index.js b/src/link/style/index.js new file mode 100644 index 00000000..7da1071d --- /dev/null +++ b/src/link/style/index.js @@ -0,0 +1 @@ +import '../../_common/style/mobile/components/link/v2/_index.less'; diff --git a/src/link/type.ts b/src/link/type.ts new file mode 100644 index 00000000..d271ce24 --- /dev/null +++ b/src/link/type.ts @@ -0,0 +1,63 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TNode, TElement, SizeEnum } from '../common'; +import { MouseEvent } from 'react'; + +export interface TdLinkProps { + /** + * 链接内容，同 content + */ + children?: TNode; + /** + * 链接内容 + */ + content?: TNode; + /** + * 禁用链接。优先级：Link.disabled > Form.disabled + */ + disabled?: boolean; + /** + * 是否开启点击反馈 + */ + hover?: boolean; + /** + * 跳转链接 + * @default '' + */ + href?: string; + /** + * 前置图标 + */ + prefixIcon?: TElement; + /** + * 尺寸 + * @default medium + */ + size?: SizeEnum; + /** + * 后置图标 + */ + suffixIcon?: TElement; + /** + * 跳转方式，如：当前页面打开、新页面打开等，同 HTML 属性 target 含义相同 + * @default '' + */ + target?: string; + /** + * 组件风格，依次为默认色、品牌色、危险色、警告色、成功色 + * @default default + */ + theme?: 'default' | 'primary' | 'danger' | 'warning' | 'success'; + /** + * 是否显示链接下划线 + */ + underline?: boolean; + /** + * 点击事件，禁用状态不会触发点击事件 + */ + onClick?: (e: MouseEvent) => void; +} diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 8c3b8760..fe16d4e4 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -6476,6 +6476,1098 @@ exports[`csr snapshot test > csr test src/input/_example/suffix.tsx 1`] = ` `; +exports[`csr snapshot test > csr test src/link/_example/base.tsx 1`] = ` +
+
+ + + 跳转链接 + + + + + 跳转链接 + + +
+
+`; + +exports[`csr snapshot test > csr test src/link/_example/index.tsx 1`] = ` +
+
+
+

+ Link 链接 +

+

+ 当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布。 +

+
+
+
+

+ 01 组件类型 +

+

+ 基础文字链接 +

+
+
+
+ + + 跳转链接 + + + + + 跳转链接 + + +
+
+
+
+
+

+ 下划线文字链接 +

+
+
+
+ + + 跳转链接 + + + + + 跳转链接 + + +
+
+
+
+
+

+ 前置图标文字链接 +

+
+
+
+ + + + + + + + 跳转链接 + + + + + + + + + + 跳转链接 + + +
+
+
+
+
+

+ 后置图标文字链接 +

+
+
+
+ + + 跳转链接 + + + + + + + + + + 跳转链接 + + + + + + + +
+
+
+
+
+

+ 02 组件状态 +

+

+ 不同主题 +

+
+
+
+ + + 跳转链接 + + + + + + + + + + 跳转链接 + + + + + + + + + + 跳转链接 + + + + + + + +
+
+ + + 跳转链接 + + + + + + + + + + 跳转链接 + + + + + + + +
+
+
+
+
+

+ 禁用状态 +

+
+
+
+ + + 跳转链接 + + + + + + + + + + 跳转链接 + + + + + + + + + + 跳转链接 + + + + + + + +
+
+ + + 跳转链接 + + + + + + + + + + 跳转链接 + + + + + + + +
+
+
+
+
+

+ 03 组件样式 +

+

+ 链接尺寸 +

+
+
+
+ + + S跳转链接 + + + + + M跳转链接 + + + + + L跳转链接 + + +
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/link/_example/linkSize.tsx 1`] = ` +
+
+ + + S跳转链接 + + + + + M跳转链接 + + + + + L跳转链接 + + +
+
+`; + +exports[`csr snapshot test > csr test src/link/_example/prefix.tsx 1`] = ` +
+
+ + + + + + + + 跳转链接 + + + + + + + + + + 跳转链接 + + +
+
+`; + +exports[`csr snapshot test > csr test src/link/_example/status.tsx 1`] = ` +
+
+ + + 跳转链接 + + + + + + + + + + 跳转链接 + + + + + + + + + + 跳转链接 + + + + + + + +
+
+ + + 跳转链接 + + + + + + + + + + 跳转链接 + + + + + + + +
+
+`; + +exports[`csr snapshot test > csr test src/link/_example/suffix.tsx 1`] = ` +
+
+ + + 跳转链接 + + + + + + + + + + 跳转链接 + + + + + + + +
+
+`; + +exports[`csr snapshot test > csr test src/link/_example/theme.tsx 1`] = ` +
+
+ + + 跳转链接 + + + + + + + + + + 跳转链接 + + + + + + + + + + 跳转链接 + + + + + + + +
+
+ + + 跳转链接 + + + + + + + + + + 跳转链接 + + + + + + + +
+
+`; + +exports[`csr snapshot test > csr test src/link/_example/underline.tsx 1`] = ` +
+
+ + + 跳转链接 + + + + + 跳转链接 + + +
+
+`; + exports[`csr snapshot test > csr test src/loading/_example/attach.tsx 1`] = `
ssr test src/input/_example/status.tsx 1`] = `"
ssr test src/input/_example/suffix.tsx 1`] = `"
标签文字
标签文字
标签文字
"`; +exports[`ssr snapshot test > ssr test src/link/_example/base.tsx 1`] = `"
跳转链接跳转链接
"`; + +exports[`ssr snapshot test > ssr test src/link/_example/index.tsx 1`] = `"

Link 链接

当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布。

01 组件类型

基础文字链接

跳转链接跳转链接

下划线文字链接

跳转链接跳转链接

前置图标文字链接

跳转链接跳转链接

后置图标文字链接

跳转链接跳转链接

02 组件状态

不同主题

跳转链接跳转链接跳转链接
跳转链接跳转链接

禁用状态

跳转链接跳转链接跳转链接
跳转链接跳转链接

03 组件样式

链接尺寸

S跳转链接M跳转链接L跳转链接
"`; + +exports[`ssr snapshot test > ssr test src/link/_example/linkSize.tsx 1`] = `"
S跳转链接M跳转链接L跳转链接
"`; + +exports[`ssr snapshot test > ssr test src/link/_example/prefix.tsx 1`] = `"
跳转链接跳转链接
"`; + +exports[`ssr snapshot test > ssr test src/link/_example/status.tsx 1`] = `"
跳转链接跳转链接跳转链接
跳转链接跳转链接
"`; + +exports[`ssr snapshot test > ssr test src/link/_example/suffix.tsx 1`] = `"
跳转链接跳转链接
"`; + +exports[`ssr snapshot test > ssr test src/link/_example/theme.tsx 1`] = `"
跳转链接跳转链接跳转链接
跳转链接跳转链接
"`; + +exports[`ssr snapshot test > ssr test src/link/_example/underline.tsx 1`] = `"
跳转链接跳转链接
"`; + exports[`ssr snapshot test > ssr test src/loading/_example/attach.tsx 1`] = `"
Hello, I\`'m Alice. I\`'m going to be a front-end developer.
"`; exports[`ssr snapshot test > ssr test src/loading/_example/base.tsx 1`] = `"
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index edf43ca9..f0d7165d 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -66,6 +66,22 @@ exports[`ssr snapshot test > ssr test src/input/_example/status.tsx 1`] = `"
ssr test src/input/_example/suffix.tsx 1`] = `"
标签文字
标签文字
标签文字
"`; +exports[`ssr snapshot test > ssr test src/link/_example/base.tsx 1`] = `"
跳转链接跳转链接
"`; + +exports[`ssr snapshot test > ssr test src/link/_example/index.tsx 1`] = `"

Link 链接

当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布。

01 组件类型

基础文字链接

跳转链接跳转链接

下划线文字链接

跳转链接跳转链接

前置图标文字链接

跳转链接跳转链接

后置图标文字链接

跳转链接跳转链接

02 组件状态

不同主题

跳转链接跳转链接跳转链接
跳转链接跳转链接

禁用状态

跳转链接跳转链接跳转链接
跳转链接跳转链接

03 组件样式

链接尺寸

S跳转链接M跳转链接L跳转链接
"`; + +exports[`ssr snapshot test > ssr test src/link/_example/linkSize.tsx 1`] = `"
S跳转链接M跳转链接L跳转链接
"`; + +exports[`ssr snapshot test > ssr test src/link/_example/prefix.tsx 1`] = `"
跳转链接跳转链接
"`; + +exports[`ssr snapshot test > ssr test src/link/_example/status.tsx 1`] = `"
跳转链接跳转链接跳转链接
跳转链接跳转链接
"`; + +exports[`ssr snapshot test > ssr test src/link/_example/suffix.tsx 1`] = `"
跳转链接跳转链接
"`; + +exports[`ssr snapshot test > ssr test src/link/_example/theme.tsx 1`] = `"
跳转链接跳转链接跳转链接
跳转链接跳转链接
"`; + +exports[`ssr snapshot test > ssr test src/link/_example/underline.tsx 1`] = `"
跳转链接跳转链接
"`; + exports[`ssr snapshot test > ssr test src/loading/_example/attach.tsx 1`] = `"
Hello, I\`'m Alice. I\`'m going to be a front-end developer.
"`; exports[`ssr snapshot test > ssr test src/loading/_example/base.tsx 1`] = `"
"`; diff --git a/tsconfig.json b/tsconfig.json index 3fea2cbb..87c3593c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -11,7 +11,6 @@ "lib": ["esnext", "dom"], "importHelpers": true, "allowSyntheticDefaultImports": true, - "suppressImplicitAnyIndexErrors": true, "baseUrl": "./", "paths": { "tdesign-mobile-react": ["src"],