foreign-sapphire•8mo ago

Can Show and Edit components pass custom meta to the buttons ?

Is it possible to pass meta to the buttons, besides rewriting the entire rendering ? What I am doing now is the following;

    <Show
      isLoading={isLoading}
      headerButtons={({ refreshButtonProps, editButtonProps, deleteButtonProps, listButtonProps }) => (
        <Box display="flex" flexDirection="row" alignItems="center">
          <ListButton {...listButtonProps} meta={meta} />
          <EditButton {...editButtonProps} meta={meta} />
          <DeleteButton {...deleteButtonProps} meta={meta} />
          <RefreshButton {...refreshButtonProps} meta={meta} />
        </Box>
      )}
    >

    <Show
      isLoading={isLoading}
      headerButtons={({ refreshButtonProps, editButtonProps, deleteButtonProps, listButtonProps }) => (
        <Box display="flex" flexDirection="row" alignItems="center">
          <ListButton {...listButtonProps} meta={meta} />
          <EditButton {...editButtonProps} meta={meta} />
          <DeleteButton {...deleteButtonProps} meta={meta} />
          <RefreshButton {...refreshButtonProps} meta={meta} />
        </Box>
      )}
    >

But this is so redundant and verbose, is there an easier way ?

2 Replies

kapa.ai•8mo ago

Hi @i.stoica. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible to pass additional parameters or override the existing ones using the meta prop in both Show and Edit components. This is done through the show and edit methods of useNavigation. For example, if the show action route is defined by the pattern: /posts/:authorId/show/:id, the meta prop can be used as follows:

const MyComponent = () => {  
 return <ShowButton meta={{ authorId: "10" }} />;  
};

const MyComponent = () => {  
 return <ShowButton meta={{ authorId: "10" }} />;  
};

Similarly, if the edit action route is defined by the pattern: /posts/:authorId/edit/:id, the meta prop can be used as follows:

const MyComponent = () => {  
 return <EditButton meta={{ authorId: "10" }} />;  
};

const MyComponent = () => {  
 return <EditButton meta={{ authorId: "10" }} />;  
};

However, based on the discussion in the Github issue (https://github.com/refinedev/refine/issues/3829), it seems that the Refine team is considering adding separate props for each button to support separate values rather than a single meta. This would allow you to pass different meta values to different buttons. As of now, your current approach of passing meta to each button individually seems to be the recommended way. For more information, you can refer to the documentation for ShowButton (https://refine.dev/docs/ui-integrations/ant-design/components/buttons/show-button#meta) and EditButton (https://refine.dev/docs/ui-integrations/material-ui/components/buttons/edit-button#meta). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

<@180601470268211200> kapa.ai is still learning and improving, please let us know how it did by reacting below