xstate-form-machine

xstate common form machine using yup validations

Super quick start

npm install xstate
npm install xstate-form-machine

//validation.js
import * as yup from "yup";

const phoneRegExp = /^[1][3-8][0-9]{9}$/;

export const nameShape = yup.string().required("请填写名称");

export const phoneShape = yup
  .string()
  .length(11, "请输入手机号必须为11位")
  .required("请输入手机号")
  .matches(phoneRegExp, "手机号码格式不正确");

export const addressShape = yup.string().required("请填写详细地址");


//machine.js

import { assign, Machine } from "xstate";
import FormMachineBuilder from "xstate-form-machine";

const onSubmit = async context => {
  const { id, inputFields } = context;
  const { name, phone, address } = inputFields;
  //todo
});

const onSuccess = (...args) => {
  //todo
};

const onFail = (...args) => {
  //todo
};

const shapes = {
  name: nameShape,
  phone: phoneShape,
  address: addressShape
};

export default new FormMachineBuilder(
  "address",
  { assign, Machine },
  shapes
)
  .setOnSubmit(onSubmit)
  .setOnSuccess(onSuccess)
  .setOnFail(onFail)
  .build();

///

////useMachine


  const [current, send] = useMachine(
    machine.withContext({
      id,
      inputFields: {
        name,
        phone,
        address
      }
    })
  );

  const { context } = current;
  const { inputFields, inputErrors = {} } = context;

    <View className="container">
      <InputBox
        inputFields={inputFields}
        inputErrors={inputErrors}
        onChange={({name, phone, address}) => {
           //send("ONCHANGE", {payload: {name, phone, address}}) to update inputs
           send("ONCHANGE", {payload: {name, phone, address}})
          }
        }
      />
      <View
        className="confirmButton"
        onClick={() => {
          //send("SUMBIT", to submit
          send("SUMBIT");
        }}
      >
        <Text className="confirmText">{"保存"}</Text>
      </View>
    </View>