feat: add more additional class wrapper for style usage

react-component · Nov 12, 2019 · c475bd7 · c475bd7 · vercel · Nov 12, 2019
1 parent 9abc6c4
commit c475bd7
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 10 deletions.
diff --git a/assets/index.less b/assets/index.less
@@ -90,6 +90,18 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+
+      // Fixed first or last should special process
+      &.@{tablePrefixCls}-cell-fix-left-last,
+      &.@{tablePrefixCls}-cell-fix-right-first {
+        overflow: visible;
+
+        .@{tablePrefixCls}-cell-content {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: block;
+        }
+      }
     }
   }
 

diff --git a/examples/fixedColumns.tsx b/examples/fixedColumns.tsx
@@ -13,7 +13,7 @@ interface RecordType {
 
 const columns: ColumnType<RecordType>[] = [
   { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' },
-  { title: 'title2', dataIndex: 'b', key: 'b', width: 100, fixed: 'left' },
+  { title: 'title2', dataIndex: 'b', key: 'b', width: 100, fixed: 'left', ellipsis: true },
   { title: 'title3', dataIndex: 'c', key: 'c' },
   { title: 'title4', dataIndex: 'b', key: 'd' },
   { title: 'title5', dataIndex: 'b', key: 'e' },
@@ -39,7 +39,12 @@ const columns: ColumnType<RecordType>[] = [
 ];
 
 const data: RecordType[] = [
-  { a: '123', b: 'xxxxxxxx', d: 3, key: '1' },
+  {
+    a: '123',
+    b: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
+    d: 3,
+    key: '1',
+  },
   { a: 'cdd', b: 'edd12221', d: 3, key: '2' },
   { a: '133', c: 'edd12221', d: 2, key: '3' },
   { a: '133', c: 'edd12221', d: 2, key: '4' },

diff --git a/src/Cell/index.tsx b/src/Cell/index.tsx
@@ -76,6 +76,8 @@ function Cell<RecordType extends DefaultRecordType>(
   }: CellProps<RecordType>,
   ref: React.Ref<any>,
 ): React.ReactElement {
+  const cellPrefixCls = `${prefixCls}-cell`;
+
   // ==================== Child Node ====================
   let cellProps: CellType<RecordType>;
   let childNode: React.ReactNode;
@@ -104,6 +106,10 @@ function Cell<RecordType extends DefaultRecordType>(
     childNode = null;
   }
 
+  if (ellipsis && (lastFixLeft || firstFixRight)) {
+    childNode = <span className={`${cellPrefixCls}-content`}>{childNode}</span>;
+  }
+
   const { colSpan: cellColSpan, rowSpan: cellRowSpan } = cellProps || {};
   const mergedColSpan = cellColSpan !== undefined ? cellColSpan : colSpan;
   const mergedRowSpan = cellRowSpan !== undefined ? cellRowSpan : rowSpan;
@@ -142,8 +148,6 @@ function Cell<RecordType extends DefaultRecordType>(
     }
   }
 
-  const cellPrefixCls = `${prefixCls}-cell`;
-
   const componentProps = {
     title,
     ...additionalProps,
@@ -158,6 +162,7 @@ function Cell<RecordType extends DefaultRecordType>(
         [`${cellPrefixCls}-fix-right`]: isFixRight,
         [`${cellPrefixCls}-fix-right-first`]: firstFixRight,
         [`${cellPrefixCls}-ellipsis`]: ellipsis,
+        [`${cellPrefixCls}-with-append`]: appendNode,
       },
       additionalProps.className,
     ),

diff --git a/tests/__snapshots__/ExpandRow.spec.js.snap b/tests/__snapshots__/ExpandRow.spec.js.snap
@@ -33,7 +33,7 @@ exports[`Table.Expand childrenColumnName 1`] = `
           class="rc-table-row rc-table-row-level-0"
         >
           <td
-            class="rc-table-cell"
+            class="rc-table-cell rc-table-cell-with-append"
           >
             <span
               class="rc-table-row-indent indent-level-0"
@@ -53,7 +53,7 @@ exports[`Table.Expand childrenColumnName 1`] = `
           class="rc-table-row rc-table-row-level-1"
         >
           <td
-            class="rc-table-cell"
+            class="rc-table-cell rc-table-cell-with-append"
           >
             <span
               class="rc-table-row-indent indent-level-1"
@@ -73,7 +73,7 @@ exports[`Table.Expand childrenColumnName 1`] = `
           class="rc-table-row rc-table-row-level-0"
         >
           <td
-            class="rc-table-cell"
+            class="rc-table-cell rc-table-cell-with-append"
           >
             <span
               class="rc-table-row-indent indent-level-0"
@@ -271,7 +271,7 @@ exports[`Table.Expand renders tree row correctly 1`] = `
           class="rc-table-row rc-table-row-level-0"
         >
           <td
-            class="rc-table-cell"
+            class="rc-table-cell rc-table-cell-with-append"
           >
             <span
               class="rc-table-row-indent indent-level-0"
@@ -291,7 +291,7 @@ exports[`Table.Expand renders tree row correctly 1`] = `
           class="rc-table-row rc-table-row-level-1"
         >
           <td
-            class="rc-table-cell"
+            class="rc-table-cell rc-table-cell-with-append"
           >
             <span
               class="rc-table-row-indent indent-level-1"
@@ -311,7 +311,7 @@ exports[`Table.Expand renders tree row correctly 1`] = `
           class="rc-table-row rc-table-row-level-0"
         >
           <td
-            class="rc-table-cell"
+            class="rc-table-cell rc-table-cell-with-append"
           >
             <span
               class="rc-table-row-indent indent-level-0"