@atlaskit/editor-plugin-table 7.6.2 → 7.6.3

package/dist/es2019/ui/TableFloatingControls/CornerControls/DragCornerControls.js

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
 import { clearHoverSelection } from '../../../commands';
@@ -54,4 +55,58 @@ const DragCornerControlsComponent = ({
     className: ClassName.DRAG_CORNER_BUTTON_INNER
   }));
 };
+const DragCornerControlsComponentWithSelection = ({
+  editorView,
+  isInDanger,
+  isResizing,
+  intl: {
+    formatMessage
+  },
+  api
+}) => {
+  const {
+    selectionState
+  } = useSharedPluginState(api, ['selection']);
+  const handleOnClick = () => {
+    const {
+      state,
+      dispatch
+    } = editorView;
+    dispatch(selectTable(state.tr).setMeta('addToHistory', false));
+  };
+  const handleMouseOut = () => {
+    const {
+      state,
+      dispatch
+    } = editorView;
+    clearHoverSelection()(state, dispatch);
+  };
+  const isActive = useMemo(() => {
+    if (!(selectionState !== null && selectionState !== void 0 && selectionState.selection)) {
+      return;
+    }
+    const table = findTable(selectionState.selection);
+    if (!table) {
+      return false;
+    }
+    return isTableSelected(selectionState.selection);
+  }, [selectionState]);
+  if (isResizing) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("button", {
+    className: classnames(ClassName.DRAG_CORNER_BUTTON, {
+      active: isActive,
+      danger: isActive && isInDanger
+    }),
+    "aria-label": formatMessage(messages.cornerControl),
+    type: "button",
+    onClick: handleOnClick,
+    onMouseOut: handleMouseOut,
+    contentEditable: false
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ClassName.DRAG_CORNER_BUTTON_INNER
+  }));
+};
+export const DragCornerControlsWithSelection = injectIntl(DragCornerControlsComponentWithSelection);
 export const DragCornerControls = injectIntl(DragCornerControlsComponent);

package/dist/es2019/ui/TableFloatingControls/CornerControls/index.js

@@ -1,2 +1,2 @@
 export { CornerControls } from './ClassicCornerControls';
-export { DragCornerControls } from './DragCornerControls';
+export { DragCornerControls, DragCornerControlsWithSelection } from './DragCornerControls';

package/dist/es2019/ui/TableFloatingControls/FloatingControlsWithSelection.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { CornerControls } from './CornerControls';
+import { RowControls } from './RowControls';
+export const FloatingControlsWithSelection = ({
+  editorView,
+  tableRef,
+  isInDanger,
+  isResizing,
+  isHeaderRowEnabled,
+  isHeaderColumnEnabled,
+  hoveredRows,
+  stickyTop,
+  hoverRows,
+  selectRow,
+  tableActive,
+  api
+}) => {
+  const {
+    selectionState
+  } = useSharedPluginState(api, ['selection']);
+  return /*#__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, {
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection,
+    editorView: editorView,
+    tableRef: tableRef,
+    hoverRows: hoverRows,
+    hoveredRows: hoveredRows,
+    isInDanger: isInDanger,
+    isResizing: isResizing,
+    selectRow: selectRow,
+    stickyTop: tableActive ? stickyTop : undefined
+  }));
+};

package/dist/es2019/ui/TableFloatingControls/RowControls/ClassicControls.js

@@ -26,7 +26,8 @@ class RowControlsComponent extends Component {
       isResizing,
       intl: {
         formatMessage
-      }
+      },
+      selection: selectionState
     } = this.props;
     if (!tableRef) {
       return null;
@@ -54,7 +55,7 @@ class RowControlsComponent extends Component {
       }
       const thisRowSticky = this.props.stickyTop !== undefined && index === 0 && hasHeaderRow;
       return /*#__PURE__*/React.createElement("div", {
-        className: `${ClassName.ROW_CONTROLS_BUTTON_WRAP} ${getRowClassNames(startIndex, selection, hoveredRows, isInDanger, isResizing)} ${thisRowSticky ? 'sticky' : ''}`,
+        className: `${ClassName.ROW_CONTROLS_BUTTON_WRAP} ${getRowClassNames(startIndex, selectionState || selection, hoveredRows, isInDanger, isResizing)} ${thisRowSticky ? 'sticky' : ''}`,
         key: startIndex,
         style: {
           height: height,

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

@@ -1,8 +1,10 @@
 import React, { useCallback } from 'react';
 import { browser } from '@atlaskit/editor-common/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { hoverCell, hoverRows, selectRow, selectRows } from '../../commands';
 import { TableCssClassName as ClassName } from '../../types';
-import { CornerControls, DragCornerControls } from './CornerControls';
+import { CornerControls, DragCornerControls, DragCornerControlsWithSelection } from './CornerControls';
+import { FloatingControlsWithSelection } from './FloatingControlsWithSelection';
 import NumberColumn from './NumberColumn';
 import { DragControls, RowControls } from './RowControls';
 export const TableFloatingControls = ({
@@ -21,7 +23,8 @@ export const TableFloatingControls = ({
   isDragAndDropEnabled,
   hoveredCell,
   isTableHovered,
-  tableWrapperWidth
+  tableWrapperWidth,
+  api
 }) => {
   const _selectRow = useCallback((row, expand) => {
     const {
@@ -89,7 +92,13 @@ export const TableFloatingControls = ({
     updateCellHoverLocation: updateCellHoverLocation,
     stickyTop: stickyTop,
     isDragAndDropEnabled: isDragAndDropEnabled
-  }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DragCornerControls, {
+  }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, getBooleanFF('platform.editor.table.use-shared-state-hook') ? /*#__PURE__*/React.createElement(DragCornerControlsWithSelection, {
+    editorView: editorView,
+    tableRef: tableRef,
+    isInDanger: isInDanger,
+    isResizing: isResizing,
+    api: api
+  }) : /*#__PURE__*/React.createElement(DragCornerControls, {
     editorView: editorView,
     tableRef: tableRef,
     isInDanger: isInDanger,
@@ -108,7 +117,20 @@ export const TableFloatingControls = ({
     selectRow: _selectRow,
     selectRows: _selectRows,
     updateCellHoverLocation: updateCellHoverLocation
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
+  })) : getBooleanFF('platform.editor.table.use-shared-state-hook') ? /*#__PURE__*/React.createElement(FloatingControlsWithSelection, {
+    editorView: editorView,
+    tableRef: tableRef,
+    isInDanger: isInDanger,
+    isResizing: isResizing,
+    isHeaderRowEnabled: isHeaderRowEnabled,
+    isHeaderColumnEnabled: isHeaderColumnEnabled,
+    hoveredRows: hoveredRows,
+    stickyTop: tableActive ? stickyTop : undefined,
+    tableActive: tableActive,
+    hoverRows: _hoverRows,
+    selectRow: _selectRow,
+    api: api
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
     editorView: editorView,
     tableRef: tableRef,
     isInDanger: isInDanger,