region-form v8.1.0

region-form

Bind with ant-design form item, automatic data control. Extremely simple API!

English | 中文

Package	Version	Docs	Description
region-core			The core of Region: set, load & connect
region-shortcut			Wrapped core with global Provider, set, load & connect
region-form			RegionForm extends Region: bindWith any ant-design form item

Get Started

npm i region-form

• Create a file named Provider.js

import { getProvider } from 'region-form';

const Provider = getProvider();
// or
const Provider = getProvider({ store, reducers});

export default Provider;

see getProvider

• Then bind your form item

import { RegionFrom } from 'region-form';
import { Card, Input, Switch, Radio, Checkbox } from 'antd';

const region = new RegionFrom({
  name: 'form',
  defaultProps: {
    labelCol: {
      sm: { span: 4 },
    },
    wrapperCol: {
      sm: { span: 20 },
    },
  },
  initialValues: {
    a: false,
    b: 'b',
    c: 'c',
    d: ['option1', 'option2']
  },
});

const validate = async () => {
  await new Promise(resolve => setTimeout(resolve, 1000));
  if (Math.random() < 0.5) {
    throw new Error('value is invalid');
  }
};

const SwitchA = region.bindWith('a', Switch, { validate });
const InputB = region.bindWith('b', Input, { validate });
const RadioGroupC = region.bindWith('c', Radio.Group, { validate });
const CheckBoxGroupD = region.bindWith('d', Checkbox.Group, { validate });

const Form = () => (
  <Card>
    <SwitchA label="LabelA" />
    <InputB label="LabelB" />
    <RadioGroupC label="LabelC" options={['Hangzhou', 'Shanghai', 'Beijing', 'Chengdu']} />
    <CheckBoxGroupD label="LabelD" options={['Apple', 'Pear', 'Orange']} />
  </Card>
);

const Result = ({ a, b, c, d }) => (
  <Card>
    {JSON.stringify({ a, b, c, d })}
  </Card>
);

const ConnectResult = region.connectWith(['a', 'b', 'c', 'd'], Result);

see also Region

• If you are using region-core, or you are using own ui library with an unique adapter provided

import { Region } from 'region-core';
import wrapRegionForm from 'region-form/lib/wrapRegionForm';
import adapter from 'region-form/lib/adapter/antd';

const RegionForm = wrapRegionForm(Region, adapter);

Example

Online Example

Contribute

Region is Extremely easy to extend, fire a issue if you have some great idea.

import { Region } from 'region-core';

class MyRegion extends Region {
  constructor(...args) {
    super(...args);
    this.someFunc = this.someFunc.bind(this); // in case you are not using class field
  }

  someFunc() {}
}

As for pull request, make sure to add test for your code.