1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | Object.defineProperty(exports, "__esModule", {
|
6 | value: true
|
7 | });
|
8 | exports.default = exports.TableEdit = void 0;
|
9 |
|
10 | var _element = require("@wordpress/element");
|
11 |
|
12 | var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
13 |
|
14 | var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
15 |
|
16 | var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
17 |
|
18 | var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
19 |
|
20 | var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
21 |
|
22 | var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
23 |
|
24 | var _classnames = _interopRequireDefault(require("classnames"));
|
25 |
|
26 | var _blockEditor = require("@wordpress/block-editor");
|
27 |
|
28 | var _i18n = require("@wordpress/i18n");
|
29 |
|
30 | var _components = require("@wordpress/components");
|
31 |
|
32 | var _state = require("./state");
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 |
|
45 | var BACKGROUND_COLORS = [{
|
46 | color: '#f3f4f5',
|
47 | name: 'Subtle light gray',
|
48 | slug: 'subtle-light-gray'
|
49 | }, {
|
50 | color: '#e9fbe5',
|
51 | name: 'Subtle pale green',
|
52 | slug: 'subtle-pale-green'
|
53 | }, {
|
54 | color: '#e7f5fe',
|
55 | name: 'Subtle pale blue',
|
56 | slug: 'subtle-pale-blue'
|
57 | }, {
|
58 | color: '#fcf0ef',
|
59 | name: 'Subtle pale pink',
|
60 | slug: 'subtle-pale-pink'
|
61 | }];
|
62 | var withCustomBackgroundColors = (0, _blockEditor.createCustomColorsHOC)(BACKGROUND_COLORS);
|
63 |
|
64 | var TableEdit =
|
65 |
|
66 | function (_Component) {
|
67 | (0, _inherits2.default)(TableEdit, _Component);
|
68 |
|
69 | function TableEdit() {
|
70 | var _this;
|
71 |
|
72 | (0, _classCallCheck2.default)(this, TableEdit);
|
73 | _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(TableEdit).apply(this, arguments));
|
74 | _this.onCreateTable = _this.onCreateTable.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
75 | _this.onChangeFixedLayout = _this.onChangeFixedLayout.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
76 | _this.onChange = _this.onChange.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
77 | _this.onChangeInitialColumnCount = _this.onChangeInitialColumnCount.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
78 | _this.onChangeInitialRowCount = _this.onChangeInitialRowCount.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
79 | _this.renderSection = _this.renderSection.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
80 | _this.getTableControls = _this.getTableControls.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
81 | _this.onInsertRow = _this.onInsertRow.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
82 | _this.onInsertRowBefore = _this.onInsertRowBefore.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
83 | _this.onInsertRowAfter = _this.onInsertRowAfter.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
84 | _this.onDeleteRow = _this.onDeleteRow.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
85 | _this.onInsertColumn = _this.onInsertColumn.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
86 | _this.onInsertColumnBefore = _this.onInsertColumnBefore.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
87 | _this.onInsertColumnAfter = _this.onInsertColumnAfter.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
88 | _this.onDeleteColumn = _this.onDeleteColumn.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
89 | _this.state = {
|
90 | initialRowCount: 2,
|
91 | initialColumnCount: 2,
|
92 | selectedCell: null
|
93 | };
|
94 | return _this;
|
95 | }
|
96 | |
97 |
|
98 |
|
99 |
|
100 |
|
101 |
|
102 |
|
103 | (0, _createClass2.default)(TableEdit, [{
|
104 | key: "onChangeInitialColumnCount",
|
105 | value: function onChangeInitialColumnCount(initialColumnCount) {
|
106 | this.setState({
|
107 | initialColumnCount: initialColumnCount
|
108 | });
|
109 | }
|
110 | |
111 |
|
112 |
|
113 |
|
114 |
|
115 |
|
116 | }, {
|
117 | key: "onChangeInitialRowCount",
|
118 | value: function onChangeInitialRowCount(initialRowCount) {
|
119 | this.setState({
|
120 | initialRowCount: initialRowCount
|
121 | });
|
122 | }
|
123 | |
124 |
|
125 |
|
126 |
|
127 |
|
128 |
|
129 | }, {
|
130 | key: "onCreateTable",
|
131 | value: function onCreateTable(event) {
|
132 | event.preventDefault();
|
133 | var setAttributes = this.props.setAttributes;
|
134 | var _this$state = this.state,
|
135 | initialRowCount = _this$state.initialRowCount,
|
136 | initialColumnCount = _this$state.initialColumnCount;
|
137 | initialRowCount = parseInt(initialRowCount, 10) || 2;
|
138 | initialColumnCount = parseInt(initialColumnCount, 10) || 2;
|
139 | setAttributes((0, _state.createTable)({
|
140 | rowCount: initialRowCount,
|
141 | columnCount: initialColumnCount
|
142 | }));
|
143 | }
|
144 | |
145 |
|
146 |
|
147 |
|
148 | }, {
|
149 | key: "onChangeFixedLayout",
|
150 | value: function onChangeFixedLayout() {
|
151 | var _this$props = this.props,
|
152 | attributes = _this$props.attributes,
|
153 | setAttributes = _this$props.setAttributes;
|
154 | var hasFixedLayout = attributes.hasFixedLayout;
|
155 | setAttributes({
|
156 | hasFixedLayout: !hasFixedLayout
|
157 | });
|
158 | }
|
159 | |
160 |
|
161 |
|
162 |
|
163 |
|
164 |
|
165 | }, {
|
166 | key: "onChange",
|
167 | value: function onChange(content) {
|
168 | var selectedCell = this.state.selectedCell;
|
169 |
|
170 | if (!selectedCell) {
|
171 | return;
|
172 | }
|
173 |
|
174 | var _this$props2 = this.props,
|
175 | attributes = _this$props2.attributes,
|
176 | setAttributes = _this$props2.setAttributes;
|
177 | var section = selectedCell.section,
|
178 | rowIndex = selectedCell.rowIndex,
|
179 | columnIndex = selectedCell.columnIndex;
|
180 | setAttributes((0, _state.updateCellContent)(attributes, {
|
181 | section: section,
|
182 | rowIndex: rowIndex,
|
183 | columnIndex: columnIndex,
|
184 | content: content
|
185 | }));
|
186 | }
|
187 | |
188 |
|
189 |
|
190 |
|
191 |
|
192 |
|
193 | }, {
|
194 | key: "onInsertRow",
|
195 | value: function onInsertRow(delta) {
|
196 | var selectedCell = this.state.selectedCell;
|
197 |
|
198 | if (!selectedCell) {
|
199 | return;
|
200 | }
|
201 |
|
202 | var _this$props3 = this.props,
|
203 | attributes = _this$props3.attributes,
|
204 | setAttributes = _this$props3.setAttributes;
|
205 | var section = selectedCell.section,
|
206 | rowIndex = selectedCell.rowIndex;
|
207 | this.setState({
|
208 | selectedCell: null
|
209 | });
|
210 | setAttributes((0, _state.insertRow)(attributes, {
|
211 | section: section,
|
212 | rowIndex: rowIndex + delta
|
213 | }));
|
214 | }
|
215 | |
216 |
|
217 |
|
218 |
|
219 | }, {
|
220 | key: "onInsertRowBefore",
|
221 | value: function onInsertRowBefore() {
|
222 | this.onInsertRow(0);
|
223 | }
|
224 | |
225 |
|
226 |
|
227 |
|
228 | }, {
|
229 | key: "onInsertRowAfter",
|
230 | value: function onInsertRowAfter() {
|
231 | this.onInsertRow(1);
|
232 | }
|
233 | |
234 |
|
235 |
|
236 |
|
237 | }, {
|
238 | key: "onDeleteRow",
|
239 | value: function onDeleteRow() {
|
240 | var selectedCell = this.state.selectedCell;
|
241 |
|
242 | if (!selectedCell) {
|
243 | return;
|
244 | }
|
245 |
|
246 | var _this$props4 = this.props,
|
247 | attributes = _this$props4.attributes,
|
248 | setAttributes = _this$props4.setAttributes;
|
249 | var section = selectedCell.section,
|
250 | rowIndex = selectedCell.rowIndex;
|
251 | this.setState({
|
252 | selectedCell: null
|
253 | });
|
254 | setAttributes((0, _state.deleteRow)(attributes, {
|
255 | section: section,
|
256 | rowIndex: rowIndex
|
257 | }));
|
258 | }
|
259 | |
260 |
|
261 |
|
262 |
|
263 |
|
264 |
|
265 | }, {
|
266 | key: "onInsertColumn",
|
267 | value: function onInsertColumn() {
|
268 | var delta = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
269 | var selectedCell = this.state.selectedCell;
|
270 |
|
271 | if (!selectedCell) {
|
272 | return;
|
273 | }
|
274 |
|
275 | var _this$props5 = this.props,
|
276 | attributes = _this$props5.attributes,
|
277 | setAttributes = _this$props5.setAttributes;
|
278 | var section = selectedCell.section,
|
279 | columnIndex = selectedCell.columnIndex;
|
280 | this.setState({
|
281 | selectedCell: null
|
282 | });
|
283 | setAttributes((0, _state.insertColumn)(attributes, {
|
284 | section: section,
|
285 | columnIndex: columnIndex + delta
|
286 | }));
|
287 | }
|
288 | |
289 |
|
290 |
|
291 |
|
292 | }, {
|
293 | key: "onInsertColumnBefore",
|
294 | value: function onInsertColumnBefore() {
|
295 | this.onInsertColumn(0);
|
296 | }
|
297 | |
298 |
|
299 |
|
300 |
|
301 | }, {
|
302 | key: "onInsertColumnAfter",
|
303 | value: function onInsertColumnAfter() {
|
304 | this.onInsertColumn(1);
|
305 | }
|
306 | |
307 |
|
308 |
|
309 |
|
310 | }, {
|
311 | key: "onDeleteColumn",
|
312 | value: function onDeleteColumn() {
|
313 | var selectedCell = this.state.selectedCell;
|
314 |
|
315 | if (!selectedCell) {
|
316 | return;
|
317 | }
|
318 |
|
319 | var _this$props6 = this.props,
|
320 | attributes = _this$props6.attributes,
|
321 | setAttributes = _this$props6.setAttributes;
|
322 | var section = selectedCell.section,
|
323 | columnIndex = selectedCell.columnIndex;
|
324 | this.setState({
|
325 | selectedCell: null
|
326 | });
|
327 | setAttributes((0, _state.deleteColumn)(attributes, {
|
328 | section: section,
|
329 | columnIndex: columnIndex
|
330 | }));
|
331 | }
|
332 | |
333 |
|
334 |
|
335 |
|
336 |
|
337 |
|
338 |
|
339 |
|
340 |
|
341 | }, {
|
342 | key: "createOnFocus",
|
343 | value: function createOnFocus(selectedCell) {
|
344 | var _this2 = this;
|
345 |
|
346 | return function () {
|
347 | _this2.setState({
|
348 | selectedCell: selectedCell
|
349 | });
|
350 | };
|
351 | }
|
352 | |
353 |
|
354 |
|
355 |
|
356 |
|
357 |
|
358 | }, {
|
359 | key: "getTableControls",
|
360 | value: function getTableControls() {
|
361 | var selectedCell = this.state.selectedCell;
|
362 | return [{
|
363 | icon: 'table-row-before',
|
364 | title: (0, _i18n.__)('Add Row Before'),
|
365 | isDisabled: !selectedCell,
|
366 | onClick: this.onInsertRowBefore
|
367 | }, {
|
368 | icon: 'table-row-after',
|
369 | title: (0, _i18n.__)('Add Row After'),
|
370 | isDisabled: !selectedCell,
|
371 | onClick: this.onInsertRowAfter
|
372 | }, {
|
373 | icon: 'table-row-delete',
|
374 | title: (0, _i18n.__)('Delete Row'),
|
375 | isDisabled: !selectedCell,
|
376 | onClick: this.onDeleteRow
|
377 | }, {
|
378 | icon: 'table-col-before',
|
379 | title: (0, _i18n.__)('Add Column Before'),
|
380 | isDisabled: !selectedCell,
|
381 | onClick: this.onInsertColumnBefore
|
382 | }, {
|
383 | icon: 'table-col-after',
|
384 | title: (0, _i18n.__)('Add Column After'),
|
385 | isDisabled: !selectedCell,
|
386 | onClick: this.onInsertColumnAfter
|
387 | }, {
|
388 | icon: 'table-col-delete',
|
389 | title: (0, _i18n.__)('Delete Column'),
|
390 | isDisabled: !selectedCell,
|
391 | onClick: this.onDeleteColumn
|
392 | }];
|
393 | }
|
394 | |
395 |
|
396 |
|
397 |
|
398 |
|
399 |
|
400 |
|
401 |
|
402 |
|
403 | }, {
|
404 | key: "renderSection",
|
405 | value: function renderSection(_ref) {
|
406 | var _this3 = this;
|
407 |
|
408 | var type = _ref.type,
|
409 | rows = _ref.rows;
|
410 |
|
411 | if (!rows.length) {
|
412 | return null;
|
413 | }
|
414 |
|
415 | var Tag = "t".concat(type);
|
416 | var selectedCell = this.state.selectedCell;
|
417 | return (0, _element.createElement)(Tag, null, rows.map(function (_ref2, rowIndex) {
|
418 | var cells = _ref2.cells;
|
419 | return (0, _element.createElement)("tr", {
|
420 | key: rowIndex
|
421 | }, cells.map(function (_ref3, columnIndex) {
|
422 | var content = _ref3.content,
|
423 | CellTag = _ref3.tag;
|
424 | var isSelected = selectedCell && type === selectedCell.section && rowIndex === selectedCell.rowIndex && columnIndex === selectedCell.columnIndex;
|
425 | var cell = {
|
426 | section: type,
|
427 | rowIndex: rowIndex,
|
428 | columnIndex: columnIndex
|
429 | };
|
430 | var cellClasses = (0, _classnames.default)({
|
431 | 'is-selected': isSelected
|
432 | });
|
433 | return (0, _element.createElement)(CellTag, {
|
434 | key: columnIndex,
|
435 | className: cellClasses
|
436 | }, (0, _element.createElement)(_blockEditor.RichText, {
|
437 | className: "wp-block-table__cell-content",
|
438 | value: content,
|
439 | onChange: _this3.onChange,
|
440 | unstableOnFocus: _this3.createOnFocus(cell)
|
441 | }));
|
442 | }));
|
443 | }));
|
444 | }
|
445 | }, {
|
446 | key: "componentDidUpdate",
|
447 | value: function componentDidUpdate() {
|
448 | var isSelected = this.props.isSelected;
|
449 | var selectedCell = this.state.selectedCell;
|
450 |
|
451 | if (!isSelected && selectedCell) {
|
452 | this.setState({
|
453 | selectedCell: null
|
454 | });
|
455 | }
|
456 | }
|
457 | }, {
|
458 | key: "render",
|
459 | value: function render() {
|
460 | var _this$props7 = this.props,
|
461 | attributes = _this$props7.attributes,
|
462 | className = _this$props7.className,
|
463 | backgroundColor = _this$props7.backgroundColor,
|
464 | setBackgroundColor = _this$props7.setBackgroundColor;
|
465 | var _this$state2 = this.state,
|
466 | initialRowCount = _this$state2.initialRowCount,
|
467 | initialColumnCount = _this$state2.initialColumnCount;
|
468 | var hasFixedLayout = attributes.hasFixedLayout,
|
469 | head = attributes.head,
|
470 | body = attributes.body,
|
471 | foot = attributes.foot;
|
472 | var isEmpty = !head.length && !body.length && !foot.length;
|
473 | var Section = this.renderSection;
|
474 |
|
475 | if (isEmpty) {
|
476 | return (0, _element.createElement)("form", {
|
477 | onSubmit: this.onCreateTable
|
478 | }, (0, _element.createElement)(_components.TextControl, {
|
479 | type: "number",
|
480 | label: (0, _i18n.__)('Column Count'),
|
481 | value: initialColumnCount,
|
482 | onChange: this.onChangeInitialColumnCount,
|
483 | min: "1"
|
484 | }), (0, _element.createElement)(_components.TextControl, {
|
485 | type: "number",
|
486 | label: (0, _i18n.__)('Row Count'),
|
487 | value: initialRowCount,
|
488 | onChange: this.onChangeInitialRowCount,
|
489 | min: "1"
|
490 | }), (0, _element.createElement)(_components.Button, {
|
491 | isPrimary: true,
|
492 | type: "submit"
|
493 | }, (0, _i18n.__)('Create')));
|
494 | }
|
495 |
|
496 | var classes = (0, _classnames.default)(className, backgroundColor.class, {
|
497 | 'has-fixed-layout': hasFixedLayout,
|
498 | 'has-background': !!backgroundColor.color
|
499 | });
|
500 | return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockEditor.BlockControls, null, (0, _element.createElement)(_components.Toolbar, null, (0, _element.createElement)(_components.DropdownMenu, {
|
501 | icon: "editor-table",
|
502 | label: (0, _i18n.__)('Edit table'),
|
503 | controls: this.getTableControls()
|
504 | }))), (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
|
505 | title: (0, _i18n.__)('Table Settings'),
|
506 | className: "blocks-table-settings"
|
507 | }, (0, _element.createElement)(_components.ToggleControl, {
|
508 | label: (0, _i18n.__)('Fixed width table cells'),
|
509 | checked: !!hasFixedLayout,
|
510 | onChange: this.onChangeFixedLayout
|
511 | })), (0, _element.createElement)(_blockEditor.PanelColorSettings, {
|
512 | title: (0, _i18n.__)('Color Settings'),
|
513 | initialOpen: false,
|
514 | colorSettings: [{
|
515 | value: backgroundColor.color,
|
516 | onChange: setBackgroundColor,
|
517 | label: (0, _i18n.__)('Background Color'),
|
518 | disableCustomColors: true,
|
519 | colors: BACKGROUND_COLORS
|
520 | }]
|
521 | })), (0, _element.createElement)("table", {
|
522 | className: classes
|
523 | }, (0, _element.createElement)(Section, {
|
524 | type: "head",
|
525 | rows: head
|
526 | }), (0, _element.createElement)(Section, {
|
527 | type: "body",
|
528 | rows: body
|
529 | }), (0, _element.createElement)(Section, {
|
530 | type: "foot",
|
531 | rows: foot
|
532 | })));
|
533 | }
|
534 | }]);
|
535 | return TableEdit;
|
536 | }(_element.Component);
|
537 |
|
538 | exports.TableEdit = TableEdit;
|
539 |
|
540 | var _default = withCustomBackgroundColors('backgroundColor')(TableEdit);
|
541 |
|
542 | exports.default = _default;
|
543 |
|
\ | No newline at end of file |