tntd 2.8.0-beta.15 → 2.8.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

@@ -258,12 +258,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;
@@ -275,26 +274,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 & {
       &,
@@ -375,19 +373,23 @@
   }
 
   &-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;
-      border-right: 0;
-      border-bottom: 0;
-    }
+    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}-placeholder {
-        border-right: @border-width-base @border-style-base @border-color-split;
-        border-left: @border-width-base @border-style-base @border-color-split;
+        // 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;
       }
     }
 
@@ -414,6 +416,27 @@
     .@{table-prefix-cls}-thead > tr > th,
     .@{table-prefix-cls}-tbody > tr > td {
       border-right: @border-width-base @border-style-base @border-color-split;
+      &:last-child {
+        border-right: 0;
+      }
+    }
+    .@{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}-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;
     }
   }
 
@@ -428,7 +451,7 @@
     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: 0 0 @border-radius-base @border-radius-base;
+    // border-radius: 0 0 @border-radius-base @border-radius-base;
   }
 
   &-pagination.@{ant-prefix}-pagination {
@@ -604,7 +627,8 @@
     }
 
     td > .@{table-prefix-cls}-wrapper {
-      margin: -@table-padding-vertical -@table-padding-horizontal calc(-@table-padding-vertical - 1px);
+      margin: -@table-padding-vertical -@table-padding-horizontal
+        calc(-@table-padding-vertical - 1px);
     }
   }
 

package/es/table/style_/index.js

@@ -0,0 +1,10 @@
+import '../../style/index.less';
+import './index.less';
+// style dependencies
+// deps-lint-skip: menu
+import '../../empty/style';
+import '../../radio/style';
+import '../../checkbox/style';
+import '../../dropdown/style';
+import '../../spin/style';
+import '../../pagination/style';

package/es/table/style_/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/table/style_/index.tsx"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAA;AAC/B,OAAO,cAAc,CAAA;AAErB,qBAAqB;AACrB,uBAAuB;AACvB,OAAO,mBAAmB,CAAA;AAC1B,OAAO,mBAAmB,CAAA;AAC1B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,kBAAkB,CAAA;AACzB,OAAO,wBAAwB,CAAA","sourcesContent":["import '../../style/index.less'\nimport './index.less'\n\n// style dependencies\n// deps-lint-skip: menu\nimport '../../empty/style'\nimport '../../radio/style'\nimport '../../checkbox/style'\nimport '../../dropdown/style'\nimport '../../spin/style'\nimport '../../pagination/style'\n"]}

package/es/table/style_antd/index.js

@@ -0,0 +1,10 @@
+import '../../style/index.less';
+import './index.less';
+// style dependencies
+// deps-lint-skip: menu
+import '../../empty/style';
+import '../../radio/style';
+import '../../checkbox/style';
+import '../../dropdown/style';
+import '../../spin/style';
+import '../../pagination/style';

package/es/table/style_antd/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/table/style_antd/index.tsx"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAC;AAChC,OAAO,cAAc,CAAC;AAEtB,qBAAqB;AACrB,uBAAuB;AACvB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,wBAAwB,CAAC","sourcesContent":["import '../../style/index.less';\nimport './index.less';\n\n// style dependencies\n// deps-lint-skip: menu\nimport '../../empty/style';\nimport '../../radio/style';\nimport '../../checkbox/style';\nimport '../../dropdown/style';\nimport '../../spin/style';\nimport '../../pagination/style';\n"]}

package/es/table/table.less

@@ -3,9 +3,8 @@
 @spin-prefix-cls: ~'@{ant-prefix}-spin';
 @table-borderless-shadow: 0 0 14px rgba(0, 0, 0, 0.08);
 
-
 // .@{table-prefix-cls} {
-.tnt-table-wrapper{
+.tnt-table-wrapper {
   background-color: @white;
   border-radius: @border-radius-base;
 
@@ -30,9 +29,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;
     }
   }
 
@@ -68,6 +67,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
+*/