@carefrees/form-utils-react-taro 0.0.4

package/src/index.tsx

@@ -0,0 +1,102 @@
+import React, { useMemo, useEffect } from 'react';
+import { FormInstanceBase, ValidateErrorEntity } from '@carefrees/form-utils';
+import clx from 'classnames';
+import { FormLayout, FormLayoutProps } from './layout';
+import { useForm, FormInstanceContext } from './hooks/useForm';
+import { useRegisterForm } from './hooks/register/register.form';
+import { Form as TaroForm } from '@tarojs/components';
+import type { CommonEventFunction, FormProps as TaroFormProps } from '@tarojs/components';
+import './styles/index.css';
+export * from './formItem';
+export * from './formList';
+export * from './layout';
+export * from './layout/layout.formItem';
+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/useWatch';
+export * from './hooks/attr/attr.FormItem';
+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 interface FormProps<T = any> extends FormLayoutProps {
+  children?: React.ReactNode;
+  form?: FormInstanceBase;
+  style?: React.CSSProperties;
+  className?: string;
+  layoutClassName?: string;
+  layoutStyle?: React.CSSProperties;
+  /**表单数据*/
+  formData?: any;
+  /**值更新触发*/
+  onValuesChange?: (changedValues: Partial<T>, values: T) => void;
+  /**提交保存 验证成功*/
+  onFinish?: (values: T) => void;
+  /**提交保存 验证失败*/
+  onFinishFailed?: (errorInfo: ValidateErrorEntity<T>) => void;
+  /**隐藏表单项初始值*/
+  hideData?: Record<string, boolean>;
+  /**表单名称*/
+  name?: string;
+  /**隐藏规则校验*/
+  hideRuleData?: Record<string, boolean>;
+  /**自动重置更新formData数据*/
+  isAutoUpdatedFormData?: boolean;
+}
+
+export function Form<T = any>(props: FormProps<T>) {
+  const {
+    children,
+    form,
+    style,
+    className,
+    formData,
+    hideData,
+    hideRuleData,
+    isAutoUpdatedFormData = false,
+    name,
+    onFinish,
+    onFinishFailed,
+    onValuesChange,
+    layoutStyle,
+    layoutClassName,
+    ...rest
+  } = props;
+
+  const formInstance = useForm(form);
+  useRegisterForm(formInstance, name);
+  const cls = useMemo(() => clx('carefrees-form', className), []);
+  useMemo(() => formInstance.ctor(formData, hideData, hideRuleData), []);
+
+  formInstance.onFinish = onFinish;
+  formInstance.onValuesChange = onValuesChange;
+  formInstance.onFinishFailed = onFinishFailed;
+
+  useEffect(() => {
+    if (isAutoUpdatedFormData) {
+      formInstance.resetFieldValue(formData);
+    }
+  }, [isAutoUpdatedFormData, formData]);
+
+  const onSubmit: CommonEventFunction<TaroFormProps.onSubmitEventDetail> = (event) => {
+    event?.preventDefault?.();
+    event?.stopPropagation?.();
+    formInstance.submit();
+  };
+
+  return (
+    <FormInstanceContext.Provider value={formInstance}>
+      <TaroForm className={cls} style={style} onSubmit={onSubmit}>
+        <FormLayout {...rest} className={layoutClassName} style={layoutStyle}>
+          {children}
+        </FormLayout>
+      </TaroForm>
+    </FormInstanceContext.Provider>
+  );
+}

package/src/layout/index.tsx

@@ -0,0 +1,152 @@
+import React, { Fragment, useMemo, useRef, memo } from 'react';
+import { View, ViewProps } from '@tarojs/components';
+import clx from 'classnames';
+import { AttrsOptions, AttrsContext, useAttrs } from '../hooks/useAttrs';
+export interface FormLayoutProps extends AttrsOptions {
+  /**标题*/
+  title?: React.ReactNode;
+  /**额外内容*/
+  extra?: React.ReactNode;
+  /**内容*/
+  children?: React.ReactNode;
+  /**是否占据整行*/
+  isAllColSpan?: boolean;
+  className?: string;
+  /**头部ClassName*/
+  headerClassName?: string;
+  /**内容ClassName*/
+  bodyClassName?: string;
+  style?: React.CSSProperties;
+  /**头部样式*/
+  headerStyle?: React.CSSProperties;
+  /**内容样式*/
+  bodyStyle?: React.CSSProperties;
+  /**是否添加边框*/
+  bordered?: boolean;
+  /**列数据*/
+  colCount?: number;
+  /**
+   * @description gap 属性是用来设置网格行与列之间的间隙，该属性是row-gap and column-gap的简写形式。
+   */
+  gap?: string | number;
+}
+
+const preCls = 'carefrees-form-layout';
+
+/**布局组件*/
+export const FormLayout = memo((props: FormLayoutProps) => {
+  const {
+    colCount: p_colCount = 4,
+    errorLayout: p_errorLayout = 'left-bottom',
+    labelMode: p_labelMode = 'left',
+    showColon: p_showColon = true,
+    formItemClassName: p_formItemClassName,
+    formItemStyle: p_formItemStyle,
+    formItemLabelClassName: p_formItemLabelClassName,
+    formItemLabelStyle: p_formItemLabelStyle,
+  } = useAttrs();
+  const {
+    colCount = p_colCount,
+    title,
+    extra,
+    children,
+    isAllColSpan,
+    className,
+    headerClassName,
+    bodyClassName,
+    style,
+    headerStyle,
+    bodyStyle,
+    errorLayout = p_errorLayout,
+    labelMode = p_labelMode,
+    showColon = p_showColon,
+    formItemClassName = p_formItemClassName,
+    formItemStyle = p_formItemStyle,
+    formItemLabelClassName = p_formItemLabelClassName,
+    formItemLabelStyle = p_formItemLabelStyle,
+    bordered = false,
+    gap,
+  } = props;
+  const propsRef = useRef(props);
+  propsRef.current = props;
+
+  const cls = useMemo(
+    () =>
+      clx(preCls, className, {
+        'all-colspan': isAllColSpan,
+        bordered: bordered,
+      }),
+    [className],
+  );
+
+  const bodyCls = useMemo(() => clx(`${preCls}-body`, bodyClassName), [bodyClassName]);
+  const headerCls = useMemo(() => clx(`${preCls}-header`, headerClassName), [headerClassName]);
+  const headerTitleCls = useMemo(() => clx(`${preCls}-header-title`), []);
+  const headerExtraCls = useMemo(() => clx(`${preCls}-header-extra`), []);
+
+  const value = useMemo(() => {
+    return {
+      colCount,
+      errorLayout,
+      labelMode,
+      showColon,
+      formItemClassName,
+      formItemStyle,
+      formItemLabelClassName,
+      formItemLabelStyle,
+    };
+  }, [
+    colCount,
+    errorLayout,
+    labelMode,
+    showColon,
+    formItemClassName,
+    formItemStyle,
+    formItemLabelClassName,
+    formItemLabelStyle,
+  ]);
+  const styleBase = useMemo(() => {
+    const css: React.CSSProperties = {};
+    if (typeof gap === 'string') {
+      css.gap = gap;
+    }
+    if (typeof gap === 'number') {
+      css.gap = `${gap}px`;
+    }
+    if (colCount) {
+      css.gridTemplateColumns = `repeat(${colCount}, auto)`;
+    }
+    return css;
+  }, [colCount, gap]);
+
+  return (
+    <AttrsContext.Provider value={value}>
+      <View style={style} className={cls}>
+        {title || extra ? (
+          <View style={headerStyle} className={headerCls}>
+            <View className={headerTitleCls}>{title}</View>
+            <View className={headerExtraCls}>{extra}</View>
+          </View>
+        ) : (
+          <Fragment />
+        )}
+        <View style={{ ...styleBase, ...bodyStyle }} className={bodyCls}>
+          {children}
+        </View>
+      </View>
+    </AttrsContext.Provider>
+  );
+});
+
+/**布局组件 占据一整行*/
+export const FormLayoutRows = (props: ViewProps) => {
+  const { className } = props;
+  const cls = useMemo(
+    () =>
+      clx(preCls, className, {
+        'all-colspan': true,
+      }),
+    [className],
+  );
+  return <View {...props} className={cls} />;
+};

package/src/layout/layout.formItem.tsx

@@ -0,0 +1,152 @@
+import { View, Label } from '@tarojs/components';
+import React, { Fragment, useMemo, memo } from 'react';
+import clx from 'classnames';
+import { useAttrs } from '../hooks/useAttrs';
+
+export interface LayoutFormItemProps {
+  /**规则校验失败错误提示位置*/
+  errorLayout?: 'left-bottom' | 'right-bottom' | 'top-right' | 'top-left';
+  /**必填样式*/
+  required?: boolean;
+  /**label显示模式*/
+  labelMode?: 'left' | 'top' | 'between' | 'hide';
+  /**内容*/
+  children?: React.ReactNode;
+  /**只进行规则样式*/
+  onlyRuleStyle?: boolean;
+  label?: React.ReactNode;
+  /**底部提示内容*/
+  helpText?: React.ReactNode;
+  /**额外内容*/
+  extra?: React.ReactNode;
+  /**是否显示label后的冒号*/
+  showColon?: boolean;
+  /**
+   * 表单项占据列数
+   * @default 1
+   */
+  colSpan?: number;
+  /**
+   * 表单项占据行数
+   * @default 1
+   */
+  rowSpan?: number;
+
+  htmlFor?: string;
+  /**规则验证结果*/
+  validateResult?: {
+    tip: string | (string | undefined)[];
+    isInvalid: boolean;
+  };
+  // 样式部分
+  style?: React.CSSProperties;
+  className?: string;
+  labelStyle?: React.CSSProperties;
+  labelClassName?: string;
+  /**底部边框*/
+  inputBordered?: boolean;
+}
+
+const preCls = 'carefrees-form-item';
+/**布局组件 表单项*/
+export const LayoutFormItem = memo((props: LayoutFormItemProps) => {
+  const {
+    formItemClassName,
+    formItemLabelClassName,
+    formItemLabelStyle,
+    formItemStyle,
+    labelMode: p_labelMode = 'top',
+    errorLayout: p_errorLayout = 'left-bottom',
+    showColon: p_showColon = true,
+    colCount = 1,
+    inputBordered: p_inputBordered = true,
+  } = useAttrs();
+
+  const {
+    children,
+    labelMode = p_labelMode,
+    onlyRuleStyle,
+    label,
+    helpText,
+    extra,
+    showColon = p_showColon,
+    colSpan = 1,
+    rowSpan = 1,
+    validateResult,
+    htmlFor,
+    required,
+    errorLayout = p_errorLayout,
+    style,
+    className,
+    labelClassName,
+    labelStyle,
+    inputBordered = p_inputBordered,
+  } = props;
+  const tip = validateResult?.tip;
+  const isInvalid = !!validateResult?.isInvalid;
+  const _errorLayout = labelMode === 'between' ? 'right-bottom' : errorLayout;
+
+  const cls = useMemo(() => clx(preCls, className, formItemClassName, { 'dx-invalid': isInvalid }), [isInvalid]);
+  const containerCls = useMemo(() => clx(`${preCls}-container`, { [`${labelMode}`]: !!labelMode }), [labelMode]);
+  const labelCls = useMemo(
+    () =>
+      clx(`${preCls}-label`, {
+        required: required,
+        'show-colon': showColon && (labelMode === 'left' || labelMode === 'between'),
+      }),
+    [labelMode, required, showColon],
+  );
+
+  const labelWarpCls = useMemo(
+    () => clx(`${preCls}-label-warp`, labelClassName, formItemLabelClassName),
+    [labelClassName, formItemLabelClassName],
+  );
+
+  const inputCls = useMemo(
+    () =>
+      clx(`${preCls}-body-input`, {
+        'input-bordered': inputBordered,
+      }),
+    [inputBordered],
+  );
+
+  const errorCls = useMemo(() => clx(`${preCls}-body-error`, { [_errorLayout]: !!_errorLayout }), [_errorLayout]);
+  const _isLabel = useMemo(() => label && labelMode !== 'hide', [label, labelMode]);
+
+  const styleBase = useMemo(() => {
+    const css: React.CSSProperties = {};
+    if (onlyRuleStyle) {
+      css.padding = '0px';
+    }
+    if (colSpan) {
+      const end = colCount > colSpan ? colSpan : colCount;
+      css.gridColumnEnd = `span ${end}`;
+    }
+    if (rowSpan) {
+      css.gridRowEnd = `span ${rowSpan}`;
+    }
+    return css;
+  }, [onlyRuleStyle, colSpan, rowSpan, colCount]);
+
+  return (
+    <View style={{ ...formItemStyle, ...styleBase, ...style }} className={cls}>
+      <View className={containerCls}>
+        {_isLabel ? (
+          <View style={{ ...formItemLabelStyle, ...labelStyle }} className={labelWarpCls}>
+            <Label for={htmlFor} className={labelCls}>
+              {label}
+            </Label>
+          </View>
+        ) : (
+          <Fragment />
+        )}
+        <View className={`${preCls}-body`}>
+          <View className={inputCls}>{children}</View>
+          {helpText ? <View className={`${preCls}-body-help`}>{helpText}</View> : <Fragment />}
+          {isInvalid ? <View className={errorCls}>{tip}</View> : <Fragment />}
+        </View>
+      </View>
+      {extra ? <View className={`${preCls}-extra`}>{extra}</View> : <Fragment />}
+    </View>
+  );
+});

package/src/styles/index.css

@@ -0,0 +1,208 @@
+/* 表单 */
+.carefrees-form {
+  box-sizing: border-box;
+  background-color: #fff;
+  font-size: 14px;
+}
+
+/* 布局 */
+.carefrees-form-layout {
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: 4px;
+  padding-bottom: 8px;
+  position: relative;
+}
+
+.carefrees-form-layout.all-colspan {
+  grid-column: 1 / -1;
+}
+
+.carefrees-form-layout.bordered {
+  border: 1px solid #e0e0e0;
+}
+.carefrees-form-layout.bordered .carefrees-form-layout-header {
+  padding-inline-start: 8px;
+  padding-inline-end: 8px;
+}
+
+.carefrees-form-layout-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+  border-bottom: 1px solid #e0e0e0;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  margin-block-end: 4px;
+  padding-inline-start: 2px;
+  padding-inline-end: 2px;
+  box-sizing: border-box;
+}
+
+.carefrees-form-layout-header-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1d2129;
+  box-sizing: border-box;
+}
+.carefrees-form-layout-header-extra {
+  font-size: 14px;
+  font-weight: 500;
+  color: #1d2129;
+  box-sizing: border-box;
+}
+
+.carefrees-form-layout-body {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(1, auto);
+  gap: 2px;
+  padding-left: 2px;
+  padding-right: 2px;
+  box-sizing: border-box;
+}
+
+/* 表单项 */
+.carefrees-form-item {
+  font-size: 14px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 8px;
+  box-sizing: border-box;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.carefrees-form-item-container {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  box-sizing: border-box;
+}
+.carefrees-form-item-container.left {
+  flex-direction: row;
+  gap: 8px;
+  text-align: left;
+}
+.carefrees-form-item-container.left .carefrees-form-item-label {
+  justify-content: flex-end;
+}
+.carefrees-form-item-container.between {
+  gap: 8px;
+  text-align: left;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.carefrees-form-item-container.between .carefrees-form-item-body,
+.carefrees-form-item-container.between .carefrees-form-item-body-input {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.carefrees-form-item-label-warp {
+  box-sizing: border-box;
+}
+
+.carefrees-form-item-label {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.88);
+  min-height: 1.4rem;
+}
+
+.carefrees-form-item-label.show-colon::after {
+  content: ':';
+  display: inline-block;
+  text-align: center;
+  margin: 0;
+  margin-inline-end: 2px;
+  margin-inline-start: 2px;
+  box-sizing: border-box;
+}
+
+.carefrees-form-item-label.required::before {
+  content: '*';
+  color: red;
+  display: inline-block;
+  margin-inline-end: 4px;
+  box-sizing: border-box;
+}
+
+.carefrees-form-item-body {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  gap: 4px;
+  flex: 1;
+}
+.carefrees-form-item-body-input {
+  box-sizing: border-box;
+  width: 100%;
+  flex: 1;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: row;
+}
+
+.carefrees-form-item-body-input.input-bordered {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.carefrees-form-item-body-help {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.carefrees-form-item-body-error {
+  position: absolute;
+  width: 100%;
+  color: red;
+  top: auto;
+  left: 0;
+  right: 0;
+  bottom: -16px;
+  padding-top: 2px;
+  font-size: 12px;
+  box-sizing: border-box;
+  z-index: 10;
+  pointer-events: none;
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+}
+.carefrees-form-item-body-error.right-bottom {
+  justify-content: flex-end;
+  top: auto;
+  left: 0;
+  right: 0;
+  bottom: -16px;
+}
+.carefrees-form-item-body-error.top-left {
+  justify-content: start;
+  top: -16px;
+  left: 0px;
+  right: 0px;
+  bottom: auto;
+}
+.carefrees-form-item-body-error.top-right {
+  justify-content: flex-end;
+  top: -16px;
+  left: 0px;
+  right: 0px;
+  bottom: auto;
+}
+.carefrees-form-item-extra {
+  box-sizing: border-box;
+}