From e928ae141d936d2711b8dcca8b99d9a947163e59 Mon Sep 17 00:00:00 2001 From: Felix Henninger Date: Sat, 15 Aug 2020 10:13:01 +0200 Subject: [PATCH] Remove dependency on react-redux-form MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This completes the port to Formik (🤞). I'm really sorry to see RRF go, and had a couple of nostalgic moments refactoring the code over the past weeks, thinking back to the memorable Christmas break when I wrote the first cut of our app -- I'm amazed at what the library let a clueless novice like me do, and sincerely thankful for the work @davidkpiano and team put into it. I'm grateful, too, for their patient help and generous support over the years; this humble application just wouldn't exist without them, and I wouldn't know close to what little I do. Many, many heartfelt thanks! ❤️ --- packages/builder/package.json | 1 - .../ComponentOptions/components/RRFForm.js | 29 -- .../src/components/RRFGrid/components/body.js | 80 ----- .../RRFGrid/components/buttonCell.js | 18 -- .../components/RRFGrid/components/colgroup.js | 22 -- .../components/RRFGrid/components/footer.js | 32 -- .../components/RRFGrid/components/header.js | 45 --- .../builder/src/components/RRFGrid/index.css | 65 ---- .../builder/src/components/RRFGrid/index.js | 277 ------------------ yarn.lock | 39 +-- 10 files changed, 3 insertions(+), 605 deletions(-) delete mode 100644 packages/builder/src/components/ComponentOptions/components/RRFForm.js delete mode 100644 packages/builder/src/components/RRFGrid/components/body.js delete mode 100644 packages/builder/src/components/RRFGrid/components/buttonCell.js delete mode 100644 packages/builder/src/components/RRFGrid/components/colgroup.js delete mode 100644 packages/builder/src/components/RRFGrid/components/footer.js delete mode 100644 packages/builder/src/components/RRFGrid/components/header.js delete mode 100644 packages/builder/src/components/RRFGrid/index.css delete mode 100644 packages/builder/src/components/RRFGrid/index.js diff --git a/packages/builder/package.json b/packages/builder/package.json index e39464d6f..f4b106b24 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -42,7 +42,6 @@ "react-modal": "^3.11.1", "react-monaco-editor": "^0.35.0", "react-redux": "^7.1.3", - "react-redux-form": "^1.16.14", "react-scripts": "3.4.1", "react-transition-group": "^4.3.0", "reactstrap": "^8.4.1", diff --git a/packages/builder/src/components/ComponentOptions/components/RRFForm.js b/packages/builder/src/components/ComponentOptions/components/RRFForm.js deleted file mode 100644 index 6c389a576..000000000 --- a/packages/builder/src/components/ComponentOptions/components/RRFForm.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react' -import { connect } from 'react-redux' - -import { LocalForm } from 'react-redux-form' -import { pick } from 'lodash' - -import { updateComponent } from '../../../actions/components' - -const Form = ({ - id, data, keys, validators, - updateComponent, getDispatch, postProcess=d => d, - children, className, style -}) => - updateComponent(id, postProcess(newData)) } - getDispatch={ getDispatch } - className={ className } - style={ style } - validators={ validators } - > - { children } - - -const mapDispatchToProps = { - updateComponent -} - -export default connect(null, mapDispatchToProps)(Form) diff --git a/packages/builder/src/components/RRFGrid/components/body.js b/packages/builder/src/components/RRFGrid/components/body.js deleted file mode 100644 index 5b5534a9a..000000000 --- a/packages/builder/src/components/RRFGrid/components/body.js +++ /dev/null @@ -1,80 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' - -const Cell = ( - { cellData, cellProps, rowIndex, colIndex, colData, BodyContent } -) => - - - - -const Row = ( - { data, rowData, rowIndex, - BodyContent, LeftColumn, RightColumn, - columns, cellProps, - isFirstRow, isLastRow }, - { uniqueId } -) => - - - { - rowData.length > 0 - ? rowData.map((cellData, colIndex) => - - ) - : - } - - - -Row.contextTypes = { - uniqueId: PropTypes.string, -} - -const Body = (props, { uniqueId }) => - - { - props.data.map((rowData, rowIndex) => - - ) - } - - -Body.contextTypes = { - uniqueId: PropTypes.string, -} - -export default Body diff --git a/packages/builder/src/components/RRFGrid/components/buttonCell.js b/packages/builder/src/components/RRFGrid/components/buttonCell.js deleted file mode 100644 index 06e890fb4..000000000 --- a/packages/builder/src/components/RRFGrid/components/buttonCell.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react' -import { Button } from 'reactstrap' - -import Icon from '../../Icon' - -export default ({ icon, onClick, style, disabled=false, type }) => { - const Wrapper = type || 'td' - return - - -} diff --git a/packages/builder/src/components/RRFGrid/components/colgroup.js b/packages/builder/src/components/RRFGrid/components/colgroup.js deleted file mode 100644 index 4d8baa7b4..000000000 --- a/packages/builder/src/components/RRFGrid/components/colgroup.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' - -const ColGroup = ({ columnWidths }, { uniqueId }) => - - - { - columnWidths.map( - (pct, i) => - ) - } - - - -ColGroup.contextTypes = { - uniqueId: PropTypes.string, -} - -export default ColGroup diff --git a/packages/builder/src/components/RRFGrid/components/footer.js b/packages/builder/src/components/RRFGrid/components/footer.js deleted file mode 100644 index a90102177..000000000 --- a/packages/builder/src/components/RRFGrid/components/footer.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import { Button } from 'reactstrap' - -import Icon from '../../Icon' - -const Footer = ({ columns }, { gridDispatch }) => - - - - - - - - - - -Footer.contextTypes = { - gridDispatch: PropTypes.func, -} - -export default Footer diff --git a/packages/builder/src/components/RRFGrid/components/header.js b/packages/builder/src/components/RRFGrid/components/header.js deleted file mode 100644 index b8ec4a541..000000000 --- a/packages/builder/src/components/RRFGrid/components/header.js +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' - -import ButtonCell from './buttonCell' - -const Header = ( - { columns, addColumns, maxColumns, HeaderContent }, - { uniqueId, gridDispatch } -) => - - - - { - columns.length > 0 - ? columns.map( - (columnData, index) => - - - - ) - : - } - { - !(addColumns && columns.length < maxColumns) - ? - : gridDispatch('addColumn') } - /> - } - - - -Header.contextTypes = { - gridDispatch: PropTypes.func, - uniqueId: PropTypes.string, -} - -export default Header diff --git a/packages/builder/src/components/RRFGrid/index.css b/packages/builder/src/components/RRFGrid/index.css deleted file mode 100644 index ce00ea0ab..000000000 --- a/packages/builder/src/components/RRFGrid/index.css +++ /dev/null @@ -1,65 +0,0 @@ -/* Add spacing above if placed - directly underneath a card header - (the intermediate div is from a Fieldset) */ -div.card div.card-header + div > table.grid { - margin-top: 0.25rem; -} - -/* Remove table's upper border if placed - directly underneath a card header */ -div.card div.card-header + div > table.grid thead th, -div.card table.grid.no-header tbody tr:first-child td { - border-top: none; -} - -/* Remove lower border if last element in - a card */ -div.card > div:last-child table.grid { - border-bottom: none; - margin-bottom: 0; -} - -/* Add border to table bottom */ -div.card table.grid { - border-bottom: 2px solid #eceeef; -} - -/* Hide header if requested */ -div.card table.grid.no-header thead { - display: none; -} - -/* Buttons */ -/* TODO: There are some weird things going on with - transition states -- buttons may assume a gray - background while transitioning from active to - normal state, which is (minimally) annoying. - If these issues are solved, the styles might - be moved into the global stylesheet. - (then again, the toolbar buttons look different) */ -table.grid button.btn:active, table.grid button.btn:focus { - background-color: white; -} -/* Icon placement */ -table.grid button.btn i { - position: relative; - top: 1px; -} - -/* Footer */ -table.grid tfoot td { - font-size: 0.8rem; - text-align: center; -} -table.grid tfoot td { - padding-top: 0.2rem; - padding-bottom: 0.2rem; -} - -table.grid tfoot td button.hover-target { - transition: margin-top 0.15s, margin-bottom 0.15s; -} -table.grid tfoot:hover td button.hover-target { - margin-top: 0.75rem; - margin-bottom: 0.75rem; -} diff --git a/packages/builder/src/components/RRFGrid/index.js b/packages/builder/src/components/RRFGrid/index.js deleted file mode 100644 index 76056173a..000000000 --- a/packages/builder/src/components/RRFGrid/index.js +++ /dev/null @@ -1,277 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import { Fieldset, actions } from 'react-redux-form' - -import { uniqueId, fill } from 'lodash' -import classnames from 'classnames' - -import ButtonCell from './components/buttonCell' -import ColGroup from './components/colgroup' -import Header from './components/header' -import Body from './components/body' -import DefaultFooter from './components/footer' - -import './index.css' - -const defaultLeftColumn = (_, { readOnly }) => - null } - disabled={ readOnly } - /> - -defaultLeftColumn.contextTypes = { - readOnly: PropTypes.bool, -} - -const defaultRightColumn = ({ rowIndex }, { readOnly, gridDispatch }) => - gridDispatch('deleteRow', rowIndex) } - disabled={ readOnly } - /> - -defaultRightColumn.contextTypes = { - gridDispatch: PropTypes.func, - readOnly: PropTypes.bool, -} - -class Grid extends Component { - constructor(props) { - super(props) - this.uniqueId = uniqueId('grid_') - this.dispatch = this.dispatch.bind(this) - } - - getChildContext() { - return { - gridDispatch: this.dispatch, - formDispatch: this.props.formDispatch, - readOnly: this.props.readOnly, - uniqueId: this.uniqueId, - } - } - - dispatch(action, payload) { - switch(action) { - case 'change': - return this.handleChange(payload.model, payload.value) - case 'addColumn': - return this.handleColumnAdd() - case 'deleteColumn': - return this.handleColumnDelete(payload) - case 'fillColumn': - return this.handleColumnFill(payload) - case 'clearColumn': - return this.handleColumnClear(payload) - case 'addRow': - case 'addRows': - return this.handleRowAdd(payload) - case 'deleteRow': - return this.handleRowDelete(payload) - case 'moveRow': - return this.handleRowMove(payload.from, payload.to) - case 'overwrite': - return this.handleOverwrite(payload) - case 'reload': - return this.handleReload() - default: - return - } - } - - handleChange(model, value) { - this.props.formDispatch( - actions.change(model, value) - ) - } - - handleColumnAdd() { - this.handleChange( - `local${ this.props.model }`, - { - columns: [...this.props.columns, this.props.defaultColumn], - rows: this.props.data.map(row => [...row, '']), - } - ) - } - - handleColumnDelete(index) { - this.handleChange( - `local${ this.props.model }`, - { - columns: this.props.columns.filter( (_, i) => i !== index ), - rows: this.props.data.map( - r => r.filter( (_, i) => i !== index) - ) - } - ) - } - - handleColumnFill(colIndex) { - // Gather cells with content - const availableCells = this.props.data - .map(r => r[colIndex]) - .filter(r => r !== '') - - if (availableCells.length > 0) { - // Impute remaining cells based on available data - this.handleChange( - `local${ this.props.model }`, - { - columns: this.props.columns, - rows: this.props.data.map( - (r, rowIndex) => { - const output = [...r] - output[colIndex] = output[colIndex] || - availableCells[rowIndex % availableCells.length] - return output - } - ) - } - ) - } - } - - handleColumnClear(colIndex) { - this.handleChange( - `local${ this.props.model }`, - { - columns: this.props.columns, - rows: this.props.data.map( - (r) => { - const output = [...r] - output[colIndex] = '' - return output - } - ) - } - ) - } - - handleRowAdd(newRows) { - const addition = newRows || ( - this.props.defaultRow - ? [this.props.defaultRow] - : [fill( // As a fallback, add an array of empty strings - Array( - this.props.data[0] - ? this.props.data[0].length - : this.props.columns.length - ), - '' - )] - ) - - this.handleChange( - `local${ this.props.model }.rows`, - [ - ...this.props.data, - ...addition, - ] - ) - } - - handleRowDelete(index) { - this.handleChange( - `local${ this.props.model }.rows`, - this.props.data.filter((_, i) => i !== index) - ) - } - - handleRowMove(from, to) { - this.props.formDispatch( - actions.move( - `local${ this.props.model }.rows`, - from, to - ) - ) - } - - handleOverwrite({ columns, rows }) { - this.handleChange( - `local${ this.props.model }`, - { columns, rows } - ) - } - - handleReload() { - // Note that this reloads the grid content (rows) only - this.props.formDispatch( - actions.load( - `local${ this.props.model }.rows`, - this.props.data, - ) - ) - } - - render() { - const { columns, Footer } = this.props - - const columnWidths = this.props.columnWidths || - columns.length > 0 - ? columns.map(() => 90 / columns.length) - : [90] - - return ( -
- 5, - 'no-header': this.props.showHeader === false - }, this.props.className) } - > - -
- - { - this.props.readOnly - ? null - :
- } -
-
- ) - } -} - -Grid.childContextTypes = { - gridDispatch: PropTypes.func, - formDispatch: PropTypes.func, - readOnly: PropTypes.bool, - uniqueId: PropTypes.string, -} - -Grid.defaultProps = { - data: [], - addColumns: false, - maxColumns: Infinity, - defaultColumn: '', - cellProps: {}, - LeftColumn: defaultLeftColumn, - RightColumn: defaultRightColumn, - HeaderContent: content => content, - BodyContent: content => content, - Footer: DefaultFooter, -} - -export default Grid diff --git a/yarn.lock b/yarn.lock index 5d2d02164..eee917aea 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9045,11 +9045,6 @@ humanize-ms@^1.2.1: dependencies: ms "^2.0.0" -icepick@^1.1.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/icepick/-/icepick-1.3.0.tgz#e4942842ed8f9ee778d7dd78f7e36627f49fdaef" - integrity sha1-5JQoQu2Pnud419149+NmJ/Sf2u8= - iconv-lite@0.4.23: version "0.4.23" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63" @@ -9346,7 +9341,7 @@ interpret@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614" -invariant@^2.1.0, invariant@^2.2.0, invariant@^2.2.2, invariant@^2.2.4, invariant@~2.2.1: +invariant@^2.1.0, invariant@^2.2.0, invariant@^2.2.2, invariant@^2.2.4: version "2.2.4" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" dependencies: @@ -11044,7 +11039,7 @@ lodash.debounce@^4.0.8: resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168= -lodash.get@^4.4.2, lodash.get@~4.4.2: +lodash.get@^4.4.2: version "4.4.2" resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99" @@ -11079,11 +11074,6 @@ lodash.templatesettings@^4.0.0: dependencies: lodash._reinterpolate "^3.0.0" -lodash.topath@~4.5.2: - version "4.5.2" - resolved "https://registry.yarnpkg.com/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009" - integrity sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak= - lodash.uniq@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" @@ -13891,7 +13881,7 @@ promzard@^0.3.0: dependencies: read "1" -prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -14235,11 +14225,6 @@ react-monaco-editor@^0.35.0: monaco-editor "*" prop-types "^15.7.2" -react-native-segmented-control-tab@^3.2.1: - version "3.4.1" - resolved "https://registry.yarnpkg.com/react-native-segmented-control-tab/-/react-native-segmented-control-tab-3.4.1.tgz#b6e54b8975ce8092315c9b0a1ab58b834d8ccf8e" - integrity sha512-BNPdlE9Unr0Xabewn8W+FhBMLjssXy9Ey7S7AY0hXlrKrEKFdC9z0yT+eEWd5dLam4T6T4IuGL8b7ZF4uGyWNw== - react-popper@^1.3.6: version "1.3.7" resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324" @@ -14263,19 +14248,6 @@ react-reconciler@^0.20.4: prop-types "^15.6.2" scheduler "^0.13.6" -react-redux-form@^1.16.14: - version "1.16.14" - resolved "https://registry.yarnpkg.com/react-redux-form/-/react-redux-form-1.16.14.tgz#0c3b14a2a5144d1acc38a3645d8a89661a3b37dd" - integrity sha512-exd8FoWwJRQynjnYqCLmcbwcqgRPyU+qiKmTA7/T8qlNgyqgmbAgkYNe9NG9FYb5oLgHAtx5vDhVEpje888lIA== - dependencies: - icepick "^1.1.0" - invariant "~2.2.1" - lodash.get "~4.4.2" - lodash.topath "~4.5.2" - prop-types "^15.5.6" - react-native-segmented-control-tab "^3.2.1" - shallow-compare "^1.2.1" - react-redux@^7.1.3: version "7.1.3" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.1.3.tgz#717a3d7bbe3a1b2d535c94885ce04cdc5a33fc79" @@ -15420,11 +15392,6 @@ shallow-clone@^3.0.0: dependencies: kind-of "^6.0.2" -shallow-compare@^1.2.1: - version "1.2.2" - resolved "https://registry.yarnpkg.com/shallow-compare/-/shallow-compare-1.2.2.tgz#fa4794627bf455a47c4f56881d8a6132d581ffdb" - integrity sha512-LUMFi+RppPlrHzbqmFnINTrazo0lPNwhcgzuAXVVcfy/mqPDrQmHAyz5bvV0gDAuRFrk804V0HpQ6u9sZ0tBeg== - shallowequal@^1.0.2: version "1.1.0" resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"