@atlaskit/editor-plugin-table 2.1.6 → 2.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/plugins/table/nodeviews/TableResizer.js +19 -0
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/es2019/plugins/table/nodeviews/TableResizer.js +19 -0
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/esm/plugins/table/nodeviews/TableResizer.js +19 -0
  7. package/dist/esm/version.json +1 -1
  8. package/package.json +1 -1
  9. package/src/plugins/table/nodeviews/TableResizer.tsx +25 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 2.1.7
4
+
5
+ ### Patch Changes
6
+
7
+ - [`018b27d3392`](https://bitbucket.org/atlassian/atlassian-frontend/commits/018b27d3392) - [ux] Makes new table resize handle sticky and of variable height based on the table height.
8
+
3
9
  ## 2.1.6
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/plugins/table/nodeviews/TableResizer.js CHANGED
@@ -15,6 +15,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
15
15
  var handles = {
16
16
  right: true
17
17
  };
18
+ var tableHandleMarginTop = 11;
18
19
  var TableResizer = function TableResizer(_ref) {
19
20
  var children = _ref.children,
20
21
  width = _ref.width,
@@ -26,9 +27,27 @@ var TableResizer = function TableResizer(_ref) {
26
27
  tableRef = _ref.tableRef;
27
28
  var currentColumnCount = (0, _utils.getColgroupChildrenLength)(node);
28
29
  var minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * _utils.COLUMN_MIN_WIDTH : 3 * _utils.COLUMN_MIN_WIDTH;
30
+ var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
31
+ var handleHeightSize = 'small';
32
+ /*
33
+ - One row table height (minimum possible table height) ~ 45px
34
+ - Two row table height ~ 90px
35
+ - Three row table height ~ 134px
36
+ In the if below we need to use:
37
+ - > 46 because the height of the table can be a float number like 45.44.
38
+ - < 96 is the height of large resize handle.
39
+ */
40
+ if (tableHeight && tableHeight > 46 && tableHeight < 96) {
41
+ handleHeightSize = 'medium';
42
+ } else if (tableHeight && tableHeight >= 96) {
43
+ handleHeightSize = 'large';
44
+ }
29
45
  return /*#__PURE__*/_react.default.createElement(_resizer.ResizerNext, {
30
46
  enable: handles,
31
47
  width: width,
48
+ handleAlignmentMethod: "sticky",
49
+ handleHeightSize: handleHeightSize,
50
+ handleMarginTop: tableHandleMarginTop,
32
51
  handleResizeStart: function handleResizeStart() {
33
52
  return width;
34
53
  },
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "2.1.6",
3
+ "version": "2.1.7",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/plugins/table/nodeviews/TableResizer.js CHANGED
@@ -5,6 +5,7 @@ import { scaleTable, previewScaleTable, getColgroupChildrenLength, COLUMN_MIN_WI
5
5
  const handles = {
6
6
  right: true
7
7
  };
8
+ const tableHandleMarginTop = 11;
8
9
  export const TableResizer = ({
9
10
  children,
10
11
  width,
@@ -17,9 +18,27 @@ export const TableResizer = ({
17
18
  }) => {
18
19
  const currentColumnCount = getColgroupChildrenLength(node);
19
20
  const minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
21
+ const tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
22
+ let handleHeightSize = 'small';
23
+ /*
24
+ - One row table height (minimum possible table height) ~ 45px
25
+ - Two row table height ~ 90px
26
+ - Three row table height ~ 134px
27
+ In the if below we need to use:
28
+ - > 46 because the height of the table can be a float number like 45.44.
29
+ - < 96 is the height of large resize handle.
30
+ */
31
+ if (tableHeight && tableHeight > 46 && tableHeight < 96) {
32
+ handleHeightSize = 'medium';
33
+ } else if (tableHeight && tableHeight >= 96) {
34
+ handleHeightSize = 'large';
35
+ }
20
36
  return /*#__PURE__*/React.createElement(ResizerNext, {
21
37
  enable: handles,
22
38
  width: width,
39
+ handleAlignmentMethod: "sticky",
40
+ handleHeightSize: handleHeightSize,
41
+ handleMarginTop: tableHandleMarginTop,
23
42
  handleResizeStart: () => width,
24
43
  handleResize: rafSchd((originalState, delta) => {
25
44
  const newWidth = originalState.width + delta.width;
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "2.1.6",
3
+ "version": "2.1.7",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/plugins/table/nodeviews/TableResizer.js CHANGED
@@ -8,6 +8,7 @@ import { scaleTable, previewScaleTable, getColgroupChildrenLength, COLUMN_MIN_WI
8
8
  var handles = {
9
9
  right: true
10
10
  };
11
+ var tableHandleMarginTop = 11;
11
12
  export var TableResizer = function TableResizer(_ref) {
12
13
  var children = _ref.children,
13
14
  width = _ref.width,
@@ -19,9 +20,27 @@ export var TableResizer = function TableResizer(_ref) {
19
20
  tableRef = _ref.tableRef;
20
21
  var currentColumnCount = getColgroupChildrenLength(node);
21
22
  var minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
23
+ var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
24
+ var handleHeightSize = 'small';
25
+ /*
26
+ - One row table height (minimum possible table height) ~ 45px
27
+ - Two row table height ~ 90px
28
+ - Three row table height ~ 134px
29
+ In the if below we need to use:
30
+ - > 46 because the height of the table can be a float number like 45.44.
31
+ - < 96 is the height of large resize handle.
32
+ */
33
+ if (tableHeight && tableHeight > 46 && tableHeight < 96) {
34
+ handleHeightSize = 'medium';
35
+ } else if (tableHeight && tableHeight >= 96) {
36
+ handleHeightSize = 'large';
37
+ }
22
38
  return /*#__PURE__*/React.createElement(ResizerNext, {
23
39
  enable: handles,
24
40
  width: width,
41
+ handleAlignmentMethod: "sticky",
42
+ handleHeightSize: handleHeightSize,
43
+ handleMarginTop: tableHandleMarginTop,
25
44
  handleResizeStart: function handleResizeStart() {
26
45
  return width;
27
46
  },
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "2.1.6",
3
+ "version": "2.1.7",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "2.1.6",
3
+ "version": "2.1.7",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
package/src/plugins/table/nodeviews/TableResizer.tsx CHANGED
@@ -3,7 +3,10 @@ import { EditorView } from 'prosemirror-view';
3
3
  import { Node as PMNode } from 'prosemirror-model';
4
4
  import rafSchd from 'raf-schd';
5
5
 
6
- import { ResizerNext } from '@atlaskit/editor-common/resizer';
6
+ import {
7
+ HandleHeightSizeType,
8
+ ResizerNext,
9
+ } from '@atlaskit/editor-common/resizer';
7
10
 
8
11
  import {
9
12
  scaleTable,
@@ -23,6 +26,7 @@ interface TableResizerProps {
23
26
  }
24
27
 
25
28
  const handles = { right: true };
29
+ const tableHandleMarginTop = 11;
26
30
 
27
31
  export const TableResizer = ({
28
32
  children,
@@ -40,10 +44,30 @@ export const TableResizer = ({
40
44
  ? currentColumnCount * COLUMN_MIN_WIDTH
41
45
  : 3 * COLUMN_MIN_WIDTH;
42
46
 
47
+ const tableHeight = tableRef?.clientHeight;
48
+ let handleHeightSize: HandleHeightSizeType | undefined = 'small';
49
+ /*
50
+ - One row table height (minimum possible table height) ~ 45px
51
+ - Two row table height ~ 90px
52
+ - Three row table height ~ 134px
53
+
54
+ In the if below we need to use:
55
+ - > 46 because the height of the table can be a float number like 45.44.
56
+ - < 96 is the height of large resize handle.
57
+ */
58
+ if (tableHeight && tableHeight > 46 && tableHeight < 96) {
59
+ handleHeightSize = 'medium';
60
+ } else if (tableHeight && tableHeight >= 96) {
61
+ handleHeightSize = 'large';
62
+ }
63
+
43
64
  return (
44
65
  <ResizerNext
45
66
  enable={handles}
46
67
  width={width}
68
+ handleAlignmentMethod="sticky"
69
+ handleHeightSize={handleHeightSize}
70
+ handleMarginTop={tableHandleMarginTop}
47
71
  handleResizeStart={() => width}
48
72
  handleResize={rafSchd((originalState, delta) => {
49
73
  const newWidth = originalState.width + delta.width;