mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-30 06:09:34 +08:00
Merge pull request #19304 from ant-design/master
chore: Merge master into feature
This commit is contained in:
偏右
GitHub
commit
cbdbb6dd30
@ -184,6 +184,7 @@ jobs:
|
||||
command: npm test -- -w 1 -u
|
||||
environment:
|
||||
LIB_DIR: dist
|
||||
REACT: 15
|
||||
|
||||
test_lib_15:
|
||||
<<: *container_config
|
||||
@ -196,6 +197,7 @@ jobs:
|
||||
command: npm test -- -w 1 -u
|
||||
environment:
|
||||
LIB_DIR: lib
|
||||
REACT: 15
|
||||
|
||||
test_es_15:
|
||||
<<: *container_config
|
||||
@ -208,6 +210,7 @@ jobs:
|
||||
command: npm test -- -w 1 -u
|
||||
environment:
|
||||
LIB_DIR: es
|
||||
REACT: 15
|
||||
|
||||
test_dom_15:
|
||||
<<: *container_config
|
||||
@ -216,7 +219,10 @@ jobs:
|
||||
- checkout
|
||||
- *attach_workspace
|
||||
- *install_react
|
||||
- run: npm test -- -w 1 -u
|
||||
- run:
|
||||
command: npm test -- -w 1 -u
|
||||
environment:
|
||||
REACT: 15
|
||||
|
||||
test_node_15:
|
||||
<<: *container_config
|
||||
@ -225,7 +231,10 @@ jobs:
|
||||
- checkout
|
||||
- *attach_workspace
|
||||
- *install_react
|
||||
- run: npm run test-node -- -w 1 -u
|
||||
- run:
|
||||
command: npm run test-node -- -w 1 -u
|
||||
environment:
|
||||
REACT: 15
|
||||
|
||||
check_metadata:
|
||||
<<: *container_config
|
||||
|
||||
19
.github/workflows/nodejs.yml
vendored
19
.github/workflows/nodejs.yml
vendored
@ -1,19 +0,0 @@
|
||||
name: Node CI
|
||||
|
||||
on: [push]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@master
|
||||
- name: Use Node.js 10.x
|
||||
uses: actions/setup-node@v1
|
||||
with:
|
||||
version: 10.x
|
||||
- name: npm install, build, and test
|
||||
run: |
|
||||
npm install
|
||||
npm run test-all
|
||||
18
.github/workflows/test.yml
vendored
Normal file
18
.github/workflows/test.yml
vendored
Normal file
@ -0,0 +1,18 @@
|
||||
name: test
|
||||
|
||||
on: [push]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@master
|
||||
|
||||
- name: install
|
||||
run: npm install
|
||||
|
||||
- name: test
|
||||
run: npm run test-all
|
||||
22
.jest.site.js
Normal file
22
.jest.site.js
Normal file
@ -0,0 +1,22 @@
|
||||
const { moduleNameMapper, transformIgnorePatterns } = require('./.jest');
|
||||
|
||||
// jest config for server render environment
|
||||
module.exports = {
|
||||
moduleFileExtensions: ['ts', 'tsx', 'js', 'md'],
|
||||
moduleNameMapper,
|
||||
transform: {
|
||||
'\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
|
||||
'\\.js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
|
||||
'\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
|
||||
'\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
|
||||
},
|
||||
testRegex: 'check-site\\.js$',
|
||||
testEnvironment: 'node',
|
||||
transformIgnorePatterns,
|
||||
snapshotSerializers: ['enzyme-to-json/serializer'],
|
||||
globals: {
|
||||
'ts-jest': {
|
||||
tsConfigFile: './tsconfig.test.json',
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -15,6 +15,66 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 3.24.2
|
||||
|
||||
`2019-10-19`
|
||||
|
||||
- 🐞 Fix Table `scroll={{ x: 'max-content' }}` rendered without scrollbar problem in Chrome. [#19284](https://github.com/ant-design/ant-design/pull/19284)
|
||||
- 🐞 Fix Table crash when passing `column.filterDropdown` as new prop. [#19302](https://github.com/ant-design/ant-design/pull/19302)
|
||||
- 🐞 Fix Upload `download` button trigger preview unexpectedly. [#19268](https://github.com/ant-design/ant-design/pull/19268) [@qq645381995](https://github.com/qq645381995)
|
||||
- 🐞 Fix Comment long author name breaks on small screen. [#19272](https://github.com/ant-design/ant-design/pull/19272) [@rayronvictor](https://github.com/rayronvictor)
|
||||
- Typescript
|
||||
- 🐞 Improve RangePicker `value` types. [#19300](https://github.com/ant-design/ant-design/pull/19300) [@neung123](https://github.com/neung123)
|
||||
- 🐞 Improve Select `mode` types. [#19286](https://github.com/ant-design/ant-design/pull/19286) [@wleven](https://github.com/wleven)
|
||||
- 🐞 Improve Upload `customRequest` types. [#19278](https://github.com/ant-design/ant-design/pull/19278) [@broder](https://github.com/broder)
|
||||
|
||||
## 3.24.1
|
||||
|
||||
`2019-10-17`
|
||||
|
||||
- 🐞 Fix Table throw `React.createRef is not a function error` in old version of React . [#19262](https://github.com/ant-design/ant-design/pull/19262)
|
||||
- 🐞 Fix Table TypeScript definition missing Column and ColumnGroup. [#19251](https://github.com/ant-design/ant-design/pull/19251)
|
||||
|
||||
## 3.24.0
|
||||
|
||||
`2019-10-16`
|
||||
|
||||
- 🔥 Promote [Yuque](https://www.yuque.com/?chInfo=ch_antd) on home page.
|
||||
- Table
|
||||
- 🌟 Added `tableLayout` property for `table-layout` attribute. And using `tableLayout="fixed"` by default in scroll table to resolve align issue caused by cell content. [#17284](https://github.com/ant-design/ant-design/pull/17284)
|
||||
- 🌟 Added `column.ellipsis` to ellipsize cell content.
|
||||
- 🌟 Added the `scroll.scrollToFirstRowOnChange` property to set whether to scroll to the top of the table after page changing. [#18726](https://github.com/ant-design/ant-design/pull/18726)
|
||||
- 🌟 `filterDropdown` added a `visible` parameter to get the display state of the dropdown box. [#17614](https://github.com/ant-design/ant-design/pull/17614) [@sedx](https://github.com/ant-design/ant-design/pull/17614)
|
||||
- 🌟 `title` added a `sortColumn` parameter to get the currently sorted column. [#19012](https://github.com/ant-design/ant-design/pull/19012) [@swillis12](https://github.com/swillis12)
|
||||
- 🌟 The `sorter` parameter of `onChange` will always contain `column` information when sorting. [#19226](https://github.com/ant-design/ant-design/pull/19226)
|
||||
- 🐞 Fix Table filter submenu checkbox margin. [#e1a4f28](https://github.com/ant-design/ant-design/commit/e1a4f2891e3c35ae26495432bd2d288d4d81064a)
|
||||
- 🌟 Anchor added a `onChange` attribute to listen for changes to anchor links. [#18715](https://github.com/ant-design/ant-design/pull/18715)
|
||||
- Upload
|
||||
- 🌟 Added `showDownloadIcon` attribute to display download icon. [#18664](https://github.com/ant-design/ant-design/pull/18664) [@qq645381995](https://github.com/qq645381995)
|
||||
- 🌟 Support for `onRemove` control of upload interrupts. [#18937](https://github.com/ant-design/ant-design/pull/18937) [@ladjzero](https://github.com/ladjzero)
|
||||
- 🌟 Input.Search added a `loading` property to show the state in the load. [#18771](https://github.com/ant-design/ant-design/pull/18771)
|
||||
- 🌟 Grid's `gutter` property added support for vertical spacing. Now you can set an array for `gutter` and the second value of the array for vertical spacing. [#18979](https://github.com/ant-design/ant-design/pull/18979)
|
||||
- 🌟 message added support for updating content with a unique key. [#18678](https://github.com/ant-design/ant-design/pull/18678)
|
||||
- 🌟 Layout added a `zeroWidthTriggerStyle` property to control the style of the special `trigger` that appears when `collapsedWidth` is `0`. [#19079](https://github.com/ant-design/ant-design/pull/19079)
|
||||
- 🌟 Drawer added the `drawerStyle` and `headerStyle` properties. [#19109](https://github.com/ant-design/ant-design/pull/19109)
|
||||
- PageHeader
|
||||
- 💄 Redesigned. [#19100](https://github.com/ant-design/ant-design/pull/19100)
|
||||
- 🌟 Added `ghost` property to set whether white background is needed. [#19100](https://github.com/ant-design/ant-design/pull/19100)
|
||||
- ConfigProvider
|
||||
- 🌟 Added `pageHeader` to globally control the style of PageHeader. [#19100](https://github.com/ant-design/ant-design/pull/19100)
|
||||
- 🐞 Fixed the issue that `moment` can't be tree-shark. [#19115](https://github.com/ant-design/ant-design/pull/19115)
|
||||
- 🐞 Fixed the issue that the `removeIcon` and `clearIcon` properties of TreeSelect didn't work. [#18949](https://github.com/ant-design/ant-design/pull/18949)
|
||||
- 🐞 Fixed the issue that the `switcherIcon` does not take effect after the Tree setting `showLine`. [#18829](https://github.com/ant-design/ant-design/pull/18829) [@MrHeer](https://github.com/MrHeer)
|
||||
- 🐞 Fixed the issue that the Slider component set the handle size and positioned incorrectly. [#19120](https://github.com/ant-design/ant-design/pull/19120)
|
||||
- Collapse
|
||||
- 🐞 Fix icon styles under IE 11. [#19135](https://github.com/ant-design/ant-design/pull/19135) [@GBcrimson](https://github.com/GBcrimson)
|
||||
- 🐞 Keep `className` given to `expandIcon`. [#19160](https://github.com/ant-design/ant-design/pull/19160) [@gpetrioli](https://github.com/gpetrioli)
|
||||
- 🐞 Fixed the issue that `defaultExpandAll` does not take effect when Tree.DirectoryTree component passed `treeData`. [#19148](https://github.com/ant-design/ant-design/pull/19148)
|
||||
- 🐞 Fixed the issue with some of the Menu styles under Dropdown. [#19150](https://github.com/ant-design/ant-design/pull/19150)
|
||||
- 🐞 Fixed Cascader's `placeholder` internationalization error. [#19227](https://github.com/ant-design/ant-design/pull/19227) [@kagawagao](https://github.com/kagawagao)
|
||||
- 🌟 Added less variables `@typography-title-margin-top`, `@typography-title-margin-bottom`. [#18746](https://github.com/ant-design/ant-design/pull/18746)
|
||||
- 🗑 Discard the `autosize` property of Input.TextArea, use `autoSize` instead. [#19177](https://github.com/ant-design/ant-design/pull/19177)
|
||||
|
||||
## 3.23.6
|
||||
|
||||
`2019-10-05`
|
||||
|
||||
@ -15,6 +15,66 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 3.24.2
|
||||
|
||||
`2019-10-19`
|
||||
|
||||
- 🐞 修复 Table `scroll.x` 设置 `max-content` 无效导致横向滚动消失的问题。[#19284](https://github.com/ant-design/ant-design/pull/19284)
|
||||
- 🐞 修复 Table 将 `column.filterDropdown` 作为新属性设置时报错的问题。[#19302](https://github.com/ant-design/ant-design/pull/19302)
|
||||
- 🐞 Fix Upload 点击下载按钮会触发预览的问题。[#19268](https://github.com/ant-design/ant-design/pull/19268) [@qq645381995](https://github.com/qq645381995)
|
||||
- 🐞 修复 Comment 长作者名在小屏幕上破坏布局的问题。[#19272](https://github.com/ant-design/ant-design/pull/19272) [@rayronvictor](https://github.com/rayronvictor)
|
||||
- Typescript
|
||||
- 🐞 优化 RangePicker `value` 属性定义。[#19300](https://github.com/ant-design/ant-design/pull/19300) [@neung123](https://github.com/neung123)
|
||||
- 🐞 优化 Select `mode` 属性定义。[#19286](https://github.com/ant-design/ant-design/pull/19286) [@wleven](https://github.com/wleven)
|
||||
- 🐞 优化 Upload `customRequest` 属性定义。[#19278](https://github.com/ant-design/ant-design/pull/19278) [@broder](https://github.com/broder)
|
||||
|
||||
## 3.24.1
|
||||
|
||||
`2019-10-17`
|
||||
|
||||
- 🐞 修复 Table 在旧版 React 会报 `React.createRef is not a function` 的错误信息。[#19262](https://github.com/ant-design/ant-design/pull/19262)
|
||||
- 🐞 修复 Table TypeScript 定义丢失 Column 和 ColumnGroup 的问题。[#19251](https://github.com/ant-design/ant-design/pull/19251)
|
||||
|
||||
## 3.24.0
|
||||
|
||||
`2019-10-16`
|
||||
|
||||
- 🔥 首页新增[语雀](https://www.yuque.com/?chInfo=ch_antd)的推广链接。
|
||||
- Table
|
||||
- 🌟 新增 `tableLayout` 属性，支持设置表格的 `table-layout` 布局，并在固定表头/列下默认开启 `tableLayout="fixed"`，解决因为表格自动根据内容排版造成的列对齐问题。[#17284](https://github.com/ant-design/ant-design/pull/17284)
|
||||
- 🌟 新增 `column.ellipsis` 支持单元格内容自动省略。
|
||||
- 🌟 新增 `scroll.scrollToFirstRowOnChange` 属性，用于设置在翻页后是否滚动到表格顶部。[#18726](https://github.com/ant-design/ant-design/pull/18726)
|
||||
- 🌟 `filterDropdown` 新增 `visible` 参数，用于获取下拉框的显示状态。[#17614](https://github.com/ant-design/ant-design/pull/17614) [@sedx](https://github.com/ant-design/ant-design/pull/17614)
|
||||
- 🌟 `title` 方法新增 `sortColumn` 参数，用于获取当前排序的列。[#19012](https://github.com/ant-design/ant-design/pull/19012) [@swillis12](https://github.com/swillis12)
|
||||
- 🌟 排序时 `onChange` 的 `sorter` 参数将始终包含 `column` 信息。[#19226](https://github.com/ant-design/ant-design/pull/19226)
|
||||
- 🐞 修复过滤下拉菜单的间距问题。[#e1a4f28](https://github.com/ant-design/ant-design/commit/e1a4f2891e3c35ae26495432bd2d288d4d81064a)
|
||||
- 🌟 Anchor 新增 `onChange` 属性，用于监听锚点链接的改变。[#18715](https://github.com/ant-design/ant-design/pull/18715)
|
||||
- Upload
|
||||
- 🌟 新增 `showDownloadIcon` 属性，用于展示下载图标。[#18664](https://github.com/ant-design/ant-design/pull/18664) [@qq645381995](https://github.com/qq645381995)
|
||||
- 🌟 支持 `onRemove` 对上传中断的控制。[#18937](https://github.com/ant-design/ant-design/pull/18937) [@ladjzero](https://github.com/ladjzero)
|
||||
- 🌟 Input.Search 新增 `loading` 属性，用于展示加载中的状态。[#18771](https://github.com/ant-design/ant-design/pull/18771)
|
||||
- 🌟 Grid 的 `gutter` 属性新增垂直间距的支持，现在你可以给 `gutter` 设置一个数组，数组的第二个值就表示垂直间距。[#18979](https://github.com/ant-design/ant-design/pull/18979)
|
||||
- 🌟 message 新增支持通过唯一的 `key` 来更新内容。[#18678](https://github.com/ant-design/ant-design/pull/18678)
|
||||
- 🌟 Layout 新增 `zeroWidthTriggerStyle` 属性以控制当 `collapsedWidth` 为 `0` 时，出现的特殊 `trigger` 的样式。[#19079](https://github.com/ant-design/ant-design/pull/19079)
|
||||
- 🌟 Drawer 新增 `drawerStyle` 和 `headerStyle` 属性。[#19109](https://github.com/ant-design/ant-design/pull/19109)
|
||||
- PageHeader
|
||||
- 💄 重新设计了样式 [#19100](https://github.com/ant-design/ant-design/pull/19100)
|
||||
- 🌟 新增 `ghost` 属性，用于设置是否需要白底背景。[#19100](https://github.com/ant-design/ant-design/pull/19100)
|
||||
- ConfigProvider
|
||||
- 🌟 新增 `pageHeader` 用于全局控制 PageHeader 的样式。[#19100](https://github.com/ant-design/ant-design/pull/19100)
|
||||
- 🐞 修复 moment 不能被 tree shaking 的问题。[#19115](https://github.com/ant-design/ant-design/pull/19115)
|
||||
- 🐞 修复 TreeSelect 的 `removeIcon` 和 `clearIcon` 属性不生效的问题。[#18949](https://github.com/ant-design/ant-design/pull/18949)
|
||||
- 🐞 修复 Tree 设置 `showLine` 后 `switcherIcon` 不生效的问题。[#18829](https://github.com/ant-design/ant-design/pull/18829) [@MrHeer](https://github.com/MrHeer)
|
||||
- 🐞 修复 Slider 组件设置 `handle` 大小后定位错误的问题。[#19120](https://github.com/ant-design/ant-design/pull/19120)
|
||||
- Collapse
|
||||
- 🐞 修复在 IE 11 下的图标样式。[#19135](https://github.com/ant-design/ant-design/pull/19135) [@GBcrimson](https://github.com/GBcrimson)
|
||||
- 🐞 修复 `expandIcon` 的 `className` 会被覆盖的问题。[#19160](https://github.com/ant-design/ant-design/pull/19160) [@gpetrioli](https://github.com/gpetrioli)
|
||||
- 🐞 修复 Tree.DirectoryTree 组件传入 `treeData` 时 `defaultExpandAll` 不生效的问题。[#19148](https://github.com/ant-design/ant-design/pull/19148)
|
||||
- 🐞 修复 Dropdown 下部分 Menu 样式错乱的问题。[#19150](https://github.com/ant-design/ant-design/pull/19150)
|
||||
- 🐞 修复 Cascader 的 `placeholder` 国际化错误。[#19227](https://github.com/ant-design/ant-design/pull/19227) [@kagawagao](https://github.com/kagawagao)
|
||||
- 🌟 新增 less 变量 `@typography-title-margin-top` 和 `@typography-title-margin-bottom`。[#18746](https://github.com/ant-design/ant-design/pull/18746)
|
||||
- 🗑 废弃 Input.TextArea 的 `autosize` 属性，请使用 `autoSize` 代替。[#19177](https://github.com/ant-design/ant-design/pull/19177)
|
||||
|
||||
## 3.23.6
|
||||
|
||||
`2019-10-05`
|
||||
|
||||
@ -952,7 +952,6 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
|
||||
},
|
||||
]
|
||||
}
|
||||
placeholder="Please select"
|
||||
popupClassName=""
|
||||
popupPlacement="bottomLeft"
|
||||
popupVisible={true}
|
||||
@ -1250,7 +1249,6 @@ exports[`Cascader should render not found content 1`] = `
|
||||
},
|
||||
]
|
||||
}
|
||||
placeholder="Please select"
|
||||
popupClassName=""
|
||||
popupPlacement="bottomLeft"
|
||||
popupVisible={true}
|
||||
@ -1578,7 +1576,6 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
|
||||
},
|
||||
]
|
||||
}
|
||||
placeholder="Please select"
|
||||
popupClassName=""
|
||||
popupPlacement="bottomLeft"
|
||||
popupVisible={true}
|
||||
|
||||
@ -491,4 +491,15 @@ describe('Cascader', () => {
|
||||
);
|
||||
expect(popupWrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('placeholder works correctly', () => {
|
||||
const wrapper = mount(<Cascader options={[]} />);
|
||||
expect(wrapper.find('input').prop('placeholder')).toBe('Please select');
|
||||
|
||||
const customPlaceholder = 'Custom placeholder';
|
||||
wrapper.setProps({
|
||||
placeholder: customPlaceholder,
|
||||
});
|
||||
expect(wrapper.find('input').prop('placeholder')).toBe(customPlaceholder);
|
||||
});
|
||||
});
|
||||
|
||||
@ -216,7 +216,6 @@ function warningValueNotExist(list: CascaderOptionType[], fieldNames: FieldNames
|
||||
|
||||
class Cascader extends React.Component<CascaderProps, CascaderState> {
|
||||
static defaultProps = {
|
||||
placeholder: 'Please select',
|
||||
transitionName: 'slide-up',
|
||||
popupPlacement: 'bottomLeft',
|
||||
options: [],
|
||||
@ -430,7 +429,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
|
||||
prefixCls: customizePrefixCls,
|
||||
inputPrefixCls: customizeInputPrefixCls,
|
||||
children,
|
||||
placeholder = locale.placeholder,
|
||||
placeholder = locale.placeholder || 'Please select',
|
||||
size,
|
||||
disabled,
|
||||
className,
|
||||
|
||||
@ -32,12 +32,12 @@
|
||||
|
||||
&-author {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 4px;
|
||||
font-size: @comment-font-size-base;
|
||||
& > a,
|
||||
& > span {
|
||||
height: 18px;
|
||||
padding-right: 8px;
|
||||
font-size: @comment-font-size-sm;
|
||||
line-height: 18px;
|
||||
|
||||
@ -7410,14 +7410,14 @@ exports[`ConfigProvider components InputNumber configProvider 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemin="-9007199254740991"
|
||||
class="config-input-number-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
aria-valuemin="-9007199254740991"
|
||||
autocomplete="off"
|
||||
class="config-input-number-input"
|
||||
min="-9007199254740991"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value=""
|
||||
/>
|
||||
@ -7488,14 +7488,14 @@ exports[`ConfigProvider components InputNumber normal 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemin="-9007199254740991"
|
||||
class="ant-input-number-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
aria-valuemin="-9007199254740991"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
min="-9007199254740991"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value=""
|
||||
/>
|
||||
@ -7566,14 +7566,14 @@ exports[`ConfigProvider components InputNumber prefixCls 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemin="-9007199254740991"
|
||||
class="prefix-InputNumber-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
aria-valuemin="-9007199254740991"
|
||||
autocomplete="off"
|
||||
class="prefix-InputNumber-input"
|
||||
min="-9007199254740991"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value=""
|
||||
/>
|
||||
@ -17396,60 +17396,60 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
|
||||
title="xxx.png"
|
||||
>
|
||||
xxx.png
|
||||
<span
|
||||
class="config-upload-list-item-card-actions "
|
||||
</span>
|
||||
<span
|
||||
class="config-upload-list-item-card-actions "
|
||||
>
|
||||
<a
|
||||
title="Download file"
|
||||
>
|
||||
<a
|
||||
<i
|
||||
aria-label="icon: download"
|
||||
class="anticon anticon-download"
|
||||
tabindex="-1"
|
||||
title="Download file"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: download"
|
||||
class="anticon anticon-download"
|
||||
tabindex="-1"
|
||||
title="Download file"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="download"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="download"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
<a
|
||||
<path
|
||||
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
<a
|
||||
title="Remove file"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: delete"
|
||||
class="anticon anticon-delete"
|
||||
tabindex="-1"
|
||||
title="Remove file"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: delete"
|
||||
class="anticon anticon-delete"
|
||||
tabindex="-1"
|
||||
title="Remove file"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
</span>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
@ -17499,60 +17499,60 @@ exports[`ConfigProvider components Upload normal 1`] = `
|
||||
title="xxx.png"
|
||||
>
|
||||
xxx.png
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions "
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions "
|
||||
>
|
||||
<a
|
||||
title="Download file"
|
||||
>
|
||||
<a
|
||||
<i
|
||||
aria-label="icon: download"
|
||||
class="anticon anticon-download"
|
||||
tabindex="-1"
|
||||
title="Download file"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: download"
|
||||
class="anticon anticon-download"
|
||||
tabindex="-1"
|
||||
title="Download file"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="download"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="download"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
<a
|
||||
<path
|
||||
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
<a
|
||||
title="Remove file"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: delete"
|
||||
class="anticon anticon-delete"
|
||||
tabindex="-1"
|
||||
title="Remove file"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: delete"
|
||||
class="anticon anticon-delete"
|
||||
tabindex="-1"
|
||||
title="Remove file"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
</span>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
@ -17602,60 +17602,60 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
|
||||
title="xxx.png"
|
||||
>
|
||||
xxx.png
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions "
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions "
|
||||
>
|
||||
<a
|
||||
title="Download file"
|
||||
>
|
||||
<a
|
||||
<i
|
||||
aria-label="icon: download"
|
||||
class="anticon anticon-download"
|
||||
tabindex="-1"
|
||||
title="Download file"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: download"
|
||||
class="anticon anticon-download"
|
||||
tabindex="-1"
|
||||
title="Download file"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="download"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="download"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
<a
|
||||
<path
|
||||
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
<a
|
||||
title="Remove file"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: delete"
|
||||
class="anticon anticon-delete"
|
||||
tabindex="-1"
|
||||
title="Remove file"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: delete"
|
||||
class="anticon anticon-delete"
|
||||
tabindex="-1"
|
||||
title="Remove file"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
</span>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -44,4 +44,4 @@ return (
|
||||
| getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | Function(triggerNode) | () => document.body | 3.11.0 |
|
||||
| locale | 语言包配置，语言包可到 [antd/es/locale](http://unpkg.com/antd/es/locale/) 目录下寻找 | object | - | 3.21.0 |
|
||||
| prefixCls | 设置统一样式前缀 | string | ant | 3.12.0 |
|
||||
| pageHeader | 统一设置 pageHeader 的 type，参考 [pageHeader](<(/components/page-header)>) | { ghost: boolean } | 'true' | 3.24.0 |
|
||||
| pageHeader | 统一设置 pageHeader 的 ghost，参考 [pageHeader](<(/components/page-header)>) | { ghost: boolean } | 'true' | 3.24.0 |
|
||||
|
||||
@ -63,6 +63,7 @@ export type RangePickerValue =
|
||||
| undefined[]
|
||||
| [moment.Moment]
|
||||
| [undefined, moment.Moment]
|
||||
| [moment.Moment, undefined]
|
||||
| [moment.Moment, moment.Moment];
|
||||
export type RangePickerPresetRange = RangePickerValue | (() => RangePickerValue);
|
||||
|
||||
|
||||
@ -237,6 +237,34 @@ exports[`renders ./components/dropdown/demo/item.md correctly 1`] = `
|
||||
</a>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/dropdown/demo/menu-full.md correctly 1`] = `
|
||||
<a
|
||||
class="ant-dropdown-link ant-dropdown-trigger"
|
||||
href="#"
|
||||
>
|
||||
Hover to check menu style
|
||||
<i
|
||||
aria-label="icon: down"
|
||||
class="anticon anticon-down"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/dropdown/demo/overlay-visible.md correctly 1`] = `
|
||||
<a
|
||||
class="ant-dropdown-link ant-dropdown-trigger"
|
||||
|
||||
83
components/dropdown/demo/menu-full.md
Normal file
83
components/dropdown/demo/menu-full.md
Normal file
@ -0,0 +1,83 @@
|
||||
---
|
||||
order: 100
|
||||
title:
|
||||
zh-CN: Menu 完整样式
|
||||
en-US: Menu full styles
|
||||
debug: true
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
此演示需要注意查看 Dropdown 内 Menu 的样式是否正常。[#19150](https://github.com/ant-design/ant-design/pull/19150)
|
||||
|
||||
## en-US
|
||||
|
||||
This demo was created for debugging Menu styles inside Dropdown. [#19150](https://github.com/ant-design/ant-design/pull/19150)
|
||||
|
||||
```jsx
|
||||
import { Menu, Dropdown, Icon } from 'antd';
|
||||
|
||||
const { SubMenu } = Menu;
|
||||
|
||||
const menu = (
|
||||
<Menu selectedKeys={['1']} openKeys={['sub1']}>
|
||||
<SubMenu
|
||||
key="sub1"
|
||||
title={
|
||||
<span>
|
||||
<Icon type="mail" />
|
||||
<span>Navigation One</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<Menu.ItemGroup key="g1" title="Item 1">
|
||||
<Menu.Item key="1">Option 1</Menu.Item>
|
||||
<Menu.Item key="2">Option 2</Menu.Item>
|
||||
</Menu.ItemGroup>
|
||||
<Menu.ItemGroup key="g2" title="Item 2">
|
||||
<Menu.Item key="3">Option 3</Menu.Item>
|
||||
<Menu.Item key="4">Option 4</Menu.Item>
|
||||
</Menu.ItemGroup>
|
||||
</SubMenu>
|
||||
<SubMenu
|
||||
key="sub2"
|
||||
title={
|
||||
<span>
|
||||
<Icon type="appstore" />
|
||||
<span>Navigation Two</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<Menu.Item key="5">Option 5</Menu.Item>
|
||||
<Menu.Item key="6">Option 6</Menu.Item>
|
||||
<SubMenu key="sub3" title="Submenu">
|
||||
<Menu.Item key="7">Option 7</Menu.Item>
|
||||
<Menu.Item key="8">Option 8</Menu.Item>
|
||||
</SubMenu>
|
||||
</SubMenu>
|
||||
<SubMenu
|
||||
key="sub4"
|
||||
title={
|
||||
<span>
|
||||
<Icon type="setting" />
|
||||
<span>Navigation Three</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<Menu.Item key="9">Option 9</Menu.Item>
|
||||
<Menu.Item key="10">Option 10</Menu.Item>
|
||||
<Menu.Item key="11">Option 11</Menu.Item>
|
||||
<Menu.Item key="12">Option 12</Menu.Item>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
ReactDOM.render(
|
||||
<Dropdown overlay={menu}>
|
||||
<a className="ant-dropdown-link" href="#">
|
||||
Hover to check menu style <Icon type="down" />
|
||||
</a>
|
||||
</Dropdown>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
@ -72,6 +72,16 @@
|
||||
> .@{dropdown-prefix-cls}-menu {
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-right: 0.3em;
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
&-item,
|
||||
@ -87,9 +97,10 @@
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
> .anticon:first-child {
|
||||
> span > .anticon:first-child {
|
||||
min-width: 12px;
|
||||
margin-right: 8px;
|
||||
font-size: @font-size-sm;
|
||||
}
|
||||
|
||||
> a {
|
||||
|
||||
@ -2385,14 +2385,14 @@ exports[`renders ./components/form/demo/style-check-debug.md correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemin="-9007199254740991"
|
||||
class="ant-input-number-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
aria-valuemin="-9007199254740991"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
min="-9007199254740991"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value=""
|
||||
/>
|
||||
@ -3244,13 +3244,12 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemax="10"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="3"
|
||||
class="ant-input-number-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
aria-valuemax="10"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="3"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
data-__field="[object Object]"
|
||||
@ -3258,6 +3257,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
id="validate_other_input-number"
|
||||
max="10"
|
||||
min="1"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="3"
|
||||
/>
|
||||
@ -5096,14 +5096,14 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemin="-9007199254740991"
|
||||
class="ant-input-number-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
aria-valuemin="-9007199254740991"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
min="-9007199254740991"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value=""
|
||||
/>
|
||||
@ -5227,17 +5227,17 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemax="12"
|
||||
aria-valuemin="8"
|
||||
aria-valuenow="11"
|
||||
class="ant-input-number-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
aria-valuemax="12"
|
||||
aria-valuemin="8"
|
||||
aria-valuenow="11"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
max="12"
|
||||
min="8"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="11"
|
||||
/>
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
|
||||
position: relative;
|
||||
top: -0.5px;
|
||||
margin: 0 8px 0 2px;
|
||||
margin: 0 @form-item-label-colon-margin-right 0 @form-item-label-colon-margin-left;
|
||||
}
|
||||
|
||||
&.@{form-prefix-cls}-item-no-colon::after {
|
||||
|
||||
@ -13,6 +13,8 @@ title:
|
||||
|
||||
如果需要垂直间距，可以写成数组形式 `[水平间距, 垂直间距]` `[16, { xs: 8, sm: 16, md: 24, lg: 32 }]`。
|
||||
|
||||
> 数组形式垂直间距在 `3.24.0` 之后支持。
|
||||
|
||||
## en-US
|
||||
|
||||
You can use the `gutter` property of `Row` as grid spacing, we recommend set it to `(16 + 8n) px`. (`n` stands for natural number.)
|
||||
@ -21,6 +23,8 @@ You can set it to a object like `{ xs: 8, sm: 16, md: 24, lg: 32 }` for responsi
|
||||
|
||||
You can use a array to set vertical spacing, `[horizontal, vertical]` `[16, { xs: 8, sm: 16, md: 24, lg: 32 }]`.
|
||||
|
||||
> vertical gutter was supported after `3.24.0`.
|
||||
|
||||
```jsx
|
||||
import { Row, Col } from 'antd';
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
`span` `pull` `push` `offset` `order` property can be embedded into `xs` `sm` `md` `lg` `xl` properties to use, where `xs = {6}` is equivalent to `xs = {{span: 6}}`.
|
||||
`span` `pull` `push` `offset` `order` property can be embedded into `xs` `sm` `md` `lg` `xl` properties to use, where `xs={6}` is equivalent to `xs={{span: 6}}`.
|
||||
|
||||
```jsx
|
||||
import { Row, Col } from 'antd';
|
||||
|
||||
@ -70,7 +70,7 @@ Following is a brief look at how it works:
|
||||
|
||||
- Establish a set of `column` in the horizontal space defined by `row` (abbreviated col)
|
||||
- Your content elements should be placed directly in the `col`, and only `col` should be placed directly in `row`
|
||||
- The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by `.col-8` (`span=8`).
|
||||
- The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by `<Col span={8} />`.
|
||||
- If the sum of `col` spans in a `row` are more than 24, then the overflowing `col` as a whole will start a new line arrangement.
|
||||
|
||||
## Flex layout
|
||||
@ -91,7 +91,7 @@ If the Ant Design grid layout component does not meet your needs, you can use th
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| align | the vertical alignment of the flex layout: `top` `middle` `bottom` | string | `top` | |
|
||||
| gutter | spacing between grids, could be a number or a object like `{ xs: 8, sm: 16, md: 24}`, or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` | number/object/array | 0 | |
|
||||
| gutter | spacing between grids, could be a number or a object like `{ xs: 8, sm: 16, md: 24}`. or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` (supported after `3.24.0`) | number/object/array | 0 | |
|
||||
| justify | horizontal arrangement of the flex layout: `start` `end` `center` `space-around` `space-between` | string | `start` | |
|
||||
| type | layout mode, optional `flex`, [browser support](http://caniuse.com/#search=flex) | string | | |
|
||||
|
||||
|
||||
@ -67,10 +67,10 @@ title: Grid
|
||||
|
||||
布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：
|
||||
|
||||
- 通过`row`在水平方向建立一组`column`（简写 col）
|
||||
- 你的内容应当放置于`col`内，并且，只有`col`可以作为`row`的直接元素
|
||||
- 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用`.col-8`来创建
|
||||
- 如果一个`row`中的`col`总和超过 24，那么多余的`col`会作为一个整体另起一行排列
|
||||
- 通过 `row` 在水平方向建立一组 `column`（简写 col）
|
||||
- 你的内容应当放置于 `col` 内，并且，只有 `col` 可以作为 `row` 的直接元素
|
||||
- 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 `<Col span={8} />` 来创建
|
||||
- 如果一个 `row` 中的 `col` 总和超过 24，那么多余的 `col` 会作为一个整体另起一行排列
|
||||
|
||||
## Flex 布局
|
||||
|
||||
@ -90,7 +90,7 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
|
||||
| 成员 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| align | flex 布局下的垂直对齐方式：`top` `middle` `bottom` | string | `top` | |
|
||||
| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`，或者使用数组形式同时设置`[水平间距, 垂直间距]` | number/object/array | 0 | |
|
||||
| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`。或者使用数组形式同时设置 `[水平间距, 垂直间距]`（`3.24.0 后支持`）。 | number/object/array | 0 | |
|
||||
| justify | flex 布局下的水平排列方式：`start` `end` `center` `space-around` `space-between` | string | `start` | |
|
||||
| type | 布局模式，可选 `flex`，[现代浏览器](http://caniuse.com/#search=flex) 下有效 | string | | |
|
||||
|
||||
|
||||
@ -63,17 +63,17 @@ exports[`renders ./components/input-number/demo/basic.md correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemax="10"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="3"
|
||||
class="ant-input-number-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
aria-valuemax="10"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="3"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
max="10"
|
||||
min="1"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="3"
|
||||
/>
|
||||
@ -144,16 +144,16 @@ exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemax="10"
|
||||
aria-valuemin="0"
|
||||
class="ant-input-number-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
aria-valuemax="10"
|
||||
aria-valuemin="0"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
max="10"
|
||||
min="0"
|
||||
role="spinbutton"
|
||||
step="0.1"
|
||||
value=""
|
||||
/>
|
||||
@ -225,18 +225,18 @@ exports[`renders ./components/input-number/demo/disabled.md correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemax="10"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="3"
|
||||
class="ant-input-number-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
aria-valuemax="10"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="3"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
disabled=""
|
||||
max="10"
|
||||
min="1"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="3"
|
||||
/>
|
||||
@ -321,15 +321,15 @@ exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemin="-9007199254740991"
|
||||
aria-valuenow="1000"
|
||||
class="ant-input-number-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
aria-valuemin="-9007199254740991"
|
||||
aria-valuenow="1000"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
min="-9007199254740991"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="$ 1,000"
|
||||
/>
|
||||
@ -397,17 +397,17 @@ exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="100"
|
||||
class="ant-input-number-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="100"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
max="100"
|
||||
min="0"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="100%"
|
||||
/>
|
||||
@ -480,17 +480,17 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemax="100000"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="3"
|
||||
class="ant-input-number-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
aria-valuemax="100000"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="3"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
max="100000"
|
||||
min="1"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="3"
|
||||
/>
|
||||
@ -558,17 +558,17 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemax="100000"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="3"
|
||||
class="ant-input-number-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
aria-valuemax="100000"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="3"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
max="100000"
|
||||
min="1"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="3"
|
||||
/>
|
||||
@ -636,17 +636,17 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemax="100000"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="3"
|
||||
class="ant-input-number-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
aria-valuemax="100000"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="3"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
max="100000"
|
||||
min="1"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="3"
|
||||
/>
|
||||
|
||||
@ -342,14 +342,14 @@ exports[`renders ./components/input/demo/align.md correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemin="-9007199254740991"
|
||||
class="ant-input-number-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
aria-valuemin="-9007199254740991"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
min="-9007199254740991"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value=""
|
||||
/>
|
||||
@ -1105,14 +1105,14 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemin="-9007199254740991"
|
||||
class="ant-input-number-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
aria-valuemin="-9007199254740991"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
min="-9007199254740991"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value=""
|
||||
/>
|
||||
|
||||
@ -9,10 +9,14 @@ title:
|
||||
|
||||
`autoSize` 属性适用于 `textarea` 节点，并且只有高度会自动变化。另外 `autoSize` 可以设定为一个对象，指定最小行数和最大行数。
|
||||
|
||||
> `3.24.0` 后 `autosize` 被废弃，请使用 `autoSize`。
|
||||
|
||||
## en-US
|
||||
|
||||
`autoSize` prop for a `textarea` type of `Input` makes the height to automatically adjust based on the content. An options object can be provided to `autoSize` to specify the minimum and maximum number of lines the textarea will automatically adjust.
|
||||
|
||||
> `autosize` is deprecated after `3.24.0`, please use `autoSize`.
|
||||
|
||||
```jsx
|
||||
import { Input } from 'antd';
|
||||
|
||||
|
||||
@ -41,7 +41,7 @@ The rest of the props of Input are exactly the same as the original [input](http
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| autoSize | Height autosize feature, can be set to `true|false` or an object `{ minRows: 2, maxRows: 6 }` | boolean\|object | false | |
|
||||
| autoSize | Height autosize feature, can be set to `true|false` or an object `{ minRows: 2, maxRows: 6 }`. `autosize` is deprecated after `3.24.0`, please use `autoSize`. | boolean\|object | false | 3.24.0 |
|
||||
| defaultValue | The initial input content | string | | |
|
||||
| value | The input content value | string | | |
|
||||
| onPressEnter | The callback function that is triggered when Enter key is pressed. | function(e) | | |
|
||||
|
||||
@ -42,7 +42,7 @@ Input 的其他属性和 React 自带的 [input](https://facebook.github.io/reac
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| autoSize | 自适应内容高度，可设置为 `true|false` 或对象：`{ minRows: 2, maxRows: 6 }` | boolean\|object | false | |
|
||||
| autoSize | 自适应内容高度，可设置为 `true|false` 或对象：`{ minRows: 2, maxRows: 6 }`。`3.24.0` 后 `autosize` 被废弃，请使用 `autoSize`。 | boolean\|object | false | 3.24.0 |
|
||||
| defaultValue | 输入框默认内容 | string | | |
|
||||
| value | 输入框内容 | string | | |
|
||||
| onPressEnter | 按下回车的回调 | function(e) | | |
|
||||
|
||||
@ -18,7 +18,7 @@ It can also be used as inter-page navigation when it is needed to make the user
|
||||
| --- | --- | --- | --- | --- |
|
||||
| title | custom title text | ReactNode | - | 3.14.0 |
|
||||
| subTitle | custom subTitle text | ReactNode | - | 3.14.0 |
|
||||
| type | pageHeader type, will change background color | boolean | true | 3.24.0 |
|
||||
| ghost | pageHeader type, will change background color | boolean | true | 3.24.0 |
|
||||
| avatar | Avatar next to the title bar | [avatar props](/components/avatar/) | - | 3.22.0 |
|
||||
| backIcon | custom back icon, if false the back icon will not be displayed | ReactNode | `<Icon type="arrow-left" />` | 3.14.0 |
|
||||
| tags | Tag list next to title | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | 3.14.0 |
|
||||
|
||||
@ -51,10 +51,18 @@ export interface LabeledValue {
|
||||
|
||||
export type SelectValue = string | string[] | number | number[] | LabeledValue | LabeledValue[];
|
||||
|
||||
const ModeOptions = tuple(
|
||||
'default',
|
||||
'multiple',
|
||||
'tags',
|
||||
'combobox',
|
||||
'SECRET_COMBOBOX_MODE_DO_NOT_USE',
|
||||
);
|
||||
export type ModeOption = (typeof ModeOptions)[number];
|
||||
export interface SelectProps<T = SelectValue> extends AbstractSelectProps {
|
||||
value?: T;
|
||||
defaultValue?: T;
|
||||
mode?: 'default' | 'multiple' | 'tags' | 'combobox' | string;
|
||||
mode?: ModeOption;
|
||||
optionLabelProp?: string;
|
||||
firstActiveValue?: string | string[];
|
||||
onChange?: (value: T, option: React.ReactElement<any> | React.ReactElement<any>[]) => void;
|
||||
@ -114,7 +122,7 @@ export default class Select<T = SelectValue> extends React.Component<SelectProps
|
||||
|
||||
static OptGroup = OptGroup as React.ClassicComponentClass<OptGroupProps>;
|
||||
|
||||
static SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
|
||||
static SECRET_COMBOBOX_MODE_DO_NOT_USE: ModeOption = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
|
||||
|
||||
static defaultProps = {
|
||||
showSearch: false,
|
||||
|
||||
@ -325,17 +325,17 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemax="20"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
class="ant-input-number-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
aria-valuemax="20"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
max="20"
|
||||
min="1"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="1"
|
||||
/>
|
||||
@ -443,17 +443,17 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-valuemax="1"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
class="ant-input-number-input-wrap"
|
||||
role="spinbutton"
|
||||
>
|
||||
<input
|
||||
aria-valuemax="1"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="0"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
max="1"
|
||||
min="0"
|
||||
role="spinbutton"
|
||||
step="0.01"
|
||||
value="0.00"
|
||||
/>
|
||||
|
||||
@ -7,3 +7,4 @@
|
||||
@import 'motion';
|
||||
@import 'reset';
|
||||
@import 'operation-unit';
|
||||
@import 'typography';
|
||||
|
||||
49
components/style/mixins/typography.less
Normal file
49
components/style/mixins/typography.less
Normal file
@ -0,0 +1,49 @@
|
||||
// =============== Common ===============
|
||||
.typography-paragraph() {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.typography-title(@fontSize; @fontWeight; @lineHeight; @headingColor; @headingMarginBottom;) {
|
||||
margin-bottom: @headingMarginBottom;
|
||||
color: @headingColor;
|
||||
font-weight: @fontWeight;
|
||||
font-size: @fontSize;
|
||||
line-height: @lineHeight;
|
||||
}
|
||||
|
||||
.typography-title-1() {
|
||||
.typography-title(
|
||||
@heading-1-size,
|
||||
@typography-title-font-weight,
|
||||
1.23,
|
||||
@heading-color,
|
||||
@typography-title-margin-bottom
|
||||
);
|
||||
}
|
||||
.typography-title-2() {
|
||||
.typography-title(
|
||||
@heading-2-size,
|
||||
@typography-title-font-weight,
|
||||
1.35,
|
||||
@heading-color,
|
||||
@typography-title-margin-bottom
|
||||
);
|
||||
}
|
||||
.typography-title-3() {
|
||||
.typography-title(
|
||||
@heading-3-size,
|
||||
@typography-title-font-weight,
|
||||
1.35,
|
||||
@heading-color,
|
||||
@typography-title-margin-bottom
|
||||
);
|
||||
}
|
||||
.typography-title-4() {
|
||||
.typography-title(
|
||||
@heading-4-size,
|
||||
@typography-title-font-weight,
|
||||
1.4,
|
||||
@heading-color,
|
||||
@typography-title-margin-bottom
|
||||
);
|
||||
}
|
||||
@ -302,6 +302,8 @@
|
||||
@form-item-trailing-colon: true;
|
||||
@form-vertical-label-padding: 0 0 8px;
|
||||
@form-vertical-label-margin: 0;
|
||||
@form-item-label-colon-margin-right: 8px;
|
||||
@form-item-label-colon-margin-left: 2px;
|
||||
@form-error-input-bg: @input-bg;
|
||||
|
||||
// Input
|
||||
@ -682,3 +684,5 @@
|
||||
// Typography
|
||||
// ---
|
||||
@typography-title-font-weight: 600;
|
||||
@typography-title-margin-top: 1.2em;
|
||||
@typography-title-margin-bottom: 0.5em;
|
||||
|
||||
@ -239,11 +239,10 @@ class Table<T> extends React.Component<TableProps<T>, TableState<T>> {
|
||||
|
||||
row: React.ComponentType<any>;
|
||||
|
||||
rcTable: React.RefObject<any>;
|
||||
rcTable: any;
|
||||
|
||||
constructor(props: TableProps<T>) {
|
||||
super(props);
|
||||
this.rcTable = React.createRef();
|
||||
|
||||
const { expandedRowRender, columns: columnsProp = [] } = props;
|
||||
|
||||
@ -286,6 +285,10 @@ class Table<T> extends React.Component<TableProps<T>, TableState<T>> {
|
||||
}
|
||||
}
|
||||
|
||||
setTableRef = (table: any) => {
|
||||
this.rcTable = table;
|
||||
};
|
||||
|
||||
getCheckboxPropsByItem = (item: T, index: number) => {
|
||||
const rowSelection = getRowSelection(this.props);
|
||||
if (!rowSelection.getCheckboxProps) {
|
||||
@ -535,7 +538,7 @@ class Table<T> extends React.Component<TableProps<T>, TableState<T>> {
|
||||
|
||||
generatePopupContainerFunc = (getPopupContainer: TableProps<T>['getPopupContainer']) => {
|
||||
const { scroll } = this.props;
|
||||
const table = this.rcTable.current;
|
||||
const table = this.rcTable;
|
||||
if (getPopupContainer) {
|
||||
return getPopupContainer;
|
||||
}
|
||||
@ -547,7 +550,7 @@ class Table<T> extends React.Component<TableProps<T>, TableState<T>> {
|
||||
const { scroll } = this.props;
|
||||
if (scroll && scroll.scrollToFirstRowOnChange !== false) {
|
||||
scrollTo(0, {
|
||||
getContainer: () => this.rcTable.current.bodyTable,
|
||||
getContainer: () => this.rcTable.bodyTable,
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -877,10 +880,13 @@ class Table<T> extends React.Component<TableProps<T>, TableState<T>> {
|
||||
if (onChange) {
|
||||
onChange.apply(
|
||||
null,
|
||||
this.prepareParamsArguments({
|
||||
...this.state,
|
||||
...newState,
|
||||
}),
|
||||
this.prepareParamsArguments(
|
||||
{
|
||||
...this.state,
|
||||
...newState,
|
||||
},
|
||||
column,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -898,18 +904,23 @@ class Table<T> extends React.Component<TableProps<T>, TableState<T>> {
|
||||
}
|
||||
|
||||
// Get pagination, filters, sorter
|
||||
prepareParamsArguments(state: any): PrepareParamsArgumentsReturn<T> {
|
||||
prepareParamsArguments(state: any, column?: ColumnProps<T>): PrepareParamsArgumentsReturn<T> {
|
||||
const pagination = { ...state.pagination };
|
||||
// remove useless handle function in Table.onChange
|
||||
delete pagination.onChange;
|
||||
delete pagination.onShowSizeChange;
|
||||
const filters = state.filters;
|
||||
const sorter: any = {};
|
||||
let currentColumn = column;
|
||||
if (state.sortColumn && state.sortOrder) {
|
||||
currentColumn = state.sortColumn;
|
||||
sorter.column = state.sortColumn;
|
||||
sorter.order = state.sortOrder;
|
||||
sorter.field = state.sortColumn.dataIndex;
|
||||
sorter.columnKey = getColumnKey(state.sortColumn);
|
||||
}
|
||||
|
||||
if (currentColumn) {
|
||||
sorter.field = currentColumn.dataIndex;
|
||||
sorter.columnKey = getColumnKey(currentColumn);
|
||||
}
|
||||
|
||||
const extra = {
|
||||
@ -1277,7 +1288,7 @@ class Table<T> extends React.Component<TableProps<T>, TableState<T>> {
|
||||
|
||||
return (
|
||||
<RcTable
|
||||
ref={this.rcTable}
|
||||
ref={this.setTableRef}
|
||||
key="table"
|
||||
expandIcon={this.renderExpandIcon(prefixCls)}
|
||||
{...restProps}
|
||||
@ -1353,45 +1364,42 @@ class Table<T> extends React.Component<TableProps<T>, TableState<T>> {
|
||||
}
|
||||
}
|
||||
|
||||
function withStore(
|
||||
WrappedComponent: typeof Table,
|
||||
): React.ComponentClass<Omit<TableProps<any>, keyof WithStore>> {
|
||||
class Component<T> extends React.Component<TableProps<T>> {
|
||||
static Column = Column;
|
||||
|
||||
static ColumnGroup = ColumnGroup;
|
||||
|
||||
store: Store;
|
||||
|
||||
CheckboxPropsCache: CheckboxPropsCache;
|
||||
|
||||
constructor(props: TableProps<T>) {
|
||||
super(props);
|
||||
|
||||
this.CheckboxPropsCache = {};
|
||||
|
||||
this.store = createStore({
|
||||
selectedRowKeys: getRowSelection(props).selectedRowKeys || [],
|
||||
selectionDirty: false,
|
||||
});
|
||||
}
|
||||
|
||||
setCheckboxPropsCache = (cache: CheckboxPropsCache) => (this.CheckboxPropsCache = cache);
|
||||
|
||||
render() {
|
||||
return (
|
||||
<WrappedComponent<T>
|
||||
{...this.props}
|
||||
store={this.store}
|
||||
checkboxPropsCache={this.CheckboxPropsCache}
|
||||
setCheckboxPropsCache={this.setCheckboxPropsCache}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
return Component;
|
||||
}
|
||||
|
||||
polyfill(Table);
|
||||
|
||||
export default withStore(Table);
|
||||
class StoreTable<T> extends React.Component<Omit<TableProps<T>, keyof WithStore>> {
|
||||
static displayName = 'withStore(Table)';
|
||||
|
||||
static Column = Column;
|
||||
|
||||
static ColumnGroup = ColumnGroup;
|
||||
|
||||
store: Store;
|
||||
|
||||
CheckboxPropsCache: CheckboxPropsCache;
|
||||
|
||||
constructor(props: TableProps<T>) {
|
||||
super(props);
|
||||
|
||||
this.CheckboxPropsCache = {};
|
||||
|
||||
this.store = createStore({
|
||||
selectedRowKeys: getRowSelection(props).selectedRowKeys || [],
|
||||
selectionDirty: false,
|
||||
});
|
||||
}
|
||||
|
||||
setCheckboxPropsCache = (cache: CheckboxPropsCache) => (this.CheckboxPropsCache = cache);
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table<T>
|
||||
{...this.props}
|
||||
store={this.store}
|
||||
checkboxPropsCache={this.CheckboxPropsCache}
|
||||
setCheckboxPropsCache={this.setCheckboxPropsCache}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default StoreTable;
|
||||
|
||||
@ -43,7 +43,7 @@ describe('Table.filter', () => {
|
||||
];
|
||||
|
||||
const longData = [];
|
||||
for(let i = 0; i < 100; i += 1) {
|
||||
for (let i = 0; i < 100; i += 1) {
|
||||
longData.push({
|
||||
key: i.toString(),
|
||||
name: 'name',
|
||||
@ -854,11 +854,13 @@ describe('Table.filter', () => {
|
||||
|
||||
it('should reset pagination after filter', () => {
|
||||
const handleChange = jest.fn();
|
||||
const wrapper = mount(createTable({
|
||||
onChange: handleChange,
|
||||
dataSource: longData,
|
||||
pagination: true,
|
||||
}));
|
||||
const wrapper = mount(
|
||||
createTable({
|
||||
onChange: handleChange,
|
||||
dataSource: longData,
|
||||
pagination: true,
|
||||
}),
|
||||
);
|
||||
const dropdownWrapper = getDropdownWrapper(wrapper);
|
||||
|
||||
dropdownWrapper
|
||||
@ -883,13 +885,15 @@ describe('Table.filter', () => {
|
||||
|
||||
it('should keep pagination current after filter', () => {
|
||||
const handleChange = jest.fn();
|
||||
const wrapper = mount(createTable({
|
||||
onChange: handleChange,
|
||||
dataSource: longData,
|
||||
pagination: {
|
||||
current: 3,
|
||||
},
|
||||
}));
|
||||
const wrapper = mount(
|
||||
createTable({
|
||||
onChange: handleChange,
|
||||
dataSource: longData,
|
||||
pagination: {
|
||||
current: 3,
|
||||
},
|
||||
}),
|
||||
);
|
||||
expect(wrapper.find('.ant-pagination-item-active').text()).toBe('3');
|
||||
const dropdownWrapper = getDropdownWrapper(wrapper);
|
||||
|
||||
@ -912,4 +916,32 @@ describe('Table.filter', () => {
|
||||
);
|
||||
expect(wrapper.find('.ant-pagination-item-active').text()).toBe('3');
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/19274
|
||||
it('should not crash', () => {
|
||||
class TestTable extends React.Component {
|
||||
state = {
|
||||
cols: [],
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
this.setState({
|
||||
cols: [
|
||||
{
|
||||
title: 'test',
|
||||
itemKey: 'test',
|
||||
filterDropdown: 123,
|
||||
},
|
||||
],
|
||||
});
|
||||
};
|
||||
|
||||
render = () => {
|
||||
const { cols } = this.state;
|
||||
return <Table columns={cols} dataSource={[]} scroll={{ x: 1000 }} />;
|
||||
};
|
||||
}
|
||||
|
||||
mount(<TestTable />);
|
||||
});
|
||||
});
|
||||
|
||||
@ -145,8 +145,8 @@ describe('Table.sorter', () => {
|
||||
const sorter3 = handleChange.mock.calls[2][2];
|
||||
expect(sorter3.column).toBe(undefined);
|
||||
expect(sorter3.order).toBe(undefined);
|
||||
expect(sorter3.field).toBe(undefined);
|
||||
expect(sorter3.columnKey).toBe(undefined);
|
||||
expect(sorter3.field).toBe('name');
|
||||
expect(sorter3.columnKey).toBe('name');
|
||||
});
|
||||
|
||||
it('works with grouping columns in controlled mode', () => {
|
||||
|
||||
@ -11,7 +11,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table ant-table-default ant-table-scroll-position-left ant-table-layout-fixed"
|
||||
class="ant-table ant-table-default ant-table-scroll-position-left"
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
@ -484,7 +484,7 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table ant-table-default ant-table-scroll-position-left ant-table-layout-fixed"
|
||||
class="ant-table ant-table-default ant-table-scroll-position-left"
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
|
||||
@ -8816,17 +8816,17 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
|
||||
>
|
||||
<table
|
||||
class="ant-table-fixed"
|
||||
style="width:130%"
|
||||
style="width:calc(700px + 50%)"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style="width:100px;min-width:100px"
|
||||
/>
|
||||
<col
|
||||
style="width:200px;min-width:200px"
|
||||
style="width:150px;min-width:150px"
|
||||
/>
|
||||
<col
|
||||
style="width:200px;min-width:200px"
|
||||
style="width:150px;min-width:150px"
|
||||
/>
|
||||
<col
|
||||
style="width:100px;min-width:100px"
|
||||
@ -9156,17 +9156,17 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
|
||||
>
|
||||
<table
|
||||
class="ant-table-fixed"
|
||||
style="width:130%"
|
||||
style="width:calc(700px + 50%)"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style="width:100px;min-width:100px"
|
||||
/>
|
||||
<col
|
||||
style="width:200px;min-width:200px"
|
||||
style="width:150px;min-width:150px"
|
||||
/>
|
||||
<col
|
||||
style="width:200px;min-width:200px"
|
||||
style="width:150px;min-width:150px"
|
||||
/>
|
||||
<col
|
||||
style="width:100px;min-width:100px"
|
||||
|
||||
@ -453,7 +453,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table ant-table-default ant-table-empty ant-table-scroll-position-left ant-table-layout-fixed"
|
||||
class="ant-table ant-table-default ant-table-empty ant-table-scroll-position-left"
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import demoTest from '../../../tests/shared/demoTest';
|
||||
|
||||
demoTest('table', {
|
||||
skip: process.env.REACT === '15' ? ['edit-row', 'drag-sorting'] : [],
|
||||
skip: process.env.REACT === '15' ? ['edit-row', 'edit-cell', 'drag-sorting'] : [],
|
||||
});
|
||||
|
||||
@ -42,7 +42,7 @@ const columns = [
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
width: 200,
|
||||
width: 150,
|
||||
sorter: (a, b) => a.age - b.age,
|
||||
},
|
||||
{
|
||||
@ -52,7 +52,7 @@ const columns = [
|
||||
title: 'Street',
|
||||
dataIndex: 'street',
|
||||
key: 'street',
|
||||
width: 200,
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: 'Block',
|
||||
@ -121,7 +121,7 @@ ReactDOM.render(
|
||||
dataSource={data}
|
||||
bordered
|
||||
size="middle"
|
||||
scroll={{ x: '130%', y: 240 }}
|
||||
scroll={{ x: 'calc(700px + 50%)', y: 240 }}
|
||||
/>,
|
||||
mountNode,
|
||||
);
|
||||
|
||||
@ -117,8 +117,8 @@ const data = [
|
||||
},
|
||||
];
|
||||
|
||||
function onChange(pagination, filters, sorter) {
|
||||
console.log('params', pagination, filters, sorter);
|
||||
function onChange(pagination, filters, sorter, extra) {
|
||||
console.log('params', pagination, filters, sorter, extra);
|
||||
}
|
||||
|
||||
ReactDOM.render(<Table columns={columns} dataSource={data} onChange={onChange} />, mountNode);
|
||||
|
||||
@ -4,6 +4,9 @@ import { Store } from './createStore';
|
||||
import { RadioChangeEvent } from '../radio';
|
||||
import { CheckboxChangeEvent } from '../checkbox';
|
||||
import { PaginationConfig } from '../pagination';
|
||||
import { tuple } from '../_util/type';
|
||||
|
||||
const ColumnFixedPlacements = tuple('left', 'right');
|
||||
|
||||
// eslint-disable-next-line import/prefer-default-export
|
||||
export { PaginationConfig } from '../pagination';
|
||||
@ -50,7 +53,7 @@ export interface ColumnProps<T> {
|
||||
colSpan?: number;
|
||||
width?: string | number;
|
||||
className?: string;
|
||||
fixed?: boolean | ('left' | 'right');
|
||||
fixed?: boolean | (typeof ColumnFixedPlacements)[number];
|
||||
filterIcon?: React.ReactNode | ((filtered: boolean) => React.ReactNode);
|
||||
filteredValue?: any[];
|
||||
sortOrder?: SortOrder | boolean;
|
||||
|
||||
@ -2,33 +2,6 @@
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@typography-prefix-cls: ~'@{ant-prefix}-typography';
|
||||
@typography-title-margin-top: 1.2em;
|
||||
|
||||
// =============== Common ===============
|
||||
.typography-paragraph() {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.typography-title(@fontSize; @lineHeight) {
|
||||
margin-bottom: 0.5em;
|
||||
color: @heading-color;
|
||||
font-weight: @typography-title-font-weight;
|
||||
font-size: @fontSize;
|
||||
line-height: @lineHeight;
|
||||
}
|
||||
|
||||
.typography-title-1() {
|
||||
.typography-title(@heading-1-size, 1.23);
|
||||
}
|
||||
.typography-title-2() {
|
||||
.typography-title(@heading-2-size, 1.35);
|
||||
}
|
||||
.typography-title-3() {
|
||||
.typography-title(@heading-3-size, 1.35);
|
||||
}
|
||||
.typography-title-4() {
|
||||
.typography-title(@heading-4-size, 1.4);
|
||||
}
|
||||
|
||||
// =============== Basic ===============
|
||||
.@{typography-prefix-cls} {
|
||||
|
||||
@ -169,32 +169,33 @@ export default class UploadList extends React.Component<UploadListProps, any> {
|
||||
[downloadIcon, removeIcon].filter(x => x).length
|
||||
}`]: true,
|
||||
});
|
||||
const preview = file.url ? (
|
||||
[
|
||||
<a
|
||||
key="view"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={listItemNameClass}
|
||||
title={file.name}
|
||||
{...linkProps}
|
||||
href={file.url}
|
||||
onClick={e => this.handlePreview(file, e)}
|
||||
>
|
||||
{file.name}
|
||||
</a>,
|
||||
downloadOrDelete,
|
||||
]
|
||||
) : (
|
||||
<span
|
||||
className={listItemNameClass}
|
||||
onClick={e => this.handlePreview(file, e)}
|
||||
title={file.name}
|
||||
>
|
||||
{file.name}
|
||||
{downloadOrDelete}
|
||||
</span>
|
||||
);
|
||||
const preview = file.url
|
||||
? [
|
||||
<a
|
||||
key="view"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={listItemNameClass}
|
||||
title={file.name}
|
||||
{...linkProps}
|
||||
href={file.url}
|
||||
onClick={e => this.handlePreview(file, e)}
|
||||
>
|
||||
{file.name}
|
||||
</a>,
|
||||
downloadOrDelete,
|
||||
]
|
||||
: [
|
||||
<span
|
||||
key="view"
|
||||
className={listItemNameClass}
|
||||
onClick={e => this.handlePreview(file, e)}
|
||||
title={file.name}
|
||||
>
|
||||
{file.name}
|
||||
</span>,
|
||||
downloadOrDelete,
|
||||
];
|
||||
const style: React.CSSProperties = {
|
||||
pointerEvents: 'none',
|
||||
opacity: 0.5,
|
||||
|
||||
@ -1376,3 +1376,47 @@ exports[`renders ./components/upload/demo/upload-manually.md correctly 1`] = `
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-4 ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class=""
|
||||
for="photos"
|
||||
title="Photos"
|
||||
>
|
||||
Photos
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control"
|
||||
>
|
||||
<span
|
||||
class="ant-form-item-children"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-text"
|
||||
/>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-text"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
@ -58,35 +58,35 @@ exports[`Upload List handle error 1`] = `
|
||||
title="foo.png"
|
||||
>
|
||||
foo.png
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions "
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions "
|
||||
>
|
||||
<a
|
||||
title="Remove file"
|
||||
>
|
||||
<a
|
||||
<i
|
||||
aria-label="icon: delete"
|
||||
class="anticon anticon-delete"
|
||||
tabindex="-1"
|
||||
title="Remove file"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: delete"
|
||||
class="anticon anticon-delete"
|
||||
tabindex="-1"
|
||||
title="Remove file"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
</span>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
@ -175,35 +175,35 @@ exports[`Upload List should be uploading when upload a file 1`] = `
|
||||
title="foo.png"
|
||||
>
|
||||
foo.png
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions "
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions "
|
||||
>
|
||||
<a
|
||||
title="Remove file"
|
||||
>
|
||||
<a
|
||||
<i
|
||||
aria-label="icon: delete"
|
||||
class="anticon anticon-delete"
|
||||
tabindex="-1"
|
||||
title="Remove file"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: delete"
|
||||
class="anticon anticon-delete"
|
||||
tabindex="-1"
|
||||
title="Remove file"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
</span>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
@ -292,60 +292,60 @@ exports[`Upload List should be uploading when upload a file 2`] = `
|
||||
title="foo.png"
|
||||
>
|
||||
foo.png
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions "
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-card-actions "
|
||||
>
|
||||
<a
|
||||
title="Download file"
|
||||
>
|
||||
<a
|
||||
<i
|
||||
aria-label="icon: download"
|
||||
class="anticon anticon-download"
|
||||
tabindex="-1"
|
||||
title="Download file"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: download"
|
||||
class="anticon anticon-download"
|
||||
tabindex="-1"
|
||||
title="Download file"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="download"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="download"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
<a
|
||||
<path
|
||||
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
<a
|
||||
title="Remove file"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: delete"
|
||||
class="anticon anticon-delete"
|
||||
tabindex="-1"
|
||||
title="Remove file"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: delete"
|
||||
class="anticon anticon-delete"
|
||||
tabindex="-1"
|
||||
title="Remove file"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
</span>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
138
components/upload/demo/upload-with-aliyun-oss.md
Normal file
138
components/upload/demo/upload-with-aliyun-oss.md
Normal file
@ -0,0 +1,138 @@
|
||||
---
|
||||
order: 11
|
||||
title:
|
||||
zh-CN: 阿里云 OSS
|
||||
en-US: Aliyun OSS
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
使用阿里云 OSS 上传示例.
|
||||
|
||||
## en-US
|
||||
|
||||
Use Aliyun OSS upload example.
|
||||
|
||||
```jsx
|
||||
import { Form, Upload, message, Button, Icon } from 'antd';
|
||||
|
||||
class AliyunOSSUpload extends React.Component {
|
||||
state = {
|
||||
OSSData: {},
|
||||
};
|
||||
|
||||
async componentDidMount() {
|
||||
await this.init();
|
||||
}
|
||||
|
||||
init = async () => {
|
||||
try {
|
||||
const OSSData = await this.mockGetOSSData();
|
||||
|
||||
this.setState({
|
||||
OSSData,
|
||||
});
|
||||
} catch (error) {
|
||||
message.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
// Mock get OSS api
|
||||
// https://help.aliyun.com/document_detail/31988.html
|
||||
mockGetOSSData = () => {
|
||||
return {
|
||||
dir: 'user-dir/',
|
||||
expire: '1577811661',
|
||||
host: '//www.mocky.io/v2/5cc8019d300000980a055e76',
|
||||
accessId: 'c2hhb2RhaG9uZw==',
|
||||
policy: 'eGl4aWhhaGFrdWt1ZGFkYQ==',
|
||||
signature: 'ZGFob25nc2hhbw==',
|
||||
};
|
||||
};
|
||||
|
||||
onChange = ({ fileList }) => {
|
||||
const { onChange } = this.props;
|
||||
console.log('Aliyun OSS:', fileList);
|
||||
if (onChange) {
|
||||
onChange([...fileList]);
|
||||
}
|
||||
};
|
||||
|
||||
onRemove = file => {
|
||||
const { value, onChange } = this.props;
|
||||
|
||||
const files = value.filter(v => v.url !== file.url);
|
||||
|
||||
if (onChange) {
|
||||
onChange(files);
|
||||
}
|
||||
};
|
||||
|
||||
transformFile = file => {
|
||||
const { OSSData } = this.state;
|
||||
|
||||
const suffix = file.name.slice(file.name.lastIndexOf('.'));
|
||||
const filename = Date.now() + suffix;
|
||||
file.url = OSSData.dir + filename;
|
||||
|
||||
return file;
|
||||
};
|
||||
|
||||
getExtraData = file => {
|
||||
const { OSSData } = this.state;
|
||||
|
||||
return {
|
||||
key: file.url,
|
||||
OSSAccessKeyId: OSSData.accessId,
|
||||
policy: OSSData.policy,
|
||||
Signature: OSSData.signature,
|
||||
};
|
||||
};
|
||||
|
||||
beforeUpload = async () => {
|
||||
const { OSSData } = this.state;
|
||||
const expire = OSSData.expire * 1000;
|
||||
|
||||
if (expire < Date.now()) {
|
||||
await this.init();
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { value } = this.props;
|
||||
const props = {
|
||||
name: 'file',
|
||||
fileList: value,
|
||||
action: this.state.OSSData.host,
|
||||
onChange: this.onChange,
|
||||
onRemove: this.onRemove,
|
||||
transformFile: this.transformFile,
|
||||
data: this.getExtraData,
|
||||
beforeUpload: this.beforeUpload,
|
||||
};
|
||||
return (
|
||||
<Upload {...props}>
|
||||
<Button>
|
||||
<Icon type="upload" /> Click to Upload
|
||||
</Button>
|
||||
</Upload>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class FormPage extends React.Component {
|
||||
render() {
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
return (
|
||||
<Form onSubmit={this.handleSubmit} labelCol={{ span: 4 }}>
|
||||
<Form.Item label="Photos">{getFieldDecorator('photos')(<AliyunOSSUpload />)}</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const WrappedFormPage = Form.create()(FormPage);
|
||||
|
||||
ReactDOM.render(<WrappedFormPage />, mountNode);
|
||||
```
|
||||
@ -12,6 +12,18 @@ export interface RcFile extends File {
|
||||
readonly webkitRelativePath: string;
|
||||
}
|
||||
|
||||
export interface RcCustomRequestOptions {
|
||||
onProgress: (event: { percent: number }, file: File) => void;
|
||||
onError: (error: Error) => void;
|
||||
onSuccess: (response: object, file: File) => void;
|
||||
data: object;
|
||||
filename: string;
|
||||
file: File;
|
||||
withCredentials: boolean;
|
||||
action: string;
|
||||
headers: object;
|
||||
}
|
||||
|
||||
export interface UploadFile {
|
||||
uid: string;
|
||||
size: number;
|
||||
@ -82,7 +94,7 @@ export interface UploadProps {
|
||||
style?: React.CSSProperties;
|
||||
disabled?: boolean;
|
||||
prefixCls?: string;
|
||||
customRequest?: (option: object) => void;
|
||||
customRequest?: (options: RcCustomRequestOptions) => void;
|
||||
withCredentials?: boolean;
|
||||
openFileDialogOnClick?: boolean;
|
||||
locale?: UploadLocale;
|
||||
|
||||
@ -4,7 +4,7 @@ title: Contributing
|
||||
toc: false
|
||||
---
|
||||
|
||||
The following is a set of guidelines for contributing to Ant Design. Please spend several minutes in reading these guidelines before you create an issue or pull request.
|
||||
The following is a set of guidelines for contributing to Ant Design. Please spend several minutes reading these guidelines before you create an issue or pull request.
|
||||
|
||||
## Code of Conduct
|
||||
|
||||
@ -20,15 +20,15 @@ According to our [release schedule](changelog#Release-Schedule), we maintain two
|
||||
|
||||
## Bugs
|
||||
|
||||
We are using [GitHub Issues](https://github.com/ant-design/ant-design/issues) for bug tracing. The best way to get your bug fixed is using our [issue helper](http://new-issue.ant.design) and provide a reproduction with this [template](https://u.ant.design/codesandbox-repro).
|
||||
We are using [GitHub Issues](https://github.com/ant-design/ant-design/issues) for bug tracking. The best way to get your bug fixed is using our [issue helper](http://new-issue.ant.design) and provide reproduction steps with this [template](https://u.ant.design/codesandbox-repro).
|
||||
|
||||
Before you reporting a bug, please make sure you've searched exists issues, and read our [FAQ](/docs/react/faq).
|
||||
Before you report a bug, please make sure you've searched exists issues, and read our [FAQ](/docs/react/faq).
|
||||
|
||||
## Proposing a Change
|
||||
|
||||
If you intend to change the public API or introduce new feature, we also recommend use our [issue helper](http://new-issue.ant.design) to create a feature request issue.
|
||||
If you intend to change the public API or introduce new feature, we also recommend you use our [issue helper](http://new-issue.ant.design) to create a feature request issue.
|
||||
|
||||
If you want to help on new API, please ref [API Naming Rules](https://github.com/ant-design/ant-design/wiki/API-Naming-rules) to name it.
|
||||
If you want to help on new API, please reference [API Naming Rules](https://github.com/ant-design/ant-design/wiki/API-Naming-rules) to name it.
|
||||
|
||||
## Your First Pull Request
|
||||
|
||||
@ -48,16 +48,16 @@ The core team is monitoring for pull requests. We will review your pull request
|
||||
|
||||
**Before submitting a pull request**, please make sure the following is done:
|
||||
|
||||
1. Fork the repository and create your branch from [proper branch](#Branch-Organization).
|
||||
1. Fork the repository and create your branch from the [correct branch](#Branch-Organization).
|
||||
1. Run `npm install` in the repository root.
|
||||
1. If you've fixed a bug or added code that should be tested, add tests!
|
||||
1. Ensure the test suite passes (npm run test). Tip: `npm test -- --watch TestName` is helpful in development.
|
||||
1. Run `npm test -- -u` to update [jest snapshot](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest) and commit these changes as well (if has).
|
||||
1. Run `npm test -- -u` to update the [jest snapshots](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest) and commit these changes as well (if there are any updates).
|
||||
1. Make sure your code lints (npm run lint). Tip: Lint runs automatically when you `git commit`.
|
||||
|
||||
Sending a Pull Request to [react-component](https://github.com/react-component/):
|
||||
|
||||
Since antd's components are based on react-component, sometimes you may need to send pull request to the corresponding react-component repository. If it's a bugfix pull request, after it's merged, the core team will release a patch release for that component as soon as possible, then you only need to do is reinstalling antd in your project to get the latest patch release. If it's a feature pull request, after it's merged, the core team will release a minor release, then you need raise another pull request to [Ant Design](https://github.com/ant-design/ant-design/) to update dependencies, document and TypeScript interfaces (if needed).
|
||||
Since antd's components are based on react-component, sometimes you may need to send pull request to the corresponding react-component repository. If it's a bugfix pull request, after it's merged, the core team will release a patch release for that component as soon as possible, then you only need to reinstall antd in your project to get the latest patch release. If it's a feature pull request, after it's merged, the core team will release a minor release, then you need raise another pull request to [Ant Design](https://github.com/ant-design/ant-design/) to update dependencies, document and TypeScript interfaces (if needed).
|
||||
|
||||
## Development Workflow
|
||||
|
||||
|
||||
@ -36,6 +36,19 @@ title: Third-Party Libraries
|
||||
| Keywords highlight | [react-highlight-words](https://github.com/bvaughn/react-highlight-words) |
|
||||
| Animation | [react-move](https://github.com/react-tools/react-move) [Ant Motion](https://motion.ant.design/components/tween-one) [react-spring](https://www.react-spring.io) |
|
||||
|
||||
## Products we are using ✨
|
||||
|
||||
There are some products to recommend for developer/designer/product manager.
|
||||
|
||||
| Category | Recommended Products |
|
||||
| --- | --- |
|
||||
| Documentation | [🐦 Yuque](https://www.yuque.com/?chInfo=ch_antd) |
|
||||
| Icon | [Iconfont](https://www.iconfont.cn/) |
|
||||
| Sketch plugin | [Kitchen](https://kitchen.alipay.com) |
|
||||
| Online Playground | [codesandbox](https://codesandbox.io/) [codepen](https://codepen.io/) |
|
||||
| Image Compressor | [tinypng](https://tinypng.com/) |
|
||||
| Charts Dictionary | [G2](https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html) [图之典](http://tuzhidian.com/) |
|
||||
|
||||
<style>
|
||||
.markdown table td:first-child {
|
||||
font-weight: 500;
|
||||
|
||||
@ -36,6 +36,19 @@ title: 社区精选组件
|
||||
| 关键字高亮 | [react-highlight-words](https://github.com/bvaughn/react-highlight-words) |
|
||||
| 动画 | [react-move](https://github.com/react-tools/react-move) [Ant Motion](https://motion.ant.design/components/tween-one) [react-spring](https://www.react-spring.io) |
|
||||
|
||||
## 推荐产品 ✨
|
||||
|
||||
还有一些常用的前端/设计/产品相关的工具推荐给大家使用。
|
||||
|
||||
| 类型 | 推荐产品 |
|
||||
| --- | --- |
|
||||
| 文档管理 | [🐦 语雀](https://www.yuque.com/?chInfo=ch_antd) |
|
||||
| 图标 | [阿里巴巴矢量图标库](https://www.iconfont.cn/) |
|
||||
| Sketch 插件 | [Kitchen](https://kitchen.alipay.com) |
|
||||
| 在线代码编辑 | [codesandbox](https://codesandbox.io/) [codepen](https://codepen.io/) |
|
||||
| 图片压缩 | [tinypng](https://tinypng.com/) |
|
||||
| 图表分类查询 | [G2](https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html) [图之典](http://tuzhidian.com/) |
|
||||
|
||||
<style>
|
||||
.markdown table td:first-child {
|
||||
font-weight: 500;
|
||||
|
||||
@ -88,7 +88,7 @@ Ok, you should now see a blue primary button displayed on the page. Next you can
|
||||
|
||||
## Advanced Guides
|
||||
|
||||
We are successfully running antd components now but in the real world, there are still lots of problems about antd-demo. For instance, we actually import styles of all components in the project which may be a css bundle size issue (It is OK then if you don't case the gzipped 60kb css file size).
|
||||
We are successfully running antd components now but in the real world, there are still lots of problems about antd-demo. For instance, we actually import styles of all components in the project which may be a css bundle size issue (It is OK then if you don't care the gzipped 60kb css file size).
|
||||
|
||||
Now we need to customize the default webpack config. We can achieve that by using [react-app-rewired](https://github.com/timarney/react-app-rewired) which is one of create-react-app's custom config solutions.
|
||||
|
||||
|
||||
13
package.json
13
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "3.23.6",
|
||||
"version": "3.24.2",
|
||||
"description": "An enterprise-class UI design language and React components implementation",
|
||||
"keywords": [
|
||||
"ant",
|
||||
@ -45,7 +45,7 @@
|
||||
"bundlesize": "bundlesize",
|
||||
"check-commit": "node ./scripts/check-commit.js",
|
||||
"compile": "antd-tools run compile",
|
||||
"predeploy": "antd-tools run clean && npm run site && cp netlify.toml CNAME _site && cp .circleci/config.yml _site",
|
||||
"predeploy": "antd-tools run clean && npm run site && cp netlify.toml CNAME _site && cp .circleci/config.yml _site && npm run site:test",
|
||||
"deploy": "bisheng gh-pages --push-only",
|
||||
"deploy:china-mirror": "git checkout gh-pages && git pull origin gh-pages && git push git@gitee.com:ant-design/ant-design.git gh-pages",
|
||||
"dist": "antd-tools run dist",
|
||||
@ -73,7 +73,8 @@
|
||||
"test": "jest --config .jest.js --no-cache",
|
||||
"test-all": "./scripts/test-all.sh",
|
||||
"test-node": "jest --config .jest.node.js --no-cache",
|
||||
"tsc": "tsc"
|
||||
"tsc": "tsc",
|
||||
"site:test": "jest --config .jest.site.js --cache=false"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
@ -125,7 +126,7 @@
|
||||
"rc-slider": "~8.7.1",
|
||||
"rc-steps": "~3.5.0",
|
||||
"rc-switch": "~1.9.0",
|
||||
"rc-table": "~6.8.6",
|
||||
"rc-table": "~6.9.4",
|
||||
"rc-tabs": "~9.6.4",
|
||||
"rc-time-picker": "~3.7.1",
|
||||
"rc-tooltip": "~3.7.3",
|
||||
@ -168,6 +169,7 @@
|
||||
"bisheng-plugin-toc": "^0.4.4",
|
||||
"bundlesize": "^0.18.0",
|
||||
"chalk": "^2.4.2",
|
||||
"cheerio": "^1.0.0-rc.3",
|
||||
"cross-env": "^6.0.0",
|
||||
"css-split-webpack-plugin": "^0.2.6",
|
||||
"dekko": "^0.2.1",
|
||||
@ -189,6 +191,7 @@
|
||||
"fetch-jsonp": "^1.1.3",
|
||||
"full-icu": "^1.3.0",
|
||||
"glob": "^7.1.4",
|
||||
"http-server": "^0.11.1",
|
||||
"husky": "^3.0.2",
|
||||
"immutability-helper": "^3.0.0",
|
||||
"intersection-observer": "^0.7.0",
|
||||
@ -203,7 +206,7 @@
|
||||
"preact": "^10.0.0",
|
||||
"preact-compat": "^3.18.5",
|
||||
"prettier": "^1.17.1",
|
||||
"pretty-quick": "^1.11.0",
|
||||
"pretty-quick": "^2.0.0",
|
||||
"querystring": "^0.2.0",
|
||||
"rc-footer": "^0.5.0",
|
||||
"rc-queue-anim": "^1.6.12",
|
||||
|
||||
92
scripts/check-site.js
Executable file
92
scripts/check-site.js
Executable file
@ -0,0 +1,92 @@
|
||||
/* eslint-disable no-await-in-loop */
|
||||
/* eslint-disable no-restricted-syntax */
|
||||
const fetch = require('node-fetch');
|
||||
const { join } = require('path');
|
||||
const cheerio = require('cheerio');
|
||||
const glob = require('glob');
|
||||
const uniq = require('lodash/uniq');
|
||||
const { createServer } = require('http-server');
|
||||
const zhCN = require('../site/theme/zh-CN');
|
||||
const enUS = require('../site/theme/en-US');
|
||||
|
||||
const components = uniq(
|
||||
glob
|
||||
.sync('components/*/*.md', {
|
||||
ignore: '**/{__tests__,_util,version,index.tsx}',
|
||||
cwd: join(process.cwd()),
|
||||
dot: false,
|
||||
})
|
||||
.map(path => path.replace(/(\/index)?((\.zh-CN)|(\.en-US))?\.md$/i, '')),
|
||||
);
|
||||
|
||||
describe('site test', () => {
|
||||
let server;
|
||||
const host = 3000;
|
||||
const render = async path => {
|
||||
const resp = await fetch(`http://localhost:${host}${path}`).then(async res => {
|
||||
const html = await res.text();
|
||||
const $ = cheerio.load(html, { decodeEntities: false, recognizeSelfClosing: true });
|
||||
return {
|
||||
html,
|
||||
status: res.status,
|
||||
$,
|
||||
};
|
||||
});
|
||||
return resp;
|
||||
};
|
||||
const handleComponentName = name => {
|
||||
const componentMap = {
|
||||
descriptions: 'description list',
|
||||
};
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const [_, componentName] = name.split('/');
|
||||
const compName = componentName.toLowerCase().replace('-', '');
|
||||
return componentMap[compName] || compName;
|
||||
};
|
||||
|
||||
const expectComponent = async component => {
|
||||
const { status, $ } = await render(`/${component}/`);
|
||||
expect(status).toBe(200);
|
||||
expect(
|
||||
$('.markdown > h1')
|
||||
.text()
|
||||
.toLowerCase(),
|
||||
).toMatch(handleComponentName(component));
|
||||
};
|
||||
|
||||
beforeAll(() => {
|
||||
server = createServer({
|
||||
root: join(process.cwd(), '_site'),
|
||||
});
|
||||
server.listen(host);
|
||||
console.log('site static server run: http://localhost:3000');
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
if (server) {
|
||||
server.close();
|
||||
}
|
||||
});
|
||||
|
||||
it('Basic Pages en', async () => {
|
||||
const { status, $ } = await render('/');
|
||||
expect($('title').text()).toEqual(`Ant Design - ${enUS.messages['app.home.slogan']}`);
|
||||
expect(status).toBe(200);
|
||||
});
|
||||
|
||||
it('Basic Pages zh', async () => {
|
||||
const { status, $ } = await render('/index-cn');
|
||||
expect($('title').text()).toEqual(`Ant Design - ${zhCN.messages['app.home.slogan']}`);
|
||||
expect(status).toBe(200);
|
||||
});
|
||||
|
||||
for (const component of components) {
|
||||
it(`Component ${component} zh Page`, async () => {
|
||||
await expectComponent(component);
|
||||
});
|
||||
|
||||
it(`Component ${component} en Page`, async () => {
|
||||
await expectComponent(component);
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -47,6 +47,8 @@ module.exports = {
|
||||
'app.home.tool-kitchen-title': 'Kitchen',
|
||||
'app.home.tool-kitchen-content': 'A Sketch tools for designers',
|
||||
'app.home.getting-started': 'Getting Started',
|
||||
'app.home.recommend': 'Recommend',
|
||||
'app.home.recommend.yuque': 'Yuque, our favorite documentation tool',
|
||||
'app.home.more': 'Learn more',
|
||||
'app.home.more-mobile-react': 'Ant Design Mobile of React',
|
||||
'app.home.more-mobile-angular': 'Ant Design Mobile of Angular',
|
||||
@ -63,6 +65,7 @@ module.exports = {
|
||||
'app.footer.dev-tools': 'Developer Tools',
|
||||
'app.footer.umi': 'React Application Framework',
|
||||
'app.footer.dva': 'Data Flow Framework',
|
||||
'app.footer.remax': 'Mini Program Framework',
|
||||
'app.footer.resources': 'Resources',
|
||||
'app.footer.data-vis': 'Data Visualization',
|
||||
'app.footer.eggjs': 'Enterprise Node Framework',
|
||||
|
||||
@ -103,28 +103,68 @@
|
||||
align-items: center;
|
||||
min-width: 520px;
|
||||
margin-top: 24px;
|
||||
|
||||
.banner-btn {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
padding: 0 24px;
|
||||
font-size: 16px;
|
||||
font-family: Avenir, @font-family, sans-serif;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border: 1px solid @home-bg-color;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.banner-btn.components {
|
||||
color: #fff;
|
||||
background: @home-bg-color;
|
||||
}
|
||||
|
||||
.banner-btn.language {
|
||||
color: @home-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-btn {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
padding: 0 24px;
|
||||
font-size: 16px;
|
||||
font-family: Avenir, @font-family, sans-serif;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border: 1px solid #2f54eb;
|
||||
border-radius: 100px;
|
||||
}
|
||||
.banner-promote {
|
||||
max-width: 100%;
|
||||
margin: 48px 0 24px 0;
|
||||
|
||||
.banner-btn.components {
|
||||
color: #fff;
|
||||
background: #2f54eb;
|
||||
}
|
||||
.ant-divider-inner-text {
|
||||
padding: 0 12px;
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.banner-btn.language {
|
||||
color: #2f54eb;
|
||||
a {
|
||||
color: @home-text-color;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s;
|
||||
|
||||
.anticon {
|
||||
position: relative;
|
||||
left: 0;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @home-bg-color;
|
||||
|
||||
.anticon {
|
||||
left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -404,12 +444,23 @@ svg {
|
||||
}
|
||||
}
|
||||
|
||||
.github-btn {
|
||||
.github-btn-large {
|
||||
height: 40px;
|
||||
font-family: Avenir, @font-family, sans-serif;
|
||||
&-large {
|
||||
.gh-btn,
|
||||
.gh-count {
|
||||
padding: 4px 8px 2px;
|
||||
line-height: 40px;
|
||||
|
||||
.gh-btn,
|
||||
.gh-count {
|
||||
height: 40px;
|
||||
padding: 9px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.gh-count {
|
||||
margin-left: 10px;
|
||||
|
||||
&::after {
|
||||
border-width: 7px 6px 7px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -392,6 +392,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
[id='components-grid-demo-playground'],
|
||||
[id='components-grid-demo-gutter'] {
|
||||
> .code-box-demo .ant-row > div {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// For Changelog
|
||||
.markdown ul.ant-timeline {
|
||||
line-height: 2;
|
||||
|
||||
@ -195,18 +195,18 @@
|
||||
}
|
||||
.img-wrapper {
|
||||
position: initial;
|
||||
margin-top: 32px;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
svg {
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
max-width: 260px;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.text-wrapper {
|
||||
min-height: 200px;
|
||||
margin-top: 48px;
|
||||
margin-top: 32px;
|
||||
padding: 0;
|
||||
h1 {
|
||||
display: none;
|
||||
@ -227,6 +227,20 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.banner-promote {
|
||||
min-width: 100%;
|
||||
margin-top: 32px;
|
||||
.ant-divider {
|
||||
display: none;
|
||||
}
|
||||
a {
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
img {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.page1 {
|
||||
|
||||
@ -5,7 +5,7 @@ import ScrollParallax from 'rc-scroll-anim/lib/ScrollParallax';
|
||||
import { Link } from 'bisheng/router';
|
||||
import { FormattedMessage, useIntl } from 'react-intl';
|
||||
import GitHubButton from 'react-github-button';
|
||||
import { Button } from 'antd';
|
||||
import { Button, Divider, Icon } from 'antd';
|
||||
import BannerImage from './BannerImage';
|
||||
import * as utils from '../utils';
|
||||
|
||||
@ -75,6 +75,37 @@ const Banner = ({ isMobile }) => {
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
key="promote"
|
||||
className="banner-promote"
|
||||
style={{
|
||||
width: isZhCN ? 412 : 522,
|
||||
}}
|
||||
>
|
||||
<Divider>
|
||||
<FormattedMessage id="app.home.recommend" />
|
||||
</Divider>
|
||||
<a
|
||||
href="https://www.yuque.com/?chInfo=ch_antd"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={() => {
|
||||
if (window.gtag) {
|
||||
window.gtag('event', '点击', {
|
||||
event_category: '首页推广',
|
||||
event_label: 'https://www.yuque.com/?chInfo=ch_antd',
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
|
||||
alt="yuque logo"
|
||||
/>
|
||||
<FormattedMessage id="app.home.recommend.yuque" />
|
||||
<Icon type="right" style={{ marginLeft: 6, fontSize: 12, opacity: 0.6 }} />
|
||||
</a>
|
||||
</div>
|
||||
</QueueAnim>
|
||||
{!isMobile && (
|
||||
<div className="img-wrapper" key="image">
|
||||
|
||||
@ -88,6 +88,12 @@ class Footer extends React.Component {
|
||||
url: 'https://dvajs.com',
|
||||
openExternal: true,
|
||||
},
|
||||
{
|
||||
title: 'Remax',
|
||||
description: <FormattedMessage id="app.footer.remax" />,
|
||||
url: 'https://remaxjs.org/',
|
||||
openExternal: true,
|
||||
},
|
||||
{
|
||||
title: 'Ant Motion',
|
||||
description: <FormattedMessage id="app.footer.motion" />,
|
||||
|
||||
@ -44,6 +44,8 @@ module.exports = {
|
||||
'app.home.tool-kitchen-title': 'Kitchen',
|
||||
'app.home.tool-kitchen-content': '一个为设计师提效的 Sketch 工具集',
|
||||
'app.home.getting-started': '开始使用',
|
||||
'app.home.recommend': '推荐',
|
||||
'app.home.recommend.yuque': '语雀，我们都喜欢的文档工具',
|
||||
'app.home.more': '查看更多',
|
||||
'app.home.more-mobile-react': 'Ant Design Mobile of React',
|
||||
'app.home.more-mobile-angular': 'Ant Design Mobile of Angular',
|
||||
@ -60,6 +62,7 @@ module.exports = {
|
||||
'app.footer.dev-tools': '开发工具',
|
||||
'app.footer.umi': 'React 应用开发框架',
|
||||
'app.footer.dva': '数据流前端框架',
|
||||
'app.footer.remax': '全新的小程序开发体验',
|
||||
'app.footer.resources': '相关资源',
|
||||
'app.footer.data-vis': '数据可视化',
|
||||
'app.footer.eggjs': '企业级 Node 开发框架',
|
||||
|
||||
18
tests/__mocks__/react.js
vendored
18
tests/__mocks__/react.js
vendored
@ -1,18 +0,0 @@
|
||||
import createReactContext from '@ant-design/create-react-context/lib/implementation';
|
||||
|
||||
const React = require.requireActual('react');
|
||||
|
||||
if (!React.createContext) {
|
||||
React.createContext = createReactContext;
|
||||
}
|
||||
|
||||
if (!React.createRef) {
|
||||
React.createRef = () => {
|
||||
const ref = function setRef(node) {
|
||||
ref.current = node;
|
||||
};
|
||||
return ref;
|
||||
};
|
||||
}
|
||||
|
||||
Object.assign(module.exports, React);
|
||||
@ -1,3 +1,7 @@
|
||||
const React = require('react');
|
||||
|
||||
console.log('Current React Version:', React.version);
|
||||
|
||||
/* eslint-disable global-require */
|
||||
if (typeof window !== 'undefined') {
|
||||
global.window.resizeTo = (width, height) => {
|
||||
|
||||
@ -1,5 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"antd": ["components/index.tsx"],
|
||||
"antd/es/*": ["components/*"]
|
||||
},
|
||||
"strictNullChecks": true,
|
||||
"moduleResolution": "node",
|
||||
"esModuleInterop": true,
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
"extends": ["./node_modules/@ant-design/tools/lib/tslint.json"]
|
||||
}
|
||||
11
typings/custom-typings.d.ts
vendored
11
typings/custom-typings.d.ts
vendored
@ -20,16 +20,10 @@ declare module 'rc-cascader';
|
||||
|
||||
declare module 'rc-checkbox';
|
||||
|
||||
declare module 'rc-radio';
|
||||
|
||||
declare module 'rc-dropdown';
|
||||
|
||||
declare module 'rc-editor-mention';
|
||||
|
||||
declare module 'rc-progress';
|
||||
|
||||
declare module 'rc-drawer';
|
||||
|
||||
declare module 'rc-tabs*';
|
||||
|
||||
declare module 'rc-tree';
|
||||
@ -81,6 +75,7 @@ declare module '*.json' {
|
||||
export default value;
|
||||
}
|
||||
|
||||
declare module 'react-lifecycles-compat';
|
||||
|
||||
declare module 'react-copy-to-clipboard';
|
||||
|
||||
// https://github.com/ant-design/ant-design/pull/19254
|
||||
declare module 'react-lifecycles-compat';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user