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

[Feature Request] Allow the list to change its inner view component dynamically #3030

Closed
shawnchen1980 opened this issue Mar 20, 2019 · 4 comments

Comments

@shawnchen1980
Copy link

shawnchen1980 commented Mar 20, 2019

My code is something like

<List ...{props}>
condition?<View1/>:<View2/>
</List>

But it doesn't work and I found this in the list logic

 shouldComponentUpdate(nextProps: Props & EnhancedProps, nextState) {
        if (
            nextProps.translate === this.props.translate &&
            nextProps.isLoading === this.props.isLoading &&
            nextProps.version === this.props.version &&
            nextState === this.state &&
            nextProps.data === this.props.data &&
            nextProps.selectedIds === this.props.selectedIds &&
            nextProps.total === this.props.total
        ) {
            return false;
        }
        return true;
    }

I think there should be a way to allow the list re-render a new view without fetching the data. Even a customized datagrid doesn't help sometimes. For example, I want one view with the pagination toolbar but the other view without it.

@shawnchen1980 shawnchen1980 changed the title Change the view for a list dynamically [Feature Request] Allow the list to change its inner view component dynamically Mar 20, 2019
@djhi
Copy link
Collaborator

djhi commented Mar 20, 2019

Can you please explain your use case with more details?

@fzaninotto
Copy link
Member

I think it's a duplicate of #1488

@shawnchen1980
Copy link
Author

I'm developing an app to teach my son English words. Each entry in the list is for a single word. In the quiz mode, the list component should show a series of quiz for each word. It also has its navigation button so I want to hide the pagination tool bar. Now the following codes work but in an inefficient way because each time I switch the mode, the whole list is unmounted and remounted and the data for the same page is re-fetched.

const renderView = mode => {
 
  return mode === "edit" ? (
    <Datagrid rowClick="edit">
      <TextField source="wordbook.name" />
      <TextField source="word.spelling" />
      <TextField source="word.translation" />
    </Datagrid>
  ) : (
    <WordQuiz />
  );
};
const WList = ({ mode, dispatch, ...props }) => {
 
  return (
    <List key={mode} {...props} pagination={mode === "edit" ? undefined : null}>
      {renderView(mode)}
    </List>
  );
};

@fzaninotto
Copy link
Member

Definitely a duplicate, I'm closing this issue, please comment on the other one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants