wsc-react-custom-form

贯石科技自用组件

自定义表单

useCustomForm

版本历史

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的反操作）