@fairys/taro-tools-simple-form-ui 0.0.5

package/src/form/form.item.tsx

@@ -0,0 +1,280 @@
+/**表单项*/
+
+import { MObject } from 'interface';
+import { View } from '@tarojs/components';
+import type { ViewProps } from '@tarojs/components';
+import React, { Fragment, useMemo } from 'react';
+import clsx from 'clsx';
+import {
+  useFairysTaroValtioFormInstanceContextState,
+  FairysTaroValtioFormInstance,
+  useFairysTaroValtioFormInstanceContextHideState,
+} from './instance';
+import { useFairysTaroValtioFormLayoutContext } from './layout';
+
+export interface FairysTaroValtioFormItemProps<T extends MObject<T> = object> extends ViewProps {
+  /**表单项名称*/
+  name: string;
+  /**表单项标签*/
+  label?: string;
+  /**是否使用样式*/
+  noStyle?: boolean;
+  /**传递组件字段*/
+  valuePropName?: string;
+  /**自定义获取值*/
+  getValueFromEvent?: (event: any, form: FairysTaroValtioFormInstance<T>) => any;
+  /**值格式化*/
+  formatValue?: (value: any, form: FairysTaroValtioFormInstance<T>, event: any) => any;
+  /**触发数据更新之后触发（用于数据联动之类的）*/
+  onAfterUpdate?: (value: any, form: FairysTaroValtioFormInstance<T>, event: any) => void;
+  /**事件名称*/
+  trigger?: string;
+  style?: React.CSSProperties;
+  labelClassName?: string;
+  labelStyle?: React.CSSProperties;
+  bodyClassName?: string;
+  bodyStyle?: React.CSSProperties;
+  /**规则校验失败错误提示位置*/
+  errorLayout?: 'left-bottom' | 'right-bottom' | 'top-right' | 'top-left';
+  /**label显示模式*/
+  labelMode?: 'left' | 'top' | 'between';
+  /**额外内容*/
+  extra?: React.ReactNode;
+  /**底部提示内容*/
+  helpText?: React.ReactNode;
+  /**
+   * 表单项占据列数
+   * @default 1
+   */
+  colSpan?: number;
+  /**
+   * 表单项占据行数
+   * @default 1
+   */
+  rowSpan?: number;
+  /**是否必填*/
+  isRequired?: boolean;
+  /**底部显示边框*/
+  bottomBordered?: boolean;
+  /**输入框属性*/
+  attrs?: any;
+}
+
+export function FairysTaroValtioFormItem<T extends MObject<T> = object>(props: FairysTaroValtioFormItemProps<T>) {
+  const [layoutAttrs] = useFairysTaroValtioFormLayoutContext();
+  const colCount = layoutAttrs.colCount || 1;
+  const parent_bottomBordered = layoutAttrs.bottomBordered || true;
+  const parent_errorLayout = layoutAttrs.errorLayout || 'right-bottom';
+  const parent_formItemClassName = layoutAttrs.formItemClassName;
+  const parent_formItemLabelClassName = layoutAttrs.formItemLabelClassName;
+  const parent_formItemLabelStyle = layoutAttrs.formItemLabelStyle;
+  const parent_formItemStyle = layoutAttrs.formItemStyle;
+  const parent_labelMode = layoutAttrs.labelMode || 'between';
+  const {
+    name,
+    label,
+    noStyle,
+    valuePropName = 'value',
+    getValueFromEvent,
+    formatValue,
+    onAfterUpdate,
+    trigger = 'onChange',
+    className,
+    style,
+    labelClassName,
+    labelStyle,
+    bodyClassName,
+    bodyStyle,
+    children,
+    labelMode = parent_labelMode,
+    errorLayout = parent_errorLayout,
+    extra,
+    helpText,
+    colSpan = 1,
+    rowSpan = 1,
+    isRequired: _isRequired,
+    bottomBordered = parent_bottomBordered,
+    attrs = {},
+    ...rest
+  } = props;
+  const [state, errorState, formInstance] = useFairysTaroValtioFormInstanceContextState<T>();
+  const rules = formInstance.rules?.[name];
+  const value = state[name];
+  const error = errorState[name];
+
+  const onValueChange = (event: any) => {
+    let value = event;
+    const target = event?.detail || event?.target;
+    if (typeof getValueFromEvent === 'function') {
+      value = getValueFromEvent(event, formInstance);
+    } else if (event && target && typeof target === 'object' && valuePropName in target) {
+      value = target.valuePropName;
+    }
+    if (typeof formatValue === 'function') {
+      value = formatValue(value, formInstance, event);
+    }
+    formInstance.updated({ [name]: value });
+  };
+  /**基础组件参数*/
+  const baseControl = {
+    ...attrs,
+    name,
+    [valuePropName]: value,
+    [trigger]: onValueChange,
+  };
+
+  /**判断是否必填*/
+  const isRequired = useMemo(() => {
+    if (_isRequired) {
+      return _isRequired;
+    } else if (Array.isArray(rules) && rules.length) {
+      return rules.some((rule) => rule.required);
+    }
+    return false;
+  }, [rules, formInstance]);
+
+  /**校验是否存在错误信息*/
+  const isInvalid = useMemo(() => {
+    if (Array.isArray(error) && error.length) {
+      return true;
+    }
+    return false;
+  }, [error]);
+
+  /**表单项类名*/
+  const item_cls = useMemo(() => {
+    return clsx(
+      'fairys-taro-valtio-form-item fairystaroform__p-[0.2rem] fairystaroform__text-[0.6rem] fairystaroform__relative fairystaroform__flex fairystaroform__flex-col fairystaroform__box-border fairystaroform__break-all',
+      {
+        'fairystaroform__border-b fairystaroform__border-b-solid fairystaroform__border-b-gray-100 ': bottomBordered,
+      },
+      className,
+      parent_formItemClassName,
+    );
+  }, [className, parent_formItemClassName, labelMode, bottomBordered]);
+
+  /**表单项容器类名*/
+  const itemContainer_cls = useMemo(() => {
+    // 默认两端显示
+    return clsx(
+      'fairys-taro-valtio-form-item-container fairystaroform__flex-1 fairystaroform__h-full fairystaroform__flex fairystaroform__box-border',
+      {
+        'fairystaroform__flex-row fairystaroform__items-center fairystaroform__justify-between fairystaroform__gap-[0.4rem]':
+          labelMode === 'between',
+        'fairystaroform__flex-col fairystaroform__gap-[0.2rem]': labelMode === 'top',
+        'fairystaroform__flex-row fairystaroform__gap-[0.4rem]': labelMode === 'left',
+      },
+      labelClassName,
+    );
+  }, [labelClassName, labelMode]);
+
+  /**表单项标签类名*/
+  const itemLabel_cls = useMemo(() => {
+    // 默认两端显示
+    return clsx(
+      'fairys-taro-valtio-form-item-label fairystaroform__text-gray-800 fairystaroform__text-[0.75rem] fairystaroform__min-h-[1.4rem] fairystaroform__flex fairystaroform__items-center fairystaroform__relative fairystaroform__box-border',
+      {
+        'fairystaroform__justify-start': labelMode !== 'left',
+        'fairystaroform__justify-end': labelMode === 'left',
+        required: isRequired,
+      },
+      labelClassName,
+      parent_formItemLabelClassName,
+    );
+  }, [labelClassName, parent_formItemLabelClassName, labelMode, isRequired]);
+
+  /**表单项主体类名*/
+  const itemBody_cls = useMemo(() => {
+    // 默认两端显示
+    return clsx(
+      'fairys-taro-valtio-form-item-body fairystaroform__flex fairystaroform__box-border',
+      {
+        'fairystaroform__flex-row fairystaroform__justify-start': labelMode === 'left',
+        'fairystaroform__flex-row fairystaroform__justify-end': labelMode === 'between' || labelMode === 'top',
+        'fairystaroform__flex-row': labelMode === 'top',
+      },
+      bodyClassName,
+    );
+  }, [bodyClassName, labelMode]);
+
+  // 表单项输入类名
+  const itemInput_cls = useMemo(() => {
+    return clsx(
+      'fairys-taro-valtio-form-item-body fairystaroform__flex fairystaroform__flex-row fairystaroform__flex-1 fairystaroform__box-border',
+      {
+        'fairystaroform__justify-end fairystaroform__text-right': labelMode === 'between',
+        'fairystaroform__justify-start fairystaroform__text-left fairystaroform__items-center': labelMode !== 'between',
+      },
+    );
+  }, [labelMode]);
+
+  /**表单项额外内容类名*/
+  const itemExtra_cls = useMemo(() => {
+    return clsx(
+      'fairys-taro-valtio-form-item-body-extra fairystaroform__box-border fairystaroform__flex fairystaroform__items-center fairystaroform__justify-center',
+    );
+  }, []);
+
+  /**表单项底部提示内容类名*/
+  const itemHelp_cls = useMemo(() => {
+    return clsx(
+      'fairys-taro-valtio-form-item-body-help fairystaroform__text-[0.5rem] fairystaroform__w-full fairystaroform__box-border',
+    );
+  }, []);
+
+  /**表单项错误提示类名*/
+  const itemError_cls = useMemo(() => {
+    return clsx(
+      'fairys-taro-valtio-form-item-body-error fairystaroform__px-[0.2rem] fairystaroform__w-full fairystaroform__flex fairystaroform__flex-row fairystaroform__box-border fairystaroform__text-red fairystaroform__absolute fairystaroform__text-[0.5rem] fairystaroform__z-10',
+      {
+        'fairystaroform__bottom-[-0.7rem] fairystaroform__left-0 fairystaroform__justify-start':
+          errorLayout === 'left-bottom',
+        'fairystaroform__bottom-[-0.7rem] fairystaroform__right-0 fairystaroform__justify-end':
+          errorLayout === 'right-bottom',
+        'fairystaroform__top-[-0.7rem]  fairystaroform__right-0 fairystaroform__justify-end':
+          errorLayout === 'top-right',
+        'fairystaroform__top-[-0.7rem]  fairystaroform__left-0 fairystaroform__justify-start':
+          errorLayout === 'top-left',
+      },
+    );
+  }, [errorLayout]);
+
+  const styleBase = useMemo(() => {
+    const css: React.CSSProperties = {};
+    if (colSpan) {
+      const end = colCount > colSpan ? colSpan : colCount;
+      css.gridColumnEnd = `span ${end}`;
+    }
+    if (rowSpan) {
+      css.gridRowEnd = `span ${rowSpan}`;
+    }
+    return css;
+  }, [colSpan, rowSpan, colCount]);
+
+  return (
+    <View {...rest} className={item_cls} style={{ ...(parent_formItemStyle || {}), ...styleBase, ...(style || {}) }}>
+      <View className={itemContainer_cls}>
+        <View className={itemLabel_cls} style={{ ...(parent_formItemLabelStyle || {}), ...(labelStyle || {}) }}>
+          {label}
+        </View>
+        <View className={itemBody_cls} style={bodyStyle}>
+          <View className={itemInput_cls}>
+            {React.isValidElement(children) ? React.cloneElement(children, { ...baseControl }) : children}
+          </View>
+          {extra ? <View className={itemExtra_cls}>{extra}</View> : <Fragment />}
+        </View>
+      </View>
+      {helpText ? <View className={itemHelp_cls}>{helpText}</View> : <Fragment />}
+      {isInvalid ? <View className={itemError_cls}>{error}</View> : <Fragment />}
+    </View>
+  );
+}
+
+export function FairysTaroValtioFormHideItem<T extends MObject<T> = object>(props: FairysTaroValtioFormItemProps<T>) {
+  const [state] = useFairysTaroValtioFormInstanceContextHideState();
+  const isHide = state[props.name];
+  if (isHide) {
+    return <Fragment />;
+  }
+  return <FairysTaroValtioFormItem<T> {...props} />;
+}

package/src/form/form.tsx

@@ -0,0 +1,54 @@
+import { MObject } from 'interface';
+import {
+  FairysTaroValtioFormInstance,
+  FairysTaroValtioFormInstanceContext,
+  useFairysTaroValtioFormInstance,
+  useFairysTaroValtioFormInstanceContext,
+  useFairysTaroValtioFormInstanceContextState,
+} from './instance';
+import { useMemo, type ReactNode } from 'react';
+import { FairysTaroValtioFormLayout, FairysTaroValtioFormLayoutProps } from './layout';
+import { FairysTaroValtioFormItem, FairysTaroValtioFormHideItem } from './form.item';
+import { FairysTaroValtioFormConfigListItem, FairysTaroValtioFormConfigItem } from './item.config';
+export * from './item.config';
+
+export interface FairysTaroValtioFormProps<T extends MObject<T> = object> extends FairysTaroValtioFormLayoutProps {
+  /**表单实例*/
+  form?: FairysTaroValtioFormInstance<T>;
+  /**子元素*/
+  children: ReactNode;
+  /**表单项规则*/
+  rules?: FairysTaroValtioFormInstance<T>['rules'];
+  /**表单初始值*/
+  formData?: FairysTaroValtioFormInstance<T>['state'];
+  /**表单隐藏状态*/
+  hideState?: FairysTaroValtioFormInstance<T>['hideState'];
+}
+
+export function FairysTaroValtioForm<T extends MObject<T> = object>(props: FairysTaroValtioFormProps<T>) {
+  const { form, children, rules, formData, hideState, ...rest } = props;
+  const formInstance = useFairysTaroValtioFormInstance(form);
+  /**表单规则*/
+  formInstance.rules = rules;
+  /**初始化表单值*/
+  useMemo(() => formInstance.ctor({ formData, hideState }), []);
+  return (
+    <FairysTaroValtioFormInstanceContext.Provider value={formInstance}>
+      <FairysTaroValtioFormLayout {...rest}>{children}</FairysTaroValtioFormLayout>
+    </FairysTaroValtioFormInstanceContext.Provider>
+  );
+}
+/**初始化实例*/
+FairysTaroValtioForm.useForm = useFairysTaroValtioFormInstance;
+/**获取状态*/
+FairysTaroValtioForm.useFormState = useFairysTaroValtioFormInstanceContextState;
+/**获取上下文实例*/
+FairysTaroValtioForm.useFormInstance = useFairysTaroValtioFormInstanceContext;
+/**多个配置项*/
+FairysTaroValtioForm.FormItemListItem = FairysTaroValtioFormConfigListItem;
+/**单个配置项*/
+FairysTaroValtioForm.FormItemConfig = FairysTaroValtioFormConfigItem;
+/**表单项*/
+FairysTaroValtioForm.FormItem = FairysTaroValtioFormItem;
+/**隐藏表单想*/
+FairysTaroValtioForm.FormHideItem = FairysTaroValtioFormHideItem;

package/src/form/instance/index.ts

@@ -0,0 +1,222 @@
+import { MObject } from 'interface';
+import { createContext, useContext, useRef } from 'react';
+import { proxy, ref, snapshot, useSnapshot } from 'valtio';
+import AsyncValidator, { RuleItem, ValidateFieldsError, Values } from 'async-validator';
+import { copy } from 'fast-copy';
+
+/**表单实例*/
+export class FairysTaroValtioFormInstance<T extends MObject<T> = Record<string, any>> {
+  /**状态*/
+  state = proxy<T>({} as T);
+  /**
+   * 错误信息
+   */
+  errorState = proxy<Record<PropertyKey, string[]>>({} as Record<PropertyKey, string[]>);
+  /**隐藏状态*/
+  hideState = proxy<Record<PropertyKey, boolean>>({} as Record<PropertyKey, boolean>);
+  /**初始化表单值*/
+  ctor = (options?: { formData?: Partial<T>; hideState?: Partial<Record<PropertyKey, boolean>> }) => {
+    const { formData, hideState } = options || {};
+    this.state = proxy<T>({} as T);
+    this.errorState = proxy<Record<PropertyKey, string[]>>({} as Record<PropertyKey, string[]>);
+    this.hideState = proxy<Record<PropertyKey, boolean>>({} as Record<PropertyKey, boolean>);
+    if (formData) {
+      this.updated(copy(formData));
+    }
+    if (hideState) {
+      this.updatedHideInfo(copy(hideState));
+    }
+  };
+  /**
+   * 更新数据
+   * @param state 更新数据对象
+   * @param isValidate 是否验证(可选)
+   */
+  updated = <M = T>(state: Partial<M>, isValidate?: boolean) => {
+    const keys = Object.keys(state);
+    for (let index = 0; index < keys.length; index++) {
+      const key = keys[index];
+      this.state[key] = state[key];
+    }
+    if (isValidate) {
+      this.validate(keys, false);
+    }
+  };
+
+  // ===================================================隐藏状态================================================================
+  /**
+   * 更新行数据的隐藏信息
+   * @param objectHideInfo 行数据隐藏信息对象
+   */
+  updatedHideInfo = (objectHideInfo: Record<PropertyKey, boolean>) => {
+    const keys = Object.keys(objectHideInfo);
+    for (let index = 0; index < keys.length; index++) {
+      const field = keys[index];
+      this.hideState[field] = objectHideInfo[field];
+    }
+    return this;
+  };
+  /**
+   * 清理隐藏信息
+   */
+  clearHideInfo = (fields?: PropertyKey[]) => {
+    let _fields = fields;
+    if (!Array.isArray(fields)) {
+      _fields = Object.keys(this.hideState) as PropertyKey[];
+    }
+    for (let index = 0; index < _fields.length; index++) {
+      const field = _fields[index];
+      delete this.hideState[field];
+    }
+    return this;
+  };
+  // ===================================================隐藏状态===================================================================
+
+  // ===================================================错误信息处理================================================================
+  /**
+   * 更新行数据的错误信息
+   * @param objectErrorInfo 行数据错误信息对象
+   */
+  updatedErrorInfo = (objectErrorInfo: Record<PropertyKey, string[]>) => {
+    const keys = Object.keys(objectErrorInfo);
+    for (let index = 0; index < keys.length; index++) {
+      const field = keys[index];
+      this.errorState[field] = objectErrorInfo[field];
+    }
+    return this;
+  };
+  /**
+   * 清理错误信息
+   */
+  clearErrorInfo = (fields?: PropertyKey[]) => {
+    let _fields = fields;
+    if (!Array.isArray(fields)) {
+      _fields = Object.keys(this.errorState) as PropertyKey[];
+    }
+    for (let index = 0; index < _fields.length; index++) {
+      const field = _fields[index];
+      delete this.errorState[field];
+    }
+    return this;
+  };
+  // ===================================================错误信息处理================================================================
+
+  /**
+   * 清理所有数据
+   */
+  clear = () => {
+    this.state = proxy<T>({} as T);
+    this.errorState = proxy<Record<PropertyKey, string[]>>({} as Record<keyof T, string[]>);
+    this.hideState = proxy<Record<PropertyKey, boolean>>({} as Record<keyof T, boolean>);
+  };
+
+  // ===================================================规则处理================================================================
+  /**列规则 */
+  rules: Record<
+    PropertyKey,
+    ((formData: T, instance: FairysTaroValtioFormInstance<T>) => RuleItem[] | Promise<RuleItem[]>) | RuleItem[]
+  > = {};
+  /**规则验证
+   * @param fields 列字段数组(可选)
+   * @param isReturn 是否返回验证结果(可选)
+   */
+  validate = async (fields?: PropertyKey[], isReturn: boolean = true): Promise<ValidateFieldsError | Values> => {
+    let _fields = fields;
+    const _formData = snapshot(this.state) as T;
+    // 没有规则，直接返回数据
+    if (!this.rules) {
+      return Promise.resolve({ ..._formData });
+    }
+    const rules: Record<PropertyKey, RuleItem[]> = {};
+    let isNeedValidate = false;
+    // 没有 fields 值，验证所有
+    if (!fields || (Array.isArray(fields) && fields.length === 0)) {
+      _fields = Object.keys(this.rules);
+    }
+    for (let index = 0; index < _fields.length; index++) {
+      isNeedValidate = true;
+      const element = _fields[index];
+      const rule = this.rules[element];
+      if (typeof rule === 'function') {
+        const _rules = await rule(_formData, this);
+        rules[element] = _rules;
+      } else if (Array.isArray(rule)) {
+        rules[element] = rule;
+      }
+    }
+    if (!isNeedValidate) {
+      console.warn('no rules to validate');
+      return Promise.resolve({ ..._formData });
+    }
+    return new Promise((resolve, reject) => {
+      new AsyncValidator({ ...rules }).validate({ ..._formData }, (errors, fields) => {
+        for (let index = 0; index < _fields.length; index++) {
+          const field = _fields[index];
+          const fidError = Array.isArray(errors) ? errors.filter((item) => item.field === field) : undefined;
+          if (fidError) {
+            this.errorState[field] = ref(fidError.map((item) => item.message || ''));
+          } else {
+            delete this.errorState[field];
+          }
+        }
+        if (isReturn) {
+          if (errors) {
+            reject({ errors, fields });
+          } else {
+            resolve(fields);
+          }
+        }
+      });
+    });
+  };
+}
+
+/**声明实例*/
+export function useFairysTaroValtioFormInstance<T extends MObject<T> = object>(
+  instance?: FairysTaroValtioFormInstance<T>,
+) {
+  const ref = useRef<FairysTaroValtioFormInstance<T>>();
+  if (!ref.current) {
+    if (instance) {
+      ref.current = instance;
+    } else {
+      ref.current = new FairysTaroValtioFormInstance<T>();
+    }
+  }
+  return ref.current;
+}
+
+/**表单实例上下文*/
+export const FairysTaroValtioFormInstanceContext = createContext<FairysTaroValtioFormInstance<any>>(
+  new FairysTaroValtioFormInstance<any>(),
+);
+
+/**表单实例上下文*/
+export function useFairysTaroValtioFormInstanceContext<T extends MObject<T> = object>() {
+  return useContext(FairysTaroValtioFormInstanceContext) as FairysTaroValtioFormInstance<T>;
+}
+
+/**状态取值*/
+export function useFairysTaroValtioFormInstanceContextState<T extends MObject<T> = object>() {
+  const instance = useFairysTaroValtioFormInstanceContext<T>();
+  const state = useSnapshot(instance.state) as T;
+  const errorState = useSnapshot(instance.errorState) as Record<PropertyKey, string[]>;
+  return [state, errorState, instance, (state as any).__defaultValue, errorState.__defaultValue] as [
+    T,
+    Record<PropertyKey, string[]>,
+    FairysTaroValtioFormInstance<T>,
+    any,
+    any,
+  ];
+}
+
+/**隐藏组件状态取值*/
+export function useFairysTaroValtioFormInstanceContextHideState<T extends MObject<T> = object>() {
+  const instance = useFairysTaroValtioFormInstanceContext<T>();
+  const hideState = useSnapshot(instance.hideState) as Record<PropertyKey, boolean>;
+  return [hideState, instance, (hideState as any).__defaultValue] as [
+    Record<PropertyKey, boolean>,
+    FairysTaroValtioFormInstance<T>,
+    any,
+  ];
+}