Merge pull request #171 from react-component/elements-overriding

Elements overriding

Author: yesmeck

examples/react-dnd.html

@@ -0,0 +1,187 @@
+/* eslint-disable no-unused-expressions,new-cap */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { injectGlobal } from 'styled-components';
+import update from 'immutability-helper';
+import { DragDropContext, DragSource, DropTarget } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+import Table from 'rc-table';
+import 'rc-table/assets/index.less';
+
+injectGlobal`
+  tr.drop-over-downward td {
+    border-bottom: 2px dashed red;
+  }
+
+  tr.drop-over-upward td {
+    border-top: 2px dashed red;
+  }
+`;
+
+function dragDirection(
+  dragIndex,
+  hoverIndex,
+  initialClientOffset,
+  clientOffset,
+  sourceClientOffset,
+) {
+  const hoverMiddleY = (initialClientOffset.y - sourceClientOffset.y) / 2;
+  const hoverClientY = clientOffset.y - sourceClientOffset.y;
+  if (dragIndex < hoverIndex && hoverClientY > hoverMiddleY) {
+    return 'downward';
+  }
+  if (dragIndex > hoverIndex && hoverClientY < hoverMiddleY) {
+    return 'upward';
+  }
+}
+
+let BodyRow = (props) => {
+  const {
+    isOver,
+    connectDragSource,
+    connectDropTarget,
+    moveRow,
+    dragRow,
+    clientOffset,
+    sourceClientOffset,
+    initialClientOffset,
+    ...restProps,
+  } = props;
+  const style = { cursor: 'move' };
+
+  let className = restProps.className;
+  if (isOver && initialClientOffset) {
+    const direction = dragDirection(
+      dragRow.index,
+      restProps.index,
+      initialClientOffset,
+      clientOffset,
+      sourceClientOffset
+    );
+    if (direction === 'downward') {
+      className += ' drop-over-downward';
+    }
+    if (direction === 'upward') {
+      className += ' drop-over-upward';
+    }
+  }
+
+  return connectDragSource(
+    connectDropTarget(
+      <tr
+        {...restProps}
+        className={className}
+        style={style}
+      />
+    )
+  );
+};
+
+const rowSource = {
+  beginDrag(props) {
+    return {
+      index: props.index,
+    };
+  },
+};
+
+const rowTarget = {
+  drop(props, monitor) {
+    const dragIndex = monitor.getItem().index;
+    const hoverIndex = props.index;
+
+    // Don't replace items with themselves
+    if (dragIndex === hoverIndex) {
+      return;
+    }
+
+    // Time to actually perform the action
+    props.moveRow(dragIndex, hoverIndex);
+
+    // Note: we're mutating the monitor item here!
+    // Generally it's better to avoid mutations,
+    // but it's good here for the sake of performance
+    // to avoid expensive index searches.
+    monitor.getItem().index = hoverIndex;
+  },
+};
+
+BodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  sourceClientOffset: monitor.getSourceClientOffset(),
+}))(
+  DragSource('row', rowSource, (connect, monitor) => ({
+    connectDragSource: connect.dragSource(),
+    dragRow: monitor.getItem(),
+    clientOffset: monitor.getClientOffset(),
+    initialClientOffset: monitor.getInitialClientOffset(),
+  }))(BodyRow)
+);
+
+const columns = [
+  { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
+  { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
+  { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
+  {
+    title: 'Operations',
+    dataIndex: '',
+    key: 'd',
+    render() {
+      return <a href="#">Operations</a>;
+    },
+  },
+];
+
+class Demo extends React.Component {
+  state = {
+    data: [
+      { a: '123', key: '1' },
+      { a: 'cdd', b: 'edd', key: '2' },
+      { a: '1333', c: 'eee', d: 2, key: '3' },
+    ],
+  }
+
+  components = {
+    body: {
+      row: BodyRow,
+    },
+  }
+
+  moveRow = (dragIndex, hoverIndex) => {
+    const { data } = this.state;
+    const dragRow = data[dragIndex];
+
+    this.setState(
+      update(this.state, {
+        data: {
+          $splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]],
+        },
+      }),
+    );
+  }
+
+  render() {
+    return (
+      <Table
+        columns={columns}
+        data={this.state.data}
+        components={this.components}
+        onRow={(record, index) => ({
+          index,
+          moveRow: this.moveRow,
+        })}
+      />
+    );
+  }
+}
+
+Demo = DragDropContext(HTML5Backend)(Demo);
+
+ReactDOM.render(
+  <div>
+    <h2>Integrate with react-dnd</h2>
+    <Demo />
+  </div>,
+  document.getElementById('__react-content')
+);

examples/react-dnd.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import styled from 'styled-components';
+import Table from 'rc-table';
+import 'rc-table/assets/index.less';
+
+const columns = [
+  { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
+  { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
+  { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
+  {
+    title: 'Operations',
+    dataIndex: '',
+    key: 'd',
+    render() {
+      return <a href="#">Operations</a>;
+    },
+  },
+];
+
+const data = [
+  { a: '123', key: '1' },
+  { a: 'cdd', b: 'edd', key: '2' },
+  { a: '1333', c: 'eee', d: 2, key: '3' },
+];
+
+const BodyRow = styled.tr`
+	&:hover {
+		background: palevioletred !important;
+	}
+`;
+
+const components = {
+  body: {
+    row: BodyRow,
+  },
+};
+
+ReactDOM.render(
+  <div>
+    <h2>Integrate with styled-components</h2>
+    <Table columns={columns} data={data} components={components} />
+  </div>,
+  document.getElementById('__react-content')
+);

examples/styled-components.html

@@ -71,6 +71,7 @@
     "babel-runtime": "6.x",
     "component-classes": "^1.2.6",
     "lodash.get": "^4.4.2",
+    "lodash.merge": "^4.6.0",
     "mini-store": "^1.0.2",
     "prop-types": "^15.5.8",
     "rc-util": "^4.0.4",
@@ -82,15 +83,20 @@
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-16": "^1.0.1",
     "enzyme-to-json": "^3.1.2",
+    "immutability-helper": "^2.4.0",
     "jest": "^21.2.1",
     "pre-commit": "1.x",
     "rc-animate": "^2.3.0",
     "rc-dropdown": "~2.0.1",
     "rc-menu": "^5.0.11",
     "rc-tools": "7.x",
     "react": "^16.0.0",
+    "react-dnd": "^2.5.4",
+    "react-dnd-html5-backend": "^2.5.4",
     "react-dom": "^16.0.0",
-    "react-test-renderer": "^16.0.0"
+    "react-test-renderer": "^16.0.0",
+    "react-virtualized": "^9.12.0",
+    "styled-components": "^2.2.1"
   },
   "pre-commit": [
     "lint"

examples/styled-components.js

@@ -33,7 +33,7 @@ class BaseTable extends React.Component {
 
   renderRows = (renderData, indent, ancestorKeys = []) => {
     const { table } = this.context;
-    const { columnManager } = table;
+    const { columnManager, components } = table;
     const {
       prefixCls,
       childrenColumnName,
@@ -44,6 +44,7 @@ class BaseTable extends React.Component {
       onRowContextMenu,
       onRowMouseEnter,
       onRowMouseLeave,
+      onRow,
     } = table.props;
     const { getRowKey, fixed, expander } = this.props;
 
@@ -95,6 +96,7 @@ class BaseTable extends React.Component {
               prefixCls={rowPrefixCls}
               childrenColumnName={childrenColumnName}
               columns={leafColumns}
+              onRow={onRow}
               onRowDoubleClick={onRowDoubleClick}
               onRowContextMenu={onRowContextMenu}
               onRowMouseEnter={onRowMouseEnter}
@@ -103,6 +105,7 @@ class BaseTable extends React.Component {
               rowKey={key}
               ancestorKeys={ancestorKeys}
               ref={rowRef(record, i, indent)}
+              components={components}
               {...expandableRow}
             />
           )}
@@ -129,7 +132,9 @@ class BaseTable extends React.Component {
   }
 
   render() {
-    const { prefixCls, scroll, data, getBodyWrapper } = this.context.table.props;
+    const { table } = this.context;
+    const { components } = table;
+    const { prefixCls, scroll, data, getBodyWrapper } = table.props;
     const { expander, tableClassName, hasHead, hasBody, fixed, columns } = this.props;
     const tableStyle = {};
 
@@ -142,16 +147,19 @@ class BaseTable extends React.Component {
       }
     }
 
+    const Table = hasBody ? components.table : 'table';
+    const BodyWrapper = components.body.wrapper;
+
     return (
-      <table className={tableClassName} style={tableStyle} key="table">
+      <Table className={tableClassName} style={tableStyle} key="table">
         <ColGroup columns={columns} fixed={fixed} />
         {hasHead && <TableHeader expander={expander} columns={columns} fixed={fixed} /> }
         {hasBody && getBodyWrapper(
-          <tbody className={`${prefixCls}-tbody`}>
+          <BodyWrapper className={`${prefixCls}-tbody`}>
             {this.renderRows(data, 0)}
-          </tbody>
+          </BodyWrapper>
         )}
-      </table>
+      </Table>
     );
   }
 }

package.json

@@ -111,12 +111,14 @@ class ExpandableTable extends React.Component {
       return;
     }
 
-    rows[0].unshift({
-      key: 'rc-table-expandIconAsCell',
+    const iconColumn = {
+      key: 'rc-table-expand-icon-cell',
       className: `${prefixCls}-expand-icon-th`,
       title: '',
       rowSpan: rows.length,
-    });
+    };
+
+    rows[0].unshift({ ...iconColumn, column: iconColumn });
   }
 
   renderExpandedRow(content, className, ancestorKeys, fixed) {
@@ -146,6 +148,12 @@ class ExpandableTable extends React.Component {
     }
 
     const rowKey = `${ancestorKeys[0]}-extra-row`;
+    const components = {
+      body: {
+        row: 'tr',
+        cell: 'td',
+      },
+    };
 
     return (
       <TableRow
@@ -157,6 +165,7 @@ class ExpandableTable extends React.Component {
         prefixCls={`${prefixCls}-expanded-row`}
         indent={1}
         fixed={fixed}
+        components={components}
       />
     );
   }