@kne/form-info 0.1.1 → 0.1.3

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 CHANGED
@@ -60,14 +60,14 @@ const BaseExample = () => {
60
60
  <List title="列表" name="list-1" itemTitle={({index}) => `项目${index + 1}`}
61
61
  list={[<Input name="field_1" label="字段1" rule="REQ"/>, <Input name="field_2" label="字段2" rule="REQ"/>,
62
62
  <TextArea name="description" label="描述" block/>]}/>
63
- <List title="复杂列表" name="list-2" itemTitle={({index}) => `项目${index + 1}`} important
63
+ <List title="复杂列表" name="list-2" itemTitle={({index}) => `项目${index + 1}`} important maxLength={2}
64
64
  list={[<Input name="field_1" label="字段1" rule="REQ"/>, <Input name="field_2" label="字段2" rule="REQ"/>,
65
65
  <TextArea name="description" label="描述" block/>,
66
66
  <List title="子级列表" itemTitle={({index}) => `子级项目${index + 1}`}
67
67
  list={[<Input name="field_1" label="字段1" rule="REQ"/>,
68
68
  <Input name="field_2" label="字段2" rule="REQ"/>,
69
69
  <TextArea name="description" label="描述" block/>]} block/>]}/>
70
- <TableList title="表格列表" name="list-3" itemTitle={({index}) => `项目${index + 1}`}
70
+ <TableList title="表格列表" name="list-3" itemTitle={({index}) => `项目${index + 1}`} maxLength={2}
71
71
  list={[<Input name="field_1" label="字段1" rule="REQ"/>,
72
72
  <Input name="field_2" label="字段2" rule="REQ"/>,
73
73
  <Input name="description" label="描述" block/>]}/>
@@ -0,0 +1,9 @@
1
+ export default locale;
2
+ declare namespace locale {
3
+ const submit: string;
4
+ const cancel: string;
5
+ const complete: string;
6
+ const next: string;
7
+ const addText: string;
8
+ const deleteText: string;
9
+ }
package/dist/index.css CHANGED
@@ -1,3 +1,14 @@
1
+ ._ZQNNL .multi-field-delete-label {
2
+ display: none;
3
+ }
4
+ ._ZQNNL.react-form--inner .react-form__field-label.is-req:before {
5
+ position: static;
6
+ transform: translateX(0);
7
+ margin-right: 6px;
8
+ }
9
+ ._ZQNNL.react-form--inner .multi-field-delete-label {
10
+ display: block;
11
+ }
1
12
  ._ZQNNL .react-form__field {
2
13
  color: var(--font-color);
3
14
  }
@@ -7,9 +18,6 @@
7
18
  ._ZQNNL .react-form__field input::placeholder {
8
19
  color: var(--font-color-grey-2);
9
20
  }
10
- ._ZQNNL .react-form__field-label.is-req {
11
- margin-left: 0;
12
- }
13
21
  ._ZQNNL .react-form__field-label {
14
22
  color: var(--font-color-grey);
15
23
  font-size: 14px;
@@ -20,10 +28,7 @@
20
28
  }
21
29
  ._ZQNNL .react-form__field-label.is-req:before {
22
30
  color: var(--color-warning);
23
- position: static;
24
31
  display: inline-block;
25
- transform: translateX(0);
26
- margin-right: 6px;
27
32
  font-weight: bold;
28
33
  }
29
34
  ._ZQNNL .react-form__field-error {
@@ -224,4 +229,8 @@
224
229
  ._DXskv {
225
230
  padding: 16px;
226
231
  }
232
+
233
+ ._wU-w4 {
234
+ min-height: 32px;
235
+ }
227
236
  /*# sourceMappingURL=index.css.map */
@@ -1 +1 @@
1
- {"version":3,"sources":["style.module.scss"],"names":[],"mappings":"AAAA;EACE,wBAAwB;AAC1B;AACA;EACE,wBAAwB;AAC1B;AACA;EACE,+BAA+B;AACjC;AACA;EACE,cAAc;AAChB;AACA;EACE,6BAA6B;EAC7B,eAAe;EACf,iBAAiB;EACjB,YAAY;EACZ,kBAAkB;EAClB,8BAA8B;AAChC;AACA;EACE,2BAA2B;EAC3B,gBAAgB;EAChB,qBAAqB;EACrB,wBAAwB;EACxB,iBAAiB;EACjB,iBAAiB;AACnB;AACA;EACE,iBAAiB;AACnB;AACA;;EAEE,WAAW;AACb;AACA;;EAEE,OAAO;EACP,WAAW;AACb;AACA;;EAEE,mBAAmB;EACnB,wBAAwB;AAC1B;;AAEA;EACE,iCAAiC;AACnC;;AAEA;EACE,yCAAyC;EACzC,0CAA0C;EAC1C,iBAAiB;AACnB;;AAEA;EACE,iCAAiC;AACnC;AACA;EACE,UAAU;EACV,YAAY;EACZ,YAAY;AACd;AACA;EACE,iBAAiB;EACjB,gBAAgB;AAClB;;AAEA;EACE,mCAAmC;AACrC;AACA;EACE,2BAA2B;AAC7B;AACA;EACE,gBAAgB;AAClB;AACA;EACE,uBAAuB;EACvB,UAAU;EACV,YAAY;EACZ,cAAc;AAChB;AACA;EACE,mCAAmC;EACnC,2BAA2B;EAC3B,iCAAiC;EACjC,iBAAiB;AACnB;AACA;EACE,eAAe;AACjB;AACA;EACE,oCAAoC;AACtC;AACA;EACE,YAAY;AACd;AACA;EACE,mBAAmB;EACnB,iDAAiD;EACjD,iBAAiB;EACjB,YAAY;EACZ,eAAe;AACjB;AACA;EACE,0BAA0B;EAC1B,uBAAuB;EACvB,qBAAqB;EACrB,kCAAkC;AACpC;AACA;EACE,uBAAuB;EACvB,mBAAmB;EACnB,eAAe;EACf,wBAAwB;AAC1B;AACA;EACE,aAAa;AACf;AACA;EACE,0CAA0C;AAC5C;AACA;EACE,aAAa;AACf;AACA;EACE,mBAAmB;AACrB;;AAEA;EACE,0CAA0C;AAC5C;;AAEA;EACE,aAAa;EACb,iBAAiB;EACjB,QAAQ;AACV;AACA;EACE,aAAa;AACf;AACA;EACE,6BAA6B;EAC7B,eAAe;EACf,iBAAiB;EACjB,YAAY;EACZ,kBAAkB;AACpB;AACA;EACE,OAAO;AACT;;AAEA;EACE,mBAAmB;AACrB;;AAEA;EACE,2BAA2B;AAC7B;AACA;EACE,aAAa;AACf;AACA;EACE,+CAA+C;AACjD;AACA;EACE,6CAA6C;AAC/C;AACA;EACE,aAAa;EACb,uBAAuB;AACzB;;AAEA;EACE,wCAAwC;AAC1C;;AAEA;EACE,iBAAiB;AACnB;;AAEA;EACE,kCAAkC;AACpC;AACA;EACE,2BAA2B;EAC3B,YAAY;EACZ,gBAAgB;EAChB,qBAAqB;EACrB,wBAAwB;EACxB,iBAAiB;EACjB,iBAAiB;AACnB;AACA;EACE,iBAAiB;AACnB;;AAEA;EACE,iBAAiB;EACjB,iBAAiB;AACnB;;AAEA;EACE,uBAAuB;EACvB,WAAW;AACb;AACA;EACE,gBAAgB;AAClB;AACA;EACE,iBAAiB;AACnB;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,gBAAgB;AAClB;;AAEA;EACE,aAAa;AACf","file":"index.css","sourcesContent":[".form-outer :global .react-form__field {\n color: var(--font-color);\n}\n.form-outer :global .react-form__field input {\n color: var(--font-color);\n}\n.form-outer :global .react-form__field input::placeholder {\n color: var(--font-color-grey-2);\n}\n.form-outer :global .react-form__field-label.is-req {\n margin-left: 0;\n}\n.form-outer :global .react-form__field-label {\n color: var(--font-color-grey);\n font-size: 14px;\n line-height: 20px;\n height: 20px;\n margin-bottom: 8px;\n font-weight: normal !important;\n}\n.form-outer :global .react-form__field-label.is-req:before {\n color: var(--color-warning);\n position: static;\n display: inline-block;\n transform: translateX(0);\n margin-right: 6px;\n font-weight: bold;\n}\n.form-outer :global .react-form__field-error {\n line-height: 14px;\n}\n.form-outer :global .ant-input-number,\n.form-outer :global .ant-input-number-group-wrapper {\n width: 100%;\n}\n.form-outer :global .ant-picker.react-form__field-component,\n.form-outer :global .data_range_picker {\n flex: 1;\n width: 100%;\n}\n.form-outer :global .ant-input-number-group-addon,\n.form-outer :global .ant-input-group-addon {\n background: #ffffff;\n color: var(--font-color);\n}\n\n.form-info > :global(.ant-card-head .part-title) {\n font-size: var(--font-size-large);\n}\n\n.extra-btn:global(.ant-btn) {\n border-radius: var(--radius-default, 2px);\n border: 1px solid var(--font-color-grey-2);\n padding: 6px 12px;\n}\n\n.list-part > :global(.ant-card-head .part-title) {\n font-size: var(--font-size-large);\n}\n.list-part .list-part .extra-btn {\n padding: 0;\n border: none;\n min-width: 0;\n}\n.list-part:global.ant-card .ant-card-body {\n padding: 16px 0 0;\n border-radius: 0;\n}\n\n.list-item.is-important > .list-item-part:global(.ant-card > .ant-card-head) {\n background: var(--primary-color-06);\n}\n.list-item.is-important > .list-item-part:global(.ant-card > .ant-card-head .ant-card-head-title .part-title) {\n color: var(--primary-color);\n}\n.list-item.is-important .list-item-part:global(.ant-card .ant-card-head-title .part-title) {\n font-weight: 500;\n}\n.list-item.is-important > .list-item-part:global(.ant-card) .list-part:global(.ant-card > .ant-card-head) {\n background: transparent;\n padding: 0;\n border: none;\n line-height: 1;\n}\n.list-item.is-important > .list-item-part:global(.ant-card) .list-part:global(.ant-card > .ant-card-head) :global(.part-title) {\n background: var(--primary-color-06);\n color: var(--primary-color);\n font-size: var(--font-size-small);\n font-weight: bold;\n}\n.list-item.is-important > .list-item-part:global(.ant-card) .list-part:global(.ant-card > .ant-card-body) {\n padding: 16px 0;\n}\n.list-item.is-important > .list-item-part {\n border-color: var(--primary-color-5);\n}\n.list-item.is-important .table-list-inner {\n border: none;\n}\n.list-item .list-item-part:global(.ant-card) :global(.ant-card-head) {\n background: #f8f8f8;\n border-bottom: 1px solid var(--font-color-grey-4);\n line-height: 36px;\n height: 36px;\n padding: 0 16px;\n}\n.list-item .list-item-part:global(.ant-card) :global(.ant-card-head) .extra-btn {\n min-width: auto !important;\n border: none !important;\n padding: 0 !important;\n background: transparent !important;\n}\n.list-item .list-item-part:global(.ant-card) :global(.ant-card-head-title) :global(.part-title) {\n background: transparent;\n font-weight: normal;\n font-size: 14px;\n color: var(--font-color);\n}\n.list-item .list-item-part:global(.ant-card) :global(.ant-card-body) {\n padding: 16px;\n}\n.list-item :global(.ant-divider) {\n border-top-color: var(--font-color-grey-2);\n}\n.list-item :global(.ant-divider) {\n display: none;\n}\n.list-item:not(:last-child) {\n margin-bottom: 16px;\n}\n\n.list-item-part {\n border: 1px solid var(--font-color-grey-4);\n}\n\n.multi-field-item {\n display: flex;\n flex-wrap: nowrap;\n gap: 8px;\n}\n.multi-field-item:not(:first-child) :global .react-form__field-label {\n display: none;\n}\n.multi-field-item .react-form__field-label {\n color: var(--font-color-grey);\n font-size: 14px;\n line-height: 20px;\n height: 20px;\n margin-bottom: 8px;\n}\n.multi-field-item :global .react-form__field {\n flex: 1;\n}\n\n.multi-field-add-btn {\n margin-bottom: 16px;\n}\n\n.table-list .list-item {\n margin-bottom: 0 !important;\n}\n.table-list :global .react-form__field-label {\n display: none;\n}\n.table-list :global .ant-row:not(:last-child) {\n border-bottom: solid 1px var(--bg-color-grey-3);\n}\n.table-list :global .ant-row:hover {\n background: var(--bg-color-grey-1) !important;\n}\n.table-list :global .ant-col {\n padding: 16px;\n width: var(--col-width);\n}\n\n.table-list-inner {\n border: solid 1px var(--bg-color-grey-3);\n}\n\n.table-list-field:global(.ant-col) {\n padding-bottom: 0;\n}\n\n.table-list-header {\n background: var(--bg-color-grey-1);\n}\n.table-list-header .is-req:before {\n color: var(--color-warning);\n content: \"*\";\n position: static;\n display: inline-block;\n transform: translateX(0);\n margin-right: 6px;\n font-weight: bold;\n}\n.table-list-header :global .ant-col {\n padding: 8px 16px;\n}\n\n.table-options {\n flex-basis: 100px;\n text-align: right;\n}\n\n.steps {\n justify-content: center;\n width: auto;\n}\n.steps :global(.ant-steps-item) {\n max-width: 450px;\n}\n.steps :global(.ant-steps-item-content) {\n text-wrap: nowrap;\n}\n\n.steps-form-inner {\n width: 100%;\n}\n\n.steps-modal .steps {\n padding: 0 100px;\n}\n\n.table-list-empty {\n padding: 16px;\n}"]}
1
+ {"version":3,"sources":["style.module.scss"],"names":[],"mappings":"AAAA;EACE,aAAa;AACf;AACA;EACE,gBAAgB;EAChB,wBAAwB;EACxB,iBAAiB;AACnB;AACA;EACE,cAAc;AAChB;AACA;EACE,wBAAwB;AAC1B;AACA;EACE,wBAAwB;AAC1B;AACA;EACE,+BAA+B;AACjC;AACA;EACE,6BAA6B;EAC7B,eAAe;EACf,iBAAiB;EACjB,YAAY;EACZ,kBAAkB;EAClB,8BAA8B;AAChC;AACA;EACE,2BAA2B;EAC3B,qBAAqB;EACrB,iBAAiB;AACnB;AACA;EACE,iBAAiB;AACnB;AACA;;EAEE,WAAW;AACb;AACA;;EAEE,OAAO;EACP,WAAW;AACb;AACA;;EAEE,mBAAmB;EACnB,wBAAwB;AAC1B;;AAEA;EACE,iCAAiC;AACnC;;AAEA;EACE,yCAAyC;EACzC,0CAA0C;EAC1C,iBAAiB;AACnB;;AAEA;EACE,iCAAiC;AACnC;AACA;EACE,UAAU;EACV,YAAY;EACZ,YAAY;AACd;AACA;EACE,iBAAiB;EACjB,gBAAgB;AAClB;;AAEA;EACE,mCAAmC;AACrC;AACA;EACE,2BAA2B;AAC7B;AACA;EACE,gBAAgB;AAClB;AACA;EACE,uBAAuB;EACvB,UAAU;EACV,YAAY;EACZ,cAAc;AAChB;AACA;EACE,mCAAmC;EACnC,2BAA2B;EAC3B,iCAAiC;EACjC,iBAAiB;AACnB;AACA;EACE,eAAe;AACjB;AACA;EACE,oCAAoC;AACtC;AACA;EACE,YAAY;AACd;AACA;EACE,mBAAmB;EACnB,iDAAiD;EACjD,iBAAiB;EACjB,YAAY;EACZ,eAAe;AACjB;AACA;EACE,0BAA0B;EAC1B,uBAAuB;EACvB,qBAAqB;EACrB,kCAAkC;AACpC;AACA;EACE,uBAAuB;EACvB,mBAAmB;EACnB,eAAe;EACf,wBAAwB;AAC1B;AACA;EACE,aAAa;AACf;AACA;EACE,0CAA0C;AAC5C;AACA;EACE,aAAa;AACf;AACA;EACE,mBAAmB;AACrB;;AAEA;EACE,0CAA0C;AAC5C;;AAEA;EACE,aAAa;EACb,iBAAiB;EACjB,QAAQ;AACV;AACA;EACE,aAAa;AACf;AACA;EACE,6BAA6B;EAC7B,eAAe;EACf,iBAAiB;EACjB,YAAY;EACZ,kBAAkB;AACpB;AACA;EACE,OAAO;AACT;;AAEA;EACE,mBAAmB;AACrB;;AAEA;EACE,2BAA2B;AAC7B;AACA;EACE,aAAa;AACf;AACA;EACE,+CAA+C;AACjD;AACA;EACE,6CAA6C;AAC/C;AACA;EACE,aAAa;EACb,uBAAuB;AACzB;;AAEA;EACE,wCAAwC;AAC1C;;AAEA;EACE,iBAAiB;AACnB;;AAEA;EACE,kCAAkC;AACpC;AACA;EACE,2BAA2B;EAC3B,YAAY;EACZ,gBAAgB;EAChB,qBAAqB;EACrB,wBAAwB;EACxB,iBAAiB;EACjB,iBAAiB;AACnB;AACA;EACE,iBAAiB;AACnB;;AAEA;EACE,iBAAiB;EACjB,iBAAiB;AACnB;;AAEA;EACE,uBAAuB;EACvB,WAAW;AACb;AACA;EACE,gBAAgB;AAClB;AACA;EACE,iBAAiB;AACnB;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,gBAAgB;AAClB;;AAEA;EACE,aAAa;AACf;;AAEA;EACE,gBAAgB;AAClB","file":"index.css","sourcesContent":[".form-outer :global(.multi-field-delete-label) {\n display: none;\n}\n.form-outer:global(.react-form--inner) :global(.react-form__field-label.is-req:before) {\n position: static;\n transform: translateX(0);\n margin-right: 6px;\n}\n.form-outer:global(.react-form--inner) :global(.multi-field-delete-label) {\n display: block;\n}\n.form-outer :global .react-form__field {\n color: var(--font-color);\n}\n.form-outer :global .react-form__field input {\n color: var(--font-color);\n}\n.form-outer :global .react-form__field input::placeholder {\n color: var(--font-color-grey-2);\n}\n.form-outer :global .react-form__field-label {\n color: var(--font-color-grey);\n font-size: 14px;\n line-height: 20px;\n height: 20px;\n margin-bottom: 8px;\n font-weight: normal !important;\n}\n.form-outer :global .react-form__field-label.is-req:before {\n color: var(--color-warning);\n display: inline-block;\n font-weight: bold;\n}\n.form-outer :global .react-form__field-error {\n line-height: 14px;\n}\n.form-outer :global .ant-input-number,\n.form-outer :global .ant-input-number-group-wrapper {\n width: 100%;\n}\n.form-outer :global .ant-picker.react-form__field-component,\n.form-outer :global .data_range_picker {\n flex: 1;\n width: 100%;\n}\n.form-outer :global .ant-input-number-group-addon,\n.form-outer :global .ant-input-group-addon {\n background: #ffffff;\n color: var(--font-color);\n}\n\n.form-info > :global(.ant-card-head .part-title) {\n font-size: var(--font-size-large);\n}\n\n.extra-btn:global(.ant-btn) {\n border-radius: var(--radius-default, 2px);\n border: 1px solid var(--font-color-grey-2);\n padding: 6px 12px;\n}\n\n.list-part > :global(.ant-card-head .part-title) {\n font-size: var(--font-size-large);\n}\n.list-part .list-part .extra-btn {\n padding: 0;\n border: none;\n min-width: 0;\n}\n.list-part:global.ant-card .ant-card-body {\n padding: 16px 0 0;\n border-radius: 0;\n}\n\n.list-item.is-important > .list-item-part:global(.ant-card > .ant-card-head) {\n background: var(--primary-color-06);\n}\n.list-item.is-important > .list-item-part:global(.ant-card > .ant-card-head .ant-card-head-title .part-title) {\n color: var(--primary-color);\n}\n.list-item.is-important .list-item-part:global(.ant-card .ant-card-head-title .part-title) {\n font-weight: 500;\n}\n.list-item.is-important > .list-item-part:global(.ant-card) .list-part:global(.ant-card > .ant-card-head) {\n background: transparent;\n padding: 0;\n border: none;\n line-height: 1;\n}\n.list-item.is-important > .list-item-part:global(.ant-card) .list-part:global(.ant-card > .ant-card-head) :global(.part-title) {\n background: var(--primary-color-06);\n color: var(--primary-color);\n font-size: var(--font-size-small);\n font-weight: bold;\n}\n.list-item.is-important > .list-item-part:global(.ant-card) .list-part:global(.ant-card > .ant-card-body) {\n padding: 16px 0;\n}\n.list-item.is-important > .list-item-part {\n border-color: var(--primary-color-5);\n}\n.list-item.is-important .table-list-inner {\n border: none;\n}\n.list-item .list-item-part:global(.ant-card) :global(.ant-card-head) {\n background: #f8f8f8;\n border-bottom: 1px solid var(--font-color-grey-4);\n line-height: 36px;\n height: 36px;\n padding: 0 16px;\n}\n.list-item .list-item-part:global(.ant-card) :global(.ant-card-head) .extra-btn {\n min-width: auto !important;\n border: none !important;\n padding: 0 !important;\n background: transparent !important;\n}\n.list-item .list-item-part:global(.ant-card) :global(.ant-card-head-title) :global(.part-title) {\n background: transparent;\n font-weight: normal;\n font-size: 14px;\n color: var(--font-color);\n}\n.list-item .list-item-part:global(.ant-card) :global(.ant-card-body) {\n padding: 16px;\n}\n.list-item :global(.ant-divider) {\n border-top-color: var(--font-color-grey-2);\n}\n.list-item :global(.ant-divider) {\n display: none;\n}\n.list-item:not(:last-child) {\n margin-bottom: 16px;\n}\n\n.list-item-part {\n border: 1px solid var(--font-color-grey-4);\n}\n\n.multi-field-item {\n display: flex;\n flex-wrap: nowrap;\n gap: 8px;\n}\n.multi-field-item:not(:first-child) :global .react-form__field-label {\n display: none;\n}\n.multi-field-item .react-form__field-label {\n color: var(--font-color-grey);\n font-size: 14px;\n line-height: 20px;\n height: 20px;\n margin-bottom: 8px;\n}\n.multi-field-item :global .react-form__field {\n flex: 1;\n}\n\n.multi-field-add-btn {\n margin-bottom: 16px;\n}\n\n.table-list .list-item {\n margin-bottom: 0 !important;\n}\n.table-list :global .react-form__field-label {\n display: none;\n}\n.table-list :global .ant-row:not(:last-child) {\n border-bottom: solid 1px var(--bg-color-grey-3);\n}\n.table-list :global .ant-row:hover {\n background: var(--bg-color-grey-1) !important;\n}\n.table-list :global .ant-col {\n padding: 16px;\n width: var(--col-width);\n}\n\n.table-list-inner {\n border: solid 1px var(--bg-color-grey-3);\n}\n\n.table-list-field:global(.ant-col) {\n padding-bottom: 0;\n}\n\n.table-list-header {\n background: var(--bg-color-grey-1);\n}\n.table-list-header .is-req:before {\n color: var(--color-warning);\n content: \"*\";\n position: static;\n display: inline-block;\n transform: translateX(0);\n margin-right: 6px;\n font-weight: bold;\n}\n.table-list-header :global .ant-col {\n padding: 8px 16px;\n}\n\n.table-options {\n flex-basis: 100px;\n text-align: right;\n}\n\n.steps {\n justify-content: center;\n width: auto;\n}\n.steps :global(.ant-steps-item) {\n max-width: 450px;\n}\n.steps :global(.ant-steps-item-content) {\n text-wrap: nowrap;\n}\n\n.steps-form-inner {\n width: 100%;\n}\n\n.steps-modal .steps {\n padding: 0 100px;\n}\n\n.table-list-empty {\n padding: 16px;\n}\n\n.extra-container {\n min-height: 32px;\n}"]}
@@ -0,0 +1,153 @@
1
+ import { ReactNode, ComponentType, FC } from 'react';
2
+
3
+ export interface FormInfoProps {
4
+ className?: string;
5
+ column?: number | object;
6
+ list?: ReactNode[];
7
+ gap?: number;
8
+ title?: string | ReactNode;
9
+ subtitle?: string | ReactNode;
10
+ extra?: ReactNode;
11
+ }
12
+
13
+ export interface FormModalProps {
14
+ open?: boolean;
15
+ title?: ReactNode;
16
+ onCancel?: () => void;
17
+ formProps?: {
18
+ onSubmit?: (data: any, context: any, ...args: any[]) => Promise<any> | any;
19
+ data?: any;
20
+ [key: string]: any;
21
+ };
22
+ autoClose?: boolean;
23
+ okType?: string;
24
+ okButtonProps?: object;
25
+ okText?: string | ReactNode;
26
+ onOk?: () => void | Promise<any>;
27
+ cancelButtonProps?: object;
28
+ cancelText?: string | ReactNode;
29
+ footer?: ReactNode | (({ defaultFooter, props }: any) => ReactNode);
30
+ renderModal?: (props: any) => ReactNode;
31
+ modalRender?: ({ formChildren, defaultChildren, props }: any) => ReactNode;
32
+ width?: string | number;
33
+ centered?: boolean;
34
+ closable?: boolean;
35
+ maskClosable?: boolean;
36
+ destroyOnClose?: boolean;
37
+ className?: string;
38
+ }
39
+
40
+ export interface StepItem {
41
+ title: string | ReactNode;
42
+ formProps?: {
43
+ onSubmit?: (data: any, context: any, ...args: any[]) => Promise<any> | any;
44
+ data?: any;
45
+ [key: string]: any;
46
+ };
47
+ children?: ReactNode | (({ children, isLastStep, currentStep, onStepChange, getStepCache }: any) => ReactNode);
48
+ }
49
+
50
+ export interface FormStepsProps {
51
+ items: StepItem[];
52
+ current?: number;
53
+ defaultCurrent?: number;
54
+ autoStep?: boolean;
55
+ direction?: string;
56
+ orientation?: string;
57
+ onChange?: (current: number) => void;
58
+ onComplete?: (data: any[]) => void;
59
+ stepsClassName?: string;
60
+ className?: string;
61
+ children?: ReactNode | ((props: any) => ReactNode);
62
+ }
63
+
64
+ export interface FormStepsModalProps {
65
+ items: StepItem[];
66
+ modalProps?: {
67
+ open?: boolean;
68
+ title?: ReactNode;
69
+ onCancel?: () => void;
70
+ autoClose?: boolean;
71
+ [key: string]: any;
72
+ };
73
+ completeText?: string | ReactNode;
74
+ nextText?: string | ReactNode;
75
+ autoStep?: boolean;
76
+ onComplete?: (data: any[]) => void;
77
+ className?: string;
78
+ }
79
+
80
+ export interface ListProps {
81
+ className?: string;
82
+ itemClassName?: string;
83
+ removeIcon?: ReactNode;
84
+ removeText?: string | ReactNode;
85
+ addText?: string | ReactNode;
86
+ addIcon?: ReactNode;
87
+ important?: boolean;
88
+ title?: string | ReactNode;
89
+ name: string;
90
+ list?: ReactNode[];
91
+ empty?: ReactNode;
92
+ itemTitle?: ({ index }: { index: number }) => string;
93
+ block?: boolean;
94
+ }
95
+
96
+ export interface TableListProps {
97
+ className?: string;
98
+ addIcon?: ReactNode;
99
+ addText?: string | ReactNode;
100
+ removeIcon?: ReactNode;
101
+ removeText?: string | ReactNode;
102
+ title?: string | ReactNode;
103
+ name: string;
104
+ list?: ReactNode[];
105
+ empty?: ReactNode;
106
+ itemTitle?: ({ index }: { index: number }) => string;
107
+ }
108
+
109
+ export interface MultiFieldProps {
110
+ className?: string;
111
+ addText?: string | ((label: string) => string);
112
+ addIcon?: ReactNode;
113
+ removeIcon?: ReactNode;
114
+ removeText?: string | ((label: string) => string) | null;
115
+ empty?: ReactNode;
116
+ name: string;
117
+ label: string;
118
+ field: ComponentType<any>;
119
+ block?: boolean;
120
+ rule?: string;
121
+ }
122
+
123
+ export interface FormProps {
124
+ className?: string;
125
+ type?: string;
126
+ children?: ReactNode;
127
+ onSubmit?: (data: any, ...args: any[]) => Promise<any> | any;
128
+ [key: string]: any;
129
+ }
130
+
131
+ // 组件类型声明
132
+ export declare const FormInfo: FC<FormInfoProps>;
133
+ export declare const FormModal: FC<FormModalProps>;
134
+ export declare const FormSteps: FC<FormStepsProps>;
135
+ export declare const FormStepsModal: FC<FormStepsModalProps>;
136
+ export declare const List: FC<ListProps>;
137
+ export declare const SubList: FC<ListProps>;
138
+ export declare const TableList: FC<TableListProps>;
139
+ export declare const MultiField: FC<MultiFieldProps>;
140
+ export declare const Form: FC<FormProps>;
141
+
142
+ // 默认导出
143
+ export default FormInfo;
144
+
145
+ // 国际化相关
146
+ export interface LocaleType {
147
+ submit: string;
148
+ cancel: string;
149
+ complete: string;
150
+ next: string;
151
+ addText: string;
152
+ deleteText: string;
153
+ }
package/dist/index.js CHANGED
@@ -117,7 +117,7 @@ var classnames = createCommonjsModule(function (module) {
117
117
  }());
118
118
  });
119
119
 
120
- var style = {"form-outer":"_ZQNNL","form-info":"_GW4Xx","extra-btn":"_eY4qR","list-part":"_SL3dC","list-item":"_PNnMa","is-important":"_Xkp38","list-item-part":"_HiB5Q","table-list-inner":"_Uw-3T","multi-field-item":"_uogqr","react-form__field-label":"_UGjS9","multi-field-add-btn":"_rjVPh","table-list":"_r8-bn","table-list-field":"_Qkutm","table-list-header":"_9WdfD","is-req":"_CsPaL","table-options":"_8smwK","steps":"_IOdkE","steps-form-inner":"_uc1HZ","steps-modal":"_vWPQO","table-list-empty":"_DXskv"};
120
+ var style = {"form-outer":"_ZQNNL","form-info":"_GW4Xx","extra-btn":"_eY4qR","list-part":"_SL3dC","list-item":"_PNnMa","is-important":"_Xkp38","list-item-part":"_HiB5Q","table-list-inner":"_Uw-3T","multi-field-item":"_uogqr","react-form__field-label":"_UGjS9","multi-field-add-btn":"_rjVPh","table-list":"_r8-bn","table-list-field":"_Qkutm","table-list-header":"_9WdfD","is-req":"_CsPaL","table-options":"_8smwK","steps":"_IOdkE","steps-form-inner":"_uc1HZ","steps-modal":"_vWPQO","table-list-empty":"_DXskv","extra-container":"_wU-w4"};
121
121
 
122
122
  const _excluded$7 = ["className", "column", "list", "gap"];
123
123
  const FormInfo = props => {
@@ -275,11 +275,14 @@ const List = withLocale(p => {
275
275
  return /*#__PURE__*/jsxRuntime.jsx(InfoPage__default["default"].Part, {
276
276
  className: itemClassName,
277
277
  title: title,
278
- extra: allowAdd && /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
279
- className: style['extra-btn'],
280
- icon: addIcon,
281
- onClick: onAdd,
282
- children: addText
278
+ extra: /*#__PURE__*/jsxRuntime.jsx("div", {
279
+ className: style['extra-container'],
280
+ children: allowAdd && /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
281
+ className: style['extra-btn'],
282
+ icon: addIcon,
283
+ onClick: onAdd,
284
+ children: addText
285
+ })
283
286
  }),
284
287
  children: children
285
288
  });
@@ -448,11 +451,14 @@ const TableList = withLocale(p => {
448
451
  return /*#__PURE__*/jsxRuntime.jsx(InfoPage__default["default"].Part, {
449
452
  title: title,
450
453
  className: classnames(className, style['table-list']),
451
- extra: allowAdd && /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
452
- className: style['extra-btn'],
453
- icon: addIcon,
454
- onClick: onAdd,
455
- children: addText
454
+ extra: /*#__PURE__*/jsxRuntime.jsx("div", {
455
+ className: style['extra-container'],
456
+ children: allowAdd && /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
457
+ className: style['extra-btn'],
458
+ icon: addIcon,
459
+ onClick: onAdd,
460
+ children: addText
461
+ })
456
462
  }),
457
463
  children: /*#__PURE__*/jsxRuntime.jsx("div", {
458
464
  className: style['table-list-inner'],