dinotrnka

{
  "items": [
    {
      "id": "item-id-1",
      "type": "username",
      "placeholder": "Please enter your username",
      "required:": true,
      "minLength": 3,
      "maxLength": 15
    },

dinotrnka

function Factory(item) {
  switch (item.type) {
    case 'username':
      return <Username item={item} />;
    case 'password':
      return <Password item={item} />;
    case 'birthday':
      return <Birthday item={item} />;
    case 'gender':
      return <Gender item={item} />;

dinotrnka

render() {
  const { items } = this.props;

  const components = items.map(item => <Factory item={item} />);

  return (
    <View>
      {components}
    </View>
  );

dinotrnka

function Factory(item) {
  switch (item.type) {
    case 'username':
      return <Username item={item} />;
    case 'password':
      return <Password item={item} />;
    case 'birthday':
      return <Birthday item={item} />;
    case 'gender':
      return <Gender item={item} />;

dinotrnka

class Field extends Component {
  constructor({ type }) {
    super();
    this.type = type;
  }
}

export default Field;

dinotrnka

class Username extends Field {
  const { item } = this.props;

  render() {
    ...
  }
}

class UsernameFactory {
  get type() { return 'username'; }

dinotrnka

class Password extends Field {
  const { item } = this.props;

  render() {
    ...
  }
}

class PasswordFactory {
  get type() { return 'password'; }

dinotrnka

class Birthday extends Field {
  const { item } = this.props;

  render() {
    ...
  }
}

class BirthdayFactory {
  get type() { return 'birthday'; }

dinotrnka

class Gender extends Field {
  const { item } = this.props;

  render() {
    ...
  }
}

class GenderFactory {
  get type() { return 'gender'; }

dinotrnka

class Factory {
  constructor() {
    this.factoryMapper = new FactoryMapper();
  }

  create({ item }) {
    const { type } = item;
    const factory = this.factoryMapper.factory(type);
    return factory.create({ item });
  }