tntd 3.0.0-beta.15 → 3.0.0-beta.16

package/es/modal/style/modal.less

@@ -84,7 +84,7 @@
   }
 
   &-header {
-    padding: @padding-lg @padding-lg @padding-xs;
+    padding: 16px 24px;
     color: @text-color;
     background: @modal-header-bg;
     border: 0;

package/es/table/style/index.less

@@ -276,12 +276,11 @@
   }
 
   &-footer {
-    position: relative;
+    // position: relative;
     padding: @table-padding-vertical @table-padding-horizontal;
     color: @table-footer-color;
     background: @table-footer-bg;
     border-top: @border-width-base @border-style-base @border-color-split;
-    border-radius: 0 0 @table-border-radius-base @table-border-radius-base;
     &::before {
       position: absolute;
       top: -1px;
@@ -293,26 +292,25 @@
     }
   }
 
-  &.@{table-prefix-cls}-bordered &-footer {
-    border: @border-width-base @border-style-base @border-color-split;
-  }
+  // &.@{table-prefix-cls}-bordered &-footer {
+  //   border: @border-width-base @border-style-base @border-color-split;
+  // }
 
   &-title {
-    position: relative;
-    top: 1px;
+    // position: relative;
+    // top: 1px;
     padding: @table-padding-vertical 0;
-    border-radius: @table-border-radius-base @table-border-radius-base 0 0;
   }
 
   &.@{table-prefix-cls}-bordered &-title {
     padding-right: @table-padding-horizontal;
     padding-left: @table-padding-horizontal;
-    border: @border-width-base @border-style-base @border-color-split;
+    border-bottom: @border-width-base @border-style-base @border-color-split;
   }
 
   &-title + &-content {
-    position: relative;
-    border-radius: @table-border-radius-base @table-border-radius-base 0 0;
+    // position: relative;
+    // border-radius: @table-border-radius-base @table-border-radius-base 0 0;
 
     .@{table-prefix-cls}-bordered & {
       &,
@@ -397,41 +395,26 @@
   }
 
   &-bordered {
-    .@{table-prefix-cls}-header > table,
-    .@{table-prefix-cls}-body > table,
-    .@{table-prefix-cls}-fixed-left table,
-    .@{table-prefix-cls}-fixed-right table {
-      border: @border-width-base @border-style-base @border-color-split;
-    }
-
-    .@{table-prefix-cls}-fixed-left table {
-      .@{table-prefix-cls}-hide-cell-borders & {
-        border-right: 0;
-      }
-    }
-
-    .@{table-prefix-cls}-fixed-right table {
-      .@{table-prefix-cls}-hide-cell-borders & {
-        border-left: 0;
-      }
-    }
-
-    .@{table-prefix-cls}-body > table {
-      border-radius: @border-radius-base;
-    }
+    border: @border-width-base @border-style-base @border-color-split;
+    border-radius: @border-radius-base;
+    overflow: hidden;
+    // .@{table-prefix-cls}-header > table,
+    // .@{table-prefix-cls}-body > table,
+    // .@{table-prefix-cls}-fixed-left table,
+    // .@{table-prefix-cls}-fixed-right table {
+    //   border: @border-width-base @border-style-base @border-color-split;
+    //   border-right: 0;
+    //   border-bottom: 0;
+    // }
 
     &.@{table-prefix-cls}-empty {
       .@{table-prefix-cls}-body > table {
         border-radius: @border-radius-base @border-radius-base 0 0;
       }
       .@{table-prefix-cls}-placeholder {
-        border: @border-width-base @border-style-base @border-color-split;
-        border-top: none;
-        border-radius: 0 0 @border-radius-base @border-radius-base;
-        .@{table-prefix-cls}-has-footer & {
-          border-bottom: none;
-          border-radius: 0;
-        }
+        // border-right: @border-width-base @border-style-base @border-color-split;
+        // border-left: @border-width-base @border-style-base @border-color-split;
+        border-bottom: 0;
       }
     }
 
@@ -459,24 +442,27 @@
     .@{table-prefix-cls}-tbody > tr > td {
       border-right: @border-width-base @border-style-base @border-color-split;
       &:last-child {
-        border-right: none;
+        border-right: 0;
       }
     }
-    .@{table-prefix-cls}-tbody > tr:last-child {
-      & > td {
-        border-bottom: none;
-        &:first-child {
-          border-bottom-left-radius: @border-radius-base;
+    .@{table-prefix-cls}-fixed-left {
+      .@{table-prefix-cls}-thead > tr > th,
+      .@{table-prefix-cls}-tbody > tr > td {
+        &:last-child {
+          border-right: @border-width-base @border-style-base @border-color-split;
         }
       }
     }
-
-    .@{table-prefix-cls}-tbody > tr:last-child > td:last-child {
-      border-bottom-right-radius: @border-radius-base;
-      .@{table-prefix-cls}-has-footer & {
-        border-bottom-right-radius: 0;
+    .@{table-prefix-cls}-content:has(.@{table-prefix-cls}-fixed-right) .@{table-prefix-cls}-scroll {
+      .@{table-prefix-cls}-thead > tr > th {
+        &:last-child {
+          border-right: @border-width-base @border-style-base @border-color-split;
+        }
       }
     }
+    .@{table-prefix-cls}-tbody > tr:last-child > td {
+      border-bottom: 0;
+    }
   }
 
   &-placeholder {
@@ -488,12 +474,9 @@
     font-size: @font-size-base;
     text-align: center;
     background: @component-background;
-    // border-top: @border-width-base @border-style-base @border-color-split;
-    // border-bottom: @border-width-base @border-style-base @border-color-split;
-    border-radius: @border-radius-base;
-    .@{table-prefix-cls}-has-footer & {
-      border-radius: 0;
-    }
+    border-top: @border-width-base @border-style-base @border-color-split;
+    border-bottom: @border-width-base @border-style-base @border-color-split;
+    // border-radius: 0 0 @border-radius-base @border-radius-base;
   }
 
   &-pagination.@{ant-prefix}-pagination {

package/es/table/table.less

@@ -24,9 +24,9 @@
     .@{table-prefix-cls}-small {
       border: none;
 
-      > .ant-table-content .ant-table-row:last-child td {
+      // > .ant-table-content .ant-table-row:last-child td {
         // border-bottom: @border-width-base @border-style-base @border-color-split;
-      }
+      // }
     }
   }
 
@@ -52,9 +52,9 @@
   }
 
   &.@{table-prefix-cls}-hide-cell-borders {
-    .@{table-prefix-cls}-thead > tr > th:not(:last-child),
-    .@{table-prefix-cls}-tbody > tr > td:not(:last-child) {
-      border-right: none;
+    .@{table-prefix-cls}-thead > tr > th,
+    .@{table-prefix-cls}-tbody > tr > td {
+      border-right: none !important;
     }
   }
   &.@{table-prefix-cls}-hide-cell-borders {
@@ -97,6 +97,7 @@
   .@{table-prefix-cls}-placeholder {
     padding-top: @table-padding-horizontal;
     padding-bottom: @table-padding-horizontal;
+    border-bottom: 0;
   }
 
   // customize the loading of table

package/es/table/table.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Tag from '../tag';
-import { Table } from './';
+import { Table } from '.';
 const {
   Column,
   ColumnGroup
@@ -160,4 +160,415 @@ ColumnFilter.args = {
     showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} items`
   },
   loading: false
-};
+};
+export const All = () => {
+  const dataSource = [{
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号'
+  }, {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号'
+  }];
+  const dataSource2 = [{
+    key: 1,
+    name: 'John Brown sr.',
+    age: 60,
+    address: 'New York No. 1 Lake Park',
+    children: [{
+      key: 11,
+      name: 'John Brown',
+      age: 42,
+      address: 'New York No. 2 Lake Park'
+    }, {
+      key: 12,
+      name: 'John Brown jr.',
+      age: 30,
+      address: 'New York No. 3 Lake Park',
+      children: [{
+        key: 121,
+        name: 'Jimmy Brown',
+        age: 16,
+        address: 'New York No. 3 Lake Park'
+      }]
+    }, {
+      key: 13,
+      name: 'Jim Green sr.',
+      age: 72,
+      address: 'London No. 1 Lake Park',
+      children: [{
+        key: 131,
+        name: 'Jim Green',
+        age: 42,
+        address: 'London No. 2 Lake Park',
+        children: [{
+          key: 1311,
+          name: 'Jim Green jr.',
+          age: 25,
+          address: 'London No. 3 Lake Park'
+        }, {
+          key: 1312,
+          name: 'Jimmy Green sr.',
+          age: 18,
+          address: 'London No. 4 Lake Park'
+        }]
+      }]
+    }]
+  }, {
+    key: 2,
+    name: 'Joe Black',
+    age: 32,
+    address: 'Sidney No. 1 Lake Park'
+  }];
+  const dataSource3 = [];
+  for (let i = 0; i < 100; i++) {
+    dataSource3.push({
+      key: i,
+      name: `Edward King ${i}`,
+      age: 32,
+      address: `London, Park Lane no. ${i}`
+    });
+  }
+  const columns = [{
+    title: '姓名',
+    dataIndex: 'name',
+    key: 'name'
+  }, {
+    title: '年龄',
+    dataIndex: 'age',
+    key: 'age'
+  }, {
+    title: '住址',
+    dataIndex: 'address',
+    key: 'address'
+  }];
+  // const columns2 = [
+  //   {
+  //     title: 'Full Name',
+  //     width: 100,
+  //     dataIndex: 'name',
+  //     key: 'name',
+  //     fixed: 'left',
+  //   },
+  //   {
+  //     title: 'Age',
+  //     width: 100,
+  //     dataIndex: 'age',
+  //     key: 'age',
+  //     fixed: 'left',
+  //   },
+  //   { title: 'Column 1', dataIndex: 'address', key: '1' },
+  //   { title: 'Column 2', dataIndex: 'address', key: '2' },
+  //   { title: 'Column 3', dataIndex: 'address', key: '3' },
+  //   { title: 'Column 4', dataIndex: 'address', key: '4' },
+  //   { title: 'Column 5', dataIndex: 'address', key: '5' },
+  //   { title: 'Column 6', dataIndex: 'address', key: '6' },
+  //   { title: 'Column 7', dataIndex: 'address', key: '7' },
+  //   { title: 'Column 8', dataIndex: 'address', key: '8' },
+  //   {
+  //     title: 'Action',
+  //     key: 'operation',
+  //     fixed: 'right',
+  //     width: 100,
+  //     render: () => <a>action</a>,
+  //   },
+  // ]
+  const columns1 = [{
+    title: 'Full Name',
+    width: 120,
+    dataIndex: 'name',
+    key: 'name'
+  }, {
+    title: 'Age',
+    width: 100,
+    dataIndex: 'age',
+    key: 'age'
+  }, {
+    title: 'Column 1',
+    dataIndex: 'address',
+    key: '1',
+    width: 150
+  }, {
+    title: 'Column 2',
+    dataIndex: 'address',
+    key: '2',
+    width: 150
+  }, {
+    title: 'Column 3',
+    dataIndex: 'address',
+    key: '3',
+    width: 150
+  }, {
+    title: 'Column 4',
+    dataIndex: 'address',
+    key: '4',
+    width: 150
+  }, {
+    title: 'Column 5',
+    dataIndex: 'address',
+    key: '5',
+    width: 150
+  }, {
+    title: 'Column 6',
+    dataIndex: 'address',
+    key: '6',
+    width: 150
+  }, {
+    title: 'Column 7',
+    dataIndex: 'address',
+    key: '7',
+    width: 150
+  }, {
+    title: 'Column 8',
+    dataIndex: 'address',
+    key: '8',
+    width: 150
+  }, {
+    title: 'Action',
+    key: 'operation',
+    width: 200,
+    render: () => React.createElement("a", null, "action")
+  }];
+  const columns2 = [{
+    title: 'Full Name',
+    width: 120,
+    dataIndex: 'name',
+    key: 'name',
+    fixed: 'left'
+  }, {
+    title: 'Age',
+    width: 100,
+    dataIndex: 'age',
+    key: 'age',
+    fixed: 'left'
+  }, {
+    title: 'Column 1',
+    dataIndex: 'address',
+    key: '1',
+    width: 150
+  }, {
+    title: 'Column 2',
+    dataIndex: 'address',
+    key: '2',
+    width: 150
+  }, {
+    title: 'Column 3',
+    dataIndex: 'address',
+    key: '3',
+    width: 150
+  }, {
+    title: 'Column 4',
+    dataIndex: 'address',
+    key: '4',
+    width: 150
+  }, {
+    title: 'Column 5',
+    dataIndex: 'address',
+    key: '5',
+    width: 150
+  }, {
+    title: 'Column 6',
+    dataIndex: 'address',
+    key: '6',
+    width: 150
+  }, {
+    title: 'Column 7',
+    dataIndex: 'address',
+    key: '7',
+    width: 150
+  }, {
+    title: 'Column 8',
+    dataIndex: 'address',
+    key: '8',
+    width: 150
+  }, {
+    title: 'Action',
+    key: 'operation',
+    width: 200,
+    render: () => React.createElement("a", null, "action")
+  }];
+  const columns3 = [{
+    title: 'Full Name',
+    width: 120,
+    dataIndex: 'name',
+    key: 'name'
+  }, {
+    title: 'Age',
+    width: 100,
+    dataIndex: 'age',
+    key: 'age'
+  }, {
+    title: 'Column 1',
+    dataIndex: 'address',
+    key: '1',
+    width: 150
+  }, {
+    title: 'Column 2',
+    dataIndex: 'address',
+    key: '2',
+    width: 150
+  }, {
+    title: 'Column 3',
+    dataIndex: 'address',
+    key: '3',
+    width: 150
+  }, {
+    title: 'Column 4',
+    dataIndex: 'address',
+    key: '4',
+    width: 150
+  }, {
+    title: 'Column 5',
+    dataIndex: 'address',
+    key: '5',
+    width: 150
+  }, {
+    title: 'Column 6',
+    dataIndex: 'address',
+    key: '6',
+    width: 150
+  }, {
+    title: 'Column 7',
+    dataIndex: 'address',
+    key: '7',
+    width: 150
+  }, {
+    title: 'Column 8',
+    dataIndex: 'address',
+    key: '8',
+    width: 150
+  }, {
+    title: 'Action',
+    key: 'operation',
+    fixed: 'right',
+    width: 200,
+    render: () => React.createElement("a", null, "action")
+  }];
+  const columns4 = [{
+    title: 'Full Name',
+    width: 120,
+    dataIndex: 'name',
+    key: 'name',
+    fixed: 'left'
+  }, {
+    title: 'Age',
+    width: 100,
+    dataIndex: 'age',
+    key: 'age',
+    fixed: 'left'
+  }, {
+    title: 'Column 1',
+    dataIndex: 'address',
+    key: '1',
+    width: 150
+  }, {
+    title: 'Column 2',
+    dataIndex: 'address',
+    key: '2',
+    width: 150
+  }, {
+    title: 'Column 3',
+    dataIndex: 'address',
+    key: '3',
+    width: 150
+  }, {
+    title: 'Column 4',
+    dataIndex: 'address',
+    key: '4',
+    width: 150
+  }, {
+    title: 'Column 5',
+    dataIndex: 'address',
+    key: '5',
+    width: 150
+  }, {
+    title: 'Column 6',
+    dataIndex: 'address',
+    key: '6',
+    width: 150
+  }, {
+    title: 'Column 7',
+    dataIndex: 'address',
+    key: '7',
+    width: 150
+  }, {
+    title: 'Column 8',
+    dataIndex: 'address',
+    key: '8',
+    width: 150
+  }, {
+    title: 'Action',
+    key: 'operation',
+    fixed: 'right',
+    width: 200,
+    render: () => React.createElement("a", null, "action")
+  }];
+  const style = {
+    marginBottom: 20
+  };
+  const propsMap = {
+    bordered: [true, false],
+    // bordered: [true],
+    showCellBorders: [true, false],
+    // showCellBorders: [true],
+    striped: [true, false],
+    shadowed: [true, false],
+    // scroll: [{ x: 1600 }, { y: 240 }, { x: 1600, y: 300 }],
+    scroll: [{
+      x: 1600
+    }, {
+      x: 1600,
+      y: 300
+    }],
+    columns: [columns1, columns2, columns3, columns4],
+    // size: ['default', 'middle', 'small'],
+    size: ['default'],
+    dataSource: [dataSource3, []]
+    // dataSource: [[]],
+  };
+  const propsList = Object.keys(propsMap).reduce((arr, key) => {
+    const data = propsMap[key];
+    if (arr.length === 0) {
+      return data.map(value => ({
+        [key]: value
+      }));
+    } else {
+      let back = [];
+      for (let i = 0; i < data.length; i++) {
+        const value = data[i];
+        for (let j = 0; j < arr.length; j++) {
+          const item = arr[j];
+          back.push(Object.assign(Object.assign({}, item), {
+            [key]: value
+          }));
+        }
+      }
+      return back;
+    }
+  }, []);
+  return React.createElement("div", {
+    style: {
+      background: '#fff',
+      padding: 20
+    }
+  }, propsList.map((props, i) => React.createElement(Table, Object.assign({}, props, {
+    key: i,
+    style: style,
+    pagination: {
+      pageSize: 5
+    }
+  }))));
+};
+All.args = {};
+/*
+bordered 边框 2
+striped 斑马线 2
+shadowed 阴影 2
+showCellBorders 单元格边框  2
+scroll 滚动 3
+fixed 是否固定 3
+size: 3
+*/