npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

auto-form-create

v2.3.2

Published

Auto-generated form react components used in ad material system

Downloads

4

Readme

auto-form-create 表单自动生成组件

NPM

详细文档

介绍

  • 本组件基于React开发,其中包括表单中常用的一些输入控件controls 和字段组fieldsets 可供使用。
  • 表单数据以json对象组织,可自动回填数据。
  • 可根据 json对象数组 自动渲染生成表单,表单中包含校验,并支持一些特殊的动态输入形式。
  • 系统无关性,在多个系统中引用本组件,使用一份json对象数组配置,可以渲染得到同样的表单。可做到一处配置,处处所见。
  • 输入控件Controls字段组Fieldsets 不满足需求时,可以插件形式扩展。

安装

npm install auto-form-create

使用示例

import AutoForm from 'auto-form-create';
import formDesc from './108.json';

ReactDom.render(
    <AutoForm
        data={dataObj}
        onSubmit={(values) => {
          console.log(values);
        }}
        descriptor={formDesc}
    />,
    this.el
);

引入样式:

import 'auto-form-create/assets/index.css';

引入组件中的输入控件

import { Controls } from 'auto-form-create';
const Input = Controls.Input;

引入组件中的字段组

import { Fieldsets } from 'auto-form-create';
const ListFieldset = Fieldsets.ListFieldset;
<link rel="stylesheet" type="text/css" href="//unpkg.com/[email protected]/dist/auto-form-create.min.css">
<script src="//unpkg.com/react/umd/react.production.min.js"></script>
<script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="//unpkg.com/[email protected]/dist/auto-form-create.min.js"></script>

设计方案

image

AutoForm组件通过data属性(json对象)可以回填表单数据json对象, 通过descriptor属性(json对象的数组,每一项对应一个字段)自动渲染生成整个表单, descriptor 的json数组中每一项json对象基本与字段FormField和输入控件的props属性对应上,每一项渲染对应的FormField 和Fieldsets组件。

所有单个表单字段全部抽象为FormField组件,包括字段名,附加说明,值,默认值,值的校验等, FormField组件的子组件为Controls中的输入控件,输入的值通过onChange事件传递值至FormField组件。

Form表单中还会有字段组Fieldsets,这类组件是多个字段的组合,字段组中包含的多个字段可以按输入需求变化,最后字段组的值会按字段组的name收集。 Fieldsets组件以FormField为基础,也可以嵌套Fieldsets组件。

Controls中的组件和Fieldsets中的组件,是可以扩展的,以满足更多的表单输入需求。 扩展开发的Controls 组件和Fieldsets 组件,添加至 Controls 和 Fieldsets 中即可用于自动生成。

目录结构

assets        //各组件样式
├── styles
└── index.less
examples     //示例及文档
src          //源码
├── common      
    ├── 
├── controls   //各输入控件
    ├── 
├── fieldsets  //各形式字段组
    ├── 
├── AutoForm.jsx
├── FieldConverter.jsx
├── Form.jsx
├── FormField.jsx
└── index.jsx
test          //单元测试

单元测试

npm test

生成文档和示例

npm run doc

CHANGELOG

changelog