resize

.umirc.ts

@@ -3,12 +3,21 @@ import { defineConfig } from 'umi';
 export default defineConfig({
   nodeModulesTransform: {
     type: 'none',
+    exclude: [],
   },
   base: '/',
   history: { type: 'hash' },
+  locale: {
+    title: false,
+    // enable: true,
+    default: 'zh-CN',
+    antd: true,
+    // baseNavigator: true,
+  },
   routes: [
     { path: '/', component: '@/pages/index' },
     { path: '/login', component: '@/pages/login' },
     { path: '/products', component: '@/pages/products' },
+    { path: '/resize', component: '@/pages/resize' },
   ],
 });

package.json

@@ -26,6 +26,7 @@
     "prettier": "^1.19.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-resizable": "^1.10.1",
     "umi": "^3.2.0-beta.6",
     "yorkie": "^2.0.0"
   }

src/components/ProductList.less

@@ -0,0 +1,15 @@
+.tast {
+  /deep/.react-resizable {
+    position: relative;
+    background-clip: padding-box;
+    /deep/ .react-resizable-handle {
+      position: absolute;
+      width: 10px;
+      height: 100%;
+      bottom: 0;
+      right: -5px;
+      cursor: col-resize;
+      z-index: 1;
+    }
+  }
+}

src/components/ProductList.tsx

@@ -1,23 +1,97 @@
 import { Table, Popconfirm, Button } from 'antd';
+import { Resizable } from 'react-resizable';
+import './ProductList.less';
 
-const ProductList = ({ onDelete, products }) => {
-  const columns = [
-    {
-      title: 'Name',
-      dataIndex: 'name',
-    },
-    {
-      title: 'Actions',
-      render: (text, record) => {
-        return (
-          <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
-            <Button>Delete</Button>
-          </Popconfirm>
-        );
-      },
+const ResizeableTitle = props => {
+  const { onResize, width, ...restProps } = props;
+
+  if (!width) {
+    return <th {...restProps} />;
+  }
+  // console.log(88888, width, props);
+  return (
+    <Resizable
+      width={width}
+      height={0}
+      handle={
+        <span
+          className="react-resizable-handle"
+          onClick={e => {
+            e.stopPropagation();
+          }}
+        />
+      }
+      onResize={onResize}
+      draggableOpts={{ enableUserSelectHack: false }}
+    >
+      <th {...restProps} />
+    </Resizable>
+  );
+};
+const components = {
+  header: {
+    cell: ResizeableTitle,
+  },
+};
+const ProductList = state => {
+  // setState
+  const { onDelete, products } = state;
+  // console.log(state);
+
+  let columns = [];
+  const handleResize = index => (e, { size }) => {
+    console.log(size);
+    console.log(setState);
+
+    const nextColumns = [...columns];
+    nextColumns[index] = {
+      ...nextColumns[index],
+      width: size.width,
+    };
+    columns = nextColumns;
+  };
+  for (let i = 0; i < 15; i++) {
+    columns.push({
+      title: `Name${i + 1}`,
+      dataIndex: `name${i + 1}`,
+      width: 100,
+      onHeaderCell: column => ({
+        width: column.width,
+        onResize: handleResize(i),
+      }),
+    });
+  }
+  columns[0].fixed = 'left';
+  columns.push({
+    title: 'Actions',
+    fixed: 'right',
+    render: (text, record) => {
+      return (
+        <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
+          <Button>Delete</Button>
+        </Popconfirm>
+      );
     },
-  ];
-  return <Table dataSource={products} columns={columns} />;
+  });
+
+  function setWidth() {
+    columns[2].width = columns[2].width * 1.1;
+    console.log(2131, columns[2]);
+  }
+
+  return (
+    <div>
+      <Button onClick={e => setWidth()}>12313</Button>
+      <Table
+        bordered
+        className={'tast'}
+        dataSource={products}
+        components={components}
+        scroll={{ x: 1600, y: 340 }}
+        columns={columns}
+      />
+    </div>
+  );
 };
 
 export default ProductList;

src/models/products.ts

@@ -1,9 +1,20 @@
+function data() {
+  const list = [];
+  for (let i = 0; i < 50; i++) {
+    let a = {};
+    for (let j = 0; j < 15; j++) {
+      a[`name${j + 1}`] = `dva${j + 1}`;
+      a['key'] = j + 1;
+    }
+
+    list.push(a);
+  }
+
+  return list;
+}
 export default {
   namespace: 'products',
-  state: [
-    { name: 'dva', id: 'dva', key: 0 },
-    { name: 'antd', id: 'antd', key: 1 },
-  ],
+  state: data(),
   reducers: {
     delete(state, { payload: id }) {
       return state.filter(item => item.id !== id);

src/pages/index.tsx

@@ -4,7 +4,8 @@ import { Button } from 'antd';
 
 export default props => {
   function goto() {
-    console.log(props.history.push('/products'));
+    // console.log(props);
+    console.log(props.history.push('/resize'));
   }
   return (
     <div>

src/pages/resize.less

@@ -0,0 +1,16 @@
+.title {
+  background: rgb(242, 121, 195);
+}
+/deep/.react-resizable {
+  position: relative;
+  background-clip: padding-box;
+  /deep/.react-resizable-handle {
+    position: absolute;
+    width: 10px;
+    height: 100%;
+    bottom: 0;
+    right: -5px;
+    cursor: col-resize;
+    z-index: 1;
+  }
+}

src/pages/resize.tsx

@@ -0,0 +1,125 @@
+import { Table } from 'antd';
+import './resize.less';
+import { Resizable } from 'react-resizable';
+
+const ResizeableTitle = props => {
+  const { onResize, width, ...restProps } = props;
+
+  if (!width) {
+    return <th {...restProps} />;
+  }
+
+  return (
+    <Resizable
+      width={width}
+      height={0}
+      handle={
+        <span
+          className="react-resizable-handle"
+          onClick={e => {
+            e.stopPropagation();
+          }}
+        />
+      }
+      onResize={onResize}
+      draggableOpts={{ enableUserSelectHack: false }}
+    >
+      <th {...restProps} />
+    </Resizable>
+  );
+};
+
+export default class Demo extends React.Component {
+  state = {
+    columns: [
+      {
+        title: 'Date',
+        dataIndex: 'date',
+        width: 200,
+      },
+      {
+        title: 'Amount',
+        dataIndex: 'amount',
+        width: 100,
+        sorter: (a, b) => a.amount - b.amount,
+      },
+      {
+        title: 'Type',
+        dataIndex: 'type',
+        width: 100,
+      },
+      {
+        title: 'Note',
+        dataIndex: 'note',
+        width: 100,
+      },
+      {
+        title: 'Action',
+        key: 'action',
+        render: () => <a>Delete</a>,
+      },
+    ],
+  };
+
+  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 (
+      <Table
+        bordered
+        components={this.components}
+        columns={columns}
+        dataSource={this.data}
+      />
+    );
+  }
+}
+
+// ReactDOM.render(<Demo />, mountNode);