v0.7.3
This commit is contained in:
Vendored
+233
@@ -0,0 +1,233 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
/**
|
||||
* 执行一段 JS 表达式/函数并跟踪其依赖的表单字段,依赖字段变化时自动重新执行
|
||||
* @param {string} fn 要执行的表达式源码,为空时直接返回 initialValue
|
||||
* @param {*} initialValue 初始值/执行出错时的回退值
|
||||
* @param {Object} [params] 传给表达式的额外参数
|
||||
* @param {Object} [fns] 传给表达式的额外可调用函数
|
||||
* @param {*} [basicForm] 表达式里 getFieldValueForBasicForm 取值用的外层表单实例
|
||||
* @param {string} [resultType] 结果值的目标类型,用于类型转换
|
||||
* @returns {[*, *]} [执行结果(按 resultType 转换后), 执行出错时的错误对象]
|
||||
*/
|
||||
declare function useFnRun(fn: string, initialValue: any, params?: any, fns?: any, basicForm?: any, resultType?: string): [any, any];
|
||||
|
||||
/**
|
||||
* 按表单编码(code)拉取表单结构定义,并把字段列表拆分为可见项(items)与隐藏项(hides)
|
||||
* @param {string} code 表单编码,为空时不发起请求
|
||||
* @returns {{items?: Array<Object>, hides?: Array<Object>, pk?: *, uuid?: string, code?: string, resource?: string, align?: *, cols?: number, rowHeight?: number, marginX?: number, marginY?: number, theme?: string, themeProps?: Object, groups?: Array<Object>, listenChangeFields?: *, listenChangeFieldsFunc?: *}} 表单结构数据,请求完成前为 `{ items: [], hides: [] }`
|
||||
*/
|
||||
declare function useStructure(code: string): {
|
||||
items?: Array<any>;
|
||||
hides?: Array<any>;
|
||||
pk?: any;
|
||||
uuid?: string;
|
||||
code?: string;
|
||||
resource?: string;
|
||||
align?: any;
|
||||
cols?: number;
|
||||
rowHeight?: number;
|
||||
marginX?: number;
|
||||
marginY?: number;
|
||||
theme?: string;
|
||||
themeProps?: any;
|
||||
groups?: Array<any>;
|
||||
listenChangeFields?: any;
|
||||
listenChangeFieldsFunc?: any;
|
||||
};
|
||||
/**
|
||||
* 根据字段的校验配置生成 rc-field-form 的 rules 数组;支持必填、长度限制、正则、自定义校验函数
|
||||
* @param {Object} [config]
|
||||
* @param {number} [config.max=0] 最大长度/值(type 为 'string' 时使用)
|
||||
* @param {number} [config.min=0] 最小长度/值(type 为 'string' 时使用)
|
||||
* @param {'string'|'pattern'|'validator'|''} [config.type=''] 校验类型
|
||||
* @param {string} [config.message] 校验失败提示语
|
||||
* @param {string|RegExp} [config.pattern] type 为 'pattern' 时使用的正则
|
||||
* @param {boolean} [config.required=false] 是否必填
|
||||
* @param {*} [config.validator] type 为 'validator' 时执行的表达式/函数(经 func.exec 执行)
|
||||
* @param {string} fieldName 字段名,传给自定义 validator 表达式
|
||||
* @param {string} fieldType 字段类型('number'|'string'|'array'|'bool'|'json' 等),决定必填校验的 type 及 bool/json 的映射
|
||||
* @returns {Array<Object>} rc-field-form 规则数组
|
||||
*/
|
||||
declare function useRules({ max, min, type, message, pattern, required, validator, }?: {
|
||||
max?: number;
|
||||
min?: number;
|
||||
type?: "string" | "pattern" | "validator" | "";
|
||||
message?: string;
|
||||
pattern?: string | RegExp;
|
||||
required?: boolean;
|
||||
validator?: any;
|
||||
}, fieldName: string, fieldType: string): Array<any>;
|
||||
/**
|
||||
* 按主键(primaryKey)拉取表单初始数据;primaryKey 为空时不请求
|
||||
* @param {string} code 表单编码,用于拼接默认的请求地址 `/api/{code}`
|
||||
* @param {string|number} primaryKey 记录主键,为空时不发起请求
|
||||
* @param {Object} [formSetting] 表单配置
|
||||
* @param {string} [formSetting.initDataUri] 初始化数据的请求地址,默认 `/api/{code}`
|
||||
* @param {string} [formSetting.initDataMethod='GET'] 初始化数据的请求方法
|
||||
* @returns {Object|null} 拉取到的表单数据,请求完成前为 `null`
|
||||
*/
|
||||
declare function useFormData(code: string, primaryKey: string | number, formSetting?: {
|
||||
initDataUri?: string;
|
||||
initDataMethod?: string;
|
||||
}): any | null;
|
||||
/**
|
||||
* 生成提交表单的回调函数;校验通过后按 `__RESOURCE__` 字段值裁剪数据(若存在),经 opt.serialize 序列化后提交
|
||||
* @param {string} code 表单编码,用于拼接默认的请求地址 `/api/{code}`
|
||||
* @param {string|number} primaryKey 记录主键,存在时拼到请求地址后面
|
||||
* @param {Object} [formSetting] 表单配置
|
||||
* @param {string} [formSetting.submitDataUri] 提交数据的请求地址,默认 `/api/{code}`
|
||||
* @param {string} [formSetting.submitDataMethod='POST'] 提交数据的请求方法
|
||||
* @returns {(form: Object, opt?: {serialize?: Function, onSuccess?: Function, onFail?: Function}) => Promise<*>} 提交函数;opt.serialize 用于提交前转换数据,onSuccess/onFail 为成功/失败回调(默认失败时如为校验错误会弹出提示)
|
||||
*/
|
||||
declare function useFormSubmit(code: string, primaryKey: string | number, formSetting?: {
|
||||
submitDataUri?: string;
|
||||
submitDataMethod?: string;
|
||||
}): (form: any, opt?: {
|
||||
serialize?: Function;
|
||||
onSuccess?: Function;
|
||||
onFail?: Function;
|
||||
}) => Promise<any>;
|
||||
/**
|
||||
* 组合 useFormData 与 useFormSubmit:数据拉取到后自动回填表单(否则重置),并返回已绑定 form 的提交函数
|
||||
* @param {Object} form rc-field-form 的表单实例
|
||||
* @param {string} code 表单编码
|
||||
* @param {string|number} primaryKey 记录主键
|
||||
* @param {Object} [formSetting] 表单配置(透传给 useFormData/useFormSubmit)
|
||||
* @returns {(opt?: {serialize?: Function, onSuccess?: Function, onFail?: Function}) => Promise<*>} 已绑定当前 form 的提交函数
|
||||
*/
|
||||
declare function useFormAction(form: any, code: string, primaryKey: string | number, formSetting?: any): (opt?: {
|
||||
serialize?: Function;
|
||||
onSuccess?: Function;
|
||||
onFail?: Function;
|
||||
}) => Promise<any>;
|
||||
/**
|
||||
* 根据 widgetDecorator 表达式动态决定字段实际渲染的控件;
|
||||
* widgetDecorator 执行结果为 subWidgets 的下标时,切换为对应子控件(合并其 props),
|
||||
* 同时暴露 setDisabled/setRequired/getDisabled/getRequired 供 widgetDecorator 内部调用来动态调整禁用/必填状态
|
||||
* @param {string} itemWidget 默认使用的控件(已归一化的 widget 路径)
|
||||
* @param {*} widgetDecorator 决定控件切换的表达式/函数,经 useFnRun 执行,返回值作为 subWidgets 下标
|
||||
* @param {Array<{widget: string, widgetPrefix?: string, props?: Object}>} [subWidgets=[]] 可切换的候选子控件列表
|
||||
* @param {Object} [basicForm={}] 传给 widgetDecorator 执行上下文的表单实例
|
||||
* @returns {[string, Object]} `[实际渲染的控件路径, 当前生效的控件 props]`
|
||||
*/
|
||||
declare function useWidgetDecorator(itemWidget: string, widgetDecorator: any, subWidgets?: Array<{
|
||||
widget: string;
|
||||
widgetPrefix?: string;
|
||||
props?: any;
|
||||
}>, basicForm?: any): [string, any];
|
||||
/**
|
||||
* 把受控的 value/onChange 与 rc-field-form 表单实例双向桥接:外部 value 变化时同步进表单
|
||||
* (仅当与内部最近一次变更不同,避免循环),表单内部变化时回调 onChange;
|
||||
* 同时补全一份兼容 antd Form 的 `__INTERNAL__`/getFieldInstance 等接口(scrollToField/focusField 未实现,仅打印警告)
|
||||
* @param {Object} config
|
||||
* @param {Object} [config.value] 外部受控值,变化时会同步到表单
|
||||
* @param {(allValues: Object) => void} [config.onChange] 表单值变化时的回调
|
||||
* @param {Object} [form=null] 复用的 rc-field-form 表单实例,不传则内部创建
|
||||
* @returns {[Object, (changedValues: Object, allValues: Object) => void]} `[增强后的表单实例, 供 Form onValuesChange 使用的处理函数]`
|
||||
*/
|
||||
declare function useMergedFormValuesChange({ value, onChange }: {
|
||||
value?: any;
|
||||
onChange?: (allValues: any) => void;
|
||||
}, form?: any): [any, (changedValues: any, allValues: any) => void];
|
||||
|
||||
/**
|
||||
* 按 widget 标识异步加载并渲染对应的表单部件,加载完成前不渲染任何内容;
|
||||
* 加载出错时渲染错误信息文本;支持通过 widgetDecorator/subWidgets 在运行时动态切换实际渲染的子控件(见 useWidgetDecorator)
|
||||
* @param {Object} props
|
||||
* @param {string} [props.widget='Input'] 部件标识;以 `@` 或 `blob:` 开头时按原样使用,否则拼接 widgetPrefix 前缀
|
||||
* @param {string} [props.widgetPrefix='@pkg/ff/grid-layout-forms'] widget 非绝对标识时使用的前缀
|
||||
* @param {*} [props.widgetDecorator] 决定控件切换的表达式/函数,详见 useWidgetDecorator
|
||||
* @param {Array<Object>} [props.subWidgets=[]] widgetDecorator 命中时可切换的候选子控件列表
|
||||
* @param {*} [props.basicForm] 表达式求值/字段联动用的外层表单实例
|
||||
*/
|
||||
declare function GridLayoutFormWidget({ widget, widgetPrefix, widgetDecorator, subWidgets, basicForm, ...props }: {
|
||||
widget?: string;
|
||||
widgetPrefix?: string;
|
||||
widgetDecorator?: any;
|
||||
subWidgets?: Array<any>;
|
||||
basicForm?: any;
|
||||
}): undefined;
|
||||
|
||||
/**
|
||||
* 弹窗表单容器:包裹 GridLayoutForm 并附带保存/取消操作按钮,保存时校验并提交表单,
|
||||
* 成功后调用 $close 关闭弹窗;常配合 Popup.modal 或 useButton 的 'grid-layout-form' widgetType 使用
|
||||
* @param {Object} props
|
||||
* @param {Object} [props.$setting] 表单配置(透传给 useFormAction 作为 formSetting),okText/cancelText 可自定义按钮文案
|
||||
* @param {(result?: *) => void} [props.$close] 关闭弹窗的函数,保存成功或点击取消时调用
|
||||
* @param {*} [props.extras] 传给 FFContainer 的额外内容(如头部区域)
|
||||
* @param {string} [props.code] 表单编码,透传给 useFormAction/GridLayoutForm
|
||||
* @param {string|number} [props.primaryKey] 记录主键,透传给 useFormAction/GridLayoutForm
|
||||
*/
|
||||
declare function GridLayoutFormHelper({ $setting, $close, extras, code, primaryKey, ...props }: {
|
||||
$setting?: any;
|
||||
$close?: (result?: any) => void;
|
||||
extras?: any;
|
||||
code?: string;
|
||||
primaryKey?: string | number;
|
||||
}): React.JSX.Element;
|
||||
|
||||
/**
|
||||
* 表单容器组件,按 fields 渲染栅格布局字段并托管一个 rc-field-form 表单;
|
||||
* 支持字段联动(listenChangeFields/listenChangeFieldsFunc)、隐藏字段(hides,内部用 HideField 渲染)、
|
||||
* 以及指定 theme 时委托 GridLayoutFramework 渲染主题外壳
|
||||
* @param {Object} props
|
||||
* @param {string} [props.name] 表单字段容器名
|
||||
* @param {*} [props.form] 外部传入的 rc-field-form 表单实例,不传时内部自建
|
||||
* @param {*} [props.basicForm] 表达式求值/字段联动用的外层表单实例
|
||||
* @param {Object} [props.style] 容器行内样式
|
||||
* @param {string} [props.className] 容器额外 class 名
|
||||
* @param {number} [props.cols=24] 栅格列数
|
||||
* @param {number} [props.rowHeight=16] 栅格行高(px)
|
||||
* @param {[number, number]} [props.itemMargin=[8, 16]] 字段项间距 [横向, 纵向](px)
|
||||
* @param {[number, number]} [props.containerPadding=[0, 0]] 容器内边距 [纵向, 横向](px)
|
||||
* @param {Array} [props.fields=[]] 可见字段配置列表(位置、尺寸、部件类型等)
|
||||
* @param {Array} [props.hides=[]] 隐藏字段配置列表,按 initialValueLanguage 求值后写入对应字段
|
||||
* @param {string|number} [props.primaryKey=0] 记录主键,注入为 `__PRIMARY_KEY__` 字段值
|
||||
* @param {Object} [props.formProps={}] 注入为 `__PROPS__` 字段值的表单级参数
|
||||
* @param {Array} [props.formFields=[]] 额外注入的表单字段(与 formProps/primaryKey 一并作为初始 fields)
|
||||
* @param {Array} [props.listenChangeFields] 触发联动表达式重新求值的字段列表
|
||||
* @param {*} [props.listenChangeFieldsFunc] 字段值变化时执行的联动表达式(经 func.exec 执行)
|
||||
* @param {(changedValues: Object, allValues: Object) => void} [props.onValuesChange] 表单值变化回调,先于联动表达式执行
|
||||
* @param {string} [props.theme] 主题组件标识,指定时通过 GridLayoutFramework 渲染主题外壳
|
||||
* @param {Object} [props.themeProps={}] 传给主题组件的额外参数
|
||||
* @param {Array} [props.groups=[{key:'default',label:'默认'}]] 字段分组配置,用于主题多分组渲染
|
||||
* @param {*} [props.children] 附加渲染在字段项之后的内容
|
||||
*/
|
||||
declare function GridLayoutForm({ name, form: initForm, basicForm, style, className, cols, rowHeight, itemMargin, containerPadding, fields, hides, primaryKey, formProps, formFields, listenChangeFields, listenChangeFieldsFunc, onValuesChange, theme, themeProps, groups, children, ...props }: {
|
||||
name?: string;
|
||||
form?: any;
|
||||
basicForm?: any;
|
||||
style?: any;
|
||||
className?: string;
|
||||
cols?: number;
|
||||
rowHeight?: number;
|
||||
itemMargin?: [number, number];
|
||||
containerPadding?: [number, number];
|
||||
fields?: any[];
|
||||
hides?: any[];
|
||||
primaryKey?: string | number;
|
||||
formProps?: any;
|
||||
formFields?: any[];
|
||||
listenChangeFields?: any[];
|
||||
listenChangeFieldsFunc?: any;
|
||||
onValuesChange?: (changedValues: any, allValues: any) => void;
|
||||
theme?: string;
|
||||
themeProps?: any;
|
||||
groups?: any[];
|
||||
children?: any;
|
||||
}): React.JSX.Element;
|
||||
declare namespace GridLayoutForm {
|
||||
namespace propTypes {
|
||||
let fields: PropTypes.Requireable<any[]>;
|
||||
let hides: PropTypes.Requireable<any[]>;
|
||||
}
|
||||
}
|
||||
declare const _default: ({ code, isPreview, ...props }: {
|
||||
[x: string]: any;
|
||||
code: any;
|
||||
isPreview?: boolean;
|
||||
}) => React.JSX.Element;
|
||||
|
||||
export { GridLayoutForm, GridLayoutFormHelper, GridLayoutFormWidget, _default as default, useFnRun, useFormAction, useFormData, useFormSubmit, useMergedFormValuesChange, useRules, useStructure, useWidgetDecorator };
|
||||
Reference in New Issue
Block a user