From 13604b3903852825fadd0e7a1b14fc7b478273a2 Mon Sep 17 00:00:00 2001
From: Yannis Barlas <yannisbarlas@gmail.com>
Date: Wed, 16 Sep 2020 14:26:33 +0300
Subject: [PATCH] add on grid select function to insert table tool
---
stories/tables/InsertTableTool.stories.js | 32 +++++++++++++++----
.../src/ui/tables/InsertTableTool.js | 20 ++++++++----
2 files changed, 39 insertions(+), 13 deletions(-)
diff --git a/stories/tables/InsertTableTool.stories.js b/stories/tables/InsertTableTool.stories.js
index 568581b9d..0c062c776 100644
--- a/stories/tables/InsertTableTool.stories.js
+++ b/stories/tables/InsertTableTool.stories.js
@@ -1,18 +1,36 @@
-import React from 'react';
+import React, { useState } from 'react';
import styled from 'styled-components';
-// import { lorem } from 'faker'
import InsertTableTool from '../../wax-prosemirror-components/src/ui/tables/InsertTableTool';
+import { Demo } from '../_helpers';
const Wrapper = styled.div`
height: 450px;
`;
-export const Base = () => (
- <Wrapper>
- <InsertTableTool />
- </Wrapper>
-);
+const Selected = styled.div`
+ margin: 12px 0;
+`;
+
+export const Base = () => {
+ const [selected, setSelected] = useState(null);
+
+ const handleGridSelect = dimensions => setSelected(dimensions);
+
+ return (
+ <Demo onClickButton={() => setSelected(null)}>
+ <Wrapper>
+ <Selected>
+ Selected:{' '}
+ {selected && `${selected.rows} rows & ${selected.cols} columns`}
+ {!selected && 'nothing'}
+ </Selected>
+
+ <InsertTableTool onGridSelect={handleGridSelect} />
+ </Wrapper>
+ </Demo>
+ );
+};
export default {
component: InsertTableTool,
diff --git a/wax-prosemirror-components/src/ui/tables/InsertTableTool.js b/wax-prosemirror-components/src/ui/tables/InsertTableTool.js
index 9dccfcb3c..149387583 100644
--- a/wax-prosemirror-components/src/ui/tables/InsertTableTool.js
+++ b/wax-prosemirror-components/src/ui/tables/InsertTableTool.js
@@ -1,8 +1,9 @@
/**
* Adapted from https://github.com/chanzuckerberg/czi-prosemirror/blob/master/src/ui/TableGridSizeEditor.js
+ *
+ * TO DO -- Implement a gdocs-style CSS only solution to dramatically cut back on renders
*/
-/* eslint-disable react/prop-types */
/* eslint-disable react/jsx-handler-names */
/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/no-find-dom-node */
@@ -14,6 +15,7 @@
/* eslint-disable jsx-a11y/no-static-element-interactions */
import React from 'react';
+import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
const clamp = (min, val, max) => {
@@ -93,6 +95,12 @@ class GridCell extends React.PureComponent {
}
}
+GridCell.propTypes = {
+ x: PropTypes.number.isRequired,
+ y: PropTypes.number.isRequired,
+ selected: PropTypes.bool.isRequired,
+};
+
class TableGridSizeEditor extends React.PureComponent {
_ex = 0;
_ey = 0;
@@ -110,10 +118,6 @@ class TableGridSizeEditor extends React.PureComponent {
};
}
- // props: {
- // close: (val: TableGridSizeEditorValue) => void,
- // };
-
componentWillUnmount() {
if (this._entered) {
document.removeEventListener('mousemove', this._onMouseMove, true);
@@ -179,7 +183,7 @@ class TableGridSizeEditor extends React.PureComponent {
_onMouseDown = e => {
e.preventDefault();
- this.props.close(this.state);
+ this.props.onGridSelect(this.state);
};
render() {
@@ -251,4 +255,8 @@ class TableGridSizeEditor extends React.PureComponent {
}
}
+TableGridSizeEditor.propTypes = {
+ onGridSelect: PropTypes.func.isRequired,
+};
+
export default TableGridSizeEditor;
--
GitLab