mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-01 19:49:59 +08:00
Merge branch 'feature' into ts_table
This commit is contained in:
LT246-VINHNPH\vinhnph
commit
c41c4670f0
8
.gitpod.yml
Normal file
8
.gitpod.yml
Normal file
@ -0,0 +1,8 @@
|
||||
ports:
|
||||
- port: 8001
|
||||
onOpen: open-preview
|
||||
tasks:
|
||||
- before: >
|
||||
export DEV_HOST=$(gp url 8001)
|
||||
init: npm install
|
||||
command: npm start
|
||||
@ -15,6 +15,14 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 3.13.2
|
||||
|
||||
`2019-02-07`
|
||||
|
||||
- 🐞 Fix Table ajax render only display data on first page. [#14724](https://github.com/ant-design/ant-design/pull/14724) [@imhele](https://github.com/imhele)
|
||||
- 🐞 Adjust font style to fix display issue in IE. [#14708](https://github.com/ant-design/ant-design/pull/14708) [@ashearer](https://github.com/ashearer)
|
||||
- 🐞 Fix Input not hide clear button when value is `null`. [#14733](https://github.com/ant-design/ant-design/pull/14733) [@thilo-behnke](https://github.com/thilo-behnke)
|
||||
|
||||
## 3.13.1
|
||||
|
||||
`2019-02-04`
|
||||
@ -34,7 +42,7 @@ timeline: true
|
||||
- 🐞 Fix when being triggered by label even upload button don't display. [#14619](https://github.com/ant-design/ant-design/pull/14619) [#14298](https://github.com/ant-design/ant-design/issues/14298)
|
||||
- 🐞 Fix Dropdown pseudo class style which causes the overlay non-clickable. [#14604](https://github.com/ant-design/ant-design/pull/14604) [@shawtung](https://github.com/shawtung)
|
||||
- 💄 Improve Checkbox the style for check don't align center in some cases. [#14619](https://github.com/ant-design/ant-design/pull/14619) [#14271](https://github.com/ant-design/ant-design/issues/14271)
|
||||
- 🐞 Fix Avatar change `src` not trigger reload if prev image load failed. [#14606](https://github.com/ant-design/ant-design/pull/14606) [@AhmedAlSammany](https://github.com/AhmedAlSammany)
|
||||
- 🐞 Fix Avatar change `src` not trigger reload if previous image load failed. [#14606](https://github.com/ant-design/ant-design/pull/14606) [@AhmedAlSammany](https://github.com/AhmedAlSammany)
|
||||
- 🐞 Fix Modal `destroy` logic not process correctly. [#14600](https://github.com/ant-design/ant-design/pull/14600) [@xu-snow](https://github.com/xu-snow)
|
||||
- 🐞 Fix Tooltip arrow not align when the content of `title` is less. [#14667](https://github.com/ant-design/ant-design/pull/14667) [@Yangzhedi](https://github.com/Yangzhedi)
|
||||
- Calendar
|
||||
@ -60,7 +68,7 @@ timeline: true
|
||||
- 🌟 Add `expandIcon` to allow customization of Collapse icon. [#14060](https://github.com/ant-design/ant-design/pull/14060)
|
||||
- ConfigProvider
|
||||
- 🌟 Support Content Security Policy (CSP) config. [#14222](https://github.com/ant-design/ant-design/pull/14222)
|
||||
- 🌟 Support `autoInsertSpaceInButton` to remove space between 2 chinese characters on Button. [#14230](https://github.com/ant-design/ant-design/pull/14230)
|
||||
- 🌟 Support `autoInsertSpaceInButton` to remove space between 2 Chinese characters on Button. [#14230](https://github.com/ant-design/ant-design/pull/14230)
|
||||
- DatePicker
|
||||
- 🌟 Will read format as default format in locale if provided. [#14340](https://github.com/ant-design/ant-design/pull/14340)
|
||||
- Tabs
|
||||
|
||||
@ -15,6 +15,14 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 3.13.2
|
||||
|
||||
`2019-02-07`
|
||||
|
||||
- 🐞 修复 Table 异步时只有第一页能展示数据的问题。[#14724](https://github.com/ant-design/ant-design/pull/14724) [@imhele](https://github.com/imhele)
|
||||
- 🐞 调整字体样式以适配旧版 IE 下的展示问题。[#14708](https://github.com/ant-design/ant-design/pull/14708) [@ashearer](https://github.com/ashearer)
|
||||
- 🐞 修复 Input 值为 `null` 时，清除按钮不消失的问题。[#14733](https://github.com/ant-design/ant-design/pull/14733) [@thilo-behnke](https://github.com/thilo-behnke)
|
||||
|
||||
## 3.13.1
|
||||
|
||||
`2019-02-04`
|
||||
|
||||
@ -15,12 +15,14 @@
|
||||
[](https://codecov.io/gh/ant-design/ant-design/branch/master)
|
||||
[](https://www.npmjs.org/package/antd)
|
||||
[](http://npmjs.com/antd)
|
||||
[](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
|
||||
|
||||
[](https://david-dm.org/ant-design/ant-design)
|
||||
[](https://david-dm.org/ant-design/ant-design?type=dev)
|
||||
[](https://lgtm.com/projects/g/ant-design/ant-design/alerts/)
|
||||
[](https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield)
|
||||
[](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
|
||||
|
||||
[](https://twitter.com/AntDesignUI)
|
||||
[](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
|
||||
[](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||||
|
||||
@ -101,6 +103,12 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
|
||||
|
||||
## ⌨️ 本地开发
|
||||
|
||||
你可以使用 Gitpod 进行在线开发：
|
||||
|
||||
[](https://gitpod.io/#https://github.com/ant-design/ant-design)
|
||||
|
||||
或者克隆到本地开发:
|
||||
|
||||
```bash
|
||||
$ git clone git@github.com:ant-design/ant-design.git
|
||||
$ cd ant-design
|
||||
|
||||
10
README.md
10
README.md
@ -15,12 +15,14 @@ An enterprise-class UI design language and React implementation.
|
||||
[](https://codecov.io/gh/ant-design/ant-design/branch/master)
|
||||
[](https://www.npmjs.org/package/antd)
|
||||
[](http://npmjs.com/antd)
|
||||
[](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
|
||||
|
||||
[](https://david-dm.org/ant-design/ant-design)
|
||||
[](https://david-dm.org/ant-design/ant-design?type=dev)
|
||||
[](https://lgtm.com/projects/g/ant-design/ant-design/alerts/)
|
||||
[](https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield)
|
||||
[](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
|
||||
|
||||
[](https://twitter.com/AntDesignUI)
|
||||
[](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
|
||||
[](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||||
|
||||
@ -100,6 +102,12 @@ See [i18n](http://ant.design/docs/react/i18n).
|
||||
|
||||
## ⌨️ Development
|
||||
|
||||
Use Gitpod, a free online dev environment for GitHub.
|
||||
|
||||
[](https://gitpod.io/#https://github.com/ant-design/ant-design)
|
||||
|
||||
Or clone locally:
|
||||
|
||||
```bash
|
||||
$ git clone git@github.com:ant-design/ant-design.git
|
||||
$ cd ant-design
|
||||
|
||||
@ -16,4 +16,4 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
|
||||
| src | the address of the image for an image avatar | string | - |
|
||||
| srcSet | a list of sources to use for different screen resolutions | string | - |
|
||||
| alt | This attribute defines the alternative text describing the image | string | - |
|
||||
| onError | handler when img load error，return false to prevent default fallback behavior | () => boolean | - |
|
||||
| onError | handler when img load error, return false to prevent default fallback behavior | () => boolean | - |
|
||||
|
||||
@ -14,6 +14,7 @@ export interface AbstractCheckboxProps<T> {
|
||||
style?: React.CSSProperties;
|
||||
disabled?: boolean;
|
||||
onChange?: (e: T) => void;
|
||||
onClick?: React.MouseEventHandler<any>;
|
||||
onMouseEnter?: React.MouseEventHandler<any>;
|
||||
onMouseLeave?: React.MouseEventHandler<any>;
|
||||
onKeyPress?: React.KeyboardEventHandler<any>;
|
||||
|
||||
@ -2925,37 +2925,37 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="width:18%;margin-left:-9%;left:0%"
|
||||
style="left:0%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
A
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:18%;margin-left:-9%;left:20%"
|
||||
style="left:20%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
B
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:18%;margin-left:-9%;left:40%"
|
||||
style="left:40%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
C
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:18%;margin-left:-9%;left:60%"
|
||||
style="left:60%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
D
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:18%;margin-left:-9%;left:80%"
|
||||
style="left:80%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
E
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:18%;margin-left:-9%;left:100%"
|
||||
style="left:100%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
F
|
||||
</span>
|
||||
|
||||
@ -152,7 +152,7 @@ To mark the returned fields data in `mapPropsToFields`, [demo](#components-form-
|
||||
|
||||
### this.props.form.getFieldDecorator(id, options)
|
||||
|
||||
After wrapped by `getFieldDecorator`, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls，the flow of form data will be handled by Form which will cause:
|
||||
After wrapped by `getFieldDecorator`, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls, the flow of form data will be handled by Form which will cause:
|
||||
|
||||
1. You shouldn't use `onChange` to collect data, but you still can listen to `onChange`(and so on) events.
|
||||
2. You cannot set value of form control via `value` `defaultValue` prop, and you should set default value with `initialValue` in `getFieldDecorator` instead.
|
||||
|
||||
@ -525,37 +525,37 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="width:18%;margin-left:-9%;left:0%"
|
||||
style="left:0%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
8
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="width:18%;margin-left:-9%;left:20%"
|
||||
style="left:20%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
16
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:18%;margin-left:-9%;left:40%"
|
||||
style="left:40%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
24
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:18%;margin-left:-9%;left:60%"
|
||||
style="left:60%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
32
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:18%;margin-left:-9%;left:80%"
|
||||
style="left:80%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
40
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:18%;margin-left:-9%;left:100%"
|
||||
style="left:100%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
48
|
||||
</span>
|
||||
@ -623,37 +623,37 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="width:18%;margin-left:-9%;left:0%"
|
||||
style="left:0%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
2
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="width:18%;margin-left:-9%;left:20%"
|
||||
style="left:20%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
3
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="width:18%;margin-left:-9%;left:40%"
|
||||
style="left:40%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:18%;margin-left:-9%;left:60%"
|
||||
style="left:60%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
6
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:18%;margin-left:-9%;left:80%"
|
||||
style="left:80%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
8
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:18%;margin-left:-9%;left:100%"
|
||||
style="left:100%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
12
|
||||
</span>
|
||||
|
||||
@ -157,7 +157,7 @@ class Input extends React.Component<InputProps, any> {
|
||||
renderClearIcon(prefixCls: string) {
|
||||
const { allowClear } = this.props;
|
||||
const { value } = this.state;
|
||||
if (!allowClear || value === undefined || value === '') {
|
||||
if (!allowClear || value === undefined || value === null || value === '') {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
|
||||
@ -95,6 +95,172 @@ exports[`Input allowClear should change type when click 2`] = `
|
||||
</Input>
|
||||
`;
|
||||
|
||||
exports[`Input allowClear should not show icon if defaultValue is undefined, null or empty string 1`] = `
|
||||
<Input
|
||||
allowClear={true}
|
||||
defaultValue={null}
|
||||
disabled={false}
|
||||
type="text"
|
||||
>
|
||||
<Consumer>
|
||||
<span
|
||||
className="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
/>
|
||||
</span>
|
||||
</Consumer>
|
||||
</Input>
|
||||
`;
|
||||
|
||||
exports[`Input allowClear should not show icon if defaultValue is undefined, null or empty string 2`] = `
|
||||
<Input
|
||||
allowClear={true}
|
||||
disabled={false}
|
||||
type="text"
|
||||
>
|
||||
<Consumer>
|
||||
<span
|
||||
className="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
/>
|
||||
</span>
|
||||
</Consumer>
|
||||
</Input>
|
||||
`;
|
||||
|
||||
exports[`Input allowClear should not show icon if defaultValue is undefined, null or empty string 3`] = `
|
||||
<Input
|
||||
allowClear={true}
|
||||
defaultValue=""
|
||||
disabled={false}
|
||||
type="text"
|
||||
>
|
||||
<Consumer>
|
||||
<span
|
||||
className="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
/>
|
||||
</span>
|
||||
</Consumer>
|
||||
</Input>
|
||||
`;
|
||||
|
||||
exports[`Input allowClear should not show icon if value is undefined, null or empty string 1`] = `
|
||||
<Input
|
||||
allowClear={true}
|
||||
disabled={false}
|
||||
type="text"
|
||||
value={null}
|
||||
>
|
||||
<Consumer>
|
||||
<span
|
||||
className="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
/>
|
||||
</span>
|
||||
</Consumer>
|
||||
</Input>
|
||||
`;
|
||||
|
||||
exports[`Input allowClear should not show icon if value is undefined, null or empty string 2`] = `
|
||||
<Input
|
||||
allowClear={true}
|
||||
disabled={false}
|
||||
type="text"
|
||||
>
|
||||
<Consumer>
|
||||
<span
|
||||
className="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
/>
|
||||
</span>
|
||||
</Consumer>
|
||||
</Input>
|
||||
`;
|
||||
|
||||
exports[`Input allowClear should not show icon if value is undefined, null or empty string 3`] = `
|
||||
<Input
|
||||
allowClear={true}
|
||||
disabled={false}
|
||||
type="text"
|
||||
value=""
|
||||
>
|
||||
<Consumer>
|
||||
<span
|
||||
className="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
/>
|
||||
</span>
|
||||
</Consumer>
|
||||
</Input>
|
||||
`;
|
||||
|
||||
exports[`Input should support maxLength 1`] = `
|
||||
<Input
|
||||
disabled={false}
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import React from 'react';
|
||||
|
||||
import { mount } from 'enzyme';
|
||||
import Input from '..';
|
||||
|
||||
import Form from '../../form';
|
||||
import Input from '..';
|
||||
import focusTest from '../../../tests/shared/focusTest';
|
||||
|
||||
const { TextArea } = Input;
|
||||
@ -134,6 +136,26 @@ describe('Input allowClear', () => {
|
||||
expect(wrapper.find('input').getDOMNode().value).toEqual('');
|
||||
});
|
||||
|
||||
it('should not show icon if value is undefined, null or empty string', () => {
|
||||
const wrappers = [null, undefined, ''].map(val => mount(<Input allowClear value={val} />));
|
||||
wrappers.forEach(wrapper => {
|
||||
expect(wrapper.find('input').getDOMNode().value).toEqual('');
|
||||
expect(wrapper.find('.ant-input-clear-icon').exists()).toEqual(false);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
it('should not show icon if defaultValue is undefined, null or empty string', () => {
|
||||
const wrappers = [null, undefined, ''].map(val =>
|
||||
mount(<Input allowClear defaultValue={val} />),
|
||||
);
|
||||
wrappers.forEach(wrapper => {
|
||||
expect(wrapper.find('input').getDOMNode().value).toEqual('');
|
||||
expect(wrapper.find('.ant-input-clear-icon').exists()).toEqual(false);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
it('should trigger event correctly', () => {
|
||||
let argumentEventObject;
|
||||
let argumentEventObjectValue;
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
There are three sizes of an Input box: `large` (40px)、`default` (32px) and `small` (24px).
|
||||
There are three sizes of an Input box: `large` (40px), `default` (32px) and `small` (24px).
|
||||
|
||||
````jsx
|
||||
import { Input } from 'antd';
|
||||
|
||||
@ -43,7 +43,7 @@ The first level navigation is inclined left near a logo, and the secondary menu
|
||||
|
||||
- **Enlarge the size of the font**
|
||||
|
||||
`12px`、`14px` is a standard font size of navigations，`14px` is used for the first and the second level of the navigation. You can choose an appropriate font size regarding the level of your navigation.
|
||||
`12px`, `14px` is a standard font size of navigations, `14px` is used for the first and the second level of the navigation. You can choose an appropriate font size regarding the level of your navigation.
|
||||
|
||||
## Component Overview
|
||||
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
margin-right: @list-item-meta-avatar-margin-right;
|
||||
}
|
||||
&-content {
|
||||
flex: 1 0 auto;
|
||||
flex: 1 0;
|
||||
}
|
||||
&-title {
|
||||
color: @text-color;
|
||||
|
||||
@ -64,4 +64,4 @@ When need to mention someone or something.
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| children | suggestion content | object | {} |
|
||||
| value | value of suggestion，the value will insert into input filed while selected | string | "" |
|
||||
| value | value of suggestion, the value will insert into input filed while selected | string | "" |
|
||||
|
||||
@ -13,8 +13,8 @@ interface MenuItemProps {
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
onClick?: (param: ClickParam) => void;
|
||||
onMouseEnter?: (event: string, e: MouseEvent) => void;
|
||||
onMouseLeave?: (event: string, e: MouseEvent) => void;
|
||||
onMouseEnter?: (e: { key: string; domEvent: MouseEvent }) => void;
|
||||
onMouseLeave?: (e: { key: string; domEvent: MouseEvent }) => void;
|
||||
}
|
||||
|
||||
class MenuItem extends React.Component<MenuItemProps, any> {
|
||||
|
||||
@ -9,6 +9,9 @@ describe('Progress', () => {
|
||||
|
||||
wrapper.setProps({ percent: 50, successPercent: 100 });
|
||||
expect(wrapper.find('.ant-progress-status-success')).toHaveLength(1);
|
||||
|
||||
wrapper.setProps({ percent: 100, successPercent: 0 });
|
||||
expect(wrapper.find('.ant-progress-status-success')).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('render out-of-range progress', () => {
|
||||
|
||||
@ -30,15 +30,21 @@ Properties that shared by all types.
|
||||
|
||||
### `type="line"`
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| strokeWidth | to set the width of the progress bar, unit: `px` | number | 10 |
|
||||
|
||||
### `type="circle"`
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| width | to set the canvas width of the circular progress, unit: `px` | number | 132 |
|
||||
| strokeWidth | to set the width of the circular progress, unit: percentage of the canvas width | number | 6 |
|
||||
|
||||
### `type="dashboard"`
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| width | to set the canvas width of the dashboard progress, unit: `px` | number | 132 |
|
||||
| strokeWidth | to set the width of the dashboard progress, unit: percentage of the canvas width | number | 6 |
|
||||
| gapDegree | the gap degree of half circle, 0 ~ 360 | number | 0 |
|
||||
|
||||
@ -31,15 +31,21 @@ title: Progress
|
||||
|
||||
### `type="line"`
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| strokeWidth | 进度条线的宽度，单位 px | number | 10 |
|
||||
|
||||
### `type="circle"`
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| width | 圆形进度条画布宽度，单位 px | number | 132 |
|
||||
| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
|
||||
|
||||
### `type="dashboard"`
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| width | 仪表盘进度条画布宽度，单位 px | number | 132 |
|
||||
| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
|
||||
| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 360 | number | 0 |
|
||||
|
||||
@ -103,8 +103,8 @@ export default class Progress extends React.Component<ProgressProps, {}> {
|
||||
} = props;
|
||||
const prefixCls = getPrefixCls('progress', customizePrefixCls);
|
||||
const progressStatus =
|
||||
parseInt(successPercent ? successPercent.toString() : percent.toString(), 10) >= 100 &&
|
||||
!('status' in props)
|
||||
parseInt(successPercent !== undefined ? successPercent.toString() : percent.toString(), 10) >=
|
||||
100 && !('status' in props)
|
||||
? 'success'
|
||||
: status || 'normal';
|
||||
let progress;
|
||||
|
||||
@ -508,25 +508,25 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:0%"
|
||||
style="left:0%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
0°C
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:26%"
|
||||
style="left:26%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
26°C
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:37%"
|
||||
style="left:37%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
37°C
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:100%;color:#f50"
|
||||
style="left:100%;transform:translateX(-50%);-ms-transform:translateX(-50%);color:#f50"
|
||||
>
|
||||
<strong>
|
||||
100°C
|
||||
@ -589,25 +589,25 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:0%"
|
||||
style="left:0%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
0°C
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:26%"
|
||||
style="left:26%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
26°C
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:37%"
|
||||
style="left:37%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
37°C
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:100%;color:#f50"
|
||||
style="left:100%;transform:translateX(-50%);-ms-transform:translateX(-50%);color:#f50"
|
||||
>
|
||||
<strong>
|
||||
100°C
|
||||
@ -659,25 +659,25 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:0%"
|
||||
style="left:0%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
0°C
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:26%"
|
||||
style="left:26%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
26°C
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:37%"
|
||||
style="left:37%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
37°C
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:100%;color:#f50"
|
||||
style="left:100%;transform:translateX(-50%);-ms-transform:translateX(-50%);color:#f50"
|
||||
>
|
||||
<strong>
|
||||
100°C
|
||||
@ -733,25 +733,25 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:0%"
|
||||
style="left:0%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
0°C
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:26%"
|
||||
style="left:26%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
26°C
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:37%"
|
||||
style="left:37%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
37°C
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:100%;color:#f50"
|
||||
style="left:100%;transform:translateX(-50%);-ms-transform:translateX(-50%);color:#f50"
|
||||
>
|
||||
<strong>
|
||||
100°C
|
||||
@ -807,25 +807,25 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:0%"
|
||||
style="left:0%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
0°C
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:26%"
|
||||
style="left:26%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
26°C
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text ant-slider-mark-text-active"
|
||||
style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:37%"
|
||||
style="left:37%;transform:translateX(-50%);-ms-transform:translateX(-50%)"
|
||||
>
|
||||
37°C
|
||||
</span>
|
||||
<span
|
||||
class="ant-slider-mark-text"
|
||||
style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:100%;color:#f50"
|
||||
style="left:100%;transform:translateX(-50%);-ms-transform:translateX(-50%);color:#f50"
|
||||
>
|
||||
<strong>
|
||||
100°C
|
||||
|
||||
@ -18,8 +18,8 @@ To input a value in a range.
|
||||
| defaultValue | The default value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] | 0 or \[0, 0] |
|
||||
| disabled | If true, the slider will not be interactable. | boolean | false |
|
||||
| dots | Whether the thumb can drag over tick only. | boolean | false |
|
||||
| included | Make effect when `marks` not null，`true` means containment and `false` means coordinative | boolean | true |
|
||||
| marks | Tick mark of Slider, type of key must be `number`, and must in closed interval \[min, max] ，each mark can declare its own style. | object | { number: string\|ReactNode } or { number: { style: object, label: string\|ReactNode } } |
|
||||
| included | Make effect when `marks` not null, `true` means containment and `false` means coordinative | boolean | true |
|
||||
| marks | Tick mark of Slider, type of key must be `number`, and must in closed interval \[min, max], each mark can declare its own style. | object | { number: string\|ReactNode } or { number: { style: object, label: string\|ReactNode } } |
|
||||
| max | The maximum value the slider can slide to | number | 100 |
|
||||
| min | The minimum value the slider can slide to. | number | 0 |
|
||||
| range | dual thumb mode | boolean | false |
|
||||
|
||||
@ -10,6 +10,11 @@ const REFRESH_INTERVAL = 1000 / 30;
|
||||
interface CountdownProps extends StatisticProps {
|
||||
value?: countdownValueType;
|
||||
format?: string;
|
||||
onFinish?: () => void;
|
||||
}
|
||||
|
||||
function getTime(value?: countdownValueType) {
|
||||
return interopDefault(moment)(value).valueOf();
|
||||
}
|
||||
|
||||
class Countdown extends React.Component<CountdownProps, {}> {
|
||||
@ -17,7 +22,7 @@ class Countdown extends React.Component<CountdownProps, {}> {
|
||||
format: 'HH:mm:ss',
|
||||
};
|
||||
|
||||
countdownId?: number = undefined;
|
||||
countdownId?: number;
|
||||
|
||||
componentDidMount() {
|
||||
this.syncTimer();
|
||||
@ -34,7 +39,7 @@ class Countdown extends React.Component<CountdownProps, {}> {
|
||||
syncTimer = () => {
|
||||
const { value } = this.props;
|
||||
|
||||
const timestamp = interopDefault(moment)(value).valueOf();
|
||||
const timestamp = getTime(value);
|
||||
if (timestamp >= Date.now()) {
|
||||
this.startTimer();
|
||||
} else {
|
||||
@ -43,7 +48,7 @@ class Countdown extends React.Component<CountdownProps, {}> {
|
||||
};
|
||||
|
||||
startTimer = () => {
|
||||
if (this.countdownId !== undefined) return;
|
||||
if (this.countdownId) return;
|
||||
|
||||
this.countdownId = window.setInterval(() => {
|
||||
this.forceUpdate();
|
||||
@ -51,8 +56,16 @@ class Countdown extends React.Component<CountdownProps, {}> {
|
||||
};
|
||||
|
||||
stopTimer = () => {
|
||||
clearInterval(this.countdownId);
|
||||
this.countdownId = undefined;
|
||||
const { onFinish, value } = this.props;
|
||||
if (this.countdownId) {
|
||||
clearInterval(this.countdownId);
|
||||
this.countdownId = undefined;
|
||||
|
||||
const timestamp = getTime(value);
|
||||
if (onFinish && timestamp < Date.now()) {
|
||||
onFinish();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
formatCountdown = (value: countdownValueType, config: FormatConfig) => {
|
||||
|
||||
@ -61,17 +61,47 @@ describe('Statistic', () => {
|
||||
|
||||
it('time going', async () => {
|
||||
const now = Date.now() + 1000;
|
||||
const wrapper = mount(<Statistic.Countdown value={now} />);
|
||||
const onFinish = jest.fn();
|
||||
const wrapper = mount(<Statistic.Countdown value={now} onFinish={onFinish} />);
|
||||
wrapper.update();
|
||||
|
||||
// setInterval should work
|
||||
const instance = wrapper.instance();
|
||||
expect(instance.countdownId).not.toBe(undefined);
|
||||
|
||||
await delay(50);
|
||||
await delay(10);
|
||||
|
||||
wrapper.unmount();
|
||||
expect(instance.countdownId).toBe(undefined);
|
||||
expect(onFinish).not.toBeCalled();
|
||||
});
|
||||
|
||||
describe('time finished', () => {
|
||||
it('not call if time already passed', () => {
|
||||
const now = Date.now() - 1000;
|
||||
|
||||
const onFinish = jest.fn();
|
||||
const wrapper = mount(<Statistic.Countdown value={now} onFinish={onFinish} />);
|
||||
wrapper.update();
|
||||
|
||||
const instance = wrapper.instance();
|
||||
expect(instance.countdownId).toBe(undefined);
|
||||
expect(onFinish).not.toBeCalled();
|
||||
});
|
||||
|
||||
it('called if finished', async () => {
|
||||
jest.useFakeTimers();
|
||||
const now = Date.now() + 10;
|
||||
const onFinish = jest.fn();
|
||||
const wrapper = mount(<Statistic.Countdown value={now} onFinish={onFinish} />);
|
||||
wrapper.update();
|
||||
|
||||
MockDate.set(moment('2019-11-28 00:00:00'));
|
||||
jest.runAllTimers();
|
||||
|
||||
expect(onFinish).toBeCalled();
|
||||
jest.useFakeTimers();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -19,10 +19,14 @@ import { Statistic, Row, Col } from 'antd';
|
||||
const Countdown = Statistic.Countdown;
|
||||
const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; // Moment is also OK
|
||||
|
||||
function onFinish() {
|
||||
console.log('finished!');
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Countdown title="Countdown" value={deadline} />
|
||||
<Countdown title="Countdown" value={deadline} onFinish={onFinish} />
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Countdown title="Million Seconds" value={deadline} format="HH:mm:ss:SSS" />
|
||||
|
||||
@ -32,6 +32,7 @@ Display statistic number.
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| format | Format as [moment](http://momentjs.com/) | string | 'HH:mm:ss' |
|
||||
| onFinish | Trigger when time's up | () => void | - |
|
||||
| prefix | prefix node of value | string \| ReactNode | - |
|
||||
| suffix | suffix node of value | string \| ReactNode | - |
|
||||
| title | Display title | string \| ReactNode | - |
|
||||
|
||||
@ -33,6 +33,7 @@ title: Statistic
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| format | 格式化倒计时展示，参考 [moment](http://momentjs.com/) | string | 'HH:mm:ss' |
|
||||
| onFinish | 倒计时完成时触发 | () => void | - |
|
||||
| prefix | 设置数值的前缀 | string \| ReactNode | - |
|
||||
| suffix | 设置数值的后缀 | string \| ReactNode | - |
|
||||
| title | 数值的标题 | string \| ReactNode | - |
|
||||
|
||||
@ -13,7 +13,8 @@ export interface SwitchProps {
|
||||
className?: string;
|
||||
checked?: boolean;
|
||||
defaultChecked?: boolean;
|
||||
onChange?: (checked: boolean) => any;
|
||||
onChange?: (checked: boolean, event: MouseEvent) => any;
|
||||
onClick?: (checked: boolean, event: MouseEvent) => any;
|
||||
checkedChildren?: React.ReactNode;
|
||||
unCheckedChildren?: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
|
||||
@ -158,6 +158,10 @@
|
||||
* {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -208,6 +208,10 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
this.store.setState({
|
||||
selectedRowKeys: nextProps.rowSelection.selectedRowKeys || [],
|
||||
});
|
||||
} else if (this.props.rowSelection && !nextProps.rowSelection) {
|
||||
this.store.setState({
|
||||
selectedRowKeys: [],
|
||||
});
|
||||
}
|
||||
if ('dataSource' in nextProps && nextProps.dataSource !== this.props.dataSource) {
|
||||
this.store.setState({
|
||||
@ -477,7 +481,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
}
|
||||
|
||||
// Controlled current prop will not respond user interaction
|
||||
if (typeof props.pagination === 'object' && 'current' in (props.pagination as Object)) {
|
||||
if (typeof props.pagination === 'object' && 'current' in props.pagination) {
|
||||
newState.pagination = {
|
||||
...pagination,
|
||||
current: this.state.pagination.current,
|
||||
@ -670,11 +674,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
pagination,
|
||||
};
|
||||
// Controlled current prop will not respond user interaction
|
||||
if (
|
||||
props.pagination &&
|
||||
typeof props.pagination === 'object' &&
|
||||
'current' in (props.pagination as Object)
|
||||
) {
|
||||
if (props.pagination && typeof props.pagination === 'object' && 'current' in props.pagination) {
|
||||
newState.pagination = {
|
||||
...pagination,
|
||||
current: this.state.pagination.current,
|
||||
@ -727,7 +727,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
getRecordKey = (record: T, index: number) => {
|
||||
const { rowKey } = this.props;
|
||||
const recordKey =
|
||||
typeof rowKey === 'function' ? rowKey(record, index) : (record as any)[rowKey as string];
|
||||
typeof rowKey === 'function' ? rowKey(record, index) : (record as any)[rowKey!];
|
||||
warning(
|
||||
recordKey !== undefined,
|
||||
'Each record in dataSource of table should have a unique `key` prop, ' +
|
||||
@ -956,7 +956,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
const { pagination } = this.state;
|
||||
if (pagination.size) {
|
||||
size = pagination.size;
|
||||
} else if ((this.props.size as string) === 'middle' || this.props.size === 'small') {
|
||||
} else if (this.props.size === 'middle' || this.props.size === 'small') {
|
||||
size = 'small';
|
||||
}
|
||||
const position = pagination.position || 'bottom';
|
||||
@ -1012,6 +1012,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
let current: number;
|
||||
let pageSize: number;
|
||||
const state = this.state;
|
||||
const pagination = this.props.pagination || {};
|
||||
// 如果没有分页的话，默认全部展示
|
||||
if (!this.hasPagination()) {
|
||||
pageSize = Number.MAX_VALUE;
|
||||
@ -1028,7 +1029,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
if (
|
||||
data.length > pageSize ||
|
||||
pageSize === Number.MAX_VALUE ||
|
||||
current * pageSize > data.length
|
||||
(pagination.current === undefined && current * pageSize > data.length)
|
||||
) {
|
||||
data = data.filter((_, i) => {
|
||||
return i >= (current - 1) * pageSize && i < current * pageSize;
|
||||
|
||||
@ -190,5 +190,9 @@ describe('Table.pagination', () => {
|
||||
expect(renderedNames(wrapper)[0]).toEqual('Jack');
|
||||
wrapper.find('.ant-pagination-item-2').simulate('click');
|
||||
expect(renderedNames(wrapper)).toEqual([]);
|
||||
wrapper.setProps({ pagination: { current: 1, pageSize: 10, total: 100 } });
|
||||
expect(renderedNames(wrapper)[0]).toEqual('Jack');
|
||||
wrapper.setProps({ pagination: { current: 2, pageSize: 10, total: 100 } });
|
||||
expect(renderedNames(wrapper)).toHaveLength(4);
|
||||
});
|
||||
});
|
||||
|
||||
@ -651,4 +651,17 @@ describe('Table.rowSelection', () => {
|
||||
checkboxes.at(2).simulate('change', { target: { checked: true } });
|
||||
expect(checkboxAll.instance().state).toEqual({ indeterminate: false, checked: true });
|
||||
});
|
||||
|
||||
it('clear selection className when remove `rowSelection`', () => {
|
||||
const dataSource = [{ id: 1, name: 'Hello', age: 10 }, { id: 2, name: 'World', age: 30 }];
|
||||
|
||||
const wrapper = mount(<Table columns={columns} dataSource={dataSource} rowSelection={{}} />);
|
||||
const checkboxes = wrapper.find('input');
|
||||
checkboxes.at(1).simulate('change', { target: { checked: true } });
|
||||
|
||||
expect(wrapper.find('.ant-table-row-selected').length).toBe(1);
|
||||
|
||||
wrapper.setProps({ rowSelection: null });
|
||||
expect(wrapper.find('.ant-table-row-selected').length).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
@ -19,22 +19,7 @@ import { DragDropContext, DragSource, DropTarget } from 'react-dnd';
|
||||
import HTML5Backend from 'react-dnd-html5-backend';
|
||||
import update from 'immutability-helper';
|
||||
|
||||
function dragDirection(
|
||||
dragIndex,
|
||||
hoverIndex,
|
||||
initialClientOffset,
|
||||
clientOffset,
|
||||
sourceClientOffset,
|
||||
) {
|
||||
const hoverMiddleY = (initialClientOffset.y - sourceClientOffset.y) / 2;
|
||||
const hoverClientY = clientOffset.y - sourceClientOffset.y;
|
||||
if (dragIndex < hoverIndex && hoverClientY > hoverMiddleY) {
|
||||
return 'downward';
|
||||
}
|
||||
if (dragIndex > hoverIndex && hoverClientY < hoverMiddleY) {
|
||||
return 'upward';
|
||||
}
|
||||
}
|
||||
let dragingIndex = -1;
|
||||
|
||||
class BodyRow extends React.Component {
|
||||
render() {
|
||||
@ -43,27 +28,16 @@ class BodyRow extends React.Component {
|
||||
connectDragSource,
|
||||
connectDropTarget,
|
||||
moveRow,
|
||||
dragRow,
|
||||
clientOffset,
|
||||
sourceClientOffset,
|
||||
initialClientOffset,
|
||||
...restProps
|
||||
} = this.props;
|
||||
const style = { ...restProps.style, cursor: 'move' };
|
||||
|
||||
let className = restProps.className;
|
||||
if (isOver && initialClientOffset) {
|
||||
const direction = dragDirection(
|
||||
dragRow.index,
|
||||
restProps.index,
|
||||
initialClientOffset,
|
||||
clientOffset,
|
||||
sourceClientOffset
|
||||
);
|
||||
if (direction === 'downward') {
|
||||
if (isOver) {
|
||||
if (restProps.index > dragingIndex) {
|
||||
className += ' drop-over-downward';
|
||||
}
|
||||
if (direction === 'upward') {
|
||||
if (restProps.index < dragingIndex) {
|
||||
className += ' drop-over-upward';
|
||||
}
|
||||
}
|
||||
@ -82,6 +56,7 @@ class BodyRow extends React.Component {
|
||||
|
||||
const rowSource = {
|
||||
beginDrag(props) {
|
||||
dragingIndex = props.index;
|
||||
return {
|
||||
index: props.index,
|
||||
};
|
||||
@ -109,17 +84,21 @@ const rowTarget = {
|
||||
},
|
||||
};
|
||||
|
||||
const DragableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
|
||||
connectDropTarget: connect.dropTarget(),
|
||||
isOver: monitor.isOver(),
|
||||
sourceClientOffset: monitor.getSourceClientOffset(),
|
||||
}))(
|
||||
DragSource('row', rowSource, (connect, monitor) => ({
|
||||
connectDragSource: connect.dragSource(),
|
||||
dragRow: monitor.getItem(),
|
||||
clientOffset: monitor.getClientOffset(),
|
||||
initialClientOffset: monitor.getInitialClientOffset(),
|
||||
}))(BodyRow)
|
||||
const DragableBodyRow = DropTarget(
|
||||
'row',
|
||||
rowTarget,
|
||||
(connect, monitor) => ({
|
||||
connectDropTarget: connect.dropTarget(),
|
||||
isOver: monitor.isOver(),
|
||||
}),
|
||||
)(
|
||||
DragSource(
|
||||
'row',
|
||||
rowSource,
|
||||
(connect) => ({
|
||||
connectDragSource: connect.dragSource(),
|
||||
}),
|
||||
)(BodyRow),
|
||||
);
|
||||
|
||||
const columns = [{
|
||||
|
||||
@ -113,7 +113,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
|
||||
| align | specify how content is aligned | 'left' \| 'right' \| 'center' | 'left' |
|
||||
| className | className of this column | string | - |
|
||||
| colSpan | Span of this column's title | number | |
|
||||
| dataIndex | Display field of the data record, could be set like `a.b.c`、`a[0].b.c[1]` | string | - |
|
||||
| dataIndex | Display field of the data record, could be set like `a.b.c`, `a[0].b.c[1]` | string | - |
|
||||
| defaultSortOrder | Default order of sorted values | 'ascend' \| 'descend' | - |
|
||||
| filterDropdown | Customized filter overlay | ReactNode | - |
|
||||
| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - |
|
||||
|
||||
@ -316,11 +316,17 @@ class Upload extends React.Component<UploadProps, UploadState> {
|
||||
[`${prefixCls}-disabled`]: disabled,
|
||||
});
|
||||
|
||||
const uploadButton = children ? (
|
||||
<div className={uploadButtonCls}>
|
||||
// Remove id to avoid open by label when trigger is hidden
|
||||
// https://github.com/ant-design/ant-design/issues/14298
|
||||
if (!children) {
|
||||
delete rcUploadProps.id;
|
||||
}
|
||||
|
||||
const uploadButton = (
|
||||
<div className={uploadButtonCls} style={children ? undefined : { display: 'none' }}>
|
||||
<RcUpload {...rcUploadProps} ref={this.saveUpload} />
|
||||
</div>
|
||||
) : null;
|
||||
);
|
||||
|
||||
if (listType === 'picture-card') {
|
||||
return (
|
||||
|
||||
@ -188,6 +188,19 @@ describe('Upload', () => {
|
||||
});
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/14779
|
||||
it('should contain input file control if upload button is hidden', () => {
|
||||
const wrapper = mount(
|
||||
<Upload action="http://upload.com">
|
||||
<button type="button">upload</button>
|
||||
</Upload>,
|
||||
);
|
||||
|
||||
expect(wrapper.find('input[type="file"]').length).toBe(1);
|
||||
wrapper.setProps({ children: null });
|
||||
expect(wrapper.find('input[type="file"]').length).toBe(1);
|
||||
});
|
||||
|
||||
it('should be controlled by fileList', () => {
|
||||
const fileList = [
|
||||
{
|
||||
|
||||
@ -57,7 +57,7 @@ When uploading state change, it returns:
|
||||
|
||||
```js
|
||||
{
|
||||
uid: 'uid', // unique identifier，negative is recommend，to prevent interference with internal generated id
|
||||
uid: 'uid', // unique identifier, negative is recommend, to prevent interference with internal generated id
|
||||
name: 'xx.png' // file name
|
||||
status: 'done', // options：uploading, done, error, removed
|
||||
response: '{"status": "success"}', // response from server
|
||||
|
||||
@ -76,6 +76,7 @@ export interface UploadProps {
|
||||
withCredentials?: boolean;
|
||||
openFileDialogOnClick?: boolean;
|
||||
locale?: UploadLocale;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
export interface UploadState {
|
||||
|
||||
@ -69,7 +69,7 @@ Note that do not exclude antd package in node_modules when using less-loader.
|
||||
|
||||
### Customize in roadhog or Umi
|
||||
|
||||
You can easily use `theme` field in [.webpackrc](https://github.com/ant-design/ant-design-pro/blob/b7e7983661eb5e53dc807452e9653e93e74276d4/.webpackrc.js#L18) (roadhog) or [config/config.js](https://github.com/ant-design/ant-design-pro/blob/56e648ec14bdb9f6724169fd64830447e224ccb1/config/config.js#L45) (Umi) file of your project root directory if you are using [roadhog](https://github.com/sorrycc/roadhog) or [Umi](http://umijs.org/)，which could be a object or a javascript file path.
|
||||
You can easily use `theme` field in [.webpackrc](https://github.com/ant-design/ant-design-pro/blob/b7e7983661eb5e53dc807452e9653e93e74276d4/.webpackrc.js#L18) (roadhog) or [config/config.js](https://github.com/ant-design/ant-design-pro/blob/56e648ec14bdb9f6724169fd64830447e224ccb1/config/config.js#L45) (Umi) file of your project root directory if you are using [roadhog](https://github.com/sorrycc/roadhog) or [Umi](http://umijs.org/), which could be a object or a javascript file path.
|
||||
|
||||
```js
|
||||
"theme": {
|
||||
|
||||
@ -48,7 +48,7 @@ You can subscribe to this feed for new version notifications: https://github.com
|
||||
|
||||
### Using npm or yarn
|
||||
|
||||
**We recommend using npm or yarn to install**，it not only makes development easier，but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.
|
||||
**We recommend using npm or yarn to install**, it not only makes development easier, but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.
|
||||
|
||||
```bash
|
||||
$ npm install antd --save
|
||||
@ -58,7 +58,7 @@ $ npm install antd --save
|
||||
$ yarn add antd
|
||||
```
|
||||
|
||||
If you are in a bad network environment，you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm).
|
||||
If you are in a bad network environment, you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm).
|
||||
|
||||
### Import in Browser
|
||||
|
||||
|
||||
@ -79,10 +79,10 @@ For instance, we actually import all styles of components in the project which m
|
||||
|
||||
Now we need to customize the default webpack config. We can achieve that by using [react-app-rewired](https://github.com/timarney/react-app-rewired) which is one of create-react-app's custom config solutions.
|
||||
|
||||
Import react-app-rewired and modify the `scripts` field in package.json.
|
||||
Import react-app-rewired and modify the `scripts` field in package.json. Due to new [react-app-rewired@2.x](https://github.com/timarney/react-app-rewired#alternatives) issue, you shall need [customize-cra](https://github.com/arackaf/customize-cra) along with react-app-rewired.
|
||||
|
||||
```
|
||||
$ yarn add react-app-rewired
|
||||
$ yarn add react-app-rewired customize-cra
|
||||
```
|
||||
|
||||
```diff
|
||||
|
||||
@ -78,10 +78,10 @@ export default App;
|
||||
|
||||
此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 [react-app-rewired](https://github.com/timarney/react-app-rewired) （一个对 create-react-app 进行自定义配置的社区解决方案）。
|
||||
|
||||
引入 react-app-rewired 并修改 package.json 里的启动配置。
|
||||
引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 [react-app-rewired@2.x](https://github.com/timarney/react-app-rewired#alternatives) 版本的关系，你需要还需要安装 [customize-cra](https://github.com/arackaf/customize-cra)。
|
||||
|
||||
```
|
||||
$ yarn add react-app-rewired
|
||||
$ yarn add react-app-rewired customize-cra
|
||||
```
|
||||
|
||||
```diff
|
||||
|
||||
@ -95,7 +95,7 @@ For instance, we actually import all styles of components in the project which m
|
||||
|
||||
Now we need to customize the default webpack config. We can achieve that by using [react-app-rewired](https://github.com/timarney/react-app-rewired) which is one of create-react-app's custom config solutions.
|
||||
|
||||
Import react-app-rewired and modify the `scripts` field in package.json. Due to new `react-app-rewired@2.x` versions, you have to install customize-cra along with react-app-rewired.
|
||||
Import react-app-rewired and modify the `scripts` field in package.json. Due to new [react-app-rewired@2.x](https://github.com/timarney/react-app-rewired#alternatives) issue, you shall need [customize-cra](https://github.com/arackaf/customize-cra) along with react-app-rewired.
|
||||
|
||||
```
|
||||
$ yarn add react-app-rewired customize-cra
|
||||
|
||||
@ -90,9 +90,9 @@ export default App;
|
||||
|
||||
我们现在已经把组件成功运行起来了，但是在实际开发过程中还有很多问题，例如上面的例子实际上加载了全部的 antd 组件的样式（对前端性能是个隐患）。
|
||||
|
||||
此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 [react-app-rewired](https://github.com/timarney/react-app-rewired) （一个对 create-react-app 进行自定义配置的社区解决方案）。由于新的 `react-app-rewired@2.x` 版本的关系，你必须安装 customize-cra 以及 react-app-rewired 。
|
||||
此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 [react-app-rewired](https://github.com/timarney/react-app-rewired) （一个对 create-react-app 进行自定义配置的社区解决方案）。
|
||||
|
||||
引入 react-app-rewired 并修改 package.json 里的启动配置。
|
||||
引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 [react-app-rewired@2.x](https://github.com/timarney/react-app-rewired#alternatives) 版本的关系，你需要还需要安装 [customize-cra](https://github.com/arackaf/customize-cra)。
|
||||
|
||||
```
|
||||
$ yarn add react-app-rewired customize-cra
|
||||
|
||||
@ -4,7 +4,7 @@ order: 2
|
||||
title: Alignment
|
||||
---
|
||||
|
||||
As is described in the Law of Continuity of Gestalt psychology, in the perceptual process, people usually tend to understand the object in the way that it is firstly perceived, to let the straight lines be straight and let the curve lines be curve. In the design of interface, aligning the elements meets users’ perception, also delivers the information to users in a more smooth way.
|
||||
As is described in the Law of Continuity of Gestalt psychology, in the perceptual process, people usually tend to understand the object in the way that it is firstly perceived, to let the straight lines be straight and let the curve lines be curve. In the design of interface, aligning the elements meets users' perception, also delivers the information to users in a more smooth way.
|
||||
|
||||
> ** Gestalt psychology or gestaltism（German：Gestalttheorie）** ：Gestalttheorie is an important genre of psychology. It rose in the beginning of the 20 century in Germany.The central principle of gestalt psychology is that the mind forms a global whole with self-organizing tendencies.『The whole is other than the sum of the parts.』--Quote from Wikipedia
|
||||
|
||||
@ -32,4 +32,4 @@ Colon alignment(right-align) can encircle the content into a certain range. User
|
||||
<img class="preview-img good" align="right" alt="good example" src="https://gw.alipayobjects.com/zos/rmsportal/bIJAZcUmaRxJeFxZJwUp.png">
|
||||
<img class="preview-img bad" align="right" alt="bad example" src="https://gw.alipayobjects.com/zos/rmsportal/zUmANVIhBanDnlyOhvaH.png">
|
||||
|
||||
To compare the numbers faster, we suggest that all numbers should keep the same digit numbers after decimal point; meanwhile all numbers should be right-aligned. 。
|
||||
To compare the numbers faster, we suggest that all numbers should keep the same digit numbers after decimal point; meanwhile all numbers should be right-aligned.
|
||||
|
||||
@ -15,7 +15,7 @@ Contrast is one of the effective ways to add visual interest to your page, and t
|
||||
<img class="preview-img good" align="right" alt="good example" src="https://gw.alipayobjects.com/zos/rmsportal/DXDSNzVmrVwVRJCTyaTH.png">
|
||||
<img class="preview-img bad" align="right" alt="bad example" src="https://gw.alipayobjects.com/zos/rmsportal/tMlELOuJrJrrYtTAbnlu.png">
|
||||
|
||||
In order to help user make a quick operation (something like the form，modal), a more important operation or a operation with higher frequency would be emphasized.
|
||||
In order to help user make a quick operation (something like the form, modal), a more important operation or a operation with higher frequency would be emphasized.
|
||||
|
||||
> Notes: ways of emphasizing are not just to intensify the key item. It could also weaken the other items.
|
||||
|
||||
@ -23,7 +23,7 @@ In order to help user make a quick operation (something like the form，modal),
|
||||
|
||||
<img class="preview-img" align="right" alt="Example of ignoring the primary and secondary sequence" description="Accept and Reject should use default button, for UI should not affect user's decision." src="https://gw.alipayobjects.com/zos/rmsportal/gniiMTPEHagxaelGBjAe.png">
|
||||
|
||||
When there’s something needs users to make decision prudently, the system should remain neutral. It shouldn’t make the decision for users or lead them to make judgement.
|
||||
When there's something needs users to make decision prudently, the system should remain neutral. It shouldn't make the decision for users or lead them to make judgement.
|
||||
|
||||
---
|
||||
|
||||
@ -41,7 +41,7 @@ Taking advantage of changing the typesetting, the typeface and the size, we high
|
||||
|
||||
<img class="preview-img" align="right" alt="Example of static contrast" description="Points with various colors would be used to show different states. " src="https://gw.alipayobjects.com/zos/rmsportal/PMVYKxaLBApJFyXAxkHy.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="Example of dynamic contrast" description="When the mouse doesn’t be moved, this item and other items would show different visual effects obviously, which would influence the user’s operation." src="https://gw.alipayobjects.com/zos/rmsportal/WXNjOhgQDMnNoieFrFMP.png">
|
||||
<img class="preview-img" align="right" alt="Example of dynamic contrast" description="When the mouse doesn't be moved, this item and other items would show different visual effects obviously, which would influence the user's operation." src="https://gw.alipayobjects.com/zos/rmsportal/WXNjOhgQDMnNoieFrFMP.png">
|
||||
|
||||
Taking advantage of changing colors and adding assistant shapes, we realize the comparison of state relation, which could help users differentiate various information better
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ If the priority is given to 『readability』 and the 『editability』 of opera
|
||||
|
||||
Multi-Field Inline Edit
|
||||
|
||||
>Note：In『Multi-Field Inline Edit』，there are huge different between the content and required field，So it is more needed to use the [『Explain What Just Happened』](../docs/spec/transition#解释刚刚发生了什么) in 『Use Transition』to eliminate this visual effects.
|
||||
>Note：In『Multi-Field Inline Edit』, there are huge different between the content and required field, So it is more needed to use the [『Explain What Just Happened』](../docs/spec/transition#解释刚刚发生了什么) in 『Use Transition』to eliminate this visual effects.
|
||||
|
||||
|
||||
<br>
|
||||
@ -38,7 +38,7 @@ Multi-Field Inline Edit
|
||||
|
||||
## Drag and Drop
|
||||
|
||||
<img class="preview-img" align="right" alt="Example of Drag and Drop List" description="Status 1: On mouse hover,a removable 『icon』 appears.；<br>Status 2： When hovering over the 『icon』，the pointer changes into a 『hand』， click-and-drag operation can be used；<br>Status 3：Drag target to the placeable block. When blue stroke appears, inform user that object can be placed in the block." src="https://gw.alipayobjects.com/zos/rmsportal/xZWSNecZhGXaAVluxOAK.png">
|
||||
<img class="preview-img" align="right" alt="Example of Drag and Drop List" description="Status 1: On mouse hover,a removable 『icon』 appears.；<br>Status 2： When hovering over the 『icon』, the pointer changes into a 『hand』, click-and-drag operation can be used；<br>Status 3：Drag target to the placeable block. When blue stroke appears, inform user that object can be placed in the block." src="https://gw.alipayobjects.com/zos/rmsportal/xZWSNecZhGXaAVluxOAK.png">
|
||||
|
||||
Drag and Drop List
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ An icon is a graphical representation of meaning. Icons can be used to express a
|
||||
|
||||
## System Icons
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/XzOPonWCsPjvgkrklCzo.png">
|
||||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/XzOPonWCsPjvgkrklCzo.png" alt="System Icons">
|
||||
|
||||
System icons are often used to represent commonly used operations, such as: save, edit, delete. Ant Design also includes icons to represent file types and state.
|
||||
|
||||
@ -21,7 +21,7 @@ System icons are often used to represent commonly used operations, such as: save
|
||||
|
||||
### Key Contour Lines
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/beTZeZjJBVuhMyTOhebs.png" alt="Ant Design's grid and key contour lines">
|
||||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/beTZeZjJBVuhMyTOhebs.png" alt="Ant Design's grid and key contour lines" alt="Key Contour Lines">
|
||||
|
||||
Contour lines play an important role in making various icons with the same visual effect.
|
||||
|
||||
@ -67,13 +67,13 @@ Always keep a simple, flat style. Icons should not have a sense of depth nor a l
|
||||
|
||||
### Naming Conventions
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/NFOvbdbVWeeEqOkdUfVB.png">
|
||||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/NFOvbdbVWeeEqOkdUfVB.png" alt="Naming Conventions">
|
||||
|
||||
Uniform naming conventions make finding icons faster and easier. For example, icons with a surrounding outline have a uniform "-o" suffix.
|
||||
|
||||
### Icon Sizing
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/jAuedlyhNIDyOIZTqbqN.png">
|
||||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/jAuedlyhNIDyOIZTqbqN.png" alt="Icon Sizing">
|
||||
|
||||
Icons should be scaled according to the text size, according to the Ant Design specification.
|
||||
|
||||
@ -81,7 +81,7 @@ For example, icons inline with 12pt font should be 12px in size with 8px of spac
|
||||
|
||||
### Color
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/LxGLhtnwvCqZWYqGDAAr.png" description="Colors demonstrated - @Black = #000000、@White = #FFFFFF、@Blue-6 = #1890FF">
|
||||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/LxGLhtnwvCqZWYqGDAAr.png" description="Colors demonstrated - @Black = #000000, @White = #FFFFFF, @Blue-6 = #1890FF" alt="Color">
|
||||
|
||||
The color of the icon should be consistent the color of the surrounding copy, unless the icon is being used to express state (in which case it should be colored accordingly).
|
||||
|
||||
@ -89,7 +89,7 @@ The color of the icon should be consistent the color of the surrounding copy, un
|
||||
|
||||
## Business Icons
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/EADAnRecKSTxvpxPzKoq.png">
|
||||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/EADAnRecKSTxvpxPzKoq.png" alt="Business Icons">
|
||||
|
||||
Business icons, unlike system icons, do not themselves have functional operations, but rather an abstraction that assists with copywriting. Compared to the system icon, the business icon is more rich in the details of the design, the size of the use of relatively large.
|
||||
|
||||
@ -97,12 +97,12 @@ Business icons, unlike system icons, do not themselves have functional operation
|
||||
|
||||
### Icon Sizing
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/uwAgfciGszhdiVlMSBXK.png">
|
||||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/uwAgfciGszhdiVlMSBXK.png" alt="Icon Sizing">
|
||||
|
||||
In normal use, there are 32px (minimum size), 48px and 64px (maximum size) three options.
|
||||
|
||||
### Color
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/wUxhTxZlHoTxDvneWBWO.png">
|
||||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/wUxhTxZlHoTxDvneWBWO.png" alt="Color">
|
||||
|
||||
There are two kinds of business icon, single-color (neutral color) and double-color (neutral color + primary color), the area of primary color does not exceed 40% of the entire icon.
|
||||
|
||||
@ -30,13 +30,13 @@ Ant Design 的图标设计原则源自"确定"和"自然"，落实到图标设
|
||||
- **Artboard：** Ant Design 的系统图标都是按照 1024 x 1024 的画板进行制作的：
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/mrrFTiCWOyCsVOgAIBqg.png">
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/mrrFTiCWOyCsVOgAIBqg.png" alt="设计规格">
|
||||
</div>
|
||||
|
||||
- **出血位：** 在图标的设计过程中预留出血位的做法，可以预防某些造型的图标在具体应用时出现边缘被切掉的风险；同时在设计过程中，也为设计师把握图标间平衡留下了进退的余地。新版的设计规格在图形的外围预留了 64px 的出血位，多数的图标在设计中我们都不建议超过这个区域。
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/FNXMpWnyvYfydiSnPCYg.png">
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/FNXMpWnyvYfydiSnPCYg.png" alt="出血位">
|
||||
</div>
|
||||
|
||||
## 分层
|
||||
@ -44,7 +44,7 @@ Ant Design 的图标设计原则源自"确定"和"自然"，落实到图标设
|
||||
Ant Design 的图标设计对于设计稿的分层也有一定的要求，其目的除了让设计师实现有序的文档管理之外，更多的是便于团队间文档的传递，统一的设计框架像是无形的共识，可以让彼此间的理解得到进一步的提升。
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/bVtUZqDRbGuaoVbwYqua.png">
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/bVtUZqDRbGuaoVbwYqua.png" alt="分层">
|
||||
</div>
|
||||
|
||||
## 轮廓线与模版
|
||||
@ -52,7 +52,7 @@ Ant Design 的图标设计对于设计稿的分层也有一定的要求，其目
|
||||
我们对设计模版进行了优化，根据出血位的尺寸，调整轮廓线的宽高，同时增加两个等边三角形和一个圆，这些都是图标设计中最常用的基本形式，设计师可以快速的调用并在此基础上做变形。
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/ycDkLxfAqjnRsWZuHvik.png">
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/ycDkLxfAqjnRsWZuHvik.png" alt="轮廓线与模版">
|
||||
</div>
|
||||
|
||||
## 图标设计指引
|
||||
@ -64,7 +64,7 @@ Ant Design 的图标设计对于设计稿的分层也有一定的要求，其目
|
||||
形式，是构成一个图形最初始的结构。Ant Design 整套基础图标基本上都是由圆、方、三角这样的图形演变而成的。追求图形初始结构的理性，而非直觉式的设计，是秩序之美的第一步。
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/HpESYoDACMTUWLEqtBRb.png">
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/HpESYoDACMTUWLEqtBRb.png" alt="形式">
|
||||
</div>
|
||||
|
||||
### 2、韵律
|
||||
@ -76,31 +76,31 @@ Ant Design 图标的韵律感通过两个方面来体现：元素的韵律和构
|
||||
- **点：** 点是很多图形中都会出现的元素。Ant Design 会在一套图标中挖掘同一元素的规律，同时对其进行克制的运用。我们对于点的尺寸选择上会保持 16 的倍数这一原则。比如，在点的选择中，新版的图标最常用的是四种尺寸的点，分别为 80、96、112、128。当出现特殊尺寸的需求时，会按照 16 的倍数进行延展。
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/qOHVVNiWAiQoHRjkuntb.png">
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/qOHVVNiWAiQoHRjkuntb.png" alt="点">
|
||||
</div>
|
||||
|
||||
- **线：** 线条也是非常通用的元素之一。新版图标在线条之间的关系采用 8 倍数原则，从小到大以 8 的规律递增。常用的规格也是 4 种，分别为 56、64、72、80。
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/WqaPFOssksoRsfSEMYgc.png">
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/WqaPFOssksoRsfSEMYgc.png" alt="线">
|
||||
</div>
|
||||
|
||||
- **圆角：** 圆角的规格采取的也是 8 倍数原则，最常用的是 3 种，分别是 8，16、32，它们之间是两倍数的关系。而图标内部空间的圆角则保持直角的处理方式。
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/EycXTskdagLPlYMTvfdC.png">
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/EycXTskdagLPlYMTvfdC.png" alt="圆角">
|
||||
</div>
|
||||
|
||||
- **三角：** 新版图标的角度受到美式战斗机 F-14 tomcat 的启发，将常用的角度定在约 76 度。在日常设计中，多数系统图标的角度都可以从 76 度这个数值出发，根据实际情况进行灵活的应用。
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/WWnwBEQKIOhIeqbsIHZe.png">
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/WWnwBEQKIOhIeqbsIHZe.png" alt="三角">
|
||||
</div>
|
||||
|
||||
除了定义角度，我们对新图标中实心箭头的规格也做了收敛，在顶角大约保持 76 度的基础上，最常用的为 4 种，他们的宽度保持 8 倍数的原则，间隔为 24 ：
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/jOZvfCdFTfpFxSkJwiMF.png">
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/jOZvfCdFTfpFxSkJwiMF.png" alt="实心箭头">
|
||||
</div>
|
||||
|
||||
基本元素在使用上的规格可以用下面的表格来总结，建议设计师在一套图标的设计中尽量保持克制的态度。
|
||||
@ -121,13 +121,13 @@ Ant Design 图标的韵律感通过两个方面来体现：元素的韵律和构
|
||||
- 保持类似图标在构造上的一致性也是建立图标体系节奏感的一种方法。
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/jpsoohmwvVgwSsblgPbc.png">
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/jpsoohmwvVgwSsblgPbc.png" alt="节奏感">
|
||||
</div>
|
||||
|
||||
- 此外，在单个图标的设计过程中，也建议适当理性的看待各元素间的比例关系，而非直觉式的开展绘制。
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/XorcLWyrefyAmYagUpgY.png">
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/XorcLWyrefyAmYagUpgY.png" alt="元素间的比例关系">
|
||||
</div>
|
||||
|
||||
### 3、平衡
|
||||
@ -137,19 +137,19 @@ Ant Design 图标的韵律感通过两个方面来体现：元素的韵律和构
|
||||
- **弯曲的线条会比竖直的线条看起来细**。 因此在圆形的外边框上我们会适当的对 72px 的规格进行 4 px 的微调。
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/GsrZFQbjQXwQoDRMnhKX.png">
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/GsrZFQbjQXwQoDRMnhKX.png" alt="弯曲的线条会比竖直的线条看起来细">
|
||||
</div>
|
||||
|
||||
- **倾斜的线条也会比竖直的线条看起来细**。 因此倾斜的线条也会进行 4 px 的微调。
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/wfRqkxabWTKdQgiVSzKh.png">
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/wfRqkxabWTKdQgiVSzKh.png" alt="倾斜的线条也会比竖直的线条看起来细">
|
||||
</div>
|
||||
|
||||
- **图形的留白空间也是值得推敲的课题**。 当某些图形的留白不足时，可以通过调节线条的粗细来达到视觉重量上的平衡。
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/fVyyVdYqEXyjmxlWLtVw.png">
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/fVyyVdYqEXyjmxlWLtVw.png" alt="图形的留白空间也是值得推敲的课题">
|
||||
</div>
|
||||
|
||||
### 4、辨识
|
||||
@ -159,13 +159,13 @@ Ant Design 图标的韵律感通过两个方面来体现：元素的韵律和构
|
||||
- **让科技有温度：** 通过对于图形圆角的定义，将过于圆润的圆角（72）调整至（32），在视觉效果上令图标看起来更为坚硬和理性（对应科技感），但又不至于太过尖锐（有温度）。
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/aPRvNTmHNYxBoOeijhTM.png">
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/aPRvNTmHNYxBoOeijhTM.png" alt="让科技有温度">
|
||||
</div>
|
||||
|
||||
- **让图形有生命：** 在部分图标设计中，会适度的注入拟人化的元素，令图标具备生命力。
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/scJOuEdiwCgPONdiCZYZ.png">
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/scJOuEdiwCgPONdiCZYZ.png" alt="让图形有生命">
|
||||
</div>
|
||||
|
||||
## 给设计师的一些建议
|
||||
@ -175,25 +175,25 @@ Ant Design 图标的韵律感通过两个方面来体现：元素的韵律和构
|
||||
- 干掉多余的节点，保持图形的整洁。
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/GTrZirSrsMIawXVjwoDI.png">
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/GTrZirSrsMIawXVjwoDI.png" alt="保持图形的整洁">
|
||||
</div>
|
||||
|
||||
- 合并图形，便于输出。
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/CIKruspXHoWevGWpoXJO.png">
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/CIKruspXHoWevGWpoXJO.png" alt="合并图形">
|
||||
</div>
|
||||
|
||||
- 对小数点以及奇数进行最后一遍的走查与修正。
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/ySgIPVZBqPOWXOmTHTzT.png">
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/ySgIPVZBqPOWXOmTHTzT.png" alt="走查与修正">
|
||||
</div>
|
||||
|
||||
- 整洁的图层管理。
|
||||
|
||||
<div>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/zxExIlRfcDTAowrkesHD.png">
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/zxExIlRfcDTAowrkesHD.png" alt="图层管理">
|
||||
</div>
|
||||
|
||||
## 写在最后
|
||||
|
||||
@ -54,7 +54,7 @@ Ant Design's designers keep the following 4 things in mind in the communication
|
||||
|
||||
1. Clear definition of dynamic layout area
|
||||
2. Try to always use even numbers
|
||||
3. Delivery of critical numbers (Gutter、Column)
|
||||
3. Delivery of critical numbers (Gutter, Column)
|
||||
4. Always use beginning column and ending column to define blocks.
|
||||
|
||||
## Common Scales
|
||||
|
||||
@ -4,7 +4,7 @@ order: 7
|
||||
title: Keep it Lightweight
|
||||
---
|
||||
|
||||
Fitts’s Law is an ergonomic principle that ties the size of a target and its contextual proximity to ease of use.In other words, if a tool is close at hand and large enough to target, then we can improve the user’s interaction. Putting tools in context makes for lightweight interaction.
|
||||
Fitts's Law is an ergonomic principle that ties the size of a target and its contextual proximity to ease of use.In other words, if a tool is close at hand and large enough to target, then we can improve the user's interaction. Putting tools in context makes for lightweight interaction.
|
||||
|
||||
|
||||
> <img src="https://os.alipayobjects.com/rmsportal/wAcbQmeqTWDqsnu.png" width="150" />
|
||||
|
||||
@ -20,7 +20,7 @@ Divide the hierarchy of information through three formats:『small spacing』,
|
||||
|
||||
In the case that the three formats are applicable, the hierarchy of information can be separated clearly through adding or cutting down the multiple of 『basic spacing』, or adding elements.
|
||||
|
||||
> Note: in Ant Design, y=8+8*n, among which，n>=0，y stands for the vertical spacing and 8 represents 『basic spacing』.
|
||||
> Note: in Ant Design, y = 8 + 8 * n, among which, n >= 0, y stands for the vertical spacing and 8 represents 『basic spacing』.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ title: 亲密性
|
||||
|
||||
在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。
|
||||
|
||||
> 注：在 Ant Design 中，`y=8+8*n`。其中，`n>=0`，y 是纵向间距，8 是『基础间距』。
|
||||
> 注：在 Ant Design 中，`y = 8 + 8 * n`。其中，`n >= 0`，y 是纵向间距，8 是『基础间距』。
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -4,13 +4,13 @@ order: 10
|
||||
title: React Immediately
|
||||
---
|
||||
|
||||
Invitations are powerful because they directly address discoverability and provide feedback before an interaction happens. Transitions are useful because they provide visual feedback during an interaction. But another class of feedback exists. It is the feedback that happens immediately after each interaction with the system, an immediate reaction paired with the user’s action.
|
||||
Invitations are powerful because they directly address discoverability and provide feedback before an interaction happens. Transitions are useful because they provide visual feedback during an interaction. But another class of feedback exists. It is the feedback that happens immediately after each interaction with the system, an immediate reaction paired with the user's action.
|
||||
|
||||
While we can’t literally extend Newton’s law to the world of user interfaces, we certainly can apply this principle to the way we should interact with users. When users click on a button, they expect the button to depress. When they type in a field, they expect to see characters show up in the text box. When they make a mistake, they want the application to tell them where they goofed.
|
||||
While we can't literally extend Newton's law to the world of user interfaces, we certainly can apply this principle to the way we should interact with users. When users click on a button, they expect the button to depress. When they type in a field, they expect to see characters show up in the text box. When they make a mistake, they want the application to tell them where they goofed.
|
||||
|
||||
While there is a possibility of too much feedback (or, more accurately, too much of the wrong feedback—a concept we will discuss in the upcoming chapters), a system with little or no feedback feels sluggish and thickheaded.
|
||||
|
||||
> ** Newton’s Third Law of Motion **: For every action, there is an equal and opposite reaction, from Wikipedia.
|
||||
> ** Newton's Third Law of Motion **: For every action, there is an equal and opposite reaction, from Wikipedia.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ order: 4
|
||||
title: Repetition
|
||||
---
|
||||
|
||||
The same elements keep repeating in the whole interface, which not only could lower the user’s learning cost effectively, but also help user recognize the relevance between these elements.
|
||||
The same elements keep repeating in the whole interface, which not only could lower the user's learning cost effectively, but also help user recognize the relevance between these elements.
|
||||
|
||||
---
|
||||
|
||||
@ -16,4 +16,4 @@ The same elements keep repeating in the whole interface, which not only could lo
|
||||
|
||||
<img class="preview-img" align="right" alt="Example of repetitive of formats" src="https://gw.alipayobjects.com/zos/rmsportal/DYDGrgkbdFEbcVRuJcjH.png">
|
||||
|
||||
The repetitive element may be a thick rule(line), a wireframe， color, design elements, particular format, spatial relationships, etc.
|
||||
The repetitive element may be a thick rule(line), a wireframe, color, design elements, particular format, spatial relationships, etc.
|
||||
|
||||
@ -4,9 +4,9 @@ order: 6
|
||||
title: Stay on the Page
|
||||
---
|
||||
|
||||
Solve most of problems on the same page and avoid a new one, because the page refresh and forwarding can lead to change blindness, in addition to disrupting the user’s mental flow.
|
||||
Solve most of problems on the same page and avoid a new one, because the page refresh and forwarding can lead to change blindness, in addition to disrupting the user's mental flow.
|
||||
|
||||
> ** Change Blindness** is a surprising perceptual phenomenon that occurs when a change in a visual stimulus is introduced and the observer does not notice it. People's poor ability to detect changes has been argued to reflect fundamental limitations of human attention，from the term of Change blindness, Wikipedia.
|
||||
> ** Change Blindness** is a surprising perceptual phenomenon that occurs when a change in a visual stimulus is introduced and the observer does not notice it. People's poor ability to detect changes has been argued to reflect fundamental limitations of human attention, from the term of Change blindness, Wikipedia.
|
||||
|
||||
> ** Flow**, also known as the zone, is the mental state of operation in which a person performing an activity is fully immersed in a feeling of energized focus, full involvement, and enjoyment in the process of the activity, from the term of Flow, Wikipedia
|
||||
|
||||
@ -19,7 +19,7 @@ Solve most of problems on the same page and avoid a new one, because the page re
|
||||
<img class="preview-img" align="right" alt="good example (special case)" description="If the undo operation is invalid, the Popconfirm is displayed after clicking the delete button. The user can stay on the page to double confirm." src="https://gw.alipayobjects.com/zos/rmsportal/AKtiXJTTQEjKFOCQGZMa.png" good>
|
||||
|
||||
<img class="preview-img" align="right" alt="bad example" description="
|
||||
Abusing the Modal can neither bring the context into the popup, which is prone to interrupt the user’s flow, nor allow the user to undo the change." src="https://gw.alipayobjects.com/zos/rmsportal/cGqkngXLMBlmMyoHtgFs.png" bad>
|
||||
Abusing the Modal can neither bring the context into the popup, which is prone to interrupt the user's flow, nor allow the user to undo the change." src="https://gw.alipayobjects.com/zos/rmsportal/cGqkngXLMBlmMyoHtgFs.png" bad>
|
||||
|
||||
Double-confirm overlay: Using the Modal to double confirm should be avoided, while affording an opportunity to undo is preferred.
|
||||
|
||||
@ -86,5 +86,5 @@ Configurator Process: Provides a configurator that allows users to help them acc
|
||||
|
||||
<img class="preview-img" align="right" alt="example of Dialog Overlay Process" src="https://gw.alipayobjects.com/zos/rmsportal/YutBaHmScUzpbKdFWDcg.png">
|
||||
|
||||
Dialog Overlay Process: Any page switch is an interruption to the user’s mental flow. In addition, any context switch is a chance for a user to leave the site. But sometimes the step-by-step flow is necessary.
|
||||
Dialog Overlay Process: Any page switch is an interruption to the user's mental flow. In addition, any context switch is a chance for a user to leave the site. But sometimes the step-by-step flow is necessary.
|
||||
|
||||
|
||||
@ -63,7 +63,7 @@ Calling out an Object: Click the page element and call out a new object.
|
||||
|
||||
## Improve Perceived Performance
|
||||
|
||||
If actual performance can hardly improved, there is a difference between actual performance and perceived performance. Diverting the user’s attention is a good way to improve the perceived time an operation takes.
|
||||
If actual performance can hardly improved, there is a difference between actual performance and perceived performance. Diverting the user's attention is a good way to improve the perceived time an operation takes.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "3.13.1",
|
||||
"version": "3.13.2",
|
||||
"title": "Ant Design",
|
||||
"description": "An enterprise-class UI design language and React-based implementation",
|
||||
"homepage": "http://ant.design/",
|
||||
@ -71,7 +71,7 @@
|
||||
"rc-progress": "~2.3.0",
|
||||
"rc-rate": "~2.5.0",
|
||||
"rc-select": "~8.8.0",
|
||||
"rc-slider": "~8.6.3",
|
||||
"rc-slider": "~8.6.5",
|
||||
"rc-steps": "~3.3.0",
|
||||
"rc-switch": "~1.9.0",
|
||||
"rc-table": "~6.4.0",
|
||||
@ -103,7 +103,7 @@
|
||||
"@yesmeck/offline-plugin": "^5.0.5",
|
||||
"ansi-styles": "^3.2.1",
|
||||
"antd-theme-generator": "^1.1.4",
|
||||
"antd-tools": "^7.0.0",
|
||||
"antd-tools": "^7.0.1",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"bisheng": "^1.1.0",
|
||||
"bisheng-plugin-antd": "^1.0.0",
|
||||
|
||||
@ -123,6 +123,11 @@ module.exports = {
|
||||
return config;
|
||||
},
|
||||
|
||||
devServerConfig: {
|
||||
public: process.env.DEV_HOST || 'localhost',
|
||||
disableHostCheck: !!process.env.DEV_HOST,
|
||||
},
|
||||
|
||||
htmlTemplateExtraData: {
|
||||
isDev,
|
||||
usePreact,
|
||||
|
||||
@ -112,7 +112,6 @@
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
margin-right: 16px;
|
||||
text-decoration: none;
|
||||
border: 1px solid #2f54eb;
|
||||
font-family: @font-family;
|
||||
|
||||
@ -45,6 +45,10 @@
|
||||
text-align: center;
|
||||
#logo {
|
||||
float: initial;
|
||||
|
||||
img:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
#search-box {
|
||||
|
||||
@ -73,13 +73,17 @@ class Banner extends React.PureComponent {
|
||||
<FormattedMessage id="app.home.getting-started" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link to={utils.getLocalizedPathname('/docs/spec/introduce', isZhCN)}>
|
||||
<Link
|
||||
to={utils.getLocalizedPathname('/docs/spec/introduce', isZhCN)}
|
||||
style={{ marginLeft: 16 }}
|
||||
>
|
||||
<Button className="banner-btn language">
|
||||
<FormattedMessage id="app.home.design-language" />
|
||||
</Button>
|
||||
</Link>
|
||||
{!isMobile && (
|
||||
<GitHubButton
|
||||
style={{ marginLeft: 16 }}
|
||||
key="github-button"
|
||||
size="large"
|
||||
type="stargazers"
|
||||
|
||||
@ -29,9 +29,6 @@ function getStyle() {
|
||||
#header #logo {
|
||||
padding: 0;
|
||||
}
|
||||
#header .nav-phone-icon {
|
||||
display: none;
|
||||
}
|
||||
#header #nav .ant-menu-item {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user