@fjyueke/arco-mcp 1.0.0

package/metaData/components/form/example/form-item.tsx

@@ -0,0 +1,378 @@
+/* eslint-disable react/no-unused-class-component-methods */
+import React, {
+    forwardRef,
+    PureComponent,
+    ReactNode,
+    Ref,
+    useContext,
+    useImperativeHandle,
+    useRef,
+    useState,
+} from 'react';
+import { cls, Validator, ValidatorType, ValidatorError } from '@arco-design/mobile-utils';
+import { Promise } from 'es6-promise';
+import { FormItemContext } from './form-item-context';
+import { GlobalContext } from '../context-provider';
+import {
+    IFieldError,
+    FieldValue,
+    IFormItemInnerProps,
+    FormItemProps,
+    ValidateStatus,
+    FormItemRef,
+    FormInternalComponentType,
+    ValueChangeType,
+    IFormItemContext,
+} from './type';
+import { getDefaultValueForInterComponent, getErrorAndWarnings, isFieldRequired } from './utils';
+import { DefaultDatePickerLinkedContainer, DefaultPickerLinkedContainer } from './linked-container';
+import { BasicInputProps } from '../input/props';
+import { DatePickerProps } from '../date-picker/type';
+import { PickerProps } from '../picker/type';
+import { SwitchProps } from '../switch';
+import { ImagePickerProps } from '../image-picker/type';
+
+interface IFormItemInnerState {
+    validateStatus: ValidateStatus;
+    errors?: ReactNode[];
+    _touched: boolean;
+}
+
+class FormItemInner extends PureComponent<IFormItemInnerProps, IFormItemInnerState> {
+    // eslint-disable-next-line react/static-property-placement
+    context!: React.ContextType<typeof FormItemContext>;
+
+    destroyField: () => void;
+
+    private _errors: ReactNode[] = [];
+
+    private _touched = false;
+
+    constructor(props: IFormItemInnerProps, context: IFormItemContext) {
+        super(props);
+        this.destroyField = () => {};
+        if (props?.initialValue && props.field) {
+            const { setInitialValue } = context.form.getInternalHooks();
+            setInitialValue(props.field, props.initialValue);
+        }
+    }
+
+    componentDidMount() {
+        const { registerField } = this.context.form.getInternalHooks();
+        this.destroyField = registerField(this.props.field, this);
+    }
+
+    componentWillUnmount() {
+        this.destroyField();
+    }
+
+    onValueChange = (
+        curValue: FieldValue,
+        preValue: any,
+        info?: { changeType: ValueChangeType },
+    ) => {
+        this._touched = true;
+        const { shouldUpdate } = this.props;
+        if (typeof shouldUpdate === 'function') {
+            shouldUpdate({ preValue, curValue }) && this.forceUpdate();
+            return;
+        }
+
+        if (info?.changeType === ValueChangeType.Reset) {
+            this.props.onValidateStatusChange({
+                errors: [],
+                warnings: [],
+                errorTypes: [],
+            });
+            this._errors = [];
+        }
+        this.forceUpdate();
+    };
+
+    getInitialValue = () => {
+        const { children, displayType } = this.props;
+        const { getInitialValue } = this.context.form.getInternalHooks();
+        const childrenType = displayType || children.type?.displayName;
+        // get user-defined initialValue or if not defined
+        return getInitialValue(this.props.field) ?? getDefaultValueForInterComponent(childrenType);
+    };
+
+    getFieldError = () => {
+        return this._errors;
+    };
+
+    isFieldTouched = () => {
+        return this._touched;
+    };
+
+    getAllRuleValidateTriggers = (): string[] => {
+        return (
+            (this.props.rules
+                ?.map(rule => rule.validateTrigger)
+                .flat()
+                .filter(v => !!v) as string[]) || []
+        );
+    };
+
+    validateField = (validateTrigger?: string): Promise<IFieldError> => {
+        const { validateMessages } = this.context;
+        const { getFieldValue } = this.context.form;
+        const { field, rules, onValidateStatusChange } = this.props;
+        const value = getFieldValue(field);
+        // rules: if validateTrigger is not defined, all rules will be validated
+        // if validateTrigger is defined, only rules  with validateTrigger  or  without rule.validateTrigger  will be validated
+        const curRules = validateTrigger
+            ? rules?.filter(rule => {
+                  const triggerList: string[] = ([] as string[]).concat(
+                      rule.validateTrigger || validateTrigger,
+                  );
+                  return triggerList.includes(validateTrigger);
+              })
+            : rules;
+
+        if (curRules?.length && field) {
+            const fieldDom = this.props.getFormItemRef();
+            const fieldValidator = new Validator({ [field]: curRules }, { validateMessages });
+            return new Promise(resolve => {
+                fieldValidator.validate(
+                    { [field]: value },
+                    (errorsMap: Record<string, ValidatorError[]>) => {
+                        const { errors, warnings, errorTypes } = getErrorAndWarnings(
+                            errorsMap?.[field] || [],
+                        );
+                        this._errors = errors;
+                        onValidateStatusChange({
+                            errors: this._errors,
+                            warnings,
+                            errorTypes,
+                        });
+                        return resolve({
+                            errors: this._errors,
+                            warnings,
+                            value,
+                            field,
+                            dom: fieldDom,
+                        });
+                    },
+                );
+            });
+        }
+        return Promise.resolve({ errors: [], warnings: [], value, field, dom: null });
+    };
+
+    setFieldData = (value: FieldValue) => {
+        const { field, trigger = 'onChange' } = this.props;
+        const { innerSetFieldValue } = this.context.form.getInternalHooks();
+        innerSetFieldValue(field, value);
+        this.validateField(trigger);
+    };
+
+    innerTriggerFunctionWithValueFirst = (value, ...args) => {
+        this.setFieldData(value);
+        const { children, trigger = 'onChange' } = this.props;
+        if (trigger && children.props?.[trigger]) {
+            children.props?.[trigger](value, ...args);
+        }
+    };
+
+    innerOnInputFunction = (_, value, ...args) => {
+        this.setFieldData(value);
+        const { children } = this.props;
+        children.props?.onInput?.(_, value, ...args);
+    };
+
+    innerClearFunction = (...args) => {
+        const { children } = this.props;
+        this.setFieldData('');
+        if (children.props?.onClear) {
+            children.props?.onClear(...args);
+        }
+    };
+
+    renderChildren() {
+        const {
+            children,
+            field,
+            trigger = 'onChange',
+            triggerPropsField = 'value',
+            displayType,
+            disabled,
+        } = this.props;
+        const { getFieldValue } = this.context.form;
+        const childrenProps: {
+            disabled?: boolean;
+            error?: ReactNode[];
+        } = {
+            disabled,
+        };
+        // inject validateTriggers of rules
+        this.getAllRuleValidateTriggers().forEach(triggerName => {
+            childrenProps[triggerName] = e => {
+                this.validateField(triggerName);
+                children?.props?.[triggerName]?.(e);
+            };
+        });
+        const childrenType = displayType || children.type?.displayName;
+        switch (childrenType) {
+            case FormInternalComponentType.Input:
+            case FormInternalComponentType.Textarea:
+                (childrenProps as BasicInputProps<HTMLInputElement>).value =
+                    getFieldValue(field) || '';
+                (childrenProps as BasicInputProps<HTMLInputElement>).onInput =
+                    this.innerOnInputFunction;
+                (childrenProps as BasicInputProps<HTMLInputElement>).onClear =
+                    this.innerClearFunction;
+                break;
+            case FormInternalComponentType.DatePicker:
+                (childrenProps as DatePickerProps).currentTs = getFieldValue(field);
+                (childrenProps as DatePickerProps).onChange =
+                    this.innerTriggerFunctionWithValueFirst;
+                (childrenProps as DatePickerProps).renderLinkedContainer =
+                    children.props?.renderLinkedContainer ||
+                    ((ts, types) => <DefaultDatePickerLinkedContainer ts={ts} types={types} />);
+                break;
+            case FormInternalComponentType.Picker:
+                (childrenProps as PickerProps).value = getFieldValue(field) || '';
+                (childrenProps as PickerProps).onChange = this.innerTriggerFunctionWithValueFirst;
+                (childrenProps as PickerProps).renderLinkedContainer =
+                    children.props?.renderLinkedContainer ||
+                    (val => <DefaultPickerLinkedContainer value={val} />);
+                break;
+
+            case FormInternalComponentType.Switch:
+                (childrenProps as SwitchProps).checked = Boolean(getFieldValue(field));
+                (childrenProps as SwitchProps).onChange = this.innerTriggerFunctionWithValueFirst;
+                break;
+            case FormInternalComponentType.ImagePicker:
+                (childrenProps as ImagePickerProps).images = getFieldValue(field);
+                (childrenProps as ImagePickerProps).onChange =
+                    this.innerTriggerFunctionWithValueFirst;
+                break;
+            default:
+                if (triggerPropsField) {
+                    childrenProps[triggerPropsField] = getFieldValue(field);
+                }
+                // inject the validated result
+                childrenProps.error = this._errors;
+                childrenProps[trigger] = this.innerTriggerFunctionWithValueFirst;
+        }
+
+        return React.cloneElement(children, childrenProps);
+    }
+
+    render() {
+        return this.renderChildren();
+    }
+}
+FormItemInner.contextType = FormItemContext;
+
+export { FormItemInner };
+
+export default forwardRef((props: FormItemProps, ref: Ref<FormItemRef>) => {
+    const {
+        label,
+        field,
+        disabled = false,
+        layout: itemLayout,
+        style,
+        extra,
+        requiredIcon,
+        rules,
+        className = '',
+        ...rest
+    } = props;
+    const { prefixCls } = useContext(GlobalContext);
+    const { layout, disabled: propsDisabled } = useContext(FormItemContext);
+    const [errors, setErrors] = useState<ReactNode | null>(null);
+    const [errorTypes, setErrorTypes] = useState<string | null>(null);
+    const [warnings, setWarnings] = useState<ReactNode[]>([]);
+    const formItemRef = useRef<HTMLDivElement | null>(null);
+
+    const onValidateStatusChange = (validateResult: {
+        errors: ReactNode[];
+        warnings: ReactNode[];
+        errorTypes: string[];
+    }) => {
+        const { errors: _errors, warnings: _warnings, errorTypes: _errorTypes } = validateResult;
+        setErrors(_errors.length ? _errors[0] : null);
+        setErrorTypes(_errorTypes.length ? _errorTypes[0] : null);
+        setWarnings(_warnings);
+    };
+    const getFormItemRef = () => {
+        return formItemRef.current;
+    };
+    const fieldDisabled = disabled || propsDisabled;
+
+    const fieldRules = rest?.required
+        ? [{ type: ValidatorType.String, required: true }, ...(rules || [])]
+        : rules;
+    const isRequired = isFieldRequired(rules) || rest?.required;
+
+    useImperativeHandle(ref, () => ({
+        dom: formItemRef.current,
+    }));
+    return (
+        <div
+            className={cls(
+                `${prefixCls}-form-item`,
+                `${prefixCls}-form-item-${itemLayout || layout}`,
+                className,
+                {
+                    disabled: fieldDisabled,
+                    [`${prefixCls}-form-item-error`]: !!errors,
+                    [`${prefixCls}-form-item-warning`]: Boolean(!errors && warnings),
+                    [`${prefixCls}-form-item-error-${errorTypes}`]: errorTypes,
+                },
+            )}
+            style={style}
+            ref={formItemRef}
+        >
+            <div className={cls(`${prefixCls}-form-label-item`)}>
+                {isRequired
+                    ? requiredIcon || (
+                          <span className={cls(`${prefixCls}-form-label-item-required-asterisk`)}>
+                              *
+                          </span>
+                      )
+                    : null}
+                {label}
+            </div>
+            <div className={cls(`${prefixCls}-form-item-control-wrapper`)}>
+                <div className={cls(`${prefixCls}-form-item-control`)}>
+                    <FormItemInner
+                        {...rest}
+                        rules={fieldRules}
+                        disabled={fieldDisabled}
+                        field={field}
+                        onValidateStatusChange={onValidateStatusChange}
+                        getFormItemRef={getFormItemRef}
+                    />
+                </div>
+                {errors && (
+                    <div
+                        className={cls(
+                            `${prefixCls}-form-item-message ${prefixCls}-form-item-error-message`,
+                        )}
+                    >
+                        {errors}
+                    </div>
+                )}
+                {(warnings || []).map((node, key) =>
+                    typeof node === 'string' ? (
+                        <div
+                            className={cls(
+                                `${prefixCls}-form-item-message ${prefixCls}-form-item-warning-message`,
+                            )}
+                            key={key}
+                        >
+                            {node}
+                        </div>
+                    ) : (
+                        node
+                    ),
+                )}
+            </div>
+            {extra}
+        </div>
+    );
+});

package/metaData/components/form/example/index.tsx

@@ -0,0 +1,87 @@
+import { componentWrapper, defaultLocale } from '@arco-design/mobile-utils';
+import React, { useRef, forwardRef, Ref, useImperativeHandle } from 'react';
+import { ContextLayout } from '../context-provider';
+import Item from './form-item';
+import { FormItemContext } from './form-item-context';
+import { FormProps, FormRef, InternalFormInstance } from './type';
+import useForm from './useForm';
+
+export { default as useForm } from './useForm';
+export * from './type';
+
+const Form = forwardRef((props: FormProps, ref: Ref<FormRef>) => {
+    const {
+        className = '',
+        style,
+        layout = 'horizontal',
+        initialValues,
+        form: formInstance,
+        children,
+        onValuesChange,
+        onChange,
+        onSubmit,
+        onSubmitFailed,
+        disabled,
+    } = props;
+    const domRef = useRef<HTMLFormElement | null>(null);
+    const initRef = useRef(false);
+    const [form] = useForm(formInstance);
+    const { setCallbacks, setInitialValues } = (form as InternalFormInstance).getInternalHooks();
+    setCallbacks({
+        onValuesChange,
+        onSubmit,
+        onSubmitFailed,
+        onChange,
+    });
+
+    if (!initRef.current) {
+        setInitialValues(initialValues || {});
+        initRef.current = true;
+    }
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+        form,
+    }));
+
+    const contextValue = {
+        form: form as InternalFormInstance,
+        layout,
+        disabled,
+    };
+
+    return (
+        <ContextLayout>
+            {({ prefixCls, locale = defaultLocale }) => (
+                <form
+                    className={`${prefixCls}-form ${className}`}
+                    style={style}
+                    ref={domRef}
+                    onSubmit={e => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        form.submit();
+                    }}
+                >
+                    <FormItemContext.Provider
+                        value={{ ...contextValue, validateMessages: locale?.Form || {} }}
+                    >
+                        {children}
+                    </FormItemContext.Provider>
+                </form>
+            )}
+        </ContextLayout>
+    );
+});
+
+/**
+ * 表单组件用于集合数据录入
+ * @en Form, Form for collecting data input
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 表单
+ * @name_en Form
+ */
+export default componentWrapper(Form, {
+    Item,
+});

package/metaData/components/form/example/linked-container.tsx

@@ -0,0 +1,66 @@
+import React, { useContext, useMemo } from 'react';
+import { formatDateNumber } from '@arco-design/mobile-utils';
+import { convertTsToDateObj } from '../date-picker/helper';
+import { GlobalContext } from '../context-provider';
+
+export function DefaultPickerLinkedContainer({ value }: { value: (string | number)[] }) {
+    const { prefixCls, locale } = useContext(GlobalContext);
+    const className = `${prefixCls}-form-picker-link-container`;
+    return (
+        <div className={className}>
+            {value && value.length ? (
+                value.join('-')
+            ) : (
+                <span className={`${className}-placeholder`}>{locale?.Form.pickerDefaultHint}</span>
+            )}
+        </div>
+    );
+}
+
+export function DefaultDatePickerLinkedContainer({
+    ts,
+    types,
+}: {
+    ts?: number | [number, number];
+    types: string[];
+}) {
+    const { prefixCls, locale } = useContext(GlobalContext);
+    const className = `${prefixCls}-form-picker-link-container`;
+    const dateTimeStr = useMemo(() => {
+        if (ts === undefined) {
+            return '';
+        }
+        if (typeof ts === 'number') {
+            return formatDateTimeStr(ts, types);
+        }
+        return `${formatDateTimeStr(ts[0], types)} ~ ${formatDateTimeStr(ts[1], types)}`;
+    }, [ts, types]);
+
+    function formatDateTimeStr(timestamp: number, itemTypes: string[]) {
+        const dateObj = convertTsToDateObj(timestamp);
+        const validDateObj: Record<string, string> = Object.keys(dateObj).reduce(
+            (acc, key) => ({
+                ...acc,
+                ...(itemTypes.includes(key) ? { [key]: formatDateNumber(dateObj[key]) } : {}),
+            }),
+            {},
+        );
+        const dateStr = [validDateObj.year, validDateObj.month, validDateObj.date]
+            .filter(v => v)
+            .join('-');
+        const timeStr = [validDateObj.hour, validDateObj.minute, validDateObj.second]
+            .filter(v => v)
+            .join(':');
+        return `${dateStr} ${timeStr}`;
+    }
+
+    return (
+        <div className={className}>
+            {ts ? (
+                dateTimeStr
+            ) : (
+                <span className={`${className}-placeholder`}>{locale?.Form.pickerDefaultHint}</span>
+            )}
+        </div>
+    );
+}

package/metaData/components/grid/doc.md

@@ -0,0 +1,39 @@
+### 布局
+
+# 宫格 Grid
+
+宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|data|传入的数据|GridData\[\]|必填|
+|columns|一行的列数|number|3|
+|border|是否有边框|boolean|false|
+|gutter|格子间的间距|number \| \{ x: number; y: number; \}|0|
+|shape|格子的形状，可选值为 circle|string|"square"|
+|isSliding|溢出时是否支持滑动|boolean|false|
+|direction|格子内容排列的方向，可选值为 horizontal|string|"vertical"|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+
+> GridData
+
+|参数|描述|类型|
+|----------|-------------|------|
+|img|传入图标的资源地址|ReactNode|
+|title|传入的标题文字内容|ReactNode|
+|content|传入的描述文字内容|ReactNode|
+|className|自定义样式|string|
+|onClick|点击后的回调函数|(item: GridData) =\> void|
+|itemStyle|每个格子自定义样式|CSSProperties|
+|renderGrid|自定义单个 grid 的创建函数|(item: GridData, colIndex: number, rowIndex: number) =\> ReactNode|