wsc-react-custom-form v0.4.9
贯石科技自用组件
自定义表单
useCustomForm
版本历史
0.4.92024-4-11
- feat: 针对历史已经出现悬空的组件,只需要增减一次items可自动移除悬空组件
0.4.82024-4-11
- fixbug 修正Descriptions组件items数量变少导致内部容器组件及子组件悬空问题
0.4.72024-4-1
- 小程序组件增加label和wrapper的span、offset属性
- 小程序组件增加required属性
- 小程序组件按钮组件增加margin属性
0.4.62024-03-15
- 基础组件属性配置统一使用Resizer
- 底层使用antd的Date/Time相关组件的,value统一为字符串
- 升级craftjs-0.2.5
- 小程序组件属性配置界面升级
- example项目增加全组件设计和展示页面
0.4.52024-03-11
- fix: 修改FormDatePicker组件,默认有值时表单异常
0.4.42024-02-07
- feat: 修改JSON属性配置组件,使用jsoneditor替换react-json-editor-ajrm
0.4.32023-10-10
- export属性编辑组件以供业务组件使用
0.4.22023-10-07
- 升级craftjs-0.2.0
- 重构属性编辑组件
- 重构基础组件的属性页面
- 参考src/components/selectors/CustomForm/FormInput/formInputSettings.tsx
0.4.12023-07-12
- 基础组件InputNumber/Date/DateTime/Time适配wrapperCol
0.4.02023-07-11
- 升级@craftjs/core为0.2.0-beta.12
- 升级ant版本为4.24.12
- 同时升级底层rc-field-form组件为1.34.1
- 【重要说明】由于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进行本地开发调试
初始化
- yarn global add yalc / npm i yalc -g
- yalc publish 在项目wsc-react-custom-form执行
- yalc add wsc-react-custom-form (在使用wsc-react-custom-form的项目中执行)
更新
- 更新基本组件,注意修改完成后,更新fix版本号,例如【0.3.7.x】,否则后续项目不能正常拉取到新修改的组件
- yalc publish --changed --push 项目wsc-react-custom-form有更新,执行此命令可以编译并推送到使用的所有其他项目
- yalc update wsc-react-custom-form(在使用wsc-react-custom-form的项目中执行,如果上一步使用了--push,这一步可以不用做)
从项目移除
- yalc remove wsc-react-custom-form (在使用wsc-react-custom-form的项目中执行)
- 按照正常流程发布到npm仓库,并按正常流程添加到项目中
从本地仓库完全移除
- yalc installations show wsc-react-custom-form (任何地方都可以运行,查看使用到wsc-react-custom-form的项目)
- yalc installations clean wsc-react-custom-form (publish的反操作)
28 days ago
28 days ago
1 month ago
2 months ago
2 months ago
3 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
10 months ago
7 months ago
7 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago