From fb0d3cf20fe88a05fb61f02eca8fbdf41de0145a Mon Sep 17 00:00:00 2001 From: zhaoge <> Date: Thu, 4 Aug 2022 11:23:51 +0800 Subject: [PATCH 1/3] feat: resize table --- components/table/demo/resize.md | 127 ++++++++++++++++++++++++++++++++ package.json | 3 +- yarn.lock | 21 ++++++ 3 files changed, 150 insertions(+), 1 deletion(-) create mode 100644 components/table/demo/resize.md diff --git a/components/table/demo/resize.md b/components/table/demo/resize.md new file mode 100644 index 00000000..332932ca --- /dev/null +++ b/components/table/demo/resize.md @@ -0,0 +1,127 @@ +--- +order: 8 +title: + zh-CN: 可伸缩列 +--- + +## zh-CN + +伸缩表格在表头中间显示分割线，表格移入显示鼠标变十字，用户可左右拖动表格列宽，内容跟随拉伸大小变化，内容显示超出最大显示范围需要打点； + + +```jsx +import { Table } from 'antd'; +import { Resizable } from 'react-resizable'; + +const columns = [ + { title: 'Name', dataIndex: 'name', key: 'name', width: 200, fixed: 'left', }, + { title: 'Age', dataIndex: 'age', key: 'age', width: 100 }, + { title: 'Address', dataIndex: 'address', key: 'address', width: 200, ellipsis: true }, + { title: 'description', dataIndex: 'description', key: 'description', width: 400 }, + { + title: 'Action', + dataIndex: '', + width: 200, + key: 'x', + fixed: 'right', + render: (text, record) => ( + + Invite + Delete + + ), + }, +]; + +const data = [ + { + key: 1, + name: 'John Brown', + age: 32, + address: 'New York No. 1 Lake Park New York No. 1 Lake Park', + description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.', + }, + { + key: 2, + name: 'Jim Green', + age: 42, + address: 'London No. 1 Lake Park', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.', + }, + { + key: 3, + name: 'Not Expandable', + age: 29, + address: 'Jiangsu No. 1 Lake Park', + description: 'I am 42 years old, living in London No. 1 Lake Park.', + }, + { + key: 4, + name: 'Joe Black', + age: 32, + address: 'Sidney No. 1 Lake Park', + description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.', + }, +]; +const ResizeableTitle = props => { + const { onResize, width, ...restProps } = props; + + if (!width) { + return ; + } + + return ( + + + + ); +}; +const pagination = { + current: 1, + pageSize: 10, + size: 'small', + total: 30, + showTotal: (total) => + 共{total}条数据，每页显示15条 + +} + +const columnsNew = columns.map((col, index) => ({ + ...col, + onHeaderCell: column => ({ + width: column.width, + onResize: handleResize(index), + }), + })); +function handleResize = index => (e, { size }) => { + this.setState(({ columns }) => { + const nextColumns = [...columns]; + nextColumns[index] = { + ...nextColumns[index], + width: size.width, + }; + return { columns: nextColumns }; + }); +}; +const components = { + header: { + cell: ResizeableTitle, + }, +}; +ReactDOM.render( + , + mountNode, +); +``` diff --git a/package.json b/package.json index 5f81f67e..dd41f230 100755 --- a/package.json +++ b/package.json @@ -45,7 +45,8 @@ "rimraf": "^2.6.3", "scrollama": "^2.0.0", "standard-version": "7.0.1", - "url-loader": "^4.1.0" + "url-loader": "^4.1.0", + "react-resizable": "^3.0.4" }, "config": { "commitizen": { diff --git a/yarn.lock b/yarn.lock index 8e6a446e..085fb08e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3015,6 +3015,11 @@ clone@^2.1.1, clone@^2.1.2: resolved "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f" integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w== +clsx@^1.1.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" + integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== + code-point-at@^1.0.0: version "1.1.0" resolved "https://registry.npmmirror.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77" @@ -9230,6 +9235,14 @@ react-dom@^16.0.0: prop-types "^15.6.2" scheduler "^0.19.1" +react-draggable@^4.0.3: + version "4.4.5" + resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.5.tgz#9e37fe7ce1a4cf843030f521a0a4cc41886d7e7c" + integrity sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g== + dependencies: + clsx "^1.1.1" + prop-types "^15.8.1" + react-error-overlay@^3.0.0: version "3.0.0" resolved "https://registry.npmmirror.com/react-error-overlay/-/react-error-overlay-3.0.0.tgz#c2bc8f4d91f1375b3dad6d75265d51cd5eeaf655" @@ -9271,6 +9284,14 @@ react-lifecycles-compat@^3.0.4: resolved "https://registry.npmmirror.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== +react-resizable@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/react-resizable/-/react-resizable-3.0.4.tgz#aa20108eff28c52c6fddaa49abfbef8abf5e581b" + integrity sha512-StnwmiESiamNzdRHbSSvA65b0ZQJ7eVQpPusrSmcpyGKzC0gojhtO62xxH6YOBmepk9dQTBi9yxidL3W4s3EBA== + dependencies: + prop-types "15.x" + react-draggable "^4.0.3" + react-router@^3.0.0: version "3.2.6" resolved "https://registry.npmmirror.com/react-router/-/react-router-3.2.6.tgz#cad202796a7bba3efc2100da453b3379c9d4aeb4" From 50c93a301472d4701a2cc061cd0e7f8ee9908190 Mon Sep 17 00:00:00 2001 From: zhaoge <> Date: Thu, 4 Aug 2022 15:23:14 +0800 Subject: [PATCH 2/3] fix: style fix(#123) --- components/table/demo/resize.md | 127 ----------------------------- package.json | 3 +- theme/dt-theme/default/button.less | 29 +++++-- yarn.lock | 21 ----- 4 files changed, 25 insertions(+), 155 deletions(-) delete mode 100644 components/table/demo/resize.md diff --git a/components/table/demo/resize.md b/components/table/demo/resize.md deleted file mode 100644 index 332932ca..00000000 --- a/components/table/demo/resize.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -order: 8 -title: - zh-CN: 可伸缩列 ---- - -## zh-CN - -伸缩表格在表头中间显示分割线，表格移入显示鼠标变十字，用户可左右拖动表格列宽，内容跟随拉伸大小变化，内容显示超出最大显示范围需要打点； - - -```jsx -import { Table } from 'antd'; -import { Resizable } from 'react-resizable'; - -const columns = [ - { title: 'Name', dataIndex: 'name', key: 'name', width: 200, fixed: 'left', }, - { title: 'Age', dataIndex: 'age', key: 'age', width: 100 }, - { title: 'Address', dataIndex: 'address', key: 'address', width: 200, ellipsis: true }, - { title: 'description', dataIndex: 'description', key: 'description', width: 400 }, - { - title: 'Action', - dataIndex: '', - width: 200, - key: 'x', - fixed: 'right', - render: (text, record) => ( - - Invite - Delete - - ), - }, -]; - -const data = [ - { - key: 1, - name: 'John Brown', - age: 32, - address: 'New York No. 1 Lake Park New York No. 1 Lake Park', - description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.', - }, - { - key: 2, - name: 'Jim Green', - age: 42, - address: 'London No. 1 Lake Park', - description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.', - }, - { - key: 3, - name: 'Not Expandable', - age: 29, - address: 'Jiangsu No. 1 Lake Park', - description: 'I am 42 years old, living in London No. 1 Lake Park.', - }, - { - key: 4, - name: 'Joe Black', - age: 32, - address: 'Sidney No. 1 Lake Park', - description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.', - }, -]; -const ResizeableTitle = props => { - const { onResize, width, ...restProps } = props; - - if (!width) { - return
; - } - - return ( - - - - ); -}; -const pagination = { - current: 1, - pageSize: 10, - size: 'small', - total: 30, - showTotal: (total) => - 共{total}条数据，每页显示15条 - -} - -const columnsNew = columns.map((col, index) => ({ - ...col, - onHeaderCell: column => ({ - width: column.width, - onResize: handleResize(index), - }), - })); -function handleResize = index => (e, { size }) => { - this.setState(({ columns }) => { - const nextColumns = [...columns]; - nextColumns[index] = { - ...nextColumns[index], - width: size.width, - }; - return { columns: nextColumns }; - }); -}; -const components = { - header: { - cell: ResizeableTitle, - }, -}; -ReactDOM.render( - , - mountNode, -); -``` diff --git a/package.json b/package.json index dd41f230..5f81f67e 100755 --- a/package.json +++ b/package.json @@ -45,8 +45,7 @@ "rimraf": "^2.6.3", "scrollama": "^2.0.0", "standard-version": "7.0.1", - "url-loader": "^4.1.0", - "react-resizable": "^3.0.4" + "url-loader": "^4.1.0" }, "config": { "commitizen": { diff --git a/theme/dt-theme/default/button.less b/theme/dt-theme/default/button.less index e32576c7..16f7315d 100644 --- a/theme/dt-theme/default/button.less +++ b/theme/dt-theme/default/button.less @@ -116,8 +116,8 @@ } .ant-btn-danger.ant-btn:hover { color: @white; - background-color: @red2 !important; - border-color: @red2; + background-color: #ED5340 !important; + border-color: #ED5340; } .ant-btn-danger.ant-btn:active, .ant-btn-danger.ant-btn.active { @@ -131,9 +131,9 @@ border-color: @red; } .ant-btn-background-ghost.ant-btn-danger:hover, .ant-btn-background-ghost.ant-btn-danger:focus { - color: @white; - background-color: @red2 !important; - border-color: @red2; + color: @red; + border-color: @red; + background-color: @white !important; } .ant-btn-background-ghost.ant-btn-danger:active, .ant-btn-background-ghost.ant-btn-danger.active { @@ -141,6 +141,12 @@ background-color: @red !important; border-color: @red; } +.ant-btn.ant-btn-default.ant-btn-background-ghost.dt-btn-custom-icon:not([disabled]){ + &:hover{ + color: @primaryColor; + border-color: @primaryColor; + } +} .ant-btn-danger-disabled, .ant-btn-danger.disabled, @@ -239,3 +245,16 @@ margin-top: 2px; } } +.ant-btn.ant-btn-default:not([disabled]), .ant-btn.ant-btn-default.ant-btn-background-ghost:not([disabled]){ + &:hover{ + border-color: @hoverColor; + color: @hoverColor; + background-color: @white !important; + } +} +.ant-btn.ant-btn-default.dt-btn-highlight:not([disabled]){ + &:hover{ + color: @primaryColor; + border-color: @primaryColor; + } +} diff --git a/yarn.lock b/yarn.lock index 085fb08e..8e6a446e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3015,11 +3015,6 @@ clone@^2.1.1, clone@^2.1.2: resolved "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f" integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w== -clsx@^1.1.1: - version "1.2.1" - resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" - integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== - code-point-at@^1.0.0: version "1.1.0" resolved "https://registry.npmmirror.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77" @@ -9235,14 +9230,6 @@ react-dom@^16.0.0: prop-types "^15.6.2" scheduler "^0.19.1" -react-draggable@^4.0.3: - version "4.4.5" - resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.5.tgz#9e37fe7ce1a4cf843030f521a0a4cc41886d7e7c" - integrity sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g== - dependencies: - clsx "^1.1.1" - prop-types "^15.8.1" - react-error-overlay@^3.0.0: version "3.0.0" resolved "https://registry.npmmirror.com/react-error-overlay/-/react-error-overlay-3.0.0.tgz#c2bc8f4d91f1375b3dad6d75265d51cd5eeaf655" @@ -9284,14 +9271,6 @@ react-lifecycles-compat@^3.0.4: resolved "https://registry.npmmirror.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== -react-resizable@^3.0.4: - version "3.0.4" - resolved "https://registry.yarnpkg.com/react-resizable/-/react-resizable-3.0.4.tgz#aa20108eff28c52c6fddaa49abfbef8abf5e581b" - integrity sha512-StnwmiESiamNzdRHbSSvA65b0ZQJ7eVQpPusrSmcpyGKzC0gojhtO62xxH6YOBmepk9dQTBi9yxidL3W4s3EBA== - dependencies: - prop-types "15.x" - react-draggable "^4.0.3" - react-router@^3.0.0: version "3.2.6" resolved "https://registry.npmmirror.com/react-router/-/react-router-3.2.6.tgz#cad202796a7bba3efc2100da453b3379c9d4aeb4" From 1b3f2b842775adf9ac15bfded457a9c7b65fd26f Mon Sep 17 00:00:00 2001 From: zhaoge <> Date: Thu, 4 Aug 2022 15:43:09 +0800 Subject: [PATCH 3/3] style: style fix input(#130) --- theme/dt-theme/default/input.less | 3 +++ 1 file changed, 3 insertions(+) diff --git a/theme/dt-theme/default/input.less b/theme/dt-theme/default/input.less index 26a4a2c7..a8289614 100644 --- a/theme/dt-theme/default/input.less +++ b/theme/dt-theme/default/input.less @@ -45,4 +45,7 @@ } .ant-input-search > .ant-input-group > .ant-input-group-addon:last-child .ant-input-search-button:not(.ant-btn-primary){ border: solid 1px #D8DAE1; + &:hover{ + border: solid 1px @primaryColor; + } }