@atlaskit/editor-plugin-table 1.6.1 → 1.6.3

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

@@ -8,30 +8,19 @@ import { WrappedComponentProps, injectIntl } from 'react-intl-next';
 
 import { TableLayout } from '@atlaskit/adf-schema';
 import { Popup } from '@atlaskit/editor-common/ui';
-import {
-  akEditorFloatingOverlapPanelZIndex,
-  akEditorSmallZIndex,
-} from '@atlaskit/editor-shared-styles';
+import { akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 
-import { closestElement } from '@atlaskit/editor-common/utils';
 import { toggleContextualMenu } from '../../commands';
 import { RowStickyState } from '../../pm-plugins/sticky-headers';
 import { TableCssClassName as ClassName } from '../../types';
 import messages from '../../ui/messages';
+import FixedButton from './FixedButton';
 
-import {
-  DispatchAnalyticsEvent,
-  AnalyticsEventPayload,
-  CONTENT_COMPONENT,
-} from '@atlaskit/editor-common/analytics';
-import {
-  ACTION,
-  ACTION_SUBJECT,
-  EVENT_TYPE,
-} from '@atlaskit/editor-common/analytics';
+import { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import {
   tableFloatingCellButtonStyles,
   tableFloatingCellButtonSelectedStyles,
@@ -42,6 +31,7 @@ import { ThemeProps } from '@atlaskit/theme/types';
 
 export interface Props {
   editorView: EditorView;
+  tableWrapper?: HTMLElement;
   tableNode?: PMNode;
   targetCellPosition: number;
   isContextualMenuOpen?: boolean;
@@ -54,58 +44,41 @@ export interface Props {
   dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
 }
 
-export class FloatingContextualButtonInner extends React.Component<
-  Props & WrappedComponentProps,
-  any
-> {
-  static displayName = 'FloatingContextualButton';
+const BUTTON_OFFSET = 3;
 
-  render() {
+const FloatingContextualButtonInner = React.memo(
+  (props: Props & WrappedComponentProps) => {
     const {
+      editorView,
+      isContextualMenuOpen,
       mountPoint,
       scrollableElement,
-      editorView,
+      stickyHeader,
+      tableWrapper,
       targetCellPosition,
-      isContextualMenuOpen,
       intl: { formatMessage },
-      dispatchAnalyticsEvent,
-    } = this.props; //  : Props & WrappedComponentProps
+    } = props; //  : Props & WrappedComponentProps
+
+    const handleClick = () => {
+      const { state, dispatch } = editorView;
+      // Clicking outside the dropdown handles toggling the menu closed
+      // (otherwise these two toggles combat each other).
+      // In the event a user clicks the chevron button again
+      // That will count as clicking outside the dropdown and
+      // will be toggled appropriately
+      if (!isContextualMenuOpen) {
+        toggleContextualMenu()(state, dispatch);
+      }
+    };
+
     const domAtPos = editorView.domAtPos.bind(editorView);
     let targetCellRef: Node | undefined;
-    try {
-      targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.warn(error);
-      if (dispatchAnalyticsEvent) {
-        const payload: AnalyticsEventPayload = {
-          action: ACTION.ERRORED,
-          actionSubject: ACTION_SUBJECT.CONTENT_COMPONENT,
-          eventType: EVENT_TYPE.OPERATIONAL,
-          attributes: {
-            component: CONTENT_COMPONENT.FLOATING_CONTEXTUAL_BUTTON,
-            selection: editorView.state.selection.toJSON(),
-            position: targetCellPosition,
-            docSize: editorView.state.doc.nodeSize,
-            error: error instanceof Error ? error.message : String(error),
-          },
-          nonPrivacySafeAttributes: {
-            errorStack: error instanceof Error ? error.stack : undefined,
-          },
-        };
-        dispatchAnalyticsEvent(payload);
-      }
-    }
+    targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
 
     if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
       return null;
     }
 
-    const tableWrapper = closestElement(
-      targetCellRef,
-      `.${ClassName.TABLE_NODE_WRAPPER}`,
-    );
-
     const labelCellOptions = formatMessage(messages.cellOptions);
 
     const button = (
@@ -120,7 +93,7 @@ export class FloatingContextualButtonInner extends React.Component<
           className={ClassName.CONTEXTUAL_MENU_BUTTON}
           selected={isContextualMenuOpen}
           title={labelCellOptions}
-          onClick={this.handleClick}
+          onClick={handleClick}
           iconBefore={<ExpandIcon label="" />}
           aria-label={labelCellOptions}
         />
@@ -130,24 +103,19 @@ export class FloatingContextualButtonInner extends React.Component<
     const parentSticky =
       targetCellRef.parentElement &&
       targetCellRef.parentElement.className.indexOf('sticky') > -1;
-    if (this.props.stickyHeader && parentSticky) {
-      const pos = targetCellRef.getBoundingClientRect();
-
+    if (stickyHeader && parentSticky && tableWrapper) {
       return (
-        <div
-          style={{
-            position: 'fixed',
-            top:
-              this.props.stickyHeader.top +
-              this.props.stickyHeader.padding +
-              3 +
-              3,
-            zIndex: akEditorFloatingOverlapPanelZIndex,
-            left: pos.left + targetCellRef.clientWidth - 20 - 3,
-          }}
+        <FixedButton
+          offset={BUTTON_OFFSET}
+          stickyHeader={stickyHeader}
+          tableWrapper={tableWrapper}
+          targetCellPosition={targetCellPosition}
+          targetCellRef={targetCellRef}
+          mountTo={tableWrapper}
+          isContextualMenuOpen={isContextualMenuOpen}
         >
           {button}
-        </div>
+        </FixedButton>
       );
     }
 
@@ -159,7 +127,7 @@ export class FloatingContextualButtonInner extends React.Component<
         mountTo={tableWrapper || mountPoint}
         boundariesElement={targetCellRef}
         scrollableElement={scrollableElement}
-        offset={[3, -3]}
+        offset={[BUTTON_OFFSET, -BUTTON_OFFSET]}
         forcePlacement
         allowOutOfBounds
         zIndex={akEditorSmallZIndex}
@@ -167,30 +135,8 @@ export class FloatingContextualButtonInner extends React.Component<
         {button}
       </Popup>
     );
-  }
-
-  shouldComponentUpdate(nextProps: Props) {
-    return (
-      this.props.tableNode !== nextProps.tableNode ||
-      this.props.targetCellPosition !== nextProps.targetCellPosition ||
-      this.props.layout !== nextProps.layout ||
-      this.props.isContextualMenuOpen !== nextProps.isContextualMenuOpen ||
-      this.props.isNumberColumnEnabled !== nextProps.isNumberColumnEnabled ||
-      this.props.stickyHeader !== nextProps.stickyHeader
-    );
-  }
-  private handleClick = () => {
-    const { state, dispatch } = this.props.editorView;
-    // Clicking outside the dropdown handles toggling the menu closed
-    // (otherwise these two toggles combat each other).
-    // In the event a user clicks the chevron button again
-    // That will count as clicking outside the dropdown and
-    // will be toggled appropriately
-    if (!this.props.isContextualMenuOpen) {
-      toggleContextualMenu()(state, dispatch);
-    }
-  };
-}
+  },
+);
 
 const FloatingContextualButton = injectIntl(FloatingContextualButtonInner);