Showing
27 changed files
with
4781 additions
and
0 deletions
Too many changes to show.
To preserve performance only 27 of 123 files are displayed.
README.md
0 → 100644
1 | +<div style="display:flex;align-items:center;margin-bottom:24px"> | ||
2 | + <img src="https://img.alicdn.com/tfs/TB17UtINiLaK1RjSZFxXXamPFXa-606-643.png" alt="logo" width="48px"/> | ||
3 | + <h4 style="font-size:30px;font-weight:600;display:inline-block;margin-left:12px">FormRender</h4> | ||
4 | +</div> | ||
5 | +<p style="display:flex;justify-content:space-between;width:440px"> | ||
6 | + <a href="https://www.npmjs.com/package/form-render?_blank"> | ||
7 | + <img alt="npm" src="https://img.shields.io/npm/v/form-render.svg?maxAge=3600&style=flat-square"> | ||
8 | + </a> | ||
9 | + <a href="https://npmjs.org/package/form-render"> | ||
10 | + <img alt="NPM downloads" src="https://img.shields.io/npm/dm/form-render.svg?style=flat-square"> | ||
11 | + </a> | ||
12 | + <a href="https://npmjs.org/package/form-render"> | ||
13 | + <img alt="NPM all downloads" src="https://img.shields.io/npm/dt/form-render.svg?style=flat-square"> | ||
14 | + </a> | ||
15 | + <a> | ||
16 | + <img alt="PRs Welcome" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square"> | ||
17 | + </a> | ||
18 | +</p> | ||
19 | + | ||
20 | +> 一站式中后台**表单解决方案** | ||
21 | + | ||
22 | +## 官网 | ||
23 | + | ||
24 | +<https://x-render.gitee.io/form-render> | ||
25 | + | ||
26 | +FormRender 1.0 是下一代的 `React.js` 表单解决方案。项目从内核级别进行了重写,为了能切实承接日益复杂的表单场景需求。我们的目标是以强大的扩展能力对表单场景 100%的覆盖支持,同时保持开发者能快速上手,并以表单编辑器、插件、自定义组件等一系列周边产品带来极致的开发体验。在开发 1.0 的道路上,我们做了一系列的取舍,详见[0.x - 1.0 迁移文档](https://x-render.gitee.io/form-render/migrate) | ||
27 | + | ||
28 | +<Alert> | ||
29 | + <span>FormRender 已升级到 v1.x 版本,并对外提供中后台开箱即用 XRender 表单 / 表格 / 图表方案,如需使用老版本(v0.x),请点击右上角 <a href="http://x-components.gitee.io/form-render/" target="_blank_"> 旧文档 </a></span> | ||
30 | +</Alert> | ||
31 | + | ||
32 | +## 安装 | ||
33 | + | ||
34 | +FormRender 依赖 ant design,单独使用不要忘记同时安装 `antd` | ||
35 | + | ||
36 | +```shell | ||
37 | +npm i form-render --save | ||
38 | +``` | ||
39 | + | ||
40 | +## 使用 | ||
41 | + | ||
42 | +**最简使用 demo:** | ||
43 | + | ||
44 | +```jsx | ||
45 | +import React from 'react'; | ||
46 | +import { Button } from 'antd'; | ||
47 | +import FormRender, { connectForm } from 'form-render'; | ||
48 | + | ||
49 | +const schema = { | ||
50 | + type: 'object', | ||
51 | + properties: { | ||
52 | + input1: { | ||
53 | + title: '简单输入框', | ||
54 | + type: 'string', | ||
55 | + required: true, | ||
56 | + }, | ||
57 | + select1: { | ||
58 | + title: '单选', | ||
59 | + type: 'string', | ||
60 | + enum: ['a', 'b', 'c'], | ||
61 | + enumNames: ['早', '中', '晚'], | ||
62 | + }, | ||
63 | + }, | ||
64 | +}; | ||
65 | + | ||
66 | +class Demo extends React.Component { | ||
67 | + render() { | ||
68 | + const { form } = this.props; | ||
69 | + return ( | ||
70 | + <div> | ||
71 | + <FormRender form={form} schema={schema} /> | ||
72 | + <Button type="primary" onClick={form.submit}> | ||
73 | + 提交 | ||
74 | + </Button> | ||
75 | + </div> | ||
76 | + ); | ||
77 | + } | ||
78 | +} | ||
79 | + | ||
80 | +export default connectForm(Demo); | ||
81 | +``` | ||
82 | + | ||
83 | +**对于函数组件,FormRender 提供了 `useForm` hooks, 书写更为灵活** | ||
84 | + | ||
85 | +```jsx | ||
86 | +import React from 'react'; | ||
87 | +import { Button } from 'antd'; | ||
88 | +import FormRender, { useForm } from 'form-render'; | ||
89 | + | ||
90 | +const schema = { | ||
91 | + type: 'object', | ||
92 | + properties: { | ||
93 | + input1: { | ||
94 | + title: '简单输入框', | ||
95 | + type: 'string', | ||
96 | + required: true, | ||
97 | + }, | ||
98 | + select1: { | ||
99 | + title: '单选', | ||
100 | + type: 'string', | ||
101 | + enum: ['a', 'b', 'c'], | ||
102 | + enumNames: ['早', '中', '晚'], | ||
103 | + }, | ||
104 | + }, | ||
105 | +}; | ||
106 | + | ||
107 | +const Demo = () => { | ||
108 | + const form = useForm(); | ||
109 | + return ( | ||
110 | + <div> | ||
111 | + <FormRender form={form} schema={schema} /> | ||
112 | + <Button type="primary" onClick={form.submit}> | ||
113 | + 提交 | ||
114 | + </Button> | ||
115 | + </div> | ||
116 | + ); | ||
117 | +}; | ||
118 | + | ||
119 | +export default Demo; | ||
120 | +``` | ||
121 | + | ||
122 | +**从 demo 中我们不难发现 FormRender 的一些设计:** | ||
123 | + | ||
124 | +1. 以 schema 来描述表单展示,提交方式与 antd v4 的方式类似 | ||
125 | +2. schema 以国际标准的 JSON schema 为基础,同时能够方便使用任何 antd 的 props | ||
126 | +3. 通过 bind 字段,我们允许数据的双向绑定,数据展示和真实提交的数据可以根据开发需求不同(例如从服务端接口拿到不规则数据时,也能直接使用) | ||
127 | +4. 可以通过`displayType`,`labelWidth`等字段轻易修改展示 | ||
128 | + | ||
129 | +## 组件 Props | ||
130 | + | ||
131 | +```js | ||
132 | +import Form, { useForm, connectForm } from 'form-render'; | ||
133 | +``` | ||
134 | + | ||
135 | +### \<Form \/> (常用 props) | ||
136 | + | ||
137 | +| 参数 | 描述 | 类型 | 是否必填 | 默认值 | | ||
138 | +| ------------ | ------------------------------------------------------------------------------ | ----------------------------------------------------------------- | -------- | -------- | | ||
139 | +| schema | 描述表单的 schema,详见 | `object` | 是 | | | ||
140 | +| form | `useForm`创建的表单实例,与 Form 一对一绑定 | `FormInstance` | 是 | | | ||
141 | +| onFinish | 提交后的回调,执行 form.submit() 后触发 | `(formData, errorFields: Error[]) => void` | 否 | () => {} | | ||
142 | +| beforeFinish | 在 onFinish 前触发,一般用于外部校验逻辑的回填,入参是个对象,便于扩展 | `({ data, errors, schema, ...rest }) => Error[]|Promise<Error[]>` | 否 | () => {} | | ||
143 | +| displayType | 表单元素与 label 同行 or 分两行展示, inline 则整个展示自然顺排 | `string('column' / 'row' / 'inline')` | 否 | 'column' | | ||
144 | +| widgets | 自定义组件,当内置组件无法满足时使用 | `object` | 否 | {} | | ||
145 | +| watch | 类似于 vue 的 watch 的用法,详见[表单监听 & 回调](/form-render/advanced/watch) | `object` | 否 | {} | | ||
146 | + | ||
147 | +注 1: | ||
148 | + | ||
149 | +### \<Form \/> (不常用 props) | ||
150 | + | ||
151 | +| 参数 | 描述 | 类型 | 默认值 | | ||
152 | +| ---------------- | ---------------------------------------------------------------- | ------------------- | ------ | | ||
153 | +| column | 一行展示多少列 | `number` | 1 | | ||
154 | +| mapping | schema 与组件的映射关系表,当内置的表不满足时使用 | `object` | {} | | ||
155 | +| debug | 开启 debug 模式,时时显示表单内部状态 | `boolean` | false | | ||
156 | +| debugCss | 用于 css 问题的调整,显示 css 布局提示线 | `boolean` | false | | ||
157 | +| locale | 展示语言,目前只支持中文、英文 | `string('cn'/'en')` | 'cn' | | ||
158 | +| configProvider | antd 的 configProvider,配置透传 | `object` | - | | ||
159 | +| debounceInput | 是否开启输入时使用快照模式。仅建议在表单巨大且表达式非常多时开启 | `boolean` | false | | ||
160 | +| validateMessages | 修改默认的校验提示信息。详见下 | `object` | {} | | ||
161 | + | ||
162 | +#### validateMessages | ||
163 | + | ||
164 | +`Form` 为验证提供了[默认的错误提示信息](https://github.com/alibaba/x-render/blob/master/packages/form-render/src/validateMessageCN.js),你可以通过配置 `validateMessages` 属性,修改对应的提示模板。一种常见的使用方式,是配置国际化提示信息: | ||
165 | + | ||
166 | +```js | ||
167 | +const validateMessages = { | ||
168 | + required: '${title}是必选字段', | ||
169 | + // ... | ||
170 | +}; | ||
171 | + | ||
172 | +<Form validateMessages={validateMessages} />; | ||
173 | +``` | ||
174 | + | ||
175 | +目前可以用的转义字段为 `${title}`/`${min}`/`${max}`/`${len}`/`${pattern}`, 如果有更多需求请提 [issue](https://github.com/alibaba/x-render/issues/new/choose) | ||
176 | + | ||
177 | +### useForm / connectForm | ||
178 | + | ||
179 | +`useForm` / `connectForm` 用于创建表单实例,所有对表单的外部操作和回调函数全挂在其生产的实例上,例如表单提交是 `form.submit`。注意 `useForm` 是 hooks,而 `connectForm` 是高阶组件,所以前者只能在函数组件使用,后者可用于 class 组件。两者无其他区别。使用时需要创建实例,并通过 props 挂钩到与其对应的表单上: | ||
180 | + | ||
181 | +```js | ||
182 | +import Form, { useForm } from 'form-render'; | ||
183 | + | ||
184 | +const Demo = () => { | ||
185 | + const form = useForm(); | ||
186 | + return <Form form={form} schema={...} />; | ||
187 | +}; | ||
188 | +``` | ||
189 | + | ||
190 | +```js | ||
191 | +import Form, { connectForm } from 'form-render'; | ||
192 | + | ||
193 | +const Demo = ({ form }) => { | ||
194 | + return <Form form={form} schema={...} />; | ||
195 | +}; | ||
196 | + | ||
197 | +export default connectForm(Demo); | ||
198 | +``` | ||
199 | + | ||
200 | +**form 方法** | ||
201 | + | ||
202 | +| 参数 | 描述 | 类型 | | ||
203 | +| ---------------- | --------------------------------------------------- | ------------------------------------ | | ||
204 | +| submit | 触发提交流程,一般在提交按钮上使用 | `() => void` | | ||
205 | +| resetFields | 清空表单(也会清空一些内置状态,例如校验) | `() => void` | | ||
206 | +| errorFields | 表单校验错误的数组 | `array,[{name, error: []}]` | | ||
207 | +| setErrorFields | 外部手动修改 errorFields 校验信息,用于外部校验回填 | `(error: Error | Error[]) => void` | | ||
208 | +| setValues | 外部手动修改 formData,用于已填写的表单的数据回填 | `(formData: any) => void` | | ||
209 | +| onItemChange | 外部修改指定单个 field 的数据 | `(path: string, value: any) => void` | | ||
210 | +| getValues | 获取表单内部维护的数据 formData | `() => void` | | ||
211 | +| schema | 表单的 schema | object | | ||
212 | +| touchedKeys | 已经触碰过的 field 的数据路径 | `string[]` | | ||
213 | +| removeErrorField | 外部手动删除某一个 path 下所有的校验信息 | `(path: string) => void` | | ||
214 | +| formData | 表单内部维护的数据,建议使用 getValues/setValues | `object` | |
es/form-render-core/src/Watcher.js
0 → 100644
1 | +/* eslint-disable react-hooks/exhaustive-deps */ | ||
2 | +import { useEffect } from 'react'; | ||
3 | +import { getValueByPath } from './utils'; | ||
4 | + | ||
5 | +var Watcher = function Watcher(_ref) { | ||
6 | + var watchKey = _ref.watchKey, | ||
7 | + watch = _ref.watch, | ||
8 | + formData = _ref.formData, | ||
9 | + firstMount = _ref.firstMount; | ||
10 | + var value = getValueByPath(formData, watchKey); | ||
11 | + var watchObj = watch[watchKey]; | ||
12 | + useEffect(function () { | ||
13 | + var runWatcher = function runWatcher() { | ||
14 | + if (typeof watchObj === 'function') { | ||
15 | + try { | ||
16 | + watchObj(value); | ||
17 | + } catch (error) { | ||
18 | + console.log("".concat(watchKey, "\u5BF9\u5E94\u7684watch\u51FD\u6570\u6267\u884C\u62A5\u9519\uFF1A"), error); | ||
19 | + } | ||
20 | + } else if (watchObj && typeof watchObj.handler === 'function') { | ||
21 | + try { | ||
22 | + watchObj.handler(value); | ||
23 | + } catch (error) { | ||
24 | + console.log("".concat(watchKey, "\u5BF9\u5E94\u7684watch\u51FD\u6570\u6267\u884C\u62A5\u9519\uFF1A"), error); | ||
25 | + } | ||
26 | + } | ||
27 | + }; | ||
28 | + | ||
29 | + if (firstMount) { | ||
30 | + var immediate = watchObj && watchObj.immediate; | ||
31 | + | ||
32 | + if (immediate) { | ||
33 | + runWatcher(); | ||
34 | + } | ||
35 | + } else { | ||
36 | + runWatcher(); | ||
37 | + } | ||
38 | + }, [JSON.stringify(value), firstMount]); | ||
39 | + return null; | ||
40 | +}; | ||
41 | + | ||
42 | +export default Watcher; |
es/form-render-core/src/atom.css
0 → 100644
1 | +.fr-container { | ||
2 | + /* Resets */ | ||
3 | + /* | ||
4 | + This will set table to full width and then | ||
5 | + all cells will be equal width | ||
6 | + */ | ||
7 | + /* 1. Fix for Chrome 44 bug. | ||
8 | + * https://code.google.com/p/chromium/issues/detail?id=506893 */ | ||
9 | + /* Height Percentages - Based off of height of parent */ | ||
10 | + /* Screen Height Percentage */ | ||
11 | + /* String Properties */ | ||
12 | + /* Max Width Percentages */ | ||
13 | + /* Max Width Scale */ | ||
14 | + /* Max Width String Properties */ | ||
15 | +} | ||
16 | +.fr-container .outline { | ||
17 | + outline: 1px solid; | ||
18 | +} | ||
19 | +.fr-container .outline-transparent { | ||
20 | + outline: 1px solid transparent; | ||
21 | +} | ||
22 | +.fr-container .outline-0 { | ||
23 | + outline: 0; | ||
24 | +} | ||
25 | +.fr-container .ba { | ||
26 | + border-style: solid; | ||
27 | + border-width: 1px; | ||
28 | +} | ||
29 | +.fr-container .bt { | ||
30 | + border-top-style: solid; | ||
31 | + border-top-width: 1px; | ||
32 | +} | ||
33 | +.fr-container .br { | ||
34 | + border-right-style: solid; | ||
35 | + border-right-width: 1px; | ||
36 | +} | ||
37 | +.fr-container .bb { | ||
38 | + border-bottom-style: solid; | ||
39 | + border-bottom-width: 1px; | ||
40 | +} | ||
41 | +.fr-container .bl { | ||
42 | + border-left-style: solid; | ||
43 | + border-left-width: 1px; | ||
44 | +} | ||
45 | +.fr-container .bn { | ||
46 | + border-style: none; | ||
47 | + border-width: 0; | ||
48 | +} | ||
49 | +.fr-container .br0 { | ||
50 | + border-radius: 0; | ||
51 | +} | ||
52 | +.fr-container .br1 { | ||
53 | + border-radius: 0.125rem; | ||
54 | +} | ||
55 | +.fr-container .br2 { | ||
56 | + border-radius: 0.25rem; | ||
57 | +} | ||
58 | +.fr-container .br3 { | ||
59 | + border-radius: 0.5rem; | ||
60 | +} | ||
61 | +.fr-container .br4 { | ||
62 | + border-radius: 1rem; | ||
63 | +} | ||
64 | +.fr-container .br-100 { | ||
65 | + border-radius: 100%; | ||
66 | +} | ||
67 | +.fr-container .br-pill { | ||
68 | + border-radius: 9999px; | ||
69 | +} | ||
70 | +.fr-container .br--bottom { | ||
71 | + border-top-left-radius: 0; | ||
72 | + border-top-right-radius: 0; | ||
73 | +} | ||
74 | +.fr-container .br--top { | ||
75 | + border-bottom-left-radius: 0; | ||
76 | + border-bottom-right-radius: 0; | ||
77 | +} | ||
78 | +.fr-container .br--right { | ||
79 | + border-top-left-radius: 0; | ||
80 | + border-bottom-left-radius: 0; | ||
81 | +} | ||
82 | +.fr-container .br--left { | ||
83 | + border-top-right-radius: 0; | ||
84 | + border-bottom-right-radius: 0; | ||
85 | +} | ||
86 | +.fr-container .b--dotted { | ||
87 | + border-style: dotted; | ||
88 | +} | ||
89 | +.fr-container .b--dashed { | ||
90 | + border-style: dashed; | ||
91 | +} | ||
92 | +.fr-container .b--solid { | ||
93 | + border-style: solid; | ||
94 | +} | ||
95 | +.fr-container .b--none { | ||
96 | + border-style: none; | ||
97 | +} | ||
98 | +.fr-container .b--black-10 { | ||
99 | + border-color: rgba(0, 0, 0, 0.1); | ||
100 | +} | ||
101 | +.fr-container .b--black-20 { | ||
102 | + border-color: rgba(0, 0, 0, 0.2); | ||
103 | +} | ||
104 | +.fr-container .b--black-30 { | ||
105 | + border-color: rgba(0, 0, 0, 0.3); | ||
106 | +} | ||
107 | +.fr-container .bw0 { | ||
108 | + border-width: 0; | ||
109 | +} | ||
110 | +.fr-container .bw1 { | ||
111 | + border-width: 0.125rem; | ||
112 | +} | ||
113 | +.fr-container .bw2 { | ||
114 | + border-width: 0.25rem; | ||
115 | +} | ||
116 | +.fr-container .bw3 { | ||
117 | + border-width: 0.5rem; | ||
118 | +} | ||
119 | +.fr-container .bw4 { | ||
120 | + border-width: 1rem; | ||
121 | +} | ||
122 | +.fr-container .bw5 { | ||
123 | + border-width: 2rem; | ||
124 | +} | ||
125 | +.fr-container .bt-0 { | ||
126 | + border-top-width: 0; | ||
127 | +} | ||
128 | +.fr-container .br-0 { | ||
129 | + border-right-width: 0; | ||
130 | +} | ||
131 | +.fr-container .bb-0 { | ||
132 | + border-bottom-width: 0; | ||
133 | +} | ||
134 | +.fr-container .bl-0 { | ||
135 | + border-left-width: 0; | ||
136 | +} | ||
137 | +.fr-container .shadow-1 { | ||
138 | + box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2); | ||
139 | +} | ||
140 | +.fr-container .shadow-2 { | ||
141 | + box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2); | ||
142 | +} | ||
143 | +.fr-container .shadow-3 { | ||
144 | + box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); | ||
145 | +} | ||
146 | +.fr-container .shadow-4 { | ||
147 | + box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2); | ||
148 | +} | ||
149 | +.fr-container .shadow-5 { | ||
150 | + box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2); | ||
151 | +} | ||
152 | +.fr-container .top-0 { | ||
153 | + top: 0; | ||
154 | +} | ||
155 | +.fr-container .right-0 { | ||
156 | + right: 0; | ||
157 | +} | ||
158 | +.fr-container .bottom-0 { | ||
159 | + bottom: 0; | ||
160 | +} | ||
161 | +.fr-container .left-0 { | ||
162 | + left: 0; | ||
163 | +} | ||
164 | +.fr-container .top-1 { | ||
165 | + top: 1rem; | ||
166 | +} | ||
167 | +.fr-container .right-1 { | ||
168 | + right: 1rem; | ||
169 | +} | ||
170 | +.fr-container .bottom-1 { | ||
171 | + bottom: 1rem; | ||
172 | +} | ||
173 | +.fr-container .left-1 { | ||
174 | + left: 1rem; | ||
175 | +} | ||
176 | +.fr-container .top-2 { | ||
177 | + top: 2rem; | ||
178 | +} | ||
179 | +.fr-container .right-2 { | ||
180 | + right: 2rem; | ||
181 | +} | ||
182 | +.fr-container .bottom-2 { | ||
183 | + bottom: 2rem; | ||
184 | +} | ||
185 | +.fr-container .left-2 { | ||
186 | + left: 2rem; | ||
187 | +} | ||
188 | +.fr-container .top--1 { | ||
189 | + top: -1rem; | ||
190 | +} | ||
191 | +.fr-container .right--1 { | ||
192 | + right: -1rem; | ||
193 | +} | ||
194 | +.fr-container .bottom--1 { | ||
195 | + bottom: -1rem; | ||
196 | +} | ||
197 | +.fr-container .left--1 { | ||
198 | + left: -1rem; | ||
199 | +} | ||
200 | +.fr-container .top--2 { | ||
201 | + top: -2rem; | ||
202 | +} | ||
203 | +.fr-container .right--2 { | ||
204 | + right: -2rem; | ||
205 | +} | ||
206 | +.fr-container .bottom--2 { | ||
207 | + bottom: -2rem; | ||
208 | +} | ||
209 | +.fr-container .left--2 { | ||
210 | + left: -2rem; | ||
211 | +} | ||
212 | +.fr-container .absolute--fill { | ||
213 | + top: 0; | ||
214 | + right: 0; | ||
215 | + bottom: 0; | ||
216 | + left: 0; | ||
217 | +} | ||
218 | +.fr-container .dn { | ||
219 | + display: none; | ||
220 | +} | ||
221 | +.fr-container .di { | ||
222 | + display: inline; | ||
223 | +} | ||
224 | +.fr-container .db { | ||
225 | + display: block; | ||
226 | +} | ||
227 | +.fr-container .dib { | ||
228 | + display: inline-block; | ||
229 | +} | ||
230 | +.fr-container .dit { | ||
231 | + display: inline-table; | ||
232 | +} | ||
233 | +.fr-container .dt { | ||
234 | + display: table; | ||
235 | +} | ||
236 | +.fr-container .dtc { | ||
237 | + display: table-cell; | ||
238 | +} | ||
239 | +.fr-container .dt-row { | ||
240 | + display: table-row; | ||
241 | +} | ||
242 | +.fr-container .dt-row-group { | ||
243 | + display: table-row-group; | ||
244 | +} | ||
245 | +.fr-container .dt-column { | ||
246 | + display: table-column; | ||
247 | +} | ||
248 | +.fr-container .dt-column-group { | ||
249 | + display: table-column-group; | ||
250 | +} | ||
251 | +.fr-container .dt--fixed { | ||
252 | + table-layout: fixed; | ||
253 | + width: 100%; | ||
254 | +} | ||
255 | +.fr-container .flex { | ||
256 | + display: flex; | ||
257 | +} | ||
258 | +.fr-container .inline-flex { | ||
259 | + display: inline-flex; | ||
260 | +} | ||
261 | +.fr-container .flex-auto { | ||
262 | + flex: 1 1 auto; | ||
263 | + min-width: 0; | ||
264 | + /* 1 */ | ||
265 | + min-height: 0; | ||
266 | + /* 1 */ | ||
267 | +} | ||
268 | +.fr-container .flex-none { | ||
269 | + flex: none; | ||
270 | +} | ||
271 | +.fr-container .flex-column { | ||
272 | + flex-direction: column; | ||
273 | +} | ||
274 | +.fr-container .flex-row { | ||
275 | + flex-direction: row; | ||
276 | +} | ||
277 | +.fr-container .flex-wrap { | ||
278 | + flex-wrap: wrap; | ||
279 | +} | ||
280 | +.fr-container .flex-nowrap { | ||
281 | + flex-wrap: nowrap; | ||
282 | +} | ||
283 | +.fr-container .flex-wrap-reverse { | ||
284 | + flex-wrap: wrap-reverse; | ||
285 | +} | ||
286 | +.fr-container .flex-column-reverse { | ||
287 | + flex-direction: column-reverse; | ||
288 | +} | ||
289 | +.fr-container .flex-row-reverse { | ||
290 | + flex-direction: row-reverse; | ||
291 | +} | ||
292 | +.fr-container .items-start { | ||
293 | + align-items: flex-start; | ||
294 | +} | ||
295 | +.fr-container .items-end { | ||
296 | + align-items: flex-end; | ||
297 | +} | ||
298 | +.fr-container .items-center { | ||
299 | + align-items: center; | ||
300 | +} | ||
301 | +.fr-container .items-baseline { | ||
302 | + align-items: baseline; | ||
303 | +} | ||
304 | +.fr-container .items-stretch { | ||
305 | + align-items: stretch; | ||
306 | +} | ||
307 | +.fr-container .self-start { | ||
308 | + align-self: flex-start; | ||
309 | +} | ||
310 | +.fr-container .self-end { | ||
311 | + align-self: flex-end; | ||
312 | +} | ||
313 | +.fr-container .self-center { | ||
314 | + align-self: center; | ||
315 | +} | ||
316 | +.fr-container .self-baseline { | ||
317 | + align-self: baseline; | ||
318 | +} | ||
319 | +.fr-container .self-stretch { | ||
320 | + align-self: stretch; | ||
321 | +} | ||
322 | +.fr-container .justify-start { | ||
323 | + justify-content: flex-start; | ||
324 | +} | ||
325 | +.fr-container .justify-end { | ||
326 | + justify-content: flex-end; | ||
327 | +} | ||
328 | +.fr-container .justify-center { | ||
329 | + justify-content: center; | ||
330 | +} | ||
331 | +.fr-container .justify-between { | ||
332 | + justify-content: space-between; | ||
333 | +} | ||
334 | +.fr-container .justify-around { | ||
335 | + justify-content: space-around; | ||
336 | +} | ||
337 | +.fr-container .content-start { | ||
338 | + align-content: flex-start; | ||
339 | +} | ||
340 | +.fr-container .content-end { | ||
341 | + align-content: flex-end; | ||
342 | +} | ||
343 | +.fr-container .content-center { | ||
344 | + align-content: center; | ||
345 | +} | ||
346 | +.fr-container .content-between { | ||
347 | + align-content: space-between; | ||
348 | +} | ||
349 | +.fr-container .content-around { | ||
350 | + align-content: space-around; | ||
351 | +} | ||
352 | +.fr-container .content-stretch { | ||
353 | + align-content: stretch; | ||
354 | +} | ||
355 | +.fr-container .order-0 { | ||
356 | + order: 0; | ||
357 | +} | ||
358 | +.fr-container .order-1 { | ||
359 | + order: 1; | ||
360 | +} | ||
361 | +.fr-container .order-2 { | ||
362 | + order: 2; | ||
363 | +} | ||
364 | +.fr-container .order-3 { | ||
365 | + order: 3; | ||
366 | +} | ||
367 | +.fr-container .order-4 { | ||
368 | + order: 4; | ||
369 | +} | ||
370 | +.fr-container .order-5 { | ||
371 | + order: 5; | ||
372 | +} | ||
373 | +.fr-container .order-6 { | ||
374 | + order: 6; | ||
375 | +} | ||
376 | +.fr-container .order-7 { | ||
377 | + order: 7; | ||
378 | +} | ||
379 | +.fr-container .order-8 { | ||
380 | + order: 8; | ||
381 | +} | ||
382 | +.fr-container .order-last { | ||
383 | + order: 99999; | ||
384 | +} | ||
385 | +.fr-container .flex-grow-0 { | ||
386 | + flex-grow: 0; | ||
387 | +} | ||
388 | +.fr-container .flex-grow-1 { | ||
389 | + flex-grow: 1; | ||
390 | +} | ||
391 | +.fr-container .flex-shrink-0 { | ||
392 | + flex-shrink: 0; | ||
393 | +} | ||
394 | +.fr-container .flex-shrink-1 { | ||
395 | + flex-shrink: 1; | ||
396 | +} | ||
397 | +.fr-container .fw1 { | ||
398 | + font-weight: 100; | ||
399 | +} | ||
400 | +.fr-container .fw2 { | ||
401 | + font-weight: 200; | ||
402 | +} | ||
403 | +.fr-container .fw3 { | ||
404 | + font-weight: 300; | ||
405 | +} | ||
406 | +.fr-container .fw4 { | ||
407 | + font-weight: 400; | ||
408 | +} | ||
409 | +.fr-container .fw5 { | ||
410 | + font-weight: 500; | ||
411 | +} | ||
412 | +.fr-container .fw6 { | ||
413 | + font-weight: 600; | ||
414 | +} | ||
415 | +.fr-container .fw7 { | ||
416 | + font-weight: 700; | ||
417 | +} | ||
418 | +.fr-container .fw8 { | ||
419 | + font-weight: 800; | ||
420 | +} | ||
421 | +.fr-container .fw9 { | ||
422 | + font-weight: 900; | ||
423 | +} | ||
424 | +.fr-container .h1 { | ||
425 | + height: 1rem; | ||
426 | +} | ||
427 | +.fr-container .h2 { | ||
428 | + height: 2rem; | ||
429 | +} | ||
430 | +.fr-container .h3 { | ||
431 | + height: 4rem; | ||
432 | +} | ||
433 | +.fr-container .h4 { | ||
434 | + height: 8rem; | ||
435 | +} | ||
436 | +.fr-container .h5 { | ||
437 | + height: 16rem; | ||
438 | +} | ||
439 | +.fr-container .h-25 { | ||
440 | + height: 25%; | ||
441 | +} | ||
442 | +.fr-container .h-50 { | ||
443 | + height: 50%; | ||
444 | +} | ||
445 | +.fr-container .h-75 { | ||
446 | + height: 75%; | ||
447 | +} | ||
448 | +.fr-container .h-100 { | ||
449 | + height: 100%; | ||
450 | +} | ||
451 | +.fr-container .min-h-100 { | ||
452 | + min-height: 100%; | ||
453 | +} | ||
454 | +.fr-container .vh-25 { | ||
455 | + height: 25vh; | ||
456 | +} | ||
457 | +.fr-container .vh-50 { | ||
458 | + height: 50vh; | ||
459 | +} | ||
460 | +.fr-container .vh-75 { | ||
461 | + height: 75vh; | ||
462 | +} | ||
463 | +.fr-container .vh-100 { | ||
464 | + height: 100vh; | ||
465 | +} | ||
466 | +.fr-container .min-vh-100 { | ||
467 | + min-height: 100vh; | ||
468 | +} | ||
469 | +.fr-container .h-auto { | ||
470 | + height: auto; | ||
471 | +} | ||
472 | +.fr-container .h-inherit { | ||
473 | + height: inherit; | ||
474 | +} | ||
475 | +.fr-container .tracked { | ||
476 | + letter-spacing: 0.1em; | ||
477 | +} | ||
478 | +.fr-container .tracked-tight { | ||
479 | + letter-spacing: -0.05em; | ||
480 | +} | ||
481 | +.fr-container .tracked-mega { | ||
482 | + letter-spacing: 0.25em; | ||
483 | +} | ||
484 | +.fr-container .lh-solid { | ||
485 | + line-height: 1; | ||
486 | +} | ||
487 | +.fr-container .lh-title { | ||
488 | + line-height: 1.25; | ||
489 | +} | ||
490 | +.fr-container .lh-copy { | ||
491 | + line-height: 1.5; | ||
492 | +} | ||
493 | +.fr-container .mw-100 { | ||
494 | + max-width: 100%; | ||
495 | +} | ||
496 | +.fr-container .mw1 { | ||
497 | + max-width: 1rem; | ||
498 | +} | ||
499 | +.fr-container .mw2 { | ||
500 | + max-width: 2rem; | ||
501 | +} | ||
502 | +.fr-container .mw3 { | ||
503 | + max-width: 4rem; | ||
504 | +} | ||
505 | +.fr-container .mw4 { | ||
506 | + max-width: 8rem; | ||
507 | +} | ||
508 | +.fr-container .mw5 { | ||
509 | + max-width: 16rem; | ||
510 | +} | ||
511 | +.fr-container .mw6 { | ||
512 | + max-width: 32rem; | ||
513 | +} | ||
514 | +.fr-container .mw7 { | ||
515 | + max-width: 48rem; | ||
516 | +} | ||
517 | +.fr-container .mw8 { | ||
518 | + max-width: 64rem; | ||
519 | +} | ||
520 | +.fr-container .mw9 { | ||
521 | + max-width: 96rem; | ||
522 | +} | ||
523 | +.fr-container .mw-none { | ||
524 | + max-width: none; | ||
525 | +} | ||
526 | +.fr-container .w1 { | ||
527 | + width: 1rem; | ||
528 | +} | ||
529 | +.fr-container .w2 { | ||
530 | + width: 2rem; | ||
531 | +} | ||
532 | +.fr-container .w3 { | ||
533 | + width: 4rem; | ||
534 | +} | ||
535 | +.fr-container .w4 { | ||
536 | + width: 8rem; | ||
537 | +} | ||
538 | +.fr-container .w5 { | ||
539 | + width: 16rem; | ||
540 | +} | ||
541 | +.fr-container .w-10 { | ||
542 | + width: 10%; | ||
543 | +} | ||
544 | +.fr-container .w-20 { | ||
545 | + width: 20%; | ||
546 | +} | ||
547 | +.fr-container .w-25 { | ||
548 | + width: 25%; | ||
549 | +} | ||
550 | +.fr-container .w-30 { | ||
551 | + width: 30%; | ||
552 | +} | ||
553 | +.fr-container .w-33 { | ||
554 | + width: 33%; | ||
555 | +} | ||
556 | +.fr-container .w-34 { | ||
557 | + width: 34%; | ||
558 | +} | ||
559 | +.fr-container .w-40 { | ||
560 | + width: 40%; | ||
561 | +} | ||
562 | +.fr-container .w-50 { | ||
563 | + width: 50%; | ||
564 | +} | ||
565 | +.fr-container .w-60 { | ||
566 | + width: 60%; | ||
567 | +} | ||
568 | +.fr-container .w-70 { | ||
569 | + width: 70%; | ||
570 | +} | ||
571 | +.fr-container .w-75 { | ||
572 | + width: 75%; | ||
573 | +} | ||
574 | +.fr-container .w-80 { | ||
575 | + width: 80%; | ||
576 | +} | ||
577 | +.fr-container .w-90 { | ||
578 | + width: 90%; | ||
579 | +} | ||
580 | +.fr-container .w-100 { | ||
581 | + width: 100%; | ||
582 | +} | ||
583 | +.fr-container .w-third { | ||
584 | + width: calc(100% / 3); | ||
585 | +} | ||
586 | +.fr-container .w-two-thirds { | ||
587 | + width: calc(100% / 1.5); | ||
588 | +} | ||
589 | +.fr-container .w-auto { | ||
590 | + width: auto; | ||
591 | +} | ||
592 | +.fr-container .tl { | ||
593 | + text-align: left; | ||
594 | +} | ||
595 | +.fr-container .tr { | ||
596 | + text-align: right; | ||
597 | +} | ||
598 | +.fr-container .tc { | ||
599 | + text-align: center; | ||
600 | +} | ||
601 | +.fr-container .tj { | ||
602 | + text-align: justify; | ||
603 | +} | ||
604 | +.fr-container .overflow-visible { | ||
605 | + overflow: visible; | ||
606 | +} | ||
607 | +.fr-container .overflow-hidden { | ||
608 | + overflow: hidden; | ||
609 | +} | ||
610 | +.fr-container .overflow-scroll { | ||
611 | + overflow: scroll; | ||
612 | +} | ||
613 | +.fr-container .overflow-auto { | ||
614 | + overflow: auto; | ||
615 | +} | ||
616 | +.fr-container .overflow-x-visible { | ||
617 | + overflow-x: visible; | ||
618 | +} | ||
619 | +.fr-container .overflow-x-hidden { | ||
620 | + overflow-x: hidden; | ||
621 | +} | ||
622 | +.fr-container .overflow-x-scroll { | ||
623 | + overflow-x: scroll; | ||
624 | +} | ||
625 | +.fr-container .overflow-x-auto { | ||
626 | + overflow-x: auto; | ||
627 | +} | ||
628 | +.fr-container .overflow-y-visible { | ||
629 | + overflow-y: visible; | ||
630 | +} | ||
631 | +.fr-container .overflow-y-hidden { | ||
632 | + overflow-y: hidden; | ||
633 | +} | ||
634 | +.fr-container .overflow-y-scroll { | ||
635 | + overflow-y: scroll; | ||
636 | +} | ||
637 | +.fr-container .overflow-y-auto { | ||
638 | + overflow-y: auto; | ||
639 | +} | ||
640 | +.fr-container .static { | ||
641 | + position: static; | ||
642 | +} | ||
643 | +.fr-container .relative { | ||
644 | + position: relative; | ||
645 | +} | ||
646 | +.fr-container .absolute { | ||
647 | + position: absolute; | ||
648 | +} | ||
649 | +.fr-container .fixed { | ||
650 | + position: fixed; | ||
651 | +} | ||
652 | +.fr-container .o-100 { | ||
653 | + opacity: 1; | ||
654 | +} | ||
655 | +.fr-container .o-90 { | ||
656 | + opacity: 0.9; | ||
657 | +} | ||
658 | +.fr-container .o-80 { | ||
659 | + opacity: 0.8; | ||
660 | +} | ||
661 | +.fr-container .o-70 { | ||
662 | + opacity: 0.7; | ||
663 | +} | ||
664 | +.fr-container .o-60 { | ||
665 | + opacity: 0.6; | ||
666 | +} | ||
667 | +.fr-container .o-50 { | ||
668 | + opacity: 0.5; | ||
669 | +} | ||
670 | +.fr-container .o-40 { | ||
671 | + opacity: 0.4; | ||
672 | +} | ||
673 | +.fr-container .o-30 { | ||
674 | + opacity: 0.3; | ||
675 | +} | ||
676 | +.fr-container .o-20 { | ||
677 | + opacity: 0.2; | ||
678 | +} | ||
679 | +.fr-container .o-10 { | ||
680 | + opacity: 0.1; | ||
681 | +} | ||
682 | +.fr-container .o-05 { | ||
683 | + opacity: 0.05; | ||
684 | +} | ||
685 | +.fr-container .o-025 { | ||
686 | + opacity: 0.025; | ||
687 | +} | ||
688 | +.fr-container .o-0 { | ||
689 | + opacity: 0; | ||
690 | +} | ||
691 | +.fr-container .pa0 { | ||
692 | + padding: 0; | ||
693 | +} | ||
694 | +.fr-container .pa1 { | ||
695 | + padding: 0.25rem; | ||
696 | +} | ||
697 | +.fr-container .pa2 { | ||
698 | + padding: 0.5rem; | ||
699 | +} | ||
700 | +.fr-container .pa3 { | ||
701 | + padding: 1rem; | ||
702 | +} | ||
703 | +.fr-container .pa4 { | ||
704 | + padding: 2rem; | ||
705 | +} | ||
706 | +.fr-container .pa5 { | ||
707 | + padding: 4rem; | ||
708 | +} | ||
709 | +.fr-container .pa6 { | ||
710 | + padding: 8rem; | ||
711 | +} | ||
712 | +.fr-container .pa7 { | ||
713 | + padding: 16rem; | ||
714 | +} | ||
715 | +.fr-container .pl0 { | ||
716 | + padding-left: 0; | ||
717 | +} | ||
718 | +.fr-container .pl1 { | ||
719 | + padding-left: 0.25rem; | ||
720 | +} | ||
721 | +.fr-container .pl2 { | ||
722 | + padding-left: 0.5rem; | ||
723 | +} | ||
724 | +.fr-container .pl3 { | ||
725 | + padding-left: 1rem; | ||
726 | +} | ||
727 | +.fr-container .pl4 { | ||
728 | + padding-left: 2rem; | ||
729 | +} | ||
730 | +.fr-container .pl5 { | ||
731 | + padding-left: 4rem; | ||
732 | +} | ||
733 | +.fr-container .pl6 { | ||
734 | + padding-left: 8rem; | ||
735 | +} | ||
736 | +.fr-container .pl7 { | ||
737 | + padding-left: 16rem; | ||
738 | +} | ||
739 | +.fr-container .pr0 { | ||
740 | + padding-right: 0; | ||
741 | +} | ||
742 | +.fr-container .pr1 { | ||
743 | + padding-right: 0.25rem; | ||
744 | +} | ||
745 | +.fr-container .pr2 { | ||
746 | + padding-right: 0.5rem; | ||
747 | +} | ||
748 | +.fr-container .pr3 { | ||
749 | + padding-right: 1rem; | ||
750 | +} | ||
751 | +.fr-container .pr4 { | ||
752 | + padding-right: 2rem; | ||
753 | +} | ||
754 | +.fr-container .pr5 { | ||
755 | + padding-right: 4rem; | ||
756 | +} | ||
757 | +.fr-container .pr6 { | ||
758 | + padding-right: 8rem; | ||
759 | +} | ||
760 | +.fr-container .pr7 { | ||
761 | + padding-right: 16rem; | ||
762 | +} | ||
763 | +.fr-container .pb0 { | ||
764 | + padding-bottom: 0; | ||
765 | +} | ||
766 | +.fr-container .pb1 { | ||
767 | + padding-bottom: 0.25rem; | ||
768 | +} | ||
769 | +.fr-container .pb2 { | ||
770 | + padding-bottom: 0.5rem; | ||
771 | +} | ||
772 | +.fr-container .pb3 { | ||
773 | + padding-bottom: 1rem; | ||
774 | +} | ||
775 | +.fr-container .pb4 { | ||
776 | + padding-bottom: 2rem; | ||
777 | +} | ||
778 | +.fr-container .pb5 { | ||
779 | + padding-bottom: 4rem; | ||
780 | +} | ||
781 | +.fr-container .pb6 { | ||
782 | + padding-bottom: 8rem; | ||
783 | +} | ||
784 | +.fr-container .pb7 { | ||
785 | + padding-bottom: 16rem; | ||
786 | +} | ||
787 | +.fr-container .pt0 { | ||
788 | + padding-top: 0; | ||
789 | +} | ||
790 | +.fr-container .pt1 { | ||
791 | + padding-top: 0.25rem; | ||
792 | +} | ||
793 | +.fr-container .pt2 { | ||
794 | + padding-top: 0.5rem; | ||
795 | +} | ||
796 | +.fr-container .pt3 { | ||
797 | + padding-top: 1rem; | ||
798 | +} | ||
799 | +.fr-container .pt4 { | ||
800 | + padding-top: 2rem; | ||
801 | +} | ||
802 | +.fr-container .pt5 { | ||
803 | + padding-top: 4rem; | ||
804 | +} | ||
805 | +.fr-container .pt6 { | ||
806 | + padding-top: 8rem; | ||
807 | +} | ||
808 | +.fr-container .pt7 { | ||
809 | + padding-top: 16rem; | ||
810 | +} | ||
811 | +.fr-container .pv0 { | ||
812 | + padding-top: 0; | ||
813 | + padding-bottom: 0; | ||
814 | +} | ||
815 | +.fr-container .pv1 { | ||
816 | + padding-top: 0.25rem; | ||
817 | + padding-bottom: 0.25rem; | ||
818 | +} | ||
819 | +.fr-container .pv2 { | ||
820 | + padding-top: 0.5rem; | ||
821 | + padding-bottom: 0.5rem; | ||
822 | +} | ||
823 | +.fr-container .pv3 { | ||
824 | + padding-top: 1rem; | ||
825 | + padding-bottom: 1rem; | ||
826 | +} | ||
827 | +.fr-container .pv4 { | ||
828 | + padding-top: 2rem; | ||
829 | + padding-bottom: 2rem; | ||
830 | +} | ||
831 | +.fr-container .pv5 { | ||
832 | + padding-top: 4rem; | ||
833 | + padding-bottom: 4rem; | ||
834 | +} | ||
835 | +.fr-container .pv6 { | ||
836 | + padding-top: 8rem; | ||
837 | + padding-bottom: 8rem; | ||
838 | +} | ||
839 | +.fr-container .pv7 { | ||
840 | + padding-top: 16rem; | ||
841 | + padding-bottom: 16rem; | ||
842 | +} | ||
843 | +.fr-container .ph0 { | ||
844 | + padding-left: 0; | ||
845 | + padding-right: 0; | ||
846 | +} | ||
847 | +.fr-container .ph1 { | ||
848 | + padding-left: 0.25rem; | ||
849 | + padding-right: 0.25rem; | ||
850 | +} | ||
851 | +.fr-container .ph2 { | ||
852 | + padding-left: 0.5rem; | ||
853 | + padding-right: 0.5rem; | ||
854 | +} | ||
855 | +.fr-container .ph3 { | ||
856 | + padding-left: 1rem; | ||
857 | + padding-right: 1rem; | ||
858 | +} | ||
859 | +.fr-container .ph4 { | ||
860 | + padding-left: 2rem; | ||
861 | + padding-right: 2rem; | ||
862 | +} | ||
863 | +.fr-container .ph5 { | ||
864 | + padding-left: 4rem; | ||
865 | + padding-right: 4rem; | ||
866 | +} | ||
867 | +.fr-container .ph6 { | ||
868 | + padding-left: 8rem; | ||
869 | + padding-right: 8rem; | ||
870 | +} | ||
871 | +.fr-container .ph7 { | ||
872 | + padding-left: 16rem; | ||
873 | + padding-right: 16rem; | ||
874 | +} | ||
875 | +.fr-container .ma1 { | ||
876 | + margin: 0.25rem; | ||
877 | +} | ||
878 | +.fr-container .ma2 { | ||
879 | + margin: 0.5rem; | ||
880 | +} | ||
881 | +.fr-container .ma3 { | ||
882 | + margin: 1rem; | ||
883 | +} | ||
884 | +.fr-container .ma4 { | ||
885 | + margin: 2rem; | ||
886 | +} | ||
887 | +.fr-container .ma5 { | ||
888 | + margin: 4rem; | ||
889 | +} | ||
890 | +.fr-container .ma6 { | ||
891 | + margin: 8rem; | ||
892 | +} | ||
893 | +.fr-container .ma7 { | ||
894 | + margin: 16rem; | ||
895 | +} | ||
896 | +.fr-container .ma0 { | ||
897 | + margin: 0; | ||
898 | +} | ||
899 | +.fr-container .ml1 { | ||
900 | + margin-left: 0.25rem; | ||
901 | +} | ||
902 | +.fr-container .ml2 { | ||
903 | + margin-left: 0.5rem; | ||
904 | +} | ||
905 | +.fr-container .ml3 { | ||
906 | + margin-left: 1rem; | ||
907 | +} | ||
908 | +.fr-container .ml4 { | ||
909 | + margin-left: 2rem; | ||
910 | +} | ||
911 | +.fr-container .ml5 { | ||
912 | + margin-left: 4rem; | ||
913 | +} | ||
914 | +.fr-container .ml6 { | ||
915 | + margin-left: 8rem; | ||
916 | +} | ||
917 | +.fr-container .ml7 { | ||
918 | + margin-left: 16rem; | ||
919 | +} | ||
920 | +.fr-container .ml0 { | ||
921 | + margin-left: 0; | ||
922 | +} | ||
923 | +.fr-container .mr1 { | ||
924 | + margin-right: 0.25rem; | ||
925 | +} | ||
926 | +.fr-container .mr2 { | ||
927 | + margin-right: 0.5rem; | ||
928 | +} | ||
929 | +.fr-container .mr3 { | ||
930 | + margin-right: 1rem; | ||
931 | +} | ||
932 | +.fr-container .mr4 { | ||
933 | + margin-right: 2rem; | ||
934 | +} | ||
935 | +.fr-container .mr5 { | ||
936 | + margin-right: 4rem; | ||
937 | +} | ||
938 | +.fr-container .mr6 { | ||
939 | + margin-right: 8rem; | ||
940 | +} | ||
941 | +.fr-container .mr7 { | ||
942 | + margin-right: 16rem; | ||
943 | +} | ||
944 | +.fr-container .mr0 { | ||
945 | + margin-right: 0; | ||
946 | +} | ||
947 | +.fr-container .mb1 { | ||
948 | + margin-bottom: 0.25rem; | ||
949 | +} | ||
950 | +.fr-container .mb2 { | ||
951 | + margin-bottom: 0.5rem; | ||
952 | +} | ||
953 | +.fr-container .mb3 { | ||
954 | + margin-bottom: 1rem; | ||
955 | +} | ||
956 | +.fr-container .mb4 { | ||
957 | + margin-bottom: 2rem; | ||
958 | +} | ||
959 | +.fr-container .mb5 { | ||
960 | + margin-bottom: 4rem; | ||
961 | +} | ||
962 | +.fr-container .mb6 { | ||
963 | + margin-bottom: 8rem; | ||
964 | +} | ||
965 | +.fr-container .mb7 { | ||
966 | + margin-bottom: 16rem; | ||
967 | +} | ||
968 | +.fr-container .mb0 { | ||
969 | + margin-bottom: 0; | ||
970 | +} | ||
971 | +.fr-container .mt1 { | ||
972 | + margin-top: 0.25rem; | ||
973 | +} | ||
974 | +.fr-container .mt2 { | ||
975 | + margin-top: 0.5rem; | ||
976 | +} | ||
977 | +.fr-container .mt3 { | ||
978 | + margin-top: 1rem; | ||
979 | +} | ||
980 | +.fr-container .mt4 { | ||
981 | + margin-top: 2rem; | ||
982 | +} | ||
983 | +.fr-container .mt5 { | ||
984 | + margin-top: 4rem; | ||
985 | +} | ||
986 | +.fr-container .mt6 { | ||
987 | + margin-top: 8rem; | ||
988 | +} | ||
989 | +.fr-container .mt7 { | ||
990 | + margin-top: 16rem; | ||
991 | +} | ||
992 | +.fr-container .mt0 { | ||
993 | + margin-top: 0; | ||
994 | +} | ||
995 | +.fr-container .mv1 { | ||
996 | + margin-top: 0.25rem; | ||
997 | + margin-bottom: 0.25rem; | ||
998 | +} | ||
999 | +.fr-container .mv2 { | ||
1000 | + margin-top: 0.5rem; | ||
1001 | + margin-bottom: 0.5rem; | ||
1002 | +} | ||
1003 | +.fr-container .mv3 { | ||
1004 | + margin-top: 1rem; | ||
1005 | + margin-bottom: 1rem; | ||
1006 | +} | ||
1007 | +.fr-container .mv4 { | ||
1008 | + margin-top: 2rem; | ||
1009 | + margin-bottom: 2rem; | ||
1010 | +} | ||
1011 | +.fr-container .mv5 { | ||
1012 | + margin-top: 4rem; | ||
1013 | + margin-bottom: 4rem; | ||
1014 | +} | ||
1015 | +.fr-container .mv6 { | ||
1016 | + margin-top: 8rem; | ||
1017 | + margin-bottom: 8rem; | ||
1018 | +} | ||
1019 | +.fr-container .mv7 { | ||
1020 | + margin-top: 16rem; | ||
1021 | + margin-bottom: 16rem; | ||
1022 | +} | ||
1023 | +.fr-container .mv0 { | ||
1024 | + margin-top: 0; | ||
1025 | + margin-bottom: 0; | ||
1026 | +} | ||
1027 | +.fr-container .mh1 { | ||
1028 | + margin-left: 0.25rem; | ||
1029 | + margin-right: 0.25rem; | ||
1030 | +} | ||
1031 | +.fr-container .mh2 { | ||
1032 | + margin-left: 0.5rem; | ||
1033 | + margin-right: 0.5rem; | ||
1034 | +} | ||
1035 | +.fr-container .mh3 { | ||
1036 | + margin-left: 1rem; | ||
1037 | + margin-right: 1rem; | ||
1038 | +} | ||
1039 | +.fr-container .mh4 { | ||
1040 | + margin-left: 2rem; | ||
1041 | + margin-right: 2rem; | ||
1042 | +} | ||
1043 | +.fr-container .mh5 { | ||
1044 | + margin-left: 4rem; | ||
1045 | + margin-right: 4rem; | ||
1046 | +} | ||
1047 | +.fr-container .mh6 { | ||
1048 | + margin-left: 8rem; | ||
1049 | + margin-right: 8rem; | ||
1050 | +} | ||
1051 | +.fr-container .mh7 { | ||
1052 | + margin-left: 16rem; | ||
1053 | + margin-right: 16rem; | ||
1054 | +} | ||
1055 | +.fr-container .mh0 { | ||
1056 | + margin-left: 0; | ||
1057 | + margin-right: 0; | ||
1058 | +} | ||
1059 | +.fr-container .debug * { | ||
1060 | + outline: 1px solid gold; | ||
1061 | +} | ||
1062 | +.fr-container .debug-white * { | ||
1063 | + outline: 1px solid white; | ||
1064 | +} | ||
1065 | +.fr-container .debug-black * { | ||
1066 | + outline: 1px solid black; | ||
1067 | +} | ||
1068 | +.fr-container .debug-grid { | ||
1069 | + background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII= ) repeat top left; | ||
1070 | +} | ||
1071 | +.fr-container .truncate { | ||
1072 | + white-space: nowrap; | ||
1073 | + overflow: hidden; | ||
1074 | + text-overflow: ellipsis; | ||
1075 | +} | ||
1076 | +.fr-container .bg-white { | ||
1077 | + background-color: #fff; | ||
1078 | +} | ||
1079 | +.fr-container .pointer:hover { | ||
1080 | + cursor: pointer; | ||
1081 | +} | ||
1082 | +.fr-container .link { | ||
1083 | + color: #1890ff; | ||
1084 | + font-size: 14px; | ||
1085 | +} | ||
1086 | +.fr-container .link:hover { | ||
1087 | + color: #40a9ff; | ||
1088 | + font-size: 14px; | ||
1089 | +} |
es/form-render-core/src/connectForm.js
0 → 100644
1 | +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | ||
2 | + | ||
3 | +import React, { forwardRef } from 'react'; | ||
4 | +import useForm from './useForm'; | ||
5 | + | ||
6 | +var connectForm = function connectForm(Component) { | ||
7 | + return /*#__PURE__*/forwardRef(function (props, ref) { | ||
8 | + var form = useForm(); | ||
9 | + return /*#__PURE__*/React.createElement(Component, _extends({ | ||
10 | + ref: ref | ||
11 | + }, props, { | ||
12 | + form: form | ||
13 | + })); | ||
14 | + }); | ||
15 | +}; | ||
16 | + | ||
17 | +export default connectForm; |
1 | +import "antd/es/button/style"; | ||
2 | +import _Button from "antd/es/button"; | ||
3 | +import "antd/es/popconfirm/style"; | ||
4 | +import _Popconfirm from "antd/es/popconfirm"; | ||
5 | +import _CloseOutlined from "@ant-design/icons/lib/icons/CloseOutlined"; | ||
6 | +import _CopyOutlined from "@ant-design/icons/lib/icons/CopyOutlined"; | ||
7 | +import _ArrowDownOutlined from "@ant-design/icons/lib/icons/ArrowDownOutlined"; | ||
8 | +import _ArrowUpOutlined from "@ant-design/icons/lib/icons/ArrowUpOutlined"; | ||
9 | + | ||
10 | +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | ||
11 | + | ||
12 | +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } | ||
13 | + | ||
14 | +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } | ||
15 | + | ||
16 | +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
17 | + | ||
18 | +function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } | ||
19 | + | ||
20 | +/* eslint-disable jsx-a11y/anchor-is-valid */ | ||
21 | +import React from 'react'; | ||
22 | +import Core from '../../index'; | ||
23 | + | ||
24 | +var CardList = function CardList(_ref) { | ||
25 | + var _ref$displayList = _ref.displayList, | ||
26 | + displayList = _ref$displayList === void 0 ? [] : _ref$displayList, | ||
27 | + listData = _ref.listData, | ||
28 | + changeList = _ref.changeList, | ||
29 | + schema = _ref.schema, | ||
30 | + deleteItem = _ref.deleteItem, | ||
31 | + copyItem = _ref.copyItem, | ||
32 | + addItem = _ref.addItem, | ||
33 | + moveItemUp = _ref.moveItemUp, | ||
34 | + moveItemDown = _ref.moveItemDown, | ||
35 | + displayType = _ref.displayType, | ||
36 | + getFieldsProps = _ref.getFieldsProps; | ||
37 | + var _schema$props = schema.props, | ||
38 | + props = _schema$props === void 0 ? {} : _schema$props, | ||
39 | + itemProps = schema.itemProps; | ||
40 | + var addBtnProps = { | ||
41 | + type: 'dashed', | ||
42 | + children: '新增一条' | ||
43 | + }; | ||
44 | + | ||
45 | + if (props.addBtnProps && _typeof(props.addBtnProps) === 'object') { | ||
46 | + addBtnProps = _objectSpread(_objectSpread({}, addBtnProps), props.addBtnProps); | ||
47 | + } | ||
48 | + | ||
49 | + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", { | ||
50 | + className: "fr-card-list" | ||
51 | + }, displayList.map(function (item, idx) { | ||
52 | + var fieldsProps = getFieldsProps(idx); | ||
53 | + fieldsProps.displayType = displayType; | ||
54 | + return /*#__PURE__*/React.createElement("div", { | ||
55 | + className: "fr-card-item ".concat(displayType === 'row' ? 'fr-card-item-row' : ''), | ||
56 | + key: idx | ||
57 | + }, /*#__PURE__*/React.createElement("div", { | ||
58 | + className: "fr-card-index" | ||
59 | + }, idx + 1), /*#__PURE__*/React.createElement(Core, fieldsProps), /*#__PURE__*/React.createElement("div", { | ||
60 | + direction: "horizontal", | ||
61 | + className: "fr-card-toolbar" | ||
62 | + }, !props.hideMove && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_ArrowUpOutlined, { | ||
63 | + style: { | ||
64 | + fontSize: 16, | ||
65 | + marginLeft: 4 | ||
66 | + }, | ||
67 | + onClick: function onClick() { | ||
68 | + return moveItemUp(idx); | ||
69 | + } | ||
70 | + }), /*#__PURE__*/React.createElement(_ArrowDownOutlined, { | ||
71 | + style: { | ||
72 | + fontSize: 16, | ||
73 | + marginLeft: 4 | ||
74 | + }, | ||
75 | + onClick: function onClick() { | ||
76 | + return moveItemDown(idx); | ||
77 | + } | ||
78 | + })), !props.hideAdd && !props.hideCopy && /*#__PURE__*/React.createElement(_CopyOutlined, { | ||
79 | + style: { | ||
80 | + fontSize: 16, | ||
81 | + marginLeft: 8 | ||
82 | + }, | ||
83 | + onClick: function onClick() { | ||
84 | + return copyItem(idx); | ||
85 | + } | ||
86 | + }), !props.hideDelete && /*#__PURE__*/React.createElement(_Popconfirm, { | ||
87 | + title: "\u786E\u5B9A\u5220\u9664?", | ||
88 | + onConfirm: function onConfirm() { | ||
89 | + return deleteItem(idx); | ||
90 | + }, | ||
91 | + okText: "\u786E\u5B9A", | ||
92 | + cancelText: "\u53D6\u6D88" | ||
93 | + }, /*#__PURE__*/React.createElement(_CloseOutlined, { | ||
94 | + style: { | ||
95 | + fontSize: 16, | ||
96 | + marginLeft: 8 | ||
97 | + } | ||
98 | + })))); | ||
99 | + })), /*#__PURE__*/React.createElement("div", { | ||
100 | + style: { | ||
101 | + marginTop: displayList.length > 0 ? 0 : 8 | ||
102 | + } | ||
103 | + }, !props.hideAdd && /*#__PURE__*/React.createElement(_Button, _extends({ | ||
104 | + onClick: addItem | ||
105 | + }, addBtnProps)), Array.isArray(props.buttons) ? props.buttons.map(function (item, idx) { | ||
106 | + var callback = item.callback, | ||
107 | + text = item.text, | ||
108 | + html = item.html; | ||
109 | + | ||
110 | + var onClick = function onClick() { | ||
111 | + console.log({ | ||
112 | + value: listData, | ||
113 | + onChange: changeList, | ||
114 | + schema: schema | ||
115 | + }); | ||
116 | + }; | ||
117 | + | ||
118 | + if (typeof window[callback] === 'function') { | ||
119 | + onClick = function onClick() { | ||
120 | + window[callback]({ | ||
121 | + value: listData, | ||
122 | + onChange: changeList, | ||
123 | + schema: schema | ||
124 | + }); | ||
125 | + }; | ||
126 | + } | ||
127 | + | ||
128 | + return /*#__PURE__*/React.createElement(_Button, { | ||
129 | + key: idx.toString(), | ||
130 | + style: { | ||
131 | + marginLeft: 8 | ||
132 | + }, | ||
133 | + type: "dashed", | ||
134 | + onClick: onClick | ||
135 | + }, /*#__PURE__*/React.createElement("span", { | ||
136 | + dangerouslySetInnerHTML: { | ||
137 | + __html: html || text | ||
138 | + } | ||
139 | + })); | ||
140 | + }) : null)); | ||
141 | +}; | ||
142 | + | ||
143 | +export default CardList; |
1 | +import "antd/es/table/style"; | ||
2 | +import _Table from "antd/es/table"; | ||
3 | +import "antd/es/drawer/style"; | ||
4 | +import _Drawer from "antd/es/drawer"; | ||
5 | +import "antd/es/button/style"; | ||
6 | +import _Button from "antd/es/button"; | ||
7 | +import _ArrowDownOutlined from "@ant-design/icons/lib/icons/ArrowDownOutlined"; | ||
8 | +import _ArrowUpOutlined from "@ant-design/icons/lib/icons/ArrowUpOutlined"; | ||
9 | +import "antd/es/popconfirm/style"; | ||
10 | +import _Popconfirm from "antd/es/popconfirm"; | ||
11 | +var _excluded = ["buttons"], | ||
12 | + _excluded2 = ["pagination"]; | ||
13 | + | ||
14 | +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | ||
15 | + | ||
16 | +function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } | ||
17 | + | ||
18 | +function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | ||
19 | + | ||
20 | +function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | ||
21 | + | ||
22 | +function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
23 | + | ||
24 | +function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } | ||
25 | + | ||
26 | +function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } | ||
27 | + | ||
28 | +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } | ||
29 | + | ||
30 | +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } | ||
31 | + | ||
32 | +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
33 | + | ||
34 | +function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } | ||
35 | + | ||
36 | +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } | ||
37 | + | ||
38 | +/* eslint-disable jsx-a11y/anchor-is-valid */ | ||
39 | +import React, { useRef } from 'react'; | ||
40 | +import Core from '../../index'; | ||
41 | +import { useSet } from '../../../hooks'; | ||
42 | +import { getDataPath, getKeyFromPath, getDisplayValue } from '../../../utils'; | ||
43 | +import ErrorMessage from '../../RenderField/ErrorMessage'; | ||
44 | +var FIELD_LENGTH = 170; | ||
45 | + | ||
46 | +var DrawerList = function DrawerList(_ref) { | ||
47 | + var _extends2; | ||
48 | + | ||
49 | + var _ref$displayList = _ref.displayList, | ||
50 | + displayList = _ref$displayList === void 0 ? [] : _ref$displayList, | ||
51 | + dataPath = _ref.dataPath, | ||
52 | + children = _ref.children, | ||
53 | + deleteItem = _ref.deleteItem, | ||
54 | + addItem = _ref.addItem, | ||
55 | + moveItemDown = _ref.moveItemDown, | ||
56 | + moveItemUp = _ref.moveItemUp, | ||
57 | + flatten = _ref.flatten, | ||
58 | + errorFields = _ref.errorFields, | ||
59 | + getFieldsProps = _ref.getFieldsProps, | ||
60 | + schema = _ref.schema, | ||
61 | + changeList = _ref.changeList, | ||
62 | + listData = _ref.listData; | ||
63 | + var _schema$props = schema.props, | ||
64 | + props = _schema$props === void 0 ? {} : _schema$props, | ||
65 | + _schema$itemProps = schema.itemProps, | ||
66 | + itemProps = _schema$itemProps === void 0 ? {} : _schema$itemProps; | ||
67 | + | ||
68 | + var buttons = itemProps.buttons, | ||
69 | + columnProps = _objectWithoutProperties(itemProps, _excluded); | ||
70 | + | ||
71 | + var _props$pagination = props.pagination, | ||
72 | + pagination = _props$pagination === void 0 ? {} : _props$pagination, | ||
73 | + rest = _objectWithoutProperties(props, _excluded2); | ||
74 | + | ||
75 | + var paginationConfig = pagination && _objectSpread({ | ||
76 | + size: 'small', | ||
77 | + hideOnSinglePage: true | ||
78 | + }, pagination); | ||
79 | + | ||
80 | + var currentIndex = useRef(-1); | ||
81 | + | ||
82 | + var _useSet = useSet({ | ||
83 | + showDrawer: false | ||
84 | + }), | ||
85 | + _useSet2 = _slicedToArray(_useSet, 2), | ||
86 | + state = _useSet2[0], | ||
87 | + setState = _useSet2[1]; | ||
88 | + | ||
89 | + var showDrawer = state.showDrawer; | ||
90 | + var dataSource = displayList.map(function (item, index) { | ||
91 | + return _objectSpread(_objectSpread({}, item), {}, { | ||
92 | + $idx: index | ||
93 | + }); | ||
94 | + }); | ||
95 | + var columns = children.map(function (child) { | ||
96 | + var item = flatten[child]; | ||
97 | + var schema = item && item.schema || {}; | ||
98 | + | ||
99 | + var _dataIndex = getKeyFromPath(child); | ||
100 | + | ||
101 | + return _objectSpread({ | ||
102 | + dataIndex: _dataIndex, | ||
103 | + title: schema.required ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", { | ||
104 | + className: "fr-label-required" | ||
105 | + }, " *"), /*#__PURE__*/React.createElement("span", null, schema.title)) : schema.title, | ||
106 | + width: FIELD_LENGTH, | ||
107 | + render: function render(value, record) { | ||
108 | + var childPath = getDataPath(child, [record.$idx]); | ||
109 | + var errorObj = errorFields.find(function (item) { | ||
110 | + return item.name == childPath; | ||
111 | + }) || {}; //TODO: 万一error在更深的层,这个办法是find不到的,会展示那一行没有提示。可以整一行加一个红线的方式处理 | ||
112 | + | ||
113 | + return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, getDisplayValue(value, schema)), errorObj.error && /*#__PURE__*/React.createElement(ErrorMessage, { | ||
114 | + message: errorObj.error, | ||
115 | + schema: schema | ||
116 | + })); | ||
117 | + } | ||
118 | + }, columnProps); | ||
119 | + }); | ||
120 | + columns.push({ | ||
121 | + title: '操作', | ||
122 | + key: '$action', | ||
123 | + fixed: 'right', | ||
124 | + width: 120, | ||
125 | + render: function render(value, record, idx) { | ||
126 | + var index = value && value.$idx || 0; | ||
127 | + return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", { | ||
128 | + onClick: function onClick() { | ||
129 | + return openDrawer(index); | ||
130 | + } | ||
131 | + }, "\u7F16\u8F91"), !props.hideDelete && /*#__PURE__*/React.createElement(_Popconfirm, { | ||
132 | + title: "\u786E\u5B9A\u5220\u9664?", | ||
133 | + onConfirm: function onConfirm() { | ||
134 | + return deleteItem(index); | ||
135 | + }, | ||
136 | + okText: "\u786E\u5B9A", | ||
137 | + cancelText: "\u53D6\u6D88" | ||
138 | + }, /*#__PURE__*/React.createElement("a", { | ||
139 | + style: { | ||
140 | + marginLeft: 8 | ||
141 | + } | ||
142 | + }, "\u5220\u9664")), !props.hideMove && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_ArrowUpOutlined, { | ||
143 | + style: { | ||
144 | + color: '#1890ff', | ||
145 | + fontSize: 16, | ||
146 | + marginLeft: 8 | ||
147 | + }, | ||
148 | + onClick: function onClick() { | ||
149 | + return moveItemUp(idx); | ||
150 | + } | ||
151 | + }), /*#__PURE__*/React.createElement(_ArrowDownOutlined, { | ||
152 | + style: { | ||
153 | + color: '#1890ff', | ||
154 | + fontSize: 16, | ||
155 | + marginLeft: 8 | ||
156 | + }, | ||
157 | + onClick: function onClick() { | ||
158 | + return moveItemDown(idx); | ||
159 | + } | ||
160 | + }))); | ||
161 | + } | ||
162 | + }); | ||
163 | + var fieldsProps = getFieldsProps(currentIndex.current); | ||
164 | + | ||
165 | + var openDrawer = function openDrawer(index) { | ||
166 | + currentIndex.current = index; | ||
167 | + setState({ | ||
168 | + showDrawer: true | ||
169 | + }); | ||
170 | + }; | ||
171 | + | ||
172 | + var closeDrawer = function closeDrawer() { | ||
173 | + currentIndex.current = -1; | ||
174 | + setState({ | ||
175 | + showDrawer: false | ||
176 | + }); | ||
177 | + }; | ||
178 | + | ||
179 | + var handleAdd = function handleAdd() { | ||
180 | + var newIndex = addItem(); | ||
181 | + openDrawer(newIndex); | ||
182 | + }; | ||
183 | + | ||
184 | + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", { | ||
185 | + className: "w-100 mb2 tr" | ||
186 | + }, !props.hideAdd && /*#__PURE__*/React.createElement(_Button, { | ||
187 | + type: "primary", | ||
188 | + size: "small", | ||
189 | + onClick: handleAdd | ||
190 | + }, "\u65B0\u589E"), Array.isArray(props.buttons) ? props.buttons.map(function (item, idx) { | ||
191 | + var callback = item.callback, | ||
192 | + text = item.text, | ||
193 | + html = item.html; | ||
194 | + | ||
195 | + var onClick = function onClick() { | ||
196 | + console.log({ | ||
197 | + value: listData, | ||
198 | + onChange: changeList, | ||
199 | + schema: schema | ||
200 | + }); | ||
201 | + }; | ||
202 | + | ||
203 | + if (typeof window[callback] === 'function') { | ||
204 | + onClick = function onClick() { | ||
205 | + window[callback]({ | ||
206 | + value: listData, | ||
207 | + onChange: changeList, | ||
208 | + schema: schema | ||
209 | + }); | ||
210 | + }; | ||
211 | + } | ||
212 | + | ||
213 | + return /*#__PURE__*/React.createElement(_Button, { | ||
214 | + key: idx.toString(), | ||
215 | + style: { | ||
216 | + marginLeft: 8 | ||
217 | + }, | ||
218 | + size: "small", | ||
219 | + onClick: onClick | ||
220 | + }, /*#__PURE__*/React.createElement("span", { | ||
221 | + dangerouslySetInnerHTML: { | ||
222 | + __html: html || text | ||
223 | + } | ||
224 | + })); | ||
225 | + }) : null), /*#__PURE__*/React.createElement(_Drawer, { | ||
226 | + width: "600", | ||
227 | + title: "\u7F16\u8F91", | ||
228 | + placement: "right", | ||
229 | + onClose: closeDrawer, | ||
230 | + visible: showDrawer, | ||
231 | + destroyOnClose: true // 必须要加,currentIndex不是一个state,Core不会重新渲染就跪了 | ||
232 | + | ||
233 | + }, /*#__PURE__*/React.createElement("div", { | ||
234 | + className: "fr-container" | ||
235 | + }, /*#__PURE__*/React.createElement(Core, fieldsProps))), /*#__PURE__*/React.createElement(_Table, _extends((_extends2 = { | ||
236 | + size: "small", | ||
237 | + scroll: { | ||
238 | + x: 'max-content' | ||
239 | + }, | ||
240 | + columns: columns, | ||
241 | + dataSource: dataSource, | ||
242 | + rowClassName: function rowClassName(record, idx) { | ||
243 | + var index = record && record.$idx; | ||
244 | + var hasError = errorFields.find(function (item) { | ||
245 | + return item.name.indexOf("".concat(dataPath, "[").concat(index, "]")) > -1; | ||
246 | + }); | ||
247 | + return hasError ? 'fr-row-error' : ''; | ||
248 | + }, | ||
249 | + rowKey: "$idx" | ||
250 | + }, _defineProperty(_extends2, "size", "small"), _defineProperty(_extends2, "pagination", paginationConfig), _extends2), rest))); | ||
251 | +}; | ||
252 | + | ||
253 | +export default DrawerList; |
1 | +import "antd/es/button/style"; | ||
2 | +import _Button from "antd/es/button"; | ||
3 | +import _ArrowDownOutlined from "@ant-design/icons/lib/icons/ArrowDownOutlined"; | ||
4 | +import _ArrowUpOutlined from "@ant-design/icons/lib/icons/ArrowUpOutlined"; | ||
5 | +import _CopyOutlined from "@ant-design/icons/lib/icons/CopyOutlined"; | ||
6 | +import "antd/es/popconfirm/style"; | ||
7 | +import _Popconfirm from "antd/es/popconfirm"; | ||
8 | +import _DeleteOutlined from "@ant-design/icons/lib/icons/DeleteOutlined"; | ||
9 | + | ||
10 | +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | ||
11 | + | ||
12 | +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } | ||
13 | + | ||
14 | +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } | ||
15 | + | ||
16 | +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
17 | + | ||
18 | +function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } | ||
19 | + | ||
20 | +import React from 'react'; | ||
21 | +import Core from '../../index'; | ||
22 | + | ||
23 | +var SimpleList = function SimpleList(_ref) { | ||
24 | + var schema = _ref.schema, | ||
25 | + _ref$displayList = _ref.displayList, | ||
26 | + displayList = _ref$displayList === void 0 ? [] : _ref$displayList, | ||
27 | + listData = _ref.listData, | ||
28 | + changeList = _ref.changeList, | ||
29 | + deleteItem = _ref.deleteItem, | ||
30 | + addItem = _ref.addItem, | ||
31 | + copyItem = _ref.copyItem, | ||
32 | + moveItemUp = _ref.moveItemUp, | ||
33 | + moveItemDown = _ref.moveItemDown, | ||
34 | + getFieldsProps = _ref.getFieldsProps; | ||
35 | + var _schema$props = schema.props, | ||
36 | + props = _schema$props === void 0 ? {} : _schema$props, | ||
37 | + itemProps = schema.itemProps; | ||
38 | + var addBtnProps = { | ||
39 | + type: 'dashed', | ||
40 | + children: '新增一条' | ||
41 | + }; | ||
42 | + | ||
43 | + if (props.addBtnProps && _typeof(props.addBtnProps) === 'object') { | ||
44 | + addBtnProps = _objectSpread(_objectSpread({}, addBtnProps), props.addBtnProps); | ||
45 | + } | ||
46 | + | ||
47 | + return /*#__PURE__*/React.createElement("div", { | ||
48 | + className: "fr-list-1" | ||
49 | + }, displayList.map(function (item, idx) { | ||
50 | + var fieldsProps = getFieldsProps(idx); | ||
51 | + fieldsProps.displayType = 'inline'; | ||
52 | + | ||
53 | + if (props.hideTitle) { | ||
54 | + fieldsProps.hideTitle = true; | ||
55 | + } | ||
56 | + | ||
57 | + return /*#__PURE__*/React.createElement("div", { | ||
58 | + key: idx, | ||
59 | + style: { | ||
60 | + display: 'flex' | ||
61 | + } | ||
62 | + }, /*#__PURE__*/React.createElement(Core, fieldsProps), /*#__PURE__*/React.createElement("div", { | ||
63 | + style: { | ||
64 | + marginTop: 6 | ||
65 | + } | ||
66 | + }, !props.hideDelete && /*#__PURE__*/React.createElement(_Popconfirm, { | ||
67 | + title: "\u786E\u5B9A\u5220\u9664?", | ||
68 | + onConfirm: function onConfirm() { | ||
69 | + return deleteItem(idx); | ||
70 | + }, | ||
71 | + okText: "\u786E\u5B9A", | ||
72 | + cancelText: "\u53D6\u6D88" | ||
73 | + }, /*#__PURE__*/React.createElement(_DeleteOutlined, { | ||
74 | + style: { | ||
75 | + fontSize: 17, | ||
76 | + marginLeft: 8 | ||
77 | + } | ||
78 | + })), !props.hideAdd && !props.hideCopy && /*#__PURE__*/React.createElement(_CopyOutlined, { | ||
79 | + style: { | ||
80 | + fontSize: 15, | ||
81 | + marginLeft: 8 | ||
82 | + }, | ||
83 | + onClick: function onClick() { | ||
84 | + return copyItem(idx); | ||
85 | + } | ||
86 | + }), !props.hideMove && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_ArrowUpOutlined, { | ||
87 | + style: { | ||
88 | + fontSize: 16, | ||
89 | + marginLeft: 8 | ||
90 | + }, | ||
91 | + onClick: function onClick() { | ||
92 | + return moveItemUp(idx); | ||
93 | + } | ||
94 | + }), /*#__PURE__*/React.createElement(_ArrowDownOutlined, { | ||
95 | + style: { | ||
96 | + fontSize: 16, | ||
97 | + marginLeft: 8 | ||
98 | + }, | ||
99 | + onClick: function onClick() { | ||
100 | + return moveItemDown(idx); | ||
101 | + } | ||
102 | + })))); | ||
103 | + }), /*#__PURE__*/React.createElement("div", { | ||
104 | + style: { | ||
105 | + marginTop: displayList.length > 0 ? 0 : 8 | ||
106 | + } | ||
107 | + }, !props.hideAdd && /*#__PURE__*/React.createElement(_Button, _extends({ | ||
108 | + onClick: addItem | ||
109 | + }, addBtnProps)), Array.isArray(props.buttons) ? props.buttons.map(function (item, idx) { | ||
110 | + var callback = item.callback, | ||
111 | + text = item.text, | ||
112 | + html = item.html; | ||
113 | + | ||
114 | + var onClick = function onClick() { | ||
115 | + console.log({ | ||
116 | + value: listData, | ||
117 | + onChange: changeList, | ||
118 | + schema: schema | ||
119 | + }); | ||
120 | + }; | ||
121 | + | ||
122 | + if (typeof window[callback] === 'function') { | ||
123 | + onClick = function onClick() { | ||
124 | + window[callback]({ | ||
125 | + value: listData, | ||
126 | + onChange: changeList, | ||
127 | + schema: schema | ||
128 | + }); | ||
129 | + }; | ||
130 | + } | ||
131 | + | ||
132 | + return /*#__PURE__*/React.createElement(_Button, { | ||
133 | + key: idx.toString(), | ||
134 | + style: { | ||
135 | + marginLeft: 8 | ||
136 | + }, | ||
137 | + type: "dashed", | ||
138 | + onClick: onClick | ||
139 | + }, /*#__PURE__*/React.createElement("span", { | ||
140 | + dangerouslySetInnerHTML: { | ||
141 | + __html: html || text | ||
142 | + } | ||
143 | + })); | ||
144 | + }) : null)); | ||
145 | +}; | ||
146 | + | ||
147 | +export default SimpleList; |
1 | +import "antd/es/tabs/style"; | ||
2 | +import _Tabs from "antd/es/tabs"; | ||
3 | +var _excluded = ["tabName", "type"]; | ||
4 | + | ||
5 | +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | ||
6 | + | ||
7 | +function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } | ||
8 | + | ||
9 | +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } | ||
10 | + | ||
11 | +function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } | ||
12 | + | ||
13 | +function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | ||
14 | + | ||
15 | +function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | ||
16 | + | ||
17 | +function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
18 | + | ||
19 | +function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } | ||
20 | + | ||
21 | +function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } | ||
22 | + | ||
23 | +/* eslint-disable jsx-a11y/anchor-is-valid */ | ||
24 | +import React, { useState } from 'react'; | ||
25 | +import Core from '../../index'; | ||
26 | +var TabPane = _Tabs.TabPane; | ||
27 | + | ||
28 | +var TabList = function TabList(_ref) { | ||
29 | + var _ref$displayList = _ref.displayList, | ||
30 | + displayList = _ref$displayList === void 0 ? [] : _ref$displayList, | ||
31 | + listData = _ref.listData, | ||
32 | + changeList = _ref.changeList, | ||
33 | + schema = _ref.schema, | ||
34 | + deleteItem = _ref.deleteItem, | ||
35 | + copyItem = _ref.copyItem, | ||
36 | + addItem = _ref.addItem, | ||
37 | + moveItemUp = _ref.moveItemUp, | ||
38 | + moveItemDown = _ref.moveItemDown, | ||
39 | + displayType = _ref.displayType, | ||
40 | + getFieldsProps = _ref.getFieldsProps; | ||
41 | + | ||
42 | + var _useState = useState('0'), | ||
43 | + _useState2 = _slicedToArray(_useState, 2), | ||
44 | + activeKey = _useState2[0], | ||
45 | + setActiveKey = _useState2[1]; | ||
46 | + | ||
47 | + var _schema$props = schema.props, | ||
48 | + props = _schema$props === void 0 ? {} : _schema$props, | ||
49 | + itemProps = schema.itemProps; | ||
50 | + | ||
51 | + var tabName = props.tabName, | ||
52 | + type = props.type, | ||
53 | + restProps = _objectWithoutProperties(props, _excluded); | ||
54 | + | ||
55 | + var onEdit = function onEdit(targetKey, action) { | ||
56 | + if (action === 'add') { | ||
57 | + var currentKey = addItem(); | ||
58 | + setActiveKey("".concat(currentKey)); | ||
59 | + } else if (action === 'remove') { | ||
60 | + deleteItem(Number(targetKey)); | ||
61 | + setActiveKey("".concat(targetKey > 1 ? targetKey - 1 : 0)); | ||
62 | + } else { | ||
63 | + return null; | ||
64 | + } | ||
65 | + }; | ||
66 | + | ||
67 | + var getCurrentTabPaneName = function getCurrentTabPaneName(idx) { | ||
68 | + return tabName instanceof Array ? tabName[idx] || idx + 1 : "".concat(tabName || '项目', " ").concat(idx + 1); | ||
69 | + }; | ||
70 | + | ||
71 | + return /*#__PURE__*/React.createElement(_Tabs, _extends({ | ||
72 | + type: type || 'line', | ||
73 | + onChange: setActiveKey, | ||
74 | + activeKey: activeKey, | ||
75 | + onEdit: onEdit | ||
76 | + }, restProps), displayList.map(function (item, idx) { | ||
77 | + var fieldsProps = getFieldsProps(idx); | ||
78 | + fieldsProps.displayType = displayType; | ||
79 | + return /*#__PURE__*/React.createElement(TabPane, { | ||
80 | + tab: getCurrentTabPaneName(idx), | ||
81 | + key: "".concat(idx) | ||
82 | + }, /*#__PURE__*/React.createElement(Core, fieldsProps)); | ||
83 | + })); | ||
84 | +}; | ||
85 | + | ||
86 | +export default TabList; |
1 | +import "antd/es/table/style"; | ||
2 | +import _Table from "antd/es/table"; | ||
3 | +import "antd/es/button/style"; | ||
4 | +import _Button from "antd/es/button"; | ||
5 | +import _ArrowDownOutlined from "@ant-design/icons/lib/icons/ArrowDownOutlined"; | ||
6 | +import _ArrowUpOutlined from "@ant-design/icons/lib/icons/ArrowUpOutlined"; | ||
7 | +import "antd/es/popconfirm/style"; | ||
8 | +import _Popconfirm from "antd/es/popconfirm"; | ||
9 | +var _excluded = ["buttons"], | ||
10 | + _excluded2 = ["pagination"]; | ||
11 | + | ||
12 | +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | ||
13 | + | ||
14 | +function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } | ||
15 | + | ||
16 | +function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | ||
17 | + | ||
18 | +function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | ||
19 | + | ||
20 | +function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } | ||
21 | + | ||
22 | +function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } | ||
23 | + | ||
24 | +function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
25 | + | ||
26 | +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } | ||
27 | + | ||
28 | +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } | ||
29 | + | ||
30 | +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
31 | + | ||
32 | +function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } | ||
33 | + | ||
34 | +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } | ||
35 | + | ||
36 | +/* eslint-disable jsx-a11y/anchor-is-valid */ | ||
37 | +import React from 'react'; | ||
38 | +import Core from '../../index'; | ||
39 | +// import ArrowDown from '../../../components/ArrowDown'; | ||
40 | +var FIELD_LENGTH = 170; | ||
41 | + | ||
42 | +var TableList = function TableList(_ref) { | ||
43 | + var _ref$displayList = _ref.displayList, | ||
44 | + displayList = _ref$displayList === void 0 ? [] : _ref$displayList, | ||
45 | + dataIndex = _ref.dataIndex, | ||
46 | + children = _ref.children, | ||
47 | + deleteItem = _ref.deleteItem, | ||
48 | + copyItem = _ref.copyItem, | ||
49 | + addItem = _ref.addItem, | ||
50 | + moveItemUp = _ref.moveItemUp, | ||
51 | + moveItemDown = _ref.moveItemDown, | ||
52 | + flatten = _ref.flatten, | ||
53 | + schema = _ref.schema, | ||
54 | + listData = _ref.listData, | ||
55 | + changeList = _ref.changeList; | ||
56 | + var _schema$props = schema.props, | ||
57 | + props = _schema$props === void 0 ? {} : _schema$props, | ||
58 | + _schema$itemProps = schema.itemProps, | ||
59 | + itemProps = _schema$itemProps === void 0 ? {} : _schema$itemProps; | ||
60 | + | ||
61 | + var buttons = itemProps.buttons, | ||
62 | + columnProps = _objectWithoutProperties(itemProps, _excluded); | ||
63 | + | ||
64 | + var _props$pagination = props.pagination, | ||
65 | + pagination = _props$pagination === void 0 ? {} : _props$pagination, | ||
66 | + rest = _objectWithoutProperties(props, _excluded2); | ||
67 | + | ||
68 | + var paginationConfig = pagination && _objectSpread({ | ||
69 | + size: 'small', | ||
70 | + hideOnSinglePage: true | ||
71 | + }, pagination); | ||
72 | + | ||
73 | + var dataSource = displayList.map(function (item, idx) { | ||
74 | + return { | ||
75 | + index: idx | ||
76 | + }; | ||
77 | + }); | ||
78 | + var columns = children.map(function (child) { | ||
79 | + var item = flatten[child]; | ||
80 | + var schema = item && item.schema || {}; | ||
81 | + return _objectSpread({ | ||
82 | + dataIndex: child, | ||
83 | + title: schema.required ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", { | ||
84 | + className: "fr-label-required" | ||
85 | + }, " *"), /*#__PURE__*/React.createElement("span", null, schema.title)) : schema.title, | ||
86 | + width: FIELD_LENGTH, | ||
87 | + render: function render(value, record, index) { | ||
88 | + // Check: record.index 似乎是antd自己会给的,不错哦 | ||
89 | + var childIndex = [].concat(_toConsumableArray(dataIndex), [record.index]); | ||
90 | + return /*#__PURE__*/React.createElement(Core, { | ||
91 | + hideTitle: true, | ||
92 | + displayType: "inline", | ||
93 | + key: index.toString(), | ||
94 | + id: child, | ||
95 | + dataIndex: childIndex | ||
96 | + }); | ||
97 | + } | ||
98 | + }, columnProps); | ||
99 | + }); | ||
100 | + | ||
101 | + if (!props.hideDelete || !props.hideAdd || !props.hideCopy || !props.hideMove) { | ||
102 | + columns.push({ | ||
103 | + title: '操作', | ||
104 | + key: '$action', | ||
105 | + fixed: 'right', | ||
106 | + width: 120, | ||
107 | + render: function render(value, record, idx) { | ||
108 | + return /*#__PURE__*/React.createElement("div", null, !props.hideAdd && !props.hideCopy && /*#__PURE__*/React.createElement("a", { | ||
109 | + onClick: function onClick() { | ||
110 | + return copyItem(idx); | ||
111 | + } | ||
112 | + }, "\u590D\u5236"), !props.hideDelete && /*#__PURE__*/React.createElement(_Popconfirm, { | ||
113 | + title: "\u786E\u5B9A\u5220\u9664?", | ||
114 | + onConfirm: function onConfirm() { | ||
115 | + return deleteItem(idx); | ||
116 | + }, | ||
117 | + okText: "\u786E\u5B9A", | ||
118 | + cancelText: "\u53D6\u6D88" | ||
119 | + }, /*#__PURE__*/React.createElement("a", { | ||
120 | + style: { | ||
121 | + marginLeft: 8 | ||
122 | + } | ||
123 | + }, "\u5220\u9664")), !props.hideMove && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_ArrowUpOutlined, { | ||
124 | + style: { | ||
125 | + color: '#1890ff', | ||
126 | + fontSize: 16, | ||
127 | + marginLeft: 8 | ||
128 | + }, | ||
129 | + onClick: function onClick() { | ||
130 | + return moveItemUp(idx); | ||
131 | + } | ||
132 | + }), /*#__PURE__*/React.createElement(_ArrowDownOutlined, { | ||
133 | + style: { | ||
134 | + color: '#1890ff', | ||
135 | + fontSize: 16, | ||
136 | + marginLeft: 8 | ||
137 | + }, | ||
138 | + onClick: function onClick() { | ||
139 | + return moveItemDown(idx); | ||
140 | + } | ||
141 | + }))); | ||
142 | + } | ||
143 | + }); | ||
144 | + } | ||
145 | + | ||
146 | + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", { | ||
147 | + className: "w-100 mb2 tr" | ||
148 | + }, !props.hideAdd && /*#__PURE__*/React.createElement(_Button, { | ||
149 | + type: "primary", | ||
150 | + size: "small", | ||
151 | + onClick: addItem | ||
152 | + }, "\u65B0\u589E"), Array.isArray(props.buttons) ? props.buttons.map(function (item, idx) { | ||
153 | + var callback = item.callback, | ||
154 | + text = item.text, | ||
155 | + html = item.html; | ||
156 | + | ||
157 | + var onClick = function onClick() { | ||
158 | + console.log({ | ||
159 | + value: listData, | ||
160 | + onChange: changeList, | ||
161 | + schema: schema | ||
162 | + }); | ||
163 | + }; | ||
164 | + | ||
165 | + if (typeof window[callback] === 'function') { | ||
166 | + onClick = function onClick() { | ||
167 | + window[callback]({ | ||
168 | + value: listData, | ||
169 | + onChange: changeList, | ||
170 | + schema: schema | ||
171 | + }); | ||
172 | + }; | ||
173 | + } | ||
174 | + | ||
175 | + return /*#__PURE__*/React.createElement(_Button, { | ||
176 | + key: idx.toString(), | ||
177 | + style: { | ||
178 | + marginLeft: 8 | ||
179 | + }, | ||
180 | + size: "small", | ||
181 | + onClick: onClick | ||
182 | + }, /*#__PURE__*/React.createElement("span", { | ||
183 | + dangerouslySetInnerHTML: { | ||
184 | + __html: html || text | ||
185 | + } | ||
186 | + })); | ||
187 | + }) : null), /*#__PURE__*/React.createElement(_Table, _extends({ | ||
188 | + scroll: { | ||
189 | + x: 'max-content' | ||
190 | + }, | ||
191 | + columns: columns, | ||
192 | + dataSource: dataSource, | ||
193 | + rowKey: "index", | ||
194 | + size: "small", | ||
195 | + pagination: paginationConfig | ||
196 | + }, rest))); | ||
197 | +}; | ||
198 | + | ||
199 | +export default TableList; |
1 | +import "antd/es/button/style"; | ||
2 | +import _Button from "antd/es/button"; | ||
3 | +import _PlusOutlined from "@ant-design/icons/lib/icons/PlusOutlined"; | ||
4 | +import "antd/es/table/style"; | ||
5 | +import _Table from "antd/es/table"; | ||
6 | +import _ArrowDownOutlined from "@ant-design/icons/lib/icons/ArrowDownOutlined"; | ||
7 | +import _ArrowUpOutlined from "@ant-design/icons/lib/icons/ArrowUpOutlined"; | ||
8 | +import "antd/es/popconfirm/style"; | ||
9 | +import _Popconfirm from "antd/es/popconfirm"; | ||
10 | +var _excluded = ["scrollY", "summary"]; | ||
11 | + | ||
12 | +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | ||
13 | + | ||
14 | +function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } | ||
15 | + | ||
16 | +function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | ||
17 | + | ||
18 | +function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } | ||
19 | + | ||
20 | +function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } | ||
21 | + | ||
22 | +function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } | ||
23 | + | ||
24 | +function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | ||
25 | + | ||
26 | +function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | ||
27 | + | ||
28 | +function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
29 | + | ||
30 | +function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } | ||
31 | + | ||
32 | +function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } | ||
33 | + | ||
34 | +function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } | ||
35 | + | ||
36 | +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } | ||
37 | + | ||
38 | +/* eslint-disable jsx-a11y/anchor-is-valid */ | ||
39 | +import React from 'react'; | ||
40 | +import Core from '../../index'; | ||
41 | +import { useVT } from 'virtualizedtableforantd4'; | ||
42 | +var FIELD_LENGTH = 170; | ||
43 | + | ||
44 | +var VirtualList = function VirtualList(_ref) { | ||
45 | + var _ref$displayList = _ref.displayList, | ||
46 | + displayList = _ref$displayList === void 0 ? [] : _ref$displayList, | ||
47 | + dataIndex = _ref.dataIndex, | ||
48 | + children = _ref.children, | ||
49 | + deleteItem = _ref.deleteItem, | ||
50 | + addItem = _ref.addItem, | ||
51 | + moveItemUp = _ref.moveItemUp, | ||
52 | + moveItemDown = _ref.moveItemDown, | ||
53 | + flatten = _ref.flatten, | ||
54 | + schema = _ref.schema, | ||
55 | + listData = _ref.listData, | ||
56 | + changeList = _ref.changeList; | ||
57 | + var _schema$props = schema.props, | ||
58 | + props = _schema$props === void 0 ? {} : _schema$props, | ||
59 | + _schema$itemProps = schema.itemProps, | ||
60 | + itemProps = _schema$itemProps === void 0 ? {} : _schema$itemProps; | ||
61 | + | ||
62 | + var _props$scrollY = props.scrollY, | ||
63 | + scrollY = _props$scrollY === void 0 ? 600 : _props$scrollY, | ||
64 | + _summary = props.summary, | ||
65 | + rest = _objectWithoutProperties(props, _excluded); | ||
66 | + | ||
67 | + var _useVT = useVT(function () { | ||
68 | + return { | ||
69 | + scroll: { | ||
70 | + y: scrollY | ||
71 | + } | ||
72 | + }; | ||
73 | + }, []), | ||
74 | + _useVT2 = _slicedToArray(_useVT, 2), | ||
75 | + vt = _useVT2[0], | ||
76 | + set_components = _useVT2[1]; | ||
77 | + | ||
78 | + var dataSource = displayList.map(function (item, idx) { | ||
79 | + return { | ||
80 | + index: idx | ||
81 | + }; | ||
82 | + }); | ||
83 | + var columns = children.map(function (child) { | ||
84 | + var item = flatten[child]; | ||
85 | + var schema = item && item.schema || {}; | ||
86 | + return { | ||
87 | + dataIndex: child, | ||
88 | + width: schema.width || FIELD_LENGTH, | ||
89 | + fixed: schema.fixed, | ||
90 | + title: schema.required ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", { | ||
91 | + className: "fr-label-required" | ||
92 | + }, " *"), /*#__PURE__*/React.createElement("span", null, schema.title)) : schema.title, | ||
93 | + render: function render(value, record, index) { | ||
94 | + // Check: record.index 似乎是antd自己会给的,不错哦 | ||
95 | + var childIndex = [].concat(_toConsumableArray(dataIndex), [record.index]); | ||
96 | + return /*#__PURE__*/React.createElement(Core, { | ||
97 | + hideTitle: true, | ||
98 | + displayType: "inline", | ||
99 | + key: index.toString(), | ||
100 | + id: child, | ||
101 | + dataIndex: childIndex | ||
102 | + }); | ||
103 | + } | ||
104 | + }; | ||
105 | + }); | ||
106 | + | ||
107 | + if (!props.hideDelete || Array.isArray(itemProps.buttons)) { | ||
108 | + columns.push({ | ||
109 | + title: '操作', | ||
110 | + key: '$action', | ||
111 | + fixed: 'right', | ||
112 | + align: 'center', | ||
113 | + width: '60px', | ||
114 | + render: function render(value, record, idx) { | ||
115 | + return /*#__PURE__*/React.createElement(React.Fragment, null, !props.hideDelete && /*#__PURE__*/React.createElement(_Popconfirm, { | ||
116 | + title: "\u786E\u5B9A\u5220\u9664?", | ||
117 | + onConfirm: function onConfirm() { | ||
118 | + return deleteItem(idx); | ||
119 | + }, | ||
120 | + okText: "\u786E\u5B9A", | ||
121 | + cancelText: "\u53D6\u6D88" | ||
122 | + }, /*#__PURE__*/React.createElement("a", null, "\u5220\u9664")), !props.hideMove && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_ArrowUpOutlined, { | ||
123 | + style: { | ||
124 | + color: '#1890ff', | ||
125 | + fontSize: 16, | ||
126 | + marginLeft: 8 | ||
127 | + }, | ||
128 | + onClick: function onClick() { | ||
129 | + return moveItemUp(idx); | ||
130 | + } | ||
131 | + }), /*#__PURE__*/React.createElement(_ArrowDownOutlined, { | ||
132 | + style: { | ||
133 | + color: '#1890ff', | ||
134 | + fontSize: 16, | ||
135 | + marginLeft: 8 | ||
136 | + }, | ||
137 | + onClick: function onClick() { | ||
138 | + return moveItemDown(idx); | ||
139 | + } | ||
140 | + })), Array.isArray(itemProps.buttons) ? itemProps.buttons.map(function (item, idx) { | ||
141 | + var callback = item.callback, | ||
142 | + text = item.text, | ||
143 | + html = item.html; | ||
144 | + | ||
145 | + var onClick = function onClick() {}; | ||
146 | + | ||
147 | + if (typeof window[callback] === 'function') { | ||
148 | + onClick = function onClick() { | ||
149 | + window[callback]({ | ||
150 | + value: listData, | ||
151 | + onChange: changeList, | ||
152 | + schema: schema | ||
153 | + }); | ||
154 | + }; | ||
155 | + } | ||
156 | + | ||
157 | + return /*#__PURE__*/React.createElement("a", { | ||
158 | + key: idx.toString(), | ||
159 | + style: { | ||
160 | + marginLeft: 8 | ||
161 | + }, | ||
162 | + size: "small", | ||
163 | + onClick: onClick | ||
164 | + }, /*#__PURE__*/React.createElement("span", { | ||
165 | + dangerouslySetInnerHTML: { | ||
166 | + __html: html || text | ||
167 | + } | ||
168 | + })); | ||
169 | + }) : null); | ||
170 | + } | ||
171 | + }); | ||
172 | + } | ||
173 | + | ||
174 | + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Table, _extends({ | ||
175 | + rowKey: "index", | ||
176 | + scroll: { | ||
177 | + y: scrollY, | ||
178 | + x: 'max-content' | ||
179 | + }, | ||
180 | + components: vt, | ||
181 | + size: "small", | ||
182 | + columns: columns, | ||
183 | + dataSource: dataSource, | ||
184 | + pagination: false, | ||
185 | + summary: function summary() { | ||
186 | + if (!_summary) { | ||
187 | + return null; | ||
188 | + } | ||
189 | + | ||
190 | + return _summary(listData); | ||
191 | + } | ||
192 | + }, rest)), /*#__PURE__*/React.createElement("div", { | ||
193 | + className: "w-100 mt2" | ||
194 | + }, !props.hideAdd && /*#__PURE__*/React.createElement(_Button, { | ||
195 | + type: "link", | ||
196 | + icon: /*#__PURE__*/React.createElement(_PlusOutlined, null), | ||
197 | + onClick: addItem | ||
198 | + }, "\u65B0\u589E"), Array.isArray(props.buttons) ? props.buttons.map(function (item, idx) { | ||
199 | + var callback = item.callback, | ||
200 | + text = item.text, | ||
201 | + html = item.html; | ||
202 | + | ||
203 | + var onClick = function onClick() {}; | ||
204 | + | ||
205 | + if (typeof window[callback] === 'function') { | ||
206 | + onClick = function onClick() { | ||
207 | + window[callback]({ | ||
208 | + value: listData, | ||
209 | + onChange: changeList, | ||
210 | + schema: schema | ||
211 | + }); | ||
212 | + }; | ||
213 | + } | ||
214 | + | ||
215 | + return /*#__PURE__*/React.createElement(_Button, { | ||
216 | + key: idx.toString(), | ||
217 | + style: { | ||
218 | + marginLeft: 8 | ||
219 | + }, | ||
220 | + size: "small", | ||
221 | + onClick: onClick | ||
222 | + }, /*#__PURE__*/React.createElement("span", { | ||
223 | + dangerouslySetInnerHTML: { | ||
224 | + __html: html || text | ||
225 | + } | ||
226 | + })); | ||
227 | + }) : null)); | ||
228 | +}; | ||
229 | + | ||
230 | +export default VirtualList; |
1 | +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } | ||
2 | + | ||
3 | +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } | ||
4 | + | ||
5 | +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
6 | + | ||
7 | +function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } | ||
8 | + | ||
9 | +function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | ||
10 | + | ||
11 | +function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | ||
12 | + | ||
13 | +function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } | ||
14 | + | ||
15 | +function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } | ||
16 | + | ||
17 | +function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
18 | + | ||
19 | +/* eslint-disable jsx-a11y/anchor-is-valid */ | ||
20 | +import React from 'react'; | ||
21 | +import { get } from 'lodash-es'; | ||
22 | +import { useStore, useTools } from '../../../hooks'; | ||
23 | +import { getDataPath, getKeyFromPath, getDisplayValue } from '../../../utils'; // import ArrowDown from '../../../components/ArrowDown'; | ||
24 | + | ||
25 | +import "./list.css"; | ||
26 | +import SimpleList from './SimpleList'; | ||
27 | +import CardList from './CardList'; | ||
28 | +import TableList from './TableList'; | ||
29 | +import DrawerList from './DrawerList'; | ||
30 | +import VirtualList from './VirtualList'; | ||
31 | +import TabList from './TabList'; | ||
32 | + | ||
33 | +var RenderList = function RenderList(_ref) { | ||
34 | + var parentId = _ref.parentId, | ||
35 | + _ref$schema = _ref.schema, | ||
36 | + schema = _ref$schema === void 0 ? {} : _ref$schema, | ||
37 | + _ref$dataIndex = _ref.dataIndex, | ||
38 | + dataIndex = _ref$dataIndex === void 0 ? [] : _ref$dataIndex, | ||
39 | + _ref$children = _ref.children, | ||
40 | + children = _ref$children === void 0 ? [] : _ref$children, | ||
41 | + errorFields = _ref.errorFields, | ||
42 | + displayType = _ref.displayType; | ||
43 | + | ||
44 | + var _useStore = useStore(), | ||
45 | + formData = _useStore.formData, | ||
46 | + flatten = _useStore.flatten; | ||
47 | + | ||
48 | + var _useTools = useTools(), | ||
49 | + onItemChange = _useTools.onItemChange, | ||
50 | + removeTouched = _useTools.removeTouched; | ||
51 | + | ||
52 | + var renderWidget = 'list'; | ||
53 | + | ||
54 | + try { | ||
55 | + renderWidget = schema.widget; | ||
56 | + } catch (error) {} // 计算 list对应的formData | ||
57 | + | ||
58 | + | ||
59 | + var dataPath = getDataPath(parentId, dataIndex); | ||
60 | + var listData; | ||
61 | + | ||
62 | + if (typeof dataPath === 'string') { | ||
63 | + // TODO: listData会有不少“窟窿”,submit 的时候,listData 需要补齐 or filter | ||
64 | + listData = get(formData, dataPath); | ||
65 | + } | ||
66 | + | ||
67 | + var displayList = Array.isArray(listData) ? listData : [{}]; | ||
68 | + | ||
69 | + var changeList = function changeList(newList) { | ||
70 | + onItemChange(dataPath, newList); | ||
71 | + }; | ||
72 | + | ||
73 | + var addItem = function addItem() { | ||
74 | + var newList = [].concat(_toConsumableArray(displayList), [{}]); | ||
75 | + var newIndex = newList.length - 1; | ||
76 | + onItemChange(dataPath, newList); | ||
77 | + return newIndex; | ||
78 | + }; | ||
79 | + | ||
80 | + var copyItem = function copyItem(idx) { | ||
81 | + var newItem = displayList[idx]; | ||
82 | + var newList = [].concat(_toConsumableArray(displayList.slice(0, idx)), [newItem], _toConsumableArray(displayList.slice(idx))); | ||
83 | + onItemChange(dataPath, JSON.parse(JSON.stringify(newList))); | ||
84 | + }; | ||
85 | + | ||
86 | + var deleteItem = function deleteItem(idx) { | ||
87 | + // TODO: 删除元素的时候,也需要delete相对于的校验信息(errorFields) | ||
88 | + // remark: 删除时,不存在的item需要补齐,用null | ||
89 | + var newList = displayList.filter(function (item, kdx) { | ||
90 | + return kdx !== idx; | ||
91 | + }); | ||
92 | + onItemChange(dataPath, newList); | ||
93 | + removeTouched("".concat(dataPath, "[").concat(idx, "]")); | ||
94 | + }; //TODO1: 上线翻页要正确!!现在是错的 | ||
95 | + | ||
96 | + | ||
97 | + var moveItemUp = function moveItemUp(idx) { | ||
98 | + if (idx === 0) return; | ||
99 | + var currentItem = displayList[idx]; | ||
100 | + var itemAbove = displayList[idx - 1]; | ||
101 | + var newList = displayList; | ||
102 | + newList[idx] = itemAbove; | ||
103 | + newList[idx - 1] = currentItem; | ||
104 | + onItemChange(dataPath, newList); // TODO: 这块懒了,之后要处理一下 | ||
105 | + | ||
106 | + removeTouched("".concat(dataPath, "[").concat(idx, "]")); | ||
107 | + }; | ||
108 | + | ||
109 | + var moveItemDown = function moveItemDown(idx) { | ||
110 | + if (idx >= displayList.length - 1) return; | ||
111 | + var currentItem = displayList[idx]; | ||
112 | + var itemBelow = displayList[idx + 1]; | ||
113 | + var newList = displayList; | ||
114 | + newList[idx] = itemBelow; | ||
115 | + newList[idx + 1] = currentItem; | ||
116 | + onItemChange(dataPath, newList); // TODO: 这块懒了,之后要处理一下 | ||
117 | + | ||
118 | + removeTouched("".concat(dataPath, "[").concat(idx, "]")); | ||
119 | + }; | ||
120 | + | ||
121 | + var itemSchema = { | ||
122 | + type: 'object', | ||
123 | + // properties: (schema.items && schema.items.properties) || {}, | ||
124 | + properties: {}, | ||
125 | + props: schema.props || {}, | ||
126 | + $id: schema.$id | ||
127 | + }; | ||
128 | + var itemFlatten = { | ||
129 | + schema: itemSchema, | ||
130 | + children: children | ||
131 | + }; | ||
132 | + | ||
133 | + var getFieldsProps = function getFieldsProps(idx, extraProps) { | ||
134 | + return _objectSpread({ | ||
135 | + _item: itemFlatten, | ||
136 | + dataIndex: [].concat(_toConsumableArray(dataIndex), [idx]) | ||
137 | + }, extraProps); | ||
138 | + }; | ||
139 | + | ||
140 | + var displayProps = { | ||
141 | + displayList: displayList, | ||
142 | + changeList: changeList, | ||
143 | + schema: schema, | ||
144 | + dataPath: dataPath, | ||
145 | + dataIndex: dataIndex, | ||
146 | + children: children, | ||
147 | + deleteItem: deleteItem, | ||
148 | + addItem: addItem, | ||
149 | + copyItem: copyItem, | ||
150 | + moveItemDown: moveItemDown, | ||
151 | + moveItemUp: moveItemUp, | ||
152 | + listData: listData, | ||
153 | + flatten: flatten, | ||
154 | + errorFields: errorFields, | ||
155 | + displayType: displayType, | ||
156 | + getFieldsProps: getFieldsProps | ||
157 | + }; | ||
158 | + | ||
159 | + switch (renderWidget) { | ||
160 | + case 'list0': | ||
161 | + case 'cardList': | ||
162 | + return /*#__PURE__*/React.createElement(CardList, displayProps); | ||
163 | + | ||
164 | + case 'list1': | ||
165 | + case 'simpleList': | ||
166 | + return /*#__PURE__*/React.createElement(SimpleList, displayProps); | ||
167 | + | ||
168 | + case 'list2': | ||
169 | + case 'tableList': | ||
170 | + return /*#__PURE__*/React.createElement(TableList, displayProps); | ||
171 | + | ||
172 | + case 'list3': | ||
173 | + case 'drawerList': | ||
174 | + return /*#__PURE__*/React.createElement(DrawerList, displayProps); | ||
175 | + | ||
176 | + case 'list4': | ||
177 | + case 'virtualList': | ||
178 | + return /*#__PURE__*/React.createElement(VirtualList, displayProps); | ||
179 | + | ||
180 | + case 'tabList': | ||
181 | + return /*#__PURE__*/React.createElement(TabList, displayProps); | ||
182 | + | ||
183 | + default: | ||
184 | + return /*#__PURE__*/React.createElement(CardList, displayProps); | ||
185 | + } | ||
186 | +}; | ||
187 | + | ||
188 | +export default RenderList; |
1 | +.fr-container .fr-card-item { | ||
2 | + border: 1px solid rgba(0, 0, 0, 0.1); | ||
3 | + border-radius: 4px; | ||
4 | + padding: 10px 12px 4px 12px; | ||
5 | + margin-bottom: 8px; | ||
6 | + position: relative; | ||
7 | + display: flex; | ||
8 | +} | ||
9 | +.fr-container .fr-card-item-row { | ||
10 | + padding-top: 34px; | ||
11 | +} | ||
12 | +.fr-container .fr-card-index { | ||
13 | + position: absolute; | ||
14 | + top: 0; | ||
15 | + left: 0; | ||
16 | + padding-left: 4px; | ||
17 | + padding-right: 6px; | ||
18 | + border-bottom-right-radius: 8px; | ||
19 | + border-top-left-radius: 3px; | ||
20 | + background-color: rgba(0, 0, 0, 0.36); | ||
21 | + font-size: 8px; | ||
22 | + color: #fff; | ||
23 | +} | ||
24 | +.fr-container .fr-card-toolbar { | ||
25 | + position: absolute; | ||
26 | + top: 8px; | ||
27 | + right: 8px; | ||
28 | + display: flex; | ||
29 | +} |
1 | +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | ||
2 | + | ||
3 | +import React from 'react'; | ||
4 | +import Core from '../index'; | ||
5 | + | ||
6 | +var RenderObject = function RenderObject(_ref) { | ||
7 | + var _ref$children = _ref.children, | ||
8 | + children = _ref$children === void 0 ? [] : _ref$children, | ||
9 | + _ref$dataIndex = _ref.dataIndex, | ||
10 | + dataIndex = _ref$dataIndex === void 0 ? [] : _ref$dataIndex, | ||
11 | + displayType = _ref.displayType, | ||
12 | + hideTitle = _ref.hideTitle; | ||
13 | + return /*#__PURE__*/React.createElement(React.Fragment, null, children.map(function (child, i) { | ||
14 | + var FRProps = { | ||
15 | + displayType: displayType, | ||
16 | + id: child, | ||
17 | + dataIndex: dataIndex, | ||
18 | + hideTitle: hideTitle | ||
19 | + }; | ||
20 | + return /*#__PURE__*/React.createElement(Core, _extends({ | ||
21 | + key: i.toString() | ||
22 | + }, FRProps)); | ||
23 | + })); | ||
24 | +}; | ||
25 | + | ||
26 | +export default RenderObject; |
1 | +import React from 'react'; | ||
2 | +import { translateMessage } from '../../utils'; | ||
3 | +import "./ErrorMessage.css"; | ||
4 | + | ||
5 | +var ErrorMessage = function ErrorMessage(_ref) { | ||
6 | + var message = _ref.message, | ||
7 | + schema = _ref.schema, | ||
8 | + softHidden = _ref.softHidden, | ||
9 | + hardHidden = _ref.hardHidden; | ||
10 | + var msg = ''; | ||
11 | + if (typeof message === 'string') msg = message; | ||
12 | + | ||
13 | + if (Array.isArray(message)) { | ||
14 | + msg = message[0] || ''; | ||
15 | + } | ||
16 | + | ||
17 | + msg = translateMessage(msg, schema); | ||
18 | + if (hardHidden) return /*#__PURE__*/React.createElement("div", { | ||
19 | + className: "error-message" | ||
20 | + }); | ||
21 | + return !msg && softHidden ? null : /*#__PURE__*/React.createElement("div", { | ||
22 | + className: "error-message" | ||
23 | + }, msg); | ||
24 | +}; | ||
25 | + | ||
26 | +export default ErrorMessage; |
1 | +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } | ||
2 | + | ||
3 | +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } | ||
4 | + | ||
5 | +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
6 | + | ||
7 | +import React, { Suspense } from 'react'; | ||
8 | +import { getWidgetName, extraSchemaList } from '../../mapping'; | ||
9 | +import { useTools, useStore } from '../../hooks'; | ||
10 | +import { transformProps } from '../../createWidget'; | ||
11 | +import { isObjType, isListType, isObject } from '../../utils'; | ||
12 | + | ||
13 | +var ErrorSchema = function ErrorSchema(schema) { | ||
14 | + return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", { | ||
15 | + style: { | ||
16 | + color: 'red' | ||
17 | + } | ||
18 | + }, "schema\u672A\u5339\u914D\u5230\u5C55\u793A\u7EC4\u4EF6\uFF1A"), /*#__PURE__*/React.createElement("div", null, JSON.stringify(schema))); | ||
19 | +}; | ||
20 | + | ||
21 | +var ExtendedWidget = function ExtendedWidget(_ref) { | ||
22 | + var schema = _ref.schema, | ||
23 | + onChange = _ref.onChange, | ||
24 | + value = _ref.value, | ||
25 | + dependValues = _ref.dependValues, | ||
26 | + children = _ref.children, | ||
27 | + onItemChange = _ref.onItemChange, | ||
28 | + formData = _ref.formData, | ||
29 | + getValue = _ref.getValue, | ||
30 | + readOnly = _ref.readOnly, | ||
31 | + dataPath = _ref.dataPath, | ||
32 | + disabled = _ref.disabled, | ||
33 | + dataIndex = _ref.dataIndex; | ||
34 | + | ||
35 | + var _useTools = useTools(), | ||
36 | + widgets = _useTools.widgets, | ||
37 | + mapping = _useTools.mapping, | ||
38 | + setValueByPath = _useTools.setValueByPath, | ||
39 | + getSchemaByPath = _useTools.getSchemaByPath, | ||
40 | + setSchemaByPath = _useTools.setSchemaByPath, | ||
41 | + setSchema = _useTools.setSchema, | ||
42 | + setValues = _useTools.setValues, | ||
43 | + getValues = _useTools.getValues, | ||
44 | + resetFields = _useTools.resetFields, | ||
45 | + setErrorFields = _useTools.setErrorFields, | ||
46 | + removeErrorField = _useTools.removeErrorField; | ||
47 | + | ||
48 | + var _useStore = useStore(), | ||
49 | + globalProps = _useStore.globalProps; // if (isObjType(schema)) { | ||
50 | + // return <Map value={value} onChange={onChange} children={children} />; | ||
51 | + // } | ||
52 | + // if (isListType(schema)) { | ||
53 | + // return 'haha'; | ||
54 | + // } | ||
55 | + // return <Input value={value} onChange={e => onChange(e.target.value)} />; | ||
56 | + // TODO: calc widget, better way? | ||
57 | + // let widgetName = useMemo(() => getWidgetName(schema, mapping), [ | ||
58 | + // JSON.stringify(schema), | ||
59 | + // ]); | ||
60 | + | ||
61 | + | ||
62 | + var widgetName = getWidgetName(schema, mapping); | ||
63 | + var customName = schema.widget || schema['ui:widget']; | ||
64 | + | ||
65 | + if (customName && widgets[customName]) { | ||
66 | + widgetName = customName; | ||
67 | + } | ||
68 | + | ||
69 | + var readOnlyName = schema.readOnlyWidget || 'html'; | ||
70 | + | ||
71 | + if (readOnly && !isObjType(schema) && !isListType(schema)) { | ||
72 | + widgetName = readOnlyName; | ||
73 | + } | ||
74 | + | ||
75 | + if (!widgetName) { | ||
76 | + widgetName = 'input'; | ||
77 | + return /*#__PURE__*/React.createElement(ErrorSchema, { | ||
78 | + schema: schema | ||
79 | + }); | ||
80 | + } | ||
81 | + | ||
82 | + var Widget = widgets[widgetName]; | ||
83 | + var extraSchema = extraSchemaList[widgetName]; | ||
84 | + | ||
85 | + var widgetProps = _objectSpread(_objectSpread({ | ||
86 | + schema: _objectSpread(_objectSpread({}, schema), extraSchema), | ||
87 | + onChange: onChange, | ||
88 | + value: value, | ||
89 | + children: children, | ||
90 | + disabled: disabled, | ||
91 | + readOnly: readOnly | ||
92 | + }, schema.props), globalProps); | ||
93 | + | ||
94 | + if (schema.type === 'string' && typeof schema.max === 'number') { | ||
95 | + widgetProps.maxLength = schema.max; | ||
96 | + } | ||
97 | + | ||
98 | + ['title', 'placeholder', 'disabled', 'format'].forEach(function (key) { | ||
99 | + if (schema[key]) { | ||
100 | + widgetProps[key] = schema[key]; | ||
101 | + } | ||
102 | + }); | ||
103 | + | ||
104 | + if (schema.props) { | ||
105 | + widgetProps = _objectSpread(_objectSpread({}, widgetProps), schema.props); | ||
106 | + } | ||
107 | + | ||
108 | + Object.keys(schema).forEach(function (key) { | ||
109 | + if (typeof key === 'string' && key.toLowerCase().indexOf('props') > -1 && key.length > 5) { | ||
110 | + widgetProps[key] = schema[key]; | ||
111 | + } | ||
112 | + }); // 支持 addonAfter 为自定义组件的情况 | ||
113 | + | ||
114 | + if (isObject(widgetProps.addonAfter) && widgetProps.addonAfter.widget) { | ||
115 | + var AddonAfterWidget = widgets[widgetProps.addonAfter.widget]; | ||
116 | + widgetProps.addonAfter = /*#__PURE__*/React.createElement(AddonAfterWidget, schema); | ||
117 | + } | ||
118 | + | ||
119 | + var hideSelf = function hideSelf() { | ||
120 | + var hidden = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true; | ||
121 | + setSchemaByPath(schema.$id, { | ||
122 | + hidden: hidden | ||
123 | + }); | ||
124 | + }; // 避免传组件不接受的props,按情况传多余的props | ||
125 | + | ||
126 | + | ||
127 | + widgetProps.addons = { | ||
128 | + dependValues: dependValues, | ||
129 | + onItemChange: onItemChange, | ||
130 | + getValue: getValue, | ||
131 | + formData: formData, | ||
132 | + dataPath: dataPath, | ||
133 | + dataIndex: dataIndex, | ||
134 | + setValueByPath: setValueByPath, | ||
135 | + setValue: setValueByPath, | ||
136 | + getSchemaByPath: getSchemaByPath, | ||
137 | + setSchemaByPath: setSchemaByPath, | ||
138 | + setSchema: setSchema, | ||
139 | + setValues: setValues, | ||
140 | + getValues: getValues, | ||
141 | + resetFields: resetFields, | ||
142 | + setErrorFields: setErrorFields, | ||
143 | + removeErrorField: removeErrorField, | ||
144 | + hideSelf: hideSelf | ||
145 | + }; | ||
146 | + var finalProps = transformProps(widgetProps); | ||
147 | + return /*#__PURE__*/React.createElement(Suspense, { | ||
148 | + fallback: /*#__PURE__*/React.createElement("div", null) | ||
149 | + }, /*#__PURE__*/React.createElement("div", { | ||
150 | + className: "fr-item-wrapper" | ||
151 | + }, /*#__PURE__*/React.createElement(Widget, finalProps))); | ||
152 | +}; | ||
153 | + | ||
154 | +var areEqual = function areEqual(prev, current) { | ||
155 | + if (prev.schema && current.schema) { | ||
156 | + if (prev.schema.$id === '#') { | ||
157 | + return false; | ||
158 | + } | ||
159 | + | ||
160 | + if (prev.schema.hidden && current.schema.hidden) { | ||
161 | + return true; | ||
162 | + } | ||
163 | + } | ||
164 | + | ||
165 | + if (prev.readOnly !== current.readOnly) { | ||
166 | + return false; | ||
167 | + } | ||
168 | + | ||
169 | + if (prev.disabled !== current.disabled) { | ||
170 | + return false; | ||
171 | + } | ||
172 | + | ||
173 | + if (JSON.stringify(prev.dependValues) !== JSON.stringify(current.dependValues)) { | ||
174 | + return false; | ||
175 | + } | ||
176 | + | ||
177 | + if (isObjType(prev.schema) && isObjType(current.schema)) { | ||
178 | + return false; | ||
179 | + } | ||
180 | + | ||
181 | + if (JSON.stringify(prev.value) === JSON.stringify(current.value) && JSON.stringify(prev.schema) === JSON.stringify(current.schema)) { | ||
182 | + return true; | ||
183 | + } | ||
184 | + | ||
185 | + return false; | ||
186 | +}; | ||
187 | + | ||
188 | +export default /*#__PURE__*/React.memo(ExtendedWidget, areEqual); |
1 | +function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } | ||
2 | + | ||
3 | +import React from 'react'; | ||
4 | +import { useTools } from '../../hooks'; | ||
5 | +import "./Extra.css"; | ||
6 | + | ||
7 | +var Extra = function Extra(_ref) { | ||
8 | + var schema = _ref.schema; | ||
9 | + var extra = schema.extra; | ||
10 | + | ||
11 | + var _useTools = useTools(), | ||
12 | + widgets = _useTools.widgets; | ||
13 | + | ||
14 | + if (!extra) return null; // widget 这个api也可以不对外 | ||
15 | + | ||
16 | + var widgetName = extra.widget; | ||
17 | + var Widget = widgets[widgetName]; | ||
18 | + if (Widget) return /*#__PURE__*/React.createElement(Widget, { | ||
19 | + schema: schema | ||
20 | + }); | ||
21 | + var __html = ''; | ||
22 | + | ||
23 | + if (typeof extra === 'string') { | ||
24 | + __html = extra; | ||
25 | + } // 内部BU使用的口子,这个api不对外,也没有必要 | ||
26 | + | ||
27 | + | ||
28 | + if (_typeof(extra) === 'object' && extra.text) { | ||
29 | + __html = extra.text; | ||
30 | + } | ||
31 | + | ||
32 | + return __html && /*#__PURE__*/React.createElement("div", { | ||
33 | + className: "fr-form-item-extra", | ||
34 | + dangerouslySetInnerHTML: { | ||
35 | + __html: __html | ||
36 | + } | ||
37 | + }); | ||
38 | +}; | ||
39 | + | ||
40 | +export default Extra; |
1 | +import React from 'react'; | ||
2 | +import { useStore2 } from '../../hooks'; | ||
3 | +import { isCheckBoxType } from '../../utils'; | ||
4 | + | ||
5 | +var Description = function Description(_ref) { | ||
6 | + var displayType = _ref.displayType, | ||
7 | + schema = _ref.schema; | ||
8 | + var description = schema.description, | ||
9 | + descType = schema.descType; | ||
10 | + if (!description) return null; | ||
11 | + | ||
12 | + switch (displayType) { | ||
13 | + case 'row': | ||
14 | + return /*#__PURE__*/React.createElement("span", { | ||
15 | + className: "fr-tooltip-toggle", | ||
16 | + "aria-label": description | ||
17 | + }, /*#__PURE__*/React.createElement("i", { | ||
18 | + className: "fr-tooltip-icon" | ||
19 | + }), /*#__PURE__*/React.createElement("div", { | ||
20 | + className: "fr-tooltip-container" | ||
21 | + }, /*#__PURE__*/React.createElement("i", { | ||
22 | + className: "fr-tooltip-triangle" | ||
23 | + }), description)); | ||
24 | + | ||
25 | + case 'inline': | ||
26 | + return null; | ||
27 | + | ||
28 | + default: | ||
29 | + if (descType === 'icon') { | ||
30 | + return /*#__PURE__*/React.createElement("span", { | ||
31 | + className: "fr-tooltip-toggle", | ||
32 | + "aria-label": description | ||
33 | + }, /*#__PURE__*/React.createElement("i", { | ||
34 | + className: "fr-tooltip-icon" | ||
35 | + }), /*#__PURE__*/React.createElement("div", { | ||
36 | + className: "fr-tooltip-container" | ||
37 | + }, /*#__PURE__*/React.createElement("i", { | ||
38 | + className: "fr-tooltip-triangle" | ||
39 | + }), description)); | ||
40 | + } | ||
41 | + | ||
42 | + return /*#__PURE__*/React.createElement("span", { | ||
43 | + className: "fr-desc ml2" | ||
44 | + }, "( ".concat(description, " )")); | ||
45 | + } | ||
46 | +}; | ||
47 | + | ||
48 | +var Title = function Title(_ref2) { | ||
49 | + var labelClass = _ref2.labelClass, | ||
50 | + labelStyle = _ref2.labelStyle, | ||
51 | + schema = _ref2.schema, | ||
52 | + displayType = _ref2.displayType; | ||
53 | + | ||
54 | + var _useStore = useStore2(), | ||
55 | + globalDisplayType = _useStore.displayType, | ||
56 | + readOnly = _useStore.readOnly; | ||
57 | + | ||
58 | + var title = schema.title, | ||
59 | + required = schema.required, | ||
60 | + type = schema.type; | ||
61 | + var isObjType = type === 'object'; | ||
62 | + | ||
63 | + var _displayType = schema.displayType || displayType || globalDisplayType || 'column'; | ||
64 | + | ||
65 | + return /*#__PURE__*/React.createElement("div", { | ||
66 | + className: labelClass, | ||
67 | + style: labelStyle | ||
68 | + }, title ? /*#__PURE__*/React.createElement("label", { | ||
69 | + className: "fr-label-title ".concat(isCheckBoxType(schema, readOnly) || _displayType === 'column' ? 'no-colon' : '') // checkbox不带冒号 | ||
70 | + , | ||
71 | + title: title | ||
72 | + }, required === true && /*#__PURE__*/React.createElement("span", { | ||
73 | + className: "fr-label-required" | ||
74 | + }, " *"), /*#__PURE__*/React.createElement("span", { | ||
75 | + className: "".concat(isObjType ? 'b' : '', " ").concat(_displayType === 'column' ? 'flex-none' : '') | ||
76 | + }, /*#__PURE__*/React.createElement("span", { | ||
77 | + dangerouslySetInnerHTML: { | ||
78 | + __html: title | ||
79 | + } | ||
80 | + })), /*#__PURE__*/React.createElement(Description, { | ||
81 | + schema: schema, | ||
82 | + displayType: _displayType | ||
83 | + })) : null); | ||
84 | +}; | ||
85 | + | ||
86 | +export default Title; |
1 | +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | ||
2 | + | ||
3 | +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
4 | + | ||
5 | +function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } | ||
6 | + | ||
7 | +function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | ||
8 | + | ||
9 | +function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | ||
10 | + | ||
11 | +function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } | ||
12 | + | ||
13 | +function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } | ||
14 | + | ||
15 | +function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
16 | + | ||
17 | +import React, { useEffect, useRef } from 'react'; | ||
18 | +import { useStore, useStore2, useTools } from '../../hooks'; | ||
19 | +import useDebouncedCallback from '../../useDebounce'; | ||
20 | +import { getValueByPath, isCheckBoxType, isObjType } from '../../utils'; | ||
21 | +import ErrorMessage from './ErrorMessage'; | ||
22 | +import Extra from './Extra'; | ||
23 | +import FieldTitle from './Title'; | ||
24 | +import { validateField } from '../../validator'; | ||
25 | +import ExtendedWidget from './ExtendedWidget'; // TODO: 之后不要直接用get,收口到一个内部方法getValue,便于全局 ctrl + f 查找 | ||
26 | + | ||
27 | +var RenderField = function RenderField(props) { | ||
28 | + var $id = props.$id, | ||
29 | + dataIndex = props.dataIndex, | ||
30 | + dataPath = props.dataPath, | ||
31 | + _value = props._value, | ||
32 | + dependValues = props.dependValues, | ||
33 | + _schema = props._schema, | ||
34 | + labelClass = props.labelClass, | ||
35 | + labelStyle = props.labelStyle, | ||
36 | + _contentClass = props.contentClass, | ||
37 | + children = props.children, | ||
38 | + _props$errorFields = props.errorFields, | ||
39 | + errorFields = _props$errorFields === void 0 ? [] : _props$errorFields, | ||
40 | + hideTitle = props.hideTitle, | ||
41 | + displayType = props.displayType; | ||
42 | + | ||
43 | + var _useStore = useStore(), | ||
44 | + formData = _useStore.formData, | ||
45 | + flatten = _useStore.flatten; | ||
46 | + | ||
47 | + var _useStore2 = useStore2(), | ||
48 | + debounceInput = _useStore2.debounceInput, | ||
49 | + readOnly = _useStore2.readOnly, | ||
50 | + disabled = _useStore2.disabled, | ||
51 | + showValidate = _useStore2.showValidate, | ||
52 | + validateMessages = _useStore2.validateMessages, | ||
53 | + locale = _useStore2.locale; | ||
54 | + | ||
55 | + var _useTools = useTools(), | ||
56 | + onValuesChange = _useTools.onValuesChange, | ||
57 | + onItemChange = _useTools.onItemChange, | ||
58 | + setEditing = _useTools.setEditing, | ||
59 | + touchKey = _useTools.touchKey, | ||
60 | + _setErrors = _useTools._setErrors; | ||
61 | + | ||
62 | + var formDataRef = useRef(); | ||
63 | + formDataRef.current = formData; // console.log('<renderField>', $id); | ||
64 | + | ||
65 | + var errObj = errorFields.find(function (err) { | ||
66 | + return err.name === dataPath; | ||
67 | + }); | ||
68 | + var errorMessage = errObj && errObj.error; // 是一个list | ||
69 | + | ||
70 | + var hasError = Array.isArray(errorMessage) && errorMessage.length > 0; // 补上这个class,会自动让下面所有的展示ui变红! | ||
71 | + | ||
72 | + var contentClass = hasError && showValidate ? _contentClass + ' ant-form-item-has-error' : _contentClass; | ||
73 | + var contentStyle = {}; | ||
74 | + var debouncedSetEditing = useDebouncedCallback(setEditing, 350); | ||
75 | + | ||
76 | + var _readOnly = readOnly !== undefined ? readOnly : _schema.readOnly; | ||
77 | + | ||
78 | + var _disabled = disabled !== undefined ? disabled : _schema.disabled; | ||
79 | + | ||
80 | + var removeDupErrors = function removeDupErrors(arr) { | ||
81 | + if (!Array.isArray(arr)) { | ||
82 | + console.log('in removeDups: param is not an array'); | ||
83 | + return; | ||
84 | + } | ||
85 | + | ||
86 | + var array = []; | ||
87 | + | ||
88 | + for (var i = 0; i < arr.length; i++) { | ||
89 | + var sameNameIndex = array.findIndex(function (item) { | ||
90 | + return item.name === arr[i].name; | ||
91 | + }); | ||
92 | + | ||
93 | + if (sameNameIndex > -1) { | ||
94 | + var sameNameItem = array[sameNameIndex]; | ||
95 | + var error1 = sameNameItem.error; | ||
96 | + var error2 = arr[i].error; | ||
97 | + array[sameNameIndex] = { | ||
98 | + name: sameNameItem.name, | ||
99 | + error: error1.length > 0 && error2.length > 0 ? [].concat(_toConsumableArray(error1), _toConsumableArray(error2)) : [] | ||
100 | + }; | ||
101 | + } else { | ||
102 | + array.push(arr[i]); | ||
103 | + } | ||
104 | + } | ||
105 | + | ||
106 | + return array.filter(function (item) { | ||
107 | + return Array.isArray(item.error) && item.error.length > 0; | ||
108 | + }); | ||
109 | + }; // TODO: 优化一下,只有touch还是false的时候,setTouched | ||
110 | + | ||
111 | + | ||
112 | + var onChange = function onChange(value) { | ||
113 | + // 动过的key,算被touch了, 这里之后要考虑动的来源 | ||
114 | + touchKey(dataPath); // 开始编辑,节流 | ||
115 | + | ||
116 | + if (debounceInput) { | ||
117 | + setEditing(true); | ||
118 | + debouncedSetEditing(false); | ||
119 | + } | ||
120 | + | ||
121 | + if (typeof dataPath === 'string') { | ||
122 | + onItemChange(dataPath, value); | ||
123 | + } // 先不暴露给外部,这个api | ||
124 | + | ||
125 | + | ||
126 | + if (typeof onValuesChange === 'function') { | ||
127 | + onValuesChange(_defineProperty({}, dataPath, value), formDataRef.current); | ||
128 | + } | ||
129 | + | ||
130 | + validateField({ | ||
131 | + path: dataPath, | ||
132 | + formData: formDataRef.current, | ||
133 | + flatten: flatten, | ||
134 | + options: { | ||
135 | + locale: locale, | ||
136 | + validateMessages: validateMessages | ||
137 | + } | ||
138 | + }).then(function (res) { | ||
139 | + _setErrors(function (errors) { | ||
140 | + return removeDupErrors([].concat(_toConsumableArray(errors), _toConsumableArray(res))); | ||
141 | + }); | ||
142 | + }); | ||
143 | + }; | ||
144 | + | ||
145 | + var titleProps = { | ||
146 | + labelClass: labelClass, | ||
147 | + labelStyle: labelStyle, | ||
148 | + schema: _schema, | ||
149 | + displayType: displayType | ||
150 | + }; | ||
151 | + var messageProps = { | ||
152 | + message: errorMessage, | ||
153 | + schema: _schema, | ||
154 | + displayType: displayType, | ||
155 | + softHidden: displayType === 'inline', | ||
156 | + // 这个是如果没有校验信息时,展示与否 | ||
157 | + hardHidden: showValidate === false || _readOnly === true // 这个是强制的展示与否 | ||
158 | + | ||
159 | + }; | ||
160 | + var placeholderTitleProps = { | ||
161 | + className: labelClass, | ||
162 | + style: labelStyle | ||
163 | + }; | ||
164 | + | ||
165 | + var _showTitle = !hideTitle && typeof _schema.title === 'string'; // TODO: 这块最好能判断上一层是list1, | ||
166 | + | ||
167 | + | ||
168 | + if (hideTitle && _schema.title) { | ||
169 | + _schema.placeholder = _schema.placeholder || _schema.title; | ||
170 | + } | ||
171 | + | ||
172 | + var _getValue = function _getValue(path) { | ||
173 | + return getValueByPath(formData, path); | ||
174 | + }; | ||
175 | + | ||
176 | + var widgetProps = { | ||
177 | + $id: $id, | ||
178 | + schema: _schema, | ||
179 | + readOnly: _readOnly, | ||
180 | + disabled: _disabled, | ||
181 | + onChange: onChange, | ||
182 | + getValue: _getValue, | ||
183 | + formData: formData, | ||
184 | + value: _value, | ||
185 | + dependValues: dependValues, | ||
186 | + onItemChange: onItemChange, | ||
187 | + dataIndex: dataIndex, | ||
188 | + dataPath: dataPath, | ||
189 | + children: children | ||
190 | + }; // if (_schema && _schema.default !== undefined) { | ||
191 | + // widgetProps.value = _schema.default; | ||
192 | + // } | ||
193 | + // checkbox必须单独处理,布局太不同了 | ||
194 | + | ||
195 | + if (isCheckBoxType(_schema, _readOnly)) { | ||
196 | + return /*#__PURE__*/React.createElement(React.Fragment, null, _showTitle && /*#__PURE__*/React.createElement("div", placeholderTitleProps), /*#__PURE__*/React.createElement("div", { | ||
197 | + className: contentClass, | ||
198 | + style: contentStyle | ||
199 | + }, /*#__PURE__*/React.createElement(ExtendedWidget, widgetProps), /*#__PURE__*/React.createElement(Extra, widgetProps), /*#__PURE__*/React.createElement(ErrorMessage, messageProps))); | ||
200 | + } | ||
201 | + | ||
202 | + var titleElement = /*#__PURE__*/React.createElement(FieldTitle, titleProps); | ||
203 | + | ||
204 | + if (isObjType(_schema)) { | ||
205 | + titleElement = /*#__PURE__*/React.createElement("div", { | ||
206 | + style: { | ||
207 | + display: 'flex' | ||
208 | + } | ||
209 | + }, titleElement, /*#__PURE__*/React.createElement(ErrorMessage, messageProps)); | ||
210 | + return /*#__PURE__*/React.createElement("div", { | ||
211 | + className: contentClass, | ||
212 | + style: contentStyle | ||
213 | + }, /*#__PURE__*/React.createElement(ExtendedWidget, _extends({}, widgetProps, { | ||
214 | + message: errorMessage, | ||
215 | + title: _showTitle ? titleElement : undefined | ||
216 | + })), /*#__PURE__*/React.createElement(Extra, widgetProps)); | ||
217 | + } | ||
218 | + | ||
219 | + return /*#__PURE__*/React.createElement(React.Fragment, null, _showTitle && titleElement, /*#__PURE__*/React.createElement("div", { | ||
220 | + className: "".concat(contentClass, " ").concat(hideTitle ? 'fr-content-no-title' : ''), | ||
221 | + style: contentStyle | ||
222 | + }, /*#__PURE__*/React.createElement(ExtendedWidget, widgetProps), /*#__PURE__*/React.createElement(Extra, widgetProps), /*#__PURE__*/React.createElement(ErrorMessage, messageProps))); | ||
223 | +}; | ||
224 | + | ||
225 | +export default RenderField; |
es/form-render-core/src/core/index.js
0 → 100644
1 | +var _excluded = ["id", "_item", "dataIndex", "hideTitle", "hideValidation", "debugCss"], | ||
2 | + _excluded2 = ["id", "item", "dataIndex", "dataPath", "hideTitle", "hideValidation", "debugCss", "schema", "_value", "dependValues", "displayType", "column", "labelWidth", "readOnly", "errorFields", "effectiveLabelWidth"]; | ||
3 | + | ||
4 | +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } | ||
5 | + | ||
6 | +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } | ||
7 | + | ||
8 | +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
9 | + | ||
10 | +function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } | ||
11 | + | ||
12 | +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } | ||
13 | + | ||
14 | +import React, { useRef } from 'react'; | ||
15 | +import RenderList from './RenderChildren/RenderList'; | ||
16 | +import RenderObject from './RenderChildren/RenderObject'; | ||
17 | +import RenderField from './RenderField'; | ||
18 | +import { useStore, useStore2 } from '../hooks'; | ||
19 | +import { isLooselyNumber, isCssLength, getParentProps, getParentPath, isListType, isCheckBoxType, isObjType, getValueByPath, getDataPath, parseRootValueInSchema, clone } from '../utils'; | ||
20 | + | ||
21 | +var Core = function Core(_ref) { | ||
22 | + var _ref$id = _ref.id, | ||
23 | + id = _ref$id === void 0 ? '#' : _ref$id, | ||
24 | + _item = _ref._item, | ||
25 | + _ref$dataIndex = _ref.dataIndex, | ||
26 | + dataIndex = _ref$dataIndex === void 0 ? [] : _ref$dataIndex, | ||
27 | + _ref$hideTitle = _ref.hideTitle, | ||
28 | + hideTitle = _ref$hideTitle === void 0 ? false : _ref$hideTitle, | ||
29 | + _ref$hideValidation = _ref.hideValidation, | ||
30 | + hideValidation = _ref$hideValidation === void 0 ? false : _ref$hideValidation, | ||
31 | + debugCss = _ref.debugCss, | ||
32 | + rest = _objectWithoutProperties(_ref, _excluded); | ||
33 | + | ||
34 | + // console.log('<Core>', id); | ||
35 | + var snapShot = useRef(); | ||
36 | + | ||
37 | + var _useStore = useStore(), | ||
38 | + flatten = _useStore.flatten, | ||
39 | + errorFields = _useStore.errorFields, | ||
40 | + isEditing = _useStore.isEditing, | ||
41 | + formData = _useStore.formData, | ||
42 | + allTouched = _useStore.allTouched; | ||
43 | + | ||
44 | + var _useStore2 = useStore2(), | ||
45 | + displayType = _useStore2.displayType, | ||
46 | + column = _useStore2.column, | ||
47 | + labelWidth = _useStore2.labelWidth, | ||
48 | + readOnly = _useStore2.readOnly; | ||
49 | + | ||
50 | + var item = _item ? _item : flatten[id]; | ||
51 | + if (!item) return null; | ||
52 | + var dataPath = getDataPath(id, dataIndex); | ||
53 | + var parentPath = getParentPath(dataPath); | ||
54 | + | ||
55 | + var _value = getValueByPath(formData, dataPath); | ||
56 | + | ||
57 | + var schema = clone(item.schema); | ||
58 | + var dependencies = schema.dependencies; | ||
59 | + var dependValues = []; | ||
60 | + var rootValue; | ||
61 | + | ||
62 | + try { | ||
63 | + if (Array.isArray(dependencies)) { | ||
64 | + dependencies.forEach(function (item) { | ||
65 | + var itemPath = getDataPath(item, dataIndex); | ||
66 | + var result = getValueByPath(formData, itemPath); | ||
67 | + dependValues.push(result); | ||
68 | + }); | ||
69 | + } | ||
70 | + } catch (error) { | ||
71 | + console.error("dependencies \u8BA1\u7B97\u62A5\u9519\uFF0C".concat(dependencies)); | ||
72 | + } | ||
73 | + | ||
74 | + try { | ||
75 | + rootValue = getValueByPath(formData, parentPath); | ||
76 | + } catch (error) {} // 节流部分逻辑,编辑时不执行 | ||
77 | + | ||
78 | + | ||
79 | + if (isEditing && snapShot.current) { | ||
80 | + schema = snapShot.current; | ||
81 | + } else { | ||
82 | + if (JSON.stringify(schema).indexOf('rootValue') > -1) { | ||
83 | + schema = parseRootValueInSchema(schema, rootValue); | ||
84 | + } | ||
85 | + | ||
86 | + snapShot.current = schema; | ||
87 | + } // 真正有效的label宽度需要从现在所在item开始一直往上回溯(设计成了继承关系),找到的第一个有值的 ui:labelWidth | ||
88 | + | ||
89 | + | ||
90 | + var effectiveLabelWidth = getParentProps('labelWidth', id, flatten) || labelWidth; | ||
91 | + | ||
92 | + var dataProps = _objectSpread({ | ||
93 | + id: id, | ||
94 | + item: item, | ||
95 | + // 如果直接传了item,就不用id去取item, 暂时是内部属性,不外用 | ||
96 | + dataIndex: dataIndex, | ||
97 | + // 数据来源是数组的第几个index,上层每有一个list,就push一个index | ||
98 | + dataPath: dataPath, | ||
99 | + _value: _value, | ||
100 | + dependValues: dependValues, | ||
101 | + hideTitle: hideTitle, | ||
102 | + hideValidation: hideValidation, | ||
103 | + debugCss: debugCss, | ||
104 | + schema: schema, | ||
105 | + displayType: displayType, | ||
106 | + column: column, | ||
107 | + labelWidth: labelWidth, | ||
108 | + readOnly: readOnly, | ||
109 | + errorFields: errorFields, | ||
110 | + effectiveLabelWidth: effectiveLabelWidth, | ||
111 | + allTouched: allTouched | ||
112 | + }, rest); | ||
113 | + | ||
114 | + return /*#__PURE__*/React.createElement(CoreRender, dataProps); | ||
115 | +}; | ||
116 | + | ||
117 | +var CoreRender = function CoreRender(_ref2) { | ||
118 | + var id = _ref2.id, | ||
119 | + item = _ref2.item, | ||
120 | + dataIndex = _ref2.dataIndex, | ||
121 | + dataPath = _ref2.dataPath, | ||
122 | + hideTitle = _ref2.hideTitle, | ||
123 | + hideValidation = _ref2.hideValidation, | ||
124 | + debugCss = _ref2.debugCss, | ||
125 | + schema = _ref2.schema, | ||
126 | + _value = _ref2._value, | ||
127 | + dependValues = _ref2.dependValues, | ||
128 | + displayType = _ref2.displayType, | ||
129 | + column = _ref2.column, | ||
130 | + labelWidth = _ref2.labelWidth, | ||
131 | + readOnly = _ref2.readOnly, | ||
132 | + errorFields = _ref2.errorFields, | ||
133 | + effectiveLabelWidth = _ref2.effectiveLabelWidth, | ||
134 | + rest = _objectWithoutProperties(_ref2, _excluded2); | ||
135 | + | ||
136 | + if (schema.hidden) { | ||
137 | + return null; | ||
138 | + } // 样式的逻辑全放在这层 | ||
139 | + // displayType 一层层网上找值 | ||
140 | + | ||
141 | + | ||
142 | + var _displayType = schema.displayType || rest.displayType || displayType || 'column'; | ||
143 | + | ||
144 | + var isList = isListType(schema); | ||
145 | + var isObj = isObjType(schema); | ||
146 | + var isComplex = isObj || isList; | ||
147 | + var isCheckBox = isCheckBoxType(schema, readOnly); | ||
148 | + var width = schema.width || schema['ui:width']; | ||
149 | + var containerClass = "fr-field ".concat(_displayType === 'inline' ? '' : 'w-100', " flex"); | ||
150 | + var labelClass = "fr-label"; | ||
151 | + var contentClass = "fr-content"; | ||
152 | + | ||
153 | + if (typeof schema.className === 'string') { | ||
154 | + containerClass += ' ' + schema.className; | ||
155 | + } // common classNames dispite row or column | ||
156 | + | ||
157 | + | ||
158 | + switch (schema.type) { | ||
159 | + case 'object': | ||
160 | + if (isObj) { | ||
161 | + if (schema.title) { | ||
162 | + labelClass += ' fr-label-object'; | ||
163 | + } | ||
164 | + | ||
165 | + containerClass += ' fr-field-object'; | ||
166 | + } | ||
167 | + | ||
168 | + break; | ||
169 | + | ||
170 | + case 'array': | ||
171 | + // list 有两种展示形式! | ||
172 | + if (isList) { | ||
173 | + if (schema.title) { | ||
174 | + labelClass += ' fr-label-list'; | ||
175 | + } | ||
176 | + | ||
177 | + containerClass += ' fr-field-column'; | ||
178 | + } | ||
179 | + | ||
180 | + break; | ||
181 | + | ||
182 | + case 'boolean': | ||
183 | + if (isCheckBox) { | ||
184 | + contentClass += ' fr-content-column'; // checkbox高度短,需要居中对齐 | ||
185 | + | ||
186 | + containerClass += " flex ".concat(_displayType === 'column' ? 'flex-column' : ''); | ||
187 | + } | ||
188 | + | ||
189 | + break; | ||
190 | + | ||
191 | + default: | ||
192 | + } // column specific className | ||
193 | + | ||
194 | + | ||
195 | + if (!isComplex && !isCheckBox) { | ||
196 | + if (_displayType === 'column') { | ||
197 | + containerClass += ' flex-column'; | ||
198 | + labelClass += ' fr-label-column'; | ||
199 | + contentClass += ' fr-content-column'; | ||
200 | + | ||
201 | + switch (schema.type) { | ||
202 | + case 'object': | ||
203 | + break; | ||
204 | + | ||
205 | + case 'array': | ||
206 | + if (schema.title && !schema.enum) {// labelClass += ' b mb2'; | ||
207 | + } | ||
208 | + | ||
209 | + break; | ||
210 | + | ||
211 | + case 'boolean': | ||
212 | + break; | ||
213 | + | ||
214 | + default: | ||
215 | + } | ||
216 | + } else if (_displayType === 'row') { | ||
217 | + // row specific className | ||
218 | + containerClass += ''; | ||
219 | + labelClass += ' fr-label-row'; | ||
220 | + contentClass += ' fr-content-row'; | ||
221 | + | ||
222 | + if (!isObj && !isCheckBox) { | ||
223 | + labelClass += ' flex-shrink-0 fr-label-row'; | ||
224 | + contentClass += ' flex-grow-1 relative'; | ||
225 | + } | ||
226 | + } | ||
227 | + } // style part | ||
228 | + | ||
229 | + | ||
230 | + var columnStyle = {}; | ||
231 | + | ||
232 | + if (schema.hidden) { | ||
233 | + columnStyle.display = 'none'; | ||
234 | + } // if (!isComplex) { | ||
235 | + // } | ||
236 | + | ||
237 | + | ||
238 | + if (!isObj) { | ||
239 | + if (width) { | ||
240 | + columnStyle.width = width; | ||
241 | + columnStyle.paddingRight = 8; | ||
242 | + } else if (column > 1) { | ||
243 | + columnStyle.width = "calc(100% /".concat(column, ")"); | ||
244 | + columnStyle.paddingRight = 8; | ||
245 | + } | ||
246 | + } | ||
247 | + | ||
248 | + var _labelWidth = isLooselyNumber(effectiveLabelWidth) ? Number(effectiveLabelWidth) : isCssLength(effectiveLabelWidth) ? effectiveLabelWidth : 110; // 默认是 110px 的长度 | ||
249 | + | ||
250 | + | ||
251 | + var labelStyle = { | ||
252 | + width: _labelWidth | ||
253 | + }; | ||
254 | + | ||
255 | + if (isComplex || _displayType === 'column') { | ||
256 | + labelStyle = { | ||
257 | + flexGrow: 1 | ||
258 | + }; | ||
259 | + } | ||
260 | + | ||
261 | + if (_displayType === 'inline') { | ||
262 | + labelStyle = { | ||
263 | + marginTop: 5, | ||
264 | + paddingLeft: 12 | ||
265 | + }; | ||
266 | + labelClass = ''; | ||
267 | + contentClass += ' fr-content-inline'; | ||
268 | + | ||
269 | + if (containerClass.indexOf('fr-field-object') === -1) { | ||
270 | + containerClass += ' fr-field-inline'; | ||
271 | + } | ||
272 | + } | ||
273 | + | ||
274 | + var hasChildren = item.children && item.children.length > 0; | ||
275 | + var fieldProps = { | ||
276 | + $id: id, | ||
277 | + dataIndex: dataIndex, | ||
278 | + dataPath: dataPath, | ||
279 | + _value: _value, | ||
280 | + dependValues: dependValues, | ||
281 | + _schema: schema, | ||
282 | + labelClass: labelClass, | ||
283 | + labelStyle: labelStyle, | ||
284 | + contentClass: contentClass, | ||
285 | + errorFields: errorFields, | ||
286 | + // 层级间可使用的字段 | ||
287 | + displayType: _displayType, | ||
288 | + hideTitle: hideTitle, | ||
289 | + hideValidation: hideValidation | ||
290 | + }; | ||
291 | + var objChildren = /*#__PURE__*/React.createElement("div", { | ||
292 | + className: "flex flex-wrap" | ||
293 | + }, /*#__PURE__*/React.createElement(RenderObject, { | ||
294 | + dataIndex: dataIndex, | ||
295 | + errorFields: errorFields, | ||
296 | + displayType: _displayType, | ||
297 | + hideTitle: hideTitle | ||
298 | + }, item.children)); | ||
299 | + var listChildren = /*#__PURE__*/React.createElement(RenderList, { | ||
300 | + parentId: id, | ||
301 | + schema: schema, | ||
302 | + dataIndex: dataIndex, | ||
303 | + errorFields: errorFields, | ||
304 | + displayType: _displayType, | ||
305 | + hideTitle: hideTitle | ||
306 | + }, item.children); // 计算 children | ||
307 | + | ||
308 | + var _children = null; | ||
309 | + | ||
310 | + if (hasChildren) { | ||
311 | + if (isObj) { | ||
312 | + _children = objChildren; | ||
313 | + } else if (isList) { | ||
314 | + _children = listChildren; | ||
315 | + } | ||
316 | + } else if (isCheckBox) { | ||
317 | + _children = schema.title; | ||
318 | + } | ||
319 | + | ||
320 | + return /*#__PURE__*/React.createElement("div", { | ||
321 | + style: columnStyle, | ||
322 | + className: "".concat(containerClass, " ").concat(debugCss ? 'debug' : '') | ||
323 | + }, /*#__PURE__*/React.createElement(RenderField, fieldProps, _children)); | ||
324 | +}; // haven't used | ||
325 | + | ||
326 | + | ||
327 | +var areEqual = function areEqual(prev, current) { | ||
328 | + if (prev.allTouched !== current.allTouched) { | ||
329 | + return false; | ||
330 | + } | ||
331 | + | ||
332 | + if (prev.displayType !== current.displayType) { | ||
333 | + return false; | ||
334 | + } | ||
335 | + | ||
336 | + if (prev.column !== current.column) { | ||
337 | + return false; | ||
338 | + } | ||
339 | + | ||
340 | + if (prev.labelWidth !== current.labelWidth) { | ||
341 | + return false; | ||
342 | + } | ||
343 | + | ||
344 | + if (prev.readOnly !== current.readOnly) { | ||
345 | + return false; | ||
346 | + } | ||
347 | + | ||
348 | + if (prev.disabled !== current.disabled) { | ||
349 | + return false; | ||
350 | + } | ||
351 | + | ||
352 | + if (prev.schema && current.schema) { | ||
353 | + if (prev.schema.$id === '#') { | ||
354 | + return false; | ||
355 | + } | ||
356 | + } | ||
357 | + | ||
358 | + if (isObjType(prev.schema) && isObjType(current.schema)) { | ||
359 | + return false; | ||
360 | + } | ||
361 | + | ||
362 | + if (JSON.stringify(prev.dependValues) !== JSON.stringify(current.dependValues)) { | ||
363 | + return false; | ||
364 | + } | ||
365 | + | ||
366 | + if (JSON.stringify(prev._value) === JSON.stringify(current._value) && JSON.stringify(prev.schema) === JSON.stringify(current.schema) && JSON.stringify(prev.errorFields) === JSON.stringify(current.errorFields)) { | ||
367 | + return true; | ||
368 | + } | ||
369 | + | ||
370 | + return false; | ||
371 | +}; | ||
372 | + | ||
373 | +export default Core; |
es/form-render-core/src/createWidget.js
0 → 100644
1 | +var _excluded = ["schema"], | ||
2 | + _excluded2 = ["onChange", "value", "defaultValue", "schema", "readOnly"]; | ||
3 | + | ||
4 | +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } | ||
5 | + | ||
6 | +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } | ||
7 | + | ||
8 | +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
9 | + | ||
10 | +function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } | ||
11 | + | ||
12 | +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } | ||
13 | + | ||
14 | +import React from "react"; | ||
15 | +import { defaultGetValueFromEvent } from './utils'; | ||
16 | +export var createWidget = function createWidget(mapProps, extraSchema) { | ||
17 | + return function (Component) { | ||
18 | + return function (props) { | ||
19 | + var schema = props.schema, | ||
20 | + rest = _objectWithoutProperties(props, _excluded); | ||
21 | + | ||
22 | + var _schema = _objectSpread(_objectSpread({}, schema), extraSchema); | ||
23 | + | ||
24 | + var propsMap = typeof mapProps === 'function' ? mapProps(_objectSpread({ | ||
25 | + schema: _schema | ||
26 | + }, rest)) : {}; | ||
27 | + | ||
28 | + var _props = _objectSpread(_objectSpread({ | ||
29 | + schema: _schema | ||
30 | + }, rest), propsMap); | ||
31 | + | ||
32 | + var finalProps = transformProps(_props); | ||
33 | + return /*#__PURE__*/React.createElement(Component, finalProps); | ||
34 | + }; | ||
35 | + }; | ||
36 | +}; | ||
37 | +export var transformProps = function transformProps(props) { | ||
38 | + var onChange = props.onChange, | ||
39 | + value = props.value, | ||
40 | + defaultValue = props.defaultValue, | ||
41 | + ownSchema = props.schema, | ||
42 | + readOnly = props.readOnly, | ||
43 | + rest = _objectWithoutProperties(props, _excluded2); | ||
44 | + | ||
45 | + var schema = _objectSpread({}, ownSchema); | ||
46 | + | ||
47 | + var _ref = schema || {}, | ||
48 | + trigger = _ref.trigger, | ||
49 | + valuePropName = _ref.valuePropName; | ||
50 | + | ||
51 | + var controlProps = {}; | ||
52 | + var _valuePropName = 'value'; | ||
53 | + | ||
54 | + var _value = value === undefined ? defaultValue : value; | ||
55 | + | ||
56 | + if (valuePropName && typeof valuePropName === 'string') { | ||
57 | + _valuePropName = valuePropName; | ||
58 | + controlProps[valuePropName] = _value; | ||
59 | + } else { | ||
60 | + controlProps.value = _value; | ||
61 | + } | ||
62 | + | ||
63 | + var _onChange = function _onChange() { | ||
64 | + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { | ||
65 | + args[_key] = arguments[_key]; | ||
66 | + } | ||
67 | + | ||
68 | + var newValue = defaultGetValueFromEvent.apply(void 0, [_valuePropName].concat(args)); | ||
69 | + onChange(newValue); | ||
70 | + }; | ||
71 | + | ||
72 | + if (trigger && typeof trigger === 'string') { | ||
73 | + controlProps[trigger] = _onChange; | ||
74 | + } else { | ||
75 | + controlProps.onChange = _onChange; | ||
76 | + } | ||
77 | + | ||
78 | + var usefulPropsFromSchema = { | ||
79 | + disabled: schema.disabled || schema['ui:disabled'], | ||
80 | + readOnly: schema.readOnly || schema['ui:readonly'] || readOnly, | ||
81 | + hidden: schema.hidden || schema['ui:hidden'] | ||
82 | + }; | ||
83 | + | ||
84 | + var _props = _objectSpread(_objectSpread(_objectSpread({}, controlProps), {}, { | ||
85 | + schema: schema | ||
86 | + }, usefulPropsFromSchema), rest); | ||
87 | + | ||
88 | + return _props; | ||
89 | +}; |
es/form-render-core/src/hooks.js
0 → 100644
1 | +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } | ||
2 | + | ||
3 | +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } | ||
4 | + | ||
5 | +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
6 | + | ||
7 | +function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } | ||
8 | + | ||
9 | +function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | ||
10 | + | ||
11 | +function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | ||
12 | + | ||
13 | +function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
14 | + | ||
15 | +function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } | ||
16 | + | ||
17 | +function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } | ||
18 | + | ||
19 | +import { useReducer, useContext, useRef, useEffect, useState, createContext } from 'react'; | ||
20 | +export var Ctx = /*#__PURE__*/createContext(function () {}); | ||
21 | +export var StoreCtx = /*#__PURE__*/createContext({}); | ||
22 | +export var Store2Ctx = /*#__PURE__*/createContext({}); | ||
23 | +export var useTools = function useTools() { | ||
24 | + return useContext(Ctx); | ||
25 | +}; | ||
26 | +export var useStore = function useStore() { | ||
27 | + return useContext(StoreCtx); | ||
28 | +}; | ||
29 | +export var useStore2 = function useStore2() { | ||
30 | + return useContext(Store2Ctx); | ||
31 | +}; | ||
32 | +export var useSet = function useSet(initState) { | ||
33 | + var _useReducer = useReducer(function (state, newState) { | ||
34 | + var action = newState; | ||
35 | + | ||
36 | + if (typeof newState === 'function') { | ||
37 | + action = action(state); | ||
38 | + } | ||
39 | + | ||
40 | + if (newState.action && newState.payload) { | ||
41 | + action = newState.payload; | ||
42 | + | ||
43 | + if (typeof action === 'function') { | ||
44 | + action = action(state); | ||
45 | + } | ||
46 | + } | ||
47 | + | ||
48 | + var result = _objectSpread(_objectSpread({}, state), action); // console.group(newState.action || 'action'); // TODO: give it a name | ||
49 | + // console.log('%cState:', 'color: #9E9E9E; font-weight: 700;', state); | ||
50 | + // console.log('%cAction:', 'color: #00A7F7; font-weight: 700;', action); | ||
51 | + // console.log('%cNext:', 'color: #47B04B; font-weight: 700;', result); | ||
52 | + // console.groupEnd(); | ||
53 | + | ||
54 | + | ||
55 | + // console.group(newState.action || 'action'); // TODO: give it a name | ||
56 | + // console.log('%cState:', 'color: #9E9E9E; font-weight: 700;', state); | ||
57 | + // console.log('%cAction:', 'color: #00A7F7; font-weight: 700;', action); | ||
58 | + // console.log('%cNext:', 'color: #47B04B; font-weight: 700;', result); | ||
59 | + // console.groupEnd(); | ||
60 | + return result; | ||
61 | + }, initState), | ||
62 | + _useReducer2 = _slicedToArray(_useReducer, 2), | ||
63 | + state = _useReducer2[0], | ||
64 | + setState = _useReducer2[1]; | ||
65 | + | ||
66 | + return [state, setState]; | ||
67 | +}; | ||
68 | +export function useInterval(callback, delay, start) { | ||
69 | + var savedCallback = useRef(); | ||
70 | + useEffect(function () { | ||
71 | + savedCallback.current = callback; | ||
72 | + }, [callback]); | ||
73 | + var id = useRef(); | ||
74 | + useEffect(function () { | ||
75 | + if (!start) { | ||
76 | + return; | ||
77 | + } | ||
78 | + | ||
79 | + function tick() { | ||
80 | + savedCallback && savedCallback.current && savedCallback.current(); | ||
81 | + } | ||
82 | + | ||
83 | + tick(); | ||
84 | + | ||
85 | + if (delay !== null) { | ||
86 | + id.current = setInterval(tick, delay); | ||
87 | + return function () { | ||
88 | + return clearInterval(id.current); | ||
89 | + }; | ||
90 | + } | ||
91 | + }, [delay, start]); | ||
92 | + return function () { | ||
93 | + return clearInterval(id.current); | ||
94 | + }; | ||
95 | +} | ||
96 | +export function usePrevious(value) { | ||
97 | + // The ref object is a generic container whose current property is mutable ... | ||
98 | + // ... and can hold any value, similar to an instance property on a class | ||
99 | + var ref = useRef(); // Store current value in ref | ||
100 | + | ||
101 | + useEffect(function () { | ||
102 | + ref.current = value; | ||
103 | + }, [value]); // Only re-run if value changes | ||
104 | + // Return previous value (happens before update in useEffect above) | ||
105 | + | ||
106 | + return ref.current; | ||
107 | +} | ||
108 | +export var useShowOnce = function useShowOnce(localKey) { | ||
109 | + // 从 localStorage 读取 key 值 | ||
110 | + var _useState = useState(false), | ||
111 | + _useState2 = _slicedToArray(_useState, 2), | ||
112 | + show = _useState2[0], | ||
113 | + setShow = _useState2[1]; | ||
114 | + | ||
115 | + var localStr; | ||
116 | + | ||
117 | + try { | ||
118 | + localStr = localStorage.getItem(localKey); | ||
119 | + } catch (error) {} | ||
120 | + | ||
121 | + if (!localStr) { | ||
122 | + setShow(true); | ||
123 | + localStorage.setItem(localKey, JSON.stringify(true)); | ||
124 | + } | ||
125 | + | ||
126 | + return show; | ||
127 | +}; | ||
128 | +export var useModal = function useModal() { | ||
129 | + var _useState3 = useState(false), | ||
130 | + _useState4 = _slicedToArray(_useState3, 2), | ||
131 | + show = _useState4[0], | ||
132 | + setShow = _useState4[1]; | ||
133 | + | ||
134 | + var toggle = function toggle() { | ||
135 | + return setShow(!show); | ||
136 | + }; | ||
137 | + | ||
138 | + return [show, toggle]; | ||
139 | +}; | ||
140 | +export var useWindowState = function useWindowState(initState) { | ||
141 | + var _useState5 = useState(initState), | ||
142 | + _useState6 = _slicedToArray(_useState5, 2), | ||
143 | + state = _useState6[0], | ||
144 | + setState = _useState6[1]; | ||
145 | + | ||
146 | + return [state, setState]; | ||
147 | +}; | ||
148 | +export var useStorageState = function useStorageState() { | ||
149 | + var initState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
150 | + var searchKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'SAVES'; | ||
151 | + | ||
152 | + var readSearchFromStorage = function readSearchFromStorage() { | ||
153 | + var searchStr = localStorage.getItem(searchKey); | ||
154 | + | ||
155 | + if (searchStr) { | ||
156 | + try { | ||
157 | + return JSON.parse(searchStr); | ||
158 | + } catch (error) { | ||
159 | + return initState; | ||
160 | + } | ||
161 | + } | ||
162 | + | ||
163 | + return initState; | ||
164 | + }; | ||
165 | + | ||
166 | + var _useState7 = useState(readSearchFromStorage()), | ||
167 | + _useState8 = _slicedToArray(_useState7, 2), | ||
168 | + data = _useState8[0], | ||
169 | + setData = _useState8[1]; | ||
170 | + | ||
171 | + var setSearchWithStorage = function setSearchWithStorage(search) { | ||
172 | + setData(search); | ||
173 | + localStorage.setItem(searchKey, JSON.stringify(search)); | ||
174 | + }; | ||
175 | + | ||
176 | + return [data, setSearchWithStorage]; | ||
177 | +}; |
es/form-render-core/src/index.css
0 → 100644
1 | +/* | ||
2 | + 用于原有样式的覆盖 | ||
3 | + */ | ||
4 | +.fr-container { | ||
5 | + /* Row */ | ||
6 | + /* 自定义类 */ | ||
7 | + /* 组件内部样式*/ | ||
8 | + /* 其他样式 */ | ||
9 | +} | ||
10 | +.fr-container .fr-field { | ||
11 | + font-size: 14px; | ||
12 | + padding: 0; | ||
13 | + color: rgba(0, 0, 0, 0.85); | ||
14 | + line-height: 1.5715; | ||
15 | + margin-bottom: 0; | ||
16 | +} | ||
17 | +.fr-container .fr-field-column { | ||
18 | + flex-direction: column; | ||
19 | +} | ||
20 | +.fr-container .fr-field-object { | ||
21 | + flex-direction: column; | ||
22 | +} | ||
23 | +.fr-container .fr-field-inline { | ||
24 | + margin-bottom: 12px; | ||
25 | +} | ||
26 | +.fr-container .fr-item-wrapper { | ||
27 | + position: relative; | ||
28 | + display: flex; | ||
29 | + align-items: center; | ||
30 | + min-height: 32px; | ||
31 | +} | ||
32 | +.fr-container .ant-table-cell .fr-field { | ||
33 | + margin-bottom: 0; | ||
34 | +} | ||
35 | +.fr-container .fr-collapse-object { | ||
36 | + margin-bottom: 8px; | ||
37 | + overflow: hidden; | ||
38 | + background: #f7f7f7; | ||
39 | + border-radius: 2px; | ||
40 | +} | ||
41 | +.fr-container .fr-collapse-object .ant-collapse-header { | ||
42 | + padding-bottom: 4px !important; | ||
43 | + padding-top: 4px !important; | ||
44 | +} | ||
45 | +.fr-container .fr-collapse-object .ant-collapse-content-box { | ||
46 | + padding: 8px 8px 4px 8px !important; | ||
47 | +} | ||
48 | +.fr-container .fr-collapse-object .ant-collapse-arrow { | ||
49 | + padding-top: 5px !important; | ||
50 | +} | ||
51 | +.fr-container .fr-label { | ||
52 | + display: block; | ||
53 | +} | ||
54 | +.fr-container .fr-label-row { | ||
55 | + text-align: right; | ||
56 | + flex-shrink: 0; | ||
57 | + margin-top: 5px; | ||
58 | +} | ||
59 | +.fr-container .fr-label-column { | ||
60 | + margin-bottom: 4px; | ||
61 | +} | ||
62 | +.fr-container .fr-label-title { | ||
63 | + display: inline-flex; | ||
64 | + color: #333; | ||
65 | + min-height: 22px; | ||
66 | + /* ""的标签页占位 */ | ||
67 | + line-height: 22px; | ||
68 | +} | ||
69 | +.fr-container .fr-label-required { | ||
70 | + margin: 1px 4px 0 0; | ||
71 | + color: #f5222d; | ||
72 | + font-size: 14px; | ||
73 | + font-family: SimSun, sans-serif; | ||
74 | +} | ||
75 | +.fr-container .fr-label-title::after { | ||
76 | + content: ':'; | ||
77 | + position: relative; | ||
78 | + top: -0.5px; | ||
79 | + margin: 0 10px 0 2px; | ||
80 | +} | ||
81 | +.fr-container .fr-label-title.no-colon::after { | ||
82 | + content: ''; | ||
83 | + margin: 0; | ||
84 | +} | ||
85 | +.fr-container .fr-label-object .fr-label-title { | ||
86 | + font-size: 16px; | ||
87 | + color: #222; | ||
88 | +} | ||
89 | +.fr-container .fr-label-list { | ||
90 | + margin-bottom: 5px; | ||
91 | +} | ||
92 | +.fr-container .fr-content { | ||
93 | + width: 100%; | ||
94 | +} | ||
95 | +.fr-container .fr-list-1 .fr-content { | ||
96 | + min-width: 140px; | ||
97 | +} | ||
98 | +.fr-container .fr-list-1 .fr-content-row { | ||
99 | + flex: 1; | ||
100 | + position: relative; | ||
101 | +} | ||
102 | +.fr-container .fr-list-1 .fr-content.fr-content-inline { | ||
103 | + width: unset; | ||
104 | +} | ||
105 | +.fr-container .fr-list-1 .fr-content.fr-content-inline.fr-content-no-title { | ||
106 | + margin-right: 8px; | ||
107 | +} | ||
108 | +.fr-container .fr-desc { | ||
109 | + /* margin-top: 3px; */ | ||
110 | + font-size: 12px; | ||
111 | + word-break: break-all; | ||
112 | + color: #888; | ||
113 | +} | ||
114 | +.fr-container .fr-validate { | ||
115 | + margin-left: 12px; | ||
116 | + font-size: 12px; | ||
117 | + word-break: break-all; | ||
118 | + color: #f5222d; | ||
119 | +} | ||
120 | +.fr-container .fr-validate-row { | ||
121 | + margin: 3px 0 0 0; | ||
122 | +} | ||
123 | +.fr-container .fr-field-row .fr-tooltip-icon { | ||
124 | + margin: 3px 2px 0 0; | ||
125 | +} | ||
126 | +.fr-container .hover-b--black-20:hover { | ||
127 | + border-color: rgba(0, 0, 0, 0.3); | ||
128 | +} | ||
129 | +.fr-container .pt44 { | ||
130 | + padding-top: 46px; | ||
131 | +} | ||
132 | +.fr-container .pv12 { | ||
133 | + padding-top: 12px; | ||
134 | + padding-bottom: 12px; | ||
135 | +} | ||
136 | +.fr-container .fr-move-icon { | ||
137 | + position: absolute; | ||
138 | + top: 0; | ||
139 | + right: 0; | ||
140 | + padding-top: 2px; | ||
141 | + padding-right: 10px; | ||
142 | + font-size: 24px; | ||
143 | + font-weight: 300; | ||
144 | +} | ||
145 | +.fr-container .fr-move-icon:hover { | ||
146 | + cursor: move; | ||
147 | +} | ||
148 | +.fr-container .fr-color-picker { | ||
149 | + width: 100%; | ||
150 | + display: flex; | ||
151 | + flex-direction: row; | ||
152 | + align-items: center; | ||
153 | + color: #666; | ||
154 | +} | ||
155 | +.fr-container .fr-color-picker .rc-color-picker-trigger { | ||
156 | + margin-right: 12px; | ||
157 | + height: 32px; | ||
158 | + width: 60px; | ||
159 | + border: 1px solid #e5e5e5; | ||
160 | +} | ||
161 | +.fr-container .fr-color-picker > p { | ||
162 | + margin: 0; | ||
163 | + font-size: 14px; | ||
164 | + line-height: 28px; | ||
165 | +} | ||
166 | +.fr-container .fr-color-picker .rc-color-picker-wrap { | ||
167 | + display: flex; | ||
168 | +} | ||
169 | +.fr-container .next-input, | ||
170 | +.fr-container .next-number-picker { | ||
171 | + width: 100%; | ||
172 | +} | ||
173 | +.fr-container .upload-img { | ||
174 | + max-width: 200px; | ||
175 | + max-height: 200px; | ||
176 | + margin-right: 24px; | ||
177 | +} | ||
178 | +.fr-container .fr-preview-image { | ||
179 | + width: 160px; | ||
180 | +} | ||
181 | +.fr-container .fr-preview { | ||
182 | + position: relative; | ||
183 | + cursor: pointer; | ||
184 | +} | ||
185 | +.fr-container .fr-upload-mod, | ||
186 | +.fr-container .fr-upload-file { | ||
187 | + display: flex; | ||
188 | +} | ||
189 | +.fr-container .fr-upload-mod { | ||
190 | + align-items: center; | ||
191 | +} | ||
192 | +.fr-container .fr-upload-mod .fr-upload-preview { | ||
193 | + margin: 0 12px; | ||
194 | +} | ||
195 | +.fr-container .fr-upload-file .ant-upload-list-item { | ||
196 | + margin: 5px 0 0 8px; | ||
197 | +} | ||
198 | +.fr-container .fr-upload-file .ant-upload-list-item-name { | ||
199 | + margin-right: 6px; | ||
200 | +} | ||
201 | +.fr-container .fr-upload-file .ant-upload-list-item-info { | ||
202 | + cursor: pointer; | ||
203 | +} | ||
204 | +.fr-container .fr-upload-file .next-upload-list-text .next-upload-list-item-done, | ||
205 | +.fr-container .fr-upload-file .next-upload-list-text .next-upload-list-item .next-icon { | ||
206 | + height: 28px; | ||
207 | + line-height: 28px; | ||
208 | + margin-left: 12px; | ||
209 | +} | ||
210 | +.fr-container .fr-upload-file .next-upload-list-item-name-wrap { | ||
211 | + margin-top: -4px; | ||
212 | +} | ||
213 | +.fr-container .fr-sort-help-class { | ||
214 | + background: #fff; | ||
215 | +} | ||
216 | +.fr-container .fold-icon.fold-icon-active { | ||
217 | + transform: rotate(0deg); | ||
218 | +} | ||
219 | +.fr-container .fold-icon { | ||
220 | + transform: rotate(-90deg); | ||
221 | + transition: transform 0.24s; | ||
222 | + cursor: pointer; | ||
223 | + position: relative; | ||
224 | +} | ||
225 | +.fr-container .fold-icon::after { | ||
226 | + content: ''; | ||
227 | + position: absolute; | ||
228 | + top: -20px; | ||
229 | + right: -10px; | ||
230 | + bottom: -5px; | ||
231 | + left: -20px; | ||
232 | +} | ||
233 | +.fr-container .fr-tooltip-toggle { | ||
234 | + cursor: pointer; | ||
235 | + position: relative; | ||
236 | +} | ||
237 | +.fr-container .fr-tooltip-toggle:hover .fr-tooltip-container { | ||
238 | + opacity: 1; | ||
239 | + visibility: visible; | ||
240 | +} | ||
241 | +.fr-container .fr-tooltip-icon { | ||
242 | + height: 14px; | ||
243 | + width: 14px; | ||
244 | + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAEnUlEQVR42u1bS0iUURT+zd4Y9KDosSihNhYUaBE9YKpFDKKOOmOLahtJ2SoxA2fUdUoQJK5qU0ib6LlxUYJpkY0LE3tQZkU7y7A0e1jnA4Of8pz//5373/+BF44Oc+/c853v3nOf5xpup0QiMZ9kD8mxeDzeTHKXPveSvKXP3+j/GP1/h++QhzIoW1ZWthu/NYKYysvLN5EhKZJ7ZMQEye8ZyjjJfZIk6vS10YWFhcvI4FoC2wfwLkkf6aiBLt8YHovFNhCoFnRlgNQkY9BJbrLeS9uzqFueYAzXJV9ITgKLVsvBPCnuAAifSIe23kBd7zApHHUI8D3JBfptFUlialbYSJIDweep7+Iog7L4jUMdn4HNzeksmxRcdgColyRZWlq6NQOd21AH6rKrFxiBVanxxcXFS6jSdpsAHtLYUODC1FqAum0S0Q7Mqlp+ESlO2zD8DUmJBhcsgS4bJDwBdhUKb1ko+kll6qLR6AJDU4IuuAZ0W2C7kWnrJy1a/QONvjsNjxLp32VjsEzO1OcOkoJJoeJuGuBWGB4nYCCcD4RGmiSJOm35PIup7kokEplr+CQBCzAJeEeJqC22V3jE2IBQWVd+fv48w2cJmAhbp4C7H7bZaf1KoZJBbET8vCEDRgF/pdXGZim1/ifGl344WtTIJJ//B+ggts+K6t4BrAwBH2GjNKo2CuxVqzJeGLDqFemoFnQ0sq0vDHyP4D+KwI1ILqZqpyqsGmFjznStX8tNIzQlbjYUJasVnCo9wAzsjE1npyPgFQPqJvKDRYC8ioWt/200BFD7FRMwIu0nFBNwgNMFm80Fz0mAFIOqVz4IyoS/ZvQ1mQv1MYBqkO8GCSDXTDRjvAoCznAHrH/X0qu4FqE99Voj2AkErOPsg+3w/wqmwDMjHAkkPGdsPITMBqb7t4SFANjCjTkgoI0ZJY+Hwnp5f9MGdtIMOxF35n1ZXDrG38fYmDa48zWcs4eFANxesUtv+jPMZC4PCwE4NWL0DRvcehkHjyEhACdGCxl9vwBwggEyxw0wXhCAOANG34TsAi4k37kA/RliMnND1ANyGX1DGAMe89Og+uSjaRDSAwKucgeIYSEAcQzc8T4ISDGZrSFygVaml6dAQILJfBEiAl4yy/0KZK6WtsMBJwD+v0bcDk/tlp4yveB0cAmQj8hhs7lQE1NoIAQEPGdsazZ3k+3SoahOAvQfisoDBeR2QAmArjvcsbi2i5FMQ+Ay0Jvn6GIE10VWV2MBIiALmKWrMfFylJsRgkIAsAp1NojX47hCZn74HdfjficAAzp3PY6rf9g4GyBhw3/6Axoi0yW48IDtcQwBRVIUOHaQfguSAiYpvB42Od1Cxiz8s5tkpdfGAwOwSFhhy0xXUnV+DpSEbmCwwFiXKcPXbYTKpnSHykIndFsYf01JsDRJTxCDpUGU7nB5SKcfwuWLiooWK38wQXLJwcOFtIoHE/Bh5v6SE2DMdvNN4BE3nszQ93szfTJDclTbU7lAP5pSGIxY5eWzOdL/lXrkKW6Fp7M3XPTi4SR0zz6dnX087fOEq2k8hTc/nydJm57Pj3v5fP4PSqRR6oYkTaUAAAAASUVORK5CYII='); | ||
245 | + background-size: cover; | ||
246 | + display: block; | ||
247 | + margin: 4px 0 0 4px; | ||
248 | +} | ||
249 | +.fr-container .fr-tooltip-container { | ||
250 | + position: absolute; | ||
251 | + width: 160px; | ||
252 | + white-space: initial !important; | ||
253 | + top: -4px; | ||
254 | + left: 0; | ||
255 | + bottom: unset; | ||
256 | + transform: translateY(-100%); | ||
257 | + text-align: left; | ||
258 | + background: #2b222a; | ||
259 | + padding: 4px; | ||
260 | + margin-left: -69px; | ||
261 | + border-radius: 4px; | ||
262 | + color: #efefef; | ||
263 | + font-size: 13px; | ||
264 | + cursor: auto; | ||
265 | + z-index: 99999; | ||
266 | + transition: all 0.5s ease; | ||
267 | + opacity: 0; | ||
268 | + visibility: hidden; | ||
269 | + word-wrap: break-word; | ||
270 | +} | ||
271 | +.fr-container .fr-tooltip-triangle { | ||
272 | + position: absolute; | ||
273 | + left: 50%; | ||
274 | + border-left: 5px solid transparent; | ||
275 | + border-right: 5px solid transparent; | ||
276 | + border-top: 5px solid #2b222a; | ||
277 | + transition: all 0.5s ease; | ||
278 | + content: ' '; | ||
279 | + font-size: 0; | ||
280 | + line-height: 0; | ||
281 | + margin-left: -5px; | ||
282 | + width: 0; | ||
283 | + bottom: -5px; | ||
284 | +} | ||
285 | +.fr-container .fr-tooltip-toggle::before, | ||
286 | +.fr-container .fr-tooltip-toggle::after { | ||
287 | + color: #efefef; | ||
288 | + font-size: 13px; | ||
289 | + opacity: 0; | ||
290 | + pointer-events: none; | ||
291 | + text-align: center; | ||
292 | +} | ||
293 | +.fr-container .fr-tooltip-toggle:focus::before, | ||
294 | +.fr-container .fr-tooltip-toggle:focus::after, | ||
295 | +.fr-container .fr-tooltip-toggle:hover::before, | ||
296 | +.fr-container .fr-tooltip-toggle:hover::after { | ||
297 | + opacity: 1; | ||
298 | + transition: all 0.75s ease; | ||
299 | +} | ||
300 | +.fr-container .fr-slider { | ||
301 | + display: flex; | ||
302 | + width: 100%; | ||
303 | + align-items: center; | ||
304 | +} | ||
305 | +.fr-container .fr-map { | ||
306 | + display: flex; | ||
307 | + flex-wrap: wrap; | ||
308 | +} | ||
309 | +.fr-container .fr-arrow-icon { | ||
310 | + cursor: pointer; | ||
311 | +} | ||
312 | +.fr-container .fr-row-error { | ||
313 | + background-color: rgba(255, 77, 79, 0.2); | ||
314 | +} | ||
315 | +.fr-container .fr-theme-card-wrap { | ||
316 | + background-color: #fff; | ||
317 | + padding: 36px 40px; | ||
318 | + margin-bottom: 24px; | ||
319 | + border-radius: 4px; | ||
320 | + display: flex; | ||
321 | + justify-content: space-between; | ||
322 | +} | ||
323 | +.fr-container .fr-theme-card-wrap .fr-theme-card-title { | ||
324 | + font-size: 16px; | ||
325 | + margin-bottom: 16px; | ||
326 | +} |
es/form-render-core/src/index.d.ts
0 → 100644
1 | +import * as React from 'react'; | ||
2 | +export interface Error { | ||
3 | + /** 错误的数据路径 */ | ||
4 | + name: string; | ||
5 | + /** 错误的内容 */ | ||
6 | + error: string[]; | ||
7 | +} | ||
8 | +export interface FormParams { | ||
9 | + formData?: any; | ||
10 | + onChange?: (data: any) => void; | ||
11 | + onValidate?: (valid: any) => void; | ||
12 | + showValidate?: boolean; | ||
13 | + /** 数据分析接口,表单展示完成渲染时触发 */ | ||
14 | + logOnMount?: (stats: any) => void; | ||
15 | + /** 数据分析接口,表单提交成功时触发,获得本次表单填写的总时长 */ | ||
16 | + logOnSubmit?: (stats: any) => void; | ||
17 | +} | ||
18 | + | ||
19 | +export interface ValidateParams { | ||
20 | + formData: any; | ||
21 | + schema: any; | ||
22 | + error: Error[]; | ||
23 | + [k: string]: any; | ||
24 | +} | ||
25 | +export interface FormInstance { | ||
26 | + formData: any; | ||
27 | + schema: any; | ||
28 | + flatten: any; | ||
29 | + touchedKeys: string[]; | ||
30 | + touchKey: (key: string) => void; | ||
31 | + onItemChange: (path: string, value: any) => void; | ||
32 | + setValueByPath: (path: string, value: any) => void; | ||
33 | + getSchemaByPath: (path: string) => object; | ||
34 | + setSchemaByPath: (path: string, value: any) => void; | ||
35 | + setSchema: (settings: any) => void; | ||
36 | + setValues: (formData: any) => void; | ||
37 | + getValues: () => any; | ||
38 | + resetFields: () => void; | ||
39 | + submit: () => Promise<void> | Promise<any[]>; | ||
40 | + submitData: any; | ||
41 | + errorFields: Error[]; | ||
42 | + isValidating: boolean; | ||
43 | + outsideValidating: boolean; | ||
44 | + isSubmitting: boolean; | ||
45 | + endValidating: () => void; | ||
46 | + endSubmitting: () => void; | ||
47 | + setErrorFields: (error: Error[]) => void; | ||
48 | + removeErrorField: (path: string) => void; | ||
49 | + removeTouched: (path: string) => void; | ||
50 | + changeTouchedKeys: (pathArray: string[]) => void; | ||
51 | + isEditing: boolean; | ||
52 | + setEditing: (status: boolean) => void; | ||
53 | + syncStuff: (args: any) => void; | ||
54 | + /** 折中升级方案中使用到,正常用不到 */ | ||
55 | + init: () => void; | ||
56 | + /** 数据分析接口,表单展示完成渲染时触发 */ | ||
57 | + logOnMount: (args: any) => void; | ||
58 | + /** 数据分析接口,表单提交成功时触发,获得本次表单填写的总时长 */ | ||
59 | + logOnSubmit: (args: any) => void; | ||
60 | + _setErrors: (args: any) => void; | ||
61 | +} | ||
62 | + | ||
63 | +export type WatchProperties = { | ||
64 | + [path: string]: | ||
65 | + | { | ||
66 | + handler: (value: any) => void; | ||
67 | + immediate?: boolean; | ||
68 | + } | ||
69 | + | ((value: any) => void); | ||
70 | +}; | ||
71 | + | ||
72 | +export interface FRProps { | ||
73 | + /** 表单 id */ | ||
74 | + id?: string | number; | ||
75 | + /** 表单顶层的className */ | ||
76 | + className?: string; | ||
77 | + /** 表单顶层的样式 */ | ||
78 | + style?: any; | ||
79 | + /** 表单 schema */ | ||
80 | + schema: any; | ||
81 | + /** form单例 */ | ||
82 | + form: FormInstance; | ||
83 | + /** 组件和schema的映射规则 */ | ||
84 | + mapping?: any; | ||
85 | + /** 自定义组件 */ | ||
86 | + widgets?: any; | ||
87 | + /** 表单提交前钩子 */ | ||
88 | + displayType?: string; | ||
89 | + /** 只读模式 */ | ||
90 | + readOnly?: boolean; | ||
91 | + /** 禁用模式 */ | ||
92 | + disabled?: boolean; | ||
93 | + /** 标签宽度 */ | ||
94 | + labelWidth?: string | number; | ||
95 | + /** antd的全局config */ | ||
96 | + configProvider?: any; | ||
97 | + theme?: string | number; | ||
98 | + /** 覆盖默认的校验信息 */ | ||
99 | + validateMessages?: any; | ||
100 | + /** 显示当前表单内部状态 */ | ||
101 | + debug?: boolean; | ||
102 | + /** 显示css布局提示线 */ | ||
103 | + debugCss?: boolean; | ||
104 | + locale?: string; | ||
105 | + column?: number; | ||
106 | + debounceInput?: boolean; | ||
107 | + size?: string; | ||
108 | + // 数据会作为 beforeFinish 的第四个参数传入 | ||
109 | + config?: any; | ||
110 | + // 类似于 vuejs 的 watch 的用法,监控值的变化,触发 callback | ||
111 | + watch?: WatchProperties; | ||
112 | + /** 对象组件是否折叠(全局的控制) */ | ||
113 | + allCollapsed?: boolean; | ||
114 | + /** 表单的全局共享属性 */ | ||
115 | + globalProps?: any; | ||
116 | + /** 表单首次加载钩子 */ | ||
117 | + onMount?: () => void; | ||
118 | + /** 表单提交前钩子 */ | ||
119 | + beforeFinish?: (params: ValidateParams) => Error[] | Promise<Error[]>; | ||
120 | + /** 表单提交后钩子 */ | ||
121 | + onFinish?: (formData: any, error: Error[]) => void; | ||
122 | + /** 时时与外部更新同步的钩子 */ | ||
123 | + onValuesChange?: (changedValues: any, formData: any) => void; | ||
124 | + /** 隐藏的数据是否去掉,默认不去掉(false) */ | ||
125 | + removeHiddenData?: boolean; | ||
126 | +} | ||
127 | + | ||
128 | +declare const FR: React.FC<FRProps>; | ||
129 | + | ||
130 | +export declare function useForm(params?: FormParams): FormInstance; | ||
131 | + | ||
132 | +export type ConnectedForm<T> = T & { | ||
133 | + form: FormInstance; | ||
134 | +}; | ||
135 | + | ||
136 | +export declare function connectForm<T extends {} = any>( | ||
137 | + component: React.ComponentType<ConnectedForm<T>> | ||
138 | +): React.ComponentType<T>; | ||
139 | + | ||
140 | +export default FR; |
es/form-render-core/src/index.js
0 → 100644
1 | +var _excluded = ["id", "widgets", "mapping", "form", "className", "style", "beforeFinish", "onFinish", "displayType", "schema", "debug", "debugCss", "locale", "debounceInput", "size", "configProvider", "theme", "validateMessages", "watch", "config", "onMount", "labelWidth", "readOnly", "disabled", "allCollapsed", "onValuesChange", "column", "removeHiddenData", "globalProps"], | ||
2 | + _excluded2 = ["onItemChange", "setEditing", "touchKey", "setValueByPath", "getSchemaByPath", "setSchemaByPath", "setSchema", "setValues", "getValues", "resetFields", "submit", "endValidating", "endSubmitting", "setErrorFields", "removeErrorField", "removeTouched", "changeTouchedKeys", "syncStuff", "logOnMount", "logOnSubmit", "setFirstMount", "_setErrors"], | ||
3 | + _excluded3 = ["isOldVersion", "schema"]; | ||
4 | + | ||
5 | +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | ||
6 | + | ||
7 | +function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } | ||
8 | + | ||
9 | +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } | ||
10 | + | ||
11 | +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } | ||
12 | + | ||
13 | +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
14 | + | ||
15 | +function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } | ||
16 | + | ||
17 | +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } | ||
18 | + | ||
19 | +/* eslint-disable react-hooks/exhaustive-deps */ | ||
20 | +import React, { useEffect, useMemo, useRef } from 'react'; | ||
21 | +import { updateSchemaToNewVersion, msToTime, yymmdd, getParamByName } from './utils'; | ||
22 | +import Core from './core'; | ||
23 | +import Watcher from './Watcher'; | ||
24 | +import { Ctx, StoreCtx, Store2Ctx } from './hooks'; | ||
25 | +import "./atom.css"; | ||
26 | +import "./index.css"; | ||
27 | +import { mapping as defaultMapping } from './mapping'; | ||
28 | + | ||
29 | +var defaultFinish = function defaultFinish(data, errors) { | ||
30 | + console.log('onFinish:', { | ||
31 | + data: data, | ||
32 | + errors: errors | ||
33 | + }); | ||
34 | +}; | ||
35 | + | ||
36 | +export { default as useForm } from './useForm'; | ||
37 | +export { defaultMapping as mapping }; | ||
38 | +export { default as connectForm } from './connectForm'; | ||
39 | + | ||
40 | +function App(_ref) { | ||
41 | + var id = _ref.id, | ||
42 | + widgets = _ref.widgets, | ||
43 | + mapping = _ref.mapping, | ||
44 | + form = _ref.form, | ||
45 | + className = _ref.className, | ||
46 | + style = _ref.style, | ||
47 | + beforeFinish = _ref.beforeFinish, | ||
48 | + _ref$onFinish = _ref.onFinish, | ||
49 | + onFinish = _ref$onFinish === void 0 ? defaultFinish : _ref$onFinish, | ||
50 | + _ref$displayType = _ref.displayType, | ||
51 | + displayType = _ref$displayType === void 0 ? 'column' : _ref$displayType, | ||
52 | + schema = _ref.schema, | ||
53 | + debug = _ref.debug, | ||
54 | + debugCss = _ref.debugCss, | ||
55 | + _ref$locale = _ref.locale, | ||
56 | + locale = _ref$locale === void 0 ? 'cn' : _ref$locale, | ||
57 | + _ref$debounceInput = _ref.debounceInput, | ||
58 | + debounceInput = _ref$debounceInput === void 0 ? false : _ref$debounceInput, | ||
59 | + size = _ref.size, | ||
60 | + configProvider = _ref.configProvider, | ||
61 | + theme = _ref.theme, | ||
62 | + validateMessages = _ref.validateMessages, | ||
63 | + _ref$watch = _ref.watch, | ||
64 | + watch = _ref$watch === void 0 ? {} : _ref$watch, | ||
65 | + config = _ref.config, | ||
66 | + onMount = _ref.onMount, | ||
67 | + labelWidth = _ref.labelWidth, | ||
68 | + readOnly = _ref.readOnly, | ||
69 | + disabled = _ref.disabled, | ||
70 | + _ref$allCollapsed = _ref.allCollapsed, | ||
71 | + allCollapsed = _ref$allCollapsed === void 0 ? false : _ref$allCollapsed, | ||
72 | + onValuesChange = _ref.onValuesChange, | ||
73 | + column = _ref.column, | ||
74 | + _ref$removeHiddenData = _ref.removeHiddenData, | ||
75 | + removeHiddenData = _ref$removeHiddenData === void 0 ? false : _ref$removeHiddenData, | ||
76 | + _ref$globalProps = _ref.globalProps, | ||
77 | + globalProps = _ref$globalProps === void 0 ? {} : _ref$globalProps, | ||
78 | + rest = _objectWithoutProperties(_ref, _excluded); | ||
79 | + | ||
80 | + try { | ||
81 | + var _ = form.submit; | ||
82 | + } catch (error) { | ||
83 | + console.error('form 为必填 props,<FormRender /> 没有接收到 form 属性!'); | ||
84 | + } | ||
85 | + | ||
86 | + var _column = schema && schema.column || column; | ||
87 | + | ||
88 | + var onItemChange = form.onItemChange, | ||
89 | + setEditing = form.setEditing, | ||
90 | + touchKey = form.touchKey, | ||
91 | + setValueByPath = form.setValueByPath, | ||
92 | + getSchemaByPath = form.getSchemaByPath, | ||
93 | + setSchemaByPath = form.setSchemaByPath, | ||
94 | + setSchema = form.setSchema, | ||
95 | + setValues = form.setValues, | ||
96 | + getValues = form.getValues, | ||
97 | + resetFields = form.resetFields, | ||
98 | + submit = form.submit, | ||
99 | + endValidating = form.endValidating, | ||
100 | + endSubmitting = form.endSubmitting, | ||
101 | + setErrorFields = form.setErrorFields, | ||
102 | + removeErrorField = form.removeErrorField, | ||
103 | + removeTouched = form.removeTouched, | ||
104 | + changeTouchedKeys = form.changeTouchedKeys, | ||
105 | + syncStuff = form.syncStuff, | ||
106 | + logOnMount = form.logOnMount, | ||
107 | + logOnSubmit = form.logOnSubmit, | ||
108 | + setFirstMount = form.setFirstMount, | ||
109 | + _setErrors = form._setErrors, | ||
110 | + valuesThatWillChange = _objectWithoutProperties(form, _excluded2); | ||
111 | + | ||
112 | + var submitData = valuesThatWillChange.submitData, | ||
113 | + errorFields = valuesThatWillChange.errorFields, | ||
114 | + isValidating = valuesThatWillChange.isValidating, | ||
115 | + outsideValidating = valuesThatWillChange.outsideValidating, | ||
116 | + isSubmitting = valuesThatWillChange.isSubmitting, | ||
117 | + formData = valuesThatWillChange.formData, | ||
118 | + flatten = valuesThatWillChange.flatten, | ||
119 | + showValidate = valuesThatWillChange.showValidate, | ||
120 | + firstMount = valuesThatWillChange.firstMount; | ||
121 | + useEffect(function () { | ||
122 | + // Schema最外层的type是object来判断,没有的话,认为schema没有传 | ||
123 | + if (schema && schema.type) { | ||
124 | + setFirstMount(true); | ||
125 | + syncStuff({ | ||
126 | + schema: schema, | ||
127 | + locale: locale, | ||
128 | + validateMessages: validateMessages, | ||
129 | + beforeFinish: beforeFinish, | ||
130 | + onMount: onMount, | ||
131 | + removeHiddenData: removeHiddenData | ||
132 | + }); | ||
133 | + } else {} | ||
134 | + }, [JSON.stringify(schema)]); | ||
135 | + useEffect(function () { | ||
136 | + if (!firstMount && schema && schema.type) { | ||
137 | + if (typeof onMount === 'function') { | ||
138 | + // 等一下 useForm 里接到第一份schema时,计算第一份data的骨架 | ||
139 | + setTimeout(function () { | ||
140 | + onMount(); | ||
141 | + }, 0); | ||
142 | + } | ||
143 | + | ||
144 | + setTimeout(onMountLogger, 0); | ||
145 | + } | ||
146 | + }, [JSON.stringify(schema), firstMount]); | ||
147 | + | ||
148 | + var onMountLogger = function onMountLogger() { | ||
149 | + var start = new Date().getTime(); | ||
150 | + | ||
151 | + if (typeof logOnMount === 'function' || typeof logOnSubmit === 'function') { | ||
152 | + sessionStorage.setItem('FORM_MOUNT_TIME', start); | ||
153 | + sessionStorage.setItem('FORM_START', start); | ||
154 | + } | ||
155 | + | ||
156 | + if (typeof logOnMount === 'function') { | ||
157 | + var logParams = { | ||
158 | + schema: schema, | ||
159 | + url: location.href, | ||
160 | + formData: JSON.stringify(form.getValues()), | ||
161 | + formMount: yymmdd(start) | ||
162 | + }; | ||
163 | + | ||
164 | + if (id) { | ||
165 | + logParams.id = id; | ||
166 | + } | ||
167 | + | ||
168 | + logOnMount(logParams); | ||
169 | + } // 如果是要计算时间,在 onMount 时存一个时间戳 | ||
170 | + | ||
171 | + | ||
172 | + if (typeof logOnSubmit === 'function') { | ||
173 | + sessionStorage.setItem('NUMBER_OF_SUBMITS', 0); | ||
174 | + sessionStorage.setItem('FAILED_ATTEMPTS', 0); | ||
175 | + } | ||
176 | + }; // 组件destroy的时候,destroy form,因为useForm可能在上层,所以不一定会跟着destroy | ||
177 | + | ||
178 | + | ||
179 | + useEffect(function () { | ||
180 | + return function () { | ||
181 | + form.resetFields(); | ||
182 | + }; | ||
183 | + }, []); | ||
184 | + var store = useMemo(function () { | ||
185 | + return _objectSpread(_objectSpread({}, valuesThatWillChange), {}, { | ||
186 | + globalProps: globalProps | ||
187 | + }, rest); | ||
188 | + }, [JSON.stringify(flatten), JSON.stringify(formData), JSON.stringify(errorFields), JSON.stringify(globalProps)]); // 不常用的context单独放一个地方 | ||
189 | + | ||
190 | + var store2 = useMemo(function () { | ||
191 | + return { | ||
192 | + displayType: displayType, | ||
193 | + theme: theme, | ||
194 | + column: _column, | ||
195 | + debounceInput: debounceInput, | ||
196 | + debug: debug, | ||
197 | + labelWidth: labelWidth, | ||
198 | + locale: locale, | ||
199 | + validateMessages: validateMessages, | ||
200 | + readOnly: readOnly, | ||
201 | + disabled: disabled, | ||
202 | + allCollapsed: allCollapsed, | ||
203 | + showValidate: showValidate | ||
204 | + }; | ||
205 | + }, [displayType, theme, _column, debounceInput, debug, labelWidth, locale, validateMessages, readOnly, disabled, allCollapsed, showValidate]); | ||
206 | + var tools = useMemo(function () { | ||
207 | + return _objectSpread({ | ||
208 | + widgets: widgets, | ||
209 | + mapping: _objectSpread(_objectSpread({}, defaultMapping), mapping), | ||
210 | + onValuesChange: onValuesChange | ||
211 | + }, form); | ||
212 | + }, []); | ||
213 | + useEffect(function () { | ||
214 | + // 需要外部校验的情况,此时 submitting 还是 false | ||
215 | + if (outsideValidating === true) { | ||
216 | + Promise.resolve(beforeFinish(_objectSpread({ | ||
217 | + data: submitData, | ||
218 | + schema: schema, | ||
219 | + errors: errorFields | ||
220 | + }, config))).then(function (error) { | ||
221 | + if (error) { | ||
222 | + setErrorFields(error); | ||
223 | + } | ||
224 | + | ||
225 | + endValidating(); | ||
226 | + }); | ||
227 | + return; | ||
228 | + } // 如果validation结束,submitting开始 | ||
229 | + | ||
230 | + | ||
231 | + if (isValidating === false && isSubmitting === true) { | ||
232 | + endSubmitting(); | ||
233 | + onFinish(submitData, errorFields); | ||
234 | + | ||
235 | + if (typeof logOnSubmit === 'function') { | ||
236 | + var start = sessionStorage.getItem('FORM_START'); | ||
237 | + var mount = sessionStorage.getItem('FORM_MOUNT_TIME'); | ||
238 | + var numberOfSubmits = Number(sessionStorage.getItem('NUMBER_OF_SUBMITS')) + 1; | ||
239 | + var end = new Date().getTime(); | ||
240 | + var failedAttempts = Number(sessionStorage.getItem('FAILED_ATTEMPTS')); | ||
241 | + | ||
242 | + if (errorFields.length > 0) { | ||
243 | + failedAttempts = failedAttempts + 1; | ||
244 | + } | ||
245 | + | ||
246 | + var logParams = { | ||
247 | + formMount: yymmdd(mount), | ||
248 | + ms: end - start, | ||
249 | + duration: msToTime(end - start), | ||
250 | + numberOfSubmits: numberOfSubmits, | ||
251 | + failedAttempts: failedAttempts, | ||
252 | + url: location.href, | ||
253 | + formData: JSON.stringify(submitData), | ||
254 | + errors: JSON.stringify(errorFields), | ||
255 | + schema: JSON.stringify(schema) | ||
256 | + }; | ||
257 | + | ||
258 | + if (id) { | ||
259 | + logParams.id = id; | ||
260 | + } | ||
261 | + | ||
262 | + logOnSubmit(logParams); | ||
263 | + sessionStorage.setItem('FORM_START', end); | ||
264 | + sessionStorage.setItem('NUMBER_OF_SUBMITS', numberOfSubmits); | ||
265 | + sessionStorage.setItem('FAILED_ATTEMPTS', failedAttempts); | ||
266 | + } | ||
267 | + } | ||
268 | + }, [isValidating, isSubmitting, outsideValidating]); // TODO: fk doesn't work | ||
269 | + | ||
270 | + var sizeCls = ''; | ||
271 | + | ||
272 | + if (size === 'small') { | ||
273 | + sizeCls = 'fr-form-small'; | ||
274 | + } else if (size === 'large') { | ||
275 | + sizeCls = 'fr-form-large'; | ||
276 | + } | ||
277 | + | ||
278 | + var rootProps = { | ||
279 | + className: "fr-container ".concat(sizeCls, " ").concat(className || '') | ||
280 | + }; | ||
281 | + | ||
282 | + if (style && _typeof(style) === 'object') { | ||
283 | + rootProps.style = style; | ||
284 | + } | ||
285 | + | ||
286 | + if (id && ['number', 'string'].indexOf(_typeof(id)) > -1) { | ||
287 | + rootProps.id = id; | ||
288 | + } | ||
289 | + | ||
290 | + var debugForm = getParamByName('_debug_form'); | ||
291 | + var debugFormCss = getParamByName('_debug_form_css'); | ||
292 | + var isPre = location.href.indexOf('pre') > -1; | ||
293 | + var watchList = Object.keys(watch); | ||
294 | + return /*#__PURE__*/React.createElement(StoreCtx.Provider, { | ||
295 | + value: store | ||
296 | + }, /*#__PURE__*/React.createElement(Store2Ctx.Provider, { | ||
297 | + value: store2 | ||
298 | + }, /*#__PURE__*/React.createElement(Ctx.Provider, { | ||
299 | + value: tools | ||
300 | + }, /*#__PURE__*/React.createElement("div", rootProps, isPre && debugForm || debug ? /*#__PURE__*/React.createElement("div", { | ||
301 | + className: "mv2 bg-black-05 pa2 br2" | ||
302 | + }, /*#__PURE__*/React.createElement("div", { | ||
303 | + style: { | ||
304 | + display: 'flex' | ||
305 | + } | ||
306 | + }, /*#__PURE__*/React.createElement("span", null, "formData:"), /*#__PURE__*/React.createElement("span", { | ||
307 | + style: { | ||
308 | + display: 'inline-block', | ||
309 | + wordBreak: 'break-all', | ||
310 | + maxWidth: 600 | ||
311 | + } | ||
312 | + }, JSON.stringify(form.formData))), /*#__PURE__*/React.createElement("div", null, 'errorFields:' + JSON.stringify(form.errorFields)), /*#__PURE__*/React.createElement("div", null, 'touchedKeys:' + JSON.stringify(form.touchedKeys)), /*#__PURE__*/React.createElement("div", null, 'allTouched:' + JSON.stringify(form.allTouched)), /*#__PURE__*/React.createElement("div", null, 'descriptor:' + JSON.stringify(window.descriptor))) : null, watchList.length > 0 ? watchList.map(function (item, idx) { | ||
313 | + return /*#__PURE__*/React.createElement(Watcher, { | ||
314 | + key: idx.toString(), | ||
315 | + watchKey: item, | ||
316 | + watch: watch, | ||
317 | + formData: formData, | ||
318 | + firstMount: firstMount | ||
319 | + }); | ||
320 | + }) : null, /*#__PURE__*/React.createElement(Core, { | ||
321 | + debugCss: isPre && debugFormCss || debugCss | ||
322 | + }))))); | ||
323 | +} | ||
324 | + | ||
325 | +export { createWidget } from './createWidget'; | ||
326 | + | ||
327 | +var Wrapper = function Wrapper(props) { | ||
328 | + var _ref2 = props || {}, | ||
329 | + _ref2$isOldVersion = _ref2.isOldVersion, | ||
330 | + isOldVersion = _ref2$isOldVersion === void 0 ? true : _ref2$isOldVersion, | ||
331 | + schema = _ref2.schema, | ||
332 | + rest = _objectWithoutProperties(_ref2, _excluded3); | ||
333 | + | ||
334 | + var _schema = useRef(schema); | ||
335 | + | ||
336 | + if (isOldVersion) { | ||
337 | + _schema.current = updateSchemaToNewVersion(schema); | ||
338 | + } | ||
339 | + | ||
340 | + return /*#__PURE__*/React.createElement(App, _extends({ | ||
341 | + schema: _schema.current | ||
342 | + }, rest)); | ||
343 | +}; | ||
344 | + | ||
345 | +export default Wrapper; |
es/form-render-core/src/mapping.js
0 → 100644
1 | +export var mapping = { | ||
2 | + default: 'input', | ||
3 | + string: 'input', | ||
4 | + array: 'list', | ||
5 | + boolean: 'checkbox', | ||
6 | + integer: 'number', | ||
7 | + number: 'number', | ||
8 | + object: 'map', | ||
9 | + html: 'html', | ||
10 | + 'string:upload': 'upload', | ||
11 | + 'string:url': 'url', | ||
12 | + 'string:dateTime': 'date', | ||
13 | + 'string:date': 'date', | ||
14 | + 'string:year': 'date', | ||
15 | + 'string:month': 'date', | ||
16 | + 'string:week': 'date', | ||
17 | + 'string:quarter': 'date', | ||
18 | + 'string:time': 'time', | ||
19 | + 'string:textarea': 'textarea', | ||
20 | + 'string:color': 'color', | ||
21 | + 'string:image': 'imageInput', | ||
22 | + 'range:time': 'timeRange', | ||
23 | + 'range:dateTime': 'dateRange', | ||
24 | + 'range:date': 'dateRange', | ||
25 | + 'range:year': 'dateRange', | ||
26 | + 'range:month': 'dateRange', | ||
27 | + 'range:week': 'dateRange', | ||
28 | + 'range:quarter': 'dateRange', | ||
29 | + '*?enum': 'radio', | ||
30 | + '*?enum_long': 'select', | ||
31 | + 'array?enum': 'checkboxes', | ||
32 | + 'array?enum_long': 'multiSelect', | ||
33 | + '*?readOnly': 'html' // TODO: html widgets for list / object | ||
34 | + | ||
35 | +}; | ||
36 | +export function getWidgetName(schema) { | ||
37 | + var _mapping = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : mapping; | ||
38 | + | ||
39 | + var type = schema.type, | ||
40 | + format = schema.format, | ||
41 | + enums = schema.enum, | ||
42 | + readOnly = schema.readOnly, | ||
43 | + widget = schema.widget; // 如果已经注明了渲染widget,那最好 | ||
44 | + // if (schema['ui:widget']) { | ||
45 | + // return schema['ui:widget']; | ||
46 | + // } | ||
47 | + | ||
48 | + var list = []; | ||
49 | + | ||
50 | + if (readOnly) { | ||
51 | + list.push("".concat(type, "?readOnly")); | ||
52 | + list.push('*?readOnly'); | ||
53 | + } | ||
54 | + | ||
55 | + if (enums) { | ||
56 | + // 根据enum长度来智能选择控件 | ||
57 | + if (Array.isArray(enums) && (type === 'array' && enums.length > 6 || type !== 'array' && enums.length > 2)) { | ||
58 | + list.push("".concat(type, "?enum_long")); | ||
59 | + list.push('*?enum_long'); | ||
60 | + } else { | ||
61 | + list.push("".concat(type, "?enum")); // array 默认使用list,array?enum 默认使用checkboxes,*?enum 默认使用select | ||
62 | + | ||
63 | + list.push('*?enum'); | ||
64 | + } | ||
65 | + } | ||
66 | + | ||
67 | + var _widget = widget || format; | ||
68 | + | ||
69 | + if (_widget) { | ||
70 | + list.push("".concat(type, ":").concat(_widget)); | ||
71 | + } | ||
72 | + | ||
73 | + list.push(type); // 放在最后兜底,其他都不match时使用type默认的组件 | ||
74 | + | ||
75 | + var found = ''; | ||
76 | + list.some(function (item) { | ||
77 | + found = _mapping[item]; | ||
78 | + return !!found; | ||
79 | + }); | ||
80 | + return found; | ||
81 | +} | ||
82 | +export var extraSchemaList = { | ||
83 | + checkbox: { | ||
84 | + valuePropName: 'checked' | ||
85 | + }, | ||
86 | + switch: { | ||
87 | + valuePropName: 'checked' | ||
88 | + } | ||
89 | +}; |