mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 22:36:31 +08:00
Merge 4.0-prepare into fix-button-demo
This commit is contained in:
ycjcl868
commit
6ca5628417
3
.codesandbox/ci.json
Normal file
3
.codesandbox/ci.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"sandboxes": ["wk04r016q8"]
|
||||
}
|
||||
21
.github/workflows/deploy-site.yml
vendored
21
.github/workflows/deploy-site.yml
vendored
@ -9,13 +9,20 @@ jobs:
|
||||
build-and-deploy:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
- name: checkout
|
||||
uses: actions/checkout@master
|
||||
|
||||
- name: Deploy website
|
||||
uses: JamesIves/github-pages-deploy-action@master
|
||||
- name: install
|
||||
run: npm install
|
||||
|
||||
- name: build
|
||||
run: npm run predeploy
|
||||
|
||||
- name: deploy
|
||||
uses: peaceiris/actions-gh-pages@v2.5.0
|
||||
env:
|
||||
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
|
||||
BRANCH: gh-pages
|
||||
FOLDER: _site
|
||||
BUILD_SCRIPT: npm install && npm run predeploy
|
||||
ACTIONS_DEPLOY_KEY: ${{ secrets.ACCESS_TOKEN }}
|
||||
PUBLISH_BRANCH: gh-pages
|
||||
PUBLISH_DIR: ./_site
|
||||
with:
|
||||
emptyCommits: false
|
||||
|
||||
209
.github/workflows/test.yml
vendored
209
.github/workflows/test.yml
vendored
@ -3,16 +3,217 @@ name: test
|
||||
on: [push]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
|
||||
setup:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@master
|
||||
|
||||
- name: cache package-lock.json
|
||||
uses: actions/cache@v1
|
||||
with:
|
||||
path: package-temp-dir
|
||||
key: lock-${{ github.sha }}
|
||||
|
||||
- name: create package-lock.json
|
||||
run: npm i --package-lock-only
|
||||
|
||||
- name: hack for singe file
|
||||
run: |
|
||||
mkdir package-temp-dir
|
||||
cp package-lock.json package-temp-dir
|
||||
|
||||
- name: cache node_modules
|
||||
id: node_modules_cache_id
|
||||
uses: actions/cache@v1
|
||||
with:
|
||||
path: node_modules
|
||||
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
|
||||
|
||||
- name: install
|
||||
run: npm install
|
||||
if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
|
||||
run: npm ci
|
||||
|
||||
compile:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@master
|
||||
|
||||
- name: restore cache from package-lock.json
|
||||
uses: actions/cache@v1
|
||||
with:
|
||||
path: package-temp-dir
|
||||
key: lock-${{ github.sha }}
|
||||
|
||||
- name: restore cache from node_modules
|
||||
uses: actions/cache@v1
|
||||
with:
|
||||
path: node_modules
|
||||
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
|
||||
|
||||
- name: cache lib
|
||||
uses: actions/cache@v1
|
||||
with:
|
||||
path: lib
|
||||
key: lib-${{ github.sha }}
|
||||
|
||||
- name: cache es
|
||||
uses: actions/cache@v1
|
||||
with:
|
||||
path: es
|
||||
key: es-${{ github.sha }}
|
||||
|
||||
- name: compile
|
||||
run: npm run compile
|
||||
|
||||
- name: check
|
||||
run: node ./tests/dekko/lib.test.js
|
||||
|
||||
needs: setup
|
||||
|
||||
dist:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@master
|
||||
|
||||
- name: restore cache from package-lock.json
|
||||
uses: actions/cache@v1
|
||||
with:
|
||||
path: package-temp-dir
|
||||
key: lock-${{ github.sha }}
|
||||
|
||||
- name: restore cache from node_modules
|
||||
uses: actions/cache@v1
|
||||
with:
|
||||
path: node_modules
|
||||
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
|
||||
|
||||
- name: dist
|
||||
run: npm run dist
|
||||
|
||||
- name: check
|
||||
run: node ./tests/dekko/dist.test.js
|
||||
|
||||
- name: test
|
||||
run: npm run test-all
|
||||
run: npm test
|
||||
env:
|
||||
LIB_DIR: dist
|
||||
|
||||
needs: setup
|
||||
|
||||
lint:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@master
|
||||
|
||||
- name: restore cache from package-lock.json
|
||||
uses: actions/cache@v1
|
||||
with:
|
||||
path: package-temp-dir
|
||||
key: lock-${{ github.sha }}
|
||||
|
||||
- name: restore cache from node_modules
|
||||
uses: actions/cache@v1
|
||||
with:
|
||||
path: node_modules
|
||||
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
|
||||
|
||||
- name: lint
|
||||
run: npm run lint
|
||||
|
||||
needs: setup
|
||||
|
||||
node:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@master
|
||||
|
||||
- name: restore cache from package-lock.json
|
||||
uses: actions/cache@v1
|
||||
with:
|
||||
path: package-temp-dir
|
||||
key: lock-${{ github.sha }}
|
||||
|
||||
- name: restore cache from node_modules
|
||||
uses: actions/cache@v1
|
||||
with:
|
||||
path: node_modules
|
||||
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
|
||||
|
||||
- name: test
|
||||
run: npm test
|
||||
|
||||
needs: setup
|
||||
|
||||
lib:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@master
|
||||
|
||||
- name: restore cache from package-lock.json
|
||||
uses: actions/cache@v1
|
||||
with:
|
||||
path: package-temp-dir
|
||||
key: lock-${{ github.sha }}
|
||||
|
||||
- name: restore cache from node_modules
|
||||
uses: actions/cache@v1
|
||||
with:
|
||||
path: node_modules
|
||||
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
|
||||
|
||||
- name: restore cache from lib
|
||||
uses: actions/cache@v1
|
||||
with:
|
||||
path: lib
|
||||
key: lib-${{ github.sha }}
|
||||
|
||||
- name: test
|
||||
run: npm test
|
||||
env:
|
||||
LIB_DIR: lib
|
||||
|
||||
needs: compile
|
||||
|
||||
es:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@master
|
||||
|
||||
- name: restore cache from package-lock.json
|
||||
uses: actions/cache@v1
|
||||
with:
|
||||
path: package-temp-dir
|
||||
key: lock-${{ github.sha }}
|
||||
|
||||
- name: restore cache from node_modules
|
||||
uses: actions/cache@v1
|
||||
with:
|
||||
path: node_modules
|
||||
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
|
||||
|
||||
- name: restore cache from es
|
||||
uses: actions/cache@v1
|
||||
with:
|
||||
path: es
|
||||
key: es-${{ github.sha }}
|
||||
|
||||
- name: test
|
||||
run: npm test
|
||||
env:
|
||||
LIB_DIR: es
|
||||
|
||||
needs: compile
|
||||
|
||||
@ -15,6 +15,29 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 3.25.3
|
||||
|
||||
`2019-11-24`
|
||||
|
||||
- 🐞 Fix TimePicker disabled item style when focussed. [#19812](https://github.com/ant-design/ant-design/pull/19812) [@yoyo837](https://github.com/yoyo837)
|
||||
- 🐞 Fix Menu.Item link style inside Badge. [#19810](https://github.com/ant-design/ant-design/pull/19810)
|
||||
- 🐞 Fix Upload `picture-card` type, for crashed style when list item is removing. [#19783](https://github.com/ant-design/ant-design/pull/19783) [@qq645381995](https://github.com/qq645381995)
|
||||
- 🇳🇱 Update `sk-SK` locales. [#19787](https://github.com/ant-design/ant-design/pull/19787) [@Kamahl19](https://github.com/Kamahl19)
|
||||
- TypeScript
|
||||
- ⚡️ Export interface types in Tooltip. [19846](https://github.com/ant-design/ant-design/pull/19846) [@kachkaev](https://github.com/kachkaev)
|
||||
|
||||
## 3.25.2
|
||||
|
||||
`2019-11-17`
|
||||
|
||||
- 🐞 Fix Upload List do not have tooltip when upload failed. [#19689](https://github.com/ant-design/ant-design/pull/19689) [@qq645381995](https://github.com/qq645381995)
|
||||
- 💄 Fix Transfer search style to avoid text overlap with clear icon. [#19693](https://github.com/ant-design/ant-design/pull/19693) [@Abdullah700](https://github.com/Abdullah700)
|
||||
- 🇳🇱 Update `NL-nl` locales. [#19734](https://github.com/ant-design/ant-design/pull/19734) [@hoest](https://github.com/hoest)
|
||||
- TypeScript
|
||||
- 🐞 Fix Table FilterDropdownProps definition. [#19701](https://github.com/ant-design/ant-design/pull/19701) [@DeanVanNiekerk](https://github.com/DeanVanNiekerk)
|
||||
- 🛠 Slider add `reverse` definition. [#19713](https://github.com/ant-design/ant-design/pull/19713) [@jacklee814](https://github.com/jacklee814)
|
||||
- 🐞 Update Table `filteredValue` definition. [#19722](https://github.com/ant-design/ant-design/pull/19722) [@andelf](https://github.com/andelf)
|
||||
|
||||
## 3.25.1
|
||||
|
||||
`2019-11-10`
|
||||
|
||||
@ -15,6 +15,29 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 3.25.3
|
||||
|
||||
`2019-11-24`
|
||||
|
||||
- 🐞 修复 TimePicker 禁用项 focus 时的样式问题。[#19812](https://github.com/ant-design/ant-design/pull/19812) [@yoyo837](https://github.com/yoyo837)
|
||||
- 🐞 修复 Menu.Item 链接在 Badge 内时，始终处于 active 状态的问题。[#19810](https://github.com/ant-design/ant-design/pull/19810)
|
||||
- 🐞 修复 Upload 类型为 `picture-card` 时，列表删除时的样式问题。[#19783](https://github.com/ant-design/ant-design/pull/19783) [@qq645381995](https://github.com/qq645381995)
|
||||
- 🇳🇱 更新 `sk-SK` 国际化。[#19787](https://github.com/ant-design/ant-design/pull/19787) [@Kamahl19](https://github.com/Kamahl19)
|
||||
- TypeScript
|
||||
- ⚡️ 导出 Tooltip 类型定义。[19846](https://github.com/ant-design/ant-design/pull/19846) [@kachkaev](https://github.com/kachkaev)
|
||||
|
||||
## 3.25.2
|
||||
|
||||
`2019-11-17`
|
||||
|
||||
- 🐞 修复 Upload List 上传错误时没有鼠标悬浮提示的问题。[#19689](https://github.com/ant-design/ant-design/pull/19689) [@qq645381995](https://github.com/qq645381995)
|
||||
- 💄 修复 Transfer 输入框内容会与清除按钮重叠的问题。[#19693](https://github.com/ant-design/ant-design/pull/19693) [@Abdullah700](https://github.com/Abdullah700)
|
||||
- 🇳🇱 更新 `NL-nl` 国际化。[#19734](https://github.com/ant-design/ant-design/pull/19734) [@hoest](https://github.com/hoest)
|
||||
- TypeScript
|
||||
- 🐞 修复 Table FilterDropdownProps 定义。[#19701](https://github.com/ant-design/ant-design/pull/19701) [@DeanVanNiekerk](https://github.com/DeanVanNiekerk)
|
||||
- 🛠 Slider 添加 `reverse` 定义。[#19713](https://github.com/ant-design/ant-design/pull/19713) [@jacklee814](https://github.com/jacklee814)
|
||||
- 🐞 更新 Table `filteredValue` 定义。[#19722](https://github.com/ant-design/ant-design/pull/19722) [@andelf](https://github.com/andelf)
|
||||
|
||||
## 3.25.1
|
||||
|
||||
`2019-11-10`
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
|
||||
An enterprise-class UI design language and React UI library.
|
||||
|
||||
[](https://circleci.com/gh/ant-design/ant-design)  [](https://codecov.io/gh/ant-design/ant-design/branch/master) [](https://www.npmjs.com/package/antd) [](https://www.npmjs.com/package/antd) [](http://npmjs.com/antd)
|
||||
[](https://circleci.com/gh/ant-design/ant-design)  [](https://codecov.io/gh/ant-design/ant-design/branch/master) [](https://www.npmjs.com/package/antd) [](https://www.npmjs.com/package/antd) [](http://npmjs.com/antd)
|
||||
|
||||
[](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)
|
||||
|
||||
|
||||
@ -31,7 +31,6 @@ Array [
|
||||
"InputNumber",
|
||||
"Layout",
|
||||
"List",
|
||||
"LocaleProvider",
|
||||
"message",
|
||||
"Menu",
|
||||
"Mentions",
|
||||
@ -63,7 +62,6 @@ Array [
|
||||
"Timeline",
|
||||
"Tooltip",
|
||||
"Typography",
|
||||
"Mention",
|
||||
"Upload",
|
||||
"version",
|
||||
]
|
||||
|
||||
@ -16,9 +16,9 @@ A relevant icon makes information clearer and more friendly.
|
||||
|
||||
```jsx
|
||||
import { Alert } from 'antd';
|
||||
import { Smile } from '@ant-design/icons';
|
||||
import { SmileOutlined } from '@ant-design/icons';
|
||||
|
||||
const icon = <Smile />;
|
||||
const icon = <SmileOutlined />;
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import * as React from 'react';
|
||||
import * as ReactDOM from 'react-dom';
|
||||
import {
|
||||
Close,
|
||||
CheckCircle,
|
||||
ExclamationCircle,
|
||||
InfoCircle,
|
||||
CloseCircle,
|
||||
CloseOutlined,
|
||||
CheckCircleOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
InfoCircleOutlined,
|
||||
CloseCircleOutlined,
|
||||
CheckCircleFilled,
|
||||
ExclamationCircleFilled,
|
||||
InfoCircleFilled,
|
||||
@ -58,10 +58,10 @@ const iconMapFilled = {
|
||||
};
|
||||
|
||||
const iconMapOutlined = {
|
||||
success: CheckCircle,
|
||||
info: InfoCircle,
|
||||
error: CloseCircle,
|
||||
warning: ExclamationCircle,
|
||||
success: CheckCircleOutlined,
|
||||
info: InfoCircleOutlined,
|
||||
error: CloseCircleOutlined,
|
||||
warning: ExclamationCircleOutlined,
|
||||
};
|
||||
|
||||
export default class Alert extends React.Component<AlertProps, AlertState> {
|
||||
@ -141,7 +141,11 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
|
||||
className={`${prefixCls}-close-icon`}
|
||||
tabIndex={0}
|
||||
>
|
||||
{closeText ? <span className={`${prefixCls}-close-text`}>{closeText}</span> : <Close />}
|
||||
{closeText ? (
|
||||
<span className={`${prefixCls}-close-text`}>{closeText}</span>
|
||||
) : (
|
||||
<CloseOutlined />
|
||||
)}
|
||||
</button>
|
||||
) : null;
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spe
|
||||
|
||||
```tsx
|
||||
import { Input, AutoComplete } from 'antd';
|
||||
import { Search, User } from '@ant-design/icons';
|
||||
import { SearchOutlined, UserOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Option, OptGroup } = AutoComplete;
|
||||
|
||||
@ -42,7 +42,7 @@ function renderItem(title: string, count: number) {
|
||||
<>
|
||||
{title}
|
||||
<span className="certain-search-item-count">
|
||||
<User /> {count}
|
||||
<UserOutlined /> {count}
|
||||
</span>
|
||||
</>
|
||||
),
|
||||
@ -76,7 +76,7 @@ function Complete() {
|
||||
>
|
||||
<Input
|
||||
size="large"
|
||||
suffix={<Search className="certain-category-icon" />}
|
||||
suffix={<SearchOutlined className="certain-category-icon" />}
|
||||
placeholder="input here"
|
||||
/>
|
||||
</AutoComplete>
|
||||
|
||||
@ -8,7 +8,7 @@ debug: true
|
||||
|
||||
```jsx
|
||||
import { Input, AutoComplete, Form, TreeSelect } from 'antd';
|
||||
import { Search } from '@ant-design/icons';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
@ -37,14 +37,14 @@ ReactDOM.render(
|
||||
</Form.Item>
|
||||
<Form.Item label="包含 search 图标正常" {...formItemLayout}>
|
||||
<AutoComplete>
|
||||
<Input suffix={<Search />} />
|
||||
<Input suffix={<SearchOutlined />} />
|
||||
</AutoComplete>
|
||||
</Form.Item>
|
||||
<Form.Item label="同时有 Input.Group 和图标发生移位" {...formItemLayout}>
|
||||
<Input.Group compact>
|
||||
<TreeSelect style={{ width: '30%' }} />
|
||||
<AutoComplete>
|
||||
<Input suffix={<Search />} />
|
||||
<Input suffix={<SearchOutlined />} />
|
||||
</AutoComplete>
|
||||
</Input.Group>
|
||||
</Form.Item>
|
||||
|
||||
@ -15,7 +15,7 @@ Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/s
|
||||
|
||||
```jsx
|
||||
import { Button, Input, AutoComplete } from 'antd';
|
||||
import { Search } from '@ant-design/icons';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
|
||||
function onSelect(value) {
|
||||
console.log('onSelect', value);
|
||||
@ -82,7 +82,7 @@ class Complete extends React.Component {
|
||||
size="large"
|
||||
type="primary"
|
||||
>
|
||||
<Search />
|
||||
<SearchOutlined />
|
||||
</Button>
|
||||
}
|
||||
size="large"
|
||||
|
||||
@ -45,8 +45,8 @@ When there is a need for autocomplete functionality.
|
||||
|
||||
## FAQ
|
||||
|
||||
### Why text composition system not works well with onSearch in controlled mode?
|
||||
### Why doesn't the text composition system work well with onSearch in controlled mode?
|
||||
|
||||
Please use `onChange` to manage control state. `onSearch` is used for searching input which is not same as `onChange`. Besides, click on the option also not trigger the `onSearch` event.
|
||||
Please use `onChange` to manage control state. `onSearch` is used for searching input which is not same as `onChange`. Besides, clicking on the option will not trigger the `onSearch` event.
|
||||
|
||||
Related issue: [#18230](https://github.com/ant-design/ant-design/issues/18230) [#17916](https://github.com/ant-design/ant-design/issues/17916)
|
||||
|
||||
@ -15,18 +15,18 @@ Usually used for reminders and notifications.
|
||||
|
||||
```jsx
|
||||
import { Avatar, Badge } from 'antd';
|
||||
import { User } from '@ant-design/icons';
|
||||
import { UserOutlined } from '@ant-design/icons';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<span style={{ marginRight: 24 }}>
|
||||
<Badge count={1}>
|
||||
<Avatar shape="square" icon={<User />} />
|
||||
<Avatar shape="square" icon={<UserOutlined />} />
|
||||
</Badge>
|
||||
</span>
|
||||
<span>
|
||||
<Badge dot>
|
||||
<Avatar shape="square" icon={<User />} />
|
||||
<Avatar shape="square" icon={<UserOutlined />} />
|
||||
</Badge>
|
||||
</span>
|
||||
</div>,
|
||||
|
||||
@ -15,21 +15,21 @@ Three sizes and two shapes are available.
|
||||
|
||||
```jsx
|
||||
import { Avatar } from 'antd';
|
||||
import { User } from '@ant-design/icons';
|
||||
import { UserOutlined } from '@ant-design/icons';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<div>
|
||||
<Avatar size={64} icon={<User />} />
|
||||
<Avatar size="large" icon={<User />} />
|
||||
<Avatar icon={<User />} />
|
||||
<Avatar size="small" icon={<User />} />
|
||||
<Avatar size={64} icon={<UserOutlined />} />
|
||||
<Avatar size="large" icon={<UserOutlined />} />
|
||||
<Avatar icon={<UserOutlined />} />
|
||||
<Avatar size="small" icon={<UserOutlined />} />
|
||||
</div>
|
||||
<div>
|
||||
<Avatar shape="square" size={64} icon={<User />} />
|
||||
<Avatar shape="square" size="large" icon={<User />} />
|
||||
<Avatar shape="square" icon={<User />} />
|
||||
<Avatar shape="square" size="small" icon={<User />} />
|
||||
<Avatar shape="square" size={64} icon={<UserOutlined />} />
|
||||
<Avatar shape="square" size="large" icon={<UserOutlined />} />
|
||||
<Avatar shape="square" icon={<UserOutlined />} />
|
||||
<Avatar shape="square" size="small" icon={<UserOutlined />} />
|
||||
</div>
|
||||
</div>,
|
||||
mountNode,
|
||||
|
||||
@ -15,16 +15,16 @@ Image, Icon and letter are supported, and the latter two kinds of avatar can hav
|
||||
|
||||
```jsx
|
||||
import { Avatar } from 'antd';
|
||||
import { User } from '@ant-design/icons';
|
||||
import { UserOutlined } from '@ant-design/icons';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Avatar icon={<User />} />
|
||||
<Avatar icon={<UserOutlined />} />
|
||||
<Avatar>U</Avatar>
|
||||
<Avatar>USER</Avatar>
|
||||
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
||||
<Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
|
||||
<Avatar style={{ backgroundColor: '#87d068' }} icon={<User />} />
|
||||
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
|
||||
</div>,
|
||||
mountNode,
|
||||
);
|
||||
|
||||
@ -15,7 +15,7 @@ Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZe
|
||||
|
||||
```jsx
|
||||
import { Badge } from 'antd';
|
||||
import { ClockCircle } from '@ant-design/icons';
|
||||
import { ClockCircleOutlined } from '@ant-design/icons';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
@ -25,7 +25,7 @@ ReactDOM.render(
|
||||
<Badge count={0} showZero>
|
||||
<a href="#" className="head-example" />
|
||||
</Badge>
|
||||
<Badge count={<ClockCircle style={{ color: '#f5222d' }} />}>
|
||||
<Badge count={<ClockCircleOutlined style={{ color: '#f5222d' }} />}>
|
||||
<a href="#" className="head-example" />
|
||||
</Badge>
|
||||
</div>,
|
||||
|
||||
@ -15,7 +15,7 @@ The count will be animated as it changes.
|
||||
|
||||
```jsx
|
||||
import { Badge, Button, Switch } from 'antd';
|
||||
import { Minus, Plus } from '@ant-design/icons';
|
||||
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
|
||||
const ButtonGroup = Button.Group;
|
||||
|
||||
@ -51,10 +51,10 @@ class Demo extends React.Component {
|
||||
</Badge>
|
||||
<ButtonGroup>
|
||||
<Button onClick={this.decline}>
|
||||
<Minus />
|
||||
<MinusOutlined />
|
||||
</Button>
|
||||
<Button onClick={this.increase}>
|
||||
<Plus />
|
||||
<PlusOutlined />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
|
||||
@ -15,15 +15,15 @@ This will simply display a red badge, without a specific count. If count equals
|
||||
|
||||
```jsx
|
||||
import { Badge } from 'antd';
|
||||
import { Notification as IconNotification } from '@ant-design/icons';
|
||||
import { NotificationOutlined } from '@ant-design/icons';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Badge dot>
|
||||
<IconNotification />
|
||||
<NotificationOutlined />
|
||||
</Badge>
|
||||
<Badge count={0} dot>
|
||||
<IconNotification />
|
||||
<NotificationOutlined />
|
||||
</Badge>
|
||||
<Badge dot>
|
||||
<a href="#">Link something</a>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import { Down } from '@ant-design/icons';
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import omit from 'omit.js';
|
||||
|
||||
import DropDown, { DropDownProps } from '../dropdown/dropdown';
|
||||
@ -71,7 +71,7 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
|
||||
<DropDown overlay={overlay} placement="bottomCenter">
|
||||
<span className={`${prefixCls}-overlay-link`}>
|
||||
{breadcrumbItem}
|
||||
<Down />
|
||||
<DownOutlined />
|
||||
</span>
|
||||
</DropDown>
|
||||
);
|
||||
|
||||
@ -15,15 +15,15 @@ The icon should be placed in front of the text.
|
||||
|
||||
```jsx
|
||||
import { Breadcrumb } from 'antd';
|
||||
import { Home, User } from '@ant-design/icons';
|
||||
import { HomeOutlined, UserOutlined } from '@ant-design/icons';
|
||||
|
||||
ReactDOM.render(
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item href="">
|
||||
<Home />
|
||||
<HomeOutlined />
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Item href="">
|
||||
<User />
|
||||
<UserOutlined />
|
||||
<span>Application List</span>
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>Application</Breadcrumb.Item>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { Component } from 'react';
|
||||
import { render, mount } from 'enzyme';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { Search } from '@ant-design/icons';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import Button from '..';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import { sleep } from '../../../tests/utils';
|
||||
@ -27,22 +27,22 @@ describe('Button', () => {
|
||||
const wrapper = render(<Button>按钮</Button>);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
// should not insert space when there is icon
|
||||
const wrapper1 = render(<Button icon={<Search />}>按钮</Button>);
|
||||
const wrapper1 = render(<Button icon={<SearchOutlined />}>按钮</Button>);
|
||||
expect(wrapper1).toMatchSnapshot();
|
||||
// should not insert space when there is icon
|
||||
const wrapper2 = render(
|
||||
<Button>
|
||||
<Search />
|
||||
<SearchOutlined />
|
||||
按钮
|
||||
</Button>,
|
||||
);
|
||||
expect(wrapper2).toMatchSnapshot();
|
||||
// should not insert space when there is icon
|
||||
const wrapper3 = render(<Button icon={<Search />}>按钮</Button>);
|
||||
const wrapper3 = render(<Button icon={<SearchOutlined />}>按钮</Button>);
|
||||
expect(wrapper3).toMatchSnapshot();
|
||||
// should not insert space when there is icon while loading
|
||||
const wrapper4 = render(
|
||||
<Button icon={<Search />} loading>
|
||||
<Button icon={<SearchOutlined />} loading>
|
||||
按钮
|
||||
</Button>,
|
||||
);
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import { Loading } from '@ant-design/icons';
|
||||
import { LoadingOutlined } from '@ant-design/icons';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import omit from 'omit.js';
|
||||
|
||||
@ -262,7 +262,7 @@ class Button extends React.Component<ButtonProps, ButtonState> {
|
||||
[`${prefixCls}-dangerous`]: !!danger,
|
||||
});
|
||||
|
||||
const iconNode = loading ? <Loading /> : icon || null;
|
||||
const iconNode = loading ? <LoadingOutlined /> : icon || null;
|
||||
const kids =
|
||||
children || children === 0
|
||||
? spaceChildren(children, this.isNeedInserted() && autoInsertSpace)
|
||||
|
||||
81
components/button/demo/button-group.md
Normal file
81
components/button/demo/button-group.md
Normal file
@ -0,0 +1,81 @@
|
||||
---
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: 按钮组合
|
||||
en-US: Button Group
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以将多个 `Button` 放入 `Button.Group` 的容器中。
|
||||
|
||||
通过设置 `size` 为 `large` `small` 分别把按钮组合设为大、小尺寸。若不设置 `size`，则尺寸为中。
|
||||
|
||||
## en-US
|
||||
|
||||
Buttons can be grouped by placing multiple `Button` components into a `Button.Group`.
|
||||
|
||||
The `size` can be set to `large`, `small` or left unset resulting in a default size.
|
||||
|
||||
```jsx
|
||||
import { Button } from 'antd';
|
||||
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
|
||||
|
||||
const ButtonGroup = Button.Group;
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<h4>Basic</h4>
|
||||
<ButtonGroup>
|
||||
<Button>Cancel</Button>
|
||||
<Button>OK</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<Button disabled>L</Button>
|
||||
<Button disabled>M</Button>
|
||||
<Button disabled>R</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<Button>L</Button>
|
||||
<Button>M</Button>
|
||||
<Button>R</Button>
|
||||
</ButtonGroup>
|
||||
|
||||
<h4>With Icon</h4>
|
||||
<ButtonGroup>
|
||||
<Button type="primary">
|
||||
<LeftOutlined />
|
||||
Go back
|
||||
</Button>
|
||||
<Button type="primary">
|
||||
Go forward
|
||||
<RightOutlined />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<Button type="primary" icon="cloud" />
|
||||
<Button type="primary" icon="cloud-download" />
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<Button type="primary" size="small" icon="cloud" />
|
||||
<Button type="primary" size="small" icon="cloud-download" />
|
||||
</ButtonGroup>
|
||||
</div>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
<style>
|
||||
#components-button-demo-button-group h4 {
|
||||
margin: 16px 0;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
font-weight: normal;
|
||||
}
|
||||
#components-button-demo-button-group h4:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
#components-button-demo-button-group .ant-btn-group {
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
@ -19,32 +19,32 @@ If you want specific control over the positioning and placement of the `Icon`, t
|
||||
|
||||
```jsx
|
||||
import { Button, Tooltip } from 'antd';
|
||||
import { Search as IconSearch } from '@ant-design/icons';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Tooltip title="search">
|
||||
<Button type="primary" shape="circle" icon={<IconSearch />} />
|
||||
<Button type="primary" shape="circle" icon={<SearchOutlined />} />
|
||||
</Tooltip>
|
||||
<Button type="primary" shape="circle">
|
||||
A
|
||||
</Button>
|
||||
<Button type="primary" icon={<IconSearch />}>
|
||||
<Button type="primary" icon={<SearchOutlined />}>
|
||||
Search
|
||||
</Button>
|
||||
<Tooltip title="search">
|
||||
<Button shape="circle" icon={<IconSearch />} />
|
||||
<Button shape="circle" icon={<SearchOutlined />} />
|
||||
</Tooltip>
|
||||
<Button icon={<IconSearch />}>Search</Button>
|
||||
<Button icon={<SearchOutlined />}>Search</Button>
|
||||
<br />
|
||||
<Tooltip title="search">
|
||||
<Button shape="circle" icon={<IconSearch />} />
|
||||
<Button shape="circle" icon={<SearchOutlined />} />
|
||||
</Tooltip>
|
||||
<Button icon={<IconSearch />}>Search</Button>
|
||||
<Button icon={<SearchOutlined />}>Search</Button>
|
||||
<Tooltip title="search">
|
||||
<Button type="dashed" shape="circle" icon={<IconSearch />} />
|
||||
<Button type="dashed" shape="circle" icon={<SearchOutlined />} />
|
||||
</Tooltip>
|
||||
<Button type="dashed" icon={<IconSearch />}>
|
||||
<Button type="dashed" icon={<SearchOutlined />}>
|
||||
Search
|
||||
</Button>
|
||||
</div>,
|
||||
|
||||
@ -15,7 +15,7 @@ If you need several buttons, we recommend that you use 1 primary button + n seco
|
||||
|
||||
```jsx
|
||||
import { Button, Menu, Dropdown } from 'antd';
|
||||
import { Down } from '@ant-design/icons';
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
|
||||
function handleMenuClick(e) {
|
||||
console.log('click', e);
|
||||
@ -35,7 +35,7 @@ ReactDOM.render(
|
||||
<Button>secondary</Button>
|
||||
<Dropdown overlay={menu}>
|
||||
<Button>
|
||||
Actions <Down />
|
||||
Actions <DownOutlined />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</div>,
|
||||
|
||||
@ -19,7 +19,7 @@ If a large or small button is desired, set the `size` property to either `large`
|
||||
|
||||
```jsx
|
||||
import { Button, Radio } from 'antd';
|
||||
import { Download } from '@ant-design/icons';
|
||||
import { DownloadOutlined } from '@ant-design/icons';
|
||||
|
||||
class ButtonSize extends React.Component {
|
||||
state = {
|
||||
@ -62,13 +62,13 @@ class ButtonSize extends React.Component {
|
||||
Link
|
||||
</Button>
|
||||
<br />
|
||||
<Button type="primary" icon={<Download />} size={size} />
|
||||
<Button type="primary" shape="circle" icon={<Download />} size={size} />
|
||||
<Button type="primary" shape="round" icon={<Download />} size={size} />
|
||||
<Button type="primary" shape="round" icon={<Download />} size={size}>
|
||||
<Button type="primary" icon={<DownloadOutlined />} size={size} />
|
||||
<Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
|
||||
<Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
|
||||
<Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>
|
||||
Download
|
||||
</Button>
|
||||
<Button type="primary" icon={<Download />} size={size}>
|
||||
<Button type="primary" icon={<DownloadOutlined />} size={size}>
|
||||
Download
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -15,7 +15,7 @@ Shows a loading indicator while the contents of the card is being fetched.
|
||||
|
||||
```jsx
|
||||
import { Skeleton, Switch, Card, Avatar } from 'antd';
|
||||
import { Edit, Ellipsis, Setting } from '@ant-design/icons';
|
||||
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Meta } = Card;
|
||||
|
||||
@ -47,7 +47,11 @@ class App extends React.Component {
|
||||
|
||||
<Card
|
||||
style={{ width: 300, marginTop: 16 }}
|
||||
actions={[<Setting key="setting" />, <Edit key="edit" />, <Ellipsis key="ellipsis" />]}
|
||||
actions={[
|
||||
<SettingOutlined key="setting" />,
|
||||
<EditOutlined key="edit" />,
|
||||
<EllipsisOutlined key="ellipsis" />,
|
||||
]}
|
||||
>
|
||||
<Skeleton loading={loading} avatar active>
|
||||
<Meta
|
||||
|
||||
@ -15,7 +15,7 @@ A Card that supports `cover`, `avatar`, `title` and `description`.
|
||||
|
||||
```jsx
|
||||
import { Card, Avatar } from 'antd';
|
||||
import { Edit, Ellipsis, Setting } from '@ant-design/icons';
|
||||
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Meta } = Card;
|
||||
|
||||
@ -28,7 +28,11 @@ ReactDOM.render(
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
|
||||
/>
|
||||
}
|
||||
actions={[<Setting key="setting" />, <Edit key="edit" />, <Ellipsis key="ellipsis" />]}
|
||||
actions={[
|
||||
<SettingOutlined key="setting" />,
|
||||
<EditOutlined key="edit" />,
|
||||
<EllipsisOutlined key="ellipsis" />,
|
||||
]}
|
||||
>
|
||||
<Meta
|
||||
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
|
||||
|
||||
@ -821,7 +821,7 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
|
||||
"width": 0,
|
||||
}
|
||||
}
|
||||
expandIcon={<Right />}
|
||||
expandIcon={<RightOutlined />}
|
||||
expandTrigger="click"
|
||||
fieldNames={
|
||||
Object {
|
||||
@ -834,7 +834,7 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
|
||||
<span
|
||||
className="ant-cascader-menu-item-loading-icon"
|
||||
>
|
||||
<Redo
|
||||
<RedoOutlined
|
||||
spin={true}
|
||||
/>
|
||||
</span>
|
||||
@ -1220,7 +1220,7 @@ exports[`Cascader should render not found content 1`] = `
|
||||
"width": 0,
|
||||
}
|
||||
}
|
||||
expandIcon={<Right />}
|
||||
expandIcon={<RightOutlined />}
|
||||
expandTrigger="click"
|
||||
fieldNames={
|
||||
Object {
|
||||
@ -1233,7 +1233,7 @@ exports[`Cascader should render not found content 1`] = `
|
||||
<span
|
||||
className="ant-cascader-menu-item-loading-icon"
|
||||
>
|
||||
<Redo
|
||||
<RedoOutlined
|
||||
spin={true}
|
||||
/>
|
||||
</span>
|
||||
@ -1542,7 +1542,7 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
|
||||
"width": 0,
|
||||
}
|
||||
}
|
||||
expandIcon={<Right />}
|
||||
expandIcon={<RightOutlined />}
|
||||
expandTrigger="click"
|
||||
fieldNames={
|
||||
Object {
|
||||
@ -1555,7 +1555,7 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
|
||||
<span
|
||||
className="ant-cascader-menu-item-loading-icon"
|
||||
>
|
||||
<Redo
|
||||
<RedoOutlined
|
||||
spin={true}
|
||||
/>
|
||||
</span>
|
||||
|
||||
@ -16,7 +16,7 @@ Cascade selection box for selecting province/city/district.
|
||||
|
||||
```jsx
|
||||
import { Cascader } from 'antd';
|
||||
import { Smile } from '@ant-design/icons';
|
||||
import { SmileOutlined } from '@ant-design/icons';
|
||||
|
||||
const options = [
|
||||
{
|
||||
@ -60,7 +60,7 @@ function onChange(value) {
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Cascader
|
||||
suffixIcon={<Smile />}
|
||||
suffixIcon={<SmileOutlined />}
|
||||
options={options}
|
||||
onChange={onChange}
|
||||
placeholder="Please select"
|
||||
|
||||
@ -5,7 +5,7 @@ import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
import KeyCode from 'rc-util/lib/KeyCode';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import { CloseCircleFilled, Down, Right, Redo } from '@ant-design/icons';
|
||||
import { CloseCircleFilled, DownOutlined, RightOutlined, RedoOutlined } from '@ant-design/icons';
|
||||
|
||||
import Input from '../input';
|
||||
import { ConfigConsumer, ConfigConsumerProps, RenderEmptyHandler } from '../config-provider';
|
||||
@ -534,7 +534,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
|
||||
})
|
||||
) : (
|
||||
<span className={`${prefixCls}-picker-arrow`}>{suffixIcon}</span>
|
||||
))) || <Down className={arrowCls} />;
|
||||
))) || <DownOutlined className={arrowCls} />;
|
||||
|
||||
const input = children || (
|
||||
<span style={style} className={pickerCls}>
|
||||
@ -560,11 +560,11 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
|
||||
</span>
|
||||
);
|
||||
|
||||
const expandIcon = <Right />;
|
||||
const expandIcon = <RightOutlined />;
|
||||
|
||||
const loadingIcon = (
|
||||
<span className={`${prefixCls}-menu-item-loading-icon`}>
|
||||
<Redo spin />
|
||||
<RedoOutlined spin />
|
||||
</span>
|
||||
);
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import RcCollapse from 'rc-collapse';
|
||||
import classNames from 'classnames';
|
||||
import { Right } from '@ant-design/icons';
|
||||
import { RightOutlined } from '@ant-design/icons';
|
||||
|
||||
import CollapsePanel from './CollapsePanel';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
@ -49,7 +49,7 @@ export default class Collapse extends React.Component<CollapseProps, any> {
|
||||
const icon = (expandIcon ? (
|
||||
expandIcon(panelProps)
|
||||
) : (
|
||||
<Right rotate={panelProps.isActive ? 90 : undefined} />
|
||||
<RightOutlined rotate={panelProps.isActive ? 90 : undefined} />
|
||||
)) as React.ReactNode;
|
||||
|
||||
return React.isValidElement(icon)
|
||||
|
||||
@ -15,7 +15,7 @@ Customize the background, border, margin styles and icon for each panel.
|
||||
|
||||
```jsx
|
||||
import { Collapse } from 'antd';
|
||||
import { CaretRight } from '@ant-design/icons';
|
||||
import { CaretRightOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Panel } = Collapse;
|
||||
|
||||
@ -37,7 +37,7 @@ ReactDOM.render(
|
||||
<Collapse
|
||||
bordered={false}
|
||||
defaultActiveKey={['1']}
|
||||
expandIcon={({ isActive }) => <CaretRight rotate={isActive ? 90 : 0} />}
|
||||
expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
|
||||
>
|
||||
<Panel header="This is panel header 1" key="1" style={customPanelStyle}>
|
||||
<p>{text}</p>
|
||||
|
||||
@ -15,7 +15,7 @@ More than one panel can be expanded at a time, the first panel is initialized to
|
||||
|
||||
```jsx
|
||||
import { Collapse, Select } from 'antd';
|
||||
import { Setting } from '@ant-design/icons';
|
||||
import { SettingOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Panel } = Collapse;
|
||||
const { Option } = Select;
|
||||
@ -31,7 +31,7 @@ const text = `
|
||||
`;
|
||||
|
||||
const genExtra = () => (
|
||||
<Setting
|
||||
<SettingOutlined
|
||||
onClick={event => {
|
||||
// If you don't want click extra trigger collapse, you can prevent this:
|
||||
event.stopPropagation();
|
||||
|
||||
@ -16,7 +16,7 @@ A basic comment with author, avatar, time and actions.
|
||||
```jsx
|
||||
import { Comment, Tooltip, Avatar } from 'antd';
|
||||
import moment from 'moment';
|
||||
import { Dislike, Like, DislikeFilled, LikeFilled } from '@ant-design/icons';
|
||||
import { DislikeOutlined, LikeOutlined, DislikeFilled, LikeFilled } from '@ant-design/icons';
|
||||
|
||||
class App extends React.Component {
|
||||
state = {
|
||||
@ -47,7 +47,7 @@ class App extends React.Component {
|
||||
const actions = [
|
||||
<span key="comment-basic-like">
|
||||
<Tooltip title="Like">
|
||||
{React.createElement(action === 'liked' ? LikeFilled : Like, {
|
||||
{React.createElement(action === 'liked' ? LikeFilled : LikeOutlined, {
|
||||
onClick: this.like,
|
||||
})}
|
||||
</Tooltip>
|
||||
@ -55,7 +55,7 @@ class App extends React.Component {
|
||||
</span>,
|
||||
<span key=' key="comment-basic-dislike"'>
|
||||
<Tooltip title="Dislike">
|
||||
{React.createElement(action === 'liked' ? DislikeFilled : Dislike, {
|
||||
{React.createElement(action === 'liked' ? DislikeFilled : DislikeOutlined, {
|
||||
onClick: this.dislike,
|
||||
})}
|
||||
</Tooltip>
|
||||
|
||||
@ -7758,180 +7758,6 @@ exports[`ConfigProvider components List prefixCls 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components Mention configProvider 1`] = `
|
||||
<div
|
||||
class="config-mention-wrapper"
|
||||
>
|
||||
<div
|
||||
class="config-mention-editor oneline"
|
||||
>
|
||||
<div
|
||||
class="config-mention-toolbar"
|
||||
/>
|
||||
<div
|
||||
class="config-mention-editor-wrapper"
|
||||
>
|
||||
<div
|
||||
class="DraftEditor-root"
|
||||
>
|
||||
<div
|
||||
class="DraftEditor-editorContainer"
|
||||
>
|
||||
<div
|
||||
aria-describedby="placeholder-123"
|
||||
class="notranslate public-DraftEditor-content"
|
||||
contenteditable="true"
|
||||
role="textbox"
|
||||
spellcheck="false"
|
||||
style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
|
||||
>
|
||||
<div
|
||||
data-contents="true"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
data-block="true"
|
||||
data-editor="123"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<div
|
||||
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<span
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<br
|
||||
data-text="true"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components Mention normal 1`] = `
|
||||
<div
|
||||
class="ant-mention-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-editor oneline"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-toolbar"
|
||||
/>
|
||||
<div
|
||||
class="ant-mention-editor-wrapper"
|
||||
>
|
||||
<div
|
||||
class="DraftEditor-root"
|
||||
>
|
||||
<div
|
||||
class="DraftEditor-editorContainer"
|
||||
>
|
||||
<div
|
||||
aria-describedby="placeholder-123"
|
||||
class="notranslate public-DraftEditor-content"
|
||||
contenteditable="true"
|
||||
role="textbox"
|
||||
spellcheck="false"
|
||||
style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
|
||||
>
|
||||
<div
|
||||
data-contents="true"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
data-block="true"
|
||||
data-editor="123"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<div
|
||||
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<span
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<br
|
||||
data-text="true"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components Mention prefixCls 1`] = `
|
||||
<div
|
||||
class="prefix-Mention-wrapper"
|
||||
>
|
||||
<div
|
||||
class="prefix-Mention-editor oneline"
|
||||
>
|
||||
<div
|
||||
class="prefix-Mention-toolbar"
|
||||
/>
|
||||
<div
|
||||
class="prefix-Mention-editor-wrapper"
|
||||
>
|
||||
<div
|
||||
class="DraftEditor-root"
|
||||
>
|
||||
<div
|
||||
class="DraftEditor-editorContainer"
|
||||
>
|
||||
<div
|
||||
aria-describedby="placeholder-123"
|
||||
class="notranslate public-DraftEditor-content"
|
||||
contenteditable="true"
|
||||
role="textbox"
|
||||
spellcheck="false"
|
||||
style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
|
||||
>
|
||||
<div
|
||||
data-contents="true"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
data-block="true"
|
||||
data-editor="123"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<div
|
||||
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<span
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<br
|
||||
data-text="true"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ConfigProvider components Menu configProvider 1`] = `
|
||||
<ul
|
||||
class="config-menu config-menu-light config-menu-root config-menu-inline"
|
||||
@ -17923,7 +17749,9 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
|
||||
<div
|
||||
class="config-upload-list config-upload-list-text"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
<span>
|
||||
<div
|
||||
class="config-upload-list-item config-upload-list-item-done config-upload-list-item-list-type-text"
|
||||
@ -18035,7 +17863,9 @@ exports[`ConfigProvider components Upload normal 1`] = `
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-text"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
<span>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
|
||||
@ -18147,7 +17977,9 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-text"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
<span>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
|
||||
|
||||
@ -27,7 +27,6 @@ import Input from '../../input';
|
||||
import InputNumber from '../../input-number';
|
||||
import Layout from '../../layout';
|
||||
import List from '../../list';
|
||||
import Mention from '../../mention';
|
||||
import Menu from '../../menu';
|
||||
import Modal from '../../modal';
|
||||
import Pagination from '../../pagination';
|
||||
@ -341,9 +340,6 @@ describe('ConfigProvider', () => {
|
||||
/>
|
||||
));
|
||||
|
||||
// Mention
|
||||
testPair('Mention', props => <Mention {...props} />);
|
||||
|
||||
// Menu
|
||||
testPair('Menu', props => (
|
||||
<Menu {...props} defaultOpenKeys={['bamboo']} mode="inline">
|
||||
|
||||
@ -9,7 +9,7 @@ title: ConfigProvider
|
||||
|
||||
## Usage
|
||||
|
||||
This component provides a configuration to all React components underneath itself via the [context API](https://facebook.github.io/react/docs/context.html), In the render tree all components will have access to the provided config.
|
||||
This component provides a configuration to all React components underneath itself via the [context API](https://facebook.github.io/react/docs/context.html). In the render tree all components will have access to the provided config.
|
||||
|
||||
```jsx
|
||||
import { ConfigProvider } from 'antd';
|
||||
@ -25,7 +25,7 @@ return (
|
||||
|
||||
### Content Security Policy
|
||||
|
||||
Some component use dynamic style to support wave effect. You can config `csp` prop if Content Security Policy (CSP) is enabled:
|
||||
Some components use dynamic style to support wave effect. You can config `csp` prop if Content Security Policy (CSP) is enabled:
|
||||
|
||||
```jsx
|
||||
<ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
|
||||
@ -48,6 +48,6 @@ Some component use dynamic style to support wave effect. You can config `csp` pr
|
||||
|
||||
## FAQ
|
||||
|
||||
#### Locale problem is still existed in DatePicker even ConfigProvider `locale` is used?
|
||||
#### Does the locale problem still exist in DatePicker even if ConfigProvider `locale` is used?
|
||||
|
||||
Please make sure you set moment locale by `moment.locale('zh-cn')`, or you don't have two moment of different version.
|
||||
Please make sure you set moment locale by `moment.locale('zh-cn')` or that you don't have two different versions of moment.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { Calendar } from '@ant-design/icons';
|
||||
import { CalendarOutlined } from '@ant-design/icons';
|
||||
|
||||
export default function InputIcon(props: { suffixIcon: React.ReactNode; prefixCls: string }) {
|
||||
const { suffixIcon, prefixCls } = props;
|
||||
@ -15,6 +15,6 @@ export default function InputIcon(props: { suffixIcon: React.ReactNode; prefixCl
|
||||
})
|
||||
) : (
|
||||
<span className={`${prefixCls}-picker-icon`}>{suffixIcon}</span>
|
||||
))) || <Calendar className={`${prefixCls}-picker-icon`} />
|
||||
))) || <CalendarOutlined className={`${prefixCls}-picker-icon`} />
|
||||
);
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@ import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
|
||||
import RcDatePicker from 'rc-calendar/lib/Picker';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
import { CloseCircleFilled, Calendar } from '@ant-design/icons';
|
||||
import { CloseCircleFilled, CalendarOutlined } from '@ant-design/icons';
|
||||
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import warning from '../_util/warning';
|
||||
@ -218,7 +218,7 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
|
||||
})
|
||||
) : (
|
||||
<span className={`${prefixCls}-picker-icon`}>{suffixIcon}</span>
|
||||
))) || <Calendar className={`${prefixCls}-picker-icon`} />;
|
||||
))) || <CalendarOutlined className={`${prefixCls}-picker-icon`} />;
|
||||
|
||||
const dataOrAriaProps = getDataOrAriaProps(props);
|
||||
const input = ({ value: inputValue }: { value: moment.Moment | null }) => (
|
||||
|
||||
@ -16,9 +16,9 @@ Basic use case. Users can select or input a date in panel.
|
||||
|
||||
```jsx
|
||||
import { DatePicker } from 'antd';
|
||||
import { Smile } from '@ant-design/icons';
|
||||
import { SmileOutlined } from '@ant-design/icons';
|
||||
|
||||
const smileIcon = <Smile />;
|
||||
const smileIcon = <SmileOutlined />;
|
||||
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
|
||||
|
||||
function onChange(date, dateString) {
|
||||
|
||||
@ -15,7 +15,7 @@ Use a form in Drawer with a submit button.
|
||||
|
||||
```jsx
|
||||
import { Drawer, Form, Button, Col, Row, Input, Select, DatePicker } from 'antd';
|
||||
import { Plus } from '@ant-design/icons';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
@ -38,13 +38,14 @@ class DrawerForm extends React.Component {
|
||||
return (
|
||||
<div>
|
||||
<Button type="primary" onClick={this.showDrawer}>
|
||||
<Plus /> New account
|
||||
<PlusOutlined /> New account
|
||||
</Button>
|
||||
<Drawer
|
||||
title="Create a new account"
|
||||
width={720}
|
||||
onClose={this.onClose}
|
||||
visible={this.state.visible}
|
||||
bodyStyle={{ paddingBottom: 80 }}
|
||||
>
|
||||
<Form layout="vertical" hideRequiredMark>
|
||||
<Row gutter={16}>
|
||||
@ -144,7 +145,7 @@ class DrawerForm extends React.Component {
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
width: '100%',
|
||||
borderTop: '1px solid #e9e9e9',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import RcDrawer from 'rc-drawer';
|
||||
import createReactContext from '@ant-design/create-react-context';
|
||||
import { Close } from '@ant-design/icons';
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
|
||||
@ -167,7 +167,7 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
|
||||
closable && (
|
||||
// eslint-disable-next-line react/button-has-type
|
||||
<button onClick={onClose} aria-label="Close" className={`${prefixCls}-close`}>
|
||||
<Close />
|
||||
<CloseOutlined />
|
||||
</button>
|
||||
)
|
||||
);
|
||||
|
||||
@ -197,6 +197,10 @@
|
||||
line-height: @line-height-base;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
&-wrapper-body {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&-mask {
|
||||
position: absolute;
|
||||
|
||||
@ -15,7 +15,7 @@ The most basic dropdown menu.
|
||||
|
||||
```jsx
|
||||
import { Menu, Dropdown } from 'antd';
|
||||
import { Down } from '@ant-design/icons';
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
|
||||
const menu = (
|
||||
<Menu>
|
||||
@ -40,7 +40,7 @@ const menu = (
|
||||
ReactDOM.render(
|
||||
<Dropdown overlay={menu}>
|
||||
<a className="ant-dropdown-link" href="#">
|
||||
Hover me <Down />
|
||||
Hover me <DownOutlined />
|
||||
</a>
|
||||
</Dropdown>,
|
||||
mountNode,
|
||||
|
||||
@ -15,7 +15,7 @@ A button is on the left, and a related functional menu is on the right. You can
|
||||
|
||||
```jsx
|
||||
import { Menu, Dropdown, Button, message } from 'antd';
|
||||
import { Down, User } from '@ant-design/icons';
|
||||
import { DownOutlined, UserOutlined } from '@ant-design/icons';
|
||||
|
||||
function handleButtonClick(e) {
|
||||
message.info('Click on left button.');
|
||||
@ -30,15 +30,15 @@ function handleMenuClick(e) {
|
||||
const menu = (
|
||||
<Menu onClick={handleMenuClick}>
|
||||
<Menu.Item key="1">
|
||||
<User />
|
||||
<UserOutlined />
|
||||
1st menu item
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2">
|
||||
<User />
|
||||
<UserOutlined />
|
||||
2nd menu item
|
||||
</Menu.Item>
|
||||
<Menu.Item key="3">
|
||||
<User />
|
||||
<UserOutlined />
|
||||
3rd item
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
@ -49,7 +49,7 @@ ReactDOM.render(
|
||||
<Dropdown.Button onClick={handleButtonClick} overlay={menu}>
|
||||
Dropdown
|
||||
</Dropdown.Button>
|
||||
<Dropdown.Button overlay={menu} icon={<User />}>
|
||||
<Dropdown.Button overlay={menu} icon={<UserOutlined />}>
|
||||
Dropdown
|
||||
</Dropdown.Button>
|
||||
<Dropdown.Button onClick={handleButtonClick} overlay={menu} disabled>
|
||||
@ -57,7 +57,7 @@ ReactDOM.render(
|
||||
</Dropdown.Button>
|
||||
<Dropdown overlay={menu}>
|
||||
<Button>
|
||||
Button <Down />
|
||||
Button <DownOutlined />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</div>,
|
||||
|
||||
@ -15,7 +15,7 @@ An event will be triggered when you click menu items, in which you can make diff
|
||||
|
||||
```jsx
|
||||
import { Menu, Dropdown, message } from 'antd';
|
||||
import { Down } from '@ant-design/icons';
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
|
||||
const onClick = ({ key }) => {
|
||||
message.info(`Click on item ${key}`);
|
||||
@ -32,7 +32,7 @@ const menu = (
|
||||
ReactDOM.render(
|
||||
<Dropdown overlay={menu}>
|
||||
<a className="ant-dropdown-link" href="#">
|
||||
Hover me, Click menu item <Down />
|
||||
Hover me, Click menu item <DownOutlined />
|
||||
</a>
|
||||
</Dropdown>,
|
||||
mountNode,
|
||||
|
||||
@ -15,7 +15,7 @@ Divider and disabled menu item.
|
||||
|
||||
```jsx
|
||||
import { Menu, Dropdown } from 'antd';
|
||||
import { Down } from '@ant-design/icons';
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
|
||||
const menu = (
|
||||
<Menu>
|
||||
@ -39,7 +39,7 @@ const menu = (
|
||||
ReactDOM.render(
|
||||
<Dropdown overlay={menu}>
|
||||
<a className="ant-dropdown-link" href="#">
|
||||
Hover me <Down />
|
||||
Hover me <DownOutlined />
|
||||
</a>
|
||||
</Dropdown>,
|
||||
mountNode,
|
||||
|
||||
@ -20,7 +20,7 @@ This demo was created for debugging Menu styles inside Dropdown.
|
||||
|
||||
```jsx
|
||||
import { Menu, Dropdown } from 'antd';
|
||||
import { Mail, Appstore, Setting, Down } from '@ant-design/icons';
|
||||
import { MailOutlined, AppstoreOutlined, SettingOutlined, DownOutlined } from '@ant-design/icons';
|
||||
|
||||
const { SubMenu } = Menu;
|
||||
|
||||
@ -34,7 +34,7 @@ const menu = (
|
||||
key="sub1"
|
||||
title={
|
||||
<span>
|
||||
<Mail />
|
||||
<MailOutlined />
|
||||
<span>Navigation One</span>
|
||||
</span>
|
||||
}
|
||||
@ -52,7 +52,7 @@ const menu = (
|
||||
key="sub2"
|
||||
title={
|
||||
<span>
|
||||
<Appstore />
|
||||
<AppstoreOutlined />
|
||||
<span>Navigation Two</span>
|
||||
</span>
|
||||
}
|
||||
@ -68,7 +68,7 @@ const menu = (
|
||||
key="sub4"
|
||||
title={
|
||||
<span>
|
||||
<Setting />
|
||||
<SettingOutlined />
|
||||
<span>Navigation Three</span>
|
||||
</span>
|
||||
}
|
||||
@ -84,7 +84,7 @@ const menu = (
|
||||
ReactDOM.render(
|
||||
<Dropdown overlay={menu}>
|
||||
<a className="ant-dropdown-link" href="#">
|
||||
Hover to check menu style <Down />
|
||||
Hover to check menu style <DownOutlined />
|
||||
</a>
|
||||
</Dropdown>,
|
||||
mountNode,
|
||||
|
||||
@ -15,7 +15,7 @@ The default is to close the menu when you click on menu items, this feature can
|
||||
|
||||
```jsx
|
||||
import { Menu, Dropdown } from 'antd';
|
||||
import { Down } from '@ant-design/icons';
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
|
||||
class OverlayVisible extends React.Component {
|
||||
state = {
|
||||
@ -47,7 +47,7 @@ class OverlayVisible extends React.Component {
|
||||
visible={this.state.visible}
|
||||
>
|
||||
<a className="ant-dropdown-link" href="#">
|
||||
Hover me <Down />
|
||||
Hover me <DownOutlined />
|
||||
</a>
|
||||
</Dropdown>
|
||||
);
|
||||
|
||||
@ -15,7 +15,7 @@ The menu has multiple levels.
|
||||
|
||||
```jsx
|
||||
import { Menu, Dropdown } from 'antd';
|
||||
import { Down } from '@ant-design/icons';
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
|
||||
const { SubMenu } = Menu;
|
||||
|
||||
@ -37,7 +37,7 @@ const menu = (
|
||||
ReactDOM.render(
|
||||
<Dropdown overlay={menu}>
|
||||
<a className="ant-dropdown-link" href="#">
|
||||
Cascading menu <Down />
|
||||
Cascading menu <DownOutlined />
|
||||
</a>
|
||||
</Dropdown>,
|
||||
mountNode,
|
||||
|
||||
@ -15,7 +15,7 @@ The default trigger mode is `hover`, you can change it to `click`.
|
||||
|
||||
```jsx
|
||||
import { Menu, Dropdown } from 'antd';
|
||||
import { Down } from '@ant-design/icons';
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
|
||||
const menu = (
|
||||
<Menu>
|
||||
@ -33,7 +33,7 @@ const menu = (
|
||||
ReactDOM.render(
|
||||
<Dropdown overlay={menu} trigger={['click']}>
|
||||
<a className="ant-dropdown-link" href="#">
|
||||
Click me <Down />
|
||||
Click me <DownOutlined />
|
||||
</a>
|
||||
</Dropdown>,
|
||||
mountNode,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { Ellipsis } from '@ant-design/icons';
|
||||
import { EllipsisOutlined } from '@ant-design/icons';
|
||||
|
||||
import Button from '../button';
|
||||
import { ButtonHTMLType } from '../button/button';
|
||||
@ -52,7 +52,7 @@ export default class DropdownButton extends React.Component<DropdownButtonProps,
|
||||
placement,
|
||||
getPopupContainer,
|
||||
href,
|
||||
icon = <Ellipsis />,
|
||||
icon = <EllipsisOutlined />,
|
||||
title,
|
||||
...restProps
|
||||
} = this.props;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import RcDropdown from 'rc-dropdown';
|
||||
import classNames from 'classnames';
|
||||
import { Right } from '@ant-design/icons';
|
||||
import { RightOutlined } from '@ant-design/icons';
|
||||
|
||||
import DropdownButton from './dropdown-button';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
@ -101,7 +101,7 @@ export default class Dropdown extends React.Component<DropDownProps, any> {
|
||||
|
||||
const expandIcon = (
|
||||
<span className={`${prefixCls}-menu-submenu-arrow`}>
|
||||
<Right className={`${prefixCls}-menu-submenu-arrow-icon`} />
|
||||
<RightOutlined className={`${prefixCls}-menu-submenu-arrow-icon`} />
|
||||
</span>
|
||||
);
|
||||
|
||||
|
||||
@ -25,11 +25,11 @@ import {
|
||||
Table,
|
||||
List,
|
||||
} from 'antd';
|
||||
import { Smile } from '@ant-design/icons';
|
||||
import { SmileOutlined } from '@ant-design/icons';
|
||||
|
||||
const customizeRenderEmpty = () => (
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Smile style={{ fontSize: 20 }} />
|
||||
<SmileOutlined style={{ fontSize: 20 }} />
|
||||
<p>Data Not Found</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import {
|
||||
Loading,
|
||||
LoadingOutlined,
|
||||
CloseCircleFilled,
|
||||
CheckCircleFilled,
|
||||
ExclamationCircleFilled,
|
||||
@ -34,7 +34,7 @@ const iconMap: { [key: string]: any } = {
|
||||
success: CheckCircleFilled,
|
||||
warning: ExclamationCircleFilled,
|
||||
error: CloseCircleFilled,
|
||||
validating: Loading,
|
||||
validating: LoadingOutlined,
|
||||
};
|
||||
|
||||
const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = ({
|
||||
|
||||
@ -19,7 +19,7 @@ Because the width of label is not fixed, you may need to adjust it by customizin
|
||||
|
||||
```tsx
|
||||
import { Form, Row, Col, Input, Button } from 'antd';
|
||||
import { Down, Up } from '@ant-design/icons';
|
||||
import { DownOutlined, UpOutlined } from '@ant-design/icons';
|
||||
|
||||
const AdvancedSearchForm = () => {
|
||||
const [expand, setExpand] = React.useState(false);
|
||||
@ -80,7 +80,7 @@ const AdvancedSearchForm = () => {
|
||||
setExpand(!expand);
|
||||
}}
|
||||
>
|
||||
{expand ? <Up /> : <Down />} Collapse
|
||||
{expand ? <UpOutlined /> : <DownOutlined />} Collapse
|
||||
</a>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
@ -15,7 +15,7 @@ Add or remove form items dynamically.
|
||||
|
||||
```jsx
|
||||
import { Form, Input, Button } from 'antd';
|
||||
import { MinusCircle, Plus } from '@ant-design/icons';
|
||||
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
@ -67,7 +67,7 @@ const DynamicFieldSet = () => {
|
||||
<Input placeholder="passenger name" style={{ width: '60%', marginRight: 8 }} />
|
||||
</Form.Item>
|
||||
{fields.length > 1 ? (
|
||||
<MinusCircle
|
||||
<MinusCircleOutlined
|
||||
className="dynamic-delete-button"
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
@ -84,7 +84,7 @@ const DynamicFieldSet = () => {
|
||||
}}
|
||||
style={{ width: '60%' }}
|
||||
>
|
||||
<Plus /> Add field
|
||||
<PlusOutlined /> Add field
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</div>
|
||||
|
||||
@ -15,7 +15,7 @@ Use `Form.Provider` to process data between forms. In this case, submit button i
|
||||
|
||||
```tsx
|
||||
import { Form, Input, InputNumber, Modal, Button, Avatar, Typography } from 'antd';
|
||||
import { Smile, User } from '@ant-design/icons';
|
||||
import { SmileOutlined } from '@ant-design/icons';
|
||||
|
||||
const layout = {
|
||||
labelCol: { span: 8 },
|
||||
@ -103,7 +103,7 @@ const Demo = () => {
|
||||
</ul>
|
||||
) : (
|
||||
<Typography.Text className="ant-form-text" type="secondary">
|
||||
( <Smile /> No user yet. )
|
||||
( <SmileOutlined /> No user yet. )
|
||||
</Typography.Text>
|
||||
);
|
||||
}}
|
||||
|
||||
@ -15,7 +15,7 @@ Inline login form is often used in navigation bar.
|
||||
|
||||
```tsx
|
||||
import { Form, Input, Button } from 'antd';
|
||||
import { User, Lock } from '@ant-design/icons';
|
||||
import { UserOutlined, LockOutlined } from '@ant-design/icons';
|
||||
|
||||
const HorizontalLoginForm = () => {
|
||||
const [form] = Form.useForm();
|
||||
@ -36,14 +36,17 @@ const HorizontalLoginForm = () => {
|
||||
name="username"
|
||||
rules={[{ required: true, message: 'Please input your username!' }]}
|
||||
>
|
||||
<Input prefix={<User style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
|
||||
<Input
|
||||
prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
|
||||
placeholder="Username"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="password"
|
||||
rules={[{ required: true, message: 'Please input your password!' }]}
|
||||
>
|
||||
<Input
|
||||
prefix={<Lock style={{ color: 'rgba(0,0,0,.25)' }} />}
|
||||
prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
/>
|
||||
|
||||
@ -15,7 +15,7 @@ Normal login form which can contain more elements.
|
||||
|
||||
```tsx
|
||||
import { Form, Input, Button, Checkbox } from 'antd';
|
||||
import { User, Lock } from '@ant-design/icons';
|
||||
import { UserOutlined, LockOutlined } from '@ant-design/icons';
|
||||
|
||||
const NormalLoginForm = () => {
|
||||
const onFinish = values => {
|
||||
@ -33,14 +33,17 @@ const NormalLoginForm = () => {
|
||||
name="username"
|
||||
rules={[{ required: true, message: 'Please input your Username!' }]}
|
||||
>
|
||||
<Input prefix={<User style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
|
||||
<Input
|
||||
prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
|
||||
placeholder="Username"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="password"
|
||||
rules={[{ required: true, message: 'Please input your Password!' }]}
|
||||
>
|
||||
<Input
|
||||
prefix={<Lock style={{ color: 'rgba(0,0,0,.25)' }} />}
|
||||
prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
/>
|
||||
|
||||
@ -26,7 +26,7 @@ import {
|
||||
Button,
|
||||
AutoComplete,
|
||||
} from 'antd';
|
||||
import { QuestionCircle } from '@ant-design/icons';
|
||||
import { QuestionCircleOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Option } = Select;
|
||||
const AutoCompleteOption = AutoComplete.Option;
|
||||
@ -196,7 +196,7 @@ const RegistrationForm = () => {
|
||||
<span>
|
||||
Nickname
|
||||
<Tooltip title="What do you want others to call you?">
|
||||
<QuestionCircle />
|
||||
<QuestionCircleOutlined />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
|
||||
@ -28,7 +28,7 @@ import {
|
||||
Row,
|
||||
Col,
|
||||
} from 'antd';
|
||||
import { Upload as IconUpload, Inbox } from '@ant-design/icons';
|
||||
import { UploadOutlined, InboxOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
@ -165,7 +165,7 @@ const Demo = () => {
|
||||
>
|
||||
<Upload name="logo" action="/upload.do" listType="picture">
|
||||
<Button>
|
||||
<IconUpload /> Click to upload
|
||||
<UploadOutlined /> Click to upload
|
||||
</Button>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
@ -174,7 +174,7 @@ const Demo = () => {
|
||||
<Form.Item name="dragger" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
|
||||
<Upload.Dragger name="files" action="/upload.do">
|
||||
<p className="ant-upload-drag-icon">
|
||||
<Inbox />
|
||||
<InboxOutlined />
|
||||
</p>
|
||||
<p className="ant-upload-text">Click or drag file to this area to upload</p>
|
||||
<p className="ant-upload-hint">Support for a single or bulk upload.</p>
|
||||
|
||||
@ -14,16 +14,22 @@ title:
|
||||
Import icons from `@ant-design/icons`, component name of icons with different theme is the icon name suffixed by the theme name. Specific the `spin` property to show spinning animation.
|
||||
|
||||
```jsx
|
||||
import { Home, SettingFilled, Smile, Sync, Loading } from '@ant-design/icons';
|
||||
import {
|
||||
HomeOutlined,
|
||||
SettingFilled,
|
||||
SmileOutlined,
|
||||
SyncOutlined,
|
||||
LoadingOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
ReactDOM.render(
|
||||
<div className="icons-list">
|
||||
<Home />
|
||||
<HomeOutlined />
|
||||
<SettingFilled />
|
||||
<Smile />
|
||||
<Sync spin />
|
||||
<Smile rotate={180} />
|
||||
<Loading />
|
||||
<SmileOutlined />
|
||||
<SyncOutlined spin />
|
||||
<SmileOutlined rotate={180} />
|
||||
<LoadingOutlined />
|
||||
</div>,
|
||||
mountNode,
|
||||
);
|
||||
|
||||
@ -28,9 +28,9 @@ ReactDOM.render(<IconDisplay />, mountNode);
|
||||
We still have three different themes for icons, icon component name is the icon name suffixed by the theme name.
|
||||
|
||||
```jsx
|
||||
import { Star, StarFilled, StarTwoTone } from '@ant-design/icons';
|
||||
import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';
|
||||
|
||||
<Star />
|
||||
<StarOutlined />
|
||||
<StarFilled />
|
||||
<StarTwoTone twoToneColor="#eb2f96" />
|
||||
```
|
||||
@ -62,9 +62,9 @@ More discussion of SVG icon reference at [#10353](https://github.com/ant-design/
|
||||
The properties `theme`, `component` and `twoToneColor` were added in `3.9.0`. The best practice is to pass the property `theme` to every `<Icon />` component.
|
||||
|
||||
```jsx
|
||||
import { Message } from '@ant-design/icons';
|
||||
import { MessageOutlined } from '@ant-design/icons';
|
||||
|
||||
<Message style={{ fontSize: '16px', color: '#08c' }} />;
|
||||
<MessageOutlined style={{ fontSize: '16px', color: '#08c' }} />;
|
||||
```
|
||||
|
||||
All the icons will render to `<svg>`. You can still set `style` and `className` for size and color of icons.
|
||||
|
||||
@ -35,9 +35,9 @@ ReactDOM.render(<IconDisplay />, mountNode);
|
||||
其中我们提供了三种主题的图标，不同主题的 Icon 组件名为图标名加主题做为后缀。
|
||||
|
||||
```jsx
|
||||
import { Star, StarFilled, StarTwoTone } from '@ant-design/icons';
|
||||
import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';
|
||||
|
||||
<Star />
|
||||
<StarOutlined />
|
||||
<StarFilled />
|
||||
<StarTwoTone twoToneColor="#eb2f96" />
|
||||
```
|
||||
@ -65,9 +65,9 @@ import { Star, StarFilled, StarTwoTone } from '@ant-design/icons';
|
||||
所有的图标都会以 `<svg>` 标签渲染，可以使用 `style` 和 `className` 设置图标的大小和单色图标的颜色。例如：
|
||||
|
||||
```jsx
|
||||
import { Message } from '@ant-design/icons';
|
||||
import { MessageOutlined } from '@ant-design/icons';
|
||||
|
||||
<Message style={{ fontSize: '16px', color: '#08c' }} />;
|
||||
<MessageOutlined style={{ fontSize: '16px', color: '#08c' }} />;
|
||||
```
|
||||
|
||||
### 双色图标主色
|
||||
@ -140,10 +140,10 @@ ReactDOM.render(<Icon component={MessageSvg} />, mountNode);
|
||||
|
||||
`Icon` 中的 `component` 组件的接受的属性如下：
|
||||
|
||||
| 字段 | 说明 | 类型 | 只读值 | 版本 |
|
||||
| --------- | ----------------------- | ---------------- | -------------- | ------ |
|
||||
| width | `svg` 元素宽度 | string \| number | '1em' | |
|
||||
| height | `svg` 元素高度 | string \| number | '1em' | |
|
||||
| fill | `svg` 元素填充的颜色 | string | 'currentColor' | |
|
||||
| className | 计算后的 `svg` 类名 | string | - | |
|
||||
| style | 计算后的 `svg` 元素样式 | CSSProperties | - | |
|
||||
| 字段 | 说明 | 类型 | 只读值 | 版本 |
|
||||
| --------- | ----------------------- | ---------------- | -------------- | ---- |
|
||||
| width | `svg` 元素宽度 | string \| number | '1em' | |
|
||||
| height | `svg` 元素高度 | string \| number | '1em' | |
|
||||
| fill | `svg` 元素填充的颜色 | string | 'currentColor' | |
|
||||
| className | 计算后的 `svg` 类名 | string | - | |
|
||||
| style | 计算后的 `svg` 元素样式 | CSSProperties | - | |
|
||||
|
||||
@ -74,8 +74,6 @@ export { default as Layout } from './layout';
|
||||
|
||||
export { default as List } from './list';
|
||||
|
||||
export { default as LocaleProvider } from './locale-provider';
|
||||
|
||||
export { default as message } from './message';
|
||||
|
||||
export { default as Menu } from './menu';
|
||||
@ -138,8 +136,6 @@ export { default as Tooltip } from './tooltip';
|
||||
|
||||
export { default as Typography } from './typography';
|
||||
|
||||
export { default as Mention } from './mention';
|
||||
|
||||
export { default as Upload } from './upload';
|
||||
|
||||
export { default as version } from './version';
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import RcInputNumber from 'rc-input-number';
|
||||
import { Up, Down } from '@ant-design/icons';
|
||||
import { UpOutlined, DownOutlined } from '@ant-design/icons';
|
||||
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import { Omit } from '../_util/type';
|
||||
@ -62,8 +62,8 @@ export default class InputNumber extends React.Component<InputNumberProps, any>
|
||||
},
|
||||
className,
|
||||
);
|
||||
const upIcon = <Up className={`${prefixCls}-handler-up-inner`} />;
|
||||
const downIcon = <Down className={`${prefixCls}-handler-down-inner`} />;
|
||||
const upIcon = <UpOutlined className={`${prefixCls}-handler-up-inner`} />;
|
||||
const downIcon = <DownOutlined className={`${prefixCls}-handler-down-inner`} />;
|
||||
|
||||
return (
|
||||
<RcInputNumber
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
import { Eye, EyeInvisible } from '@ant-design/icons';
|
||||
import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
|
||||
|
||||
import Input, { InputProps } from './Input';
|
||||
|
||||
@ -46,7 +46,7 @@ export default class Password extends React.Component<PasswordProps, PasswordSta
|
||||
getIcon() {
|
||||
const { prefixCls, action } = this.props;
|
||||
const iconTrigger = ActionMap[action!] || '';
|
||||
const icon = this.state.visible ? Eye : EyeInvisible;
|
||||
const icon = this.state.visible ? EyeOutlined : EyeInvisibleOutlined;
|
||||
const iconProps = {
|
||||
[iconTrigger]: this.onChange,
|
||||
className: `${prefixCls}-icon`,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { Search as IconSearch, Loading as IconLoading } from '@ant-design/icons';
|
||||
import { SearchOutlined, LoadingOutlined } from '@ant-design/icons';
|
||||
|
||||
import Input, { InputProps } from './Input';
|
||||
import Button from '../button';
|
||||
@ -65,11 +65,11 @@ export default class Search extends React.Component<SearchProps, any> {
|
||||
if (enterButton) {
|
||||
return (
|
||||
<Button className={`${prefixCls}-button`} type="primary" size={size} key="enterButton">
|
||||
<IconLoading />
|
||||
<LoadingOutlined />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
return <IconLoading className={`${prefixCls}-icon`} key="loadingIcon" />;
|
||||
return <LoadingOutlined className={`${prefixCls}-icon`} key="loadingIcon" />;
|
||||
};
|
||||
|
||||
renderSuffix = (prefixCls: string) => {
|
||||
@ -82,7 +82,7 @@ export default class Search extends React.Component<SearchProps, any> {
|
||||
if (enterButton) return suffix;
|
||||
|
||||
const icon = (
|
||||
<IconSearch className={`${prefixCls}-icon`} key="searchIcon" onClick={this.onSearch} />
|
||||
<SearchOutlined className={`${prefixCls}-icon`} key="searchIcon" onClick={this.onSearch} />
|
||||
);
|
||||
|
||||
if (suffix) {
|
||||
@ -135,7 +135,7 @@ export default class Search extends React.Component<SearchProps, any> {
|
||||
key="enterButton"
|
||||
onClick={this.onSearch}
|
||||
>
|
||||
{enterButton === true ? <IconSearch /> : enterButton}
|
||||
{enterButton === true ? <SearchOutlined /> : enterButton}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@ exports[`Input.Password should change type when click 1`] = `
|
||||
className="ant-input-password"
|
||||
prefixCls="ant-input"
|
||||
suffix={
|
||||
<EyeInvisible
|
||||
<EyeInvisibleOutlined
|
||||
className="ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
@ -36,7 +36,7 @@ exports[`Input.Password should change type when click 1`] = `
|
||||
inputType="input"
|
||||
prefixCls="ant-input"
|
||||
suffix={
|
||||
<EyeInvisible
|
||||
<EyeInvisibleOutlined
|
||||
className="ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
@ -60,7 +60,7 @@ exports[`Input.Password should change type when click 1`] = `
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
>
|
||||
<EyeInvisible
|
||||
<EyeInvisibleOutlined
|
||||
className="ant-input-password-icon"
|
||||
key="passwordIcon"
|
||||
onClick={[Function]}
|
||||
@ -159,7 +159,7 @@ exports[`Input.Password should change type when click 1`] = `
|
||||
</IconReact>
|
||||
</span>
|
||||
</AntdIcon>
|
||||
</EyeInvisible>
|
||||
</EyeInvisibleOutlined>
|
||||
</span>
|
||||
</span>
|
||||
</ClearableLabeledInput>
|
||||
@ -179,7 +179,7 @@ exports[`Input.Password should change type when click 2`] = `
|
||||
className="ant-input-password"
|
||||
prefixCls="ant-input"
|
||||
suffix={
|
||||
<Eye
|
||||
<EyeOutlined
|
||||
className="ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
@ -203,7 +203,7 @@ exports[`Input.Password should change type when click 2`] = `
|
||||
inputType="input"
|
||||
prefixCls="ant-input"
|
||||
suffix={
|
||||
<Eye
|
||||
<EyeOutlined
|
||||
className="ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
@ -227,7 +227,7 @@ exports[`Input.Password should change type when click 2`] = `
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
>
|
||||
<Eye
|
||||
<EyeOutlined
|
||||
className="ant-input-password-icon"
|
||||
key="passwordIcon"
|
||||
onClick={[Function]}
|
||||
@ -310,7 +310,7 @@ exports[`Input.Password should change type when click 2`] = `
|
||||
</IconReact>
|
||||
</span>
|
||||
</AntdIcon>
|
||||
</Eye>
|
||||
</EyeOutlined>
|
||||
</span>
|
||||
</span>
|
||||
</ClearableLabeledInput>
|
||||
@ -330,7 +330,7 @@ exports[`Input.Password should change type when click 3`] = `
|
||||
className="ant-input-password"
|
||||
prefixCls="ant-input"
|
||||
suffix={
|
||||
<EyeInvisible
|
||||
<EyeInvisibleOutlined
|
||||
className="ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
@ -354,7 +354,7 @@ exports[`Input.Password should change type when click 3`] = `
|
||||
inputType="input"
|
||||
prefixCls="ant-input"
|
||||
suffix={
|
||||
<EyeInvisible
|
||||
<EyeInvisibleOutlined
|
||||
className="ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
@ -378,7 +378,7 @@ exports[`Input.Password should change type when click 3`] = `
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
>
|
||||
<EyeInvisible
|
||||
<EyeInvisibleOutlined
|
||||
className="ant-input-password-icon"
|
||||
key="passwordIcon"
|
||||
onClick={[Function]}
|
||||
@ -477,7 +477,7 @@ exports[`Input.Password should change type when click 3`] = `
|
||||
</IconReact>
|
||||
</span>
|
||||
</AntdIcon>
|
||||
</EyeInvisible>
|
||||
</EyeInvisibleOutlined>
|
||||
</span>
|
||||
</span>
|
||||
</ClearableLabeledInput>
|
||||
|
||||
@ -458,7 +458,7 @@ exports[`Input.Search should support suffix 1`] = `
|
||||
suffix={
|
||||
Array [
|
||||
null,
|
||||
<Search
|
||||
<SearchOutlined
|
||||
className="ant-input-search-icon"
|
||||
onClick={[Function]}
|
||||
/>,
|
||||
@ -484,7 +484,7 @@ exports[`Input.Search should support suffix 1`] = `
|
||||
suffix={
|
||||
Array [
|
||||
null,
|
||||
<Search
|
||||
<SearchOutlined
|
||||
className="ant-input-search-icon"
|
||||
onClick={[Function]}
|
||||
/>,
|
||||
@ -507,7 +507,7 @@ exports[`Input.Search should support suffix 1`] = `
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
>
|
||||
<Search
|
||||
<SearchOutlined
|
||||
className="ant-input-search-icon"
|
||||
key="searchIcon"
|
||||
onClick={[Function]}
|
||||
@ -587,7 +587,7 @@ exports[`Input.Search should support suffix 1`] = `
|
||||
</IconReact>
|
||||
</span>
|
||||
</AntdIcon>
|
||||
</Search>
|
||||
</SearchOutlined>
|
||||
</span>
|
||||
</span>
|
||||
</ClearableLabeledInput>
|
||||
|
||||
@ -15,7 +15,7 @@ Using pre & post tabs example.
|
||||
|
||||
```jsx
|
||||
import { Input, Select } from 'antd';
|
||||
import { Setting } from '@ant-design/icons';
|
||||
import { SettingOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
@ -43,7 +43,7 @@ ReactDOM.render(
|
||||
<Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />
|
||||
</div>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<Input addonAfter={<Setting />} defaultValue="mysite" />
|
||||
<Input addonAfter={<SettingOutlined />} defaultValue="mysite" />
|
||||
</div>
|
||||
</div>,
|
||||
mountNode,
|
||||
|
||||
@ -15,16 +15,16 @@ Add prefix or suffix icons inside input.
|
||||
|
||||
```jsx
|
||||
import { Input, Tooltip } from 'antd';
|
||||
import { InfoCircle, User } from '@ant-design/icons';
|
||||
import { InfoCircleOutlined, UserOutlined } from '@ant-design/icons';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Input
|
||||
placeholder="Enter your username"
|
||||
prefix={<User style={{ color: 'rgba(0,0,0,.25)' }} />}
|
||||
prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
|
||||
suffix={
|
||||
<Tooltip title="Extra information">
|
||||
<InfoCircle style={{ color: 'rgba(0,0,0,.45)' }} />
|
||||
<InfoCircleOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
|
||||
</Tooltip>
|
||||
}
|
||||
/>
|
||||
|
||||
@ -4,7 +4,7 @@ import * as React from 'react';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
import { Bars, Right, Left } from '@ant-design/icons';
|
||||
import { BarsOutlined, RightOutlined, LeftOutlined } from '@ant-design/icons';
|
||||
|
||||
import { LayoutContext, LayoutContextProps } from './layout';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
@ -214,12 +214,12 @@ class InternalSider extends React.Component<InternalSideProps, SiderState> {
|
||||
}`}
|
||||
style={zeroWidthTriggerStyle}
|
||||
>
|
||||
<Bars />
|
||||
<BarsOutlined />
|
||||
</span>
|
||||
) : null;
|
||||
const iconObj = {
|
||||
expanded: reverseArrow ? <Right /> : <Left />,
|
||||
collapsed: reverseArrow ? <Left /> : <Right />,
|
||||
expanded: reverseArrow ? <RightOutlined /> : <LeftOutlined />,
|
||||
collapsed: reverseArrow ? <LeftOutlined /> : <RightOutlined />,
|
||||
};
|
||||
const status = this.state.collapsed ? 'collapsed' : 'expanded';
|
||||
const defaultTrigger = iconObj[status];
|
||||
|
||||
@ -12,7 +12,15 @@ debug: true
|
||||
|
||||
```jsx
|
||||
import { Layout, Menu } from 'antd';
|
||||
import { Team, User, File, Desktop, PieChart, MenuUnfold, MenuFold } from '@ant-design/icons';
|
||||
import {
|
||||
TeamOutlined,
|
||||
UserOutlined,
|
||||
FileOutlined,
|
||||
DesktopOutlined,
|
||||
PieChartOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
MenuFoldOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
const { Header, Sider, Content } = Layout;
|
||||
const { SubMenu } = Menu;
|
||||
@ -35,18 +43,18 @@ class SiderDemo extends React.Component {
|
||||
<div className="logo" />
|
||||
<Menu theme="dark" mode="inline" defaultSelectedKeys={['3']} defaultOpenKeys={['sub1']}>
|
||||
<Menu.Item key="1">
|
||||
<PieChart />
|
||||
<PieChartOutlined />
|
||||
<span>Option 1</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2">
|
||||
<Desktop />
|
||||
<DesktopOutlined />
|
||||
<span>Option 2</span>
|
||||
</Menu.Item>
|
||||
<SubMenu
|
||||
key="sub1"
|
||||
title={
|
||||
<span>
|
||||
<User />
|
||||
<UserOutlined />
|
||||
<span>User</span>
|
||||
</span>
|
||||
}
|
||||
@ -59,7 +67,7 @@ class SiderDemo extends React.Component {
|
||||
key="sub2"
|
||||
title={
|
||||
<span>
|
||||
<Team />
|
||||
<TeamOutlined />
|
||||
<span>Team</span>
|
||||
</span>
|
||||
}
|
||||
@ -68,13 +76,13 @@ class SiderDemo extends React.Component {
|
||||
<Menu.Item key="8">Team 2</Menu.Item>
|
||||
</SubMenu>
|
||||
<Menu.Item key="9">
|
||||
<File />
|
||||
<FileOutlined />
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Sider>
|
||||
<Layout>
|
||||
<Header style={{ background: '#fff', padding: 0 }}>
|
||||
{React.createElement(this.state.collapsed ? MenuUnfold : MenuFold, {
|
||||
{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
|
||||
className: 'trigger',
|
||||
onClick: this.toggle,
|
||||
})}
|
||||
|
||||
@ -15,7 +15,13 @@ If you want to use a customized trigger, you can hide the default one by setting
|
||||
|
||||
```jsx
|
||||
import { Layout, Menu } from 'antd';
|
||||
import { MenuUnfold, MenuFold, User, VideoCamera, Upload as IconUpload } from '@ant-design/icons';
|
||||
import {
|
||||
MenuUnfoldOutlined,
|
||||
MenuFoldOutlined,
|
||||
UserOutlined,
|
||||
VideoCameraOutlined,
|
||||
UploadOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
const { Header, Sider, Content } = Layout;
|
||||
|
||||
@ -37,22 +43,22 @@ class SiderDemo extends React.Component {
|
||||
<div className="logo" />
|
||||
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
|
||||
<Menu.Item key="1">
|
||||
<User />
|
||||
<UserOutlined />
|
||||
<span>nav 1</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2">
|
||||
<VideoCamera />
|
||||
<VideoCameraOutlined />
|
||||
<span>nav 2</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="3">
|
||||
<IconUpload />
|
||||
<UploadOutlined />
|
||||
<span>nav 3</span>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Sider>
|
||||
<Layout>
|
||||
<Header style={{ background: '#fff', padding: 0 }}>
|
||||
{React.createElement(this.state.collapsed ? MenuUnfold : MenuFold, {
|
||||
{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
|
||||
className: 'trigger',
|
||||
onClick: this.toggle,
|
||||
})}
|
||||
|
||||
@ -17,14 +17,14 @@ When dealing with long content, a fixed sider can provide a better user experien
|
||||
```jsx
|
||||
import { Layout, Menu } from 'antd';
|
||||
import {
|
||||
Appstore,
|
||||
BarChart,
|
||||
Cloud,
|
||||
Shop,
|
||||
Team,
|
||||
User,
|
||||
Upload as IconUpload,
|
||||
VideoCamera,
|
||||
AppstoreOutlined,
|
||||
BarChartOutlined,
|
||||
CloudOutlined,
|
||||
ShopOutlined,
|
||||
TeamOutlined,
|
||||
UserOutlined,
|
||||
UploadOutlined,
|
||||
VideoCameraOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
const { Header, Content, Footer, Sider } = Layout;
|
||||
@ -42,35 +42,35 @@ ReactDOM.render(
|
||||
<div className="logo" />
|
||||
<Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
|
||||
<Menu.Item key="1">
|
||||
<User />
|
||||
<UserOutlined />
|
||||
<span className="nav-text">nav 1</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2">
|
||||
<VideoCamera />
|
||||
<VideoCameraOutlined />
|
||||
<span className="nav-text">nav 2</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="3">
|
||||
<IconUpload />
|
||||
<UploadOutlined />
|
||||
<span className="nav-text">nav 3</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="4">
|
||||
<BarChart />
|
||||
<BarChartOutlined />
|
||||
<span className="nav-text">nav 4</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="5">
|
||||
<Cloud />
|
||||
<CloudOutlined />
|
||||
<span className="nav-text">nav 5</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="6">
|
||||
<Appstore />
|
||||
<AppstoreOutlined />
|
||||
<span className="nav-text">nav 6</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="7">
|
||||
<Team />
|
||||
<TeamOutlined />
|
||||
<span className="nav-text">nav 7</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="8">
|
||||
<Shop />
|
||||
<ShopOutlined />
|
||||
<span className="nav-text">nav 8</span>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
|
||||
@ -19,7 +19,7 @@ Layout.Sider supports responsive layout.
|
||||
|
||||
```jsx
|
||||
import { Layout, Menu } from 'antd';
|
||||
import { Upload as IconUpload, User, VideoCamera } from '@ant-design/icons';
|
||||
import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Header, Content, Footer, Sider } = Layout;
|
||||
|
||||
@ -38,19 +38,19 @@ ReactDOM.render(
|
||||
<div className="logo" />
|
||||
<Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
|
||||
<Menu.Item key="1">
|
||||
<User />
|
||||
<UserOutlined />
|
||||
<span className="nav-text">nav 1</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2">
|
||||
<VideoCamera />
|
||||
<VideoCameraOutlined />
|
||||
<span className="nav-text">nav 2</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="3">
|
||||
<IconUpload />
|
||||
<UploadOutlined />
|
||||
<span className="nav-text">nav 3</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="4">
|
||||
<User />
|
||||
<UserOutlined />
|
||||
<span className="nav-text">nav 4</span>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
|
||||
@ -22,7 +22,13 @@ The level of the aside navigation is scalable. The first, second, and third leve
|
||||
|
||||
```jsx
|
||||
import { Layout, Menu, Breadcrumb } from 'antd';
|
||||
import { Desktop, PieChart, File, Team, User } from '@ant-design/icons';
|
||||
import {
|
||||
DesktopOutlined,
|
||||
PieChartOutlined,
|
||||
FileOutlined,
|
||||
TeamOutlined,
|
||||
UserOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
const { Header, Content, Footer, Sider } = Layout;
|
||||
const { SubMenu } = Menu;
|
||||
@ -44,18 +50,18 @@ class SiderDemo extends React.Component {
|
||||
<div className="logo" />
|
||||
<Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
|
||||
<Menu.Item key="1">
|
||||
<PieChart />
|
||||
<PieChartOutlined />
|
||||
<span>Option 1</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2">
|
||||
<Desktop />
|
||||
<DesktopOutlined />
|
||||
<span>Option 2</span>
|
||||
</Menu.Item>
|
||||
<SubMenu
|
||||
key="sub1"
|
||||
title={
|
||||
<span>
|
||||
<User />
|
||||
<UserOutlined />
|
||||
<span>User</span>
|
||||
</span>
|
||||
}
|
||||
@ -68,7 +74,7 @@ class SiderDemo extends React.Component {
|
||||
key="sub2"
|
||||
title={
|
||||
<span>
|
||||
<Team />
|
||||
<TeamOutlined />
|
||||
<span>Team</span>
|
||||
</span>
|
||||
}
|
||||
@ -77,7 +83,7 @@ class SiderDemo extends React.Component {
|
||||
<Menu.Item key="8">Team 2</Menu.Item>
|
||||
</SubMenu>
|
||||
<Menu.Item key="9">
|
||||
<File />
|
||||
<FileOutlined />
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Sider>
|
||||
|
||||
@ -15,7 +15,7 @@ Both the top navigation and the sidebar, commonly used in application site.
|
||||
|
||||
```jsx
|
||||
import { Layout, Menu, Breadcrumb } from 'antd';
|
||||
import { User, Laptop, Notification } from '@ant-design/icons';
|
||||
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
|
||||
|
||||
const { SubMenu } = Menu;
|
||||
const { Header, Content, Sider } = Layout;
|
||||
@ -47,7 +47,7 @@ ReactDOM.render(
|
||||
key="sub1"
|
||||
title={
|
||||
<span>
|
||||
<User />
|
||||
<UserOutlined />
|
||||
subnav 1
|
||||
</span>
|
||||
}
|
||||
@ -61,7 +61,7 @@ ReactDOM.render(
|
||||
key="sub2"
|
||||
title={
|
||||
<span>
|
||||
<Laptop />
|
||||
<LaptopOutlined />
|
||||
subnav 2
|
||||
</span>
|
||||
}
|
||||
@ -75,7 +75,7 @@ ReactDOM.render(
|
||||
key="sub3"
|
||||
title={
|
||||
<span>
|
||||
<Notification />
|
||||
<NotificationOutlined />
|
||||
subnav 3
|
||||
</span>
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@ Both the top navigation and the sidebar, commonly used in documentation site.
|
||||
|
||||
```jsx
|
||||
import { Layout, Menu, Breadcrumb } from 'antd';
|
||||
import { User, Laptop, Notification } from '@ant-design/icons';
|
||||
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
|
||||
|
||||
const { SubMenu } = Menu;
|
||||
const { Header, Content, Footer, Sider } = Layout;
|
||||
@ -53,7 +53,7 @@ ReactDOM.render(
|
||||
key="sub1"
|
||||
title={
|
||||
<span>
|
||||
<User />
|
||||
<UserOutlined />
|
||||
subnav 1
|
||||
</span>
|
||||
}
|
||||
@ -67,7 +67,7 @@ ReactDOM.render(
|
||||
key="sub2"
|
||||
title={
|
||||
<span>
|
||||
<Laptop />
|
||||
<LaptopOutlined />
|
||||
subnav 2
|
||||
</span>
|
||||
}
|
||||
@ -81,7 +81,7 @@ ReactDOM.render(
|
||||
key="sub3"
|
||||
title={
|
||||
<span>
|
||||
<Notification />
|
||||
<NotificationOutlined />
|
||||
subnav 3
|
||||
</span>
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { render } from 'enzyme';
|
||||
import { Loading } from '@ant-design/icons';
|
||||
import { LoadingOutlined } from '@ant-design/icons';
|
||||
|
||||
import List from '..';
|
||||
|
||||
@ -26,7 +26,7 @@ describe('List', () => {
|
||||
});
|
||||
|
||||
it('renders object loading with indicator', () => {
|
||||
const antIcon = <Loading style={{ fontSize: 24 }} spin />;
|
||||
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
|
||||
|
||||
const loading = {
|
||||
spinning: true,
|
||||
|
||||
@ -15,7 +15,7 @@ Set the `itemLayout` property to `vertical` to create a vertical list.
|
||||
|
||||
```jsx
|
||||
import { List, Avatar } from 'antd';
|
||||
import { Message, Like, Star } from '@ant-design/icons';
|
||||
import { MessageOutlined, LikeOutlined, StarOutlined } from '@ant-design/icons';
|
||||
|
||||
const listData = [];
|
||||
for (let i = 0; i < 23; i++) {
|
||||
@ -57,9 +57,9 @@ ReactDOM.render(
|
||||
<List.Item
|
||||
key={item.title}
|
||||
actions={[
|
||||
<IconText icon={Star} text="156" key="list-vertical-star-o" />,
|
||||
<IconText icon={Like} text="156" key="list-vertical-like-o" />,
|
||||
<IconText icon={Message} text="2" key="list-vertical-message" />,
|
||||
<IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
|
||||
<IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
|
||||
<IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
|
||||
]}
|
||||
extra={
|
||||
<img
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,3 +0,0 @@
|
||||
import demoTest from '../../../tests/shared/demoTest';
|
||||
|
||||
demoTest('locale-provider');
|
||||
@ -3,10 +3,8 @@ import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import moment from 'moment';
|
||||
import MockDate from 'mockdate';
|
||||
import { resetWarned } from '../../_util/warning';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import {
|
||||
LocaleProvider,
|
||||
Pagination,
|
||||
DatePicker,
|
||||
TimePicker,
|
||||
@ -17,6 +15,7 @@ import {
|
||||
Select,
|
||||
Transfer,
|
||||
} from '../..';
|
||||
import LocaleProvider from '..';
|
||||
import arEG from '../ar_EG';
|
||||
import bgBG from '../bg_BG';
|
||||
import caES from '../ca_ES';
|
||||
@ -247,20 +246,4 @@ describe('Locale Provider', () => {
|
||||
wrapper.setState({ locale: null });
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('warning if use LocaleProvider', () => {
|
||||
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
resetWarned();
|
||||
|
||||
mount(
|
||||
<LocaleProvider locale={{}}>
|
||||
<div />
|
||||
</LocaleProvider>,
|
||||
);
|
||||
expect(errorSpy).toHaveBeenCalledWith(
|
||||
'Warning: [antd: LocaleProvider] `LocaleProvider` is deprecated. Please use `locale` with `ConfigProvider` instead: http://u.ant.design/locale',
|
||||
);
|
||||
|
||||
errorSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,187 +0,0 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 所有组件
|
||||
en-US: All components
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
此处列出 Ant Design 中需要国际化支持的组件，你可以在演示里切换语言。
|
||||
|
||||
## en-US
|
||||
|
||||
Components which need localization support are listed here, you can toggle the language in the demo.
|
||||
|
||||
```jsx
|
||||
import {
|
||||
LocaleProvider,
|
||||
Pagination,
|
||||
DatePicker,
|
||||
TimePicker,
|
||||
Calendar,
|
||||
Popconfirm,
|
||||
Table,
|
||||
Modal,
|
||||
Button,
|
||||
Select,
|
||||
Transfer,
|
||||
Radio,
|
||||
} from 'antd';
|
||||
import zhCN from 'antd/es/locale-provider/zh_CN';
|
||||
import moment from 'moment';
|
||||
import 'moment/locale/zh-cn';
|
||||
|
||||
moment.locale('en');
|
||||
|
||||
const { Option } = Select;
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
filters: [
|
||||
{
|
||||
text: 'filter1',
|
||||
value: 'filter1',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
},
|
||||
];
|
||||
|
||||
class Page extends React.Component {
|
||||
state = {
|
||||
visible: false,
|
||||
};
|
||||
|
||||
showModal = () => {
|
||||
this.setState({ visible: true });
|
||||
};
|
||||
|
||||
hideModal = () => {
|
||||
this.setState({ visible: false });
|
||||
};
|
||||
|
||||
render() {
|
||||
const info = () => {
|
||||
Modal.info({
|
||||
title: 'some info',
|
||||
content: 'some info',
|
||||
});
|
||||
};
|
||||
const confirm = () => {
|
||||
Modal.confirm({
|
||||
title: 'some info',
|
||||
content: 'some info',
|
||||
});
|
||||
};
|
||||
return (
|
||||
<div className="locale-components">
|
||||
<div className="example">
|
||||
<Pagination defaultCurrent={1} total={50} showSizeChanger />
|
||||
</div>
|
||||
<div className="example">
|
||||
<Select showSearch style={{ width: 200 }}>
|
||||
<Option value="jack">jack</Option>
|
||||
<Option value="lucy">lucy</Option>
|
||||
</Select>
|
||||
<DatePicker />
|
||||
<TimePicker />
|
||||
<RangePicker style={{ width: 200 }} />
|
||||
</div>
|
||||
<div className="example">
|
||||
<Button type="primary" onClick={this.showModal}>
|
||||
Show Modal
|
||||
</Button>
|
||||
<Button onClick={info}>Show info</Button>
|
||||
<Button onClick={confirm}>Show confirm</Button>
|
||||
<Popconfirm title="Question?">
|
||||
<a href="#">Click to confirm</a>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
<div className="example">
|
||||
<Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} />
|
||||
</div>
|
||||
<div style={{ width: 319, border: '1px solid #d9d9d9', borderRadius: 4 }}>
|
||||
<Calendar fullscreen={false} value={moment()} />
|
||||
</div>
|
||||
<div className="example">
|
||||
<Table dataSource={[]} columns={columns} />
|
||||
</div>
|
||||
<Modal title="Locale Modal" visible={this.state.visible} onCancel={this.hideModal}>
|
||||
<p>Locale Modal</p>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class App extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
locale: null,
|
||||
};
|
||||
}
|
||||
|
||||
changeLocale = e => {
|
||||
const localeValue = e.target.value;
|
||||
this.setState({ locale: localeValue });
|
||||
if (!localeValue) {
|
||||
moment.locale('en');
|
||||
} else {
|
||||
moment.locale('zh-cn');
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { locale } = this.state;
|
||||
return (
|
||||
<div>
|
||||
<div className="change-locale">
|
||||
<span style={{ marginRight: 16 }}>Change locale of components: </span>
|
||||
<Radio.Group defaultValue={undefined} onChange={this.changeLocale}>
|
||||
<Radio.Button key="en" value={undefined}>
|
||||
English
|
||||
</Radio.Button>
|
||||
<Radio.Button key="cn" value={zhCN}>
|
||||
中文
|
||||
</Radio.Button>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
<LocaleProvider locale={locale}>
|
||||
<Page
|
||||
key={locale ? locale.locale : 'en' /* Have to refresh for production environment */}
|
||||
/>
|
||||
</LocaleProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<App />, mountNode);
|
||||
```
|
||||
|
||||
```css
|
||||
.locale-components {
|
||||
border-top: 1px solid #d9d9d9;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.example {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.example > * {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.change-locale {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
```
|
||||
@ -1,32 +0,0 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 国际化
|
||||
en-US: Localization
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
用 `LocaleProvider` 包裹你的应用，并引用对应的语言包。
|
||||
|
||||
## en-US
|
||||
|
||||
Wrap your app with `LocaleProvider`, and apply the corresponding language package.
|
||||
|
||||
```jsx
|
||||
import { Pagination, LocaleProvider } from 'antd';
|
||||
import zhCN from 'antd/es/locale-provider/zh_CN';
|
||||
|
||||
const App = () => (
|
||||
<div>
|
||||
<Pagination defaultCurrent={1} total={50} showSizeChanger />
|
||||
</div>
|
||||
);
|
||||
|
||||
ReactDOM.render(
|
||||
<LocaleProvider locale={zhCN}>
|
||||
<App />
|
||||
</LocaleProvider>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
@ -1,56 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
type: Deprecated
|
||||
cols: 1
|
||||
title: LocaleProvider (Deprecated)
|
||||
---
|
||||
|
||||
`LocaleProvider` component. Deprecated, please use [ConfigProvider](/components/config-provider) instead.
|
||||
|
||||
## Usage
|
||||
|
||||
`LocaleProvider` makes use of [context](https://facebook.github.io/react/docs/context.html), a feature of React, to accomplish global effectiveness by wrapping the app only once.
|
||||
|
||||
```jsx
|
||||
import { LocaleProvider } from 'antd';
|
||||
import fr_FR from 'antd/es/locale-provider/fr_FR';
|
||||
import moment from 'moment';
|
||||
import 'moment/locale/fr';
|
||||
|
||||
moment.locale('fr');
|
||||
...
|
||||
|
||||
return <LocaleProvider locale={fr_FR}><App /></LocaleProvider>;
|
||||
```
|
||||
|
||||
We provide some locales like English, Chinese, Russian, German, French etc. All locale packages can be found in [here](https://github.com/ant-design/ant-design/blob/master/components/locale-provider/).
|
||||
|
||||
Note: if you need to use antd's UMD dist file, please use `antd/dist/antd-with-locales.js` and corresponding moment locale:
|
||||
|
||||
```jsx
|
||||
const { LocaleProvider, locales } = window.antd;
|
||||
|
||||
...
|
||||
|
||||
return <LocaleProvider locale={locales.fr_FR}><App /></LocaleProvider>;
|
||||
```
|
||||
|
||||
### Add a new language
|
||||
|
||||
If you can't find your language, you are welcome to create a locale package based on [en_US](https://github.com/ant-design/ant-design/blob/master/components/locale-provider/en_US.tsx) and send us a pull request.
|
||||
|
||||
### Other localization needs
|
||||
|
||||
This component aims to provide localization of the built-in text. If you want to support other documents, we recommend using [react-intl](https://github.com/yahoo/react-intl), refer to [Intl demo 1](http://github.com/ant-design/intl-example) and [Intl demo 2](http://yiminghe.me/learning-react/examples/react-intl.html?locale=en-US).
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| locale | language package setting, you can find the packages in [antd/es/locale-provider](http://unpkg.com/antd/es/locale-provider/) | object | - | |
|
||||
|
||||
## FAQ
|
||||
|
||||
#### Locale problem is still existed even LocaleProvider is used?
|
||||
|
||||
Please make sure you set moment locale by `moment.locale('zh-cn')`, or you don't have two moment of different version.
|
||||
@ -1,57 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 国际化（废弃）
|
||||
cols: 1
|
||||
type: 废弃
|
||||
title: LocaleProvider
|
||||
---
|
||||
|
||||
国际化组件。已废弃，请使用 [ConfigProvider](/components/config-provider) 代替。
|
||||
|
||||
## 使用
|
||||
|
||||
LocaleProvider 使用 React 的 [context](https://facebook.github.io/react/docs/context.html) 特性，只需在应用外围包裹一次即可全局生效。
|
||||
|
||||
```jsx
|
||||
import { LocaleProvider } from 'antd';
|
||||
import zh_CN from 'antd/es/locale-provider/zh_CN';
|
||||
import moment from 'moment';
|
||||
import 'moment/locale/zh-cn';
|
||||
|
||||
moment.locale('zh-cn');
|
||||
...
|
||||
|
||||
return <LocaleProvider locale={zh_CN}><App /></LocaleProvider>;
|
||||
```
|
||||
|
||||
我们提供了英语，中文，俄语，法语，德语等多种语言支持，所有语言包可以在 [这里](https://github.com/ant-design/ant-design/blob/master/components/locale-provider/) 找到。
|
||||
|
||||
注意：如果你需要使用 UMD 版的 dist 文件，应该引入 `antd/dist/antd-with-locales.js`，同时引入 moment 对应的 locale，然后按以下方式使用：
|
||||
|
||||
```jsx
|
||||
const { LocaleProvider, locales } = window.antd;
|
||||
|
||||
...
|
||||
|
||||
return <LocaleProvider locale={locales.en_US}><App /></LocaleProvider>;
|
||||
```
|
||||
|
||||
### 增加语言包
|
||||
|
||||
如果你找不到你需要的语言包，欢迎你在 [英文语言包](https://github.com/ant-design/ant-design/blob/master/components/locale-provider/en_US.tsx) 的基础上创建一个新的语言包，并给我们 Pull Request。
|
||||
|
||||
### 其他国际化需求
|
||||
|
||||
本模块仅用于组件的内建文案，若有业务文案的国际化需求，建议使用 [react-intl](https://github.com/yahoo/react-intl)，可参考示例：[Intl demo 1](http://github.com/ant-design/intl-example) 和 [Intl demo 2](http://yiminghe.me/learning-react/examples/react-intl.html?locale=en-US)。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| locale | 语言包配置，语言包可到 [antd/es/locale-provider](http://unpkg.com/antd/es/locale-provider/) 目录下寻找 | object | - | |
|
||||
|
||||
## FAQ
|
||||
|
||||
#### 为什么我使用了 LocaleProvider 还有问题？
|
||||
|
||||
请检查是否设置了 `moment.locale('zh-cn')`，或者是否有两个版本的 moment 共存。
|
||||
@ -9,12 +9,18 @@ export default {
|
||||
DatePicker,
|
||||
TimePicker,
|
||||
Calendar,
|
||||
global: {
|
||||
placeholder: 'Maak een selectie',
|
||||
},
|
||||
Table: {
|
||||
filterTitle: 'Filteren',
|
||||
filterConfirm: 'OK',
|
||||
filterReset: 'Reset',
|
||||
selectAll: 'Selecteer huidige pagina',
|
||||
selectInvert: 'Deselecteer huidige pagina',
|
||||
sortTitle: 'Sorteren',
|
||||
expand: 'Rij uitklappen',
|
||||
collapse: 'Rij inklappen',
|
||||
},
|
||||
Modal: {
|
||||
okText: 'OK',
|
||||
@ -26,6 +32,7 @@ export default {
|
||||
cancelText: 'Annuleren',
|
||||
},
|
||||
Transfer: {
|
||||
titles: ['', ''],
|
||||
searchPlaceholder: 'Zoeken',
|
||||
itemUnit: 'item',
|
||||
itemsUnit: 'items',
|
||||
@ -40,4 +47,16 @@ export default {
|
||||
Empty: {
|
||||
description: 'Geen gegevens',
|
||||
},
|
||||
Icon: {
|
||||
icon: 'icoon',
|
||||
},
|
||||
Text: {
|
||||
edit: 'Bewerken',
|
||||
copy: 'Kopieren',
|
||||
copied: 'Gekopieerd',
|
||||
expand: 'Uitklappen',
|
||||
},
|
||||
PageHeader: {
|
||||
back: 'Terug',
|
||||
},
|
||||
};
|
||||
|
||||
@ -9,12 +9,18 @@ export default {
|
||||
DatePicker,
|
||||
TimePicker,
|
||||
Calendar,
|
||||
global: {
|
||||
placeholder: 'Prosím vyberte',
|
||||
},
|
||||
Table: {
|
||||
filterTitle: 'Filter',
|
||||
filterConfirm: 'OK',
|
||||
filterReset: 'Obnoviť',
|
||||
selectAll: 'Vybrať všetko',
|
||||
selectInvert: 'Vybrať opačné',
|
||||
sortTitle: 'Zoradiť',
|
||||
expand: 'Rozbaliť riadok',
|
||||
collapse: 'Zbaliť riadok',
|
||||
},
|
||||
Modal: {
|
||||
okText: 'OK',
|
||||
@ -26,6 +32,7 @@ export default {
|
||||
cancelText: 'Zrušiť',
|
||||
},
|
||||
Transfer: {
|
||||
titles: ['', ''],
|
||||
searchPlaceholder: 'Vyhľadávanie',
|
||||
itemUnit: 'položka',
|
||||
itemsUnit: 'položiek',
|
||||
@ -40,4 +47,16 @@ export default {
|
||||
Empty: {
|
||||
description: 'Žiadne dáta',
|
||||
},
|
||||
Icon: {
|
||||
icon: 'ikona',
|
||||
},
|
||||
Text: {
|
||||
edit: 'Upraviť',
|
||||
copy: 'Kopírovať',
|
||||
copied: 'Skopírované',
|
||||
expand: 'Zväčšiť',
|
||||
},
|
||||
PageHeader: {
|
||||
back: 'Späť',
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,796 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/mention/demo/async.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-mention-wrapper"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-editor oneline"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-toolbar"
|
||||
/>
|
||||
<div
|
||||
class="ant-mention-editor-wrapper"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="DraftEditor-root"
|
||||
>
|
||||
<div
|
||||
class="DraftEditor-editorContainer"
|
||||
>
|
||||
<div
|
||||
aria-describedby="placeholder-123"
|
||||
class="notranslate public-DraftEditor-content"
|
||||
contenteditable="true"
|
||||
role="textbox"
|
||||
spellcheck="false"
|
||||
style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
|
||||
>
|
||||
<div
|
||||
data-contents="true"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
data-block="true"
|
||||
data-editor="123"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<div
|
||||
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<span
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<br
|
||||
data-text="true"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/mention/demo/avatar.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-mention-wrapper"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-editor oneline"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-toolbar"
|
||||
/>
|
||||
<div
|
||||
class="ant-mention-editor-wrapper"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="DraftEditor-root"
|
||||
>
|
||||
<div
|
||||
class="DraftEditor-editorContainer"
|
||||
>
|
||||
<div
|
||||
aria-describedby="placeholder-123"
|
||||
class="notranslate public-DraftEditor-content"
|
||||
contenteditable="true"
|
||||
role="textbox"
|
||||
spellcheck="false"
|
||||
style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
|
||||
>
|
||||
<div
|
||||
data-contents="true"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
data-block="true"
|
||||
data-editor="123"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<div
|
||||
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<span
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<br
|
||||
data-text="true"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/mention/demo/basic.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-mention-wrapper"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-editor oneline"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-toolbar"
|
||||
/>
|
||||
<div
|
||||
class="ant-mention-editor-wrapper"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="DraftEditor-root"
|
||||
>
|
||||
<div
|
||||
class="DraftEditor-editorContainer"
|
||||
>
|
||||
<div
|
||||
aria-describedby="placeholder-123"
|
||||
class="notranslate public-DraftEditor-content"
|
||||
contenteditable="true"
|
||||
role="textbox"
|
||||
spellcheck="false"
|
||||
style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
|
||||
>
|
||||
<div
|
||||
data-contents="true"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
data-block="true"
|
||||
data-editor="123"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<div
|
||||
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<span
|
||||
data-text="true"
|
||||
>
|
||||
@afc163
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/mention/demo/controllder-simple.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-mention-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-editor oneline"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-toolbar"
|
||||
/>
|
||||
<div
|
||||
class="ant-mention-editor-wrapper"
|
||||
>
|
||||
<div
|
||||
class="DraftEditor-root"
|
||||
>
|
||||
<div
|
||||
class="DraftEditor-editorContainer"
|
||||
>
|
||||
<div
|
||||
aria-describedby="placeholder-123"
|
||||
class="notranslate public-DraftEditor-content"
|
||||
contenteditable="true"
|
||||
role="textbox"
|
||||
spellcheck="false"
|
||||
style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
|
||||
>
|
||||
<div
|
||||
data-contents="true"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
data-block="true"
|
||||
data-editor="123"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<div
|
||||
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<span
|
||||
data-text="true"
|
||||
>
|
||||
@afc163
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/mention/demo/controlled.md correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-6 ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class=""
|
||||
for="mention"
|
||||
title="Top coders"
|
||||
>
|
||||
Top coders
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-16 ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-editor oneline"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-toolbar"
|
||||
/>
|
||||
<div
|
||||
class="ant-mention-editor-wrapper"
|
||||
>
|
||||
<div
|
||||
class="DraftEditor-root"
|
||||
>
|
||||
<div
|
||||
class="DraftEditor-editorContainer"
|
||||
>
|
||||
<div
|
||||
aria-describedby="placeholder-123"
|
||||
class="notranslate public-DraftEditor-content"
|
||||
contenteditable="true"
|
||||
role="textbox"
|
||||
spellcheck="false"
|
||||
style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
|
||||
>
|
||||
<div
|
||||
data-contents="true"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
data-block="true"
|
||||
data-editor="123"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<div
|
||||
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<span
|
||||
data-text="true"
|
||||
>
|
||||
@afc163
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-14 ant-col-offset-6 ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Reset
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/mention/demo/custom-tag.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-mention-wrapper"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-editor oneline"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-toolbar"
|
||||
/>
|
||||
<div
|
||||
class="ant-mention-editor-wrapper"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="DraftEditor-root"
|
||||
>
|
||||
<div
|
||||
class="public-DraftEditorPlaceholder-root"
|
||||
>
|
||||
<div
|
||||
class="public-DraftEditorPlaceholder-inner"
|
||||
id="placeholder-123"
|
||||
style="white-space:pre-wrap"
|
||||
>
|
||||
@someone
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="DraftEditor-editorContainer"
|
||||
>
|
||||
<div
|
||||
aria-describedby="placeholder-123"
|
||||
class="notranslate public-DraftEditor-content"
|
||||
contenteditable="true"
|
||||
role="textbox"
|
||||
spellcheck="false"
|
||||
style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
|
||||
>
|
||||
<div
|
||||
data-contents="true"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
data-block="true"
|
||||
data-editor="123"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<div
|
||||
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<span
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<br
|
||||
data-text="true"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/mention/demo/multilines.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-mention-wrapper multilines"
|
||||
style="width:100%;height:100px"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-editor"
|
||||
style="width:100%;height:100px"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-toolbar"
|
||||
/>
|
||||
<div
|
||||
class="ant-mention-editor-wrapper"
|
||||
style="width:100%;height:100px"
|
||||
>
|
||||
<div
|
||||
class="DraftEditor-root"
|
||||
>
|
||||
<div
|
||||
class="DraftEditor-editorContainer"
|
||||
>
|
||||
<div
|
||||
aria-describedby="placeholder-123"
|
||||
class="notranslate public-DraftEditor-content"
|
||||
contenteditable="true"
|
||||
role="textbox"
|
||||
spellcheck="false"
|
||||
style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
|
||||
>
|
||||
<div
|
||||
data-contents="true"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
data-block="true"
|
||||
data-editor="123"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<div
|
||||
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<span
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<br
|
||||
data-text="true"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/mention/demo/multiple-trigger.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-mention-wrapper"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-editor oneline"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-toolbar"
|
||||
/>
|
||||
<div
|
||||
class="ant-mention-editor-wrapper"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="DraftEditor-root"
|
||||
>
|
||||
<div
|
||||
class="public-DraftEditorPlaceholder-root"
|
||||
>
|
||||
<div
|
||||
class="public-DraftEditorPlaceholder-inner"
|
||||
id="placeholder-123"
|
||||
style="white-space:pre-wrap"
|
||||
>
|
||||
input @ to mention people, # to mention tag
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="DraftEditor-editorContainer"
|
||||
>
|
||||
<div
|
||||
aria-describedby="placeholder-123"
|
||||
class="notranslate public-DraftEditor-content"
|
||||
contenteditable="true"
|
||||
role="textbox"
|
||||
spellcheck="false"
|
||||
style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
|
||||
>
|
||||
<div
|
||||
data-contents="true"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
data-block="true"
|
||||
data-editor="123"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<div
|
||||
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<span
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<br
|
||||
data-text="true"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/mention/demo/placement.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-mention-placement-top ant-mention-wrapper"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-editor oneline"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-toolbar"
|
||||
/>
|
||||
<div
|
||||
class="ant-mention-editor-wrapper"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="DraftEditor-root"
|
||||
>
|
||||
<div
|
||||
class="DraftEditor-editorContainer"
|
||||
>
|
||||
<div
|
||||
aria-describedby="placeholder-123"
|
||||
class="notranslate public-DraftEditor-content"
|
||||
contenteditable="true"
|
||||
role="textbox"
|
||||
spellcheck="false"
|
||||
style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
|
||||
>
|
||||
<div
|
||||
data-contents="true"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
data-block="true"
|
||||
data-editor="123"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<div
|
||||
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<span
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<br
|
||||
data-text="true"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/mention/demo/popupContainer.md correctly 1`] = `
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Click Me
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/mention/demo/readonly.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
style="margin-bottom:10px"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-wrapper disabled"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-editor readonly oneline"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-toolbar"
|
||||
/>
|
||||
<div
|
||||
class="ant-mention-editor-wrapper"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="DraftEditor-root"
|
||||
>
|
||||
<div
|
||||
class="public-DraftEditorPlaceholder-root"
|
||||
>
|
||||
<div
|
||||
class="public-DraftEditorPlaceholder-inner"
|
||||
id="placeholder-123"
|
||||
style="white-space:pre-wrap"
|
||||
>
|
||||
this is disabled Mention
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="DraftEditor-editorContainer"
|
||||
>
|
||||
<div
|
||||
aria-describedby="placeholder-123"
|
||||
class="public-DraftEditor-content"
|
||||
contenteditable="false"
|
||||
spellcheck="false"
|
||||
style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
|
||||
>
|
||||
<div
|
||||
data-contents="true"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
data-block="true"
|
||||
data-editor="123"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<div
|
||||
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<span
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<br
|
||||
data-text="true"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
style="width:0;opacity:0;border:0;position:absolute;left:0;top:0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-mention-wrapper readonly"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-editor readonly oneline"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-mention-toolbar"
|
||||
/>
|
||||
<div
|
||||
class="ant-mention-editor-wrapper"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="DraftEditor-root"
|
||||
>
|
||||
<div
|
||||
class="public-DraftEditorPlaceholder-root"
|
||||
>
|
||||
<div
|
||||
class="public-DraftEditorPlaceholder-inner"
|
||||
id="placeholder-123"
|
||||
style="white-space:pre-wrap"
|
||||
>
|
||||
this is readOnly Mention
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="DraftEditor-editorContainer"
|
||||
>
|
||||
<div
|
||||
aria-describedby="placeholder-123"
|
||||
class="public-DraftEditor-content"
|
||||
contenteditable="false"
|
||||
spellcheck="false"
|
||||
style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
|
||||
>
|
||||
<div
|
||||
data-contents="true"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
data-block="true"
|
||||
data-editor="123"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<div
|
||||
class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<span
|
||||
data-offset-key="123-0-0"
|
||||
>
|
||||
<br
|
||||
data-text="true"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
style="width:0;opacity:0;border:0;position:absolute;left:0;top:0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,5 +0,0 @@
|
||||
import demoTest from '../../../tests/shared/demoTest';
|
||||
|
||||
jest.mock('draft-js/lib/generateRandomKey', () => () => '123');
|
||||
|
||||
demoTest('mention', { skip: process.env.LIB_DIR === 'dist' });
|
||||
@ -1,123 +0,0 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import Mention from '..';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
|
||||
const { toContentState } = Mention;
|
||||
|
||||
describe('Mention', () => {
|
||||
mountTest(Mention);
|
||||
|
||||
beforeAll(() => {
|
||||
jest.useFakeTimers();
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
jest.useRealTimers();
|
||||
});
|
||||
|
||||
it('should has focus function', () => {
|
||||
const handleFocus = jest.fn();
|
||||
const wrapper = mount(
|
||||
<Mention
|
||||
defaultValue={toContentState('@afc163')}
|
||||
onFocus={handleFocus}
|
||||
suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
|
||||
/>,
|
||||
);
|
||||
wrapper.instance().focus();
|
||||
jest.runAllTimers();
|
||||
expect(handleFocus).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('basic suggestion', () => {
|
||||
const handleSearch = jest.fn();
|
||||
const wrapper = mount(
|
||||
<Mention suggestions={['afc163', 'raohai']} onSearchChange={handleSearch} />,
|
||||
);
|
||||
wrapper.find('DraftEditorContents').simulate('focus');
|
||||
const ed = wrapper.find('.public-DraftEditor-content');
|
||||
ed.simulate('beforeInput', { data: '@a' });
|
||||
jest.runAllTimers();
|
||||
expect(handleSearch).toHaveBeenCalledWith('a', '@');
|
||||
});
|
||||
|
||||
it('change suggestions', () => {
|
||||
const container = mount(<div id="container" />);
|
||||
const wrapper = mount(
|
||||
<Mention
|
||||
suggestions={['afc163', 'raohai']}
|
||||
getSuggestionContainer={() => container.getDOMNode()}
|
||||
/>,
|
||||
);
|
||||
wrapper.find('DraftEditorContents').simulate('focus');
|
||||
const ed = wrapper.find('.public-DraftEditor-content');
|
||||
ed.simulate('beforeInput', { data: '@' });
|
||||
jest.runAllTimers();
|
||||
expect(container.getDOMNode().querySelectorAll('.ant-mention-dropdown-item').length).toBe(2);
|
||||
expect(container.getDOMNode().querySelectorAll('.ant-mention-dropdown-item')[0].innerHTML).toBe(
|
||||
'afc163',
|
||||
);
|
||||
wrapper.setProps({ suggestions: ['yesmeck', 'yiminghe', 'lucy'] });
|
||||
jest.runAllTimers();
|
||||
expect(container.getDOMNode().querySelectorAll('.ant-mention-dropdown-item').length).toBe(3);
|
||||
expect(container.getDOMNode().querySelectorAll('.ant-mention-dropdown-item')[0].innerHTML).toBe(
|
||||
'yesmeck',
|
||||
);
|
||||
});
|
||||
|
||||
it('select item', () => {
|
||||
const onChange = jest.fn();
|
||||
const onSelect = jest.fn();
|
||||
const wrapper = mount(
|
||||
<Mention suggestions={['afc163', 'raohai']} onChange={onChange} onSelect={onSelect} />,
|
||||
);
|
||||
wrapper.find('DraftEditorContents').simulate('focus');
|
||||
const ed = wrapper.find('.public-DraftEditor-content');
|
||||
ed.simulate('beforeInput', { data: '@' });
|
||||
jest.runAllTimers();
|
||||
expect(onChange).toHaveBeenCalled();
|
||||
expect(onSelect).not.toHaveBeenCalled();
|
||||
wrapper
|
||||
.find('.ant-mention-dropdown-item')
|
||||
.at(0)
|
||||
.simulate('mouseDown');
|
||||
wrapper
|
||||
.find('.ant-mention-dropdown-item')
|
||||
.at(0)
|
||||
.simulate('mouseUp');
|
||||
wrapper
|
||||
.find('.ant-mention-dropdown-item')
|
||||
.at(0)
|
||||
.simulate('click');
|
||||
jest.runAllTimers();
|
||||
expect(onSelect).toHaveBeenCalled();
|
||||
expect(wrapper.find('.public-DraftStyleDefault-block').text()).toBe('@afc163 ');
|
||||
});
|
||||
|
||||
it('defaultSuggestion filter', () => {
|
||||
const wrapper = mount(<Mention defaultSuggestions={['light', 'bamboo']} />);
|
||||
|
||||
wrapper.find('DraftEditorContents').simulate('focus');
|
||||
const ed = wrapper.find('.public-DraftEditor-content');
|
||||
ed.simulate('beforeInput', { data: '@b' });
|
||||
jest.runAllTimers();
|
||||
|
||||
const items = wrapper.find('div.ant-mention-dropdown-item');
|
||||
expect(items.length).toBe(1);
|
||||
expect(items.at(0).props().children).toBe('bamboo');
|
||||
});
|
||||
|
||||
it('check filteredSuggestions', () => {
|
||||
const wrapper = mount(
|
||||
<Mention defaultSuggestions={[<Mention.Nav key="light" value="light" />]} />,
|
||||
);
|
||||
wrapper.find('DraftEditorContents').simulate('focus');
|
||||
const ed = wrapper.find('.public-DraftEditor-content');
|
||||
ed.simulate('beforeInput', { data: '@l' });
|
||||
jest.runAllTimers();
|
||||
const items = wrapper.find('div.ant-mention-dropdown-item');
|
||||
expect(items.length).toBe(1);
|
||||
expect(items.at(0).props().value).toBe('light');
|
||||
});
|
||||
});
|
||||
@ -1,59 +0,0 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 异步加载
|
||||
en-US: Asynchronous loading
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
匹配内容列表为异步返回时。
|
||||
|
||||
## en-US
|
||||
|
||||
async
|
||||
|
||||
```jsx
|
||||
import { Mention } from 'antd';
|
||||
|
||||
const users = ['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai'];
|
||||
|
||||
class AsyncMention extends React.Component {
|
||||
state = {
|
||||
suggestions: [],
|
||||
loading: false,
|
||||
};
|
||||
|
||||
fetchSuggestions = (value, callback) => {
|
||||
setTimeout(() => {
|
||||
callback(users.filter(item => item.indexOf(value) !== -1));
|
||||
}, 500);
|
||||
};
|
||||
|
||||
onSearchChange = value => {
|
||||
this.fetchSuggestions(value, suggestions => {
|
||||
this.setState({
|
||||
suggestions,
|
||||
loading: false,
|
||||
});
|
||||
});
|
||||
this.setState({
|
||||
loading: true,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { suggestions, loading } = this.state;
|
||||
return (
|
||||
<Mention
|
||||
style={{ width: '100%' }}
|
||||
loading={loading}
|
||||
suggestions={suggestions}
|
||||
onSearchChange={this.onSearchChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<AsyncMention />, mountNode);
|
||||
```
|
||||
@ -1,93 +0,0 @@
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 头像
|
||||
en-US: Icon Image
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
自定义建议（含头像）
|
||||
|
||||
注意，自定义建议时，onSearchChange 必须不能为空。
|
||||
|
||||
## en-US
|
||||
|
||||
Customize suggestions.
|
||||
|
||||
```jsx
|
||||
import { Mention, Avatar } from 'antd';
|
||||
|
||||
const { Nav } = Mention;
|
||||
|
||||
const webFrameworks = [
|
||||
{
|
||||
name: 'React',
|
||||
type: 'JavaScript',
|
||||
icon: 'https://zos.alipayobjects.com/rmsportal/LFIeMPzdLcLnEUe.svg',
|
||||
},
|
||||
{
|
||||
name: 'Angular',
|
||||
type: 'JavaScript',
|
||||
icon: 'https://zos.alipayobjects.com/rmsportal/PJTbxSvzYWjDZnJ.png',
|
||||
},
|
||||
{
|
||||
name: 'Dva',
|
||||
type: 'Javascript',
|
||||
icon: 'https://zos.alipayobjects.com/rmsportal/EYPwSeEJKxDtVxI.png',
|
||||
},
|
||||
{
|
||||
name: 'Flask',
|
||||
type: 'Python',
|
||||
icon: 'https://zos.alipayobjects.com/rmsportal/xaypBUijfnpAlXE.png',
|
||||
},
|
||||
];
|
||||
|
||||
class CustomNavMention extends React.Component {
|
||||
state = {
|
||||
suggestions: [],
|
||||
};
|
||||
|
||||
onSearchChange = value => {
|
||||
const searchValue = value.toLowerCase();
|
||||
const filtered = webFrameworks.filter(
|
||||
item => item.name.toLowerCase().indexOf(searchValue) !== -1,
|
||||
);
|
||||
const suggestions = filtered.map(suggestion => (
|
||||
<Nav
|
||||
value={suggestion.name}
|
||||
data={suggestion}
|
||||
disabled={suggestion.disabled}
|
||||
key="mention-avatar"
|
||||
>
|
||||
<Avatar
|
||||
src={suggestion.icon}
|
||||
size="small"
|
||||
style={{
|
||||
width: 14,
|
||||
height: 14,
|
||||
marginRight: 8,
|
||||
top: -1,
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
{suggestion.name} - {suggestion.type}
|
||||
</Nav>
|
||||
));
|
||||
this.setState({ suggestions });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { suggestions } = this.state;
|
||||
return (
|
||||
<Mention
|
||||
style={{ width: '100%' }}
|
||||
suggestions={suggestions}
|
||||
onSearchChange={this.onSearchChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<CustomNavMention />, mountNode);
|
||||
```
|
||||
@ -1,39 +0,0 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本使用
|
||||
en-US: Basic
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
基本使用
|
||||
|
||||
## en-US
|
||||
|
||||
Basic usage.
|
||||
|
||||
```jsx
|
||||
import { Mention } from 'antd';
|
||||
|
||||
const { toString, toContentState } = Mention;
|
||||
|
||||
function onChange(contentState) {
|
||||
console.log(toString(contentState));
|
||||
}
|
||||
|
||||
function onSelect(suggestion) {
|
||||
console.log('onSelect', suggestion);
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<Mention
|
||||
style={{ width: '100%' }}
|
||||
onChange={onChange}
|
||||
defaultValue={toContentState('@afc163')}
|
||||
defaultSuggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
|
||||
onSelect={onSelect}
|
||||
/>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user