@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

package/src/plugins/table/ui/TableFloatingControls/index.tsx

@@ -0,0 +1,202 @@
+import React, { Component } from 'react';
+
+import { Selection } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+
+import { browser } from '@atlaskit/editor-common/utils';
+import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
+
+import { hoverRows, selectRow } from '../../commands';
+import { RowStickyState } from '../../pm-plugins/sticky-headers';
+
+import { isSelectionUpdated } from '../../utils';
+
+import CornerControls from './CornerControls';
+import NumberColumn from './NumberColumn';
+import RowControls from './RowControls';
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+
+export interface Props {
+  editorView: EditorView;
+  getEditorFeatureFlags: GetEditorFeatureFlags;
+  selection?: Selection;
+  tableRef?: HTMLTableElement;
+  tableActive?: boolean;
+  isInDanger?: boolean;
+  isResizing?: boolean;
+  isHeaderRowEnabled?: boolean;
+  isHeaderColumnEnabled?: boolean;
+  isNumberColumnEnabled?: boolean;
+  hasHeaderRow?: boolean;
+  tableHeight?: number;
+  headerRowHeight?: number;
+  hoveredRows?: number[];
+  ordering?: TableColumnOrdering;
+  stickyHeader?: RowStickyState;
+}
+
+interface State {
+  tableHeight: number;
+}
+
+export default class TableFloatingControls extends Component<Props, State> {
+  static displayName = 'TableFloatingControls';
+  private resizeObserver?: ResizeObserver;
+
+  componentDidMount() {
+    this.tryInitResizeObserver();
+  }
+
+  componentDidUpdate() {
+    // tableRef prop is not guaranteed to be defined after componentDidMount, so retry to init resize observer on update
+    this.tryInitResizeObserver();
+  }
+
+  // tracking the table height changes to update floating controls
+  private tryInitResizeObserver() {
+    let { tableRef } = this.props;
+    const { tableRenderOptimization } = this.props.getEditorFeatureFlags();
+    if (
+      tableRenderOptimization &&
+      tableRef &&
+      !this.resizeObserver &&
+      window?.ResizeObserver
+    ) {
+      this.resizeObserver = new ResizeObserver((entries) => {
+        for (let entry of entries) {
+          const tableHeight = entry.contentRect.height;
+          this.setState({ tableHeight });
+        }
+      });
+      this.resizeObserver.observe(tableRef);
+    }
+  }
+
+  shouldComponentUpdate(nextProps: Props, nextState: State) {
+    const {
+      tableRef,
+      isInDanger,
+      isResizing,
+      isHeaderRowEnabled,
+      isNumberColumnEnabled,
+      hoveredRows,
+      selection,
+      tableActive,
+      isHeaderColumnEnabled,
+      ordering,
+      headerRowHeight,
+      stickyHeader,
+    } = this.props;
+    const { tableRenderOptimization } = this.props.getEditorFeatureFlags();
+    const tableHeight = tableRenderOptimization
+      ? this.state?.tableHeight
+      : this.props.tableHeight;
+    const nextTableHeight = tableRenderOptimization
+      ? nextState?.tableHeight
+      : nextProps.tableHeight;
+    return (
+      ordering !== nextProps.ordering ||
+      tableRef !== nextProps.tableRef ||
+      tableHeight !== nextTableHeight ||
+      tableActive !== nextProps.tableActive ||
+      isInDanger !== nextProps.isInDanger ||
+      isResizing !== nextProps.isResizing ||
+      hoveredRows !== nextProps.hoveredRows ||
+      isHeaderRowEnabled !== nextProps.isHeaderRowEnabled ||
+      isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled ||
+      isNumberColumnEnabled !== nextProps.isNumberColumnEnabled ||
+      isSelectionUpdated(selection!, nextProps.selection) ||
+      headerRowHeight !== nextProps.headerRowHeight ||
+      stickyHeader !== nextProps.stickyHeader
+    );
+  }
+
+  componentWillUnmount() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  }
+
+  render() {
+    const {
+      editorView,
+      tableRef,
+      isInDanger,
+      isResizing,
+      isNumberColumnEnabled,
+      isHeaderRowEnabled,
+      isHeaderColumnEnabled,
+      tableActive,
+      hasHeaderRow,
+      hoveredRows,
+      stickyHeader,
+    } = this.props;
+
+    if (!tableRef) {
+      return null;
+    }
+
+    const stickyTop =
+      stickyHeader && stickyHeader.sticky && hasHeaderRow
+        ? stickyHeader.top
+        : undefined;
+    return (
+      <div onMouseDown={(e) => e.preventDefault()}>
+        {isNumberColumnEnabled ? (
+          <NumberColumn
+            editorView={editorView}
+            hoverRows={this.hoverRows}
+            tableRef={tableRef}
+            tableActive={tableActive}
+            hoveredRows={hoveredRows}
+            hasHeaderRow={hasHeaderRow}
+            isInDanger={isInDanger}
+            isResizing={isResizing}
+            selectRow={this.selectRow}
+            stickyTop={stickyTop}
+          />
+        ) : null}
+
+        {tableActive && (
+          <>
+            <CornerControls
+              editorView={editorView}
+              tableRef={tableRef}
+              isInDanger={isInDanger}
+              isResizing={isResizing}
+              isHeaderRowEnabled={isHeaderRowEnabled}
+              isHeaderColumnEnabled={isHeaderColumnEnabled}
+              hoveredRows={hoveredRows}
+              stickyTop={tableActive ? stickyTop : undefined}
+            />
+            <RowControls
+              editorView={editorView}
+              tableRef={tableRef}
+              hoverRows={this.hoverRows}
+              hoveredRows={hoveredRows}
+              isInDanger={isInDanger}
+              isResizing={isResizing}
+              selectRow={this.selectRow}
+              stickyTop={tableActive ? stickyTop : undefined}
+            />
+          </>
+        )}
+      </div>
+    );
+  }
+
+  private selectRow = (row: number, expand: boolean) => {
+    const { editorView } = this.props;
+    const { state, dispatch } = editorView;
+    // fix for issue ED-4665
+    if (browser.ie_version === 11) {
+      (editorView.dom as HTMLElement).blur();
+    }
+    selectRow(row, expand)(state, dispatch);
+  };
+
+  private hoverRows = (rows: Array<number>, danger?: boolean) => {
+    const { state, dispatch } = this.props.editorView;
+    hoverRows(rows, danger)(state, dispatch);
+  };
+}