Initial Commit Rework

frontend/src/Components/Table/TableOptions/TableOptionsColumnDragPreview.js

@@ -0,0 +1,78 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { DragLayer } from 'react-dnd';
+import dimensions from 'Styles/Variables/dimensions.js';
+import { TABLE_COLUMN } from 'Helpers/dragTypes';
+import DragPreviewLayer from 'Components/DragPreviewLayer';
+import TableOptionsColumn from './TableOptionsColumn';
+import styles from './TableOptionsColumnDragPreview.css';
+
+const formGroupSmallWidth = parseInt(dimensions.formGroupSmallWidth);
+const formLabelWidth = parseInt(dimensions.formLabelWidth);
+const formLabelRightMarginWidth = parseInt(dimensions.formLabelRightMarginWidth);
+const dragHandleWidth = parseInt(dimensions.dragHandleWidth);
+
+function collectDragLayer(monitor) {
+  return {
+    item: monitor.getItem(),
+    itemType: monitor.getItemType(),
+    currentOffset: monitor.getSourceClientOffset()
+  };
+}
+
+class TableOptionsColumnDragPreview extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      item,
+      itemType,
+      currentOffset
+    } = this.props;
+
+    if (!currentOffset || itemType !== TABLE_COLUMN) {
+      return null;
+    }
+
+    // The offset is shifted because the drag handle is on the right edge of the
+    // list item and the preview is wider than the drag handle.
+
+    const { x, y } = currentOffset;
+    const handleOffset = formGroupSmallWidth - formLabelWidth - formLabelRightMarginWidth - dragHandleWidth;
+    const transform = `translate3d(${x - handleOffset}px, ${y}px, 0)`;
+
+    const style = {
+      position: 'absolute',
+      WebkitTransform: transform,
+      msTransform: transform,
+      transform
+    };
+
+    return (
+      <DragPreviewLayer>
+        <div
+          className={styles.dragPreview}
+          style={style}
+        >
+          <TableOptionsColumn
+            isDragging={false}
+            {...item}
+          />
+        </div>
+      </DragPreviewLayer>
+    );
+  }
+}
+
+TableOptionsColumnDragPreview.propTypes = {
+  item: PropTypes.object,
+  itemType: PropTypes.string,
+  currentOffset: PropTypes.shape({
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired
+  })
+};
+
+export default DragLayer(collectDragLayer)(TableOptionsColumnDragPreview);