@kne/react-form-antd 3.1.5 → 4.0.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -12
- package/dist/index.css +0 -40
- package/dist/index.css.map +1 -1
- package/dist/index.js +1251 -751
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +1263 -702
- package/dist/index.modern.js.map +1 -1
- package/package.json +19 -33
package/README.md
CHANGED
|
@@ -34,26 +34,22 @@ npm i --save @kne/react-form-antd
|
|
|
34
34
|
|
|
35
35
|
```jsx
|
|
36
36
|
const {Button} = antd;
|
|
37
|
-
const {Form, Select, Input, Group, GroupList, SubmitButton, DatePickerToday, Rate, Slider} = reactFormAntd;
|
|
37
|
+
const {default: Form, Select, Input, Group, GroupList, SubmitButton, DatePickerToday, Rate, Slider} = reactFormAntd;
|
|
38
38
|
const {useRef} = React;
|
|
39
39
|
|
|
40
40
|
const Example = () => {
|
|
41
41
|
const addButton = useRef();
|
|
42
|
-
return <Form>
|
|
42
|
+
return <Form debug>
|
|
43
43
|
<Select name="select" label="哈哈哈" options={[{label: 'sss', value: 1}]}/>
|
|
44
44
|
<Input name="name" label="名称" realtime rule="REQ LEN-0-4"/>
|
|
45
45
|
<Input.Password name="password" label="密码"/>
|
|
46
46
|
<Rate name="rate" label="评分"/>
|
|
47
47
|
<Slider name="slider" label="滑动条"/>
|
|
48
48
|
<br/>
|
|
49
|
-
<
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
<Group name="target">
|
|
54
|
-
<Input name="name" label="名称"/>
|
|
55
|
-
<Input name="des" label="描述"/>
|
|
56
|
-
</Group>
|
|
49
|
+
<Input name="target[0].name" label="名称"/>
|
|
50
|
+
<Input name="target[0].des" label="描述"/>
|
|
51
|
+
<Input name="target[1].name" label="名称"/>
|
|
52
|
+
<Input name="target[1].des" label="描述"/>
|
|
57
53
|
<br/>
|
|
58
54
|
<div>
|
|
59
55
|
<Button onClick={() => {
|
|
@@ -61,7 +57,7 @@ const Example = () => {
|
|
|
61
57
|
}}>添加</Button>
|
|
62
58
|
</div>
|
|
63
59
|
<GroupList name="list" ref={addButton}>
|
|
64
|
-
{(
|
|
60
|
+
{({onRemove}) => {
|
|
65
61
|
return <div>
|
|
66
62
|
<Button onClick={onRemove}>删除</Button>
|
|
67
63
|
<Input name="name" label="名称"/>
|
|
@@ -74,7 +70,7 @@ const Example = () => {
|
|
|
74
70
|
</Form>
|
|
75
71
|
};
|
|
76
72
|
|
|
77
|
-
render(<Example
|
|
73
|
+
render(<Example/>);
|
|
78
74
|
|
|
79
75
|
```
|
|
80
76
|
|
package/dist/index.css
CHANGED
|
@@ -135,19 +135,6 @@
|
|
|
135
135
|
display: block;
|
|
136
136
|
}
|
|
137
137
|
|
|
138
|
-
.react-form-avatar .preview {
|
|
139
|
-
width: 85px;
|
|
140
|
-
height: 85px;
|
|
141
|
-
overflow: hidden;
|
|
142
|
-
display: flex;
|
|
143
|
-
justify-content: center;
|
|
144
|
-
align-items: center;
|
|
145
|
-
}
|
|
146
|
-
.react-form-avatar .preview img {
|
|
147
|
-
max-width: 100%;
|
|
148
|
-
max-height: 100%;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
138
|
.data_range_picker {
|
|
152
139
|
color: rgba(0, 0, 0, 0.85);
|
|
153
140
|
position: relative;
|
|
@@ -167,31 +154,4 @@
|
|
|
167
154
|
.data_range_picker_dis .ant-picker-input input {
|
|
168
155
|
color: transparent;
|
|
169
156
|
}
|
|
170
|
-
|
|
171
|
-
.svg_box {
|
|
172
|
-
display: flex;
|
|
173
|
-
align-items: center;
|
|
174
|
-
color: rgba(0, 0, 0, 0.5);
|
|
175
|
-
margin: 0 4px;
|
|
176
|
-
}
|
|
177
|
-
.svg_box svg {
|
|
178
|
-
width: 16px;
|
|
179
|
-
height: 16px;
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
.react-form-avatar-btn {
|
|
183
|
-
cursor: pointer;
|
|
184
|
-
padding: 5px;
|
|
185
|
-
box-sizing: content-box;
|
|
186
|
-
border-radius: 2px;
|
|
187
|
-
}
|
|
188
|
-
.react-form-avatar-btn:hover {
|
|
189
|
-
background: #F8F8F8;
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
.react-form-avatar-tips {
|
|
193
|
-
margin-bottom: 14px;
|
|
194
|
-
color: #999;
|
|
195
|
-
font-size: 12px;
|
|
196
|
-
}
|
|
197
157
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.scss"],"names":[],"mappings":"AAAA;EACE,gBAAgB;EAChB,eAAe;AACjB;AACA;EACE,WAAW;AACb;AACA;EACE,eAAe;EACf,kBAAkB;EAClB,iBAAiB;AACnB;AACA;EACE,kBAAkB;EAClB,iBAAiB;AACnB;AACA;EACE,mBAAmB;AACrB;AACA;EACE,sBAAsB;AACxB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,eAAe;EACf,gBAAgB;EAChB,iBAAiB;EACjB,cAAc;EACd,kBAAkB;AACpB;AACA;EACE,eAAe;EACf,kBAAkB;AACpB;AACA;EACE,sBAAsB;AACxB;AACA;EACE,qBAAqB;EACrB,kBAAkB;AACpB;AACA;EACE,eAAe;AACjB;AACA;EACE,0BAA0B;EAC1B,eAAe;AACjB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,eAAe;EACf,iBAAiB;AACnB;AACA;EACE,kBAAkB;AACpB;AACA;EACE,aAAa;AACf;AACA;EACE,iBAAiB;EACjB,kBAAkB;EAClB,iBAAiB;EACjB,iBAAiB;EACjB,kBAAkB;AACpB;AACA;EACE,kBAAkB;EAClB,cAAc;EACd,iBAAiB;EACjB,YAAY;EACZ,iBAAiB;EACjB,4BAA4B;AAC9B;AACA;EACE,kBAAkB;EAClB,OAAO;EACP,kBAAkB;AACpB;AACA;EACE,eAAe;EACf,cAAc;EACd,iBAAiB;AACnB;AACA;EACE,mBAAmB;EACnB,8BAA8B;AAChC;AACA;EACE,qBAAqB;AACvB;AACA;EACE,4CAA4C;AAC9C;AACA;EACE,qBAAqB;AACvB;AACA;EACE,4CAA4C;AAC9C;AACA;EACE,qBAAqB;AACvB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,4CAA4C;AAC9C;AACA;EACE,qBAAqB;AACvB;AACA;EACE,4CAA4C;AAC9C;AACA;EACE,cAAc;EACd,eAAe;EACf,kBAAkB;EAClB,qBAAqB;EACrB,OAAO;AACT;;AAEA;EACE,UAAU;AACZ;AACA;EACE,aAAa;AACf;AACA;EACE,cAAc;AAChB;;AAEA;EACE,
|
|
1
|
+
{"version":3,"sources":["index.scss"],"names":[],"mappings":"AAAA;EACE,gBAAgB;EAChB,eAAe;AACjB;AACA;EACE,WAAW;AACb;AACA;EACE,eAAe;EACf,kBAAkB;EAClB,iBAAiB;AACnB;AACA;EACE,kBAAkB;EAClB,iBAAiB;AACnB;AACA;EACE,mBAAmB;AACrB;AACA;EACE,sBAAsB;AACxB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,eAAe;EACf,gBAAgB;EAChB,iBAAiB;EACjB,cAAc;EACd,kBAAkB;AACpB;AACA;EACE,eAAe;EACf,kBAAkB;AACpB;AACA;EACE,sBAAsB;AACxB;AACA;EACE,qBAAqB;EACrB,kBAAkB;AACpB;AACA;EACE,eAAe;AACjB;AACA;EACE,0BAA0B;EAC1B,eAAe;AACjB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,eAAe;EACf,iBAAiB;AACnB;AACA;EACE,kBAAkB;AACpB;AACA;EACE,aAAa;AACf;AACA;EACE,iBAAiB;EACjB,kBAAkB;EAClB,iBAAiB;EACjB,iBAAiB;EACjB,kBAAkB;AACpB;AACA;EACE,kBAAkB;EAClB,cAAc;EACd,iBAAiB;EACjB,YAAY;EACZ,iBAAiB;EACjB,4BAA4B;AAC9B;AACA;EACE,kBAAkB;EAClB,OAAO;EACP,kBAAkB;AACpB;AACA;EACE,eAAe;EACf,cAAc;EACd,iBAAiB;AACnB;AACA;EACE,mBAAmB;EACnB,8BAA8B;AAChC;AACA;EACE,qBAAqB;AACvB;AACA;EACE,4CAA4C;AAC9C;AACA;EACE,qBAAqB;AACvB;AACA;EACE,4CAA4C;AAC9C;AACA;EACE,qBAAqB;AACvB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,4CAA4C;AAC9C;AACA;EACE,qBAAqB;AACvB;AACA;EACE,4CAA4C;AAC9C;AACA;EACE,cAAc;EACd,eAAe;EACf,kBAAkB;EAClB,qBAAqB;EACrB,OAAO;AACT;;AAEA;EACE,UAAU;AACZ;AACA;EACE,aAAa;AACf;AACA;EACE,cAAc;AAChB;;AAEA;EACE,0BAA0B;EAC1B,kBAAkB;AACpB;AACA;EACE,kBAAkB;EAClB,iBAAiB;EACjB,eAAe;EACf,0BAA0B;EAC1B,iBAAiB;EACjB,oBAAoB;AACtB;AACA;EACE,UAAU;AACZ;;AAEA;EACE,kBAAkB;AACpB","file":"index.css","sourcesContent":[".react-form, .react-form--inline, .react-form--inline--small, .react-form--inline--large, .react-form--inner, .react-form--inner--small, .react-form--inner--large, .react-form--small, .react-form--large {\n text-align: left;\n font-size: 12px;\n}\n.react-form .ant-select, .react-form--inline .ant-select, .react-form--inline--small .ant-select, .react-form--inline--large .ant-select, .react-form--inner .ant-select, .react-form--inner--small .ant-select, .react-form--inner--large .ant-select, .react-form--small .ant-select, .react-form--large .ant-select {\n width: 100%;\n}\n.react-form--large .react-form__field-label {\n font-size: 14px;\n margin-right: 20px;\n line-height: 34px;\n}\n.react-form--small .react-form__field-label {\n margin-right: 12px;\n line-height: 24px;\n}\n.react-form--inner .react-form__field, .react-form--inner--small .react-form__field, .react-form--inner--large .react-form__field {\n margin-bottom: 22px;\n}\n.react-form--inner .react-form__field-main, .react-form--inner--small .react-form__field-main, .react-form--inner--large .react-form__field-main {\n flex-direction: column;\n}\n.react-form--inner .react-form__field-input, .react-form--inner--small .react-form__field-input, .react-form--inner--large .react-form__field-input {\n align-self: auto;\n}\n.react-form--inner .react-form__field-label, .react-form--inner--small .react-form__field-label, .react-form--inner--large .react-form__field-label {\n font-size: 14px;\n text-align: left;\n font-weight: bold;\n margin-left: 0;\n margin-bottom: 2px;\n}\n.react-form--inner--small .react-form__field-label {\n font-size: 12px;\n margin-bottom: 1px;\n}\n.react-form--inline, .react-form--inline--small, .react-form--inline--large {\n padding: 30px 30px 6px;\n}\n.react-form--inline .react-form__field, .react-form--inline--small .react-form__field, .react-form--inline--large .react-form__field {\n display: inline-block;\n margin-right: 40px;\n}\n.react-form--inline .react-form__field:last-child, .react-form--inline--small .react-form__field:last-child, .react-form--inline--large .react-form__field:last-child {\n margin-right: 0;\n}\n.react-form--inline .react-form__field-label, .react-form--inline--small .react-form__field-label, .react-form--inline--large .react-form__field-label {\n min-width: auto !important;\n padding-left: 0;\n}\n.react-form--inline .react-form__field-label.is-req:before, .react-form--inline--small .react-form__field-label.is-req:before, .react-form--inline--large .react-form__field-label.is-req:before {\n position: static;\n}\n.react-form--inline--large .react-form__field-label {\n font-size: 14px;\n line-height: 34px;\n}\n.react-form--inline--small .react-form__field-label {\n margin-right: 12px;\n}\n.react-form__field-main {\n display: flex;\n}\n.react-form__field-label {\n text-align: right;\n margin-right: 16px;\n line-height: 30px;\n margin-left: 10px;\n position: relative;\n}\n.react-form__field-label.is-req:before {\n position: absolute;\n color: #fc3333;\n font-weight: bold;\n content: \"*\";\n margin-right: 4px;\n transform: translateX(-10px);\n}\n.react-form__field-input {\n align-self: center;\n flex: 1;\n position: relative;\n}\n.react-form__field-describable {\n font-size: 12px;\n color: #999999;\n line-height: 20px;\n}\n.react-form__field {\n margin-bottom: 24px;\n transition: border-color 300ms;\n}\n.react-form__field.is-req-error .react-form__field-component, .react-form__field.is-error .react-form__field-component {\n border-color: #fc3333;\n}\n.react-form__field.is-req-error .react-form__field-component:focus, .react-form__field.is-error .react-form__field-component:focus {\n box-shadow: 0 0 0 2px rgba(252, 51, 51, 0.2);\n}\n.react-form__field.is-req-error .react-form__field-component .ant-select-selection, .react-form__field.is-req-error .react-form__field-component .ant-input, .react-form__field.is-req-error .react-form__field-component .ant-radio-inner, .react-form__field.is-error .react-form__field-component .ant-select-selection, .react-form__field.is-error .react-form__field-component .ant-input, .react-form__field.is-error .react-form__field-component .ant-radio-inner {\n border-color: #fc3333;\n}\n.react-form__field.is-req-error .react-form__field-component .ant-select-selection:focus, .react-form__field.is-req-error .react-form__field-component .ant-input:focus, .react-form__field.is-req-error .react-form__field-component .ant-radio-inner:focus, .react-form__field.is-error .react-form__field-component .ant-select-selection:focus, .react-form__field.is-error .react-form__field-component .ant-input:focus, .react-form__field.is-error .react-form__field-component .ant-radio-inner:focus {\n box-shadow: 0 0 0 2px rgba(252, 51, 51, 0.2);\n}\n.react-form__field.is-req-error .react-form__field-component .ant-upload.ant-upload-select-picture-card, .react-form__field.is-error .react-form__field-component .ant-upload.ant-upload-select-picture-card {\n border-color: #fc3333;\n}\n.react-form__field.is-req-error .react-form__field-component.ant-input-affix-wrapper .ant-input, .react-form__field.is-error .react-form__field-component.ant-input-affix-wrapper .ant-input {\n box-shadow: none;\n}\n.react-form__field.is-req-error .react-form__field-component.ant-input-affix-wrapper-focused, .react-form__field.is-error .react-form__field-component.ant-input-affix-wrapper-focused {\n box-shadow: 0 0 0 2px rgba(252, 51, 51, 0.2);\n}\n.react-form__field.is-req-error .react-form__field-component.ant-select > .ant-select-selector, .react-form__field.is-error .react-form__field-component.ant-select > .ant-select-selector {\n border-color: #fc3333;\n}\n.react-form__field.is-req-error .react-form__field-component.ant-select.ant-select-focused > .ant-select-selector, .react-form__field.is-error .react-form__field-component.ant-select.ant-select-focused > .ant-select-selector {\n box-shadow: 0 0 0 2px rgba(252, 51, 51, 0.2);\n}\n.react-form__field-error {\n color: #fc3333;\n font-size: 12px;\n position: absolute;\n top: calc(100% + 1px);\n left: 0;\n}\n\n.react-form-modal .ant-modal-content > .ant-modal-body {\n padding: 0;\n}\n.react-form-modal .ant-modal-confirm-btns {\n display: none;\n}\n.react-form-modal.ant-modal-confirm .ant-modal-header, .react-form-modal.ant-modal-confirm .ant-modal-close {\n display: block;\n}\n\n.data_range_picker {\n color: rgba(0, 0, 0, 0.85);\n position: relative;\n}\n.data_range_picker .zhijin {\n position: absolute;\n line-height: 31px;\n font-size: 14px;\n color: rgba(0, 0, 0, 0.85);\n margin-left: 12px;\n pointer-events: auto;\n}\n.data_range_picker .zhijin_show {\n z-index: 9;\n}\n\n.data_range_picker_dis .ant-picker-input input {\n color: transparent;\n}"]}
|