From 34e12ee7f03b372fba5426162c99c88384541b4d Mon Sep 17 00:00:00 2001
From: Yannis Barlas <yannisbarlas@gmail.com>
Date: Wed, 16 Sep 2020 14:08:21 +0300
Subject: [PATCH] table grid ui
---
.eslintrc.js | 4 +
stories/tables/Grid.stories.js | 20 --
stories/tables/GridCell.stories.js | 13 --
....stories.js => InsertTableTool.stories.js} | 6 +-
.../src/ui/tables/Grid.js | 171 ------------------
.../src/ui/tables/GridCell.js | 44 -----
.../{TableTool.js => InsertTableTool.js} | 45 ++---
7 files changed, 22 insertions(+), 281 deletions(-)
delete mode 100644 stories/tables/Grid.stories.js
delete mode 100644 stories/tables/GridCell.stories.js
rename stories/tables/{TableTool.stories.js => InsertTableTool.stories.js} (63%)
delete mode 100644 wax-prosemirror-components/src/ui/tables/Grid.js
delete mode 100644 wax-prosemirror-components/src/ui/tables/GridCell.js
rename wax-prosemirror-components/src/ui/tables/{TableTool.js => InsertTableTool.js} (85%)
diff --git a/.eslintrc.js b/.eslintrc.js
index 22426f434..6ed1d951b 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -8,6 +8,10 @@ const { eslint } = require('@coko/lint');
*
*/
+eslint.env = {
+ browser: true,
+};
+
eslint.parser = 'babel-eslint';
eslint.parserOptions = {
diff --git a/stories/tables/Grid.stories.js b/stories/tables/Grid.stories.js
deleted file mode 100644
index e64d49e24..000000000
--- a/stories/tables/Grid.stories.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-// import { lorem } from 'faker'
-
-import Grid from '../../wax-prosemirror-components/src/ui/tables/Grid';
-
-const Wrapper = styled.div`
- height: 400px;
-`;
-
-export const Base = () => (
- <Wrapper>
- <Grid />
- </Wrapper>
-);
-
-export default {
- component: Grid,
- title: 'Tables/Grid',
-};
diff --git a/stories/tables/GridCell.stories.js b/stories/tables/GridCell.stories.js
deleted file mode 100644
index 308db746a..000000000
--- a/stories/tables/GridCell.stories.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-// import { lorem } from 'faker'
-
-import GridCell from '../../wax-prosemirror-components/src/ui/tables/GridCell';
-
-export const Base = () => <GridCell />;
-
-export const Active = () => <GridCell active />;
-
-export default {
- component: GridCell,
- title: 'Tables/Grid Cell',
-};
diff --git a/stories/tables/TableTool.stories.js b/stories/tables/InsertTableTool.stories.js
similarity index 63%
rename from stories/tables/TableTool.stories.js
rename to stories/tables/InsertTableTool.stories.js
index 6fd78c8e9..568581b9d 100644
--- a/stories/tables/TableTool.stories.js
+++ b/stories/tables/InsertTableTool.stories.js
@@ -2,7 +2,7 @@ import React from 'react';
import styled from 'styled-components';
// import { lorem } from 'faker'
-import TableTool from '../../wax-prosemirror-components/src/ui/tables/TableTool';
+import InsertTableTool from '../../wax-prosemirror-components/src/ui/tables/InsertTableTool';
const Wrapper = styled.div`
height: 450px;
@@ -10,11 +10,11 @@ const Wrapper = styled.div`
export const Base = () => (
<Wrapper>
- <TableTool />
+ <InsertTableTool />
</Wrapper>
);
export default {
- component: TableTool,
+ component: InsertTableTool,
title: 'Tables/Table Tool',
};
diff --git a/wax-prosemirror-components/src/ui/tables/Grid.js b/wax-prosemirror-components/src/ui/tables/Grid.js
deleted file mode 100644
index 05f4f3122..000000000
--- a/wax-prosemirror-components/src/ui/tables/Grid.js
+++ /dev/null
@@ -1,171 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
-import { range } from 'lodash';
-
-const MIN_GRID_SIZE = 20;
-const MAX_GRID_SIZE = 20;
-const INITIAL_ACTIVE_GRID_SIZE = 1;
-const CELL_SIZE = 12;
-const GUTTER = 4;
-
-const Wrapper = styled.div`
- position: relative;
- box-sizing: border-box;
-
- height: ${props => `${props.rows * (CELL_SIZE + GUTTER)}px`};
- width: ${props => `${props.columns * (CELL_SIZE + GUTTER)}px`};
-`;
-
-const StyledCell = styled.div.attrs(({ top, left }) => ({
- style: {
- top,
- left,
- },
-}))`
- height: 12px;
- width: 12px;
- border: 1px solid gray;
- display: inline-block;
- /* transition: background 0.1s ease-in; */
-
- position: absolute;
-`;
-// top: ${props => props.top};
-// left: ${props => props.left};
-
-class Cell extends React.PureComponent {
- render() {
- console.log('render!');
- const {
- active,
- // className,
- // onMouseEnter,
- // rowIndex,
- // columnIndex,
- top,
- left,
- } = this.props;
-
- return (
- <StyledCell
- style={{
- background: active && 'skyblue',
- }}
- // row={rowIndex}
- // column={columnIndex}
- active={active}
- // onMouseEnter={onMouseEnter}
- top={top}
- left={left}
- />
- );
- }
-}
-
-// const Cell = props => {
-// console.log('render!');
-// const {
-// active,
-// // className,
-// // onMouseEnter,
-// // rowIndex,
-// // columnIndex,
-// top,
-// left,
-// } = props;
-
-// return (
-// <StyledCell
-// style={{
-// background: active && 'skyblue',
-// }}
-// // row={rowIndex}
-// // column={columnIndex}
-// active={active}
-// // onMouseEnter={onMouseEnter}
-// top={top}
-// left={left}
-// />
-// );
-// };
-
-let counter = 0;
-
-const Grid = props => {
- const { className } = props;
-
- const [rows, setRows] = useState(MIN_GRID_SIZE);
- const [columns, setColumns] = useState(MIN_GRID_SIZE);
-
- const [activeRows, setActiveRows] = useState(INITIAL_ACTIVE_GRID_SIZE);
- const [activeColumns, setActiveColumns] = useState(INITIAL_ACTIVE_GRID_SIZE);
-
- const onMouseMove = e => {
- counter++;
- // console.log(counter);
- // const startTime = performance.now();
- // get position of our Wrapper within page
- const container = e.currentTarget.getBoundingClientRect();
- const containerX = e.pageX - container.left;
- const containerY = e.pageY - container.top;
-
- const overRow = Math.ceil(containerY / (CELL_SIZE + GUTTER));
- const overColumn = Math.ceil(containerX / (CELL_SIZE + GUTTER));
-
- // const endTime = performance.now();
- // console.log(endTime - startTime);
-
- // if (overColumn < MIN_GRID_SIZE) {
- // setColumns(MIN_GRID_SIZE);
- // } else if (overColumn >= MIN_GRID_SIZE && overColumn < MAX_GRID_SIZE) {
- // setColumns(overColumn + 1);
- // }
-
- // if (overRow < MIN_GRID_SIZE) {
- // setRows(MIN_GRID_SIZE);
- // } else if (overRow >= MIN_GRID_SIZE && overRow < MAX_GRID_SIZE) {
- // setRows(overRow + 1);
- // }
-
- setActiveRows(overRow);
- setActiveColumns(overColumn);
- };
-
- return (
- <>
- <Wrapper
- className={className}
- onMouseMove={onMouseMove}
- columns={columns}
- rows={rows}
- >
- {range(rows).map(rowIndex =>
- range(columns).map(columnIndex => {
- return (
- <Cell
- active={rowIndex < activeRows && columnIndex < activeColumns}
- key={`${rowIndex}:${columnIndex}`}
- rowIndex={rowIndex}
- columnIndex={columnIndex}
- // onMouseEnter={() => updateActive(rowIndex, columnIndex)}
- top={`${rowIndex * CELL_SIZE + rowIndex * GUTTER}px`}
- left={`${columnIndex * 12 + columnIndex * GUTTER}px`}
- />
- );
- }),
- )}
- </Wrapper>
-
- <span>
- {activeColumns} x {activeRows}
- </span>
- </>
- );
-};
-
-Grid.propTypes = {};
-
-Grid.defaultProps = {};
-
-export default Grid;
diff --git a/wax-prosemirror-components/src/ui/tables/GridCell.js b/wax-prosemirror-components/src/ui/tables/GridCell.js
deleted file mode 100644
index 13cd1a3ff..000000000
--- a/wax-prosemirror-components/src/ui/tables/GridCell.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
- height: 12px;
- width: 12px;
- border: 1px solid gray;
- transition: background 0.1s ease-in;
-
- ${props => props.active && `background: skyblue;`}
-`;
-
-// const GridCell = props => {
-// const { active, className, onMouseEnter } = props;
-
-// return (
-// <Wrapper
-// active={active}
-// className={className}
-// onMouseEnter={onMouseEnter}
-// />
-// );
-// };
-
-class GridCell extends React.PureComponent {
- render() {
- const { active, className, onMouseEnter } = this.props;
-
- return (
- <Wrapper
- active={active}
- className={className}
- onMouseEnter={onMouseEnter}
- />
- );
- }
-}
-
-GridCell.propTypes = {};
-
-GridCell.defaultProps = {};
-
-export default GridCell;
diff --git a/wax-prosemirror-components/src/ui/tables/TableTool.js b/wax-prosemirror-components/src/ui/tables/InsertTableTool.js
similarity index 85%
rename from wax-prosemirror-components/src/ui/tables/TableTool.js
rename to wax-prosemirror-components/src/ui/tables/InsertTableTool.js
index 783ed3416..9dccfcb3c 100644
--- a/wax-prosemirror-components/src/ui/tables/TableTool.js
+++ b/wax-prosemirror-components/src/ui/tables/InsertTableTool.js
@@ -1,6 +1,11 @@
+/**
+ * Adapted from https://github.com/chanzuckerberg/czi-prosemirror/blob/master/src/ui/TableGridSizeEditor.js
+ */
+
/* eslint-disable react/prop-types */
/* eslint-disable react/jsx-handler-names */
/* eslint-disable react/destructuring-assignment */
+/* eslint-disable react/no-find-dom-node */
/* eslint-disable no-underscore-dangle */
/* eslint-disable no-plusplus */
/* eslint-disable prefer-template */
@@ -8,12 +13,8 @@
/* eslint-disable max-classes-per-file */
/* eslint-disable jsx-a11y/no-static-element-interactions */
-// import cx from 'classnames';
-import React, { useState } from 'react';
+import React from 'react';
import ReactDOM from 'react-dom';
-import styled from 'styled-components';
-
-// import clamp from './clamp';
const clamp = (min, val, max) => {
if (val < min) {
@@ -35,8 +36,7 @@ const isIntersected = (r1, r2, padding) => {
);
};
-const fromXY = (x, y, padding) => {
- padding = padding || 0;
+const fromXY = (x, y, padding = 0) => {
return {
x: x - padding,
y: y - padding,
@@ -70,23 +70,12 @@ const htmlElementToRect = el => {
};
};
-// import htmlElementToRect from './htmlElementToRect';
-// import { fromHTMlElement, fromXY, isIntersected } from './rects';
-
-// import './czi-table-grid-size-editor.css';
-
-// export type TableGridSizeEditorValue = {
-// cols: number,
-// rows: number,
-// };
-
const GUTTER_SIZE = 5;
const CELL_SIZE = 16;
const MAX_SIZE = 20;
class GridCell extends React.PureComponent {
render() {
- console.log('render!');
const { x, y, selected } = this.props;
const style = {
left: x + 'px',
@@ -100,9 +89,6 @@ class GridCell extends React.PureComponent {
};
if (selected) style.background = 'skyblue';
- // const className = cx('czi-table-grid-size-editor-cell', {
- // selected,
- // });
return <div style={style} />;
}
}
@@ -128,14 +114,14 @@ class TableGridSizeEditor extends React.PureComponent {
// close: (val: TableGridSizeEditorValue) => void,
// };
- // componentWillUnmount(): void {
- // if (this._entered) {
- // document.removeEventListener('mousemove', this._onMouseMove, true);
- // }
- // this._rafID && cancelAnimationFrame(this._rafID);
- // }
+ componentWillUnmount() {
+ if (this._entered) {
+ document.removeEventListener('mousemove', this._onMouseMove, true);
+ }
+ this._rafID && cancelAnimationFrame(this._rafID);
+ }
- _onRef = (ref: any): void => {
+ _onRef = ref => {
this._ref = ref;
};
@@ -251,14 +237,13 @@ class TableGridSizeEditor extends React.PureComponent {
return (
<div style={wrapperStyle} ref={this._onRef}>
<div
- // className="czi-table-grid-size-editor-body"
onMouseDown={this._onMouseDown}
onMouseEnter={this._onMouseEnter}
style={bodyStyle}
>
{cells}
</div>
- <div className="czi-table-grid-size-editor-footer">
+ <div>
{rows} X {cols}
</div>
</div>
--
GitLab