@carefrees/form-utils-react-taro 0.0.4

package/src/formList/index.tsx

@@ -0,0 +1,59 @@
+import { useRegisterFormList, RegisterFormListOptions } from './../hooks/register/register.FormList';
+import { FormListInstanceContext } from '../hooks/useFormList';
+import { FormItemParentNameProvider } from './../hooks/useFormItemParentName';
+import { RuleInstanceBase, FormItemInstanceBase, FormListInstanceBase } from '@carefrees/form-utils';
+import { useRegisterFormHideItem } from './../hooks/register/register.FormHideItem';
+import React, { Fragment, memo } from 'react';
+
+export interface FormListChildrenProps {
+  /**数据集合*/
+  fields: { name: number; key: number }[];
+  /**添加*/
+  onAdd: (initialValue?: Object) => void;
+  /**删除*/
+  onDelete: (index: number | number[]) => void;
+  /**移动*/
+  onMove: (from: number, to: number) => void;
+}
+
+export interface FormListProps extends RegisterFormListOptions {
+  children: (
+    options: FormListChildrenProps,
+    instances: {
+      ruleInstance: RuleInstanceBase;
+      formItemInstance: FormItemInstanceBase;
+      formListInstance: FormListInstanceBase;
+    },
+  ) => React.ReactNode;
+}
+
+/**form list 组件*/
+export const FormList = memo((props: FormListProps) => {
+  const { children, ...rest } = props;
+  const { formListInstance, ruleInstance, formItemInstance } = useRegisterFormList(rest);
+  return (
+    <FormListInstanceContext.Provider value={formListInstance}>
+      <FormItemParentNameProvider name={formListInstance.name} sort={formListInstance.sort}>
+        {children(
+          {
+            fields: formListInstance.getFields(),
+            onAdd: formListInstance.onAdd,
+            onDelete: formListInstance.onDelete,
+            onMove: formListInstance.onMove,
+          },
+          { ruleInstance, formItemInstance, formListInstance },
+        )}
+      </FormItemParentNameProvider>
+    </FormListInstanceContext.Provider>
+  );
+});
+
+/**隐藏 form list item 组件*/
+export const FormHideList = memo((props: FormListProps) => {
+  const { name, sort, isJoinParentField } = props;
+  const { isHide } = useRegisterFormHideItem({ name, sort: sort, isJoinParentField });
+  if (isHide) {
+    return <Fragment />;
+  }
+  return <FormList {...props} />;
+});

package/src/hooks/attr/attr.FormItem.tsx

@@ -0,0 +1,131 @@
+import { RuleInstanceBase, FormInstanceBase, FormItemInstanceBase, get } from '@carefrees/form-utils';
+import { useRegisterFormItem, RegisterFormItemOptions } from '../register/register.FormItem';
+import { useHtmlFor } from '../useHtmlFor';
+import React, { cloneElement, isValidElement, useMemo } from 'react';
+
+export interface FormItemAttrOptions extends RegisterFormItemOptions {
+  /**依赖更新项*/
+  dependencies?: string[];
+  /**通知 只用于校验规则提示 字段 */
+  noticeOnlyRuleDataField?: string[];
+  /**通知父级字段监听方法更新*/
+  isNoticeParentField?: boolean;
+  /**通知watch监听方法更新*/
+  noticeWatchField?: string[];
+  /**是否保护值(不进行表单项组件卸载重置初始值)*/
+  preserve?: boolean;
+  /**重写规则*/
+  useRules?: (ruleInstance: RuleInstanceBase, form: FormInstanceBase, formItemInstance: FormItemInstanceBase) => void;
+  /**输入框属性重写*/
+  useAttrs?: (attrs: any, form: FormInstanceBase, formItemInstance: FormItemInstanceBase) => any;
+  /**输入框属性*/
+  attrs?: any;
+  /**传递组件字段*/
+  valuePropName?: string;
+  /**取值字段(默认和valuePropName值相同)*/
+  getValuePath?: string;
+  /**自定义获取值*/
+  getValueFromEvent?: (event: any, form: FormInstanceBase, formItemInstance: FormItemInstanceBase) => any;
+  /**值格式化*/
+  formatValue?: (value: any, form: FormInstanceBase, formItemInstance: FormItemInstanceBase, event: any) => any;
+  /**触发数据更新之后触发（用于数据联动之类的）*/
+  onAfterUpdate?: (value: any, form: FormInstanceBase, formItemInstance: FormItemInstanceBase, event: any) => void;
+  /**事件名称*/
+  trigger?: string;
+  /**子元素*/
+  children?: React.ReactNode;
+}
+
+/**表单项参数*/
+export const useFormItemAttr = (options: FormItemAttrOptions) => {
+  const {
+    trigger = 'onChange',
+    dependencies,
+    noticeOnlyRuleDataField,
+    isNoticeParentField,
+    noticeWatchField,
+    preserve,
+    valuePropName = 'value',
+    getValuePath = valuePropName,
+    getValueFromEvent,
+    formatValue,
+    onAfterUpdate,
+    useAttrs,
+    useRules,
+    attrs,
+    children,
+    ...rest
+  } = options;
+  const { formItemInstance, form, ruleInstance, newName } = useRegisterFormItem({ ...rest });
+  formItemInstance.dependencies = dependencies;
+  formItemInstance.noticeOnlyRuleDataField = noticeOnlyRuleDataField;
+  formItemInstance.isNoticeParentField = isNoticeParentField;
+  formItemInstance.onAfterUpdate = onAfterUpdate;
+  formItemInstance.noticeWatchField = noticeWatchField;
+  formItemInstance.preserve = preserve;
+
+  /**获取值*/
+  const oldValue = form.getFieldValue(newName);
+
+  const onValueChange = (event: any) => {
+    try {
+      let value = event;
+      const target = event?.detail || event?.target;
+      if (typeof getValueFromEvent === 'function') {
+        value = getValueFromEvent(event, form, formItemInstance);
+      } else if (event && target && typeof target === 'object' && getValuePath in target) {
+        value = get(target, getValuePath);
+      }
+      if (typeof formatValue === 'function') {
+        value = formatValue(value, form, formItemInstance, event);
+      }
+      if (oldValue !== value) {
+        form.updatedFieldValue(newName, value, 'validate');
+        formItemInstance.onAfterUpdate?.(value, form, formItemInstance, event);
+        if (Array.isArray(formItemInstance.noticeWatchField) && formItemInstance.noticeWatchField.length) {
+          form.noticeWatch(formItemInstance.noticeWatchField);
+        }
+        if (
+          Array.isArray(formItemInstance.noticeOnlyRuleDataField) &&
+          formItemInstance.noticeOnlyRuleDataField.length
+        ) {
+          form.onlyValidate(formItemInstance.noticeOnlyRuleDataField);
+        }
+        if (formItemInstance.isNoticeParentField && formItemInstance.parentDataField) {
+          form.notice(formItemInstance.parentDataField);
+        }
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  formItemInstance.onChange = onValueChange;
+
+  // useHtmlFor
+  const htmlFor = useHtmlFor(newName);
+  formItemInstance.htmlFor = htmlFor;
+
+  const control: any = {
+    [trigger]: onValueChange,
+    ...attrs,
+    name: newName,
+    id: htmlFor,
+    [valuePropName]: oldValue,
+  };
+
+  /**触发数据调整*/
+  const newControl = useAttrs?.(control, form, formItemInstance) || control;
+  formItemInstance.control = newControl;
+  useRules?.(ruleInstance, form, formItemInstance);
+  const validateResult = useMemo(() => ruleInstance.getValidateResult(), [ruleInstance.messages]);
+
+  return {
+    children: isValidElement(children) ? cloneElement(children, newControl) : children,
+    form,
+    formItemInstance,
+    ruleInstance,
+    onChange: onValueChange,
+    htmlFor,
+    validateResult,
+  };
+};

package/src/hooks/register/register.FormHideItem.ts

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from 'react';
+import { RegisterFormItemOptions } from './register.FormItem';
+import { FormHideItemInstanceBase } from '@carefrees/form-utils';
+import { useFormItemParentName } from '../useFormItemParentName';
+import { useFormInstance } from '../useForm';
+import { useUpdate } from '../useUpdate';
+
+interface RegisterFormHideItemOptions extends Omit<RegisterFormItemOptions, 'rules'> {}
+
+/**注册表单隐藏表单项到表单实例中*/
+export const useRegisterFormHideItem = (options: RegisterFormHideItemOptions) => {
+  const { name, sort, isJoinParentField = true } = options;
+  const form = useFormInstance();
+  const _update = useUpdate();
+  const { newName, newSort } = useFormItemParentName({ name, sort, isJoinParentField });
+  const hideItemInstance = useRef(new FormHideItemInstanceBase().ctor(newName)).current;
+  const isHide = form.getFieldHideValue(newName);
+
+  hideItemInstance.instance = form;
+  hideItemInstance.updated = _update.current;
+  hideItemInstance.sort = newSort;
+
+  useEffect(() => {
+    const unMount = form.registerFormHideItem(hideItemInstance);
+    return () => unMount();
+  }, [newName]);
+
+  return { form, isHide };
+};

package/src/hooks/register/register.FormItem.ts

@@ -0,0 +1,52 @@
+/**
+ * @description 注册组件
+ */
+
+import { useEffect, useMemo, useRef } from 'react';
+import { RuleInstanceBase } from '@carefrees/form-utils';
+import type { RuleItem } from 'async-validator';
+import { useUpdate } from '../useUpdate';
+import { useFormInstance } from '../useForm';
+import { useFormItem } from '../useFormItem';
+import { useFormItemParentName } from '../useFormItemParentName';
+
+export interface RegisterFormItemOptions {
+  /**字段*/
+  name: string;
+  /**规则*/
+  rules?: RuleItem[];
+  /**排序值*/
+  sort?: string;
+  /**是否拼接父级字段*/
+  isJoinParentField?: boolean;
+}
+
+/**注册表单项到表单实例中*/
+export const useRegisterFormItem = (options: RegisterFormItemOptions) => {
+  const { name, rules, sort, isJoinParentField = true } = options;
+  const form = useFormInstance();
+  const { newName, newSort, parentName } = useFormItemParentName({ name, sort, isJoinParentField });
+  // 注册规则
+  // 注册单个实例
+  const ruleInstance = useRef(new RuleInstanceBase()).current;
+  useMemo(() => ruleInstance.ctor(newName, rules), [rules, newName]);
+  ruleInstance.instance = form;
+  ruleInstance.sort = newSort;
+
+  const formItemInstance = useFormItem();
+  useMemo(() => formItemInstance.ctor(newName, ruleInstance), []);
+  formItemInstance.instance = form;
+  formItemInstance.sort = newSort;
+  formItemInstance.parentDataField = parentName;
+
+  const _updated = useUpdate();
+  formItemInstance.updated = _updated.current;
+  ruleInstance.updated = _updated.current;
+
+  useEffect(() => {
+    const unMount = form.registerFormItem(formItemInstance);
+    return () => unMount();
+  }, []);
+
+  return { ruleInstance, formItemInstance, form, parentName, newName };
+};

package/src/hooks/register/register.FormList.ts

@@ -0,0 +1,31 @@
+import { useEffect, useMemo } from 'react';
+import { RegisterFormItemOptions, useRegisterFormItem } from './register.FormItem';
+import { useFormList } from '../useFormList';
+
+export interface RegisterFormListOptions extends RegisterFormItemOptions {}
+
+/**注册表单List到表单实例中*/
+export const useRegisterFormList = (options: RegisterFormListOptions) => {
+  const { ...rest } = options;
+  const { ruleInstance, formItemInstance, form, newName, parentName } = useRegisterFormItem({ ...rest });
+  const formListInstance = useFormList();
+
+  useMemo(() => formListInstance.ctor(newName), [newName]);
+
+  formListInstance.instance = form;
+  formListInstance.rule = ruleInstance;
+  formListInstance.sort = options.sort;
+  formListInstance.formItemInstance = formItemInstance;
+  formListInstance.parentDataField = parentName;
+
+  useEffect(() => {
+    const unMount = form.registerFormList(options.name, formListInstance);
+    return () => unMount();
+  }, [options.name, formListInstance]);
+
+  return {
+    ruleInstance,
+    formItemInstance,
+    formListInstance,
+  };
+};

package/src/hooks/register/register.form.ts

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import { useMultipleFormInstance } from '../useMultipleForm';
+import { FormInstanceBase } from '@carefrees/form-utils';
+
+/**注册表单实例到多表单收集实例中*/
+export const useRegisterForm = (form: FormInstanceBase, name?: string) => {
+  const multipleForm = useMultipleFormInstance();
+  useEffect(() => {
+    let onMounted;
+    if (name) {
+      onMounted = multipleForm.ctor(name, form);
+    }
+    return () => {
+      onMounted?.();
+    };
+  }, [name, form]);
+  return multipleForm;
+};

package/src/hooks/useAttrs.ts

@@ -0,0 +1,35 @@
+/**公共属性*/
+import { createContext, useContext } from 'react';
+import type { LayoutFormItemProps } from '../layout/layout.formItem';
+export interface AttrsOptions {
+  /**列数据*/
+  colCount?: number;
+  /**规则校验失败错误提示位置*/
+  errorLayout?: LayoutFormItemProps['errorLayout'];
+  /**label显示模式*/
+  labelMode?: LayoutFormItemProps['labelMode'];
+  /**是否显示label后的冒号*/
+  showColon?: boolean;
+  /**表单项 className*/
+  formItemClassName?: string;
+  /**表单项 style*/
+  formItemStyle?: React.CSSProperties;
+  /**表单项 label  className*/
+  formItemLabelClassName?: string;
+  /**表单项 label  style*/
+  formItemLabelStyle?: React.CSSProperties;
+  /**输入框底部边框*/
+  inputBordered?: boolean;
+}
+
+/**公共属性 Context */
+export const AttrsContext = createContext<AttrsOptions>({
+  colCount: 4,
+  errorLayout: 'left-bottom',
+  labelMode: 'top',
+  showColon: true,
+  inputBordered: true,
+});
+
+/**子项中获取公共属性*/
+export const useAttrs = () => useContext(AttrsContext);

package/src/hooks/useForm.ts

@@ -0,0 +1,23 @@
+import { FormInstanceBase } from '@carefrees/form-utils';
+import { createContext, useContext, useRef } from 'react';
+
+/**表单实例 Context */
+export const FormInstanceContext = createContext(new FormInstanceBase());
+
+/**子项中获取表单实例*/
+export function useFormInstance<T = any>() {
+  return useContext<FormInstanceBase<T>>(FormInstanceContext);
+}
+
+/**初始化表单实例*/
+export function useForm<T = any>(form?: FormInstanceBase<T>) {
+  const ref = useRef<FormInstanceBase<T>>();
+  if (!ref.current) {
+    if (form) {
+      ref.current = form;
+    } else {
+      ref.current = new FormInstanceBase<T>();
+    }
+  }
+  return ref.current;
+}

package/src/hooks/useFormItem.ts

@@ -0,0 +1,21 @@
+import { FormItemInstanceBase } from '@carefrees/form-utils';
+import { createContext, useContext, useRef } from 'react';
+
+/**表单项实例 Context */
+export const FormItemInstanceContext = createContext(new FormItemInstanceBase());
+
+/**子项中获取表单项实例*/
+export const useFormItemInstance = () => useContext(FormItemInstanceContext);
+
+/**s初始化 表单项实例*/
+export const useFormItem = (formItem?: FormItemInstanceBase) => {
+  const ref = useRef<FormItemInstanceBase>();
+  if (!ref.current) {
+    if (formItem) {
+      ref.current = formItem;
+    } else {
+      ref.current = new FormItemInstanceBase();
+    }
+  }
+  return ref.current;
+};

package/src/hooks/useFormItemParentName.ts

@@ -0,0 +1,49 @@
+import { createContext, useContext, useMemo, createElement } from 'react';
+
+export const FormItemParentNameContext = createContext({ name: '', sort: '' });
+
+export interface FormItemParentNamOptions {
+  /**字段*/
+  name: string;
+  /**排序*/
+  sort?: string;
+  /**是否拼接父级字段*/
+  isJoinParentField?: boolean;
+}
+
+interface FormItemParentNameProviderProps extends Omit<FormItemParentNamOptions, 'isJoinParentField'> {
+  children?: React.ReactNode;
+}
+
+export const FormItemParentNameProvider = (props: FormItemParentNameProviderProps) => {
+  const { name, sort, children } = props;
+  const value = useMemo(() => {
+    return { name, sort };
+  }, [name, sort]);
+  return createElement(FormItemParentNameContext.Provider, { value, children });
+};
+
+/**表单项获取父级字段*/
+export const useFormItemParentName = (options: FormItemParentNamOptions) => {
+  const { isJoinParentField = true, sort, name } = options;
+  const parentItem = useContext(FormItemParentNameContext);
+  const parentName = parentItem.name;
+  const parentSort = parentItem.sort;
+  const newName = useMemo(() => {
+    if (parentName && isJoinParentField) {
+      if (/^\./.test(`${name}`)) {
+        return [parentName, name].filter(Boolean).join('');
+      } else if (name) {
+        return [parentName, '.', name].filter(Boolean).join('');
+      }
+      return [parentName, name].filter(Boolean).join('');
+    }
+    return [name].filter(Boolean).join('');
+  }, [isJoinParentField, name, parentName]);
+  const newSort = useMemo(
+    () => [isJoinParentField ? parentSort : '', sort].filter(Boolean).join('-'),
+    [isJoinParentField, parentSort, sort],
+  );
+
+  return { newName, newSort, parentItem, parentName: parentName };
+};

package/src/hooks/useFormList.ts

@@ -0,0 +1,21 @@
+import { FormListInstanceBase } from '@carefrees/form-utils';
+import { createContext, useContext, useRef } from 'react';
+
+/**表单List实例 Context */
+export const FormListInstanceContext = createContext(new FormListInstanceBase());
+
+/**子项中获取表单List实例*/
+export const useFormListInstance = () => useContext(FormListInstanceContext);
+
+/**初始化 表单List实例*/
+export const useFormList = (formList?: FormListInstanceBase) => {
+  const ref = useRef<FormListInstanceBase>();
+  if (!ref.current) {
+    if (formList) {
+      ref.current = formList;
+    } else {
+      ref.current = new FormListInstanceBase();
+    }
+  }
+  return ref.current;
+};

package/src/hooks/useHtmlFor.ts

@@ -0,0 +1,9 @@
+import { useMemo, useRef } from 'react';
+
+let localId = 0;
+export const useHtmlFor = (suffix: string) => {
+  const count = useRef(localId++);
+  return useMemo(() => {
+    return `carefree-form-item_${count.current.toString(32)}_${suffix}`;
+  }, [count.current, suffix]);
+};

package/src/hooks/useMultipleForm.ts

@@ -0,0 +1,36 @@
+import { MultipleInstanceBase } from '@carefrees/form-utils';
+import { createContext, useContext, useRef, createElement } from 'react';
+
+/**多表单收集 Context */
+export const MultipleFormInstanceContext = createContext(new MultipleInstanceBase());
+
+/**子项中获取 多表单收集 实例*/
+export const useMultipleFormInstance = () => useContext(MultipleFormInstanceContext);
+
+/**初始化 多表单收集 实例*/
+export const useMultipleForm = (multipleForm?: MultipleInstanceBase) => {
+  const ref = useRef<MultipleInstanceBase>();
+  if (!ref.current) {
+    if (multipleForm) {
+      ref.current = multipleForm;
+    } else {
+      ref.current = new MultipleInstanceBase();
+    }
+  }
+  return ref.current;
+};
+
+export interface MultipleFormProviderProps {
+  children: React.ReactNode;
+  multipleForm?: MultipleInstanceBase;
+}
+
+/**多表单收集 Provider */
+export const MultipleFormProvider = (props: MultipleFormProviderProps) => {
+  const { children, multipleForm } = props;
+  const multipleFormInstance = useMultipleForm(multipleForm);
+  return createElement(MultipleFormInstanceContext.Provider, {
+    value: multipleFormInstance,
+    children,
+  });
+};

package/src/hooks/useUpdate.ts

@@ -0,0 +1,12 @@
+import { useState, useRef } from 'react';
+
+/**更新页面状态*/
+export const useUpdate = () => {
+  const [, _update] = useState({});
+  /**为了防止 hooks 闭包问题*/
+  const refUpdate = useRef<Function>(() => void 0);
+  refUpdate.current = () => {
+    _update({});
+  };
+  return refUpdate;
+};

package/src/hooks/useWatch.ts

@@ -0,0 +1,61 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { FormInstanceBase } from '@carefrees/form-utils';
+import { useFormInstance } from './useForm';
+import { useFormItem } from './useFormItem';
+
+export class WatchInstanceBase {
+  /**监听字段*/
+  name: string;
+  /**表单实例*/
+  form: FormInstanceBase;
+  /**老值*/
+  oldValue: any;
+  /**更新值*/
+  dispatch: (value: any) => void;
+  /**回调*/
+  callBack?: (value: any, form: FormInstanceBase) => void;
+  /**更新*/
+  updated = () => {
+    // 如果上一次和当前相等，则不进行更新
+    const newValue = this.form.getFieldValue(this.name);
+    if (this.oldValue === newValue) {
+      /**相同不进行更新*/
+      return;
+    }
+    if (this.callBack) {
+      this.callBack(newValue, this.form);
+    } else {
+      this.dispatch(newValue);
+    }
+  };
+}
+
+/**
+ * 字段监听
+ */
+export const useWatch = (
+  name: string,
+  form: FormInstanceBase,
+  callBack?: (value: any, form: FormInstanceBase) => void,
+) => {
+  const formInstance = form || useFormInstance();
+  const [oldValue, setValue] = useState(formInstance.getFieldValue(name));
+  const watch = useRef(new WatchInstanceBase()).current;
+  watch.name = name;
+  watch.oldValue = oldValue;
+  watch.dispatch = setValue;
+  watch.callBack = callBack;
+  watch.form = formInstance;
+
+  const formItemInstance = useFormItem();
+  useMemo(() => formItemInstance.ctor(name), []);
+  formItemInstance.instance = formInstance;
+  formItemInstance.isWatch = true;
+  formItemInstance.updated = watch.updated;
+
+  useEffect(() => {
+    const unMount = formInstance.registerFormItem(formItemInstance);
+    return () => unMount();
+  }, []);
+  return [oldValue, formInstance, watch] as [any, FormInstanceBase, WatchInstanceBase];
+};