@atlaskit/editor-plugin-card 0.10.6 → 0.10.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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-card
2
2
 
3
+ ## 0.10.7
4
+
5
+ ### Patch Changes
6
+
7
+ - [#38725](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38725) [`0f145c04dbf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0f145c04dbf) - [ux] Datasource columns now can be resizied
8
+ - [#38725](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38725) [`0f145c04dbf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0f145c04dbf) - [ux] Datasource columns now can be resizied
9
+ - Updated dependencies
10
+
3
11
  ## 0.10.6
4
12
 
5
13
  ### Patch Changes
@@ -47,31 +47,59 @@ var DatasourceComponent = exports.DatasourceComponent = /*#__PURE__*/function (_
47
47
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getDatasource", function () {
48
48
  return _this.props.node.attrs.datasource;
49
49
  });
50
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getTableView", function (datasource) {
51
- var views = (datasource || _this.getDatasource()).views;
50
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getTableView", function () {
51
+ var views = _this.getDatasource().views;
52
52
  return views.find(function (view) {
53
53
  return view.type === 'table';
54
54
  }) || undefined;
55
55
  });
56
56
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleColumnChange", function (columnKeys) {
57
- var _this$props$view = _this.props.view,
57
+ var _this$getColumnsInfo = _this.getColumnsInfo(),
58
+ columnCustomSizes = _this$getColumnsInfo.columnCustomSizes;
59
+ _this.updateTableProperties(columnKeys, columnCustomSizes || {});
60
+ });
61
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleColumnResize", function (key, width) {
62
+ var _this$getColumnsInfo2 = _this.getColumnsInfo(),
63
+ columnCustomSizes = _this$getColumnsInfo2.columnCustomSizes,
64
+ visibleColumnKeys = _this$getColumnsInfo2.visibleColumnKeys;
65
+ var newColumnCustomSizes = _objectSpread(_objectSpread({}, columnCustomSizes || {}), {}, (0, _defineProperty2.default)({}, key, width));
66
+ // In case for some reason there are no visible keys stored in ADF, we can take them from columnSizes
67
+ // columnKeys are needed to update ADF (since custom width only make sense for a visible column)
68
+ // So this function effectively adds a visible column if it wasn't there
69
+ var columnKeys = visibleColumnKeys && visibleColumnKeys.indexOf(key) > -1 ? visibleColumnKeys : Object.keys(newColumnCustomSizes);
70
+ _this.updateTableProperties(columnKeys, newColumnCustomSizes);
71
+ });
72
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onError", function (_ref) {
73
+ var err = _ref.err;
74
+ if (err) {
75
+ throw err;
76
+ }
77
+ });
78
+ return _this;
79
+ }
80
+ (0, _createClass2.default)(DatasourceComponent, [{
81
+ key: "updateTableProperties",
82
+ value: function updateTableProperties(columnKeys, columnCustomSizes) {
83
+ var _this$props$view = this.props.view,
58
84
  state = _this$props$view.state,
59
85
  dispatch = _this$props$view.dispatch;
60
- var pos = getPosSafely(_this.props.getPos);
86
+ var pos = getPosSafely(this.props.getPos);
61
87
  if (pos === undefined) {
62
88
  return;
63
89
  }
64
- var attrs = _this.props.node.attrs;
65
90
  var views = [{
66
91
  type: 'table',
67
92
  properties: {
68
93
  columns: columnKeys.map(function (key) {
69
- return {
94
+ return _objectSpread({
70
95
  key: key
71
- };
96
+ }, columnCustomSizes[key] ? {
97
+ width: columnCustomSizes[key]
98
+ } : {});
72
99
  })
73
100
  }
74
101
  }];
102
+ var attrs = this.props.node.attrs;
75
103
  var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, attrs), {}, {
76
104
  datasource: _objectSpread(_objectSpread({}, attrs.datasource), {}, {
77
105
  views: views
@@ -82,16 +110,33 @@ var DatasourceComponent = exports.DatasourceComponent = /*#__PURE__*/function (_
82
110
  tr.setMeta('addToHistory', false);
83
111
  tr.setMeta('scrollIntoView', false);
84
112
  dispatch(tr);
85
- });
86
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onError", function (_ref) {
87
- var err = _ref.err;
88
- if (err) {
89
- throw err;
113
+ }
114
+ }, {
115
+ key: "getColumnsInfo",
116
+ value: function getColumnsInfo() {
117
+ var _tableView$properties;
118
+ var tableView = this.getTableView();
119
+ var columnsProp = tableView === null || tableView === void 0 || (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns;
120
+ var visibleColumnKeys = columnsProp === null || columnsProp === void 0 ? void 0 : columnsProp.map(function (_ref2) {
121
+ var key = _ref2.key;
122
+ return key;
123
+ });
124
+ var columnCustomSizes;
125
+ var columnsWithWidth = columnsProp === null || columnsProp === void 0 ? void 0 : columnsProp.filter(function (c) {
126
+ return !!c.width;
127
+ });
128
+ if (columnsWithWidth) {
129
+ var keyWidthPairs = columnsWithWidth.map(function (c) {
130
+ return [c.key, c.width];
131
+ });
132
+ columnCustomSizes = Object.fromEntries(keyWidthPairs);
90
133
  }
91
- });
92
- return _this;
93
- }
94
- (0, _createClass2.default)(DatasourceComponent, [{
134
+ return {
135
+ visibleColumnKeys: visibleColumnKeys,
136
+ columnCustomSizes: columnCustomSizes
137
+ };
138
+ }
139
+ }, {
95
140
  key: "render",
96
141
  value: function render() {
97
142
  var cardContext = this.context.contextAdapter ? this.context.contextAdapter.card : undefined;
@@ -99,11 +144,9 @@ var DatasourceComponent = exports.DatasourceComponent = /*#__PURE__*/function (_
99
144
  var attrs = this.props.node.attrs;
100
145
  var tableView = this.getTableView();
101
146
  if (tableView) {
102
- var _tableView$properties;
103
- var visibleColumnKeys = (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns.map(function (_ref2) {
104
- var key = _ref2.key;
105
- return key;
106
- });
147
+ var _this$getColumnsInfo3 = this.getColumnsInfo(),
148
+ visibleColumnKeys = _this$getColumnsInfo3.visibleColumnKeys,
149
+ columnCustomSizes = _this$getColumnsInfo3.columnCustomSizes;
107
150
 
108
151
  // [WS-2307]: we only render card wrapped into a Provider when the value is ready
109
152
  if (cardContext && cardContext.value) {
@@ -116,7 +159,9 @@ var DatasourceComponent = exports.DatasourceComponent = /*#__PURE__*/function (_
116
159
  parameters: datasource.parameters,
117
160
  visibleColumnKeys: visibleColumnKeys,
118
161
  onVisibleColumnKeysChange: this.handleColumnChange,
119
- url: attrs === null || attrs === void 0 ? void 0 : attrs.url
162
+ url: attrs === null || attrs === void 0 ? void 0 : attrs.url,
163
+ onColumnResize: this.handleColumnResize,
164
+ columnCustomSizes: columnCustomSizes
120
165
  })));
121
166
  }
122
167
  }
@@ -25,40 +25,30 @@ export class DatasourceComponent extends React.PureComponent {
25
25
  constructor(props) {
26
26
  super(props);
27
27
  _defineProperty(this, "getDatasource", () => this.props.node.attrs.datasource);
28
- _defineProperty(this, "getTableView", datasource => {
29
- const views = (datasource || this.getDatasource()).views;
28
+ _defineProperty(this, "getTableView", () => {
29
+ const views = this.getDatasource().views;
30
30
  return views.find(view => view.type === 'table') || undefined;
31
31
  });
32
32
  _defineProperty(this, "handleColumnChange", columnKeys => {
33
33
  const {
34
- state,
35
- dispatch
36
- } = this.props.view;
37
- const pos = getPosSafely(this.props.getPos);
38
- if (pos === undefined) {
39
- return;
40
- }
41
- const attrs = this.props.node.attrs;
42
- const views = [{
43
- type: 'table',
44
- properties: {
45
- columns: columnKeys.map(key => ({
46
- key
47
- }))
48
- }
49
- }];
50
- const tr = state.tr.setNodeMarkup(pos, undefined, {
51
- ...attrs,
52
- datasource: {
53
- ...attrs.datasource,
54
- views
55
- }
56
- });
57
-
58
- // Ensures dispatch does not contribute to undo history (otherwise user requires three undo's to revert table)
59
- tr.setMeta('addToHistory', false);
60
- tr.setMeta('scrollIntoView', false);
61
- dispatch(tr);
34
+ columnCustomSizes
35
+ } = this.getColumnsInfo();
36
+ this.updateTableProperties(columnKeys, columnCustomSizes || {});
37
+ });
38
+ _defineProperty(this, "handleColumnResize", (key, width) => {
39
+ const {
40
+ columnCustomSizes,
41
+ visibleColumnKeys
42
+ } = this.getColumnsInfo();
43
+ const newColumnCustomSizes = {
44
+ ...(columnCustomSizes || {}),
45
+ [key]: width
46
+ };
47
+ // In case for some reason there are no visible keys stored in ADF, we can take them from columnSizes
48
+ // columnKeys are needed to update ADF (since custom width only make sense for a visible column)
49
+ // So this function effectively adds a visible column if it wasn't there
50
+ const columnKeys = visibleColumnKeys && visibleColumnKeys.indexOf(key) > -1 ? visibleColumnKeys : Object.keys(newColumnCustomSizes);
51
+ this.updateTableProperties(columnKeys, newColumnCustomSizes);
62
52
  });
63
53
  _defineProperty(this, "onError", ({
64
54
  err
@@ -68,16 +58,68 @@ export class DatasourceComponent extends React.PureComponent {
68
58
  }
69
59
  });
70
60
  }
61
+ updateTableProperties(columnKeys, columnCustomSizes) {
62
+ const {
63
+ state,
64
+ dispatch
65
+ } = this.props.view;
66
+ const pos = getPosSafely(this.props.getPos);
67
+ if (pos === undefined) {
68
+ return;
69
+ }
70
+ const views = [{
71
+ type: 'table',
72
+ properties: {
73
+ columns: columnKeys.map(key => ({
74
+ key,
75
+ ...(columnCustomSizes[key] ? {
76
+ width: columnCustomSizes[key]
77
+ } : {})
78
+ }))
79
+ }
80
+ }];
81
+ const attrs = this.props.node.attrs;
82
+ const tr = state.tr.setNodeMarkup(pos, undefined, {
83
+ ...attrs,
84
+ datasource: {
85
+ ...attrs.datasource,
86
+ views
87
+ }
88
+ });
89
+
90
+ // Ensures dispatch does not contribute to undo history (otherwise user requires three undo's to revert table)
91
+ tr.setMeta('addToHistory', false);
92
+ tr.setMeta('scrollIntoView', false);
93
+ dispatch(tr);
94
+ }
95
+ getColumnsInfo() {
96
+ var _tableView$properties;
97
+ const tableView = this.getTableView();
98
+ const columnsProp = tableView === null || tableView === void 0 ? void 0 : (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns;
99
+ const visibleColumnKeys = columnsProp === null || columnsProp === void 0 ? void 0 : columnsProp.map(({
100
+ key
101
+ }) => key);
102
+ let columnCustomSizes;
103
+ const columnsWithWidth = columnsProp === null || columnsProp === void 0 ? void 0 : columnsProp.filter(c => !!c.width);
104
+ if (columnsWithWidth) {
105
+ const keyWidthPairs = columnsWithWidth.map(c => [c.key, c.width]);
106
+ columnCustomSizes = Object.fromEntries(keyWidthPairs);
107
+ }
108
+ return {
109
+ visibleColumnKeys,
110
+ columnCustomSizes
111
+ };
112
+ }
71
113
  render() {
72
114
  const cardContext = this.context.contextAdapter ? this.context.contextAdapter.card : undefined;
73
115
  const datasource = this.getDatasource();
74
116
  const attrs = this.props.node.attrs;
75
117
  const tableView = this.getTableView();
76
118
  if (tableView) {
77
- var _tableView$properties;
78
- const visibleColumnKeys = (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns.map(({
79
- key
80
- }) => key);
119
+ const {
120
+ visibleColumnKeys,
121
+ columnCustomSizes
122
+ } = this.getColumnsInfo();
81
123
 
82
124
  // [WS-2307]: we only render card wrapped into a Provider when the value is ready
83
125
  if (cardContext && cardContext.value) {
@@ -90,7 +132,9 @@ export class DatasourceComponent extends React.PureComponent {
90
132
  parameters: datasource.parameters,
91
133
  visibleColumnKeys: visibleColumnKeys,
92
134
  onVisibleColumnKeysChange: this.handleColumnChange,
93
- url: attrs === null || attrs === void 0 ? void 0 : attrs.url
135
+ url: attrs === null || attrs === void 0 ? void 0 : attrs.url,
136
+ onColumnResize: this.handleColumnResize,
137
+ columnCustomSizes: columnCustomSizes
94
138
  })));
95
139
  }
96
140
  }
@@ -41,31 +41,59 @@ export var DatasourceComponent = /*#__PURE__*/function (_React$PureComponent) {
41
41
  _defineProperty(_assertThisInitialized(_this), "getDatasource", function () {
42
42
  return _this.props.node.attrs.datasource;
43
43
  });
44
- _defineProperty(_assertThisInitialized(_this), "getTableView", function (datasource) {
45
- var views = (datasource || _this.getDatasource()).views;
44
+ _defineProperty(_assertThisInitialized(_this), "getTableView", function () {
45
+ var views = _this.getDatasource().views;
46
46
  return views.find(function (view) {
47
47
  return view.type === 'table';
48
48
  }) || undefined;
49
49
  });
50
50
  _defineProperty(_assertThisInitialized(_this), "handleColumnChange", function (columnKeys) {
51
- var _this$props$view = _this.props.view,
51
+ var _this$getColumnsInfo = _this.getColumnsInfo(),
52
+ columnCustomSizes = _this$getColumnsInfo.columnCustomSizes;
53
+ _this.updateTableProperties(columnKeys, columnCustomSizes || {});
54
+ });
55
+ _defineProperty(_assertThisInitialized(_this), "handleColumnResize", function (key, width) {
56
+ var _this$getColumnsInfo2 = _this.getColumnsInfo(),
57
+ columnCustomSizes = _this$getColumnsInfo2.columnCustomSizes,
58
+ visibleColumnKeys = _this$getColumnsInfo2.visibleColumnKeys;
59
+ var newColumnCustomSizes = _objectSpread(_objectSpread({}, columnCustomSizes || {}), {}, _defineProperty({}, key, width));
60
+ // In case for some reason there are no visible keys stored in ADF, we can take them from columnSizes
61
+ // columnKeys are needed to update ADF (since custom width only make sense for a visible column)
62
+ // So this function effectively adds a visible column if it wasn't there
63
+ var columnKeys = visibleColumnKeys && visibleColumnKeys.indexOf(key) > -1 ? visibleColumnKeys : Object.keys(newColumnCustomSizes);
64
+ _this.updateTableProperties(columnKeys, newColumnCustomSizes);
65
+ });
66
+ _defineProperty(_assertThisInitialized(_this), "onError", function (_ref) {
67
+ var err = _ref.err;
68
+ if (err) {
69
+ throw err;
70
+ }
71
+ });
72
+ return _this;
73
+ }
74
+ _createClass(DatasourceComponent, [{
75
+ key: "updateTableProperties",
76
+ value: function updateTableProperties(columnKeys, columnCustomSizes) {
77
+ var _this$props$view = this.props.view,
52
78
  state = _this$props$view.state,
53
79
  dispatch = _this$props$view.dispatch;
54
- var pos = getPosSafely(_this.props.getPos);
80
+ var pos = getPosSafely(this.props.getPos);
55
81
  if (pos === undefined) {
56
82
  return;
57
83
  }
58
- var attrs = _this.props.node.attrs;
59
84
  var views = [{
60
85
  type: 'table',
61
86
  properties: {
62
87
  columns: columnKeys.map(function (key) {
63
- return {
88
+ return _objectSpread({
64
89
  key: key
65
- };
90
+ }, columnCustomSizes[key] ? {
91
+ width: columnCustomSizes[key]
92
+ } : {});
66
93
  })
67
94
  }
68
95
  }];
96
+ var attrs = this.props.node.attrs;
69
97
  var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, attrs), {}, {
70
98
  datasource: _objectSpread(_objectSpread({}, attrs.datasource), {}, {
71
99
  views: views
@@ -76,16 +104,33 @@ export var DatasourceComponent = /*#__PURE__*/function (_React$PureComponent) {
76
104
  tr.setMeta('addToHistory', false);
77
105
  tr.setMeta('scrollIntoView', false);
78
106
  dispatch(tr);
79
- });
80
- _defineProperty(_assertThisInitialized(_this), "onError", function (_ref) {
81
- var err = _ref.err;
82
- if (err) {
83
- throw err;
107
+ }
108
+ }, {
109
+ key: "getColumnsInfo",
110
+ value: function getColumnsInfo() {
111
+ var _tableView$properties;
112
+ var tableView = this.getTableView();
113
+ var columnsProp = tableView === null || tableView === void 0 || (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns;
114
+ var visibleColumnKeys = columnsProp === null || columnsProp === void 0 ? void 0 : columnsProp.map(function (_ref2) {
115
+ var key = _ref2.key;
116
+ return key;
117
+ });
118
+ var columnCustomSizes;
119
+ var columnsWithWidth = columnsProp === null || columnsProp === void 0 ? void 0 : columnsProp.filter(function (c) {
120
+ return !!c.width;
121
+ });
122
+ if (columnsWithWidth) {
123
+ var keyWidthPairs = columnsWithWidth.map(function (c) {
124
+ return [c.key, c.width];
125
+ });
126
+ columnCustomSizes = Object.fromEntries(keyWidthPairs);
84
127
  }
85
- });
86
- return _this;
87
- }
88
- _createClass(DatasourceComponent, [{
128
+ return {
129
+ visibleColumnKeys: visibleColumnKeys,
130
+ columnCustomSizes: columnCustomSizes
131
+ };
132
+ }
133
+ }, {
89
134
  key: "render",
90
135
  value: function render() {
91
136
  var cardContext = this.context.contextAdapter ? this.context.contextAdapter.card : undefined;
@@ -93,11 +138,9 @@ export var DatasourceComponent = /*#__PURE__*/function (_React$PureComponent) {
93
138
  var attrs = this.props.node.attrs;
94
139
  var tableView = this.getTableView();
95
140
  if (tableView) {
96
- var _tableView$properties;
97
- var visibleColumnKeys = (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns.map(function (_ref2) {
98
- var key = _ref2.key;
99
- return key;
100
- });
141
+ var _this$getColumnsInfo3 = this.getColumnsInfo(),
142
+ visibleColumnKeys = _this$getColumnsInfo3.visibleColumnKeys,
143
+ columnCustomSizes = _this$getColumnsInfo3.columnCustomSizes;
101
144
 
102
145
  // [WS-2307]: we only render card wrapped into a Provider when the value is ready
103
146
  if (cardContext && cardContext.value) {
@@ -110,7 +153,9 @@ export var DatasourceComponent = /*#__PURE__*/function (_React$PureComponent) {
110
153
  parameters: datasource.parameters,
111
154
  visibleColumnKeys: visibleColumnKeys,
112
155
  onVisibleColumnKeysChange: this.handleColumnChange,
113
- url: attrs === null || attrs === void 0 ? void 0 : attrs.url
156
+ url: attrs === null || attrs === void 0 ? void 0 : attrs.url,
157
+ onColumnResize: this.handleColumnResize,
158
+ columnCustomSizes: columnCustomSizes
114
159
  })));
115
160
  }
116
161
  }
@@ -28,10 +28,13 @@ export declare class DatasourceComponent extends React.PureComponent<DatasourceC
28
28
  constructor(props: DatasourceComponentProps);
29
29
  private getDatasource;
30
30
  private getTableView;
31
+ private updateTableProperties;
31
32
  handleColumnChange: (columnKeys: string[]) => void;
33
+ handleColumnResize: (key: string, width: number) => void;
32
34
  onError: ({ err }: {
33
35
  err?: Error | undefined;
34
36
  }) => void;
37
+ private getColumnsInfo;
35
38
  render(): jsx.JSX.Element | null;
36
39
  }
37
40
  export declare class Datasource extends ReactNodeView<DatasourceProps> {
@@ -28,10 +28,13 @@ export declare class DatasourceComponent extends React.PureComponent<DatasourceC
28
28
  constructor(props: DatasourceComponentProps);
29
29
  private getDatasource;
30
30
  private getTableView;
31
+ private updateTableProperties;
31
32
  handleColumnChange: (columnKeys: string[]) => void;
33
+ handleColumnResize: (key: string, width: number) => void;
32
34
  onError: ({ err }: {
33
35
  err?: Error | undefined;
34
36
  }) => void;
37
+ private getColumnsInfo;
35
38
  render(): jsx.JSX.Element | null;
36
39
  }
37
40
  export declare class Datasource extends ReactNodeView<DatasourceProps> {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-card",
3
- "version": "0.10.6",
3
+ "version": "0.10.7",
4
4
  "description": "Card plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -34,7 +34,7 @@
34
34
  "@atlaskit/adf-schema": "^32.0.0",
35
35
  "@atlaskit/analytics-next": "^9.1.0",
36
36
  "@atlaskit/custom-steps": "^0.0.2",
37
- "@atlaskit/editor-common": "^76.17.0",
37
+ "@atlaskit/editor-common": "^76.18.0",
38
38
  "@atlaskit/editor-plugin-analytics": "^0.3.0",
39
39
  "@atlaskit/editor-plugin-decorations": "^0.2.0",
40
40
  "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
@@ -46,7 +46,7 @@
46
46
  "@atlaskit/editor-shared-styles": "^2.8.0",
47
47
  "@atlaskit/icon": "^21.12.0",
48
48
  "@atlaskit/link-analytics": "^8.3.0",
49
- "@atlaskit/link-datasource": "^1.11.0",
49
+ "@atlaskit/link-datasource": "^1.12.0",
50
50
  "@atlaskit/platform-feature-flags": "^0.2.0",
51
51
  "@atlaskit/smart-card": "^26.41.0",
52
52
  "@atlaskit/theme": "^12.6.0",