@carefrees/form-utils-react-taro 0.0.4 → 0.0.6

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

@@ -1,52 +0,0 @@
-/**
- * @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

@@ -1,31 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,35 +0,0 @@
-/**公共属性*/
-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

@@ -1,23 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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];
-};