alibaba / x-render Goto Github PK
View Code? Open in Web Editor NEW🚴♀️ 阿里 - 很易用的中后台「表单 / 表格 / 图表」解决方案
Home Page: https://xrender.fun
🚴♀️ 阿里 - 很易用的中后台「表单 / 表格 / 图表」解决方案
Home Page: https://xrender.fun
能否增加cdn ,html文件直接quick start的demo!
对于表单 能否增加 noform 中的 详情和禁用编辑的状态控制属性
老哥1.0版本什么时候上呢 ?
日期组件下拉,仅展示并仅可选年月
demo 复现:
https://alibaba.github.io/form-render/docs/demo/index.html
选择完整例子 -> 一行两列 -> 左右排列
选择表单的 “是否显示颜色选择” 则复现
现在validate 是内部自动校验的,页面一开始显示就会出现校验提示信息,这个感觉不太友好
angularjs 可以用吗?
如果可以是否可提供部分例子 :)
Need typescript definitions when use form-render in typescript projects
希望能够增加umijs中导入WebpackPluginFrTheme的样例。
我使用的是and pro和umijs,我应该如何定义WebpackPluginFrTheme,我尝试在
plugins中直接增加如umi-plugin-pro-bloc的格式,但是会报错。
[
'umi-plugin-pro-block',
{
moveMock: false,
moveService: false,
modifyRequest: true,
autoAddMenu: true,
},
],
[
'webpackPluginFrTheme',
new WebpackPluginFrTheme(),
],
报错如下:
Error: Plugin WebpackPluginFrTheme can't be resolved
在开 issue 前,可以先搜索以下以往的旧 issue,同时至少了解 文档使用,你遇到的问题可能已经有人提了,也可能已经在最新版本中被修正
开源项目的用户和维护者之间并不是甲方和乙方的关系,issue 也不是客服。
在开 issue 的时候,请抱着一种『一起合作来解决这个问题』的心态,同时请尽可能描述清楚,这样效率才会高
单纯的咨询问题请不要通过 issue 的方式来提交,很建议进钉钉群的方式来讨论
=====提交前删除上面说明=====
type值为array的时候 配置的buttons按钮组会默认出现一个新增按钮,有时候我们并不需要这个新增按钮怎么处理?
1、请问日期控件是用的什么?我如何统一设置为使用antd默认的moment组件?
2、关于lable宽度,我如何使用antd中的formLayout属性进行替代?
list列表收缩、展开状态,需要自定义,根据具体需求设置是展开、收缩状态
list列表 “新增”、“复制”按钮独占一行,form里有多条记录时,一屏展示记录太少,需要优化按钮位置
list表有多条记录时,合并状态难以找到自己需要的记录,希望可以定制,list收起后显示的内容
多条记录难以看到总数,难以定位,希望提供列表索引、总记录条数
number类型,设置默认值,不会触发onChange,提示验证不能通过
string类型,设置默认值,不会有这种问题。
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
现在我有个功能需求是比赛报名,但是比赛报名不能超过三人,所以希望添加按钮超过三人可以隐藏,看代码发现目前没办法控制显隐。
https://github.com/alibaba/form-render/blob/master/src/widgets/antd/list.jsx#L133
Describe the solution you'd like
A clear and concise description of what you want to happen.
希望可以控制图示这个按钮的显隐。
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Additional context
Add any other context or screenshots about the feature request here.
Is your feature request related to a problem? Please describe.
看到进度表里面有这个任务卡,想问下当前开始开发了么,目前是否可用,进度如何?如果已经开始开发,在哪儿能看到?如何参与?
Describe the solution you'd like
目前公司项目考虑用form-render做解决方案,还在调研,如果确定采用,可能要开发一套表单可视化的编辑工具给非技术人员使用。
Describe alternatives you've considered
看到官方有排期计划,想了解下
Additional context
暂无
表单在弹出层里时,自动获取光标,会让填写变得简单些
formRender 自动获取光标,第一个表单元素自动获取光标
表单类型type的值目前不支持button按钮吗,这不应该吧。一个表单中包含上传/导入/导出按钮是比较常见的需求啊。如果这都要开发自定义组件的话,会令我感觉很沮丧。
是否考虑支持下Tab界面的样式 - -
能够维护出下面这种数据结构
{
"tabs":[
{
"name":"电影",
"data":[{
"title":"大话西游"
},{
"title":"赌神"
}]
},
{
"name":"电视剧",
"data":[{
"title":"琅琊榜"
},{
"title":"庆余年"
}]
}
]
}
node.js版本 12.0.0
请问下是不支持windows下开发么,12.0.0版本下运行就报错,12.x版本以下可以启动不报错但是9000端口访问不到任何东西
[email protected] start D:\test\form-render
npm run watch & webpack-dev-server --open
[email protected] watch D:\test\form-render
webpack --watch
webpack is watching the files…
#FailureMessage Object: 0000003AE9BFD2C0npm ERR! code ELIFECYCLE
npm ERR! errno 3221225477
npm ERR! [email protected] watch: webpack --watch
npm ERR! Exit status 3221225477
npm ERR!
npm ERR! Failed at the [email protected] watch script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\14814\AppData\Roaming\npm-cache_logs\2019-12-25T15_54_32_911Z-debug.log
i 「wds」: Project is running at http://127.0.0.1:9000/
i 「wds」: webpack output is served from /
i 「wds」: Content not from webpack is served from D:\test\form-render\docs\demo
i 「wdm」: wait until bundle finished: /
#FailureMessage Object: 0000005122EFD930npm ERR! code ELIFECYCLE
npm ERR! errno 3221225477
npm ERR! [email protected] start: npm run watch & webpack-dev-server --open
npm ERR! Exit status 3221225477
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
A与B组件之间联动,A组件变化,去设定B组件的值,这种的话如何去配置呢
实际的效果:
运行直接报错
期待的效果或功能:
正常运行并提示错误信息
现有的联动功能还是有点单薄,无法满足复杂业务的需求。例如:选择某个组件的值后,各种可能的变化,比如更改默认值(身份证输入后,默认输入性别,出生日期等),必填,更改校验规则,更改显示隐藏(目前来说支持),无法避免通过编码的方式来实现定制化需求。
来说说我们之前是怎么实现,看看能不能有些不一样的碰撞。整体思路就是通过编码回调的方式,让使用者自己插入代码。
使用方式:
每个表单我们定义了一个方案Key,你项目中可以在如下目录进行扩展,
在默认实现中采用了高阶函数,去扫描项目下的目录,如果有实现则采用项目下的文件。
blockWrapper的主要实现:
大致流程就是扫描项目下的文件,如果有覆盖就用覆盖后的文件,没有覆盖则使用默认实现。
然后在add_main提供了一些可以扩展的回调函数,供具体的方案去扩展。
例如ready()表单加载完后的方法等等
单元测试时出现问题
git clone https://gitlab.com/oReadyL/testProject.git
yarn
yarn test
实际效果:当formData不包含propsSchema中定义的properties字段时,对应字段的控件会被隐藏;
期待效果:propsSchema中定义的properties字段始终显示,formData仅控制表单项数值,而不影响控件显隐。
从个人理解,formData负责控制表单数值,而显隐应该通过ui选项或者联动控制。
示例:
https://codesandbox.io/s/form-render-9b89e
使用空对象formData时,表单不显示;
若取消render中onChange={this.onChange}注释,表单渲染会调用onChange从而更新formData显示正常。
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Describe the solution you'd like
A clear and concise description of what you want to happen.
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Additional context
Add any other context or screenshots about the feature request here.
First, support Vue in the future?
Second, try uform or noform yet?
Is your feature request related to a problem? Please describe.
form-render seems not support object pattern properties currently. This feature is pretty useful, hope it will be supportted.
Describe the solution you'd like
Object pattern propperties is like this:
{
"type": "object",
"patternProperties": {
"^S_": { "type": "string" },
"^I_": { "type": "integer" }
},
"additionalProperties": false
}
Sometimes you may want to restrict the names of the extra properties, or you may want to say that, given a particular kind of name, the value should match a particular schema. That’s where patternProperties
comes in: it is a new keyword that maps from regular expressions to schemas. If an additional property matches a given regular expression, it must also validate against the corresponding schema.
Hope form-render can support this standard json schema grammer.
https://codesandbox.io/s/form-renderjichudemo-cftio
有个小bug,类似于"ui:hidden": "@formData.allNumber.number1 ==1" 这样的使用,会导致当前组件的输入校验 失效
最新版本与Ant Design 4有兼容问题。
Ant Design 4的Icon修改了写法,导致有Icon的组件会报警告,并且图标无法显示。
如:
Warning: [antd: Button] icon
is using ReactNode instead of string naming in v4.
最好有个小demo
Is your feature request related to a problem? Please describe.
当我在基于该组件的onChange修改我的中心数据,但该组件在初始化时依旧会默认执行onChange,则会导致中心数据会被”无意义修改“,而且我从onChange中无法有效的区分init与change响应。
Describe the solution you'd like
提供一个onInitialize方法,如果onInitialize不为空,则组件对onChange的触发只会在用户操作表单时响应,可以称之为”onChange的严格模式“
Describe alternatives you've considered
如”onChange的严格模式“实现成本以及设计方案不被采纳,可以提供一个strictChange的props,能使其进入”onChange的严格模式“
如何定义日期的输出格式,比如输出成,"YYYY/MM/DD"
在官网例子中demo
选择关于日期的配置里
"date2": {
"title": "日期选择",
"type": "string",
"format": "date",
"ui:options": {
"format": "YYYY/MM/DD"
}
}
BY THE WAY
通用参数中的【format】给人以迷惑,第一眼看,不知道干嘛的。参照【don't make me think】的设计原则,建议使用其他术语,比如【element】,也比较符合现在的数据抽象维度。
v0.5.1
复选框,jsonSchame设置了default,formData也有值,resolve构造出来的formData 是default的,并不是formData的
复现方法
jsonSchema: "{"type":"object","title":"","x-config":{"type":"static"},"properties":{"title":{"type":"string","title":"标题","default":999},"description":{"type":"string","title":"描述"},"guideToFliggyClients":{"type":"array","title":"哪些客户端引导至飞猪","items":{"type":"string"},"enum":["ALIPAY","TAOBAO","ALL"],"enumNames":["支付宝","淘宝","所有非飞猪"],"default":[]}},"titleBackup":"静态数据 - 对象类型示例"}"
formData: {"title":"1","description":"2","guideToFliggyClients":["ALIPAY","TAOBAO"]}
调用resove(jsonSchema, formData) 之后得到的是
{"title":"1","description":"2","guideToFliggyClients":[]}
如题
yarn add form-render 也是报错,提示descriptionList找不到;大小写有问题
"ui:widget": "myListWidget",
,如果FormRender未引入自定义组件,FR会挂掉效果如下:
{
"name": "common-redrain",
"column": 2,
"propsSchema": {
"type": "object",
"properties": {
"styleConfig": {
"title": "皮肤设置",
"description": "",
"ui:widget": "myListWidget",
"type": "array",
"minItems": 1,
"maxItems": 1,
"items": {
"type": "object",
"properties": {
"pageBackground": {
"title": "页面底色",
"description": "",
"type": "string",
"format": "color"
},
"banner": {
"title": "头部banner",
"description": "(尺寸:750x825)",
"type": "string",
"format": "image"
}
}
}
}
}
},
"formData": {
"styleConfig": [
{
"pageBackground": "#ff3c00",
"banner": "https://gw.alicdn.com/tfs/TB1JlPNwVP7gK0jSZFjXXc5aXXa-750-826.jpg"
}
]
}
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.