Example code for developing h5 form page based on react hooks and zarm component library configuration

// For example, the mapping under antd is as follows:
export const mapping = {
 default: 'input',
 string: 'input',
 array: 'list',
 boolean: 'checkbox',
 integer: 'number',
 number: 'number',
 object: 'map',
 html: 'html',
 'string:upload': 'upload',
 'string:date': 'date',
 'string:dateTime': 'date',
 'string:time': 'date',
 'string:textarea': 'textarea',
 'string:color': 'color',
 'string:image': 'input',
 'string:email': 'input',
 'string:url': 'url',
 'range:date': 'dateRange',
 'range:dateTime': 'dateRange',
 '*?enum': 'select',
 'array?enum': 'checkboxes',
};

import React, { useState } from 'react';
import FormRender from 'form-render/lib/antd';

const schema = {
 type: 'object',
 properties:
 select: {
  title: 'Single Choice',
  type: 'string',
  enum: ['a', 'b'],
  enumNames: () => ['Show input box', 'Hide input box'],
  'ui:disabled': (formData, rootValue) => rootValue.input1.length > 5,
  'ui:widget': 'radio',
 },
 input1: {
  title: 'Input box',
  description: 'Try to enter more than 5 characters',
  type: 'string',
  'ui:hidden': (formData, rootValue) => formData.select === 'b',
 },
 },
};

const Demo1 = () => {
 const [formData, setFormData] = useState({});
 return (
 <FormRender schema={schema} formData={formData} onChange={setFormData} />
 );
};

export default Demo1;

import React, { useState, useEffect } from 'react';
import FormRenderer from 'zarm-form-render';
import { Input, Cell, Radio, Select, DateSelect, Button, Toast, Panel } from 'zarm';

export default function App() {
 const [data, setData] = useState({});

 const layoutData = [
 {
  type: Input,
  label: 'Name of the insured',
  placeholder: 'Please fill in',
  name: 'name',
 },
 {
  type: Radio.Group,
  label: 'gender',
  name: 'gender',
  elProps: {
  type: 'button',
  ghost: true,
  },
  items: [
  { label: '男', value: 'male' },
  { label: '女', value: 'female' },
  ],
 },
 {
  render() {
  if (!data.gender) return null;
  return <Cell title="You are" description={data.gender === 'male' ? 'Boy' : 'Girl'}></Cell>;
  },
 },
 {
  type: Select,
  label: 'Favorite Fruit',
  name: 'favfood',
  elProps: {
  dataSource: [
   { label: 'apple', value: 'apple' },
   { label: 'banana', value: 'banana' },
  ],
  },
 },

 {
  type: DateSelect,
  label: 'Date of Birth',
  title: 'Insured person's date of birth',
  placeholder: 'Please select',
  name: 'birthday',
  min: '1900-01-01',
 },
 {
  type: Input,
  label: 'Mobile phone number',
  placeholder: 'Please fill in',
  name: 'mobile',
 },
 {
  render() {
  return <div style={{ margin: '30px 6px',}}></div>;
  },
 },
 {
  render() {
  return (
   <Panel title="Content you entered">
   <div style={{ margin: '10px 6px' }}>{JSON.stringify(data)}</div>
   </Panel>
  );
  },
 },
 ];

 return (
 <div>
  <FormRenderer layoutData={layoutData} data={data} setData={setData} />
  <Button block theme="primary" onClick={() => Toast.show(JSON.stringify(data))}>
  OK</Button>
 </div>
 );
}

import React from 'react';
import { Cell, Radio, DateSelect, Select } from 'zarm';

// For situations where configuration is not possible (such as custom components, components that need to be displayed based on conditions, etc.), please use the render method.
// getJSON() returns json dynamically
// render() Custom render

export default function FormRenderer({ layoutData, data, setData }) {
 const onFiledChange = (name, value) => {
 let v = value;

 // for Select ctrl
 if (Array.isArray(value)) {
  v = value.map((item) => item.value)[0];
 }

 setData({ ...data, [name]: v });
 };

 const onChangeFactory = (name) => (value) => onFiledChange(name, value);

 return (
 <div className="renderer">
  {layoutData.map((item, idx) => {
  if (typeof item.getJSON === 'function') {
   item = item.getJSON();
  }
  if (typeof item !== 'object' || !item) return null;
  const {
   name,
   type,
   description,
   items,
   elProps = {},
   cellProps = {},
   render,
   ...props
  } = item;

  if (typeof render === 'function') {
   return render();
  }

  let children = [];
  if (Array.isArray(items) && type === Radio.Group) {
   children = items.map((it, idx1) => (
   <Radio value={it.value} key={idx1}>
    {it.label}
   </Radio>
   ));
  }

  props.value = data[name];
  props.onChange = onChangeFactory(name);

  if (type === Select) {
   props.dataSource = items;
  }
  if (type === DateSelect || type === Select) {
   props.onOk = props.onChange;
   delete props.onChange;
   props.onChange = elProps.onChange;
  }

  return (
   <Cell key={idx} title={item.label} description={description} {...cellProps} name={name}>
   {React.createElement(type, { ...props, ...elProps }, ...children)}
   </Cell>
  );
  })}
 </div>
 );
}

import * as React from 'react';
export interface Item {
 type: React.Component; // component type, such as Input, etc. name: string; // key
 items?: Array<any>; // dataSource
 description: string; // Cell description
 label?: string; // Cell title
 render?: () => React.ReactNode; //Custom render
 getJSON?: () => object | null; // Dynamically return Item configuration elProps?: object; // Component props configuration, for example, if type is Input, elProps will be configured to Input
 cellProps?: object; // cell props configuration}
export interface Props {
 layoutData: Array<Item>; // Form layout configuration data: object; // Data storage, name as key, content as value
 setData: () => void; // data update}
interface FormRenderer extends React.FC<Props> {}
declare const FormRenderer: FormRenderer;
export default FormRenderer;