Decorator example

decorators.js

/*
 * Concept (I did't check)
 */

export const connectToModel = ({ instanceName, configCreator, ...connectFields }) => target => {
    target.getDerivedStateFromProps = ({ model }) => createConfig({ configCreator, model });

    return connectModel({ instanceName, ...connectFields })(target);
}

export const connectToModelWithCompose = ({ instanceName, configCreator, ...connectFields }, HOCs) => target => {
    target.getDerivedStateFromProps = ({ model, ...props }) => createConfig({ configCreator, model, ...props });

    return compose(...HOCs, connectModel({ instanceName, ...connectFields }))(target);
}

ExampleComponent.js

/**
 * Proposed type of component
 */

// Simple
@connectToModel({ instanceName, configCreator })
class StatementTabs extends React.Component {
  render() {
    const { config } = this.state;
    const { theme } = this.props;
    const Component = tabConfig[config.tabs.main.value];
    return <h1>Blablabla</h1>;
  }
}

// Simple with multiply
@connectToModel({ instanceName, configCreator, multiply: true })
class StatementTabs extends React.Component {
  render() {
    const { config } = this.state;
    const { theme } = this.props;
    const Component = tabConfig[config.tabs.main.value];
    return <h1>Blablabla</h1>;
  }
}

// With themeProvider & withTheme
@connectToModelWithCompose({ instanceName, configCreator }, [ themeProvider, withTheme ]) // Or @connectToModel how alternative without HOC's
class StatementTabs extends React.Component {
  render() {
    const { config } = this.state;
    const { theme } = this.props;
    const Component = tabConfig[config.tabs.main.value];
    return <h1>Blablabla</h1>;
  }
}

// With i18next
@connectToModelWithCompose({ instanceName, configCreator }, [ withNamespaces('counterparties') ])
class StatementTabs extends React.Component {
  render() {
    const { config } = this.state;
    const { theme } = this.props; // t already binded
    const Component = tabConfig[config.tabs.main.value];
    return <h1>Blablabla</h1>;
  }
}

// With formik
@connectToModelWithCompose(
  { instanceName, configCreator },
  [ withFormik({ mapPropsToValues,enableReinitialize: true }) ]
)
class StatementTabs extends React.Component {
  render() {
    const { config } = this.state;
    const { theme } = this.props; // contains all the properties as in the old approach
    const Component = tabConfig[config.tabs.main.value];
    return <h1>Blablabla</h1>;
  }
}

// With all HOC's
@connectToModelWithCompose(
  { instanceName, configCreator },
  [
    withTheme,
    themeProvider,
    withNamespaces('counterparties'),
    withFormik({ mapPropsToValues,enableReinitialize: true })
  ]
)
class StatementTabs extends React.Component {
  render() {
    const { config } = this.state;
    const { theme } = this.props;
    const Component = tabConfig[config.tabs.main.value];
    return <h1>Blablabla</h1>;
  }
}

SomeKindComponent.js

/**
 * The usual component in the current implementation
 */

class StatementTabs extends React.Component {
  render() {
    const { config } = this.state;
    const { theme } = this.props;
    const Component = tabConfig[config.tabs.main.value];
    return <h1>Blablabla</h1>;
  }
}

StatementTabs.getDerivedStateFromProps = ({ model }) => {
    const config = createConfig({
      configCreator,
      model
    });
    return {
      config
    };
  };
  
  const enhance = compose(
    themeProvider,
    withTheme,
    connectModel({ instanceName })
  );

export default enhance(StatementTabs);