,
filterDropdownVisible: this.state.filterDropdownVisible,
- onFilterDropdownVisibleChange: visible => this.setState({ filterDropdownVisible: visible }, () => this.searchInput.focus()),
+ onFilterDropdownVisibleChange: (visible) => {
+ this.setState({
+ filterDropdownVisible: visible,
+ }, () => this.searchInput.focus());
+ },
}, {
title: 'Age',
dataIndex: 'age',
diff --git a/components/table/filterDropdown.tsx b/components/table/filterDropdown.tsx
index 67ffca526a..58a6d1c922 100755
--- a/components/table/filterDropdown.tsx
+++ b/components/table/filterDropdown.tsx
@@ -24,6 +24,7 @@ export interface FilterMenuProps {
confirmFilter: (column: Object, selectedKeys: string[]) => any;
prefixCls: string;
dropdownPrefixCls: string;
+ getPopupContainer: (triggerNode?: Element) => HTMLElement;
}
export default class FilterMenu extends React.Component
{
@@ -182,7 +183,7 @@ export default class FilterMenu extends React.Component {
}) : ;
}
render() {
- const { column, locale, prefixCls, dropdownPrefixCls } = this.props;
+ const { column, locale, prefixCls, dropdownPrefixCls, getPopupContainer } = this.props;
// default multiple selection in filter dropdown
const multiple = ('filterMultiple' in column) ? column.filterMultiple : true;
const dropdownMenuClass = classNames({
@@ -228,6 +229,7 @@ export default class FilterMenu extends React.Component {
overlay={menus}
visible={this.neverShown ? false : this.state.visible}
onVisibleChange={this.onVisibleChange}
+ getPopupContainer={getPopupContainer}
>
{this.renderFilterIcon()}
diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less
index e4a8a012a8..9dde90f3a4 100644
--- a/components/tabs/style/index.less
+++ b/components/tabs/style/index.less
@@ -200,6 +200,7 @@
opacity: 0;
height: 0;
padding: 0!important;
+ pointer-events: none;
}
}
> .@{tab-prefix-cls}-content-animated {
diff --git a/components/tag/style/index.less b/components/tag/style/index.less
index f9b17fd749..3b977610e4 100644
--- a/components/tag/style/index.less
+++ b/components/tag/style/index.less
@@ -3,9 +3,6 @@
@tag-prefix-cls: ~"@{ant-prefix}-tag";
-@tag-default-bg: @background-color-base;
-@tag-default-color: @text-color;
-
.@{tag-prefix-cls} {
display: inline-block;
line-height: 20px;
diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx
index f46a8f6718..84e3329ae7 100644
--- a/components/time-picker/index.tsx
+++ b/components/time-picker/index.tsx
@@ -58,7 +58,7 @@ abstract class TimePicker extends React.Component {
};
}
- abstract getLocale()
+ abstract getLocale();
componentWillReceiveProps(nextProps: TimePickerProps) {
if ('value' in nextProps) {
diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx
index 4405af762b..80312cf934 100644
--- a/components/tooltip/index.tsx
+++ b/components/tooltip/index.tsx
@@ -27,7 +27,7 @@ export interface AbstractTooltipProps {
// getTooltipContainer had been rename to getPopupContainer
getTooltipContainer?: (triggerNode: Element) => HTMLElement;
getPopupContainer?: (triggerNode: Element) => HTMLElement;
- children?: React.ReactElement;
+ children?: React.ReactNode;
}
export interface TooltipProps extends AbstractTooltipProps {
diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx
index ee015648d1..df3270ff6b 100644
--- a/components/transfer/index.tsx
+++ b/components/transfer/index.tsx
@@ -91,7 +91,7 @@ abstract class Transfer extends React.Component {
};
}
- abstract getLocale()
+ abstract getLocale();
componentWillReceiveProps(nextProps: TransferProps) {
const { sourceSelectedKeys, targetSelectedKeys } = this.state;
@@ -227,10 +227,10 @@ abstract class Transfer extends React.Component {
handleLeftSelectAll = (filteredDataSource, checkAll) => (
this.handleSelectAll('left', filteredDataSource, checkAll)
- );
+ )
handleRightSelectAll = (filteredDataSource, checkAll) => (
this.handleSelectAll('right', filteredDataSource, checkAll)
- );
+ )
handleFilter = (direction, e) => {
this.setState({
diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx
index d1b7177af7..ddd2dd0ba6 100644
--- a/components/tree-select/index.tsx
+++ b/components/tree-select/index.tsx
@@ -20,7 +20,7 @@ abstract class TreeSelect extends React.Component {
dropdownClassName: 'ant-select-tree-dropdown',
};
- abstract getLocale()
+ abstract getLocale();
render() {
const locale = this.getLocale();
diff --git a/components/tree-select/style/index.less b/components/tree-select/style/index.less
index 5ffa4af45c..7f54d381fd 100644
--- a/components/tree-select/style/index.less
+++ b/components/tree-select/style/index.less
@@ -27,9 +27,9 @@
margin: 0;
padding: 0 0 0 18px;
}
- > span {
+ .@{select-tree-prefix-cls}-node-content-wrapper {
display: inline-block;
- padding: 1px 5px;
+ padding: 3px 5px;
border-radius: 2px;
margin: 0;
cursor: pointer;
@@ -41,22 +41,25 @@
background-color: @item-hover-bg;
}
&.@{select-tree-prefix-cls}-node-selected {
- background-color: @item-active-bg;
+ background-color: @primary-2;
}
+ }
+ > span {
&.@{select-tree-prefix-cls}-checkbox {
margin: 2px 4px 0 0;
}
&.@{select-tree-prefix-cls}-switcher,
&.@{select-tree-prefix-cls}-iconEle {
margin: 0;
- width: 16px;
- height: 16px;
- line-height: 16px;
+ width: 24px;
+ height: 24px;
+ line-height: 24px;
display: inline-block;
vertical-align: middle;
border: 0 none;
cursor: pointer;
outline: none;
+ text-align: center;
}
&.@{select-tree-prefix-cls}-icon_loading {
&:after {
diff --git a/components/tree/style/index.less b/components/tree/style/index.less
index 65b78fa054..d11ccd9dc0 100644
--- a/components/tree/style/index.less
+++ b/components/tree/style/index.less
@@ -55,7 +55,7 @@
}
.@{tree-prefix-cls}-node-content-wrapper {
display: inline-block;
- padding: 1px 5px;
+ padding: 3px 5px;
border-radius: 2px;
margin: 0;
cursor: pointer;
@@ -78,14 +78,15 @@
&.@{tree-prefix-cls}-switcher,
&.@{tree-prefix-cls}-iconEle {
margin: 0;
- width: 16px;
- height: 16px;
- line-height: 16px;
+ width: 24px;
+ height: 24px;
+ line-height: 24px;
display: inline-block;
vertical-align: middle;
border: 0 none;
cursor: pointer;
outline: none;
+ text-align: center;
}
&.@{tree-prefix-cls}-icon_loading {
&:after {
@@ -187,7 +188,7 @@
border-left: 1px solid @border-color-base;
height: 100%;
position: absolute;
- left: 6px;
+ left: 12px;
margin: 18px 0;
}
}
diff --git a/docs/react/introduce.en-US.md b/docs/react/introduce.en-US.md
index b86ba94a8f..65cb62ee0d 100644
--- a/docs/react/introduce.en-US.md
+++ b/docs/react/introduce.en-US.md
@@ -34,7 +34,7 @@ Following the Ant Design specification, we developed a React UI library `antd` t
## Environment Support
-* Modern browsers and Internet Explorer 9+
+* Modern browsers and Internet Explorer 9+ (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
* Server-side Rendering
* [Electron](http://electron.atom.io/)
diff --git a/docs/react/introduce.zh-CN.md b/docs/react/introduce.zh-CN.md
index 0b330d9ab6..040b001272 100644
--- a/docs/react/introduce.zh-CN.md
+++ b/docs/react/introduce.zh-CN.md
@@ -34,7 +34,7 @@ title: Ant Design of React
## 支持环境
-* 现代浏览器和 IE9 及以上。
+* 现代浏览器和 IE9 及以上（需要 [polyfills](https://ant.design/docs/react/getting-started-cn#兼容性)）。
* 支持服务端渲染。
* [Electron](http://electron.atom.io/)
diff --git a/docs/react/use-with-create-react-app.en-US.md b/docs/react/use-with-create-react-app.en-US.md
index 3c8dd5b708..a9c39f4cee 100644
--- a/docs/react/use-with-create-react-app.en-US.md
+++ b/docs/react/use-with-create-react-app.en-US.md
@@ -56,7 +56,7 @@ It is the default directory structure below.
Now we install `antd` from yarn or npm.
```bash
-$ yarn add antd --save
+$ yarn add antd
```
Modify `src/App.js`, import Button component from `antd`.
@@ -113,7 +113,7 @@ $ yarn run eject
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) is a babel plugin for importing components on demand ([principle](/docs/react/getting-started#Import-on-Demand)). After eject all config files to antd-demo, we allowed to install it and modify `config/webpack.config.dev.js` now.
```bash
-$ yarn add babel-plugin-import --save-dev
+$ yarn add babel-plugin-import --dev
```
```diff
@@ -121,10 +121,10 @@ $ yarn add babel-plugin-import --save-dev
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
- loader: 'babel',
- query: {
+ loader: require.resolve('babel-loader'),
+ options: {
+ plugins: [
-+ ['import', [{ libraryName: "antd", style: 'css' }]],
++ ['import', { libraryName: 'antd', style: 'css' }],
+ ],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
@@ -145,22 +145,27 @@ Then reboot `yarn start` and visit demo page, you should find that the above war
According to [Customize Theme documentation](/docs/react/customize-theme), we need `less` variables modify ability of [less-loader](https://github.com/webpack/less-loader), so we add it.
```bash
-$ yarn add less less-loader --save-dev
+$ yarn add less less-loader --dev
```
```diff
-loaders: [
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
-+ /\.less$/,
/\.css$/,
++ /\.less$/,
/\.json$/,
- /\.svg$/
+ /\.bmp$/,
+ /\.gif$/,
+ /\.jpe?g$/,
+ /\.png$/,
],
- loader: 'url',
- },
+ loader: require.resolve('file-loader'),
+ options: {
+ name: 'static/media/[name].[hash:8].[ext]',
+ },
+ }
...
@@ -169,21 +174,48 @@ loaders: [
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: 'babel',
- query: {
+ options: {
plugins: [
-- ['import', [{ libraryName: "antd", style: 'css' }]],
-+ ['import', [{ libraryName: "antd", style: true }]], // import less
+- ['import', [{ libraryName: 'antd', style: 'css' }]],
++ ['import', [{ libraryName: 'antd', style: true }]], // import less
],
},
...
-+ // Parse less files and modify variables
-+ {
-+ test: /\.less$/,
-+ loader: 'style!css!postcss!less?{modifyVars:{"@primary-color":"#1DA57A"}}'
-+ },
-]
++ // Parse less files and modify variables
++ {
++ test: /\.less$/,
++ use: [
++ require.resolve('style-loader'),
++ require.resolve('css-loader'),
++ {
++ loader: require.resolve('postcss-loader'),
++ options: {
++ ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
++ plugins: () => [
++ require('postcss-flexbugs-fixes'),
++ autoprefixer({
++ browsers: [
++ '>1%',
++ 'last 4 versions',
++ 'Firefox ESR',
++ 'not ie < 9', // React doesn't support IE8 anyway
++ ],
++ flexbox: 'no-2009',
++ }),
++ ],
++ },
++ },
++ {
++ loader: require.resolve('less-loader'),
++ options: {
++ modifyVars: { "@primary-color": "#1DA57A" },
++ },
++ },
++ ],
++ },
+],
```
We use `modifyVars` option of [less-loader](https://github.com/webpack/less-loader#less-options) here, you can see a green button rendered on the page after reboot start server.
diff --git a/docs/react/use-with-create-react-app.zh-CN.md b/docs/react/use-with-create-react-app.zh-CN.md
index 398d448808..e74233dbfa 100644
--- a/docs/react/use-with-create-react-app.zh-CN.md
+++ b/docs/react/use-with-create-react-app.zh-CN.md
@@ -55,7 +55,7 @@ $ yarn start
现在从 yarn 或 npm 安装并引入 antd。
```bash
-$ yarn add antd --save
+$ yarn add antd
```
修改 `src/App.js`，引入 antd 的按钮组件。
@@ -110,7 +110,7 @@ $ yarn run eject
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一个用于按需加载组件代码和样式的 babel 插件（[原理](/docs/react/getting-started#按需加载)），现在我们尝试安装它并修改 `config/webpack.config.dev.js` 文件。
```bash
-$ yarn add babel-plugin-import --save-dev
+$ yarn add babel-plugin-import --dev
```
```diff
@@ -118,10 +118,10 @@ $ yarn add babel-plugin-import --save-dev
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
- loader: 'babel',
- query: {
+ loader: require.resolve('babel-loader'),
+ options: {
+ plugins: [
-+ ['import', [{ libraryName: "antd", style: 'css' }]],
++ ['import', { libraryName: 'antd', style: 'css' }],
+ ],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
@@ -142,22 +142,27 @@ $ yarn add babel-plugin-import --save-dev
按照 [配置主题](/docs/react/customize-theme) 的要求，自定义主题需要用到 less 变量覆盖功能，因此首先我们需要引入 [less-loader](https://github.com/webpack/less-loader) 来加载 less 样式，同时修改 `config/webpack.config.dev.js` 文件。
```bash
-$ yarn add less less-loader --save-dev
+$ yarn add less less-loader --dev
```
```diff
-loaders: [
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
-+ /\.less$/,
/\.css$/,
++ /\.less$/,
/\.json$/,
- /\.svg$/
+ /\.bmp$/,
+ /\.gif$/,
+ /\.jpe?g$/,
+ /\.png$/,
],
- loader: 'url',
- },
+ loader: require.resolve('file-loader'),
+ options: {
+ name: 'static/media/[name].[hash:8].[ext]',
+ },
+ }
...
@@ -166,21 +171,48 @@ loaders: [
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: 'babel',
- query: {
+ options: {
plugins: [
-- ['import', [{ libraryName: "antd", style: 'css' }]],
-+ ['import', [{ libraryName: "antd", style: true }]], // 加载 less 文件
+- ['import', [{ libraryName: 'antd', style: 'css' }]],
++ ['import', [{ libraryName: 'antd', style: true }]], // import less
],
},
...
-+ // 解析 less 文件，并加入变量覆盖配置
-+ {
-+ test: /\.less$/,
-+ loader: 'style!css!postcss!less?{modifyVars:{"@primary-color":"#1DA57A"}}'
-+ },
-]
++ // Parse less files and modify variables
++ {
++ test: /\.less$/,
++ use: [
++ require.resolve('style-loader'),
++ require.resolve('css-loader'),
++ {
++ loader: require.resolve('postcss-loader'),
++ options: {
++ ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
++ plugins: () => [
++ require('postcss-flexbugs-fixes'),
++ autoprefixer({
++ browsers: [
++ '>1%',
++ 'last 4 versions',
++ 'Firefox ESR',
++ 'not ie < 9', // React doesn't support IE8 anyway
++ ],
++ flexbox: 'no-2009',
++ }),
++ ],
++ },
++ },
++ {
++ loader: require.resolve('less-loader'),
++ options: {
++ modifyVars: { "@primary-color": "#1DA57A" },
++ },
++ },
++ ],
++ },
+],
```
这里利用了 [less-loader](https://github.com/webpack/less-loader#less-options) 的 `modifyVars` 来进行主题配置，
diff --git a/package.json b/package.json
index 339df88bd2..1ffe860d0b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "antd",
- "version": "2.10.1",
+ "version": "2.10.3",
"title": "Ant Design",
"description": "An enterprise-class UI design language and React-based implementation",
"homepage": "http://ant.design/",
@@ -26,9 +26,11 @@
"url": "https://github.com/ant-design/ant-design/issues"
},
"main": "lib/index.js",
+ "module": "es/index.js",
"files": [
"dist",
- "lib"
+ "lib",
+ "es"
],
"typings": "lib/index.d.ts",
"license": "MIT",
@@ -45,7 +47,7 @@
"omit.js": "^0.1.0",
"prop-types": "^15.5.7",
"rc-animate": "~2.3.0",
- "rc-calendar": "~8.2.0",
+ "rc-calendar": "~8.4.0",
"rc-cascader": "~0.11.0",
"rc-checkbox": "~2.0.0",
"rc-collapse": "~1.7.0",
@@ -80,7 +82,7 @@
"@types/react": "^15.0.8",
"@types/react-dom": "~0.14.18",
"antd-demo-jest": "^1.0.5",
- "antd-tools": "~0.19.1",
+ "antd-tools": "^1.4.2",
"babel-cli": "^6.18.0",
"babel-eslint": "^7.1.0",
"babel-jest": "^19.0.0",
@@ -138,7 +140,7 @@
"rimraf": "^2.5.4",
"stylelint": "^7.8.0",
"stylelint-config-standard": "^16.0.0",
- "typescript": "~2.2.1",
+ "typescript": "~2.3.0",
"typescript-babel-jest": "^1.0.2",
"values.js": "^1.0.3",
"xhr2": "^0.1.3"
@@ -198,8 +200,8 @@
"/_site/"
],
"testPathIgnorePatterns": [
- "dekko",
"/node_modules/",
+ "dekko",
"node"
],
"transform": {
@@ -210,11 +212,13 @@
"testRegex": ".*\\.test\\.js$",
"collectCoverageFrom": [
"components/**/*.{ts,tsx}",
- "!components/*/style/index.tsx"
+ "!components/*/style/index.tsx",
+ "!components/style/index.tsx",
+ "!components/*/locale/index.tsx"
],
"transformIgnorePatterns": [
"/node_modules/",
- "/dist/antd.js"
+ "/dist/"
],
"snapshotSerializers": [
"enzyme-to-json/serializer"
diff --git a/site/theme/static/demo.less b/site/theme/static/demo.less
index b8a9e9dd9f..1363643a3a 100644
--- a/site/theme/static/demo.less
+++ b/site/theme/static/demo.less
@@ -62,6 +62,7 @@
transform: scale(0.9);
background: #fff;
padding-right: 6px;
+ text-decoration: none;
}
&-demo {
diff --git a/site/theme/static/home.less b/site/theme/static/home.less
index 7cdfc51ce4..af9879022a 100644
--- a/site/theme/static/home.less
+++ b/site/theme/static/home.less
@@ -50,6 +50,7 @@
font-weight: 500;
border-radius: @border-radius-base;
border: 1px solid @start-button-color;
+ text-decoration: none;
color: #0ae;
font-size: 15px;
background: transparent;
diff --git a/site/theme/static/markdown.less b/site/theme/static/markdown.less
index 9fbd4c35b5..4c2f155bbb 100644
--- a/site/theme/static/markdown.less
+++ b/site/theme/static/markdown.less
@@ -164,6 +164,7 @@
display: inline-block;
margin-left: 10px;
height: 12px;
+ text-decoration: none;
i {
color: #999;
diff --git a/site/theme/static/page-nav.less b/site/theme/static/page-nav.less
index 7111223a3a..fdbeae444b 100644
--- a/site/theme/static/page-nav.less
+++ b/site/theme/static/page-nav.less
@@ -14,6 +14,7 @@
float: left;
line-height: 72px;
height: 72px;
+ text-decoration: none;
}
> a.prev-page {
diff --git a/tests/index.test.js b/tests/index.test.js
index 67bf37ff3b..e920ee205d 100644
--- a/tests/index.test.js
+++ b/tests/index.test.js
@@ -1,5 +1,3 @@
-import fs from 'fs';
-import path from 'path';
import pkg from '../package.json';
describe('antd dist files', () => {
@@ -13,14 +11,6 @@ describe('antd dist files', () => {
// https://github.com/ant-design/ant-design/issues/1970
// https://github.com/ant-design/ant-design/issues/1804
if (process.env.CI) {
- it('should be compatible in IE8', () => {
- const antdJsContent = fs.readFileSync(path.join(process.cwd(), 'dist', 'antd.js'));
- expect(
- antdJsContent.toString()
- .indexOf('function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }')
- ).toBe(-1);
- });
-
it('should have antd.version', () => {
const antd = require('../dist/antd'); // eslint-disable-line global-require
expect(antd.version).toBe(pkg.version);
diff --git a/tsconfig.json b/tsconfig.json
index fa6a181338..dd6df7d6d7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,6 +5,8 @@
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"jsx": "preserve",
+ "noUnusedParameters": true,
+ "noUnusedLocals": true,
"target": "es6",
"lib": [
"dom",
@@ -12,6 +14,8 @@
]
},
"exclude": [
- "node_modules"
+ "node_modules",
+ "lib",
+ "es"
]
}
diff --git a/webpack.config.js b/webpack.config.js
index c5fcd0f32e..ed5ec6f0a3 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -10,14 +10,6 @@ function ignoreMomentLocale(webpackConfig) {
webpackConfig.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
}
-// Fix ie8 compatibility
-function es3ify(webpackConfig) {
- webpackConfig.module.loaders.unshift({
- test: /\.(tsx|jsx?)$/,
- loader: 'es3ify-loader',
- });
-}
-
function addLocales(webpackConfig) {
let packageName = 'antd-with-locales';
if (webpackConfig.entry['antd.min']) {
@@ -28,10 +20,9 @@ function addLocales(webpackConfig) {
}
module.exports = function (webpackConfig) {
- webpackConfig = getWebpackConfig(webpackConfig);
+ webpackConfig = getWebpackConfig(webpackConfig, true);
if (process.env.RUN_ENV === 'PRODUCTION') {
webpackConfig.forEach((config) => {
- es3ify(config);
ignoreMomentLocale(config);
addLocales(config);
});