fix(Cell): fix that the content cannot be styled through style (#234)

rsuite · Aug 13, 2021 · 7823adb · 7823adb
1 parent 1aaae88
commit 7823adb
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 43 deletions.
diff --git a/README.md b/README.md
@@ -167,7 +167,6 @@ const App = () => (
 
 | Property     | Type `(Default)` | Description                                  |
 | ------------ | ---------------- | -------------------------------------------- |
-| contentStyle | CSSProperties    | Add custom styles to cell content            |
 | dataKey      | string           | Data binding `key`, but also a sort of `key` |
 | rowData      | object           | Row data                                     |
 | rowIndex     | number           | Row number                                   |

diff --git a/docs/md/CustomColumnTable.md b/docs/md/CustomColumnTable.md
@@ -20,7 +20,6 @@ const BaseCell = React.forwardRef((props, ref) => {
 });
 
 const CheckCell = ({ rowData, onChange, checkedKeys, dataKey, ...props }) => {
-  console.log(checkedKeys, 'checkedKeys');
   return (
     <BaseCell {...props} style={{ padding: 0 }}>
       <div style={{ lineHeight: '46px' }}>
@@ -96,7 +95,7 @@ const App = () => {
   };
 
   return (
-    <Table height={400} data={data} headerHeight={50} virtualized>
+    <Table height={400} data={fakeLargeData} headerHeight={50} virtualized>
       <Column width={50} align="center">
         <HeaderCell style={{ padding: 0 }}>
           <div style={{ lineHeight: '40px' }}>
@@ -128,15 +127,6 @@ const App = () => {
         <BaseCell>{rowData => <a href={`mailto:${rowData.email}`}>{rowData.email}</a>}</BaseCell>
       </Column>
 
-      <Column width={250} align="right">
-        <HeaderCell>Date</HeaderCell>
-        <BaseCell>
-          {rowData => {
-            return rowData.date.toLocaleString();
-          }}
-        </BaseCell>
-      </Column>
-
       <Column width={200}>
         <HeaderCell>Action</HeaderCell>
         <ActionCell dataKey="id" />

diff --git a/src/Cell.tsx b/src/Cell.tsx
@@ -19,9 +19,6 @@ export interface CellProps extends StandardProps {
 
   /** Row Data */
   rowData?: any;
-
-  /** Add custom styles to cell content */
-  contentStyle?: React.CSSProperties;
 }
 
 export interface InnerCellProps extends CellProps {
@@ -43,6 +40,7 @@ export interface InnerCellProps extends CellProps {
   removed?: boolean;
   treeCol?: boolean;
   expanded?: boolean;
+  predefinedStyle?: React.CSSProperties;
   onTreeToggle?: (
     rowKey?: string | number,
     rowIndex?: number,
@@ -65,7 +63,6 @@ const Cell = React.forwardRef((props: InnerCellProps, ref: React.Ref<HTMLDivElem
     style,
     className,
     classPrefix,
-    contentStyle,
     firstColumn,
     lastColumn,
     isHeaderCell,
@@ -84,6 +81,7 @@ const Cell = React.forwardRef((props: InnerCellProps, ref: React.Ref<HTMLDivElem
     treeCol,
     height,
     hasChildren,
+    predefinedStyle,
     renderCell,
     renderTreeToggle,
     onClick,
@@ -111,15 +109,15 @@ const Cell = React.forwardRef((props: InnerCellProps, ref: React.Ref<HTMLDivElem
 
   const nextHeight = isHeaderCell ? headerHeight : cellHeight;
   const styles = {
-    ...style,
+    ...predefinedStyle,
     width,
     height: nextHeight,
     zIndex: depth,
     [rtl ? 'right' : 'left']: left
   };
 
   const contentStyles: React.CSSProperties = {
-    ...contentStyle,
+    ...style,
     width,
     height: nextHeight,
     textAlign: align,
@@ -216,8 +214,7 @@ Cell.propTypes = {
   wordWrap: PropTypes.bool,
   removed: PropTypes.bool,
   treeCol: PropTypes.bool,
-  expanded: PropTypes.bool,
-  contentStyle: PropTypes.object
+  expanded: PropTypes.bool
 };
 Cell.defaultProps = {
   classPrefix: 'cell',

diff --git a/src/ColumnGroup.tsx b/src/ColumnGroup.tsx
@@ -40,11 +40,9 @@ const ColumnGroup = React.forwardRef((props: ColumnGroupProps, ref: React.Ref<HT
       </div>
 
       {React.Children.map(children, (node: React.ReactElement) => {
-        const nodeStyles = { height, ...node.props?.style, top: styles.height };
-
         return React.cloneElement(node, {
           className: prefix('cell'),
-          style: nodeStyles,
+          predefinedStyle: { height, top: styles.height },
           headerHeight: height,
           verticalAlign,
           children: <span className={prefix('cell-content')}>{node.props.children}</span>

diff --git a/test/CellGroupSpec.js b/test/CellGroupSpec.js
@@ -6,44 +6,44 @@ import { getDOMNode } from './utils';
 describe('CellGroup', () => {
   it('Should output a cell group', () => {
     const Title = 'Title';
-    const instanceDom = getDOMNode(<CellGroup>Title</CellGroup>);
-    assert.include(instanceDom.className, 'rs-cell-group');
-    assert.equal(instanceDom.style.transform, 'translate3d(0px, 0px, 0px)');
-    assert.equal(instanceDom.innerText, Title);
+    const instance = getDOMNode(<CellGroup>Title</CellGroup>);
+    assert.include(instance.className, 'rs-cell-group');
+    assert.equal(instance.style.transform, 'translate3d(0px, 0px, 0px)');
+    assert.equal(instance.innerText, Title);
   });
 
   it('Should be 100 the width', () => {
-    const instanceDom = getDOMNode(<CellGroup width={100} />);
+    const instance = getDOMNode(<CellGroup width={100} />);
 
-    assert.equal(instanceDom.style.width, '100px');
+    assert.equal(instance.style.width, '100px');
   });
 
   it('Should be 100 the height', () => {
-    const instanceDom = getDOMNode(<CellGroup height={100} />);
+    const instance = getDOMNode(<CellGroup height={100} />);
 
-    assert.equal(instanceDom.style.height, '100px');
+    assert.equal(instance.style.height, '100px');
   });
 
   it('Should be 100 the left', () => {
-    const instanceDom = getDOMNode(<CellGroup left={100} />);
+    const instance = getDOMNode(<CellGroup left={100} />);
 
-    assert.equal(instanceDom.style.transform, 'translate3d(100px, 0px, 0px)');
+    assert.equal(instance.style.transform, 'translate3d(100px, 0px, 0px)');
   });
 
   it('Should be fixed', () => {
-    const instanceDom = getDOMNode(<CellGroup fixed="left" />);
+    const instance = getDOMNode(<CellGroup fixed="left" />);
 
-    assert.ok(instanceDom.className.match(/\bfixed\b/));
+    assert.ok(instance.className.match(/\bfixed\b/));
   });
 
   it('Should have a custom className', () => {
-    const instanceDom = getDOMNode(<CellGroup className="custom" />);
-    assert.ok(instanceDom.className.match(/\bcustom\b/));
+    const instance = getDOMNode(<CellGroup className="custom" />);
+    assert.ok(instance.className.match(/\bcustom\b/));
   });
 
   it('Should have a custom style', () => {
     const fontSize = '12px';
-    const instanceDom = getDOMNode(<CellGroup style={{ fontSize }} />);
-    assert.equal(instanceDom.style.fontSize, fontSize);
+    const instance = getDOMNode(<CellGroup style={{ fontSize }} />);
+    assert.equal(instance.style.fontSize, fontSize);
   });
 });
diff --git a/test/CellSpec.js b/test/CellSpec.js
@@ -142,9 +142,8 @@ describe('Cell', () => {
   });
 
   it('Should have a custom style', () => {
-    const instance = getDOMNode(<Cell contentStyle={{ fontSize: 12 }} style={{ fontSize: 14 }} />);
-    assert.equal(instance.style.fontSize, '14px');
-    assert.equal(instance.querySelector('.rs-cell-content').style.fontSize, '12px');
+    const instance = getDOMNode(<Cell style={{ fontSize: 14 }} />);
+    assert.equal(instance.querySelector('.rs-cell-content').style.fontSize, '14px');
   });
 
   it('Should render custom children', () => {

diff --git a/test/ColumnGroupSpec.js b/test/ColumnGroupSpec.js
@@ -41,7 +41,7 @@ describe('ColumnGroup', () => {
     );
 
     assert.equal(instance.querySelector('.rs-column-group-header').style.height, '10px');
-    assert.equal(instance.querySelector('.rs-column-group-cell').style.height, '10px');
+    assert.equal(instance.querySelector('.rs-column-group-header-content').style.height, '10px');
   });
 
   it('Should be centered vertically', () => {