@atlaskit/editor-core 174.0.0 → 175.0.0

package/dist/es2019/plugins/table/nodeviews/TableComponent.js

@@ -1,579 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import classnames from 'classnames';
-import { isTableSelected } from '@atlaskit/editor-tables/utils';
-import rafSchedule from 'raf-schd';
-import { calcTableWidth, tableMarginSides } from '@atlaskit/editor-common/styles';
-import { browser } from '@atlaskit/editor-common/utils';
-import { akEditorMobileBreakoutPoint, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
-import { isValidPosition } from '../../../utils';
-import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
-import { parsePx } from '../../../utils/dom';
-import { autoSizeTable } from '../commands';
-import { getPluginState } from '../pm-plugins/plugin-factory';
-import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
-import { scaleTable } from '../pm-plugins/table-resizing';
-import { getLayoutSize, insertColgroupFromNode as recreateResizeColsByNode } from '../pm-plugins/table-resizing/utils';
-import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
-import { TableCssClassName as ClassName, ShadowEvent } from '../types';
-import TableFloatingControls from '../ui/TableFloatingControls';
-import { containsHeaderRow, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns } from '../utils';
-import { updateOverflowShadows } from './update-overflow-shadows';
-import memoizeOne from 'memoize-one';
-import { OverflowShadowsObserver } from './OverflowShadowsObserver';
-const isIE11 = browser.ie_version === 11;
-
-const NOOP = () => undefined;
-
-class TableComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "state", {
-      scroll: 0,
-      tableContainerWidth: 'inherit',
-      parentWidth: undefined,
-      isLoading: true,
-      [ShadowEvent.SHOW_BEFORE_SHADOW]: false,
-      [ShadowEvent.SHOW_AFTER_SHADOW]: false
-    });
-
-    _defineProperty(this, "updateShadowState", (shadowKey, value) => {
-      if (this.state[shadowKey] === value) {
-        return;
-      } // need this check to satisfy types for the setState argument
-
-
-      if (shadowKey === ShadowEvent.SHOW_BEFORE_SHADOW) {
-        return this.setState({
-          [shadowKey]: value
-        });
-      }
-
-      this.setState({
-        [shadowKey]: value
-      });
-    });
-
-    _defineProperty(this, "onStickyState", state => {
-      const {
-        tableOverflowShadowsOptimization
-      } = this.props.getEditorFeatureFlags();
-      const pos = this.props.getPos();
-
-      if (!isValidPosition(pos, this.props.view.state)) {
-        return;
-      }
-
-      const stickyHeader = findStickyHeaderForTable(state, pos);
-
-      if (stickyHeader !== this.state.stickyHeader) {
-        this.setState({
-          stickyHeader
-        });
-
-        if (tableOverflowShadowsOptimization && this.overflowShadowsObserver) {
-          this.overflowShadowsObserver.updateStickyShadows();
-        }
-      }
-    });
-
-    _defineProperty(this, "prevTableState", null);
-
-    _defineProperty(this, "getMarginLeft", tableContainerCssWidth => {
-      const {
-        containerWidth
-      } = this.props;
-      const {
-        lineLength
-      } = containerWidth;
-      let marginLeft;
-
-      if (tableContainerCssWidth !== 'inherit' && lineLength) {
-        const containerWidth = parsePx(tableContainerCssWidth);
-
-        if (containerWidth) {
-          marginLeft = (lineLength - containerWidth) / 2;
-        }
-      }
-
-      return marginLeft;
-    });
-
-    _defineProperty(this, "handleScroll", event => {
-      if (!this.wrapper || event.target !== this.wrapper) {
-        return;
-      }
-
-      if (this.table) {
-        // sync sticky header row to table scroll
-        const headers = this.table.querySelectorAll('tr[data-header-row]');
-
-        for (let i = 0; i < headers.length; i++) {
-          const header = headers[i];
-          header.scrollLeft = this.wrapper.scrollLeft;
-          header.style.marginRight = '2px';
-        }
-      }
-
-      const {
-        tableOverflowShadowsOptimization
-      } = this.props.getEditorFeatureFlags();
-
-      if (!tableOverflowShadowsOptimization) {
-        this.updateShadows();
-      }
-    });
-
-    _defineProperty(this, "handleTableResizing", () => {
-      const {
-        getNode,
-        containerWidth,
-        options
-      } = this.props;
-      const prevNode = this.node;
-      const node = getNode();
-      const prevAttrs = prevNode.attrs; // We only consider a layout change valid if it's done outside of an autoSize.
-
-      const layoutChanged = prevAttrs.layout !== node.attrs.layout && prevAttrs.__autoSize === node.attrs.__autoSize;
-      const parentWidth = this.getParentNodeWidth();
-      const parentWidthChanged = parentWidth && parentWidth !== this.state.parentWidth;
-      const layoutSize = this.tableNodeLayoutSize(node, containerWidth.width, options);
-      const hasNumberedColumnChanged = prevAttrs.isNumberColumnEnabled !== node.attrs.isNumberColumnEnabled;
-      const noOfColumnsChanged = tablesHaveDifferentNoOfColumns(node, prevNode);
-
-      if ( // Breakout mode/layout changed
-      layoutChanged || // We need to react if our parent changes
-      // Scales the cols widths relative to the new parent width.
-      parentWidthChanged || // Enabling / disabling this feature reduces or adds size to the table.
-      hasNumberedColumnChanged || // This last check is also to cater for dynamic text sizing changing the 'default' layout width
-      // Usually happens on window resize.
-      layoutSize !== this.layoutSize || noOfColumnsChanged) {
-        // If column has been inserted/deleted avoid multi dispatch
-        if (!hasNumberedColumnChanged && !noOfColumnsChanged) {
-          this.scaleTable({
-            parentWidth,
-            layoutChanged
-          });
-        }
-
-        this.updateParentWidth(parentWidth);
-      }
-
-      this.updateTableContainerWidth();
-      this.node = node;
-      this.containerWidth = containerWidth;
-      this.layoutSize = layoutSize;
-    });
-
-    _defineProperty(this, "scaleTable", scaleOptions => {
-      const {
-        view,
-        getNode,
-        getPos,
-        containerWidth,
-        options
-      } = this.props;
-      const node = getNode();
-      const {
-        state,
-        dispatch
-      } = view;
-      const pos = getPos();
-
-      if (!isValidPosition(pos, state)) {
-        return;
-      }
-
-      const domAtPos = view.domAtPos.bind(view);
-      const {
-        width
-      } = containerWidth;
-      this.scaleTableDebounced.cancel();
-      scaleTable(this.table, { ...scaleOptions,
-        node,
-        prevNode: this.node || node,
-        start: pos + 1,
-        containerWidth: width,
-        previousContainerWidth: this.containerWidth.width || width,
-        ...options
-      }, domAtPos)(state, dispatch);
-    });
-
-    _defineProperty(this, "handleAutoSize", () => {
-      if (this.table) {
-        const {
-          view,
-          getNode,
-          getPos,
-          containerWidth
-        } = this.props;
-        const node = getNode();
-        const pos = getPos();
-
-        if (!isValidPosition(pos, view.state)) {
-          return;
-        }
-
-        autoSizeTable(view, node, this.table, pos, {
-          containerWidth: containerWidth.width
-        });
-      }
-    });
-
-    _defineProperty(this, "handleWindowResize", () => {
-      const {
-        getNode,
-        containerWidth
-      } = this.props;
-      const layoutSize = this.tableNodeLayoutSize(getNode());
-
-      if (containerWidth.width > layoutSize) {
-        return;
-      }
-
-      const parentWidth = this.getParentNodeWidth();
-      this.scaleTableDebounced(parentWidth);
-    });
-
-    _defineProperty(this, "updateTableContainerWidth", () => {
-      const {
-        getNode,
-        containerWidth,
-        options
-      } = this.props;
-      const node = getNode();
-
-      if (options && options.isBreakoutEnabled === false) {
-        return;
-      }
-
-      const tableContainerWidth = calcTableWidth(node.attrs.layout, containerWidth.width);
-
-      if (this.state.tableContainerWidth === tableContainerWidth) {
-        return null;
-      }
-
-      this.setState(prevState => {
-        if (options && options.isBreakoutEnabled === false && prevState.tableContainerWidth !== 'inherit') {
-          return {
-            tableContainerWidth: 'inherit'
-          };
-        }
-
-        return {
-          tableContainerWidth
-        };
-      });
-    });
-
-    _defineProperty(this, "getParentNodeWidth", () => {
-      const {
-        getPos,
-        containerWidth,
-        options,
-        view: {
-          state
-        }
-      } = this.props;
-      const pos = getPos();
-
-      if (!isValidPosition(pos, state)) {
-        return;
-      }
-
-      return getParentNodeWidth(pos, state, containerWidth, options && options.isFullWidthModeEnabled);
-    });
-
-    _defineProperty(this, "updateParentWidth", width => {
-      this.setState({
-        parentWidth: width
-      });
-    });
-
-    _defineProperty(this, "tableNodeLayoutSize", (node, containerWidth, options) => getLayoutSize(node.attrs.layout, containerWidth || this.props.containerWidth.width, options || this.props.options || {}));
-
-    _defineProperty(this, "scaleTableDebounced", rafSchedule(this.scaleTable));
-
-    _defineProperty(this, "handleTableResizingDebounced", rafSchedule(this.handleTableResizing));
-
-    _defineProperty(this, "handleScrollDebounced", rafSchedule(this.handleScroll));
-
-    _defineProperty(this, "handleAutoSizeDebounced", rafSchedule(this.handleAutoSize));
-
-    _defineProperty(this, "handleWindowResizeDebounced", rafSchedule(this.handleWindowResize));
-
-    const {
-      options: _options,
-      containerWidth: _containerWidth,
-      getNode: _getNode,
-      getEditorFeatureFlags
-    } = props;
-    this.node = _getNode();
-    this.containerWidth = _containerWidth; // store table size using previous full-width mode so can detect if it has changed
-
-    const isFullWidthModeEnabled = _options ? _options.wasFullWidthModeEnabled : false;
-    this.layoutSize = this.tableNodeLayoutSize(this.node, _containerWidth.width, {
-      isFullWidthModeEnabled
-    }); // Disable inline table editing and resizing controls in Firefox
-    // https://github.com/ProseMirror/prosemirror/issues/432
-
-    if ('execCommand' in document) {
-      ['enableObjectResizing', 'enableInlineTableEditing'].forEach(cmd => {
-        if (document.queryCommandSupported(cmd)) {
-          document.execCommand(cmd, false, 'false');
-        }
-      });
-    }
-
-    const {
-      initialRenderOptimization
-    } = getEditorFeatureFlags();
-
-    if (!initialRenderOptimization) {
-      // @see ED-7945
-      requestAnimationFrame(() => {
-        this.setState({
-          isLoading: false
-        });
-      });
-    }
-  }
-
-  componentDidMount() {
-    const {
-      allowColumnResizing,
-      eventDispatcher
-    } = this.props;
-
-    if (allowColumnResizing && this.wrapper && !isIE11) {
-      this.wrapper.addEventListener('scroll', this.handleScrollDebounced);
-    }
-
-    if (allowColumnResizing) {
-      /**
-       * We no longer use `containerWidth` as a variable to determine an update for table resizing (avoids unnecessary updates).
-       * Instead we use the resize event to only trigger updates when necessary.
-       */
-      window.addEventListener('resize', this.handleWindowResizeDebounced);
-      this.updateTableContainerWidth();
-      this.handleTableResizingDebounced();
-    }
-
-    const currentStickyState = stickyHeadersPluginKey.getState(this.props.view.state);
-
-    if (currentStickyState) {
-      this.onStickyState(currentStickyState);
-    }
-
-    eventDispatcher.on(stickyHeadersPluginKey.key, this.onStickyState);
-  }
-
-  componentWillUnmount() {
-    if (this.wrapper && !isIE11) {
-      this.wrapper.removeEventListener('scroll', this.handleScrollDebounced);
-    }
-
-    this.handleScrollDebounced.cancel();
-    this.scaleTableDebounced.cancel();
-    this.handleTableResizingDebounced.cancel();
-    this.handleAutoSizeDebounced.cancel();
-    this.handleWindowResizeDebounced.cancel();
-
-    if (this.props.allowColumnResizing) {
-      window.removeEventListener('resize', this.handleWindowResizeDebounced);
-    }
-
-    if (this.overflowShadowsObserver) {
-      this.overflowShadowsObserver.dispose();
-    }
-
-    this.props.eventDispatcher.off(stickyHeadersPluginKey.key, this.onStickyState);
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      getNode,
-      isMediaFullscreen,
-      allowColumnResizing
-    } = this.props;
-    const {
-      tableOverflowShadowsOptimization
-    } = this.props.getEditorFeatureFlags();
-
-    if (!tableOverflowShadowsOptimization) {
-      this.updateShadows();
-    } else {
-      var _this$wrapper;
-
-      if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
-        this.overflowShadowsObserver = new OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
-      }
-
-      if (this.overflowShadowsObserver) {
-        var _this$state$stickyHea;
-
-        this.overflowShadowsObserver.observeCells((_this$state$stickyHea = this.state.stickyHeader) === null || _this$state$stickyHea === void 0 ? void 0 : _this$state$stickyHea.sticky, containsHeaderRow(getNode()));
-      }
-    }
-
-    const currentTable = getNode();
-
-    if (currentTable.attrs.__autoSize) {
-      // Wait for next tick to handle auto sizing, gives the browser time to do layout calc etc.
-      this.handleAutoSizeDebounced();
-    } // re-drawing will cause media component get unmounted that will exit fullscreen mode if media is in fullscreen mode
-    // see https://product-fabric.atlassian.net/browse/MEX-1290
-    else if (allowColumnResizing && this.table && !isMediaFullscreen) {
-      // If col widths (e.g. via collab) or number of columns (e.g. delete a column) have changed,
-      // re-draw colgroup.
-      const previousTable = this.node;
-
-      if (tablesHaveDifferentColumnWidths(currentTable, previousTable) || tablesHaveDifferentNoOfColumns(currentTable, previousTable)) {
-        const {
-          view
-        } = this.props;
-        recreateResizeColsByNode(this.table, currentTable);
-        updateControls(this.props.getEditorFeatureFlags)(view.state);
-      }
-
-      this.handleTableResizingDebounced();
-    }
-  }
-
-  updateShadows() {
-    var _this$wrapper2;
-
-    const parent = (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.parentElement;
-
-    if (this.wrapper && parent) {
-      const rightShadows = parent.querySelectorAll(`.${ClassName.TABLE_RIGHT_SHADOW}`);
-      const leftShadows = parent.querySelectorAll(`.${ClassName.TABLE_LEFT_SHADOW}`);
-      updateOverflowShadows(this.props.getEditorFeatureFlags)(this.props.view.state, this.wrapper, this.table, rightShadows, leftShadows);
-    }
-  }
-
-  render() {
-    const {
-      view,
-      getNode,
-      tableResizingPluginState,
-      allowControls = true,
-      isHeaderRowEnabled,
-      ordering,
-      isHeaderColumnEnabled,
-      tableActive,
-      containerWidth
-    } = this.props;
-    const {
-      isLoading,
-      tableContainerWidth,
-      showBeforeShadow,
-      showAfterShadow
-    } = this.state;
-    const node = getNode(); // doesn't work well with WithPluginState
-
-    const {
-      isInDanger,
-      hoveredRows
-    } = getPluginState(view.state);
-    const {
-      stickyHeadersOptimization,
-      initialRenderOptimization,
-      tableRenderOptimization,
-      tableOverflowShadowsOptimization
-    } = this.props.getEditorFeatureFlags();
-    const tableRef = this.table || undefined;
-    const isResizing = !!tableResizingPluginState && !!tableResizingPluginState.dragging;
-    const headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined; //dont need to change tableHeight with tableRenderOptimization because it will be observed inside floating components
-
-    const tableHeight = tableRef && !tableRenderOptimization ? tableRef.offsetHeight : undefined;
-    const hasHeaderRow = containsHeaderRow(node);
-    const rowControls = /*#__PURE__*/React.createElement("div", {
-      className: ClassName.ROW_CONTROLS_WRAPPER
-    }, /*#__PURE__*/React.createElement(TableFloatingControls, {
-      editorView: view,
-      tableRef: tableRef,
-      tableActive: tableActive,
-      hoveredRows: hoveredRows,
-      isInDanger: isInDanger,
-      isResizing: isResizing,
-      isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
-      isHeaderRowEnabled: isHeaderRowEnabled,
-      ordering: ordering,
-      isHeaderColumnEnabled: isHeaderColumnEnabled,
-      hasHeaderRow: hasHeaderRow // pass `selection` and `tableHeight` to control re-render
-      ,
-      selection: view.state.selection,
-      tableHeight: tableHeight,
-      headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
-      stickyHeader: this.state.stickyHeader,
-      getEditorFeatureFlags: this.props.getEditorFeatureFlags
-    }));
-    const shadowPadding = allowControls && (!isLoading || initialRenderOptimization) && tableActive ? -tableToolbarSize : tableMarginSides;
-    const shadowStyle = tableOverflowShadowsOptimization ? memoizeOne(visible => ({
-      visibility: visible ? 'visible' : 'hidden'
-    })) : NOOP;
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        width: tableContainerWidth,
-        marginLeft: this.getMarginLeft(tableContainerWidth)
-      },
-      className: classnames(ClassName.TABLE_CONTAINER, {
-        [ClassName.WITH_CONTROLS]: allowControls && tableActive,
-        [ClassName.TABLE_STICKY]: this.state.stickyHeader && hasHeaderRow,
-        [ClassName.HOVERED_DELETE_BUTTON]: isInDanger,
-        [ClassName.TABLE_SELECTED]: isTableSelected(view.state.selection),
-        'less-padding': containerWidth.width < akEditorMobileBreakoutPoint
-      }),
-      "data-number-column": node.attrs.isNumberColumnEnabled,
-      "data-layout": node.attrs.layout
-    }, stickyHeadersOptimization && /*#__PURE__*/React.createElement("div", {
-      className: ClassName.TABLE_STICKY_SENTINEL_TOP
-    }), allowControls && (!isLoading || initialRenderOptimization) && rowControls, /*#__PURE__*/React.createElement("div", {
-      style: shadowStyle(showBeforeShadow),
-      className: ClassName.TABLE_LEFT_SHADOW
-    }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
-      className: `${ClassName.TABLE_LEFT_SHADOW} ${ClassName.TABLE_STICKY_SHADOW}`,
-      style: {
-        visibility: tableOverflowShadowsOptimization ? showBeforeShadow && hasHeaderRow ? 'visible' : 'hidden' : undefined,
-        top: `${this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2}px`
-      }
-    }), /*#__PURE__*/React.createElement("div", {
-      className: classnames(ClassName.TABLE_NODE_WRAPPER),
-      ref: elem => {
-        this.wrapper = elem;
-
-        if (elem) {
-          this.props.contentDOM(elem);
-          const tableElement = elem.querySelector('table');
-
-          if (tableElement !== this.table) {
-            this.table = tableElement;
-          }
-        }
-      }
-    }), /*#__PURE__*/React.createElement("div", {
-      style: shadowStyle(showAfterShadow),
-      className: ClassName.TABLE_RIGHT_SHADOW
-    }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
-      style: {
-        position: 'absolute',
-        right: '-2px'
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${ClassName.TABLE_RIGHT_SHADOW} ${ClassName.TABLE_STICKY_SHADOW}`,
-      style: {
-        visibility: tableOverflowShadowsOptimization ? showAfterShadow && hasHeaderRow ? 'visible' : 'hidden' : undefined,
-        top: `${this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2}px`
-      }
-    })), stickyHeadersOptimization && /*#__PURE__*/React.createElement("div", {
-      className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM
-    }));
-  }
-
-}
-
-_defineProperty(TableComponent, "displayName", 'TableComponent');
-
-export default TableComponent;