GithubHelp home page GithubHelp logo

alibaba / alist Goto Github PK

View Code? Open in Web Editor NEW
980.0 55.0 93.0 63.11 MB

Alibaba Group Unified List Solution.

Home Page: https://alist.wiki

License: MIT License

JavaScript 4.73% TypeScript 95.27%
react form list

alist's Introduction

AList

备注

原有体系下的 NoForm 将不再更新,目前版本仍可继续运行并持续维护。表单场景,推荐使用 Formily

背景

列表是中后台的入口场景,需求的量级与表单相同,但是对于效率和性能的体验则没有那么高,相对来说可定制性和拓展性也相对比较规范。 在 Fusion/Ant-Design 的 Table 已经成为业界事实标准的情况下,且 Formily 表单方案作为搜索区域的不二之选时,通过对这些方案的整合,可以快速实现标准化的列表场景。

同时AList支持 JSON Schema 协议渲染,可通过数据驱动快速开发。

特性

🚀 内置Formily作为搜索区域方案,性能及功能强大

💡 支持 Ant Design/Fusion Next 组件体系

🎨 支持JSON Schema 数据驱动方案

🏅 副作用逻辑独立管理,涵盖各种复杂联动校验逻辑

🌯 支持各种复杂布局方案

安装

使用 Ant Design:

npm install --save antd @alist/antd

使用 Fusion Design:

npm install --save @alifd/next @alist/next

文档

https://alist.wiki/

LICENSE

AList is open source software licensed as MIT.

alist's People

Contributors

johnisontheroad avatar zhoukekestar 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

alist's Issues

ReferenceError: regeneratorRuntime is not defined

Describe the bug
使用noform报错:ReferenceError: regeneratorRuntime is not defined

To Reproduce

  1. yarn add noform
  2. 在myproject/src/views/product/index.js 里实现demo(https://alibaba.github.io/noform/#/zh-CN/docs?md=easy/easy

Expected behavior
正常显示表单

Screenshots
image

Desktop (please complete the following information):
babel相关:
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-plugin-import": "^1.8.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-preset-react-app": "^3.1.1",
"babel-runtime": "6.26.0",

Additional context
在 myproject/node_modules/noform/lib/index.js 里手动引入babel-polyfill 解决问题:
image

当然,在我项目入口手动 require('babel-polyfill') 也可以,但感觉第三方库可以入口引下,或者提示下使用者

数组类型的数据如何处理?

例如我的数据是

{
 list:[1,2,3]
}

目前我的做法是自己写一个ListComponent来实现
noform 对于这种类型的数据如何处理呢?
可否用repeater

[typescript] FormCore 等没有被 export

似乎 d.ts 文件内有很多 interface/type 没有被 export
其中就有 FormCore.

此外 FormCore 的定义中,有很多方法缺失,如: getValues: ()=>{}

期待早日完善 ↖(^ω^)↗

自定义布局

这个项目目前还维护吗,还有怎么自定义布局,默认使用 Table,

How to use NoForm in Ant Design Pro

I use following code to initiate NoForm. But the latest line throw error on runnig.

import antdWrapper from 'noform/dist/wrapper/antd';
import * as antd from 'antd';
const { Select, Button, Input } = antdWrapper(antd);  // Error: antd was undefined.

It works when change import to require method.

const antd = require('antd');  // It's ok 

Would you like give me some suggestion .

core/form scrollToError not work

Describe the bug
手动调用 form.core.scrollToError(),并不能滚动到错误元素

Additional context
component/FormItem.js 有 id 属性的元素,使用的 FormItem id
core/form.js scrollToError 定位元素使用的 id,是 core/item id

两个 id 不一致【某些条件下】,故无法定位,尝试在 component/FormItem.js render 内给任一元素添加 id={itemContext.item.id} 即可修复

image

可否添加错误信息?

描述
在antd中,我对DatePicker传入的值不是moment对象的时候,noForm没有显示值也没有报错

期望
希望报出antd的错误提示
default

Checkbox.Group 表现异常

Antd Checkbox.Group 有自定义布局的功能,在 wrapper 后,这个功能有异常。具体情况如下:

  • 有且只有在 Checkbox.Group 传入 options 属性下有效。但是此时不能使用 Grid 布局。
  • Checkbox.Group 下使用 children 方式输出节点,不管是 Col 还是 Checkbox 都会导致:点选任意一个选择框,所有选择框都会被选中。

代码如下

<Checkbox.Group
    // options={groupData}
>
    {
        {/*<Col>*/}
        groupData && groupData.length > 0 && groupData.map(data => (
            <Checkbox key={data.value} value={data.value}>{data.label}</Checkbox>
        ))
        {/*</Col>*/}
    }
</Checkbox.Group>

select-and-selectall

使用React Hooks的问题

在noform/repeater/factory.js文件中

 async componentWillReceiveProps(nextProps) {
            const { filter, asyncHandler, formConfig } = this.props;
            const manualEvent = this.genManualEvent();
            if (deepEqual(this.props, nextProps) && !manualEvent.type) {
                return;
            }

            if (!deepEqual(asyncHandler, nextProps.asyncHandler)) {
                this.repeaterCore.asyncHandler = nextProps.asyncHandler;
            }
}

问题1:
deepEqual(this.props, nextProps)里面会有react节点,节点会有循环引用的情况, 导致deepEqual死循环, 推荐单独判断需要的字段而不是直接deepEqual
问题2:
使用reacthook之后方法的每次渲染都是一个新的

function OutputForm({ nodes }) {
    const afterSetting = (event: any, repeater: any) => {
       // use 变量nodes
    };

    return (
xxx
<InlineRepeater
    multiple
    asyncHandler={{
          afterSetting,
     }}
>
xxx
  )

这里的afterSetting方法每次渲染都是一个新的,里面引用的变量nodes可能有变化,但是deepEqual并不能识别出来这是一个新的方法, 导致后面的新afterSetting无法正确设置this.repeaterCore.asyncHandler。所以afterSetting触发的一直都是第一次渲染的那一个afterSetting, 而第一次渲染的时候afterSetting方法里面使用的props.nodes是[]空的。

多级表单&表格定义demo

能否提供更复杂点的demo, 多级字段
const formData = { name: 'aaa', ports: [ // 列表 {port: 8080, targetPort: 9090}, {port: 9090, targetPort: 9091}, ], livenessProbe: { exec: [{command: '/bin/sh'}], // exec与http只会出现一个 http: [{port: 9090}], }, img: '' // 异步获取 }

image

How to reset initial value?

[email protected]
[email protected]

...
this.core = new FormCore({
      values: {
        accessNumber: '',
        numberType: 'INNER_CENTREX_TYPE',
        confType: 'ScheduleConference',
        authType: 1,
        shareable: true,
        useWildCard: false
      },
      validateConfig: {
        accessNumber: [
          {
            required: true,
            message: t('rule.access-number.number.required')
          },
          {
            type: 'string',
            pattern: /^[+][0-9]{1,31}$/,
            message: t('rule.access-number.number.pattern')
          }
        ]
      },
      autoValidate: true
    });
...

...
  method = () => {
    this.core.reset(); // I want to initial value but null.
  }
...

Repeater 嵌套 Repeater 时,第二个 repeater 新增按钮,需要点击两次

export const customizeFormType = {
  options: [
    { label: '单选', value: 'Radio' },
    { label: '多选', value: 'Checkbox' },
    { label: '文本', value: 'Input' },
    { label: '数字', value: 'InputNumber' },
    { label: '日期', value: 'DatePicker' },
    { label: '日期区间', value: 'RangePicker' },
  ],
  text: {
    Radio: '单选',
    Checkbox: '多选',
    Input: '文本',
    InputNumber: '数字',
    DatePicker: '日期',
    RangePicker: '日期区间'
  }
};
            <FormItem label="自定义表单" name="customizeForm">
              <InlineRepeater multiple>
                <FormItem label="表单标题" name="title">
                  <Input />
                </FormItem>
                <FormItem label="表单类型" name="type">
                  <Select options={customizeFormType.options} />
                </FormItem>
                <FormItem label="选项" multiple>
                  <FormItem
                    render={(values: any, core: any) => {
                      if (values.type === 'Radio' || values.type === 'Checkbox') {
                        return (
                          <InlineRepeater
                            onChange={(val: any) => {
                              core.setItemValue('options', val)
                            }}
                            value={values.options}
                          >
                            <FormItem label="选项名" name="label">
                              <Input />
                            </FormItem>
                            <FormItem label="选项值" name="value">
                              <Input />
                            </FormItem>
                          </InlineRepeater>
                        )
                      } else {
                        return ''
                      }
                    }}
                  />
                </FormItem>
              </InlineRepeater>
            </FormItem>

子组件未渲染完成时,不能获取formItem的name值

描述

我在子组件(结构大概是<antd.Modal visible={false}><Form /><antd.Modal>)的componentWillMount里创建了FormCore,然后调用了父组件的方法把这个FormCore的引用传给了父组件,用以在父组件中操作form

需求

需要在父组件中获取子组件中所有FormItem的name值,用以根据业务判断是否需要赋值一个初始化的值

问题

因为FormCore.getValues()是不能获取到空值的属性的,所以我改为通过遍历FormCore.children的方式获取name,我在父组件首次设置子组件的antd.Modal的visible为true,并获取core.children时,因为渲染没有完成导致core.children里是空的, 所以我还是没有办法获取表单里的name

现在是通过设置antd.ModalforceRender来解决,但是之前用antdform.getFieldsValue()可以获得没有值的name,比如:{key: null},就不用forceRender了

期望

希望有一个比如formCore.getNames()的方式来获取formItem的name

嵌套属性reset表单崩溃

数据结构如下

image
详细报错如下
image
在获取完form数据后,完调用this.core.reset(),出现上述异常 有几个问题如下:

  1. 如果是嵌套表单,IF条件不满足的属性为什么如何不显示?或者不存在最终的 this.core.getValues()
  2. 结果中, 除了reset方法有其他清空表单数据的方法么?

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.