mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 07:56:28 +08:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

merge master

Browse Source
This commit is contained in:
zombiej 2019-10-08 15:04:00 +08:00
commit e129e8dc7e
27 changed files with 222 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.js
View File

@ -70,6 +70,7 @@ const eslintrc = {
'import/no-cycle': 0,
'react/no-find-dom-node': 0,
'no-underscore-dangle': 0,
'react/sort-comp': 0,
// label-has-for has been deprecated
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-for.md
'jsx-a11y/label-has-for': 0,

20
CHANGELOG.en-US.md
View File

@ -15,6 +15,26 @@ timeline: true
---
## 3.23.6
`2019-10-05`
- 🐞 Fix Typography `ref` warning of React. [#19074](https://github.com/ant-design/ant-design/pull/19074)
## 3.23.5
`2019-09-29`
- 🐞 Fix Upload preview image cannot fill the picture card box. [#18990](https://github.com/ant-design/ant-design/pull/18990)
- 🐞 Fix Breadcrumb not support `data-*` and `aria-*` attributes. [#18941](https://github.com/ant-design/ant-design/pull/18941) [@sosohime](https://github.com/sosohime)
- 🐞 Fix TreeSelect `removeIcon` and `clearIcon` not working. [#18949](https://github.com/ant-design/ant-design/issues/18949) [@sosohime](https://github.com/sosohime)
- 🐞 Fix Tree `switcherIcon` prop not working when `showLine` is true. [#18829](https://github.com/ant-design/ant-design/pull/18829) [@MrHeer](https://github.com/MrHeer)
- 🐞 Fix style bug of Button with icon only when in Button.Group. [#18994](https://github.com/ant-design/ant-design/pull/18994)
- 🐞 Remove Select useless prop `searchValue` which is a total misunderstanding. [#19003](https://github.com/ant-design/ant-design/pull/19003)
- 🐞 Fix Avatar string blink when ssr render at first time. [#19029](https://github.com/ant-design/ant-design/pull/19029)
- TypeScript
- 🐞 Fix Grid type definition. [#18946](https://github.com/ant-design/ant-design/pull/18946) [@handycode](https://github.com/handycode)
## 3.23.4
`2019-09-21`

20
CHANGELOG.zh-CN.md
View File

@ -15,6 +15,26 @@ timeline: true
---
## 3.23.6
`2019-10-05`
- 🐞 修复 Typography 提示获取不到 `ref` 的错误信息。[#19074](https://github.com/ant-design/ant-design/pull/19074)
## 3.23.5
`2019-09-29`
- 🐞 修复 Upload 预览图片无法填充满图片框的问题。[#18990](https://github.com/ant-design/ant-design/pull/18990)
- 🐞 修复 Breadcrumb 不支持 `data-*` 和 `aria-*` 的问题。[#18941](https://github.com/ant-design/ant-design/pull/18941) [@sosohime](https://github.com/sosohime)
- 🐞 修复 TreeSelect `removeIcon` 和 `clearIcon` 不工作的问题。[#18949](https://github.com/ant-design/ant-design/issues/18949) [@sosohime](https://github.com/sosohime)
- 🐞 修复 Tree 组件当 `showLine` 设置后 `switcherIcon` 没有正常工作的问题。[#18829](https://github.com/ant-design/ant-design/pull/18829) [@MrHeer](https://github.com/MrHeer)
- 🐞 修复按钮图标在 Button.Group 中的错位问题。[#18994](https://github.com/ant-design/ant-design/pull/18994)
- 🐞 移除 Select 中无效属性 `searchValue` 的定义及文档。[#19003](https://github.com/ant-design/ant-design/pull/19003)
- 🐞 修复 Avatar 文本头像在 ssr 时会闪烁的问题。[#19029](https://github.com/ant-design/ant-design/pull/19029)
- TypeScript
- 🐞 修复 Grid 组件的类型定义。[#18946](https://github.com/ant-design/ant-design/pull/18946) [@handycode](https://github.com/handycode)
## 3.23.4
`2019-09-21`

17
components/_util/ref.ts Normal file
View File

@ -0,0 +1,17 @@
import React from 'react';
export function fillRef<T>(ref: React.Ref<T>, node: T) {
if (typeof ref === 'function') {
ref(node);
} else if (typeof ref === 'object' && ref && 'current' in ref) {
(ref as any).current = node;
}
}
export function composeRef<T>(...refs: React.Ref<T>[]): React.Ref<T> {
return (node: T) => {
refs.forEach(ref => {
fillRef(ref, node);
});
};
}

1
components/button/__tests__/index.test.js
View File

@ -203,6 +203,7 @@ describe('Button', () => {
it('should merge text if children using variable', () => {
const wrapper = mount(
<Button>
{/* eslint-disable-next-line react/jsx-curly-brace-presence */}
This {'is'} a test {1}
</Button>,
);

4
components/collapse/__tests__/__snapshots__/demo.test.js.snap
View File

@ -656,7 +656,9 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
</div>
</div>
<br />
Expand Icon Position:
<span>
Expand Icon Position:
</span>
<div
class="ant-select ant-select-single ant-select-show-arrow"
>

2
components/collapse/demo/extra.md
View File

@ -68,7 +68,7 @@ class Demo extends React.Component {
</Panel>
</Collapse>
<br />
Expand Icon Position:{' '}
<span>Expand Icon Position: </span>
<Select value={expandIconPosition} onChange={this.onPositionChange}>
<Option value="left">left</Option>
<Option value="right">right</Option>

30
components/config-provider/context.ts Normal file
View File

@ -0,0 +1,30 @@
import { createContext } from 'react';
import defaultRenderEmpty, { RenderEmptyHandler } from './renderEmpty';
import { Locale } from '../locale-provider';
export interface CSPConfig {
nonce?: string;
}
export interface ConfigConsumerProps {
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
rootPrefixCls?: string;
getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => string;
renderEmpty: RenderEmptyHandler;
csp?: CSPConfig;
autoInsertSpaceInButton?: boolean;
locale?: Locale;
}
export const ConfigContext = createContext<ConfigConsumerProps>({
// We provide a default function for Context without provider
getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => {
if (customizePrefixCls) return customizePrefixCls;
return `ant-${suffixCls}`;
},
renderEmpty: defaultRenderEmpty,
});
export const ConfigConsumer = ConfigContext.Consumer;

32
components/config-provider/index.tsx
View File

@ -4,25 +4,12 @@
import * as React from 'react';
import { FormProvider as RcFormProvider } from 'rc-field-form';
import { ValidateMessages } from 'rc-field-form/lib/interface';
import defaultRenderEmpty, { RenderEmptyHandler } from './renderEmpty';
import { RenderEmptyHandler } from './renderEmpty';
import LocaleProvider, { Locale, ANT_MARK } from '../locale-provider';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import { ConfigConsumer, ConfigContext, CSPConfig, ConfigConsumerProps } from './context';
export { RenderEmptyHandler };
export interface CSPConfig {
nonce?: string;
}
export interface ConfigConsumerProps {
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
rootPrefixCls?: string;
getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => string;
renderEmpty: RenderEmptyHandler;
csp?: CSPConfig;
autoInsertSpaceInButton?: boolean;
locale?: Locale;
}
export { RenderEmptyHandler, ConfigContext, ConfigConsumer, CSPConfig, ConfigConsumerProps };
export const configConsumerProps = [
'getPopupContainer',
@ -47,19 +34,6 @@ export interface ConfigProviderProps {
locale?: Locale;
}
export const ConfigContext = React.createContext<ConfigConsumerProps>({
// We provide a default function for Context without provider
getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => {
if (customizePrefixCls) return customizePrefixCls;
return `ant-${suffixCls}`;
},
renderEmpty: defaultRenderEmpty,
});
export const ConfigConsumer = ConfigContext.Consumer;
class ConfigProvider extends React.Component<ConfigProviderProps> {
getPrefixCls = (suffixCls: string, customizePrefixCls?: string) => {
const { prefixCls = 'ant' } = this.props;

4
components/descriptions/__tests__/__snapshots__/demo.test.js.snap
View File

@ -904,7 +904,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
</th>
<th
class="ant-descriptions-item-label ant-descriptions-item-colon"
colspan="5"
colspan="3"
>
Usage Time
</th>
@ -920,7 +920,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
</td>
<td
class="ant-descriptions-item-content"
colspan="5"
colspan="3"
>
2019-04-24 18:00:00
</td>

2
components/descriptions/demo/vertical-border.md
View File

@ -22,7 +22,7 @@ ReactDOM.render(
<Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
<Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
<Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item>
<Descriptions.Item label="Usage Time" span={3}>
<Descriptions.Item label="Usage Time" span={2}>
2019-04-24 18:00:00
</Descriptions.Item>
<Descriptions.Item label="Status" span={3}>

2
components/drawer/demo/user-profile.md
View File

@ -104,7 +104,7 @@ class App extends React.Component {
<p style={pStyle}>Personal</p>
<Row>
<Col span={12}>
<DescriptionItem title="Full Name" content="Lily" />{' '}
<DescriptionItem title="Full Name" content="Lily" />
</Col>
<Col span={12}>
<DescriptionItem title="Account" content="AntDesign@example.com" />

2
components/result/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1153,7 +1153,7 @@ exports[`renders ./components/result/demo/error.md correctly 1`] = `
/>
</svg>
</span>
Your account has been frozen
Your account has been frozen
<a>
Thaw immediately &gt;
</a>

2
components/result/demo/error.md
View File

@ -43,7 +43,7 @@ ReactDOM.render(
</Text>
</Paragraph>
<Paragraph>
<CloseCircle style={{ color: 'red' }} /> Your account has been frozen{' '}
<CloseCircle style={{ color: 'red' }} /> Your account has been frozen
<a>Thaw immediately &gt;</a>
</Paragraph>
<Paragraph>

14
components/select/demo/option-label-prop.md
View File

@ -33,25 +33,25 @@ ReactDOM.render(
>
<Option value="china" label="China">
<span role="img" aria-label="China">
🇨🇳{' '}
🇨🇳
</span>
China (中国)
</Option>
<Option value="usa" label="USA">
<span role="img" aria-label="USA">
🇺🇸{' '}
🇺🇸
</span>
USA (美国)
</Option>
<Option value="japan" label="Japan">
<span role="img" aria-label="Japan">
🇯🇵{' '}
🇯🇵
</span>
Japan (日本)
</Option>
<Option value="korea" label="Korea">
<span role="img" aria-label="Korea">
🇰🇷{' '}
🇰🇷
</span>
Korea (韩国)
</Option>
@ -59,3 +59,9 @@ ReactDOM.render(
mountNode,
);
```
```css
span[role='img'] {
margin-right: 6px;
}
```

1
components/table/Table.tsx
View File

@ -170,6 +170,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
});
}
// eslint-disable-next-line react/no-deprecated
componentWillReceiveProps(nextProps: TableProps<T>) {
this.columns = nextProps.columns || normalizeColumns(nextProps.children as React.ReactChildren);
if ('pagination' in nextProps || 'pagination' in this.props) {

5
components/typography/Base.tsx
View File

@ -2,6 +2,7 @@ import * as React from 'react';
import classNames from 'classnames';
import { polyfill } from 'react-lifecycles-compat';
import toArray from 'rc-util/lib/Children/toArray';
import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
import copy from 'copy-to-clipboard';
import omit from 'omit.js';
import { Edit, Check, Copy } from '@ant-design/icons';
@ -297,7 +298,7 @@ class Base extends React.Component<InternalBlockProps & ConfigConsumerProps, Bas
);
const { content, text, ellipsis } = measure(
this.content,
findDOMNode(this.content),
rows,
children,
this.renderOperations(true),
@ -459,7 +460,7 @@ class Base extends React.Component<InternalBlockProps & ConfigConsumerProps, Bas
WebkitLineClamp: cssLineClamp ? rows : null,
}}
component={component}
setContentRef={this.setContentRef}
ref={this.setContentRef}
aria-label={ariaLabel}
{...textProps}
>

89
components/typography/Typography.tsx
View File

@ -1,6 +1,8 @@
import * as React from 'react';
import classNames from 'classnames';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import warning from '../_util/warning';
import { composeRef } from '../_util/ref';
export interface TypographyProps {
id?: string;
@ -13,35 +15,68 @@ export interface TypographyProps {
interface InternalTypographyProps extends TypographyProps {
component?: string;
/** @deprecated Use `ref` directly if using React 16 */
setContentRef?: (node: HTMLElement) => void;
}
const Typography: React.SFC<InternalTypographyProps> = ({
prefixCls: customizePrefixCls,
component = 'article',
className,
'aria-label': ariaLabel,
setContentRef,
children,
...restProps
}) => (
<ConfigConsumer>
{({ getPrefixCls }: ConfigConsumerProps) => {
const Component = component as any;
const prefixCls = getPrefixCls('typography', customizePrefixCls);
const Typography: React.RefForwardingComponent<{}, InternalTypographyProps> = (
{
prefixCls: customizePrefixCls,
component = 'article',
className,
'aria-label': ariaLabel,
setContentRef,
children,
...restProps
},
ref,
) => {
let mergedRef = ref;
return (
<Component
className={classNames(prefixCls, className)}
aria-label={ariaLabel}
ref={setContentRef}
{...restProps}
>
{children}
</Component>
);
}}
</ConfigConsumer>
);
if (setContentRef) {
warning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.');
mergedRef = composeRef(ref, setContentRef);
}
export default Typography;
return (
<ConfigConsumer>
{({ getPrefixCls }: ConfigConsumerProps) => {
const Component = component as any;
const prefixCls = getPrefixCls('typography', customizePrefixCls);
return (
<Component
className={classNames(prefixCls, className)}
aria-label={ariaLabel}
ref={mergedRef}
{...restProps}
>
{children}
</Component>
);
}}
</ConfigConsumer>
);
};
let RefTypography;
if (React.forwardRef) {
RefTypography = React.forwardRef(Typography);
RefTypography.displayName = 'Typography';
} else {
class TypographyWrapper extends React.Component<TypographyProps, {}> {
state = {};
render() {
return <Typography {...this.props} />;
}
}
RefTypography = TypographyWrapper;
}
// es default export should use const instead of let
const ExportTypography = (RefTypography as unknown) as React.FC<TypographyProps>;
export default ExportTypography;

10
components/typography/__tests__/__snapshots__/demo.test.js.snap
View File

@ -17,7 +17,7 @@ exports[`renders ./components/typography/demo/basic.md correctly 1`] = `
<div
class="ant-typography"
>
After massive project practice and summaries, Ant Design, a design language for background applications, is refined by Ant UED Team, which aims to
After massive project practice and summaries, Ant Design, a design language for background applications, is refined by Ant UED Team, which aims to
<span
class="ant-typography"
>
@ -131,7 +131,7 @@ exports[`renders ./components/typography/demo/basic.md correctly 1`] = `
Sketch
</code>
</span>
和
和
<span
class="ant-typography"
>
@ -273,7 +273,7 @@ exports[`renders ./components/typography/demo/ellipsis-debug.md correctly 1`] =
</del>
</code>
</span>
case.Bnt Design, a design language for background applications, is refined by Ant UED Team.Cnt Design, a design language for background applications, is refined by Ant UED Team. Dnt Design, a design language for background applications, is refined by Ant UED Team. Ent Design, a design language for background applications, is refined by Ant UED Team.
case. Bnt Design, a design language for background applications, is refined by Ant UED Team. Cnt Design, a design language for background applications, is refined by Ant UED Team. Dnt Design, a design language for background applications, is refined by Ant UED Team. Ent Design, a design language for background applications, is refined by Ant UED Team.
</div>
</div>
`;
@ -397,7 +397,7 @@ exports[`renders ./components/typography/demo/paragraph-debug.md correctly 1`] =
<div
class="ant-typography"
>
After massive project practice and summaries, Ant Design, a design language for background applications, is refined by Ant UED Team, which aims to
After massive project practice and summaries, Ant Design, a design language for background applications, is refined by Ant UED Team, which aims to
<span
class="ant-typography"
>
@ -508,7 +508,7 @@ exports[`renders ./components/typography/demo/paragraph-debug.md correctly 1`] =
Sketch
</code>
</span>
和
和
<span
class="ant-typography"
>

17
components/typography/__tests__/index.test.js
View File

@ -6,6 +6,7 @@ import Title from '../Title';
import Paragraph from '../Paragraph';
import Base from '../Base'; // eslint-disable-line import/no-named-as-default
import mountTest from '../../../tests/shared/mountTest';
import Typography from '../Typography';
jest.mock('copy-to-clipboard');
@ -96,10 +97,13 @@ describe('Typography', () => {
});
it('connect children', () => {
const bamboo = 'Bamboo';
const is = ' is ';
const wrapper = mount(
<Base ellipsis component="p" editable>
{'Bamboo'}
{' is '}
{bamboo}
{is}
<code>Little</code>
<code>Light</code>
</Base>,
@ -239,4 +243,13 @@ describe('Typography', () => {
});
});
});
it('warning if use setContentRef', () => {
function refFunc() {}
mount(<Typography setContentRef={refFunc} />);
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Typography] `setContentRef` is deprecated. Please use `ref` instead.',
);
});
});

7
components/typography/demo/basic.md
View File

@ -28,13 +28,12 @@ ReactDOM.render(
</Paragraph>
<Paragraph>
After massive project practice and summaries, Ant Design, a design language for background
applications, is refined by Ant UED Team, which aims to{' '}
applications, is refined by Ant UED Team, which aims to
<Text strong>
uniform the user interface specs for internal background projects, lower the unnecessary
cost of design differences and implementation and liberate the resources of design and
front-end development
</Text>
.
</Text>.
</Paragraph>
<Title level={2}>Guidelines and Resources</Title>
<Paragraph>
@ -71,7 +70,7 @@ ReactDOM.render(
</Paragraph>
<Title level={2}>设计资源</Title>
<Paragraph>
我们提供完善的设计原则、最佳实践和设计资源文件（<Text code>Sketch</Text> 和{' '}
我们提供完善的设计原则、最佳实践和设计资源文件（<Text code>Sketch</Text> 和
<Text code>Axure</Text>），来帮助业务快速设计出高质量的产品原型。
</Paragraph>

16
components/typography/demo/ellipsis-debug.md
View File

@ -45,7 +45,6 @@ class Demo extends React.Component {
<Switch onChange={val => this.setState({ editable: val })} />
<Switch onChange={val => this.setState({ expandable: val })} />
<Slider value={rows} min={1} max={10} onChange={this.onChange} />
{longText ? (
<Paragraph ellipsis={{ rows, expandable }} copyable={copyable} editable={editable}>
Ant Design, a design language for background applications, is refined by Ant UED Team.
@ -53,18 +52,15 @@ class Demo extends React.Component {
<Text code strong delete>
Test
</Text>{' '}
case.
{
'Bnt Design, a design language for background applications, is refined by Ant UED Team.'
}
Cnt Design, a design language for background applications, is refined by Ant UED Team.
Dnt Design, a design language for background applications, is refined by Ant UED Team.
Ent Design, a design language for background applications, is refined by Ant UED Team.
case. Bnt Design, a design language for background applications, is refined by Ant UED
Team. Cnt Design, a design language for background applications, is refined by Ant UED
Team. Dnt Design, a design language for background applications, is refined by Ant UED
Team. Ent Design, a design language for background applications, is refined by Ant UED
Team.
</Paragraph>
) : (
<Paragraph ellipsis={{ rows, expandable }} copyable={copyable} editable={editable}>
{'Hello'}
{'World'}
Hello World
</Paragraph>
)}
</div>

7
components/typography/demo/paragraph-debug.md
View File

@ -29,13 +29,12 @@ ReactDOM.render(
</Paragraph>
<Paragraph>
After massive project practice and summaries, Ant Design, a design language for background
applications, is refined by Ant UED Team, which aims to{' '}
applications, is refined by Ant UED Team, which aims to
<Text strong>
uniform the user interface specs for internal background projects, lower the unnecessary
cost of design differences and implementation and liberate the resources of design and
front-end development
</Text>
.
</Text>.
</Paragraph>
<Title level={2}>Guidelines and Resources</Title>
<Paragraph>
@ -70,7 +69,7 @@ ReactDOM.render(
</Paragraph>
<Title level={2}>设计资源</Title>
<Paragraph>
我们提供完善的设计原则、最佳实践和设计资源文件（<Text code>Sketch</Text> 和{' '}
我们提供完善的设计原则、最佳实践和设计资源文件（<Text code>Sketch</Text> 和
<Text code>Axure</Text>），来帮助业务快速设计出高质量的产品原型。
</Paragraph>

6
package.json
View File

@ -165,7 +165,7 @@
"babel-eslint": "^10.0.1",
"babel-plugin-add-react-displayname": "^0.0.5",
"bisheng": "^1.3.1-alpha.0",
"bisheng-plugin-antd": "^1.2.1",
"bisheng-plugin-antd": "^1.3.1",
"bisheng-plugin-description": "^0.1.4",
"bisheng-plugin-react": "^1.1.0",
"bisheng-plugin-toc": "^0.4.4",
@ -199,11 +199,11 @@
"jsdom": "^15.1.1",
"jsonml.js": "^0.1.0",
"logrocket": "^1.0.0",
"logrocket-react": "^3.0.0",
"logrocket-react": "^4.0.0",
"lz-string": "^1.4.4",
"mockdate": "^2.0.2",
"node-fetch": "^2.6.0",
"preact": "^8.4.2",
"preact": "^10.0.0",
"preact-compat": "^3.18.5",
"prettier": "^1.17.1",
"pretty-quick": "^1.11.0",

7
site/theme/static/responsive.less
View File

@ -207,7 +207,7 @@
.text-wrapper {
min-height: 200px;
margin-top: 48px;
padding: 0 16px;
padding: 0;
h1 {
display: none;
}
@ -221,6 +221,11 @@
min-width: 100%;
white-space: nowrap;
text-align: center;
.banner-btn {
padding: 0 20px;
font-size: 14px;
}
}
}
}

2
site/theme/static/template.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{% if title %}{{ title }}{% else %}{% endif %}</title>
<title>{% if title %}{{ title | safe }}{% else %}{% endif %}</title>
{% if meta %}{{ meta | safe }}{% endif %}
<link
rel="icon"

3
site/theme/template/Layout/Footer.jsx
View File

@ -402,7 +402,8 @@ class Footer extends React.Component {
columns={this.getColumns()}
bottom={
<>
Made with <span style={{ color: '#fff' }}>❤</span> by{' '}
Made with <span style={{ color: '#fff' }}>❤</span> by
{/* eslint-disable-next-line react/jsx-curly-brace-presence */}{' '}
<a target="_blank" rel="noopener noreferrer" href="https://xtech.antfin.com">
<FormattedMessage id="app.footer.company" />
</a>