Make results of <Props> iterable

[droganov]

Branched from #1371 (comment)

I suggest to change <Props> so it would accept function child and that child could be used to manipulate rendered rows.

<Props of={UiComponent}>
  {renderedProps => children.filter(propRow => propRow.componentName === 'UiComponent')}
</Props>

We also need to inject metadata (component name and path) as a static members, to make that manipulate meaningful

({ of, children }) => {
  const result = Object.entries(of).map(renderPropAndInjectMetadata);
  return typeof children === 'function' ? children(result) : result; 
}

[droganov]

@mickaelzhang

What you are describing is possible right now by shadowing the component already btw

Could you post an example? I traced Props output, and I can see rows are wrapped, and I can't manipulate them.

[mickaelzhang]

Could you add a use case example? When would you need to filter this way?

Could you post an example? I traced Props output, and I can see rows are wrapped, and I can't manipulate them.

You must shadow the component (meaning that you need to create a gatsby-theme-docz/components/Props/index.js file) in your project. And then probably do something similar to this:

import { Props as DoczProps } from 'docz'

export const Props = ({ props, ...others }) => {
  const displayedProps = props.filter(propRow => propRow.componentName === 'UiComponent'))

  return <DoczProps props={displayedProps} {...others} />
}

We also need to inject metadata (component name and path) as a static members, to make that manipulate meaningful

I have no idea for the injection of meta data as I don't know the project enough but filtering by component use sounds like a valid case. @rakannimer might have an idea about this part.

What you want to do currently, if I understand correctly, is to not change the rendered element (you still want the Table from docz) but only filter the row right?

As of how would we do it, I think that children might not be the best candidate? children is deeply linked to the rendered element which will make it confusing for developers.

Another way would be:

<Props of={Component} filter={propRow => propRow.componentName === 'UiComponent')}/>

[droganov]

@mickaelzhang the use case — I want split props into groups for every component in my UI lib.

It looks I can do that with the HOC, I will try to do so and post update.

as for injecting, I think it could be something like this:

const row = <div>ya-da</div>;
return Object.assign(row, someProps);

[mickaelzhang]

@droganov Correct me if I'm wrong but if you must split into group all your component in your UI lib, then you case is similar to mine? Then shadowing the Props component of the docz theme is probably better for you

With the solution that you propose you would need to filter everytime you use <Props />, with the shadowing you would just filter it once

[droganov]

Yes, basically what I want is inserting a component name. Will try it in a day or so.

…

On Tue, 4 Feb 2020, 15:52 Mickael Zhang, ***@***.***> wrote: @droganov <https://github.com/droganov> Correct me if I'm wrong but if you must split into group all your component in your UI lib, then you case is similar to mine? Then shadowing the Props component of the docz theme is probably better for you With the solution that you propose you would need to filter everytime you use <Props />, with the shadowing you would just filter it once — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1375?email_source=notifications&email_token=AAKPYQ66JGR7IGN5ACGKB6TRBEUGDA5CNFSM4KOGRDQKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKW2C3Y#issuecomment-581804399>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAKPYQ7CDFBHQ7ACWLWI73TRBEUGDANCNFSM4KOGRDQA> .

[mickaelzhang]

Any news on this @droganov?

[droganov]

@mickaelzhang I'm sorry, I could'n do it fast.
Will try next week, travelling ATM

[mickaelzhang]

I'll close this issue for now @droganov, the current solution in place in docz should work for you

Feel free to reopen a PR later if needed :)