Skip to content

Commit

Permalink
refactor(Message): improve ts, doc and tc
Browse files Browse the repository at this point in the history 
refactor(Message): fix eslint

refactor(Message): fix code review

refactor(Message): fix code review again

refactor(Message): fix code review again

refactor(Message): fix code review again

refactor(Message): code review

refactor(Message): code review
  • Loading branch information
萌鱼 committed Jun 7, 2024
1 parent ab2d13d commit d5e5768
Show file tree
Hide file tree
Showing 14 changed files with 527 additions and 588 deletions.
23 changes: 22 additions & 1 deletion components/message/__docs__/adaptor/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,17 @@ import React from 'react';
import { Message } from '@alifd/next';
import { Types } from '@alifd/adaptor-helper';

interface AdaptorProps {
level: 'inline' | 'toast' | 'addon';
size: 'large' | 'medium';
state: 'success' | 'warning' | 'error' | 'notice' | 'help' | 'loading';
closable: boolean;
width: number;
title: string;
data: string;
style: React.CSSProperties;
}

export default {
name: 'Message',
editor: () => ({
Expand Down Expand Up @@ -47,7 +58,17 @@ export default {
default: 'This item already has the label "travel", you can add a new label.',
},
}),
adaptor: ({ level, size, state, closable, width, title, data, style, ...others }) => {
adaptor: ({
level,
size,
state,
closable,
width,
title,
data,
style,
...others
}: AdaptorProps) => {
return (
<Message
{...others}
Expand Down
22 changes: 11 additions & 11 deletions components/message/__docs__/demo/size-shape/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import { Message, Radio } from '@alifd/next';

const types = ['success', 'warning', 'error', 'notice', 'help', 'loading'];
const types = ['success', 'warning', 'error', 'notice', 'help', 'loading'] as const;
const sizeList = [
{
value: 'medium',
Expand All @@ -27,21 +27,21 @@ const shapeList = [
label: 'toast',
},
];

interface State {
size: 'medium' | 'large';
shape: 'inline' | 'addon' | 'toast';
}
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
size: 'medium',
shape: 'inline',
};
}
state: State = {
size: 'medium',
shape: 'inline',
};

handleSize = size => {
handleSize = (size: State['size']) => {
this.setState({ size });
};

handleShape = shape => {
handleShape = (shape: State['shape']) => {
this.setState({ shape });
};

Expand Down
1 change: 1 addition & 0 deletions components/message/__docs__/demo/withContext/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<a target="_blank" rel="noopener noreferrer" href="https://codepen.io/acejerry/pen/ZEOQjzr">
点击查看 Message.withContext Demo
Expand Down
71 changes: 35 additions & 36 deletions components/message/__docs__/index.en-us.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,51 +13,52 @@

### Message

| Param | Descripiton | Type | Default Value |
| -------------- | ---------------------------------------------------------------------------------- | --------- | --------- |
| size | size of message<br><br>**option**:<br>'medium', 'large' | Enum | 'medium' |
| type | type of message<br><br>**option**:<br>'success', 'warning', 'error', 'notice', 'help', 'loading' | Enum | 'success' |
| shape | shape of message<br><br>**option**:<br>'inline', 'addon', 'toast' | Enum | 'inline' |
| title | title of message | ReactNode | - |
| children | content of message | ReactNode | - |
| defaultVisible | whether the message is visible in default | Boolean | true |
| visible | whether the message is visible currently | Boolean | - |
| iconType | type of icon, overriding the internally type of icon | String | - |
| closeable | whether to show the close button | Boolean | false |
| onClose | callback function triggered when close<br><br>**signatures**:<br>Function() => void | Function | () => {} |
| afterClose | callback function triggered after closed<br><br>**signatures**:<br>Function() => void | Function | () => {} |
| animation | whether to enable expand and collapse animation | Boolean | true |

<!-- api-extra-start -->
| Param | Description | Type | Default Value | Required |
| -------------- | ---------------------------------------------------- | -------------------------------------------------------------------- | ------------- | -------- |
| type | Type of message | 'success' \| 'warning' \| 'error' \| 'notice' \| 'help' \| 'loading' | 'success' | |
| shape | Shape of message | 'inline' \| 'addon' \| 'toast' | 'inline' | |
| size | Size of message | 'medium' \| 'large' | 'medium' | |
| title | Title of message | React.ReactNode | - | |
| children | Content of message | React.ReactNode | - | |
| defaultVisible | Whether the message is visible in default | boolean | false | |
| visible | Whether the message is visible currently | boolean | - | |
| iconType | Type of icon, overriding the internally type of icon | string \| false | - | |
| closeable | Whether to show the close button | boolean | false | |
| onClose | Callback function triggered when close | () => void | () =\> \{\} | |
| afterClose | Callback function triggered after closed | () => void | () =\> \{\} | |
| animation | Whether to enable expand and collapse animation | boolean | true | |

### Message.show

`Message.show(props)` provides a singleton call with the following configuration parameters (inheriting `Overlay` configuration):

| Param | Descripiton | Type | Default Value |
| ------------ | --------------------------------------------------------------------------------------------------- | --------- | --------- |
| type | type of message | String | 'success' |
| title | title of message | ReactNode | - |
| content | content of message | ReactNode | - |
| duration | show duration, 0 means always present, in milliseconds | Number | 3000 |
| align | alignment reference Overlay | String | 'tc tc' |
| offset | offset after positioned | Array | [0, 0] |
| hasMask | whether to have a mask | Boolean | false |
| closeable | whether to show the close button | Boolean | false |
| afterClose | callback function triggered after closed | Function | - |
| overlayProps | props of Overlay | Object | - |

Example:

```js
Message.show({
type: 'error',
title: 'Error',
content: 'Please contact admin feedback!',
hasMask: true
hasMask: true,
});
```

| Param | Description | Type | Default Value | Required |
| ------------ | ------------------------------------------------------ | -------------------------------------------------------------------- | ------------- | -------- |
| type | Type of message | 'success' \| 'warning' \| 'error' \| 'notice' \| 'help' \| 'loading' | 'success' | |
| size | Size of message | 'medium' \| 'large' | 'medium' | |
| title | Title of message | React.ReactNode | - | |
| content | Content of message | React.ReactNode | - | |
| align | Alignment reference Overlay | string \| boolean | 'tc tc' | |
| offset | Offset after positioned | Array\<number> | [0, 0] | |
| hasMask | Whether to have a mask | boolean | false | |
| duration | Show duration, 0 means always present, in milliseconds | number | 3000 | |
| closeable | Whether to show the close button | boolean | false | |
| onClose | Callback function triggered when close | () => void | () =\> \{\} | |
| afterClose | Callback function triggered after closed | () => void | () =\> \{\} | |
| animation | Whether to enable expand and collapse animation | boolean | true | |
| overlayProps | Props of Overlay | OverlayProps | - | |

<!-- api-extra-start -->

### Message.hide

`Message.hide()` provides a quick way to close the message.
Expand All @@ -74,14 +75,12 @@ Message.success('message content');
// or
Message.success({
title: 'message content',
duration: 1000
duration: 1000,
});
```

<!-- api-extra-end -->



## ARIA and KeyBoard

`Description`: This component needs to be used in conjunction with other components to be prompted. Refer to the above `accessibility`
`Description`: This component needs to be used in conjunction with other components to be prompted. Refer to the above `accessibility`
Loading

0 comments on commit d5e5768

Please sign in to comment.