@carefrees/form-utils-react-hooks 0.0.4

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];
+};

package/src/index.ts

@@ -0,0 +1,13 @@
+export * from './hooks/register/register.FormHideItem';
+export * from './hooks/register/register.FormItem';
+export * from './hooks/register/register.FormList';
+export * from './hooks/register/register.form';
+export * from './hooks/useAttrs';
+export * from './hooks/useForm';
+export * from './hooks/useFormItem';
+export * from './hooks/useFormItemParentName';
+export * from './hooks/useFormList';
+export * from './hooks/useHtmlFor';
+export * from './hooks/useMultipleForm';
+export * from './hooks/useUpdate';
+export * from './hooks/useWatch';