{
+ const { onResize, width, ...restProps } = props;
+
+ if (!width) {
+ return
| ;
+ }
+
+ return (
+
+ |
+
+ );
+};
+
+class Demo extends React.Component {
+ state = {
+ columns: [{
+ title: 'Date',
+ dataIndex: 'date',
+ width: 200,
+ }, {
+ title: 'Amount',
+ dataIndex: 'amount',
+ width: 100,
+ }, {
+ title: 'Type',
+ dataIndex: 'type',
+ width: 100,
+ }, {
+ title: 'Note',
+ dataIndex: 'note',
+ width: 100,
+ }, {
+ title: 'Action',
+ key: 'action',
+ render: () => (
+
Delete
+ ),
+ }],
+ };
+
+ components = {
+ header: {
+ cell: ResizeableTitle,
+ },
+ };
+
+ data = [{
+ key: 0,
+ date: '2018-02-11',
+ amount: 120,
+ type: 'income',
+ note: 'transfer',
+ }, {
+ key: 1,
+ date: '2018-03-11',
+ amount: 243,
+ type: 'income',
+ note: 'transfer',
+ }, {
+ key: 2,
+ date: '2018-04-11',
+ amount: 98,
+ type: 'income',
+ note: 'transfer',
+ }];
+
+ handleResize = index => (e, { size }) => {
+ this.setState(({ columns }) => {
+ const nextColumns = [...columns];
+ nextColumns[index] = {
+ ...nextColumns[index],
+ width: size.width,
+ };
+ return { columns: nextColumns };
+ });
+ };
+
+ render() {
+ const columns = this.state.columns.map((col, index) => ({
+ ...col,
+ onHeaderCell: column => ({
+ width: column.width,
+ onResize: this.handleResize(index),
+ }),
+ }));
+
+ return (
+
+ );
+ }
+}
+
+
+ReactDOM.render(
, mountNode);
+````
+
+````css
+#components-table-demo-resizable-column .react-resizable {
+ position: relative;
+}
+
+#components-table-demo-resizable-column .react-resizable-handle {
+ position: absolute;
+ width: 10px;
+ height: 100%;
+ bottom: 0;
+ right: -5px;
+ cursor: col-resize;
+}
+````
diff --git a/components/tree/style/index.less b/components/tree/style/index.less
index dfe9ece962..407c5a6373 100644
--- a/components/tree/style/index.less
+++ b/components/tree/style/index.less
@@ -31,10 +31,11 @@
user-select: none;
border-top: 2px transparent solid;
border-bottom: 2px transparent solid;
- margin-top: -2px;
/* Required to make elements draggable in old WebKit */
-khtml-user-drag: element;
-webkit-user-drag: element;
+
+ line-height: @tree-title-height - 4px;
}
&.drag-over {
> span[draggable] {
diff --git a/docs/spec/colors.zh-CN.md b/docs/spec/colors.zh-CN.md
index 2b9019d693..675d641d26 100644
--- a/docs/spec/colors.zh-CN.md
+++ b/docs/spec/colors.zh-CN.md
@@ -30,6 +30,8 @@ ReactDOM.render(
, mountNode);
Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序员的精心调制，结合了色彩自然变化的规律，我们得出了一套色彩生成工具，当有进一步色彩设计需求时，设计者只需按照一定规则定义完毕主色，便可以自动获得一系列完整的衍生色。
+> Ant Design 三代色板的历史可以参看社区文章：[Ant Design 色板生成算法演进之路](https://zhuanlan.zhihu.com/p/32422584)。
+
### 中性色板
中性色包含了黑、白、灰。在蚂蚁中后台的网页设计中被大量使用到，合理的选择中性色能够令页面信息具备良好的主次关系，助力阅读体验。Ant Design 的中性色板一共包含了从白到黑的 10 个颜色。
diff --git a/package.json b/package.json
index 7ffa26bedb..260468763c 100644
--- a/package.json
+++ b/package.json
@@ -158,6 +158,7 @@
"react-github-button": "^0.1.1",
"react-infinite-scroller": "^1.0.15",
"react-intl": "^2.0.1",
+ "react-resizable": "^1.7.5",
"react-router-dom": "^4.2.2",
"react-sublime-video": "^0.2.0",
"react-virtualized": "~9.20.0",
@@ -196,7 +197,7 @@
"start": "rimraf _site && mkdir _site && node ./scripts/generateColorLess.js && cross-env NODE_ENV=development bisheng start -c ./site/bisheng.config.js",
"start:preact": "node ./scripts/generateColorLess.js && cross-env NODE_ENV=development REACT_ENV=preact bisheng start -c ./site/bisheng.config.js",
"site": "cross-env NODE_ENV=production bisheng build --ssr -c ./site/bisheng.config.js && node ./scripts/generateColorLess.js",
- "predeploy": "antd-tools run clean && npm run site && cp netlify.toml _site",
+ "predeploy": "antd-tools run clean && npm run site && cp netlify.toml _site && cp -r .circleci _site",
"deploy": "bisheng gh-pages --push-only",
"pub": "antd-tools run pub",
"prepublish": "antd-tools run guard",