GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

test: ✅ increase coverage of Progress/Comment/Avatar/Dropdown (#24439) 

* test: increase test case of Progress and Comment

* test: add test case for Avatar

* test: add test case for Dropdown

* fix snapshot

* fix snapshot

* remove console.log

* fix lint

* add avatar
pull/24448/head
偏右 5 years ago
committed by GitHub
parent
129975f9dc
commit
a5efa7a81a
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
35 changed files with 388 additions and 264 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      components/avatar/__tests__/Avatar.test.js
  2. 14
      components/avatar/__tests__/__snapshots__/Avatar.test.js.snap
  3. 57
      components/avatar/__tests__/__snapshots__/demo.test.js.snap
  4. 4
      components/avatar/demo/badge.md
  5. 4
      components/avatar/demo/basic.md
  6. 4
      components/avatar/demo/dynamic.md
  7. 4
      components/avatar/demo/toggle-debug.md
  8. 6
      components/avatar/demo/type.md
  9. 95
      components/comment/__tests__/__snapshots__/demo.test.js.snap
  10. 39
      components/comment/__tests__/__snapshots__/index.test.js.snap
  11. 20
      components/comment/__tests__/index.test.js
  12. 4
      components/comment/demo/basic.md
  13. 8
      components/comment/demo/editor.md
  14. 33
      components/comment/index.tsx
  15. 30
      components/config-provider/__tests__/__snapshots__/components.test.js.snap
  16. 6
      components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap
  17. 49
      components/dropdown/__tests__/__snapshots__/index.test.js.snap
  18. 11
      components/dropdown/__tests__/dropdown-button.test.js
  19. 38
      components/dropdown/__tests__/index.test.js
  20. 6
      components/dropdown/dropdown.tsx
  21. 10
      components/progress/Steps.tsx
  22. 112
      components/progress/__tests__/__snapshots__/demo.test.js.snap
  23. 29
      components/progress/__tests__/__snapshots__/index.test.js.snap
  24. 5
      components/progress/__tests__/index.test.js
  25. 10
      components/progress/demo/circle-dynamic.md
  26. 4
      components/progress/demo/circle-mini.md
  27. 4
      components/progress/demo/circle.md
  28. 7
      components/progress/demo/dashboard.md
  29. 10
      components/progress/demo/dynamic.md
  30. 4
      components/progress/demo/format.md
  31. 4
      components/progress/demo/gradient-line.md
  32. 4
      components/progress/demo/line.md
  33. 4
      components/progress/demo/linecap.md
  34. 4
      components/progress/demo/segment.md
  35. 4
      components/progress/demo/steps.md

5
components/avatar/__tests__/Avatar.test.js
View File

@ -146,4 +146,9 @@ describe('Avatar Render', () => {
); );
warnSpy.mockRestore(); warnSpy.mockRestore();
}); });
it('support size is number', () => {
const wrapper = mount(<Avatar size={100}>TestString</Avatar>);
expect(wrapper).toMatchRenderedSnapshot();
});
}); });

14
components/avatar/__tests__/__snapshots__/Avatar.test.js.snap
View File

@ -10,3 +10,17 @@ exports[`Avatar Render rtl render component should be rendered correctly in RTL
/> />
</span> </span>
`; `;
exports[`Avatar Render support size is number 1`] = `
<span
class="ant-avatar ant-avatar-circle"
style="width:100px;height:100px;line-height:100px;font-size:18px"
>
<span
class="ant-avatar-string"
style="opacity:0"
>
TestString
</span>
</span>
`;

57
components/avatar/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/avatar/demo/badge.md correctly 1`] = ` exports[`renders ./components/avatar/demo/badge.md correctly 1`] = `
<div> Array [
<span <span
class="avatar-item" class="avatar-item"
> >
@ -194,7 +194,7 @@ exports[`renders ./components/avatar/demo/badge.md correctly 1`] = `
</span> </span>
</sup> </sup>
</span> </span>
</span> </span>,
<span> <span>
<span <span
class="ant-badge" class="ant-badge"
@ -228,12 +228,12 @@ exports[`renders ./components/avatar/demo/badge.md correctly 1`] = `
data-show="true" data-show="true"
/> />
</span> </span>
</span> </span>,
</div> ]
`; `;
exports[`renders ./components/avatar/demo/basic.md correctly 1`] = ` exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
<div> Array [
<div> <div>
<span <span
class="ant-avatar ant-avatar-circle ant-avatar-icon" class="ant-avatar ant-avatar-circle ant-avatar-icon"
@ -332,7 +332,7 @@ exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
</svg> </svg>
</span> </span>
</span> </span>
</div> </div>,
<div> <div>
<span <span
class="ant-avatar ant-avatar-square ant-avatar-icon" class="ant-avatar ant-avatar-square ant-avatar-icon"
@ -431,12 +431,12 @@ exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
</svg> </svg>
</span> </span>
</span> </span>
</div> </div>,
</div> ]
`; `;
exports[`renders ./components/avatar/demo/dynamic.md correctly 1`] = ` exports[`renders ./components/avatar/demo/dynamic.md correctly 1`] = `
<div> Array [
<span <span
class="ant-avatar ant-avatar-lg ant-avatar-circle" class="ant-avatar ant-avatar-lg ant-avatar-circle"
style="background-color:#f56a00;vertical-align:middle" style="background-color:#f56a00;vertical-align:middle"
@ -447,7 +447,7 @@ exports[`renders ./components/avatar/demo/dynamic.md correctly 1`] = `
> >
U U
</span> </span>
</span> </span>,
<button <button
class="ant-btn ant-btn-sm" class="ant-btn ant-btn-sm"
style="margin:0 16px;vertical-align:middle" style="margin:0 16px;vertical-align:middle"
@ -456,12 +456,12 @@ exports[`renders ./components/avatar/demo/dynamic.md correctly 1`] = `
<span> <span>
Change Change
</span> </span>
</button> </button>,
</div> ]
`; `;
exports[`renders ./components/avatar/demo/toggle-debug.md correctly 1`] = ` exports[`renders ./components/avatar/demo/toggle-debug.md correctly 1`] = `
<div> Array [
<button <button
class="ant-btn" class="ant-btn"
type="button" type="button"
@ -469,7 +469,7 @@ exports[`renders ./components/avatar/demo/toggle-debug.md correctly 1`] = `
<span> <span>
Toggle Avatar visibility Toggle Avatar visibility
</span> </span>
</button> </button>,
<button <button
class="ant-btn" class="ant-btn"
type="button" type="button"
@ -477,7 +477,7 @@ exports[`renders ./components/avatar/demo/toggle-debug.md correctly 1`] = `
<span> <span>
Toggle Avatar size Toggle Avatar size
</span> </span>
</button> </button>,
<button <button
class="ant-btn" class="ant-btn"
type="button" type="button"
@ -485,9 +485,9 @@ exports[`renders ./components/avatar/demo/toggle-debug.md correctly 1`] = `
<span> <span>
Change Avatar scale Change Avatar scale
</span> </span>
</button> </button>,
<br /> <br />,
<br /> <br />,
<div <div
style="text-align:center;transform:scale(1);margin-top:24px" style="text-align:center;transform:scale(1);margin-top:24px"
> >
@ -533,12 +533,12 @@ exports[`renders ./components/avatar/demo/toggle-debug.md correctly 1`] = `
/> />
</span> </span>
</div> </div>
</div> </div>,
</div> ]
`; `;
exports[`renders ./components/avatar/demo/type.md correctly 1`] = ` exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
<div> Array [
<span <span
class="ant-avatar ant-avatar-circle ant-avatar-icon" class="ant-avatar ant-avatar-circle ant-avatar-icon"
> >
@ -562,7 +562,7 @@ exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
/> />
</svg> </svg>
</span> </span>
</span> </span>,
<span <span
class="ant-avatar ant-avatar-circle" class="ant-avatar ant-avatar-circle"
> >
@ -572,9 +572,10 @@ exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
> >
U U
</span> </span>
</span> </span>,
<span <span
class="ant-avatar ant-avatar-circle" class="ant-avatar ant-avatar-circle"
style="width:40px;height:40px;line-height:40px;font-size:18px"
> >
<span <span
class="ant-avatar-string" class="ant-avatar-string"
@ -582,14 +583,14 @@ exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
> >
USER USER
</span> </span>
</span> </span>,
<span <span
class="ant-avatar ant-avatar-circle ant-avatar-image" class="ant-avatar ant-avatar-circle ant-avatar-image"
> >
<img <img
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
/> />
</span> </span>,
<span <span
class="ant-avatar ant-avatar-circle" class="ant-avatar ant-avatar-circle"
style="color:#f56a00;background-color:#fde3cf" style="color:#f56a00;background-color:#fde3cf"
@ -600,7 +601,7 @@ exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
> >
U U
</span> </span>
</span> </span>,
<span <span
class="ant-avatar ant-avatar-circle ant-avatar-icon" class="ant-avatar ant-avatar-circle ant-avatar-icon"
style="background-color:#87d068" style="background-color:#87d068"
@ -625,6 +626,6 @@ exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
/> />
</svg> </svg>
</span> </span>
</span> </span>,
</div> ]
`; `;

4
components/avatar/demo/badge.md
View File

@ -18,7 +18,7 @@ import { Avatar, Badge } from 'antd';
import { UserOutlined } from '@ant-design/icons'; import { UserOutlined } from '@ant-design/icons';
ReactDOM.render( ReactDOM.render(
<div> <>
<span className="avatar-item"> <span className="avatar-item">
<Badge count={1}> <Badge count={1}>
<Avatar shape="square" icon={<UserOutlined />} /> <Avatar shape="square" icon={<UserOutlined />} />
@ -29,7 +29,7 @@ ReactDOM.render(
<Avatar shape="square" icon={<UserOutlined />} /> <Avatar shape="square" icon={<UserOutlined />} />
</Badge> </Badge>
</span> </span>
</div>, </>,
mountNode, mountNode,
); );
``` ```

4
components/avatar/demo/basic.md
View File

@ -18,7 +18,7 @@ import { Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons'; import { UserOutlined } from '@ant-design/icons';
ReactDOM.render( ReactDOM.render(
<div> <>
<div> <div>
<Avatar size={64} icon={<UserOutlined />} /> <Avatar size={64} icon={<UserOutlined />} />
<Avatar size="large" icon={<UserOutlined />} /> <Avatar size="large" icon={<UserOutlined />} />
@ -31,7 +31,7 @@ ReactDOM.render(
<Avatar shape="square" icon={<UserOutlined />} /> <Avatar shape="square" icon={<UserOutlined />} />
<Avatar shape="square" size="small" icon={<UserOutlined />} /> <Avatar shape="square" size="small" icon={<UserOutlined />} />
</div> </div>
</div>, </>,
mountNode, mountNode,
); );
``` ```

4
components/avatar/demo/dynamic.md
View File

@ -29,7 +29,7 @@ const Autoset: React.FC = () => {
setColor(index < ColorList.length - 1 ? ColorList[index + 1] : ColorList[0]); setColor(index < ColorList.length - 1 ? ColorList[index + 1] : ColorList[0]);
}; };
return ( return (
<div> <>
<Avatar style={{ backgroundColor: color, verticalAlign: 'middle' }} size="large"> <Avatar style={{ backgroundColor: color, verticalAlign: 'middle' }} size="large">
{user} {user}
</Avatar> </Avatar>
@ -40,7 +40,7 @@ const Autoset: React.FC = () => {
> >
Change Change
</Button> </Button>
</div> </>
); );
}; };

4
components/avatar/demo/toggle-debug.md
View File

@ -41,7 +41,7 @@ const App: React.FC = () => {
}; };
return ( return (
<div> <>
<Button onClick={toggle}>Toggle Avatar visibility</Button> <Button onClick={toggle}>Toggle Avatar visibility</Button>
<Button onClick={toggleSize}>Toggle Avatar size</Button> <Button onClick={toggleSize}>Toggle Avatar size</Button>
<Button onClick={changeScale}>Change Avatar scale</Button> <Button onClick={changeScale}>Change Avatar scale</Button>
@ -67,7 +67,7 @@ const App: React.FC = () => {
</Avatar> </Avatar>
</div> </div>
</div> </div>
</div> </>
); );
}; };

6
components/avatar/demo/type.md
View File

@ -18,14 +18,14 @@ import { Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons'; import { UserOutlined } from '@ant-design/icons';
ReactDOM.render( ReactDOM.render(
<div> <>
<Avatar icon={<UserOutlined />} /> <Avatar icon={<UserOutlined />} />
<Avatar>U</Avatar> <Avatar>U</Avatar>
<Avatar>USER</Avatar> <Avatar size={40}>USER</Avatar>
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
<Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar> <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} /> <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
</div>, </>,
mountNode, mountNode,
); );
``` ```

95
components/comment/__tests__/__snapshots__/demo.test.js.snap
View File

@ -122,77 +122,70 @@ exports[`renders ./components/comment/demo/basic.md correctly 1`] = `
`; `;
exports[`renders ./components/comment/demo/editor.md correctly 1`] = ` exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
<div> <div
class="ant-comment"
>
<div <div
class="ant-comment" class="ant-comment-inner"
> >
<div <div
class="ant-comment-inner" class="ant-comment-avatar"
> >
<div <span
class="ant-comment-avatar" class="ant-avatar ant-avatar-circle ant-avatar-image"
> >
<span <img
class="ant-avatar ant-avatar-circle ant-avatar-image" alt="Han Solo"
> src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
<img />
alt="Han Solo" </span>
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" </div>
/> <div
</span> class="ant-comment-content"
</div> >
<div <div
class="ant-comment-content" class="ant-comment-content-detail"
> >
<div <div
class="ant-comment-content-author" class="ant-row ant-form-item"
/>
<div
class="ant-comment-content-detail"
> >
<div> <div
class="ant-col ant-form-item-control"
>
<div <div
class="ant-row ant-form-item" class="ant-form-item-control-input"
> >
<div <div
class="ant-col ant-form-item-control" class="ant-form-item-control-input-content"
> >
<div <textarea
class="ant-form-item-control-input" class="ant-input"
> rows="4"
<div />
class="ant-form-item-control-input-content"
>
<textarea
class="ant-input"
rows="4"
/>
</div>
</div>
</div> </div>
</div> </div>
</div>
</div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-form-item-control"
>
<div <div
class="ant-row ant-form-item" class="ant-form-item-control-input"
> >
<div <div
class="ant-col ant-form-item-control" class="ant-form-item-control-input-content"
> >
<div <button
class="ant-form-item-control-input" class="ant-btn ant-btn-primary"
type="submit"
> >
<div <span>
class="ant-form-item-control-input-content" Add Comment
> </span>
<button </button>
class="ant-btn ant-btn-primary"
type="submit"
>
<span>
Add Comment
</span>
</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

39
components/comment/__tests__/__snapshots__/index.test.js.snap
View File

@ -11,11 +11,46 @@ exports[`Comment rtl render component should be rendered correctly in RTL direct
class="ant-comment-content" class="ant-comment-content"
> >
<div <div
class="ant-comment-content-author" class="ant-comment-content-detail"
/> />
</div>
</div>
</div>
`;
exports[`Comment should support empty actions 1`] = `
<div
class="ant-comment"
>
<div
class="ant-comment-inner"
>
<div
class="ant-comment-content"
>
<div
class="ant-comment-content-author"
>
<span
class="ant-comment-content-author-name"
>
<a>
Han Solo
</a>
</span>
<span
class="ant-comment-content-author-time"
>
YYYY-MM-DD HH:mm:ss
</span>
</div>
<div <div
class="ant-comment-content-detail" class="ant-comment-content-detail"
/> >
<p>
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
</p>
</div>
</div> </div>
</div> </div>
</div> </div>

20
components/comment/__tests__/index.test.js
View File

@ -1,3 +1,5 @@
import React from 'react';
import { mount } from 'enzyme';
import Comment from '../index'; import Comment from '../index';
import mountTest from '../../../tests/shared/mountTest'; import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest'; import rtlTest from '../../../tests/shared/rtlTest';
@ -5,4 +7,22 @@ import rtlTest from '../../../tests/shared/rtlTest';
describe('Comment', () => { describe('Comment', () => {
mountTest(Comment); mountTest(Comment);
rtlTest(Comment); rtlTest(Comment);
it('should support empty actions', () => {
const wrapper = mount(
<Comment
actions={[]}
author={<a>Han Solo</a>}
content={
<p>
We supply a series of design principles, practical patterns and high quality design
resources (Sketch and Axure), to help people create their product prototypes beautifully
and efficiently.
</p>
}
datetime="YYYY-MM-DD HH:mm:ss"
/>,
);
expect(wrapper).toMatchRenderedSnapshot();
});
}); });

4
components/comment/demo/basic.md
View File

@ -45,7 +45,7 @@ const Demo = () => {
</Tooltip> </Tooltip>
<span className="comment-action">{likes}</span> <span className="comment-action">{likes}</span>
</span>, </span>,
<span key=' key="comment-basic-dislike"'> <span key="comment-basic-dislike">
<Tooltip title="Dislike"> <Tooltip title="Dislike">
{React.createElement(action === 'disliked' ? DislikeFilled : DislikeOutlined, { {React.createElement(action === 'disliked' ? DislikeFilled : DislikeOutlined, {
onClick: dislike, onClick: dislike,
@ -80,7 +80,7 @@ const Demo = () => {
} }
/> />
); );
} };
ReactDOM.render(<Demo />, mountNode); ReactDOM.render(<Demo />, mountNode);
``` ```

8
components/comment/demo/editor.md
View File

@ -29,7 +29,7 @@ const CommentList = ({ comments }) => (
); );
const Editor = ({ onChange, onSubmit, submitting, value }) => ( const Editor = ({ onChange, onSubmit, submitting, value }) => (
<div> <>
<Form.Item> <Form.Item>
<TextArea rows={4} onChange={onChange} value={value} /> <TextArea rows={4} onChange={onChange} value={value} />
</Form.Item> </Form.Item>
@ -38,7 +38,7 @@ const Editor = ({ onChange, onSubmit, submitting, value }) => (
Add Comment Add Comment
</Button> </Button>
</Form.Item> </Form.Item>
</div> </>
); );
class App extends React.Component { class App extends React.Component {
@ -84,7 +84,7 @@ class App extends React.Component {
const { comments, submitting, value } = this.state; const { comments, submitting, value } = this.state;
return ( return (
<div> <>
{comments.length > 0 && <CommentList comments={comments} />} {comments.length > 0 && <CommentList comments={comments} />}
<Comment <Comment
avatar={ avatar={
@ -102,7 +102,7 @@ class App extends React.Component {
/> />
} }
/> />
</div> </>
); );
} }
} }

33
components/comment/index.tsx
View File

@ -2,15 +2,6 @@ import * as React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { ConfigContext } from '../config-provider'; import { ConfigContext } from '../config-provider';
function getAction(actions: React.ReactNode[]) {
if (!actions || !actions.length) {
return null;
}
// eslint-disable-next-line react/no-array-index-key
const actionList = actions.map((action, index) => <li key={`action-${index}`}>{action}</li>);
return actionList;
}
export interface CommentProps { export interface CommentProps {
/** List of action items rendered below the comment content */ /** List of action items rendered below the comment content */
actions?: Array<React.ReactNode>; actions?: Array<React.ReactNode>;
@ -40,7 +31,6 @@ const Comment: React.FC<CommentProps> = ({
className, className,
content, content,
prefixCls: customizePrefixCls, prefixCls: customizePrefixCls,
style,
datetime, datetime,
...otherProps ...otherProps
}) => { }) => {
@ -60,10 +50,14 @@ const Comment: React.FC<CommentProps> = ({
const actionDom = const actionDom =
actions && actions.length ? ( actions && actions.length ? (
<ul className={`${prefixCls}-actions`}>{getAction(actions)}</ul> <ul className={`${prefixCls}-actions`}>
{actions.map((action, index) => (
<li key={`action-${index}`}>{action}</li> // eslint-disable-line react/no-array-index-key
))}
</ul>
) : null; ) : null;
const authorContent = ( const authorContent = (author || datetime) && (
<div className={`${prefixCls}-content-author`}> <div className={`${prefixCls}-content-author`}>
{author && <span className={`${prefixCls}-content-author-name`}>{author}</span>} {author && <span className={`${prefixCls}-content-author-name`}>{author}</span>}
{datetime && <span className={`${prefixCls}-content-author-time`}>{datetime}</span>} {datetime && <span className={`${prefixCls}-content-author-time`}>{datetime}</span>}
@ -78,19 +72,16 @@ const Comment: React.FC<CommentProps> = ({
</div> </div>
); );
const comment = (
<div className={`${prefixCls}-inner`}>
{avatarDom}
{contentDom}
</div>
);
const cls = classNames(prefixCls, className, { const cls = classNames(prefixCls, className, {
[`${prefixCls}-rtl`]: direction === 'rtl', [`${prefixCls}-rtl`]: direction === 'rtl',
}); });
return ( return (
<div {...otherProps} className={cls} style={style}> <div {...otherProps} className={cls}>
{comment} <div className={`${prefixCls}-inner`}>
{avatarDom}
{contentDom}
</div>
{children ? renderNested(prefixCls, children) : null} {children ? renderNested(prefixCls, children) : null}
</div> </div>
); );

30
components/config-provider/__tests__/__snapshots__/components.test.js.snap
View File

@ -9435,9 +9435,6 @@ exports[`ConfigProvider components Comment configProvider 1`] = `
<div <div
class="config-comment-content" class="config-comment-content"
> >
<div
class="config-comment-content-author"
/>
<div <div
class="config-comment-content-detail" class="config-comment-content-detail"
> >
@ -9457,9 +9454,6 @@ exports[`ConfigProvider components Comment configProvider 1`] = `
<div <div
class="config-comment-content" class="config-comment-content"
> >
<div
class="config-comment-content-author"
/>
<div <div
class="config-comment-content-detail" class="config-comment-content-detail"
> >
@ -9482,9 +9476,6 @@ exports[`ConfigProvider components Comment configProvider componentSize large 1`
<div <div
class="config-comment-content" class="config-comment-content"
> >
<div
class="config-comment-content-author"
/>
<div <div
class="config-comment-content-detail" class="config-comment-content-detail"
> >
@ -9504,9 +9495,6 @@ exports[`ConfigProvider components Comment configProvider componentSize large 1`
<div <div
class="config-comment-content" class="config-comment-content"
> >
<div
class="config-comment-content-author"
/>
<div <div
class="config-comment-content-detail" class="config-comment-content-detail"
> >
@ -9529,9 +9517,6 @@ exports[`ConfigProvider components Comment configProvider componentSize middle 1
<div <div
class="config-comment-content" class="config-comment-content"
> >
<div
class="config-comment-content-author"
/>
<div <div
class="config-comment-content-detail" class="config-comment-content-detail"
> >
@ -9551,9 +9536,6 @@ exports[`ConfigProvider components Comment configProvider componentSize middle 1
<div <div
class="config-comment-content" class="config-comment-content"
> >
<div
class="config-comment-content-author"
/>
<div <div
class="config-comment-content-detail" class="config-comment-content-detail"
> >
@ -9576,9 +9558,6 @@ exports[`ConfigProvider components Comment normal 1`] = `
<div <div
class="ant-comment-content" class="ant-comment-content"
> >
<div
class="ant-comment-content-author"
/>
<div <div
class="ant-comment-content-detail" class="ant-comment-content-detail"
> >
@ -9598,9 +9577,6 @@ exports[`ConfigProvider components Comment normal 1`] = `
<div <div
class="ant-comment-content" class="ant-comment-content"
> >
<div
class="ant-comment-content-author"
/>
<div <div
class="ant-comment-content-detail" class="ant-comment-content-detail"
> >
@ -9623,9 +9599,6 @@ exports[`ConfigProvider components Comment prefixCls 1`] = `
<div <div
class="prefix-Comment-content" class="prefix-Comment-content"
> >
<div
class="prefix-Comment-content-author"
/>
<div <div
class="prefix-Comment-content-detail" class="prefix-Comment-content-detail"
> >
@ -9645,9 +9618,6 @@ exports[`ConfigProvider components Comment prefixCls 1`] = `
<div <div
class="prefix-Comment-content" class="prefix-Comment-content"
> >
<div
class="prefix-Comment-content-author"
/>
<div <div
class="prefix-Comment-content-detail" class="prefix-Comment-content-detail"
> >

6
components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap
View File

@ -1,12 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DropdownButton rtl render component should be rendered correctly in RTL direction 1`] = ` exports[`DropdownButton rtl render component should be rendered correctly in RTL direction 1`] = `
<span
class="ant-dropdown-trigger ant-dropdown-rtl"
/>
`;
exports[`DropdownButton rtl render component should be rendered correctly in RTL direction 2`] = `
<div <div
class="ant-btn-group ant-btn-group-rtl ant-dropdown-button" class="ant-btn-group ant-btn-group-rtl ant-dropdown-button"
> >

49
components/dropdown/__tests__/__snapshots__/index.test.js.snap
View File

@ -0,0 +1,49 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Dropdown overlay is function and has custom transitionName 1`] = `
Array [
<button
class="ant-dropdown-trigger"
type="button"
>
button
</button>,
<div>
<div
class="ant-dropdown"
style="opacity:0"
>
<div>
menu
</div>
</div>
</div>,
]
`;
exports[`Dropdown overlay is string 1`] = `
Array [
<button
class="ant-dropdown-trigger"
type="button"
>
button
</button>,
<div>
<div
class="ant-dropdown"
style="opacity:0"
>
<span>
overlayNode
</span>
</div>
</div>,
]
`;
exports[`Dropdown rtl render component should be rendered correctly in RTL direction 1`] = `
<span
class="ant-dropdown-trigger ant-dropdown-rtl"
/>
`;

11
components/dropdown/__tests__/dropdown-button.test.js
View File

@ -6,18 +6,7 @@ import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest'; import rtlTest from '../../../tests/shared/rtlTest';
describe('DropdownButton', () => { describe('DropdownButton', () => {
mountTest(() => (
<Dropdown menu={<Menu />}>
<span />
</Dropdown>
));
mountTest(Dropdown.Button); mountTest(Dropdown.Button);
rtlTest(() => (
<Dropdown menu={<Menu />}>
<span />
</Dropdown>
));
rtlTest(Dropdown.Button); rtlTest(Dropdown.Button);
it('pass appropriate props to Dropdown', () => { it('pass appropriate props to Dropdown', () => {

38
components/dropdown/__tests__/index.test.js
View File

@ -0,0 +1,38 @@
import React from 'react';
import { mount } from 'enzyme';
import Dropdown from '..';
import Menu from '../../menu';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
describe('Dropdown', () => {
mountTest(() => (
<Dropdown menu={<Menu />}>
<span />
</Dropdown>
));
rtlTest(() => (
<Dropdown menu={<Menu />}>
<span />
</Dropdown>
));
it('overlay is function and has custom transitionName', () => {
const wrapper = mount(
<Dropdown overlay={() => <div>menu</div>} transitionName="move-up" visible>
<button type="button">button</button>
</Dropdown>,
);
expect(wrapper).toMatchRenderedSnapshot();
});
it('overlay is string', () => {
const wrapper = mount(
<Dropdown overlay="string" visible>
<button type="button">button</button>
</Dropdown>,
);
expect(wrapper).toMatchRenderedSnapshot();
});
});

6
components/dropdown/dropdown.tsx
View File

@ -85,7 +85,9 @@ const Dropdown: DropdownInterface = props => {
} else { } else {
overlayNode = overlay; overlayNode = overlay;
} }
overlayNode = React.Children.only(overlayNode) as React.ReactElement<any>; overlayNode = React.Children.only(
typeof overlayNode === 'string' ? <span>overlayNode</span> : overlayNode,
);
const overlayProps = overlayNode.props; const overlayProps = overlayNode.props;
@ -108,7 +110,7 @@ const Dropdown: DropdownInterface = props => {
const fixedModeOverlay = const fixedModeOverlay =
typeof overlayNode.type === 'string' typeof overlayNode.type === 'string'
? overlay ? overlayNode
: cloneElement(overlayNode, { : cloneElement(overlayNode, {
mode: 'vertical', mode: 'vertical',
selectable, selectable,

10
components/progress/Steps.tsx
View File

@ -7,15 +7,7 @@ interface StepsProps extends ProgressProps {
} }
const Steps: React.FC<StepsProps> = props => { const Steps: React.FC<StepsProps> = props => {
const { const { size, steps, percent = 0, strokeWidth = 8, strokeColor, prefixCls, children } = props;
size = 'default',
steps,
percent = 0,
strokeWidth = 8,
strokeColor,
prefixCls,
children,
} = props;
const getStyledSteps = () => { const getStyledSteps = () => {
const current = Math.floor(steps * (percent / 100)); const current = Math.floor(steps * (percent / 100));
const stepWidth = size === 'small' ? 2 : 14; const stepWidth = size === 'small' ? 2 : 14;

112
components/progress/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/progress/demo/circle.md correctly 1`] = ` exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
<div> Array [
<div <div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
@ -43,7 +43,7 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
75% 75%
</span> </span>
</div> </div>
</div> </div>,
<div <div
class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default"
> >
@ -103,7 +103,7 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
</span> </span>
</span> </span>
</div> </div>
</div> </div>,
<div <div
class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
> >
@ -163,12 +163,12 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
</span> </span>
</span> </span>
</div> </div>
</div> </div>,
</div> ]
`; `;
exports[`renders ./components/progress/demo/circle-dynamic.md correctly 1`] = ` exports[`renders ./components/progress/demo/circle-dynamic.md correctly 1`] = `
<div> Array [
<div <div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
@ -210,7 +210,7 @@ exports[`renders ./components/progress/demo/circle-dynamic.md correctly 1`] = `
0% 0%
</span> </span>
</div> </div>
</div> </div>,
<div <div
class="ant-btn-group" class="ant-btn-group"
> >
@ -268,12 +268,12 @@ exports[`renders ./components/progress/demo/circle-dynamic.md correctly 1`] = `
</svg> </svg>
</span> </span>
</button> </button>
</div> </div>,
</div> ]
`; `;
exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = ` exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
<div> Array [
<div <div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
@ -315,7 +315,7 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
30% 30%
</span> </span>
</div> </div>
</div> </div>,
<div <div
class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default"
> >
@ -375,7 +375,7 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
</span> </span>
</span> </span>
</div> </div>
</div> </div>,
<div <div
class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
> >
@ -435,12 +435,12 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
</span> </span>
</span> </span>
</div> </div>
</div> </div>,
</div> ]
`; `;
exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = ` exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = `
<div> Array [
<div <div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
@ -482,7 +482,7 @@ exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = `
75% 75%
</span> </span>
</div> </div>
</div> </div>,
<div <div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
@ -524,12 +524,12 @@ exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = `
75% 75%
</span> </span>
</div> </div>
</div> </div>,
</div> ]
`; `;
exports[`renders ./components/progress/demo/dynamic.md correctly 1`] = ` exports[`renders ./components/progress/demo/dynamic.md correctly 1`] = `
<div> Array [
<div <div
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
@ -551,7 +551,7 @@ exports[`renders ./components/progress/demo/dynamic.md correctly 1`] = `
> >
0% 0%
</span> </span>
</div> </div>,
<div <div
class="ant-btn-group" class="ant-btn-group"
> >
@ -609,12 +609,12 @@ exports[`renders ./components/progress/demo/dynamic.md correctly 1`] = `
</svg> </svg>
</span> </span>
</button> </button>
</div> </div>,
</div> ]
`; `;
exports[`renders ./components/progress/demo/format.md correctly 1`] = ` exports[`renders ./components/progress/demo/format.md correctly 1`] = `
<div> Array [
<div <div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
@ -656,7 +656,7 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
75 Days 75 Days
</span> </span>
</div> </div>
</div> </div>,
<div <div
class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
> >
@ -698,12 +698,12 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
Done Done
</span> </span>
</div> </div>
</div> </div>,
</div> ]
`; `;
exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = ` exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
<div> Array [
<div <div
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
@ -725,7 +725,7 @@ exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
> >
99.9% 99.9%
</span> </span>
</div> </div>,
<div <div
class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default"
> >
@ -747,7 +747,7 @@ exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
> >
99.9% 99.9%
</span> </span>
</div> </div>,
<div <div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
@ -807,7 +807,7 @@ exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
90% 90%
</span> </span>
</div> </div>
</div> </div>,
<div <div
class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
> >
@ -885,12 +885,12 @@ exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
</span> </span>
</span> </span>
</div> </div>
</div> </div>,
</div> ]
`; `;
exports[`renders ./components/progress/demo/line.md correctly 1`] = ` exports[`renders ./components/progress/demo/line.md correctly 1`] = `
<div> Array [
<div <div
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
@ -912,7 +912,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
> >
30% 30%
</span> </span>
</div> </div>,
<div <div
class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default"
> >
@ -934,7 +934,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
> >
50% 50%
</span> </span>
</div> </div>,
<div <div
class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info ant-progress-default"
> >
@ -974,7 +974,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
</svg> </svg>
</span> </span>
</span> </span>
</div> </div>,
<div <div
class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-default"
> >
@ -1014,7 +1014,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
</svg> </svg>
</span> </span>
</span> </span>
</div> </div>,
<div <div
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default"
> >
@ -1030,8 +1030,8 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
/> />
</div> </div>
</div> </div>
</div> </div>,
</div> ]
`; `;
exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = ` exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
@ -1166,7 +1166,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
`; `;
exports[`renders ./components/progress/demo/linecap.md correctly 1`] = ` exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
<div> Array [
<div <div
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
@ -1188,7 +1188,7 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
> >
75% 75%
</span> </span>
</div> </div>,
<div <div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
@ -1230,7 +1230,7 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
75% 75%
</span> </span>
</div> </div>
</div> </div>,
<div <div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
@ -1272,12 +1272,12 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
75% 75%
</span> </span>
</div> </div>
</div> </div>,
</div> ]
`; `;
exports[`renders ./components/progress/demo/segment.md correctly 1`] = ` exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
<div> Array [
<div <div
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
@ -1303,7 +1303,7 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
> >
60% 60%
</span> </span>
</div> </div>,
<div <div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
@ -1357,7 +1357,7 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
60% 60%
</span> </span>
</div> </div>
</div> </div>,
<div <div
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
@ -1411,12 +1411,12 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
60% 60%
</span> </span>
</div> </div>
</div> </div>,
</div> ]
`; `;
exports[`renders ./components/progress/demo/steps.md correctly 1`] = ` exports[`renders ./components/progress/demo/steps.md correctly 1`] = `
<div> Array [
<div <div
class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
@ -1442,8 +1442,8 @@ exports[`renders ./components/progress/demo/steps.md correctly 1`] = `
50% 50%
</span> </span>
</div> </div>
</div> </div>,
<br /> <br />,
<div <div
class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default" class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
> >
@ -1477,8 +1477,8 @@ exports[`renders ./components/progress/demo/steps.md correctly 1`] = `
30% 30%
</span> </span>
</div> </div>
</div> </div>,
<br /> <br />,
<div <div
class="ant-progress ant-progress-steps ant-progress-status-success ant-progress-show-info ant-progress-small" class="ant-progress ant-progress-steps ant-progress-status-success ant-progress-show-info ant-progress-small"
> >
@ -1530,6 +1530,6 @@ exports[`renders ./components/progress/demo/steps.md correctly 1`] = `
</span> </span>
</span> </span>
</div> </div>
</div> </div>,
</div> ]
`; `;

29
components/progress/__tests__/__snapshots__/index.test.js.snap
View File

@ -550,3 +550,32 @@ exports[`Progress rtl render component should be rendered correctly in RTL direc
</span> </span>
</div> </div>
`; `;
exports[`Progress should support steps 1`] = `
<div
class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
>
<div
class="ant-progress-steps-outer"
>
<div
class="ant-progress-steps-item"
style="background-color:undefined;width:14px;height:8px"
/>
<div
class="ant-progress-steps-item"
style="background-color:undefined;width:14px;height:8px"
/>
<div
class="ant-progress-steps-item"
style="background-color:undefined;width:14px;height:8px"
/>
<span
class="ant-progress-text"
title="0%"
>
0%
</span>
</div>
</div>
`;

5
components/progress/__tests__/index.test.js
View File

@ -133,4 +133,9 @@ describe('Progress', () => {
expect(wrapper.find('.ant-progress-status-success')).toHaveLength(1); expect(wrapper.find('.ant-progress-status-success')).toHaveLength(1);
errorSpy.mockRestore(); errorSpy.mockRestore();
}); });
it('should support steps', () => {
const wrapper = mount(<Progress steps={3} />);
expect(wrapper).toMatchRenderedSnapshot();
});
}); });

10
components/progress/demo/circle-dynamic.md
View File

@ -17,8 +17,6 @@ A dynamic progress bar is better.
import { Progress, Button } from 'antd'; import { Progress, Button } from 'antd';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons'; import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
const ButtonGroup = Button.Group;
class App extends React.Component { class App extends React.Component {
state = { state = {
percent: 0, percent: 0,
@ -42,13 +40,13 @@ class App extends React.Component {
render() { render() {
return ( return (
<div> <>
<Progress type="circle" percent={this.state.percent} /> <Progress type="circle" percent={this.state.percent} />
<ButtonGroup> <Button.Group>
<Button onClick={this.decline} icon={<MinusOutlined />} /> <Button onClick={this.decline} icon={<MinusOutlined />} />
<Button onClick={this.increase} icon={<PlusOutlined />} /> <Button onClick={this.increase} icon={<PlusOutlined />} />
</ButtonGroup> </Button.Group>
</div> </>
); );
} }
} }

4
components/progress/demo/circle-mini.md
View File

@ -17,11 +17,11 @@ A smaller circular progress bar.
import { Progress } from 'antd'; import { Progress } from 'antd';
ReactDOM.render( ReactDOM.render(
<div> <>
<Progress type="circle" percent={30} width={80} /> <Progress type="circle" percent={30} width={80} />
<Progress type="circle" percent={70} width={80} status="exception" /> <Progress type="circle" percent={70} width={80} status="exception" />
<Progress type="circle" percent={100} width={80} /> <Progress type="circle" percent={100} width={80} />
</div>, </>,
mountNode, mountNode,
); );
``` ```

4
components/progress/demo/circle.md
View File

@ -17,11 +17,11 @@ A circular progress bar.
import { Progress } from 'antd'; import { Progress } from 'antd';
ReactDOM.render( ReactDOM.render(
<div> <>
<Progress type="circle" percent={75} /> <Progress type="circle" percent={75} />
<Progress type="circle" percent={70} status="exception" /> <Progress type="circle" percent={70} status="exception" />
<Progress type="circle" percent={100} /> <Progress type="circle" percent={100} />
</div>, </>,
mountNode, mountNode,
); );
``` ```

7
components/progress/demo/dashboard.md
View File

@ -17,9 +17,10 @@ By setting `type=dashboard`, you can get a dashboard style of progress easily. M
import { Progress } from 'antd'; import { Progress } from 'antd';
ReactDOM.render( ReactDOM.render(
<div> <>
<Progress type="dashboard" percent={75} /> <Progress type="dashboard" percent={75} />
<Progress type="dashboard" percent={75} gapDegree={30} /> <Progress type="dashboard" percent={75} gapDegree={30} />
</div> </>,
, mountNode); mountNode,
);
``` ```

10
components/progress/demo/dynamic.md
View File

@ -17,8 +17,6 @@ A dynamic progress bar is better.
import { Progress, Button } from 'antd'; import { Progress, Button } from 'antd';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons'; import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
const ButtonGroup = Button.Group;
class App extends React.Component { class App extends React.Component {
state = { state = {
percent: 0, percent: 0,
@ -42,13 +40,13 @@ class App extends React.Component {
render() { render() {
return ( return (
<div> <>
<Progress percent={this.state.percent} /> <Progress percent={this.state.percent} />
<ButtonGroup> <Button.Group>
<Button onClick={this.decline} icon={<MinusOutlined />} /> <Button onClick={this.decline} icon={<MinusOutlined />} />
<Button onClick={this.increase} icon={<PlusOutlined />} /> <Button onClick={this.increase} icon={<PlusOutlined />} />
</ButtonGroup> </Button.Group>
</div> </>
); );
} }
} }

4
components/progress/demo/format.md
View File

@ -17,10 +17,10 @@ You can set a custom text by setting the `format` prop.
import { Progress } from 'antd'; import { Progress } from 'antd';
ReactDOM.render( ReactDOM.render(
<div> <>
<Progress type="circle" percent={75} format={percent => `${percent} Days`} /> <Progress type="circle" percent={75} format={percent => `${percent} Days`} />
<Progress type="circle" percent={100} format={() => 'Done'} /> <Progress type="circle" percent={100} format={() => 'Done'} />
</div>, </>,
mountNode, mountNode,
); );
``` ```

4
components/progress/demo/gradient-line.md
View File

@ -17,7 +17,7 @@ A package of `linear-gradient`. It is recommended to only pass two colors.
import { Progress } from 'antd'; import { Progress } from 'antd';
const Demo = () => ( const Demo = () => (
<div> <>
<Progress <Progress
strokeColor={{ strokeColor={{
'0%': '#108ee9', '0%': '#108ee9',
@ -49,7 +49,7 @@ const Demo = () => (
}} }}
percent={100} percent={100}
/> />
</div> </>
); );
ReactDOM.render(<Demo />, mountNode); ReactDOM.render(<Demo />, mountNode);

4
components/progress/demo/line.md
View File

@ -17,13 +17,13 @@ A standard progress bar.
import { Progress } from 'antd'; import { Progress } from 'antd';
ReactDOM.render( ReactDOM.render(
<div> <>
<Progress percent={30} /> <Progress percent={30} />
<Progress percent={50} status="active" /> <Progress percent={50} status="active" />
<Progress percent={70} status="exception" /> <Progress percent={70} status="exception" />
<Progress percent={100} /> <Progress percent={100} />
<Progress percent={50} showInfo={false} /> <Progress percent={50} showInfo={false} />
</div>, </>,
mountNode, mountNode,
); );
``` ```

4
components/progress/demo/linecap.md
View File

@ -17,11 +17,11 @@ By setting `strokeLinecap="square"`, you can change the linecaps from round to s
import { Progress } from 'antd'; import { Progress } from 'antd';
ReactDOM.render( ReactDOM.render(
<div> <>
<Progress strokeLinecap="square" percent={75} /> <Progress strokeLinecap="square" percent={75} />
<Progress strokeLinecap="square" type="circle" percent={75} /> <Progress strokeLinecap="square" type="circle" percent={75} />
<Progress strokeLinecap="square" type="dashboard" percent={75} /> <Progress strokeLinecap="square" type="dashboard" percent={75} />
</div>, </>,
mountNode, mountNode,
); );
``` ```

4
components/progress/demo/segment.md
View File

@ -17,7 +17,7 @@ A standard progress bar. Doesn't support trail color when `type="circle|dashboar
import { Tooltip, Progress } from 'antd'; import { Tooltip, Progress } from 'antd';
ReactDOM.render( ReactDOM.render(
<div> <>
<Tooltip title="3 done / 3 in progress / 4 to do"> <Tooltip title="3 done / 3 in progress / 4 to do">
<Progress percent={60} successPercent={30} /> <Progress percent={60} successPercent={30} />
</Tooltip> </Tooltip>
@ -29,7 +29,7 @@ ReactDOM.render(
<Tooltip title="3 done / 3 in progress / 4 to do"> <Tooltip title="3 done / 3 in progress / 4 to do">
<Progress percent={60} successPercent={30} type="dashboard" /> <Progress percent={60} successPercent={30} type="dashboard" />
</Tooltip> </Tooltip>
</div>, </>,
mountNode, mountNode,
); );
``` ```

4
components/progress/demo/steps.md
View File

@ -17,13 +17,13 @@ A progress bar with steps.
import { Progress } from 'antd'; import { Progress } from 'antd';
ReactDOM.render( ReactDOM.render(
<div> <>
<Progress percent={50} steps={3} strokeColor="#1890ff" /> <Progress percent={50} steps={3} strokeColor="#1890ff" />
<br /> <br />
<Progress percent={30} steps={5} strokeColor="#1890ff" /> <Progress percent={30} steps={5} strokeColor="#1890ff" />
<br /> <br />
<Progress percent={100} steps={5} size="small" strokeColor="#1890ff" /> <Progress percent={100} steps={5} size="small" strokeColor="#1890ff" />
</div>, </>,
mountNode, mountNode,
); );
``` ```

Write Preview
Loading…
Cancel
Save