setShowSelect(true)}
+ >
+ {value.value && (
+
+ )}
+
+ {showSelect && (
+ setShowSelect(false)} />
+ )}
+ {showSelect &&
+ createPortal(
+
+
+ {options.map(option => (
+
handleOptionClick(option)}
+ >
+
+
+ ))}
+ {showAdd && (
+
+
+
+ )}
+
+
+
+
+ }
+ backgroundColor={grey(200)}
+ />
+
+
+
,
+ document.querySelector('#popper-portal')
+ )}
+
+ );
+ default:
+ return
;
+ }
+ }
+
+ useEffect(() => {
+ if (addSelectRef && showAdd) {
+ addSelectRef.focus();
+ }
+ }, [addSelectRef, showAdd]);
+
+ useEffect(() => {
+ setValue({ value: initialValue, update: false });
+ }, [initialValue]);
+
+ useEffect(() => {
+ if (value.update) {
+ dataDispatch({
+ type: ActionTypes.UPDATE_CELL,
+ columnId: id,
+ rowIndex: index,
+ value: value.value,
+ });
+ }
+ }, [value, dataDispatch, id, index]);
+
+ return getCellElement();
+}
diff --git a/src/lib/editableGrid/EditableGrid.tsx b/src/lib/editableGrid/EditableGrid.tsx
new file mode 100644
index 0000000..7c83693
--- /dev/null
+++ b/src/lib/editableGrid/EditableGrid.tsx
@@ -0,0 +1,213 @@
+import React, { useEffect, useReducer } from 'react';
+import './style.css';
+import Table from './Table';
+import {
+ randomColor,
+ shortId,
+ makeData,
+ ActionTypes,
+ DataTypes,
+} from './utils';
+import update from 'immutability-helper';
+
+function reducer(state, action) {
+ switch (action.type) {
+ case ActionTypes.ADD_OPTION_TO_COLUMN:
+ const optionIndex = state.columns.findIndex(
+ column => column.id === action.columnId
+ );
+ return update(state, {
+ skipReset: { $set: true },
+ columns: {
+ [optionIndex]: {
+ options: {
+ $push: [
+ {
+ label: action.option,
+ backgroundColor: action.backgroundColor,
+ },
+ ],
+ },
+ },
+ },
+ });
+ case ActionTypes.ADD_ROW:
+ return update(state, {
+ skipReset: { $set: true },
+ data: { $push: [{}] },
+ });
+ case ActionTypes.UPDATE_COLUMN_TYPE:
+ const typeIndex = state.columns.findIndex(
+ column => column.id === action.columnId
+ );
+ switch (action.dataType) {
+ case DataTypes.NUMBER:
+ if (state.columns[typeIndex].dataType === DataTypes.NUMBER) {
+ return state;
+ } else {
+ return update(state, {
+ skipReset: { $set: true },
+ columns: { [typeIndex]: { dataType: { $set: action.dataType } } },
+ data: {
+ $apply: data =>
+ data.map(row => ({
+ ...row,
+ [action.columnId]: isNaN(row[action.columnId])
+ ? ''
+ : Number.parseInt(row[action.columnId]),
+ })),
+ },
+ });
+ }
+ case DataTypes.SELECT:
+ if (state.columns[typeIndex].dataType === DataTypes.SELECT) {
+ return state;
+ } else {
+ let options = [];
+ state.data.forEach(row => {
+ if (row[action.columnId]) {
+ options.push({
+ label: row[action.columnId],
+ backgroundColor: randomColor(),
+ });
+ }
+ });
+ return update(state, {
+ skipReset: { $set: true },
+ columns: {
+ [typeIndex]: {
+ dataType: { $set: action.dataType },
+ options: { $push: options },
+ },
+ },
+ });
+ }
+ case DataTypes.TEXT:
+ if (state.columns[typeIndex].dataType === DataTypes.TEXT) {
+ return state;
+ } else if (state.columns[typeIndex].dataType === DataTypes.SELECT) {
+ return update(state, {
+ skipReset: { $set: true },
+ columns: { [typeIndex]: { dataType: { $set: action.dataType } } },
+ });
+ } else {
+ return update(state, {
+ skipReset: { $set: true },
+ columns: { [typeIndex]: { dataType: { $set: action.dataType } } },
+ data: {
+ $apply: data =>
+ data.map(row => ({
+ ...row,
+ [action.columnId]: row[action.columnId] + '',
+ })),
+ },
+ });
+ }
+ default:
+ return state;
+ }
+ case ActionTypes.UPDATE_COLUMN_HEADER:
+ const index = state.columns.findIndex(
+ column => column.id === action.columnId
+ );
+ return update(state, {
+ skipReset: { $set: true },
+ columns: { [index]: { label: { $set: action.label } } },
+ });
+ case ActionTypes.UPDATE_CELL:
+ return update(state, {
+ skipReset: { $set: true },
+ data: {
+ [action.rowIndex]: { [action.columnId]: { $set: action.value } },
+ },
+ });
+ case ActionTypes.ADD_COLUMN_TO_LEFT:
+ const leftIndex = state.columns.findIndex(
+ column => column.id === action.columnId
+ );
+ let leftId = shortId();
+ return update(state, {
+ skipReset: { $set: true },
+ columns: {
+ $splice: [
+ [
+ leftIndex,
+ 0,
+ {
+ id: leftId,
+ label: 'Column',
+ accessor: leftId,
+ dataType: DataTypes.TEXT,
+ created: action.focus && true,
+ options: [],
+ },
+ ],
+ ],
+ },
+ });
+ case ActionTypes.ADD_COLUMN_TO_RIGHT:
+ const rightIndex = state.columns.findIndex(
+ column => column.id === action.columnId
+ );
+ const rightId = shortId();
+ return update(state, {
+ skipReset: { $set: true },
+ columns: {
+ $splice: [
+ [
+ rightIndex + 1,
+ 0,
+ {
+ id: rightId,
+ label: 'Column',
+ accessor: rightId,
+ dataType: DataTypes.TEXT,
+ created: action.focus && true,
+ options: [],
+ },
+ ],
+ ],
+ },
+ });
+ case ActionTypes.DELETE_COLUMN:
+ const deleteIndex = state.columns.findIndex(
+ column => column.id === action.columnId
+ );
+ return update(state, {
+ skipReset: { $set: true },
+ columns: { $splice: [[deleteIndex, 1]] },
+ });
+ case ActionTypes.ENABLE_RESET:
+ return update(state, { skipReset: { $set: true } });
+ default:
+ return state;
+ }
+}
+
+function App() {
+ const [state, dispatch] = useReducer(reducer, makeData(1000));
+
+ useEffect(() => {
+ dispatch({ type: ActionTypes.ENABLE_RESET });
+ }, [state.data, state.columns]);
+
+ return (
+
+ );
+}
+
+export default App;
diff --git a/src/lib/editableGrid/Header.jsx b/src/lib/editableGrid/Header.jsx
new file mode 100644
index 0000000..6d36528
--- /dev/null
+++ b/src/lib/editableGrid/Header.jsx
@@ -0,0 +1,347 @@
+import React, { useState, useEffect } from 'react';
+import { usePopper } from 'react-popper';
+import { grey } from './colors';
+import ArrowUpIcon from './img/ArrowUp';
+import ArrowDownIcon from './img/ArrowDown';
+import ArrowLeftIcon from './img/ArrowLeft';
+import ArrowRightIcon from './img/ArrowRight';
+import TrashIcon from './img/Trash';
+import TextIcon from './img/Text';
+import MultiIcon from './img/Multi';
+import HashIcon from './img/Hash';
+import PlusIcon from './img/Plus';
+import { ActionTypes, DataTypes, shortId } from './utils';
+
+function getPropertyIcon(dataType) {
+ switch (dataType) {
+ case DataTypes.NUMBER:
+ return
;
+ case DataTypes.TEXT:
+ return
;
+ case DataTypes.SELECT:
+ return
;
+ default:
+ return null;
+ }
+}
+
+export default function Header({
+ column: { id, created, label, dataType, getResizerProps, getHeaderProps },
+ setSortBy,
+ dataDispatch,
+}) {
+ const [expanded, setExpanded] = useState(created || false);
+ const [referenceElement, setReferenceElement] = useState(null);
+ const [popperElement, setPopperElement] = useState(null);
+ const [inputRef, setInputRef] = useState(null);
+ const { styles, attributes } = usePopper(referenceElement, popperElement, {
+ placement: 'bottom',
+ strategy: 'absolute',
+ });
+ const [header, setHeader] = useState(label);
+ const [typeReferenceElement, setTypeReferenceElement] = useState(null);
+ const [typePopperElement, setTypePopperElement] = useState(null);
+ const typePopper = usePopper(typeReferenceElement, typePopperElement, {
+ placement: 'right',
+ strategy: 'fixed',
+ });
+ const [showType, setShowType] = useState(false);
+ const buttons = [
+ {
+ onClick: e => {
+ dataDispatch({
+ type: ActionTypes.UPDATE_COLUMN_HEADER,
+ columnId: id,
+ label: header,
+ });
+ setSortBy([{ id: id, desc: false }]);
+ setExpanded(false);
+ },
+ icon:
,
+ label: 'Sort ascending',
+ },
+ {
+ onClick: e => {
+ dataDispatch({
+ type: ActionTypes.UPDATE_COLUMN_HEADER,
+ columnId: id,
+ label: header,
+ });
+ setSortBy([{ id: id, desc: true }]);
+ setExpanded(false);
+ },
+ icon:
,
+ label: 'Sort descending',
+ },
+ {
+ onClick: e => {
+ dataDispatch({
+ type: ActionTypes.UPDATE_COLUMN_HEADER,
+ columnId: id,
+ label: header,
+ });
+ dataDispatch({
+ type: ActionTypes.ADD_COLUMN_TO_LEFT,
+ columnId: id,
+ focus: false,
+ });
+ setExpanded(false);
+ },
+ icon:
,
+ label: 'Insert left',
+ },
+ {
+ onClick: e => {
+ dataDispatch({
+ type: ActionTypes.UPDATE_COLUMN_HEADER,
+ columnId: id,
+ label: header,
+ });
+ dataDispatch({
+ type: ActionTypes.ADD_COLUMN_TO_RIGHT,
+ columnId: id,
+ focus: false,
+ });
+ setExpanded(false);
+ },
+ icon:
,
+ label: 'Insert right',
+ },
+ {
+ onClick: e => {
+ dataDispatch({
+ type: ActionTypes.UPDATE_COLUMN_HEADER,
+ columnId: id,
+ label: header,
+ });
+ dataDispatch({ type: ActionTypes.DELETE_COLUMN, columnId: id });
+ setExpanded(false);
+ },
+ icon:
,
+ label: 'Delete',
+ },
+ ];
+ const propertyIcon = getPropertyIcon(dataType);
+
+ const types = [
+ {
+ onClick: e => {
+ dataDispatch({
+ type: 'update_column_type',
+ columnId: id,
+ dataType: DataTypes.SELECT,
+ });
+ setShowType(false);
+ setExpanded(false);
+ },
+ icon:
,
+ label: 'Select',
+ },
+ {
+ onClick: e => {
+ dataDispatch({
+ type: 'update_column_type',
+ columnId: id,
+ dataType: DataTypes.TEXT,
+ });
+ setShowType(false);
+ setExpanded(false);
+ },
+ icon:
,
+ label: 'Text',
+ },
+ {
+ onClick: e => {
+ dataDispatch({
+ type: 'update_column_type',
+ columnId: id,
+ dataType: DataTypes.NUMBER,
+ });
+ setShowType(false);
+ setExpanded(false);
+ },
+ icon:
,
+ label: 'Number',
+ },
+ ];
+
+ function handleKeyDown(e) {
+ if (e.key === 'Enter') {
+ dataDispatch({
+ type: 'update_column_header',
+ columnId: id,
+ label: header,
+ });
+ setExpanded(false);
+ }
+ }
+
+ function handleChange(e) {
+ setHeader(e.target.value);
+ }
+
+ function handleBlur(e) {
+ e.preventDefault();
+ dataDispatch({ type: 'update_column_header', columnId: id, label: header });
+ }
+
+ function getHeader() {
+ if (id !== 999999) {
+ return (
+ <>
+
+
setExpanded(true)}
+ ref={setReferenceElement}
+ >
+
+ {propertyIcon}
+
+ {label}
+
+
+
+ {expanded && (
+
setExpanded(false)} />
+ )}
+ {expanded && (
+
+
+
+
+
+
+
+ Property Type
+
+
+
+
+ {showType && (
+
setShowType(true)}
+ onMouseLeave={() => setShowType(false)}
+ {...typePopper.attributes.popper}
+ style={{
+ ...typePopper.styles.popper,
+ width: 200,
+ backgroundColor: 'white',
+ zIndex: 4,
+ }}
+ >
+ {types.map(type => (
+
+ ))}
+
+ )}
+
+
+ {buttons.map(button => (
+
+ ))}
+
+
+
+ )}
+
+ );
+ }
+ return (
+
+
+ dataDispatch({
+ type: 'add_column_to_left',
+ columnId: 999999,
+ focus: true,
+ })
+ }
+ >
+
+
+
+
+
+ );
+ }
+
+ useEffect(() => {
+ if (created) {
+ setExpanded(true);
+ }
+ }, [created]);
+
+ useEffect(() => {
+ setHeader(label);
+ }, [label]);
+
+ useEffect(() => {
+ if (inputRef) {
+ inputRef.focus();
+ inputRef.select();
+ }
+ }, [inputRef]);
+
+ return getHeader();
+}
diff --git a/src/lib/editableGrid/Table.jsx b/src/lib/editableGrid/Table.jsx
new file mode 100644
index 0000000..d43bc56
--- /dev/null
+++ b/src/lib/editableGrid/Table.jsx
@@ -0,0 +1,141 @@
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import {
+ useTable,
+ useBlockLayout,
+ useResizeColumns,
+ useSortBy,
+} from 'react-table';
+import Cell from './Cell';
+import Header from './Header';
+import PlusIcon from './img/Plus';
+import { ActionTypes } from './utils';
+import { FixedSizeList } from 'react-window';
+import scrollbarWidth from './scrollbarWidth';
+
+const defaultColumn = {
+ minWidth: 50,
+ width: 150,
+ maxWidth: 400,
+ Cell: Cell,
+ Header: Header,
+ sortType: 'alphanumericFalsyLast',
+};
+
+export default function Table({
+ columns,
+ data,
+ dispatch: dataDispatch,
+ skipReset,
+}) {
+ const sortTypes = useMemo(
+ () => ({
+ alphanumericFalsyLast(rowA, rowB, columnId, desc) {
+ if (!rowA.values[columnId] && !rowB.values[columnId]) {
+ return 0;
+ }
+
+ if (!rowA.values[columnId]) {
+ return desc ? -1 : 1;
+ }
+
+ if (!rowB.values[columnId]) {
+ return desc ? 1 : -1;
+ }
+
+ return isNaN(rowA.values[columnId])
+ ? rowA.values[columnId].localeCompare(rowB.values[columnId])
+ : rowA.values[columnId] - rowB.values[columnId];
+ },
+ }),
+ []
+ );
+
+ const {
+ getTableProps,
+ getTableBodyProps,
+ headerGroups,
+ rows,
+ prepareRow,
+ totalColumnsWidth,
+ } = useTable(
+ {
+ columns,
+ data,
+ defaultColumn,
+ dataDispatch,
+ autoResetSortBy: !skipReset,
+ autoResetFilters: !skipReset,
+ autoResetRowState: !skipReset,
+ sortTypes,
+ },
+ useBlockLayout,
+ useResizeColumns,
+ useSortBy
+ );
+
+ const RenderRow = React.useCallback(
+ ({ index, style }) => {
+ const row = rows[index];
+ prepareRow(row);
+ return (
+
+ {row.cells.map(cell => (
+
+ {cell.render('Cell')}
+
+ ))}
+
+ );
+ },
+ [prepareRow, rows]
+ );
+
+ function isTableResizing() {
+ for (let headerGroup of headerGroups) {
+ for (let column of headerGroup.headers) {
+ if (column.isResizing) {
+ return true;
+ }
+ }
+ }
+
+ return false;
+ }
+
+ return (
+ <>
+
+
+ {headerGroups.map(headerGroup => (
+
+ {headerGroup.headers.map(column => column.render('Header'))}
+
+ ))}
+
+
+
+ {RenderRow}
+
+
dataDispatch({ type: ActionTypes.ADD_ROW })}
+ >
+
+
+
+ New
+
+
+
+
+ );
+}
diff --git a/src/lib/editableGrid/colors.js b/src/lib/editableGrid/colors.js
new file mode 100644
index 0000000..b7d2006
--- /dev/null
+++ b/src/lib/editableGrid/colors.js
@@ -0,0 +1,16 @@
+export function grey(value) {
+ let reference = {
+ 50: '#fafafa',
+ 100: '#f5f5f5',
+ 200: '#eeeeee',
+ 300: '#e0e0e0',
+ 400: '#bdbdbd',
+ 500: '#9e9e9e',
+ 600: '#757575',
+ 700: '#616161',
+ 800: '#424242',
+ 900: '#212121',
+ };
+
+ return reference[value];
+}
diff --git a/src/lib/editableGrid/scrollbarWidth.js b/src/lib/editableGrid/scrollbarWidth.js
new file mode 100644
index 0000000..6d43662
--- /dev/null
+++ b/src/lib/editableGrid/scrollbarWidth.js
@@ -0,0 +1,13 @@
+const scrollbarWidth = () => {
+ const scrollDiv = document.createElement('div');
+ scrollDiv.setAttribute(
+ 'style',
+ 'width: 100px; height: 100px; overflow: scroll; position:absolute; top:-9999px;'
+ );
+ document.body.appendChild(scrollDiv);
+ const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+ document.body.removeChild(scrollDiv);
+ return scrollbarWidth;
+};
+
+export default scrollbarWidth;
diff --git a/src/lib/editableGrid/utils.js b/src/lib/editableGrid/utils.js
new file mode 100644
index 0000000..c7f6c5f
--- /dev/null
+++ b/src/lib/editableGrid/utils.js
@@ -0,0 +1,96 @@
+import faker from 'faker';
+
+export function shortId() {
+ return '_' + Math.random().toString(36).substr(2, 9);
+}
+
+export function randomColor() {
+ return `hsl(${Math.floor(Math.random() * 360)}, 95%, 90%)`;
+}
+
+export function makeData(count) {
+ let data = [];
+ let options = [];
+ for (let i = 0; i < count; i++) {
+ let row = {
+ ID: faker.mersenne.rand(),
+ firstName: faker.name.firstName(),
+ lastName: faker.name.lastName(),
+ email: faker.internet.email(),
+ age: Math.floor(20 + Math.random() * 20),
+ music: faker.music.genre(),
+ };
+ options.push({ label: row.music, backgroundColor: randomColor() });
+
+ data.push(row);
+ }
+
+ let columns = [
+ {
+ id: 'firstName',
+ label: 'First Name',
+ accessor: 'firstName',
+ minWidth: 100,
+ dataType: DataTypes.TEXT,
+ options: [],
+ },
+ {
+ id: 'lastName',
+ label: 'Last Name',
+ accessor: 'lastName',
+ minWidth: 100,
+ dataType: DataTypes.TEXT,
+ options: [],
+ },
+ {
+ id: 'age',
+ label: 'Age',
+ accessor: 'age',
+ width: 80,
+ dataType: DataTypes.NUMBER,
+ options: [],
+ },
+ {
+ id: 'email',
+ label: 'E-Mail',
+ accessor: 'email',
+ width: 300,
+ dataType: DataTypes.TEXT,
+ options: [],
+ },
+ {
+ id: 'music',
+ label: 'Music Preference',
+ accessor: 'music',
+ dataType: DataTypes.SELECT,
+ width: 200,
+ options: options,
+ },
+ {
+ id: 999999,
+ width: 20,
+ label: '+',
+ disableResizing: true,
+ dataType: 'null',
+ },
+ ];
+ return { columns: columns, data: data, skipReset: false };
+}
+
+export const ActionTypes = Object.freeze({
+ ADD_OPTION_TO_COLUMN: 'add_option_to_column',
+ ADD_ROW: 'add_row',
+ UPDATE_COLUMN_TYPE: 'update_column_type',
+ UPDATE_COLUMN_HEADER: 'update_column_header',
+ UPDATE_CELL: 'update_cell',
+ ADD_COLUMN_TO_LEFT: 'add_column_to_left',
+ ADD_COLUMN_TO_RIGHT: 'add_column_to_right',
+ DELETE_COLUMN: 'delete_column',
+ ENABLE_RESET: 'enable_reset',
+});
+
+export const DataTypes = Object.freeze({
+ NUMBER: 'number',
+ TEXT: 'text',
+ SELECT: 'select',
+});
diff --git a/src/plugins/grid/Grid.tsx b/src/plugins/grid/Grid.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/tsconfig.json b/tsconfig.json
index a273b0c..a0b3159 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,26 +1,31 @@
{
+ "compileOnSave": false,
"compilerOptions": {
- "target": "es5",
- "lib": [
- "dom",
- "dom.iterable",
- "esnext"
- ],
- "allowJs": true,
- "skipLibCheck": true,
- "esModuleInterop": true,
- "allowSyntheticDefaultImports": true,
- "strict": true,
+ "allowSyntheticDefaultImports": true,
+ "baseUrl": "./",
+ "outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
+ "strict": false,
+ "noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
- "module": "esnext",
+ "sourceMap": true,
+ "declaration": false,
+ "downlevelIteration": true,
+ "experimentalDecorators": true,
"moduleResolution": "node",
- "resolveJsonModule": true,
- "isolatedModules": true,
- "noEmit": true,
- "jsx": "react-jsx"
+ "importHelpers": true,
+ "target": "es2020",
+ "module": "es2020",
+ "lib": [
+ "es2018",
+ "dom"
+ ],
+ "skipLibCheck": true
},
- "include": [
- "src"
- ]
+ "angularCompilerOptions": {
+ "enableI18nLegacyMessageIdFormat": false,
+ "strictInjectionParameters": false,
+ "strictInputAccessModifiers": false,
+ "strictTemplates": false
+ }
}