Giter VIP home page Giter VIP logo

x-render's Introduction

logo

npm GitHub last commit GitHub repo size GitHub closed issues NPM downloads NPM all downloads PRs Welcome

中后台「表单 / 表格 / 图表」开箱即用解决方案

优势

谁在使用?

更多可见使用场景,也很欢迎提交~

支持

  • 如果你觉得 XRender 还不错,可以通过 Star 来表示你的喜欢
  • 在公司或个人项目中使用 XRender,并帮忙推广给伙伴使用

贡献

想贡献代码、解 BUG 或者提高文档可读性?非常欢迎一起参与进来,在提交 PR 前阅读一下 Contributing Guide

Alt

感谢给 XRender 贡献代码的你们:


XRender.mp4

协议

  • 遵循 MIT 协议
  • 请自由地享受和参与开源

互助答疑群

Star 趋势

Star History Chart

x-render's People

Contributors

bytemain avatar charleylla avatar dependabot[bot] avatar elliothux avatar f-loat avatar fateriddle avatar fayeah avatar huchisupot avatar jarod-xie avatar jaw52 avatar killdada avatar leeguooooo avatar leshalv avatar lhbxs avatar moyum avatar mylesshie avatar mzl980425 avatar onepunchx avatar onewmm avatar qiannanxu avatar shinneyou avatar siyi98 avatar turkyden avatar tw93 avatar xiaohao9006 avatar xiezheng-xd avatar xingyuefeng avatar xuetaozhang avatar zhangchen915 avatar zhichaosong avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

x-render's Issues

[Feature]关于WebpackPluginFrTheme

希望能够增加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

[Bug]

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":[]}

[Bug]代码拉取后无法启动

1.formRender 对应的版本 => 0.4.4
2.实际的效果以及期待效果或功能说明

node.js版本 12.0.0
请问下是不支持windows下开发么,12.0.0版本下运行就报错,12.x版本以下可以启动不报错但是9000端口访问不到任何东西

  • 实际的效果:
    图片上传一直失败,直接贴信息了
    PS D:\test\form-render> npm run start

[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…

Fatal error in , line 0

Check failed: U_SUCCESS(status).

#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: /

Fatal error in , line 0

Check failed: U_SUCCESS(status).

#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.
Uploading E91D0A60-0B54-4362-A38F-9B77ED296C2A.png…

  • 期待的效果或功能:
    能够正常启动开发

颜色组件输入框验证问题

颜色组件输入框内,输入16进制颜色,不带”#“时,颜色组件能正常渲染,未提示颜色输入值不合法;但是最终拿到的颜色数据没有”#“导致在浏览器内渲染颜色失败
image

Some question

First, support Vue in the future?
Second, try uform or noform yet?

[Feature] 联动的函数表达式能否支持异步,这样可以实现如三级联动的效果

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.

[Feature]onChange中无法有效的区分init与change响应

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的严格模式“

[Feature] array 中可以控制添加按钮的显隐

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.
image
希望可以控制图示这个按钮的显隐。

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.

[Feature] 可视化编辑器建设?开发中?

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
暂无

validate 应该是手动触发

现在validate 是内部自动校验的,页面一开始显示就会出现校验提示信息,这个感觉不太友好

[Feature] 未引入自定义组件的情况下能兼容显示

1. FR信息
  • formRender 版本号:0.5.0
  • 可复现问题的 codeSandbox 地址:Demo
2.实际的效果以及期待效果或功能说明
  • 实际的效果:对于添加自定义组件的JSON Schema "ui:widget": "myListWidget",,如果FormRender未引入自定义组件,FR会挂掉
  • 期待的效果或功能:在没有引入自定义组件的情况下可以兼容

效果如下:

3. 完整schema.json
{
  "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"
      }
    ]
  }
}

[Feature] 表单类型缺失

表单类型type的值目前不支持button按钮吗,这不应该吧。一个表单中包含上传/导入/导出按钮是比较常见的需求啊。如果这都要开发自定义组件的话,会令我感觉很沮丧。

formData影响表单控件显隐

实际效果:当formData不包含propsSchema中定义的properties字段时,对应字段的控件会被隐藏;
期待效果:propsSchema中定义的properties字段始终显示,formData仅控制表单项数值,而不影响控件显隐。
从个人理解,formData负责控制表单数值,而显隐应该通过ui选项或者联动控制。

示例:
https://codesandbox.io/s/form-render-9b89e
使用空对象formData时,表单不显示;
若取消render中onChange={this.onChange}注释,表单渲染会调用onChange从而更新formData显示正常。

[Feature] Support Object Pattern Properties

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.

[Q]日期控件&formLayout&数字允许为空

1、请问日期控件是用的什么?我如何统一设置为使用antd默认的moment组件?
2、关于lable宽度,我如何使用antd中的formLayout属性进行替代?

关于组件联动扩展的思路

现有的联动功能还是有点单薄,无法满足复杂业务的需求。例如:选择某个组件的值后,各种可能的变化,比如更改默认值(身份证输入后,默认输入性别,出生日期等),必填,更改校验规则,更改显示隐藏(目前来说支持),无法避免通过编码的方式来实现定制化需求。
来说说我们之前是怎么实现,看看能不能有些不一样的碰撞。整体思路就是通过编码回调的方式,让使用者自己插入代码。
使用方式:
image
每个表单我们定义了一个方案Key,你项目中可以在如下目录进行扩展,
image
在默认实现中采用了高阶函数,去扫描项目下的目录,如果有实现则采用项目下的文件。
image
blockWrapper的主要实现:
image
image
大致流程就是扫描项目下的文件,如果有覆盖就用覆盖后的文件,没有覆盖则使用默认实现。
然后在add_main提供了一些可以扩展的回调函数,供具体的方案去扩展。
例如ready()表单加载完后的方法等等

[Bug]AntDesign 4 兼容问题

最新版本与Ant Design 4有兼容问题。
Ant Design 4的Icon修改了写法,导致有Icon的组件会报警告,并且图标无法显示。
如:
Warning: [antd: Button] icon is using ReactNode instead of string naming in v4.

time格式的时间设置默认值无法在组件里面渲染

time格式的时间设置默认值无法再次在组件里面渲染

image

JSON Schema如下:
{
"propsSchema": {
"type": "object",
"properties": {
"string": {
"title": "字符串",
"type": "string"
},
"time": {
"title": "时间(时分秒)",
"type": "string",
"format": "time"
}
}
},
"formData": {
"string": "23",
"time": "11:56:58"
}
}

[Bug] fusion主题 日期组件删除日期后,formDate的值会变成“Invalid date” 应该为“”。antd主题正常

  • 在开 issue 前,可以先搜索以下以往的旧 issue,同时至少了解 文档使用,你遇到的问题可能已经有人提了,也可能已经在最新版本中被修正

  • 开源项目的用户和维护者之间并不是甲方和乙方的关系,issue 也不是客服。
    在开 issue 的时候,请抱着一种『一起合作来解决这个问题』的心态,同时请尽可能描述清楚,这样效率才会高

  • 单纯的咨询问题请不要通过 issue 的方式来提交,很建议进钉钉群的方式来讨论

=====提交前删除上面说明=====

1.formRender 对应的版本,fork codeSandbox 写一个最简可复现的版本,将内容贴到下面
  • formRender 版本号:
  • 可复现问题的 codeSandbox 地址:
2.实际的效果以及期待效果或功能说明
  • 实际的效果:
  • 期待的效果或功能:

通用参数中当Format时dateTime类型的时候如何控制时间的format?

如何定义日期的输出格式,比如输出成,"YYYY/MM/DD"

在官网例子中demo
选择关于日期的配置里

"date2": {
        "title": "日期选择",
        "type": "string",
        "format": "date",
        "ui:options": {
          "format": "YYYY/MM/DD"
        }
      }
  • formRender 版本号:最新版本
  • 可复现问题的 codeSandbox 地址:官网
2.实际的效果以及期待效果或功能说明
  • 实际的效果:

    Screen Shot 2019-11-14 at 3 18 12 PM
  • 期待的效果或功能:
  1. 组件时间显示为2019/11/14
  2. data输出"date2": "2019/11/14",

BY THE WAY
通用参数中的【format】给人以迷惑,第一眼看,不知道干嘛的。参照【don't make me think】的设计原则,建议使用其他术语,比如【element】,也比较符合现在的数据抽象维度。

[Feature]列表配置功能有待升级

  1. list列表收缩、展开状态,需要自定义,根据具体需求设置是展开、收缩状态

  2. list列表 “新增”、“复制”按钮独占一行,form里有多条记录时,一屏展示记录太少,需要优化按钮位置

  3. list表有多条记录时,合并状态难以找到自己需要的记录,希望可以定制,list收起后显示的内容

  4. 多条记录难以看到总数,难以定位,希望提供列表索引、总记录条数

[Feature]再支持下Tab界面就完美了。

是否考虑支持下Tab界面的样式 - -
能够维护出下面这种数据结构

{
    "tabs":[
        {
           "name":"电影",
            "data":[{
                 "title":"大话西游"
            },{
                 "title":"赌神"
            }]
        },
        {
           "name":"电视剧",
            "data":[{
                 "title":"琅琊榜"
            },{
                 "title":"庆余年"
            }]
        }
    ]
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.