Injecting List, Show, Edit, Create in any places

问题

I would like create a file browser with <List /> component in <Show /> component.

Let's say we have a user with home directory and we want to create a file browser to this directory with ability to remove files. The idea of files doesn't match the idea of simple tables, which rows can be edited.

So I have created my own component with username and directory as states, useDataprovider() as hook, and <Table/> from MUI, altered data provider a bit. And it works quite nice.

The problem comes when there are many position in list, like 50+. A pagination would be nice. So I tried to fake props of <List /> and later <ListView /> to replace <Table /> but I failed.

After short code review, it looks like implementing <List /> as is, is not possible, because many hooks and other things it uses. In general nesting one into another of any type would be a mess in come.

My idea of this would look like this:

function HomedirBrowser({username}) {

    const [usrPath, setUsrPath] = React.useState("/");

    return (<List
        resource={`/users/${username}/dir/${usrPath}`}
    >
        <Datagrid>
            <TextField source="type"/>
            <TextField source="name"/>
            <TextField source="last_edit"/>
            <TextField source="size"/>
            <Button onClick={({record}) => setUsrPath(usrPath + "/" + record.name)}>Enter</Button>
        </Datagrid>
    </List>)
}

The custom resource which would depend on a state and the button could alter the state.

Is this possible to do? Or there is any other way to achieve nesting one element into another.

Of course, I don't want to save state to browsing in url of anywhere at all.

回答1:

I had a similar problem. I wanted to place a List component inside a Show component. Here is an example what I wanted to achieve:

const AuthorShow = props => (
<Show {...props}>
    <TabbedShowLayout>
        <Tab label='author'>
            <TextField source="firstName"/>
            <TextField source="lastName"/>  
        </Tab>
        <Tab label='books'>
            <List {...props}
                resource='books'
                filter={{authorId: props.id}}>
                <Datagrid>
                    <TextField source="title" />
                </Datagrid>
            </List>
        </Tab>
    </TabbedShowLayout>
</Show>)

Although I explicitly passed 'resource' prop, it was ignored and Show resource was used - authors. I managed to fix this behavior by wrapping List in a Fragment.

const AuthorShow = props => (
<Show {...props}>
    <TabbedShowLayout>
        <Tab label='author'>
            <TextField source="firstName"/>
            <TextField source="lastName"/>  
        </Tab>
        <Tab label='books'>
            <Fragment>
                <List {...props}
                    resource='books'
                    filter={{authorId: props.id}}>
                    <Datagrid>
                        <TextField source="title" />
                    </Datagrid>
                </List>
            </Fragment>
        </Tab>
    </TabbedShowLayout>
</Show>)

I don't know what caused that you failed to use List but this one may give you some clue at least.

回答2:

I have the similar code:

<Fragment>
        <List
          {...props}
          resource="card_program_options"
          filterDefaultValues={{ card_id: 1 }}
          sort={{ field: "id", order: "ASC" }}
        >
          <Datagrid>
            <TextField source="card_id" />
            <TextField source="card_programs_id" />
          </Datagrid>
        </List>
      </Fragment>

But the only thing i see on the page is No results found

screenshot of No results found in show

I see the request made in the backend and completes with a 200 response code.

Help is appreciated!

来源：https://stackoverflow.com/questions/59410436/injecting-list-show-edit-create-in-any-places

标签

react-admin