@atlaskit/editor-plugin-table 1.1.0 → 1.1.2

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

@@ -22,24 +22,18 @@ export function getSelectionType(selection) {
     if (selection.isRowSelection()) {
       return 'row';
     }
-
     if (selection.isColSelection()) {
       return 'column';
     }
   }
-
   return;
 }
-
 class FloatingDeleteButton extends Component {
   constructor(props) {
     super(props);
-
     _defineProperty(this, "wrapper", null);
-
     _defineProperty(this, "updateWrapper", () => {
       const tableWrapper = closestElement(this.props.tableRef, `.${ClassName.TABLE_NODE_WRAPPER}`);
-
       if (tableWrapper) {
         this.wrapper = tableWrapper;
         this.wrapper.addEventListener('scroll', this.onWrapperScrolled);
@@ -49,45 +43,39 @@ class FloatingDeleteButton extends Component {
       } else {
         if (this.wrapper) {
           // unsubscribe if we previously had one and it just went away
-          this.wrapper.removeEventListener('scroll', this.onWrapperScrolled); // and reset scroll position
+          this.wrapper.removeEventListener('scroll', this.onWrapperScrolled);
 
+          // and reset scroll position
           this.setState({
             scrollLeft: 0
           });
         }
-
         this.wrapper = null;
       }
     });
-
     _defineProperty(this, "onWrapperScrolled", e => {
       const wrapper = e.target;
       this.setState({
         scrollLeft: wrapper.scrollLeft
       });
     });
-
     _defineProperty(this, "handleMouseEnter", () => {
       const {
         state,
         dispatch
       } = this.props.editorView;
-
       switch (this.state.selectionType) {
         case 'row':
           {
             return hoverRows(this.state.indexes, true)(state, dispatch, this.props.editorView);
           }
-
         case 'column':
           {
             return hoverColumns(this.state.indexes, true)(state, dispatch, this.props.editorView);
           }
       }
-
       return false;
     });
-
     _defineProperty(this, "handleMouseLeave", () => {
       const {
         state,
@@ -95,7 +83,6 @@ class FloatingDeleteButton extends Component {
       } = this.props.editorView;
       return clearHoverSelection()(state, dispatch);
     });
-
     _defineProperty(this, "handleClick", event => {
       event.preventDefault();
       const {
@@ -111,7 +98,6 @@ class FloatingDeleteButton extends Component {
         }
       } = getTablePluginState(state);
       const rect = getSelectionRect(state.selection);
-
       if (rect) {
         switch (this.state.selectionType) {
           case 'column':
@@ -119,7 +105,6 @@ class FloatingDeleteButton extends Component {
               deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.BUTTON, rect)(state, dispatch);
               return;
             }
-
           case 'row':
             {
               deleteRowsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.BUTTON, rect, !!isHeaderRowRequired)(state, dispatch);
@@ -127,14 +112,12 @@ class FloatingDeleteButton extends Component {
             }
         }
       }
-
       ({
         state,
         dispatch
       } = this.props.editorView);
       clearHoverSelection()(state, dispatch);
     });
-
     this.state = {
       selectionType: undefined,
       top: 0,
@@ -143,25 +126,20 @@ class FloatingDeleteButton extends Component {
       scrollLeft: 0
     };
   }
-
   shouldComponentUpdate(_, nextState) {
     return this.state.selectionType !== nextState.selectionType || this.state.left !== nextState.left || this.state.top !== nextState.top || this.state.scrollLeft !== nextState.scrollLeft;
   }
-
   componentDidMount() {
     this.updateWrapper();
   }
-
   componentDidUpdate() {
     this.updateWrapper();
   }
-
   componentWillUnmount() {
     if (this.wrapper) {
       this.wrapper.removeEventListener('scroll', this.onWrapperScrolled);
     }
   }
-
   /**
    * We derivate the button state from the properties passed.
    * We do this in here because we need this information in different places
@@ -170,14 +148,14 @@ class FloatingDeleteButton extends Component {
   static getDerivedStateFromProps(nextProps, prevState) {
     const selectionType = getSelectionType(nextProps.selection);
     const inStickyMode = nextProps.stickyHeaders && nextProps.stickyHeaders.sticky;
-    const rect = getSelectionRect(nextProps.selection); // only tie row delete to sticky header if it's the only thing
+    const rect = getSelectionRect(nextProps.selection);
+
+    // only tie row delete to sticky header if it's the only thing
     // in the selection, otherwise the row delete will hover around
     // the rest of the selection
-
     const firstRowInSelection = rect && rect.top === 0 && rect.bottom === 1;
     const shouldStickyButton = inStickyMode && firstRowInSelection;
     const stickyTop = nextProps.stickyHeaders ? nextProps.stickyHeaders.top + nextProps.stickyHeaders.padding : 0;
-
     if (selectionType) {
       switch (selectionType) {
         case 'column':
@@ -185,18 +163,16 @@ class FloatingDeleteButton extends Component {
             // Calculate the button position and indexes for columns
             const columnsWidths = getColumnsWidths(nextProps.editorView);
             const deleteBtnParams = getColumnDeleteButtonParams(columnsWidths, nextProps.editorView.state.selection);
-
             if (deleteBtnParams) {
-              return { ...deleteBtnParams,
+              return {
+                ...deleteBtnParams,
                 top: inStickyMode ? nextProps.stickyHeaders.top : 0,
                 position: inStickyMode ? 'sticky' : undefined,
                 selectionType
               };
             }
-
             return null;
           }
-
         case 'row':
           {
             // Calculate the button position and indexes for rows
@@ -204,22 +180,21 @@ class FloatingDeleteButton extends Component {
               const rowHeights = getRowHeights(nextProps.tableRef);
               const offsetTop = inStickyMode ? -rowHeights[0] : 0;
               const deleteBtnParams = getRowDeleteButtonParams(rowHeights, nextProps.editorView.state.selection, shouldStickyButton ? stickyTop : offsetTop);
-
               if (deleteBtnParams) {
-                return { ...deleteBtnParams,
+                return {
+                  ...deleteBtnParams,
                   position: shouldStickyButton ? 'sticky' : undefined,
                   left: 0,
                   selectionType: selectionType
                 };
               }
             }
-
             return null;
           }
       }
-    } // Clean state if no type
-
+    }
 
+    // Clean state if no type
     if (prevState.selectionType !== selectionType) {
       return {
         selectionType: undefined,
@@ -227,12 +202,11 @@ class FloatingDeleteButton extends Component {
         left: 0,
         indexes: []
       };
-    } // Do nothing if doesn't change anything
-
+    }
 
+    // Do nothing if doesn't change anything
     return null;
   }
-
   render() {
     const {
       mountPoint,
@@ -242,11 +216,9 @@ class FloatingDeleteButton extends Component {
     const {
       selectionType
     } = this.state;
-
     if (!selectionType || !tableRef) {
       return null;
     }
-
     const tableContainerWrapper = closestElement(tableRef, `.${ClassName.TABLE_CONTAINER}`);
     const button = /*#__PURE__*/React.createElement(DeleteButton, {
       removeLabel: selectionType === 'column' ? tableMessages.removeColumns : tableMessages.removeRows,
@@ -261,15 +233,11 @@ class FloatingDeleteButton extends Component {
       tableWrapper: this.wrapper
     });
     const mountTo = tableContainerWrapper || mountPoint;
-
     if (this.state.position === 'sticky' && mountTo) {
       const headerRow = tableRef.querySelector('tr.sticky');
-
       if (headerRow) {
         const rect = headerRow.getBoundingClientRect();
-
         const calculatePosition = popupOpts.onPositionCalculated || (pos => pos);
-
         const pos = calculatePosition({
           left: this.state.left,
           top: this.state.top
@@ -284,7 +252,6 @@ class FloatingDeleteButton extends Component {
         }, button), mountTo);
       }
     }
-
     return /*#__PURE__*/React.createElement(Popup, _extends({
       target: tableRef,
       mountTo: mountTo,
@@ -294,9 +261,6 @@ class FloatingDeleteButton extends Component {
       allowOutOfBounds: true
     }, popupOpts), button);
   }
-
 }
-
 _defineProperty(FloatingDeleteButton, "displayName", 'FloatingDeleteButton');
-
 export default FloatingDeleteButton;

package/dist/es2019/plugins/table/ui/FloatingInsertButton/InsertButton.js

@@ -8,7 +8,6 @@ import { closestElement } from '@atlaskit/editor-common/utils';
 import { TableCssClassName as ClassName } from '../../types';
 import tableMessages from '../messages';
 import { tableToolbarSize } from '../consts';
-
 const getInsertLineHeight = (tableRef, hasStickyHeaders) => {
   // The line gets height 100% from the table,
   // but since we have an overflow on the left,
@@ -17,17 +16,13 @@ const getInsertLineHeight = (tableRef, hasStickyHeaders) => {
   const ADDITIONAL_HEIGHT = hasStickyHeaders ? tableRef.getBoundingClientRect().top - tableMarginTop * 4 - LINE_OFFSET : tableToolbarSize + LINE_OFFSET;
   return tableRef.offsetHeight + ADDITIONAL_HEIGHT;
 };
-
 const getToolbarSize = tableRef => {
   const parent = closestElement(tableRef, `.${ClassName.TABLE_CONTAINER}`);
-
   if (parent) {
     return parent.querySelector(`.${ClassName.NUMBERED_COLUMN}`) ? tableToolbarSize + akEditorTableNumberColumnWidth - 1 : tableToolbarSize;
   }
-
   return tableToolbarSize;
 };
-
 const getInsertLineWidth = tableRef => {
   // The line gets width 100% from the table,
   // but since we have an overflow on the left,
@@ -45,11 +40,9 @@ const getInsertLineWidth = tableRef => {
   const toolbarSize = getToolbarSize(tableRef);
   return Math.min(offsetWidth + toolbarSize, parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0)) + LINE_OFFSET;
 };
-
 const tooltipMessageByType = type => {
   return type === 'row' ? tableMessages.insertRow : tableMessages.insertColumn;
 };
-
 const InsertButton = ({
   onMouseDown,
   tableRef,
@@ -92,5 +85,4 @@ const InsertButton = ({
     className: `${ClassName.CONTROLS_INSERT_BUTTON_WRAP} ${ClassName.CONTROLS_INSERT_ROW}`
   }, content));
 };
-
 export default injectIntl(InsertButton);

package/dist/es2019/plugins/table/ui/FloatingInsertButton/getPopupOptions.js

@@ -5,40 +5,36 @@ const HORIZONTAL_ALIGN_NUMBERED_COLUMN_BUTTON = HORIZONTAL_ALIGN_COLUMN_BUTTON +
 const VERTICAL_ALIGN_COLUMN_BUTTON = tableToolbarSize + tableInsertColumnButtonOffset;
 const HORIZONTAL_ALIGN_ROW_BUTTON = -(tableToolbarSize + tableInsertColumnButtonOffset + tableInsertColumnButtonSize);
 const VERTICAL_ALIGN_ROW_BUTTON = tableInsertColumnButtonSize / 2;
-
 function getRowOptions(index) {
   let defaultOptions = {
     alignX: 'left',
     alignY: 'bottom',
     offset: [0, VERTICAL_ALIGN_ROW_BUTTON]
   };
-
   if (index === 0) {
-    defaultOptions = { ...defaultOptions,
+    defaultOptions = {
+      ...defaultOptions,
       alignY: 'top',
       // The offset is the inverse the original, because is align top nop bottom.
       offset: [0, -VERTICAL_ALIGN_ROW_BUTTON]
     };
   }
-
-  return { ...defaultOptions,
-
+  return {
+    ...defaultOptions,
     onPositionCalculated(position) {
-      return { ...position,
+      return {
+        ...position,
         // Left position should be always the offset (To place in the correct position even if the table has overflow).
         left: HORIZONTAL_ALIGN_ROW_BUTTON
       };
     }
-
   };
 }
-
 function getColumnOptions(index, tableContainer, hasNumberedColumns) {
   const options = {
     alignX: 'end',
     alignY: 'top',
     offset: [HORIZONTAL_ALIGN_COLUMN_BUTTON, VERTICAL_ALIGN_COLUMN_BUTTON],
-
     // :: (position: PopupPosition) -> PopupPosition
     // Limit the InsertButton position to the table container
     // if the left position starts before it
@@ -48,49 +44,45 @@ function getColumnOptions(index, tableContainer, hasNumberedColumns) {
       const {
         left
       } = position;
-
       if (!left) {
         // If not left, lest skip expensive next calculations.
         return position;
       }
-
       if (index === 0) {
-        return { ...position,
+        return {
+          ...position,
           left: hasNumberedColumns ? HORIZONTAL_ALIGN_NUMBERED_COLUMN_BUTTON : HORIZONTAL_ALIGN_COLUMN_BUTTON
         };
-      } // Check if current position is greater than the available container width
-
+      }
 
+      // Check if current position is greater than the available container width
       const rect = tableContainer ? tableContainer.getBoundingClientRect() : null;
-      return { ...position,
+      return {
+        ...position,
         left: rect && left > rect.width ? rect.width : left
       };
     }
+  };
 
-  }; // We need to change the popup position when
+  // We need to change the popup position when
   // the column index is zero
-
   if (index === 0) {
-    return { ...options,
+    return {
+      ...options,
       alignX: 'left',
       alignY: 'top'
     };
   }
-
   return options;
 }
-
 function getPopupOptions(type, index, hasNumberedColumns, tableContainer) {
   switch (type) {
     case 'column':
       return getColumnOptions(index, tableContainer, hasNumberedColumns);
-
     case 'row':
       return getRowOptions(index);
-
     default:
       return {};
   }
 }
-
 export default getPopupOptions;

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

@@ -21,7 +21,6 @@ export class FloatingInsertButton extends React.Component {
     this.insertColumn = this.insertColumn.bind(this);
     this.insertRow = this.insertRow.bind(this);
   }
-
   render() {
     const {
       tableNode,
@@ -36,49 +35,39 @@ export class FloatingInsertButton extends React.Component {
       dispatchAnalyticsEvent
     } = this.props;
     const type = typeof insertColumnButtonIndex !== 'undefined' ? 'column' : typeof insertRowButtonIndex !== 'undefined' ? 'row' : null;
-
     if (!tableNode || !tableRef || !type) {
       return null;
-    } // We can’t display the insert button for row|colum index 0
-    // when the header row|colum is enabled, this feature will be change on the future
-
+    }
 
+    // We can’t display the insert button for row|colum index 0
+    // when the header row|colum is enabled, this feature will be change on the future
     if (type === 'column' && isHeaderColumnEnabled && insertColumnButtonIndex === 0 || type === 'row' && isHeaderRowEnabled && insertRowButtonIndex === 0) {
       return null;
     }
-
     const {
       state: {
         tr
       }
     } = editorView;
-
     if (tr.selection instanceof CellSelection && (tr.selection.isColSelection() || tr.selection.isRowSelection())) {
       return null;
     }
-
     const cellPosition = this.getCellPosition(type);
-
     if (!cellPosition) {
       return null;
     }
-
     const tablePos = findTable(editorView.state.selection);
-
     if (!tablePos) {
       return null;
     }
-
     const domAtPos = editorView.domAtPos.bind(editorView);
     const pos = cellPosition + tablePos.start + 1;
     let target;
-
     try {
       target = findDomRefAtPos(pos, domAtPos);
     } catch (error) {
       // eslint-disable-next-line no-console
       console.warn(error);
-
       if (dispatchAnalyticsEvent) {
         const payload = {
           action: ACTION.ERRORED,
@@ -98,17 +87,13 @@ export class FloatingInsertButton extends React.Component {
         dispatchAnalyticsEvent(payload);
       }
     }
-
     if (!target || !(target instanceof HTMLElement)) {
       return null;
     }
-
     const targetCellRef = type === 'row' ? closestElement(target, 'tr') : closestElement(target, 'td, th');
-
     if (!targetCellRef) {
       return null;
     }
-
     const tableContainerWrapper = closestElement(targetCellRef, `.${ClassName.TABLE_CONTAINER}`);
     const tableWrapper = closestElement(targetCellRef, `.${ClassName.TABLE_NODE_WRAPPER}`);
     const index = type === 'column' ? insertColumnButtonIndex : insertRowButtonIndex;
@@ -127,7 +112,6 @@ export class FloatingInsertButton extends React.Component {
       hasStickyHeaders: this.props.hasStickyHeaders || false
     }));
   }
-
   getCellPosition(type) {
     const {
       tableNode,
@@ -135,33 +119,26 @@ export class FloatingInsertButton extends React.Component {
       insertRowButtonIndex
     } = this.props;
     const tableMap = TableMap.get(tableNode);
-
     if (type === 'column') {
       const columnIndex = insertColumnButtonIndex === 0 ? 0 : insertColumnButtonIndex - 1;
-
       if (columnIndex > tableMap.width - 1) {
         return null;
       }
-
       return tableMap.positionAt(0, columnIndex, tableNode);
     } else {
       const rowIndex = insertRowButtonIndex === 0 ? 0 : insertRowButtonIndex - 1;
-
       if (rowIndex > tableMap.height - 1) {
         return null;
       }
-
       return tableMap.positionAt(rowIndex, 0, tableNode);
     }
   }
-
   insertRow(event) {
     const {
       editorView,
       insertRowButtonIndex,
       editorAnalyticsAPI
     } = this.props;
-
     if (typeof insertRowButtonIndex !== 'undefined') {
       event.preventDefault();
       const {
@@ -174,7 +151,6 @@ export class FloatingInsertButton extends React.Component {
       })(state, dispatch);
     }
   }
-
   insertColumn(event) {
     const {
       editorView,
@@ -182,7 +158,6 @@ export class FloatingInsertButton extends React.Component {
       editorAnalyticsAPI,
       getEditorContainerWidth
     } = this.props;
-
     if (typeof insertColumnButtonIndex !== 'undefined') {
       event.preventDefault();
       const {
@@ -192,9 +167,6 @@ export class FloatingInsertButton extends React.Component {
       insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
     }
   }
-
 }
-
 _defineProperty(FloatingInsertButton, "displayName", 'FloatingInsertButton');
-
 export default injectIntl(FloatingInsertButton);