Merge pull request #3510 from marmelab/ra-tree-v3

[RFR] Temporary migration of ra-tree to v3
marmelab · Aug 13, 2019 · 398fb0b · 398fb0b
2 parents ac43cad + db3a941
commit 398fb0b
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 42 deletions.
diff --git a/examples/simple/package.json b/examples/simple/package.json
@@ -41,6 +41,8 @@
         "ra-input-rich-text": "^3.0.0-alpha.0",
         "ra-language-english": "^3.0.0-alpha.0",
         "ra-language-french": "^3.0.0-alpha.0",
+        "ra-tree-core": "^3.0.0-alpha.0",
+        "ra-tree-ui-materialui": "^3.0.0-alpha.0",
         "react": "~16.8.0",
         "react-admin": "^3.0.0-alpha.0",
         "react-dom": "~16.8.0"

diff --git a/examples/simple/src/index.js b/examples/simple/src/index.js
@@ -3,6 +3,7 @@ import React from 'react';
 import { Admin, Resource } from 'react-admin'; // eslint-disable-line import/no-unresolved
 import { render } from 'react-dom';
 import { Route } from 'react-router';
+import { reducer as tree } from 'ra-tree-ui-materialui';
 
 import authProvider from './authProvider';
 import comments from './comments';
@@ -12,6 +13,7 @@ import dataProvider from './dataProvider';
 import i18nProvider from './i18nProvider';
 import posts from './posts';
 import users from './users';
+import tags from './tags';
 
 render(
     <Admin
@@ -20,6 +22,7 @@ render(
         i18nProvider={i18nProvider}
         title="Example Admin"
         locale="en"
+        customReducers={{ tree }}
         customRoutes={[
             <Route
                 exact
@@ -38,7 +41,7 @@ render(
             <Resource name="posts" {...posts} />,
             <Resource name="comments" {...comments} />,
             permissions ? <Resource name="users" {...users} /> : null,
-            <Resource name="tags" />,
+            <Resource name="tags" {...tags} />,
         ]}
     </Admin>,
     document.getElementById('root')

diff --git a/examples/simple/src/tags/TagList.js b/examples/simple/src/tags/TagList.js
@@ -3,14 +3,13 @@ import {
     DeleteButton,
     EditButton,
     List,
-    SaveButton,
     ShowButton,
-    TextInput,
+    TextField,
 } from 'react-admin';
 import {
     DragPreview,
     IgnoreFormProps,
-    NodeForm,
+    NodeView,
     Tree,
     NodeActions,
 } from 'ra-tree-ui-materialui';
@@ -21,7 +20,6 @@ const TagDragPreview = props => (
 
 const CustomNodeActions = props => (
     <NodeActions {...props}>
-        <SaveButton variant="text" />
         <IgnoreFormProps>
             <EditButton />
             <ShowButton />
@@ -38,9 +36,9 @@ const TagList = props => (
             parentSource="parent_id"
             dragPreviewComponent={TagDragPreview}
         >
-            <NodeForm actions={<CustomNodeActions />}>
-                <TextInput source="name" />
-            </NodeForm>
+            <NodeView actions={<CustomNodeActions />}>
+                <TextField source="name" />
+            </NodeView>
         </Tree>
     </List>
 );

diff --git a/examples/simple/webpack.config.js b/examples/simple/webpack.config.js
@@ -81,6 +81,22 @@ module.exports = {
                 'ra-input-rich-text',
                 'src'
             ),
+            'ra-tree-core': path.join(
+                __dirname,
+                '..',
+                '..',
+                'packages',
+                'ra-tree-core',
+                'src'
+            ),
+            'ra-tree-ui-materialui': path.join(
+                __dirname,
+                '..',
+                '..',
+                'packages',
+                'ra-tree-ui-materialui',
+                'src'
+            ),
         },
     },
     devServer: {

diff --git a/packages/ra-tree-ui-materialui/package.json b/packages/ra-tree-ui-materialui/package.json
@@ -43,11 +43,13 @@
         "react-dom": "^16.8.0"
     },
     "dependencies": {
+        "final-form": "^4.18.4",
         "lodash": "^4.17.10",
         "prop-types": "^15.6.1",
         "ra-tree-core": "^3.0.0-alpha.0",
         "react-dnd": "^5.0.0",
-        "react-dnd-touch-backend": "^0.5.1"
+        "react-dnd-touch-backend": "^0.5.1",
+        "react-final-form": "^6.3.0"
     },
     "devDependencies": {
         "cross-env": "^5.2.0",

diff --git a/packages/ra-tree-ui-materialui/src/NodeForm.js b/packages/ra-tree-ui-materialui/src/NodeForm.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import compose from 'recompose/compose';
 import { withStyles } from '@material-ui/core/styles';
-import { reduxForm } from 'redux-form';
+import { Form } from 'react-final-form';
 import {
     crudUpdate as crudUpdateAction,
     startUndoable as startUndoableAction,
@@ -162,40 +162,46 @@ class NodeForm extends Component {
         } = this.props;
 
         return (
-            <form
-                className={classes.root}
-                onClick={this.handleClick}
-                {...sanitizeRestProps(props)}
-            >
-                {Children.map(children, field =>
-                    field
-                        ? cloneElement(field, {
-                              basePath: field.props.basePath || basePath,
-                              onDrop: this.handleDrop,
-                              record: node.record,
-                              resource,
-                          })
-                        : null
+            <Form
+                onSubmit={this.handleSubmit}
+                render={({ handleSubmit }) => (
+                    <form
+                        className={classes.root}
+                        onClick={this.handleClick}
+                        onSubmit={handleSubmit}
+                        {...sanitizeRestProps(props)}
+                    >
+                        {Children.map(children, field =>
+                            field
+                                ? cloneElement(field, {
+                                      basePath:
+                                          field.props.basePath || basePath,
+                                      onDrop: this.handleDrop,
+                                      record: node.record,
+                                      resource,
+                                  })
+                                : null
+                        )}
+                        {actions &&
+                            cloneElement(actions, {
+                                basePath,
+                                record: node.record,
+                                resource,
+                                handleSubmit: this.handleSubmit,
+                                handleSubmitWithRedirect: this.handleSubmit,
+                                invalid,
+                                pristine,
+                                saving,
+                                submitOnEnter,
+                            })}
+                    </form>
                 )}
-                {actions &&
-                    cloneElement(actions, {
-                        basePath,
-                        record: node.record,
-                        resource,
-                        handleSubmit: this.handleSubmit,
-                        handleSubmitWithRedirect: this.handleSubmit,
-                        invalid,
-                        pristine,
-                        saving,
-                        submitOnEnter,
-                    })}
-            </form>
+            />
         );
     }
 }
 
 const mapStateToProps = (state, { node }) => ({
-    form: `tree-node-form-${node.id}`,
     initialValues: node.record,
     record: node.record,
 });
@@ -208,9 +214,5 @@ export default compose(
             startUndoable: startUndoableAction,
         }
     ),
-    reduxForm({
-        enableReinitialize: true,
-        keepDirtyOnReinitialize: true,
-    }),
     withStyles(styles)
 )(NodeForm);
diff --git a/packages/ra-tree-ui-materialui/src/Tree.js b/packages/ra-tree-ui-materialui/src/Tree.js
@@ -32,6 +32,7 @@ const sanitizeRestProps = ({
     hasCreate,
     hideFilter,
     isLoading,
+    loaded,
     loadedOnce,
     perPage,
     selectedIds,

diff --git a/yarn.lock b/yarn.lock
@@ -6771,6 +6771,13 @@ final-form@^4.18.2:
   dependencies:
     "@babel/runtime" "^7.3.1"
 
+final-form@^4.18.4:
+  version "4.18.4"
+  resolved "https://registry.yarnpkg.com/final-form/-/final-form-4.18.4.tgz#55f6dfb1463045a6e9248d928e573459a8cd97f3"
+  integrity sha512-UUymL6UykjwO2yUN3EhBdw8ajaa448/CczgXvLcyXwbHRjWbA3Yjdxm6WSHQBx4pLv4iEqkvmPRnQ+xmS9GUcA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+
 [email protected]:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.1.tgz#eebf4ed840079c83f4249038c9d703008301b105"