Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(message): add message #136

Merged
merged 5 commits into from
Sep 18, 2024
Merged

feat(message): add message #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a4f3b61
feat(message): add message
Tzz1194593491 Sep 5, 2024
2682570
feat: replace where message needs to be used in the case
Tzz1194593491 Sep 6, 2024
c49edfe
fix: add defaultProps and propTypes for message and mesaageComponent
Tzz1194593491 Sep 18, 2024
efc37dd
fix: fix confilt
Tzz1194593491 Sep 18, 2024
fb29cba
feat: update _common
Tzz1194593491 Sep 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion site/sidebar.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -310,7 +310,7 @@ export default [
title: 'Message 全局提示',
name: 'message',
path: '/components/message',
// component: () => import('tdesign-web-components/message/README.md'),
component: () => import('tdesign-web-components/message/README.md'),
},
{
title: 'Notification 消息通知',
Expand Down
2 changes: 1 addition & 1 deletion src/_common
Open in desktop
Submodule _common updated 174 files
3 changes: 2 additions & 1 deletion src/card/_example/bordered-none.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import 'tdesign-web-components/card';

import { bind, Component } from 'omi';
import { MessagePlugin } from 'tdesign-web-components/message/message.tsx';

export default class Button extends Component {
@bind
clickHandler() {
console.log('操作');
MessagePlugin.info('操作');
}

render() {
Expand Down
3 changes: 2 additions & 1 deletion src/card/_example/footer-actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import 'tdesign-icons-web-components/esm/components/heart';
import 'tdesign-icons-web-components/esm/components/more';

import { Component } from 'omi';
import { MessagePlugin } from 'tdesign-web-components/message/message.tsx';

interface Option {
content: string;
Expand All @@ -33,7 +34,7 @@ export default class Button extends Component {
];

clickHandler: ClickHandler = (data) => {
console.log(`选中【${data.value}】`);
MessagePlugin.info(`选中【${data.value}】`);
};

render() {
Expand Down
3 changes: 2 additions & 1 deletion src/card/_example/footer-content-actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import 'tdesign-web-components/comment';
import 'tdesign-web-components/grid';

import { Component } from 'omi';
import { MessagePlugin } from 'tdesign-web-components/message/message.tsx';

interface Option {
content: string;
Expand All @@ -24,7 +25,7 @@ export default class Button extends Component {
];

clickHandler: ClickHandler = (data) => {
console.log(`选中【${data.value}】`);
MessagePlugin.info(`选中【${data.value}】`);
};

render() {
Expand Down
3 changes: 2 additions & 1 deletion src/card/_example/header-bordered.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import 'tdesign-web-components/card';

import { bind, Component } from 'omi';
import { MessagePlugin } from 'tdesign-web-components/message/message.tsx';

export default class Button extends Component {
@bind
clickHandler() {
// 缺少Message全局提示组件，暂用alert代替
console.log('操作');
MessagePlugin.info('操作');
}

render() {
Expand Down
3 changes: 2 additions & 1 deletion src/card/_example/header-footer-actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import 'tdesign-icons-web-components/esm/components/share';
import 'tdesign-icons-web-components/esm/components/more';

import { Component } from 'omi';
import { MessagePlugin } from 'tdesign-web-components/message/message.tsx';

interface Option {
content: string;
Expand All @@ -29,7 +30,7 @@ export default class Button extends Component {
];

clickHandler: ClickHandler = (data) => {
console.log(`选中【${data.value}】`);
MessagePlugin.info(`选中【${data.value}】`);
};

render() {
Expand Down
3 changes: 2 additions & 1 deletion src/card/_example/header-subtitle-footer-actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import 'tdesign-icons-web-components/esm/components/share';
import 'tdesign-icons-web-components/esm/components/more';

import { Component } from 'omi';
import { MessagePlugin } from 'tdesign-web-components/message/message.tsx';

interface Option {
content: string;
Expand All @@ -28,7 +29,7 @@ export default class Button extends Component {
];

clickHandler: ClickHandler = (data) => {
console.log(`选中【${data.value}】`);
MessagePlugin.info(`选中【${data.value}】`);
};

render() {
Expand Down
3 changes: 2 additions & 1 deletion src/card/_example/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import 'tdesign-web-components/card';

import { bind, Component } from 'omi';
import { MessagePlugin } from 'tdesign-web-components/message/message.tsx';

export default class Button extends Component {
@bind
clickHandler() {
console.log('操作');
MessagePlugin.info('操作');
}

render() {
Expand Down
3 changes: 2 additions & 1 deletion src/dropdown/_example/base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import 'tdesign-icons-web-components';
import 'tdesign-web-components/dropdown';

import { DropdownProps } from 'tdesign-web-components/dropdown';
import { MessagePlugin } from 'tdesign-web-components/message/message.tsx';

export default function BasicDropdown() {
const getContent = () => <div>操作四</div>;
Expand All @@ -25,7 +26,7 @@ export default function BasicDropdown() {
},
];
const clickHandler: DropdownProps['onClick'] = (data) => {
console.log(`选中【${data.value}】`);
MessagePlugin.info(`选中【${data.value}】`);
};
return (
<t-dropdown options={options} onClick={clickHandler}>
Expand Down
4 changes: 3 additions & 1 deletion src/dropdown/_example/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import 'tdesign-icons-web-components';
import 'tdesign-web-components/dropdown';
import 'tdesign-web-components/button';

import { MessagePlugin } from 'tdesign-web-components/message/message.tsx';

export default function BasicDropdown() {
const getContent = () => <div>操作四</div>;
const options = [
Expand All @@ -23,7 +25,7 @@ export default function BasicDropdown() {
},
];
const clickHandler = (data) => {
console.log(`选中【${data.value}】`);
MessagePlugin.info(`选中【${data.value}】`);
};
return (
<t-dropdown options={options} onClick={clickHandler}>
Expand Down
126 changes: 126 additions & 0 deletions src/message/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
---
title: Message 全局提示
description: 对用户的操作作出轻量的全局反馈。
isComponent: true
usage: { title: '', description: '' }
spline: base
---

### 普通全局提示

{{ base }}

### 加载中信息提示

{{ baseLoading }}

### 带关闭按钮带全局通知

{{ baseClose }}

### 使用关闭函数控制全局提示

{{ baseControl }}

### 关闭多条全局提示

{{ baseControlMore }}

### 控制全局提示显示位置

{{ baseControlPosition }}

### 函数式调用

{{ baseControlFunction }}

## API

### Message Props

| 名称 | 类型 | 默认值 | 说明 | 必传 |
|-----------------|----------|-------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----|
| className | String | - | 类名 | N |
| style | Object | - | 样式，TS 类型：`Record<string, string \| number>` | N |
| closeBtn | TNode | false | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。也可以完全自定义按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/main/src/common.ts) | N |
| content | TNode | - | 用于自定义消息弹出内容。TS 类型：`string \| TNode`。 [通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/main/src/common.ts) | N |
| duration | Number | 3000 | 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器。 [通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/main/src/common.ts) | N |
| icon | TNode | true | 用于自定义消息前面的图标，优先级大于 theme 设定的图标。值为 false 则不显示图标，值为 true 显示 theme 设定图标。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/main/src/common.ts) | N |
| theme | String | info | 消息组件风格。可选项：info/success/warning/error/question/loading。TS 类型：`MessageThemeList type MessageThemeList = 'info' \| 'success' \| 'warning' \| 'error' \| 'question' \| 'loading'`。 | N |
| onClose | Function | - | TS 类型：`(context: { trigger: 'close-click' \| 'duration-end', e?: MouseEvent }) => void `关闭消息时触发 | N |
| onCloseBtnClick | Function | - | TS 类型：`(context: { e: MouseEvent }) => void`当关闭按钮存在时，用户点击关闭按钮触发 | N |
| onDurationEnd | Function | - | TS 类型：`() => void`计时结束后触发 | N |

### MessageOptions

| 名称 | 类型 | 默认值 | 说明 | 必传 |
|----------------|-------------------|--------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----|
| attach | String / Function | 'body' | 指定弹框挂载的父节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。 | N |
| className | String | - | 类名 | N |
| offset | Array | - | 相对于 placement 的偏移量，示例：[-10, 20] 或 ['10em', '8rem']。TS 类型：`Array<string \| number>` | N |
| placement | String | top | 弹出消息位置。可选项：center/top/left/right/bottom/top-left/top-right/bottom-left/bottom-right。TS 类型：MessagePlacementList type MessagePlacementList = `'center'\| 'top' \| 'left' \| 'right' \| 'bottom' \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`。 | N |
| style | Object | - | 样式，TS 类型：`Record<string, string \| number>` | N |
| zIndex | Number | 5000 | 消息层级 | N |
| `MessageProps` | - | - | 继承 `¬MessageProps` 中的全部 API | N |

### message 或 MessagePlugin

| 参数名称 | 参数类型 | 参数默认值 | 参数说明 |
|----------|-----------------|-------|------------------------------------------|
| theme | String | - | 必需。消息类型。TS 类型：`MessageThemeList` |
| message | String / Object | - | 必需。消息内容。TS 类型：`string \| MessageOptions` |
| duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表示永久显示 |

### message.info 或 MessagePlugin.info

| 参数名称 | 参数类型 | 参数默认值 | 参数说明 |
|----------|-----------------|-------|------------------------------------------|
| message | String / Object | - | 必需。消息内容。TS 类型：`string \| MessageOptions` |
| duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表示永久显示 |

### message.error 或 MessagePlugin.error

| 参数名称 | 参数类型 | 参数默认值 | 参数说明 |
|----------|-----------------|-------|------------------------------------------|
| message | String / Object | - | 必需。消息内容。TS 类型：`string \| MessageOptions` |
| duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表示永久显示 |

### message.warning 或 MessagePlugin.warning

| 参数名称 | 参数类型 | 参数默认值 | 参数说明 |
|----------|-----------------|-------|------------------------------------------|
| message | String / Object | - | 必需。消息内容。TS 类型：`string \| MessageOptions` |
| duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表示永久显示 |

### message.success 或 MessagePlugin.success

| 参数名称 | 参数类型 | 参数默认值 | 参数说明 |
|----------|-----------------|-------|------------------------------------------|
| message | String / Object | - | 必需。消息内容。TS 类型：`string \| MessageOptions` |
| duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表示永久显示 |

### message.loading 或 MessagePlugin.loading

| 参数名称 | 参数类型 | 参数默认值 | 参数说明 |
|----------|-----------------|-------|------------------------------------------|
| message | String / Object | - | 必需。消息内容。TS 类型：`string \| MessageOptions` |
| duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表示永久显示 |

### message.question 或 MessagePlugin.question

| 参数名称 | 参数类型 | 参数默认值 | 参数说明 |
|----------|-----------------|-------|------------------------------------------|
| message | String / Object | - | 必需。消息内容。TS 类型：`string \| MessageOptions` |
| duration | Number | 3000 | 消息显示时长，单位：毫秒。值为 0 表示永久显示 |

### message.closeAll 或 MessagePlugin.closeAll

| 参数名称 | 参数类型 | 参数默认值 | 参数说明 |
|------|------|-------|------|
| - | - | - | - |

### message.config 或 MessagePlugin.config

| 参数名称 | 参数类型 | 参数默认值 | 参数说明 |
|---------|--------|-------|--------------------------------------|
| message | Object | - | 必需。全局提醒插件全局配置。TS 类型：`MessageOptions` |
28 changes: 28 additions & 0 deletions src/message/_example/base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import 'tdesign-web-components/message';
import 'tdesign-web-components/space';

import { Component } from 'omi';

export default class MessageRender extends Component {
render() {
return (
<t-space direction="vertical">
<t-message duration={0} theme="info">
用户表示普通操作信息提示
</t-message>
<t-message duration={0} theme="success">
用户表示操作引起一定后果
</t-message>
<t-message duration={0} theme="warning">
用于表示操作顺利达成
</t-message>
<t-message duration={0} theme="error">
用于表示操作引起严重的后果
</t-message>
<t-message duration={0} theme="question">
用于帮助用户操作的信息提示
</t-message>
</t-space>
);
}
}
26 changes: 26 additions & 0 deletions src/message/_example/baseClose.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import 'tdesign-web-components/message';
import 'tdesign-web-components/space';
import 'tdesign-web-components/button';

import { Component } from 'omi';

export default class MessageRender extends Component {
render() {
return (
<t-space direction="vertical">
<t-message duration={0} theme={'info'} closeBtn={true}>
默认关闭按钮
</t-message>
<t-message duration={0} theme={'info'} closeBtn={'关闭'}>
自定义关闭按钮（文字）
</t-message>
<t-message duration={0} theme={'info'} closeBtn={<div>x</div>}>
自定义关闭按钮（ReactNode）
</t-message>
<t-message duration={0} theme={'info'} closeBtn={<div onClick={() => console.log('close')}>x</div>}>
自定义关闭按钮（函数）
</t-message>
</t-space>
);
}
}
30 changes: 30 additions & 0 deletions src/message/_example/baseControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import 'tdesign-web-components/message';
import 'tdesign-web-components/space';
import 'tdesign-web-components/button';

import { Component, signal } from 'omi';
import { MessagePlugin } from 'tdesign-web-components';

export default class MessageRender extends Component {
instance = signal<any>(null);

render() {
const isMessageOpen = this.instance.value === null;
const buttonTips = isMessageOpen ? '打开' : '关闭';
return (
<t-button
onClick={() => {
if (isMessageOpen) {
const ins = MessagePlugin.info('调用关闭函数关闭信息提示框', 0);
this.instance.value = ins;
} else {
MessagePlugin.close(this.instance.value);
this.instance.value = null;
}
}}
>
自由控制关闭时机（{buttonTips}）
</t-button>
);
}
}
Loading
Loading