@atlaskit/editor-plugin-table 0.0.0 → 0.0.2

package/dist/es2019/plugins/table/ui/TableFloatingControls/index.js

@@ -0,0 +1,158 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { Component } from 'react';
+import { browser } from '@atlaskit/editor-common/utils';
+import { hoverRows, selectRow } from '../../commands';
+import { isSelectionUpdated } from '../../utils';
+import CornerControls from './CornerControls';
+import NumberColumn from './NumberColumn';
+import RowControls from './RowControls';
+export default class TableFloatingControls extends Component {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "selectRow", (row, expand) => {
+      const {
+        editorView
+      } = this.props;
+      const {
+        state,
+        dispatch
+      } = editorView; // fix for issue ED-4665
+
+      if (browser.ie_version === 11) {
+        editorView.dom.blur();
+      }
+
+      selectRow(row, expand)(state, dispatch);
+    });
+
+    _defineProperty(this, "hoverRows", (rows, danger) => {
+      const {
+        state,
+        dispatch
+      } = this.props.editorView;
+      hoverRows(rows, danger)(state, dispatch);
+    });
+  }
+
+  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
+
+
+  tryInitResizeObserver() {
+    var _window;
+
+    let {
+      tableRef
+    } = this.props;
+    const {
+      tableRenderOptimization
+    } = this.props.getEditorFeatureFlags();
+
+    if (tableRenderOptimization && tableRef && !this.resizeObserver && (_window = window) !== null && _window !== void 0 && _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, nextState) {
+    var _this$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 = this.state) === null || _this$state === void 0 ? void 0 : _this$state.tableHeight : this.props.tableHeight;
+    const nextTableHeight = tableRenderOptimization ? nextState === null || nextState === void 0 ? void 0 : 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 /*#__PURE__*/React.createElement("div", {
+      onMouseDown: e => e.preventDefault()
+    }, isNumberColumnEnabled ? /*#__PURE__*/React.createElement(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 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
+      editorView: editorView,
+      tableRef: tableRef,
+      isInDanger: isInDanger,
+      isResizing: isResizing,
+      isHeaderRowEnabled: isHeaderRowEnabled,
+      isHeaderColumnEnabled: isHeaderColumnEnabled,
+      hoveredRows: hoveredRows,
+      stickyTop: tableActive ? stickyTop : undefined
+    }), /*#__PURE__*/React.createElement(RowControls, {
+      editorView: editorView,
+      tableRef: tableRef,
+      hoverRows: this.hoverRows,
+      hoveredRows: hoveredRows,
+      isInDanger: isInDanger,
+      isResizing: isResizing,
+      selectRow: this.selectRow,
+      stickyTop: tableActive ? stickyTop : undefined
+    })));
+  }
+
+}
+
+_defineProperty(TableFloatingControls, "displayName", 'TableFloatingControls');