# react+ts+npm

**Repository Path**: zhanggj3/react-ts-npm

## Basic Information

- **Project Name**: react+ts+npm
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-16
- **Last Updated**: 2021-03-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-ts-npm


习题渲染器（可提交答案）


## 安装
yarn
> yarn add react-ts-npm

npm
> npm i react-ts-npm


## 使用

> 关于习题的 mock 可查看：[mock.ts](./example/src/mock.ts)

只展示
```js
/**
 * 只渲染
 */
import React from 'react';
import Renderer from 'lapuata-renderer';

const App: React.SFC<{}> = () => (
  <div>
    <Renderer schemas={MOCK_SCHEMA} />
  </div>
);
```
可提交答案
```js
/**
 * 可提交
 */
import React, { useCallback } from 'react';
import Renderer from 'react-ts-npm';
import { RenderRef, AnswerItemType } from 'react-ts-npm/dist/types';

const App: React.SFC<{}> = () => {

  const renderer = React.createRef<RenderRef>();

  const handleSubmit = useCallback((answers: AnswerItemType[]) => {
    console.log('answers:::', answers);
  }, []);

  return (
    <div>
      <Renderer
        renderer={renderer}
        schemas={MOCK_SCHEMA}
        onSubmit={handleSubmit}
      />
      <button onClick={() => renderer.current.submit()}>提交</button>
    </div>
  )
}
```

## API

| 参数      | 说明                               | 类型                                  |
|----------|------------------------------------|--------------------------------------|
| renderer | 表单 form 的 ref，可用于触发提交表单   | Ref                                   |
| schemas  | 表单数据，用于渲染表单                | FormSchema[]                          |
| onSubmit | 提交表单的回调                       | Function(data: FormResultType[])      |
|formLayout| 表单布局，可选                       | layoutType                            |



Input：单行输入框

| 公共字段                            | 类型                                  |
| key                                | string 字段键值
| type                               | FormType 表单类型
| label                              | string 表单标签文本
| optional?                          | boolean 是否必填
| rules?                             | any[] 表单校验规则
| dependencies?                      | namePath[] 表单依赖键值
| readOnly?                          | boolean 是否只读
| disabled                           | boolean 是否禁用
| normalize
| colon

| 字段                               | 类型                                  |
|------------------------------------|--------------------------------------|
| allowClear?                        | boolean 是否可清除
| minLength?                         | number 输入值最少
| maxLength?                         | number 输入值最多


textarea：多行文本框

| 字段                               | 类型                                  |
|------------------------------------|--------------------------------------|
| allowClear?                        | boolean 是否可清除
| maxLength?                         | number 输入值最多
| autoSize?                          | boolean | object 自适应内容高度，可设置为 true | false或对象：{ minRows: 2,maxRows:6 }
| bordered?                          | boolean 是否有边框
| showCount?                         | boolean | object 是否展示字数
| countFormatter                     | (count: number, maxLength?: number) => string 指定字数展示的格式


select：选择器

| 字段                               | 类型                                  |
|------------------------------------|--------------------------------------|
| allowClear?                        | boolean 是否可清除
| options?                           | FormTypeOption[] 选项
| bordered?                          | boolean 是否有边框
| mode                               | multiple | tags 多选/标签
| showSearch                         | 使单选模式可搜索


radio：单选框

| 字段                               | 类型                                  |
|------------------------------------|--------------------------------------|
| optionType?                        | default | button radio类型
| options?                           | FormTypeOption[] 选项
| buttonStyle                        | outline | solid 描边/填色


switch：开关

| 字段                               | 类型                                  |
|------------------------------------|--------------------------------------|
| checked?                           | boolean 指定当前是否选中
| checkedChildren?                   | ReactNode 选中时的内容
| unCheckedChildren                  | ReactNode 未选中时的内容


datetime：日期时间

| 字段                               | 类型                                  |
|------------------------------------|--------------------------------------|
| allowClear?                        | boolean 是否可清除
| bordered?                          | boolean 是否有边框
| disabledDate                       | (currentDate: moment) => boolean	不可选择的日期
| mode?                              | time | date | month | year | decade 日期面板的状态
| picker                             | date | week | month | quarter | year 设置选择器类型


image：图片
| 字段 | 类型 |
|------------------------------------|--------------------------------------|
| accept | string 接收的图片类型
| action | string 图片上传的地址
| method | string 上传请求的 method get post
| multiple | bool 是否支持多选
| maxCount | number 上传数量限制
| size | number 单个图片最大 size
| width | string 图片宽度
| height | string 图片高度

file：文件
| 字段 | 类型 |
|------------------------------------|--------------------------------------|
| accept | string 接收的文件类型
| action | string 文件上传的地址
| method | string 上传请求的 method get post
| multiple | bool 是否支持多选
| maxCount | number 上传数量限制
| size | number 单个文件最大 size





表单校验整理
type
1.email 邮箱
2.string 字符串
3.number 数值
4.boolean 布尔
5.url 链接
6.array 数组
7.enum 枚举
{
  type: 'email',
  message: "",
}

{
  required:true,
  message:"",
}

正则表达式
{
  pattern: /^[1]([3-9])[0-9]{9}$/,
  message: "",
}

transform:(value) => Number(value)
whitespace:boolean 仅包含空格则不通过
validateTrigger: onChange / onBlur


自定义
{
  validator: (_, value) =>
    value ? Promise.resolve() : Promise.reject(new Error('Should accept agreement')),
}
({ getFieldValue }) => ({
  validator(_, value) {
    if (!value || getFieldValue('password') === value) {
      return Promise.resolve();
    }
    return Promise.reject(new Error('The two passwords that you entered do not match!'));
  },
}),
问题分析
1.表单级联,表单间的关联-A有，B没有，----------exclude
2.校验规则