Skip to content

Commit

Permalink
Merge branch 'next' into patch-docs-anchors-next
Browse files Browse the repository at this point in the history
  • Loading branch information
WiXSL authored Oct 17, 2019
2 parents 9090692 + cfc07d4 commit a076fd2
Show file tree
Hide file tree
Showing 46 changed files with 114 additions and 2,351 deletions.
10 changes: 1 addition & 9 deletions Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -74,19 +74,11 @@ build-ra-realtime:
@echo "Transpiling ra-realtime files...";
@cd ./packages/ra-realtime && yarn -s build

build-ra-tree-core:
@echo "Transpiling ra-tree-core files...";
@cd ./packages/ra-tree-core && yarn -s build

build-ra-tree-ui-materialui:
@echo "Transpiling ra-tree-ui-materialui files...";
@cd ./packages/ra-tree-ui-materialui && yarn -s build

build-data-generator:
@echo "Transpiling data-generator files...";
@cd ./examples/data-generator && yarn -s build

build: build-ra-core build-ra-ui-materialui build-ra-data-fakerest build-ra-data-json-server build-ra-data-simple-rest build-ra-data-graphql build-ra-data-graphcool build-ra-data-graphql-simple build-ra-i18n-polyglot build-ra-input-rich-text build-ra-realtime build-ra-tree-core build-ra-tree-ui-materialui build-data-generator build-react-admin ## compile ES6 files to JS
build: build-ra-core build-ra-ui-materialui build-ra-data-fakerest build-ra-data-json-server build-ra-data-simple-rest build-ra-data-graphql build-ra-data-graphcool build-ra-data-graphql-simple build-ra-i18n-polyglot build-ra-input-rich-text build-ra-realtime build-data-generator build-react-admin ## compile ES6 files to JS

doc: ## compile doc as html and launch doc web server
@yarn -s doc
Expand Down
8 changes: 7 additions & 1 deletion UPGRADE.md
Original file line number Diff line number Diff line change
Expand Up @@ -1281,4 +1281,10 @@ export default ({
sagaMiddleware.run(saga);
return store;
};
```
```

## No More Tree Packages in Core

The `ra-tree` and `ra-tree-ui-material-ui` packages were removed in v3. The v2 version performed poorly, and we don't want to delay v3 to reimplement the Tree packages.

If you were using these packages just for displaying a tree, you'll have to reimplement a basic tree widget, taking the Tags list from the Simple example as an inspiration. If you were using these packages for creating and updating a tree, we recommend that you wait until the core team or another community member publishes a Tree package compatible with v3.
4 changes: 2 additions & 2 deletions docs/Ecosystem.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,8 @@ See the [translation](./Translation.md#available-locales) page.
## Miscellaneous

- [marmelab/ra-realtime](https://github.com/marmelab/react-admin/tree/master/packages/ra-realtime): enable realtime updates
- [marmelab/ra-tree-ui-materialui](https://github.com/marmelab/react-admin/blob/master/packages/ra-tree-ui-materialui/): Components to show data represented as a tree. This package is part of our [Labs](./Labs.md) experimentations. This means it misses some features and might not handle all corner cases. Use it at your own risks. Besides, we would really appreciate some feedback!
- [marmelab/ra-tree-core](https://github.com/marmelab/react-admin/blob/master/packages/ra-tree-core/): Components providing the logic but no UI to show data represented as a tree. This package is part of our [Labs](./Labs.md) experimentations. This means it misses some features and might not handle all corner cases. Use it at your own risks. Besides, we would really appreciate some feedback!
- [marmelab/ra-tree-ui-materialui](https://github.com/marmelab/react-admin/blob/master/packages/ra-tree-ui-materialui/): Components to show data represented as a tree. Only compatible with react-admin v2 for now.
- [marmelab/ra-tree-core](https://github.com/marmelab/react-admin/blob/master/packages/ra-tree-core/): Components providing the logic but no UI to show data represented as a tree. Only compatible with react-admin v2 for now.
- [ra-customizable-datagrid](https://github.com/fizix-io/ra-customizable-datagrid): plugin that allows to hide / show columns dynamically.
- [FusionWorks/react-admin-google-maps](https://github.com/FusionWorks/react-admin-google-maps): Input/view components for displaying location using Google Maps.
- [api-platform/admin](https://api-platform.com/docs/admin): create a fully featured admin using React Admin for API supporting the [Hydra Core Vocabulary](http://www.hydra-cg.com/), including but not limited to APIs created using the [API Platform framework](https://api-platform.com)
Expand Down
17 changes: 0 additions & 17 deletions docs/Labs.md

This file was deleted.

64 changes: 0 additions & 64 deletions docs/List.md
Original file line number Diff line number Diff line change
Expand Up @@ -1167,70 +1167,6 @@ When you want to display only one property of a list of records, instead of usin
</ReferenceArrayField>
```
## The `<Tree>` component
When you want to display a hierarchized list of records, instead of using a `<Datagrid>`, use the `<Tree>` component. This component is available in an addon package: [`ra-tree-ui-materialui`](https://github.com/marmelab/react-admin/blob/master/packages/ra-tree-ui-materialui/README.md).
*Important*: This package is part of our [Labs](./Labs.md) experimentations. This means it misses some features and might not handle all corner cases. Use it at your own risks. Besides, we would really appreciate some feedback!
It expects that every resource returned from the `List` has a `parent_id` property by default:
```json
[
{ "id": 1, "name": "Clothing" },
{ "id": 2, "name": "Men", "parent_id": 1 },
{ "id": 3, "name": "Suits", "parent_id": 2 },
{ "id": 6, "name": "Women", "parent_id": 1 },
{ "id": 7, "name": "Dresses", "parent_id": 6 },
{ "id": 10, "name": "Skirts", "parent_id": 6 },
{ "id": 11, "name": "Blouses", "parent_id": 6 }
]
```
Here's an example showing how to use it:
```jsx
// in src/categories.js
import React from 'react';
import { List, TextField, EditButton, DeleteButton } from 'react-admin';
import { Tree, NodeView, NodeActions } from 'ra-tree-ui-materialui';

const CategoriesActions = props => (
<NodeActions {...props}>
<EditButton />
<DeleteButton />
</NodeActions>
);

export const CategoriesList = (props) => (
<List {...props} perPage={10000}>
<Tree>
<NodeView actions={<CategoriesActions />}>
<TextField source="name" />
</NodeView>
</Tree>
</List>
);
```
![ra-tree demo](./img/ra-tree.gif)
**Tip**: The `<Tree>` component supports drag & drop operations:
```jsx
export const CategoriesList = (props) => (
<List {...props} perPage={10000}>
<Tree enableDragAndDrop>
<NodeView actions={<CategoriesActions />}>
<TextField source="name" />
</NodeView>
</Tree>
</List>
);
```
To learn more about this component features, please refers to its [README](https://github.com/marmelab/react-admin/blob/master/packages/ra-tree-ui-materialui/README.md).
## Using a Custom Iterator
A `<List>` can delegate to any iterator component - `<Datagrid>` is just one example. An iterator component must accept at least two props:
Expand Down
5 changes: 0 additions & 5 deletions docs/_layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -843,11 +843,6 @@
</a>
</li>

<li class="chapter {% if page.path == 'Labs.md' %}active{% endif %}">
<a href="./Labs.html">
<b>22.</b> Labs
</a>
</li>
</ul>
</nav>
</div>
Expand Down
2 changes: 0 additions & 2 deletions examples/simple/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,6 @@
"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.9.0",
"react-admin": "^3.0.0-alpha.0",
"react-dom": "^16.9.0"
Expand Down
2 changes: 0 additions & 2 deletions examples/simple/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ 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-dom';
import { reducer as tree } from 'ra-tree-ui-materialui';

import authProvider from './authProvider';
import comments from './comments';
Expand All @@ -23,7 +22,6 @@ render(
i18nProvider={i18nProvider}
title="Example Admin"
layout={Layout}
customReducers={{ tree }}
customRoutes={[
<Route
exact
Expand Down
137 changes: 100 additions & 37 deletions examples/simple/src/tags/TagList.js
Original file line number Diff line number Diff line change
@@ -1,45 +1,108 @@
import React from 'react';
import React, { Fragment, useState } from 'react';
import { List, EditButton } from 'react-admin';
import {
DeleteButton,
EditButton,
List,
ShowButton,
TextField,
} from 'react-admin';
import {
DragPreview,
IgnoreFormProps,
NodeView,
Tree,
NodeActions,
} from 'ra-tree-ui-materialui';
List as MuiList,
ListItem,
ListItemText,
ListItemSecondaryAction,
Collapse,
Card,
makeStyles,
} from '@material-ui/core';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';

const TagDragPreview = props => (
<DragPreview {...props}>{({ node }) => node.record.name}</DragPreview>
);
const useStyles = makeStyles({
card: {
maxWidth: '20em',
marginTop: '1em',
},
});
const SmallCard = ({ className, ...props }) => {
const classes = useStyles();
return <Card {...props} className={`${className} ${classes.card}`} />;
};

const CustomNodeActions = props => (
<NodeActions {...props}>
<IgnoreFormProps>
<EditButton />
<ShowButton />
<DeleteButton />
</IgnoreFormProps>
</NodeActions>
);
const SubTree = ({ level, root, getChildNodes, openChildren, toggleNode }) => {
const childNodes = getChildNodes(root);
const hasChildren = childNodes.length > 0;
const open = openChildren.includes(root.id);
return (
<Fragment>
<ListItem
button={hasChildren}
onClick={() => hasChildren && toggleNode(root)}
style={{ paddingLeft: level * 16 }}
>
{hasChildren && open && <ExpandLess />}
{hasChildren && !open && <ExpandMore />}
{!hasChildren && <div style={{ width: 24 }}>&nbsp;</div>}
<ListItemText primary={root.name} />

<ListItemSecondaryAction>
<EditButton record={root} basePath="/tags" />
</ListItemSecondaryAction>
</ListItem>
<Collapse in={open} timeout="auto" unmountOnExit>
<MuiList component="div" disablePadding>
{childNodes.map(node => (
<SubTree
key={node.id}
root={node}
getChildNodes={getChildNodes}
openChildren={openChildren}
toggleNode={toggleNode}
level={level + 1}
/>
))}
</MuiList>
</Collapse>
</Fragment>
);
};

const Tree = ({ ids, data }) => {
const [openChildren, setOpenChildren] = useState([]);
const toggleNode = node =>
setOpenChildren(state => {
if (state.includes(node.id)) {
return [
...state.splice(0, state.indexOf(node.id)),
...state.splice(state.indexOf(node.id) + 1, state.length),
];
} else {
return [...state, node.id];
}
});
const nodes = ids.map(id => data[id]);
const roots = nodes.filter(node => typeof node.parent_id === 'undefined');
const getChildNodes = root =>
nodes.filter(node => node.parent_id === root.id);
return (
<MuiList>
{roots.map(root => (
<SubTree
key={root.id}
root={root}
getChildNodes={getChildNodes}
openChildren={openChildren}
toggleNode={toggleNode}
level={1}
/>
))}
</MuiList>
);
};

const TagList = props => (
<List {...props} perPage={1000}>
<Tree
allowDropOnRoot
enableDragAndDrop
parentSource="parent_id"
dragPreviewComponent={TagDragPreview}
>
<NodeView actions={<CustomNodeActions />}>
<TextField source="name" />
</NodeView>
</Tree>
<List
{...props}
perPage={1000}
pagination={false}
component={SmallCard}
actions={false}
>
<Tree />
</List>
);

Expand Down
16 changes: 0 additions & 16 deletions examples/simple/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -93,22 +93,6 @@ 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: {
Expand Down
Loading

0 comments on commit a076fd2

Please sign in to comment.