funda-ui 1.0.319 → 1.0.400
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/DynamicFields/index.d.ts
CHANGED
|
@@ -20,6 +20,15 @@ declare type DynamicFieldsProps = {
|
|
|
20
20
|
iconAddAfter?: React.ReactNode | string;
|
|
21
21
|
iconAdd?: React.ReactNode | string;
|
|
22
22
|
iconRemove?: React.ReactNode | string;
|
|
23
|
+
innerAppendClassName?: string;
|
|
24
|
+
innerAppendCellClassName?: string;
|
|
25
|
+
innerAppendLastCellClassName?: string;
|
|
26
|
+
innerAppendHideClassName?: string;
|
|
27
|
+
innerAppendBodyClassName?: string;
|
|
28
|
+
innerAppendHeadData?: React.ReactNode[] | string[];
|
|
29
|
+
innerAppendHeadRowClassName?: string;
|
|
30
|
+
innerAppendHeadCellClassName?: string;
|
|
31
|
+
innerAppendEmptyContent?: React.ReactNode;
|
|
23
32
|
/** -- */
|
|
24
33
|
id?: string;
|
|
25
34
|
onAdd?: (items: HTMLDivElement[]) => void;
|
package/DynamicFields/index.js
CHANGED
|
@@ -119,15 +119,28 @@ var DynamicFields = function DynamicFields(props) {
|
|
|
119
119
|
doNotRemoveDom = props.doNotRemoveDom,
|
|
120
120
|
id = props.id,
|
|
121
121
|
confirmText = props.confirmText,
|
|
122
|
+
innerAppendClassName = props.innerAppendClassName,
|
|
123
|
+
innerAppendCellClassName = props.innerAppendCellClassName,
|
|
124
|
+
innerAppendLastCellClassName = props.innerAppendLastCellClassName,
|
|
125
|
+
innerAppendHideClassName = props.innerAppendHideClassName,
|
|
126
|
+
innerAppendBodyClassName = props.innerAppendBodyClassName,
|
|
127
|
+
innerAppendHeadData = props.innerAppendHeadData,
|
|
128
|
+
innerAppendHeadRowClassName = props.innerAppendHeadRowClassName,
|
|
129
|
+
innerAppendHeadCellClassName = props.innerAppendHeadCellClassName,
|
|
130
|
+
innerAppendEmptyContent = props.innerAppendEmptyContent,
|
|
122
131
|
onAdd = props.onAdd,
|
|
123
132
|
onRemove = props.onRemove;
|
|
133
|
+
var ITEM_LAST_CLASSNAME = innerAppendLastCellClassName || 'last';
|
|
134
|
+
var ITEM_HIDE_CLASSNAME = innerAppendHideClassName || 'd-none';
|
|
124
135
|
var PER_ROW_DOM_STRING = '.dynamic-fields__append .dynamic-fields__data__wrapper';
|
|
136
|
+
var PER_INNER_BODY_DOM_STRING = '.dynamic-fields__append .dynamic-fields__inner__body';
|
|
125
137
|
var DO_NOT_REMOVE_DOM = typeof doNotRemoveDom === 'undefined' ? false : true;
|
|
126
138
|
var uniqueID = (0,react__WEBPACK_IMPORTED_MODULE_0__.useId)().replace(/\:/g, "-");
|
|
127
139
|
var idRes = id || uniqueID;
|
|
128
140
|
var rootRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
|
|
129
141
|
var fieldsRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
|
|
130
142
|
var addBtnRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
|
|
143
|
+
var emptyRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
|
|
131
144
|
var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),
|
|
132
145
|
_useState2 = _slicedToArray(_useState, 2),
|
|
133
146
|
val = _useState2[0],
|
|
@@ -136,6 +149,42 @@ var DynamicFields = function DynamicFields(props) {
|
|
|
136
149
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
137
150
|
tmpl = _useState4[0],
|
|
138
151
|
setTmpl = _useState4[1];
|
|
152
|
+
function updateLastItemCls(el, type) {
|
|
153
|
+
if (typeof el === 'undefined') return;
|
|
154
|
+
if (type === 'add') {
|
|
155
|
+
var _el$parentElement;
|
|
156
|
+
var perInnerBody = [].slice.call(rootRef.current.querySelectorAll(PER_INNER_BODY_DOM_STRING));
|
|
157
|
+
perInnerBody.forEach(function (el, i) {
|
|
158
|
+
var _el$firstChild;
|
|
159
|
+
el.classList.remove(ITEM_LAST_CLASSNAME);
|
|
160
|
+
(_el$firstChild = el.firstChild) === null || _el$firstChild === void 0 ? void 0 : _el$firstChild.classList.remove(ITEM_LAST_CLASSNAME);
|
|
161
|
+
});
|
|
162
|
+
el.classList.add(ITEM_LAST_CLASSNAME);
|
|
163
|
+
(_el$parentElement = el.parentElement) === null || _el$parentElement === void 0 ? void 0 : _el$parentElement.classList.add(ITEM_LAST_CLASSNAME);
|
|
164
|
+
} else {
|
|
165
|
+
var _el$parentElement2;
|
|
166
|
+
el.classList.remove(ITEM_LAST_CLASSNAME);
|
|
167
|
+
(_el$parentElement2 = el.parentElement) === null || _el$parentElement2 === void 0 ? void 0 : _el$parentElement2.classList.remove(ITEM_LAST_CLASSNAME);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
function updateHeadCls(type) {
|
|
171
|
+
var el = rootRef.current.querySelector('.dynamic-fields__inner__head');
|
|
172
|
+
if (el === null) return;
|
|
173
|
+
if (type === 'add') {
|
|
174
|
+
el.classList.add(ITEM_HIDE_CLASSNAME);
|
|
175
|
+
} else {
|
|
176
|
+
el.classList.remove(ITEM_HIDE_CLASSNAME);
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
function emptyContentEnabled(type) {
|
|
180
|
+
if (innerAppendEmptyContent === '' || typeof innerAppendEmptyContent === 'undefined') return false;
|
|
181
|
+
if (type === 'add') {
|
|
182
|
+
emptyRef.current.classList.add(ITEM_HIDE_CLASSNAME);
|
|
183
|
+
} else {
|
|
184
|
+
emptyRef.current.classList.remove(ITEM_HIDE_CLASSNAME);
|
|
185
|
+
}
|
|
186
|
+
return true;
|
|
187
|
+
}
|
|
139
188
|
function checkMaxStatus() {
|
|
140
189
|
//button status
|
|
141
190
|
if (rootRef.current.querySelectorAll(PER_ROW_DOM_STRING).length + 1 >= parseFloat(maxFields)) {
|
|
@@ -160,10 +209,19 @@ var DynamicFields = function DynamicFields(props) {
|
|
|
160
209
|
// update index
|
|
161
210
|
perRow.forEach(function (el, i) {
|
|
162
211
|
el.dataset.index = i.toString();
|
|
163
|
-
var pnode = el.firstChild;
|
|
164
|
-
if (pnode !== null) pnode.dataset.index = i.toString();
|
|
165
212
|
});
|
|
166
213
|
|
|
214
|
+
// update last element
|
|
215
|
+
if (perRow.length > 1) {
|
|
216
|
+
updateLastItemCls(perRow[0], 'remove');
|
|
217
|
+
updateLastItemCls(perRow[perRow.length - 1], 'add');
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
// update inner elements
|
|
221
|
+
if (perRow.length > 0) {
|
|
222
|
+
if (!emptyContentEnabled('add')) updateHeadCls('remove');
|
|
223
|
+
}
|
|
224
|
+
|
|
167
225
|
//
|
|
168
226
|
onAdd === null || onAdd === void 0 ? void 0 : onAdd(perRow);
|
|
169
227
|
}, 0);
|
|
@@ -178,7 +236,12 @@ var DynamicFields = function DynamicFields(props) {
|
|
|
178
236
|
}
|
|
179
237
|
var curItem = rootRef.current.querySelector(".dynamic-fields__append [data-key=\"".concat(curKey, "\"]"));
|
|
180
238
|
var curIndex = curItem.dataset.index;
|
|
181
|
-
|
|
239
|
+
|
|
240
|
+
// Do not delete the parent node `innerAppendBodyClassName`, otherwise an error may be reported when
|
|
241
|
+
// using routing: DOMException: Failed to execute 'removeChild' on 'Node'
|
|
242
|
+
if (curItem !== null && !DO_NOT_REMOVE_DOM) {
|
|
243
|
+
curItem.remove();
|
|
244
|
+
}
|
|
182
245
|
|
|
183
246
|
//
|
|
184
247
|
setTimeout(function () {
|
|
@@ -187,10 +250,20 @@ var DynamicFields = function DynamicFields(props) {
|
|
|
187
250
|
// update index
|
|
188
251
|
perRow.forEach(function (el, i) {
|
|
189
252
|
el.dataset.index = i.toString();
|
|
190
|
-
var pnode = el.firstChild;
|
|
191
|
-
if (pnode !== null) pnode.dataset.index = i.toString();
|
|
192
253
|
});
|
|
193
254
|
|
|
255
|
+
// update last element
|
|
256
|
+
if (perRow.length === 1) {
|
|
257
|
+
updateLastItemCls(perRow[0], 'add');
|
|
258
|
+
} else {
|
|
259
|
+
updateLastItemCls(perRow[perRow.length - 1], 'add');
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
// update inner elements
|
|
263
|
+
if (perRow.length === 0) {
|
|
264
|
+
if (!emptyContentEnabled('remove')) updateHeadCls('add');
|
|
265
|
+
}
|
|
266
|
+
|
|
194
267
|
//
|
|
195
268
|
onRemove === null || onRemove === void 0 ? void 0 : onRemove(perRow, curKey, curIndex);
|
|
196
269
|
}, 0);
|
|
@@ -200,7 +273,7 @@ var DynamicFields = function DynamicFields(props) {
|
|
|
200
273
|
var isNew = !Array.isArray(inputData);
|
|
201
274
|
var _data = Array.isArray(inputData) ? inputData : [inputData];
|
|
202
275
|
return _data.map(function (item, i) {
|
|
203
|
-
var
|
|
276
|
+
var removeBtyn = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
|
|
204
277
|
href: "#",
|
|
205
278
|
tabIndex: -1,
|
|
206
279
|
className: "dynamic-fields__removebtn align-middle",
|
|
@@ -216,14 +289,17 @@ var DynamicFields = function DynamicFields(props) {
|
|
|
216
289
|
d: "M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10ZM8 11a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2H8Z",
|
|
217
290
|
fill: "#000"
|
|
218
291
|
})))));
|
|
219
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(
|
|
292
|
+
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), {
|
|
293
|
+
key: 'tmpl-' + i
|
|
294
|
+
}, isNew ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, item) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
|
220
295
|
key: 'tmpl-' + i,
|
|
221
|
-
"
|
|
222
|
-
|
|
223
|
-
|
|
296
|
+
className: "dynamic-fields__inner__body ".concat(innerAppendBodyClassName || '', " ").concat(i === _data.length - 1 ? ITEM_LAST_CLASSNAME : ''),
|
|
297
|
+
"data-body-index": i
|
|
298
|
+
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
|
299
|
+
className: "dynamic-fields__data__wrapper position-relative ".concat(innerAppendCellClassName || '', " ").concat(i === _data.length - 1 ? ITEM_LAST_CLASSNAME : ''),
|
|
224
300
|
"data-key": i,
|
|
225
301
|
"data-index": i
|
|
226
|
-
}, item,
|
|
302
|
+
}, item, removeBtyn))));
|
|
227
303
|
});
|
|
228
304
|
}
|
|
229
305
|
(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
|
|
@@ -241,8 +317,18 @@ var DynamicFields = function DynamicFields(props) {
|
|
|
241
317
|
"data-max-fields": maxFields || 10,
|
|
242
318
|
id: idRes
|
|
243
319
|
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
|
244
|
-
className: "dynamic-fields__append"
|
|
245
|
-
},
|
|
320
|
+
className: "dynamic-fields__append ".concat(innerAppendClassName || '')
|
|
321
|
+
}, innerAppendHeadData && Array.isArray(innerAppendHeadData) && val.length > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
|
322
|
+
className: "dynamic-fields__inner__head ".concat(innerAppendHeadRowClassName || '')
|
|
323
|
+
}, innerAppendHeadData.map(function (item, i) {
|
|
324
|
+
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
|
325
|
+
key: 'inner-header-row' + i,
|
|
326
|
+
className: "".concat(innerAppendHeadCellClassName || '', " ").concat(i === innerAppendHeadData.length - 1 ? ITEM_LAST_CLASSNAME : '')
|
|
327
|
+
}, item);
|
|
328
|
+
}))) : null, generateGroup(val)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
|
329
|
+
ref: emptyRef,
|
|
330
|
+
className: "".concat(ITEM_HIDE_CLASSNAME)
|
|
331
|
+
}, innerAppendEmptyContent || null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
|
246
332
|
className: "dynamic-fields__btns"
|
|
247
333
|
}, iconAddBefore ? iconAddBefore : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
|
|
248
334
|
ref: addBtnRef,
|
|
@@ -20,6 +20,15 @@ declare type DynamicFieldsProps = {
|
|
|
20
20
|
iconAddAfter?: React.ReactNode | string;
|
|
21
21
|
iconAdd?: React.ReactNode | string;
|
|
22
22
|
iconRemove?: React.ReactNode | string;
|
|
23
|
+
innerAppendClassName?: string;
|
|
24
|
+
innerAppendCellClassName?: string;
|
|
25
|
+
innerAppendLastCellClassName?: string;
|
|
26
|
+
innerAppendHideClassName?: string;
|
|
27
|
+
innerAppendBodyClassName?: string;
|
|
28
|
+
innerAppendHeadData?: React.ReactNode[] | string[];
|
|
29
|
+
innerAppendHeadRowClassName?: string;
|
|
30
|
+
innerAppendHeadCellClassName?: string;
|
|
31
|
+
innerAppendEmptyContent?: React.ReactNode;
|
|
23
32
|
/** -- */
|
|
24
33
|
id?: string;
|
|
25
34
|
onAdd?: (items: HTMLDivElement[]) => void;
|
|
@@ -119,15 +119,28 @@ var DynamicFields = function DynamicFields(props) {
|
|
|
119
119
|
doNotRemoveDom = props.doNotRemoveDom,
|
|
120
120
|
id = props.id,
|
|
121
121
|
confirmText = props.confirmText,
|
|
122
|
+
innerAppendClassName = props.innerAppendClassName,
|
|
123
|
+
innerAppendCellClassName = props.innerAppendCellClassName,
|
|
124
|
+
innerAppendLastCellClassName = props.innerAppendLastCellClassName,
|
|
125
|
+
innerAppendHideClassName = props.innerAppendHideClassName,
|
|
126
|
+
innerAppendBodyClassName = props.innerAppendBodyClassName,
|
|
127
|
+
innerAppendHeadData = props.innerAppendHeadData,
|
|
128
|
+
innerAppendHeadRowClassName = props.innerAppendHeadRowClassName,
|
|
129
|
+
innerAppendHeadCellClassName = props.innerAppendHeadCellClassName,
|
|
130
|
+
innerAppendEmptyContent = props.innerAppendEmptyContent,
|
|
122
131
|
onAdd = props.onAdd,
|
|
123
132
|
onRemove = props.onRemove;
|
|
133
|
+
var ITEM_LAST_CLASSNAME = innerAppendLastCellClassName || 'last';
|
|
134
|
+
var ITEM_HIDE_CLASSNAME = innerAppendHideClassName || 'd-none';
|
|
124
135
|
var PER_ROW_DOM_STRING = '.dynamic-fields__append .dynamic-fields__data__wrapper';
|
|
136
|
+
var PER_INNER_BODY_DOM_STRING = '.dynamic-fields__append .dynamic-fields__inner__body';
|
|
125
137
|
var DO_NOT_REMOVE_DOM = typeof doNotRemoveDom === 'undefined' ? false : true;
|
|
126
138
|
var uniqueID = (0,react__WEBPACK_IMPORTED_MODULE_0__.useId)().replace(/\:/g, "-");
|
|
127
139
|
var idRes = id || uniqueID;
|
|
128
140
|
var rootRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
|
|
129
141
|
var fieldsRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
|
|
130
142
|
var addBtnRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
|
|
143
|
+
var emptyRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
|
|
131
144
|
var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),
|
|
132
145
|
_useState2 = _slicedToArray(_useState, 2),
|
|
133
146
|
val = _useState2[0],
|
|
@@ -136,6 +149,42 @@ var DynamicFields = function DynamicFields(props) {
|
|
|
136
149
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
137
150
|
tmpl = _useState4[0],
|
|
138
151
|
setTmpl = _useState4[1];
|
|
152
|
+
function updateLastItemCls(el, type) {
|
|
153
|
+
if (typeof el === 'undefined') return;
|
|
154
|
+
if (type === 'add') {
|
|
155
|
+
var _el$parentElement;
|
|
156
|
+
var perInnerBody = [].slice.call(rootRef.current.querySelectorAll(PER_INNER_BODY_DOM_STRING));
|
|
157
|
+
perInnerBody.forEach(function (el, i) {
|
|
158
|
+
var _el$firstChild;
|
|
159
|
+
el.classList.remove(ITEM_LAST_CLASSNAME);
|
|
160
|
+
(_el$firstChild = el.firstChild) === null || _el$firstChild === void 0 ? void 0 : _el$firstChild.classList.remove(ITEM_LAST_CLASSNAME);
|
|
161
|
+
});
|
|
162
|
+
el.classList.add(ITEM_LAST_CLASSNAME);
|
|
163
|
+
(_el$parentElement = el.parentElement) === null || _el$parentElement === void 0 ? void 0 : _el$parentElement.classList.add(ITEM_LAST_CLASSNAME);
|
|
164
|
+
} else {
|
|
165
|
+
var _el$parentElement2;
|
|
166
|
+
el.classList.remove(ITEM_LAST_CLASSNAME);
|
|
167
|
+
(_el$parentElement2 = el.parentElement) === null || _el$parentElement2 === void 0 ? void 0 : _el$parentElement2.classList.remove(ITEM_LAST_CLASSNAME);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
function updateHeadCls(type) {
|
|
171
|
+
var el = rootRef.current.querySelector('.dynamic-fields__inner__head');
|
|
172
|
+
if (el === null) return;
|
|
173
|
+
if (type === 'add') {
|
|
174
|
+
el.classList.add(ITEM_HIDE_CLASSNAME);
|
|
175
|
+
} else {
|
|
176
|
+
el.classList.remove(ITEM_HIDE_CLASSNAME);
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
function emptyContentEnabled(type) {
|
|
180
|
+
if (innerAppendEmptyContent === '' || typeof innerAppendEmptyContent === 'undefined') return false;
|
|
181
|
+
if (type === 'add') {
|
|
182
|
+
emptyRef.current.classList.add(ITEM_HIDE_CLASSNAME);
|
|
183
|
+
} else {
|
|
184
|
+
emptyRef.current.classList.remove(ITEM_HIDE_CLASSNAME);
|
|
185
|
+
}
|
|
186
|
+
return true;
|
|
187
|
+
}
|
|
139
188
|
function checkMaxStatus() {
|
|
140
189
|
//button status
|
|
141
190
|
if (rootRef.current.querySelectorAll(PER_ROW_DOM_STRING).length + 1 >= parseFloat(maxFields)) {
|
|
@@ -160,10 +209,19 @@ var DynamicFields = function DynamicFields(props) {
|
|
|
160
209
|
// update index
|
|
161
210
|
perRow.forEach(function (el, i) {
|
|
162
211
|
el.dataset.index = i.toString();
|
|
163
|
-
var pnode = el.firstChild;
|
|
164
|
-
if (pnode !== null) pnode.dataset.index = i.toString();
|
|
165
212
|
});
|
|
166
213
|
|
|
214
|
+
// update last element
|
|
215
|
+
if (perRow.length > 1) {
|
|
216
|
+
updateLastItemCls(perRow[0], 'remove');
|
|
217
|
+
updateLastItemCls(perRow[perRow.length - 1], 'add');
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
// update inner elements
|
|
221
|
+
if (perRow.length > 0) {
|
|
222
|
+
if (!emptyContentEnabled('add')) updateHeadCls('remove');
|
|
223
|
+
}
|
|
224
|
+
|
|
167
225
|
//
|
|
168
226
|
onAdd === null || onAdd === void 0 ? void 0 : onAdd(perRow);
|
|
169
227
|
}, 0);
|
|
@@ -178,7 +236,12 @@ var DynamicFields = function DynamicFields(props) {
|
|
|
178
236
|
}
|
|
179
237
|
var curItem = rootRef.current.querySelector(".dynamic-fields__append [data-key=\"".concat(curKey, "\"]"));
|
|
180
238
|
var curIndex = curItem.dataset.index;
|
|
181
|
-
|
|
239
|
+
|
|
240
|
+
// Do not delete the parent node `innerAppendBodyClassName`, otherwise an error may be reported when
|
|
241
|
+
// using routing: DOMException: Failed to execute 'removeChild' on 'Node'
|
|
242
|
+
if (curItem !== null && !DO_NOT_REMOVE_DOM) {
|
|
243
|
+
curItem.remove();
|
|
244
|
+
}
|
|
182
245
|
|
|
183
246
|
//
|
|
184
247
|
setTimeout(function () {
|
|
@@ -187,10 +250,20 @@ var DynamicFields = function DynamicFields(props) {
|
|
|
187
250
|
// update index
|
|
188
251
|
perRow.forEach(function (el, i) {
|
|
189
252
|
el.dataset.index = i.toString();
|
|
190
|
-
var pnode = el.firstChild;
|
|
191
|
-
if (pnode !== null) pnode.dataset.index = i.toString();
|
|
192
253
|
});
|
|
193
254
|
|
|
255
|
+
// update last element
|
|
256
|
+
if (perRow.length === 1) {
|
|
257
|
+
updateLastItemCls(perRow[0], 'add');
|
|
258
|
+
} else {
|
|
259
|
+
updateLastItemCls(perRow[perRow.length - 1], 'add');
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
// update inner elements
|
|
263
|
+
if (perRow.length === 0) {
|
|
264
|
+
if (!emptyContentEnabled('remove')) updateHeadCls('add');
|
|
265
|
+
}
|
|
266
|
+
|
|
194
267
|
//
|
|
195
268
|
onRemove === null || onRemove === void 0 ? void 0 : onRemove(perRow, curKey, curIndex);
|
|
196
269
|
}, 0);
|
|
@@ -200,7 +273,7 @@ var DynamicFields = function DynamicFields(props) {
|
|
|
200
273
|
var isNew = !Array.isArray(inputData);
|
|
201
274
|
var _data = Array.isArray(inputData) ? inputData : [inputData];
|
|
202
275
|
return _data.map(function (item, i) {
|
|
203
|
-
var
|
|
276
|
+
var removeBtyn = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
|
|
204
277
|
href: "#",
|
|
205
278
|
tabIndex: -1,
|
|
206
279
|
className: "dynamic-fields__removebtn align-middle",
|
|
@@ -216,14 +289,17 @@ var DynamicFields = function DynamicFields(props) {
|
|
|
216
289
|
d: "M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10ZM8 11a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2H8Z",
|
|
217
290
|
fill: "#000"
|
|
218
291
|
})))));
|
|
219
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(
|
|
292
|
+
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), {
|
|
293
|
+
key: 'tmpl-' + i
|
|
294
|
+
}, isNew ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, item) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
|
220
295
|
key: 'tmpl-' + i,
|
|
221
|
-
"
|
|
222
|
-
|
|
223
|
-
|
|
296
|
+
className: "dynamic-fields__inner__body ".concat(innerAppendBodyClassName || '', " ").concat(i === _data.length - 1 ? ITEM_LAST_CLASSNAME : ''),
|
|
297
|
+
"data-body-index": i
|
|
298
|
+
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
|
299
|
+
className: "dynamic-fields__data__wrapper position-relative ".concat(innerAppendCellClassName || '', " ").concat(i === _data.length - 1 ? ITEM_LAST_CLASSNAME : ''),
|
|
224
300
|
"data-key": i,
|
|
225
301
|
"data-index": i
|
|
226
|
-
}, item,
|
|
302
|
+
}, item, removeBtyn))));
|
|
227
303
|
});
|
|
228
304
|
}
|
|
229
305
|
(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
|
|
@@ -241,8 +317,18 @@ var DynamicFields = function DynamicFields(props) {
|
|
|
241
317
|
"data-max-fields": maxFields || 10,
|
|
242
318
|
id: idRes
|
|
243
319
|
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
|
244
|
-
className: "dynamic-fields__append"
|
|
245
|
-
},
|
|
320
|
+
className: "dynamic-fields__append ".concat(innerAppendClassName || '')
|
|
321
|
+
}, innerAppendHeadData && Array.isArray(innerAppendHeadData) && val.length > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
|
322
|
+
className: "dynamic-fields__inner__head ".concat(innerAppendHeadRowClassName || '')
|
|
323
|
+
}, innerAppendHeadData.map(function (item, i) {
|
|
324
|
+
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
|
325
|
+
key: 'inner-header-row' + i,
|
|
326
|
+
className: "".concat(innerAppendHeadCellClassName || '', " ").concat(i === innerAppendHeadData.length - 1 ? ITEM_LAST_CLASSNAME : '')
|
|
327
|
+
}, item);
|
|
328
|
+
}))) : null, generateGroup(val)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
|
329
|
+
ref: emptyRef,
|
|
330
|
+
className: "".concat(ITEM_HIDE_CLASSNAME)
|
|
331
|
+
}, innerAppendEmptyContent || null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
|
246
332
|
className: "dynamic-fields__btns"
|
|
247
333
|
}, iconAddBefore ? iconAddBefore : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
|
|
248
334
|
ref: addBtnRef,
|
|
@@ -24,6 +24,15 @@ type DynamicFieldsProps = {
|
|
|
24
24
|
iconAddAfter?: React.ReactNode | string;
|
|
25
25
|
iconAdd?: React.ReactNode | string;
|
|
26
26
|
iconRemove?: React.ReactNode | string;
|
|
27
|
+
innerAppendClassName?: string;
|
|
28
|
+
innerAppendCellClassName?: string;
|
|
29
|
+
innerAppendLastCellClassName?: string;
|
|
30
|
+
innerAppendHideClassName?: string;
|
|
31
|
+
innerAppendBodyClassName?: string;
|
|
32
|
+
innerAppendHeadData?: React.ReactNode[] | string[];
|
|
33
|
+
innerAppendHeadRowClassName?: string;
|
|
34
|
+
innerAppendHeadCellClassName?: string;
|
|
35
|
+
innerAppendEmptyContent?: React.ReactNode;
|
|
27
36
|
/** -- */
|
|
28
37
|
id?: string;
|
|
29
38
|
onAdd?: (items: HTMLDivElement[]) => void;
|
|
@@ -44,20 +53,77 @@ const DynamicFields = (props: DynamicFieldsProps) => {
|
|
|
44
53
|
doNotRemoveDom,
|
|
45
54
|
id,
|
|
46
55
|
confirmText,
|
|
56
|
+
innerAppendClassName,
|
|
57
|
+
innerAppendCellClassName,
|
|
58
|
+
innerAppendLastCellClassName,
|
|
59
|
+
innerAppendHideClassName,
|
|
60
|
+
innerAppendBodyClassName,
|
|
61
|
+
innerAppendHeadData,
|
|
62
|
+
innerAppendHeadRowClassName,
|
|
63
|
+
innerAppendHeadCellClassName,
|
|
64
|
+
innerAppendEmptyContent,
|
|
47
65
|
onAdd,
|
|
48
66
|
onRemove
|
|
49
67
|
} = props;
|
|
50
68
|
|
|
69
|
+
const ITEM_LAST_CLASSNAME = innerAppendLastCellClassName || 'last';
|
|
70
|
+
const ITEM_HIDE_CLASSNAME = innerAppendHideClassName || 'd-none';
|
|
51
71
|
const PER_ROW_DOM_STRING = '.dynamic-fields__append .dynamic-fields__data__wrapper';
|
|
72
|
+
const PER_INNER_BODY_DOM_STRING = '.dynamic-fields__append .dynamic-fields__inner__body';
|
|
52
73
|
const DO_NOT_REMOVE_DOM = typeof doNotRemoveDom === 'undefined' ? false : true;
|
|
53
74
|
const uniqueID = useId().replace(/\:/g, "-");
|
|
54
75
|
const idRes = id || uniqueID;
|
|
55
76
|
const rootRef = useRef<any>(null);
|
|
56
77
|
const fieldsRef = useRef<any>(null);
|
|
57
78
|
const addBtnRef = useRef<any>(null);
|
|
79
|
+
const emptyRef = useRef<any>(null);
|
|
58
80
|
const [val, setVal] = useState<React.ReactNode[]>([]);
|
|
59
81
|
const [tmpl, setTmpl] = useState<React.ReactNode>([]);
|
|
60
82
|
|
|
83
|
+
function updateLastItemCls(el: HTMLDivElement, type: string) {
|
|
84
|
+
if (typeof el === 'undefined') return;
|
|
85
|
+
|
|
86
|
+
if (type === 'add') {
|
|
87
|
+
const perInnerBody = [].slice.call(rootRef.current.querySelectorAll(PER_INNER_BODY_DOM_STRING));
|
|
88
|
+
perInnerBody.forEach((el: HTMLDivElement, i: number) => {
|
|
89
|
+
el.classList.remove(ITEM_LAST_CLASSNAME);
|
|
90
|
+
(el.firstChild as HTMLDivElement)?.classList.remove(ITEM_LAST_CLASSNAME);
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
el.classList.add(ITEM_LAST_CLASSNAME);
|
|
94
|
+
el.parentElement?.classList.add(ITEM_LAST_CLASSNAME);
|
|
95
|
+
} else {
|
|
96
|
+
el.classList.remove(ITEM_LAST_CLASSNAME);
|
|
97
|
+
el.parentElement?.classList.remove(ITEM_LAST_CLASSNAME);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
function updateHeadCls(type: string) {
|
|
104
|
+
const el: HTMLDivElement = rootRef.current.querySelector('.dynamic-fields__inner__head');
|
|
105
|
+
if (el === null) return;
|
|
106
|
+
|
|
107
|
+
if (type === 'add') {
|
|
108
|
+
el.classList.add(ITEM_HIDE_CLASSNAME);
|
|
109
|
+
} else {
|
|
110
|
+
el.classList.remove(ITEM_HIDE_CLASSNAME);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
function emptyContentEnabled(type: string) {
|
|
116
|
+
if (innerAppendEmptyContent === '' || typeof innerAppendEmptyContent === 'undefined') return false;
|
|
117
|
+
|
|
118
|
+
if (type === 'add') {
|
|
119
|
+
emptyRef.current.classList.add(ITEM_HIDE_CLASSNAME);
|
|
120
|
+
} else {
|
|
121
|
+
emptyRef.current.classList.remove(ITEM_HIDE_CLASSNAME);
|
|
122
|
+
}
|
|
123
|
+
return true;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
|
|
61
127
|
function checkMaxStatus() {
|
|
62
128
|
//button status
|
|
63
129
|
if (rootRef.current.querySelectorAll(PER_ROW_DOM_STRING).length + 1 >= parseFloat(maxFields)) {
|
|
@@ -79,15 +145,25 @@ const DynamicFields = (props: DynamicFieldsProps) => {
|
|
|
79
145
|
//
|
|
80
146
|
setTimeout(() => {
|
|
81
147
|
const perRow = [].slice.call(rootRef.current.querySelectorAll(PER_ROW_DOM_STRING));
|
|
82
|
-
|
|
148
|
+
|
|
149
|
+
|
|
83
150
|
// update index
|
|
84
151
|
perRow.forEach((el: HTMLDivElement, i: number) => {
|
|
85
152
|
el.dataset.index = i.toString();
|
|
86
|
-
|
|
87
|
-
const pnode = el.firstChild as HTMLDivElement;
|
|
88
|
-
if (pnode !== null) pnode.dataset.index = i.toString();
|
|
89
153
|
});
|
|
90
154
|
|
|
155
|
+
|
|
156
|
+
// update last element
|
|
157
|
+
if (perRow.length > 1) {
|
|
158
|
+
updateLastItemCls(perRow[0], 'remove');
|
|
159
|
+
updateLastItemCls(perRow[perRow.length-1], 'add');
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
// update inner elements
|
|
163
|
+
if (perRow.length > 0) {
|
|
164
|
+
if (!emptyContentEnabled('add')) updateHeadCls('remove');
|
|
165
|
+
}
|
|
166
|
+
|
|
91
167
|
//
|
|
92
168
|
onAdd?.(perRow);
|
|
93
169
|
}, 0);
|
|
@@ -110,7 +186,13 @@ const DynamicFields = (props: DynamicFieldsProps) => {
|
|
|
110
186
|
|
|
111
187
|
const curItem = rootRef.current.querySelector(`.dynamic-fields__append [data-key="${curKey}"]`);
|
|
112
188
|
const curIndex = curItem.dataset.index;
|
|
113
|
-
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
// Do not delete the parent node `innerAppendBodyClassName`, otherwise an error may be reported when
|
|
192
|
+
// using routing: DOMException: Failed to execute 'removeChild' on 'Node'
|
|
193
|
+
if (curItem !== null && !DO_NOT_REMOVE_DOM) {
|
|
194
|
+
curItem.remove();
|
|
195
|
+
}
|
|
114
196
|
|
|
115
197
|
|
|
116
198
|
//
|
|
@@ -120,12 +202,21 @@ const DynamicFields = (props: DynamicFieldsProps) => {
|
|
|
120
202
|
// update index
|
|
121
203
|
perRow.forEach((el: HTMLDivElement, i: number) => {
|
|
122
204
|
el.dataset.index = i.toString();
|
|
123
|
-
|
|
124
|
-
const pnode = el.firstChild as HTMLDivElement;
|
|
125
|
-
if (pnode !== null) pnode.dataset.index = i.toString();
|
|
126
|
-
|
|
127
205
|
});
|
|
128
206
|
|
|
207
|
+
// update last element
|
|
208
|
+
if (perRow.length === 1) {
|
|
209
|
+
updateLastItemCls(perRow[0], 'add');
|
|
210
|
+
} else {
|
|
211
|
+
updateLastItemCls(perRow[perRow.length-1], 'add');
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
// update inner elements
|
|
215
|
+
if (perRow.length === 0) {
|
|
216
|
+
if (!emptyContentEnabled('remove')) updateHeadCls('add');
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
|
|
129
220
|
//
|
|
130
221
|
onRemove?.(perRow, curKey as never, curIndex as number);
|
|
131
222
|
}, 0);
|
|
@@ -137,24 +228,25 @@ const DynamicFields = (props: DynamicFieldsProps) => {
|
|
|
137
228
|
const isNew = !Array.isArray(inputData);
|
|
138
229
|
const _data = Array.isArray(inputData) ? inputData : [inputData];
|
|
139
230
|
|
|
231
|
+
|
|
140
232
|
return (
|
|
141
233
|
_data.map((item: any, i: number) => {
|
|
142
|
-
const
|
|
234
|
+
const removeBtyn = <><a href="#" tabIndex={-1} className="dynamic-fields__removebtn align-middle" onClick={handleClickRemove}>
|
|
143
235
|
{iconRemove ? <>{iconRemove}</> : <><svg width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path fillRule="evenodd" clipRule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10ZM8 11a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2H8Z" fill="#000" /></svg></>}
|
|
144
236
|
</a></>;
|
|
145
237
|
|
|
146
|
-
return <
|
|
238
|
+
return <React.Fragment key={'tmpl-' + i}>
|
|
147
239
|
{isNew ? <>
|
|
148
240
|
{item}
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
<div className="dynamic-fields__data__wrapper position-relative" data-key={i} data-index={i}>
|
|
241
|
+
</> : <><div key={'tmpl-' + i} className={`dynamic-fields__inner__body ${innerAppendBodyClassName || ''} ${i === _data.length-1 ? ITEM_LAST_CLASSNAME : ''}`} data-body-index={i}>
|
|
242
|
+
<div className={`dynamic-fields__data__wrapper position-relative ${innerAppendCellClassName || ''} ${i === _data.length-1 ? ITEM_LAST_CLASSNAME : ''}`} data-key={i} data-index={i}>
|
|
152
243
|
{item}
|
|
153
|
-
{
|
|
244
|
+
{removeBtyn}
|
|
245
|
+
</div>
|
|
154
246
|
</div>
|
|
155
247
|
</>}
|
|
156
|
-
|
|
157
|
-
</
|
|
248
|
+
|
|
249
|
+
</React.Fragment>
|
|
158
250
|
|
|
159
251
|
})
|
|
160
252
|
|
|
@@ -179,10 +271,32 @@ const DynamicFields = (props: DynamicFieldsProps) => {
|
|
|
179
271
|
{label ? <><label className="form-label">{label}</label></> : null}
|
|
180
272
|
|
|
181
273
|
<div ref={fieldsRef} className="dynamic-fields-container" data-max-fields={maxFields || 10} id={idRes}>
|
|
182
|
-
<div className=
|
|
274
|
+
<div className={`dynamic-fields__append ${innerAppendClassName || ''}`}>
|
|
275
|
+
|
|
276
|
+
{/* //////////// head /////////// */}
|
|
277
|
+
{innerAppendHeadData && Array.isArray(innerAppendHeadData) && val.length > 0 ? <>
|
|
278
|
+
<div className={`dynamic-fields__inner__head ${innerAppendHeadRowClassName || ''}`}>
|
|
279
|
+
{innerAppendHeadData.map((item: any, i:number) => {
|
|
280
|
+
return <div key={'inner-header-row' + i} className={`${innerAppendHeadCellClassName || ''} ${i === innerAppendHeadData.length-1 ? ITEM_LAST_CLASSNAME : ''}`}>{item}</div>;
|
|
281
|
+
})}
|
|
282
|
+
</div>
|
|
283
|
+
</> : null}
|
|
284
|
+
{/* //////////// /head /////////// */}
|
|
285
|
+
|
|
286
|
+
{/* //////////// item /////////// */}
|
|
183
287
|
{generateGroup(val)}
|
|
288
|
+
{/* //////////// /item /////////// */}
|
|
289
|
+
|
|
290
|
+
|
|
184
291
|
</div>
|
|
185
292
|
|
|
293
|
+
{/* //////////// empty item /////////// */}
|
|
294
|
+
<div ref={emptyRef} className={`${ITEM_HIDE_CLASSNAME}`}>
|
|
295
|
+
{innerAppendEmptyContent || null}
|
|
296
|
+
</div>
|
|
297
|
+
{/* //////////// /empty item /////////// */}
|
|
298
|
+
|
|
299
|
+
|
|
186
300
|
<div className="dynamic-fields__btns">
|
|
187
301
|
{iconAddBefore ? iconAddBefore : null}
|
|
188
302
|
<a ref={addBtnRef} href="#" tabIndex={-1} className="dynamic-fields__addbtn align-middle" onClick={handleClickAdd}>
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"author": "UIUX Lab",
|
|
3
3
|
"email": "uiuxlab@gmail.com",
|
|
4
4
|
"name": "funda-ui",
|
|
5
|
-
"version": "1.0.
|
|
5
|
+
"version": "1.0.400",
|
|
6
6
|
"description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
|
|
7
7
|
"repository": {
|
|
8
8
|
"type": "git",
|