Flexibility in Formatting

[mwaeckerlin]

I have seen here many questions, requests (e.g. #69, #71) and one idea (#70) on how drizzle-react-component could be made more flexible. Here is my suggestion:

Problems

• there is no way to configure the rendering of the values (except suggestion in #70)
• arrays are mapped to unordered lists, there no way to change this (except suggestion in #70)
• there is no way to render the target contract in an array of addresses to contracts
• there is no way to render arrays complex structures
• same for maps
• there is no way to specify the range in forms
• there is no way to select the element for an input (e.g. <textarea> vs <input type="text">) or even <TextField> from @material-ui (not even solved in #70)
• there is now way to specify dependencies between input fields in forms
• …

In short terms: drizzle-react-component is nice for some small tutorial examples, but far away from a production ready library. But I like the basic concepts and simplicity of the approach.

Idea

In #70, @macsj200 suggests to add a property customComponent this solves configurability for simple rendering, but not in complex cases, such as for arrays and maps.

I suggest a different approach: Allow nested components inside ContractData and ContractForm, these are then used to render the content.

This is just a simple pseudo code to show how I see the solution:

  return (
    <>
      <h1>
         <ContractData contract="Mapping" method="something">
           <MyRender>{this.props.displayData}</MyRender>
         </contractData>
      </h1>
      <ul>
        <ContractData contract=Mapping" method="values" foreach="key => val">
          <li>
            <h2><ContractData contract="Value" instance="val" method="name" /></h2>
            <p><ContractData contract="Value" instance="val" method="text" /></p>
            <ul>
              <ContractData contract="Value" instance="val" method="data" foreach="dataItem">
                <li><ContractData contract="Value" instance="val" method="data" methodArgs="[dataItem]" /></li>
              </ContractData>
            </ul>
          </li>
        </ContractData>
      </ul>
    </>
  )
}

ToDo

I forked the project to https://github.com/mwaeckerlin/drizzle-react-components. I will now try to implement step by step a solution for the principle above.

Please add your comments, what do you think about this approach? @honestbonsai, would you be willing to accept such a change? @macsj200, would you accept this more flexible solution in favour of your suggestion in #70?

[honestbonsai]

@mwaeckerlin This issue is quite large and outlines too many items for a single Github issue. Please break it down into smaller items and open issues for each one.

I will consider the custom render props part of the issue resolved by #81.

[mwaeckerlin]

I'll open new tickets for the issues that are now still open.

[mwaeckerlin]

BTW, @honestbonsai, I suggest a release to npm from current development now. There are useful new features and arrays are fixed.