贯石科技自用组件

自定义表单

useCustomForm

版本历史

0.4.18[2025-2-25]

1. FormInput组件可校验正则表达式

0.4.17[2024-11-5]

1. exComponents扩展为支持数组/对象（解决编译时对象名称被压缩问题）

0.4.16[2024-11-5]

1. 增加exComponents控制台输出以便查找问题

0.4.15[2024-9-14]

1. 升级 craftjs-0.2.10
2. MiniFormButton组件增加style属性配置

0.4.14[2024-6-14]

1. 升级 craftjs-0.2.7
2. feat: Input和InputNumber组件name支持点号级联属性取值

0.4.13[2024-5-31]

1. 扩展justifyContent、alignItems属性；
2. 容器增加flex属性；
3. border/margin/padding/radius可同时修改4个属性；
4. 新增ImageViewer组件；

0.4.12[2024-05-31]

1. fix：表格结构发生变化导致节点悬空删除异常问题
2. feat: 增加表格table-loyout配置项

0.4.11[2024-05-29]

1. fix: 表格容器不显示表头时配置宽度失效问题
2. fix: 编辑态FormText移除“数据动态绑定”字样

0.4.10[2024-05-29]

1. feat: 添加表格容器基础组件
2. feat: 编辑JSON编辑框Modal自定义大小

0.4.9[2024-4-11]

1. feat: 针对历史已经出现悬空的组件，只需要增减一次items可自动移除悬空组件

0.4.8[2024-4-11]

1. fixbug 修正Descriptions组件items数量变少导致内部容器组件及子组件悬空问题

0.4.7[2024-4-1]

1. 小程序组件增加label和wrapper的span、offset属性
2. 小程序组件增加required属性
3. 小程序组件按钮组件增加margin属性

0.4.6[2024-03-15]

1. 基础组件属性配置统一使用Resizer
2. 底层使用antd的Date/Time相关组件的，value统一为字符串
3. 升级craftjs-0.2.5
4. 小程序组件属性配置界面升级
5. example项目增加全组件设计和展示页面

0.4.5[2024-03-11]

1. fix: 修改FormDatePicker组件，默认有值时表单异常

0.4.4[2024-02-07]

1. feat: 修改JSON属性配置组件，使用jsoneditor替换react-json-editor-ajrm

0.4.3[2023-10-10]

1. export属性编辑组件以供业务组件使用

0.4.2[2023-10-07]

1. 升级craftjs-0.2.0
2. 重构属性编辑组件
3. 重构基础组件的属性页面
4. 参考src/components/selectors/CustomForm/FormInput/formInputSettings.tsx

0.4.1[2023-07-12]

1. 基础组件InputNumber/Date/DateTime/Time适配wrapperCol

0.4.0[2023-07-11]

1. 升级@craftjs/core为0.2.0-beta.12
2. 升级ant版本为4.24.12
3. 同时升级底层rc-field-form组件为1.34.1
4. 【重要说明】由于rc-field-form组件升级：所有本地基础组件和业务组件中，设置单个表单域的值时，不能使用setFieldsValue，应使用setFieldValue

useEffect(() => {
    //表单值发生变化，反应到组件中
-    let fileds = [];
-    fileds[name] = formdata[name];
-    form.setFieldsValue(fileds);
+    form.setFieldValue(name, formdata[name]);
}, [formdata[name]]);

组件列表

| 组件 | | width | height | color | background |padding | margin | radius | flexDirection | justifyContent | alignItems | name | label | labelSpan | labelOffset | wrapSpan | wrapOffset | shadow | showLabel | display | disabled | fillSpace | rules | itemSettings | fieldSettings | |-----------------|:----:|:----:|:----:|:----:|:----:|:----:|:-------:|:----:|:----:|:----:|:----:|:-----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:| | | Resizer | BaseToolbarDimension | | BaseToolbarColor | |BaseToolbarMarginOrPadding| |BaseToolBarRadius|BaseToolbarFlexLayout||| | FormInput | ✓ | ✓ | ✓ | ✓ | ✓ |✓ |✓ |✓ |✓ |✓ |✓ | ✓ |✓ |✓ |✓ |✓ |✓ |✓ |✓ |✓ |✓ |✓ |✓ |✓ |✓ | | FormInputNumber | ✓ | ✓ | ✓ | ✓ | ✓ |✓ |✓ |✓ |✓ |✓ |✓ | ✓ |✓ |✓ |✓ |✓ |✓ |✓ |✓ |✓ |✓ |✓ |✓ | | | | FormTextArea | ✓ | ✓ | ✓ | ✓ | ✓ |✓ |✓ |✓ |✓ |✓ |✓ | ✓ |✓ |✓ |✓ |✓ |✓ | | ✓ | | ✓ | | ✓ | | | | FormDatePicker | ✓ | ✓ | ✓ | ✓ | ✓ |✓ |✓ |✓ |✓ |✓ |✓ | ✓ |✓ |✓ |✓ |✓ |✓ | | ✓ | | ✓ | | ✓ | | | | FormTimePicker | ✓ | ✓ | ✓ | ✓ | ✓ |✓ |✓ |✓ |✓ |✓ |✓ | ✓ |✓ |✓ |✓ |✓ |✓ | | ✓ | | ✓ | | ✓ | | | | FormDateTimePicker | ✓ | ✓ | ✓ | ✓ | ✓ |✓ |✓ |✓ |✓ |✓ |✓ | ✓ |✓ |✓ |✓ |✓ |✓ | | ✓ | | ✓ | | ✓ | | | | FormRangePicker | ✓ | ✓ | ✓ | ✓ | ✓ |✓ |✓ |✓ |✓ |✓ |✓ | ✓ |✓ |✓ |✓ |✓ |✓ | | ✓ | | ✓ | | ✓ | | | | FormSelect | ✓ | ✓ | ✓ | ✓ | ✓ |✓ |✓ |✓ |✓ |✓ |✓ | ✓ |✓ |✓ |✓ |✓ |✓ | | ✓ | | ✓ | | ✓ | | | | FormUpload | ✓ | ✓ | ✓ | ✓ | ✓ |✓ |✓ |✓ |✓ |✓ |✓ | ✓ |✓ |✓ |✓ |✓ |✓ | | ✓ | | ✓ | | ✓ | | | | FormSwitch | ✓ | ✓ | ✓ | ✓ | ✓ |✓ |✓ |✓ |✓ |✓ |✓ | ✓ |✓ |✓ |✓ |✓ |✓ | | ✓ | | ✓ | | ✓ | | | | FormRadio | ✓ | ✓ | ✓ | ✓ | ✓ |✓ |✓ |✓ |✓ |✓ |✓ | ✓ |✓ |✓ |✓ |✓ |✓ | | ✓ | | ✓ | | ✓ | | | | FormCheckbox | ✓ | ✓ | ✓ | ✓ | ✓ |✓ |✓ |✓ |✓ |✓ |✓ |✓ |✓ |✓ |✓ |✓ |✓ | | ✓ | | ✓ | | ✓ | | | | FormImages | ✓ | ✓ | ✓ | ✓ | ✓ |✓ |✓ |✓ |✓ |✓ |✓ |✓ |✓ |✓ |✓ |✓ |✓ | | ✓ | | | | | | | | FormText | | | | | | | Button | | | | | | | AsyncButton | | | | | |

使用yalc进行本地开发调试

初始化

1. yarn global add yalc / npm i yalc -g
2. yalc publish [在项目wsc-react-custom-form执行]
3. yalc add wsc-react-custom-form （在使用wsc-react-custom-form的项目中执行）

更新

4. 更新基本组件，注意修改完成后，更新fix版本号，例如【0.3.7.x】，否则后续项目不能正常拉取到新修改的组件
5. yalc publish --changed --push [项目wsc-react-custom-form有更新，执行此命令可以编译并推送到使用的所有其他项目]
6. yalc update wsc-react-custom-form（在使用wsc-react-custom-form的项目中执行，如果上一步使用了--push，这一步可以不用做）

从项目移除

7. yalc remove wsc-react-custom-form （在使用wsc-react-custom-form的项目中执行）
8. 按照正常流程发布到npm仓库，并按正常流程添加到项目中

从本地仓库完全移除

9. yalc installations show wsc-react-custom-form （任何地方都可以运行，查看使用到wsc-react-custom-form的项目）
10. yalc installations clean wsc-react-custom-form （publish的反操作）