Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ra-tree does not work as intended in the doc #2980

Closed
MinDBreaK opened this issue Mar 9, 2019 · 3 comments
Closed

ra-tree does not work as intended in the doc #2980

MinDBreaK opened this issue Mar 9, 2019 · 3 comments
Assignees
Labels

Comments

@MinDBreaK
Copy link

MinDBreaK commented Mar 9, 2019

What you were expecting:
The moving icon on the ra-tree should be on the left like in the documentation and translations are working. Basically the result of the tutorial should look like the example.

What happened instead:
The moving icon is on the right and translations are not working.

image

Steps to reproduce:
Add ra-tree package and create a tree in a resource.

Related code:

// assets/src/Admin/admin.js
import React from 'react';
import { fetchUtils, Admin, Resource, mergeTranslations } from 'react-admin';
import { reducer as tree } from 'ra-tree-ui-materialui';
import englishMessages from 'ra-language-english';
import treeEnglishMessages from 'ra-tree-language-english';
import jsonServerProvider from 'ra-data-json-server';
import authProvider from "./authProvider";
import CategoriesList from "./List/CategoriesList"

const messages = {
    'en': mergeTranslations(englishMessages, treeEnglishMessages),
};

const httpClient = (url, options = {}) => {
    if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }
    const token = localStorage.getItem('token');
    options.headers.set('Authorization', `Bearer ${token}`);
    return fetchUtils.fetchJson(url, options);
};

const dataProvider = jsonServerProvider('/api/v2', httpClient);
const AdminApp = () => (
    <Admin dataProvider={dataProvider} authProvider={authProvider} locale="en" messages={messages} customReducers={{ tree }}>
        <Resource name="categories" list={CategoriesList}/>
    </Admin>
);

// assets/admin/List/CategoriesList.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>
);
const CategoriesList = (props) => (
    <List {...props} perPage={10000}>
        <Tree allowDropOnRoot enableDragAndDrop>
            <NodeView actions={<CategoriesActions />}>
                <TextField source="name" />
            </NodeView>
        </Tree>
    </List>
);

export default CategoriesList;

Other information:
I suppose missing imports are at the cause, because translations are not working either. I explicitly followed the tutorial. If I missed something I don't know what.

Environment

  • React-admin version: 2.7.1
  • Last version that did not exhibit the issue (if applicable): unknown
  • React version: 16.8.3
  • Browser: Firefox & Chrome
  • Stack trace (in case of a JS error):
Warning: Missing translation for key: "ra.tree.root_target" warning.js:34
    printWarning warning.js:34
    warning warning.js:57
    warn index.js:26
    t index.js:368
    render RootDropTarget.js:55
    React 14
    finishClassComponent
    updateClassComponent
    beginWork
    performUnitOfWork
    workLoop
    renderRoot
    performWorkOnRoot
    performWork
    performSyncWork
    requestWork
    scheduleWork
    enqueueSetState
    setState
    handleChange
    handleChange DragDropMonitorImpl.js:27
    dispatch Redux
    bindActionCreator DragDropManagerImpl.js:42
    handleTopMove React

@Kmaschta Kmaschta added the bug label Mar 11, 2019
@fzaninotto
Copy link
Member

For the translation, you probably forgot to import the ra-tree-language-english package.

For the screenshot, there is indeed a bug.

@MinDBreaK
Copy link
Author

MinDBreaK commented Mar 14, 2019 via email

@fzaninotto
Copy link
Member

ah, that's because the README contains an outdated i18n syntax. Reopening the issue.

@fzaninotto fzaninotto reopened this Mar 14, 2019
ghodsizadeh pushed a commit to ghodsizadeh/react-admin that referenced this issue May 21, 2019
ghodsizadeh pushed a commit to ghodsizadeh/react-admin that referenced this issue May 21, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants