funda-ui 1.0.565 → 1.0.575

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.
Files changed (20) hide show
  1. package/MultiFuncSelect/index.d.ts +1 -0
  2. package/MultiFuncSelect/index.js +2 -2
  3. package/Radio/index.d.ts +2 -2
  4. package/Radio/index.js +10 -14
  5. package/Select/index.d.ts +6 -3
  6. package/Select/index.js +28 -21
  7. package/Table/index.js +12 -16
  8. package/lib/cjs/MultiFuncSelect/index.d.ts +1 -0
  9. package/lib/cjs/MultiFuncSelect/index.js +2 -2
  10. package/lib/cjs/Radio/index.d.ts +2 -2
  11. package/lib/cjs/Radio/index.js +10 -14
  12. package/lib/cjs/Select/index.d.ts +6 -3
  13. package/lib/cjs/Select/index.js +28 -21
  14. package/lib/cjs/Table/index.js +12 -16
  15. package/lib/esm/MultiFuncSelect/index.tsx +3 -2
  16. package/lib/esm/Radio/index.tsx +37 -36
  17. package/lib/esm/Select/index.tsx +30 -20
  18. package/lib/esm/Table/TableFieldRow.tsx +3 -2
  19. package/lib/esm/Table/TableRow.tsx +3 -2
  20. package/package.json +1 -1
package/MultiFuncSelect/index.d.ts CHANGED
@@ -11,6 +11,7 @@ interface MultiSelectDataConfig {
11
11
  queryStrings: string[] | number[];
12
12
  }
13
13
  interface OptionConfig {
14
+ disabled?: boolean;
14
15
  label: any;
15
16
  value: any;
16
17
  queryString: string | number;
package/MultiFuncSelect/index.js CHANGED
@@ -2065,7 +2065,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
2065
2065
  type: "button",
2066
2066
  "data-index": index,
2067
2067
  key: index,
2068
- className: "list-group-item list-group-item-action border-start-0 border-end-0 ".concat(startItemBorder, " ").concat(endItemBorder, " border-bottom-0"),
2068
+ className: "list-group-item list-group-item-action border-start-0 border-end-0 ".concat(startItemBorder, " ").concat(endItemBorder, " border-bottom-0 ").concat(typeof item.disabled === 'undefined' ? '' : item.disabled == true ? 'disabled' : ''),
2069
2069
  "data-value": "".concat(item.value),
2070
2070
  "data-label": "".concat(item.label),
2071
2071
  "data-querystring": "".concat(typeof item.queryString === 'undefined' ? '' : item.queryString),
@@ -2086,7 +2086,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
2086
2086
  type: "button",
2087
2087
  "data-index": index,
2088
2088
  key: index,
2089
- className: "list-group-item list-group-item-action border-start-0 border-end-0 ".concat(startItemBorder, " ").concat(endItemBorder, " border-bottom-0 ").concat(itemSelected ? 'list-group-item-secondary item-selected' : ''),
2089
+ className: "list-group-item list-group-item-action border-start-0 border-end-0 ".concat(startItemBorder, " ").concat(endItemBorder, " border-bottom-0 ").concat(itemSelected ? 'list-group-item-secondary item-selected' : '', " ").concat(typeof item.disabled === 'undefined' ? '' : item.disabled == true ? 'disabled' : ''),
2090
2090
  "data-value": "".concat(item.value),
2091
2091
  "data-label": "".concat(item.label),
2092
2092
  "data-querystring": "".concat(typeof item.queryString === 'undefined' ? '' : item.queryString),
package/Radio/index.d.ts CHANGED
@@ -5,9 +5,9 @@ declare module 'react' {
5
5
  }
6
6
  }
7
7
  interface OptionConfig {
8
- [propName: string]: string | number;
8
+ [propName: string]: string | number | React.ReactNode;
9
9
  }
10
- declare type RadioOptionChangeFnType = (arg1: any, arg2: any, arg3?: any) => void;
10
+ declare type RadioOptionChangeFnType = (arg1: any, arg2: any, arg3?: any, arg4?: any) => void;
11
11
  declare type RadioProps = {
12
12
  wrapperClassName?: string;
13
13
  value?: string;
package/Radio/index.js CHANGED
@@ -143,17 +143,7 @@ var Radio = function Radio(props) {
143
143
  var optionsRes = options ? isJSON(options) ? JSON.parse(options) : options : '';
144
144
 
145
145
  // return a array of options
146
- var optionsDataInit = [];
147
- var optionKeys = Object.keys(optionsRes);
148
- var optionValues = Object.values(optionsRes).map(function (item) {
149
- return item.toString();
150
- });
151
- optionsDataInit = optionKeys.map(function (item, index) {
152
- return {
153
- label: optionKeys[index],
154
- value: optionValues[index]
155
- };
156
- });
146
+ var optionsDataInit = optionsRes;
157
147
 
158
148
  //
159
149
  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(optionsDataInit),
@@ -269,10 +259,10 @@ var Radio = function Radio(props) {
269
259
 
270
260
  //
271
261
  if (typeof onChange === 'function') {
272
- onChange(event, val, dataInit[currentIndex]);
262
+ onChange(event, val, dataInit[currentIndex], currentIndex);
273
263
  }
274
264
  if (typeof onClick === 'function') {
275
- onClick(event, val, dataInit[currentIndex]);
265
+ onClick(event, val, dataInit[currentIndex], currentIndex);
276
266
  }
277
267
  }
278
268
  function handleBlur(event) {
@@ -290,6 +280,8 @@ var Radio = function Radio(props) {
290
280
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
291
281
  key: index,
292
282
  className: inline ? "form-check form-check-inline" : "form-check"
283
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
284
+ className: "d-inline-block"
293
285
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", _extends({
294
286
  tabIndex: tabIndex || 0,
295
287
  type: "radio",
@@ -315,7 +307,11 @@ var Radio = function Radio(props) {
315
307
  dangerouslySetInnerHTML: {
316
308
  __html: "".concat(item.label)
317
309
  }
318
- }));
310
+ })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
311
+ className: "d-inline-block"
312
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
313
+ className: "form-control-extends__wrapper"
314
+ }, typeof item["extends"] !== 'undefined' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, item["extends"]) : null)));
319
315
  });
320
316
  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
321
317
  // data init
package/Select/index.d.ts CHANGED
@@ -4,10 +4,13 @@ declare module 'react' {
4
4
  children?: any;
5
5
  }
6
6
  }
7
+ interface ItemConfig {
8
+ [propName: string]: string | number | boolean;
9
+ }
7
10
  interface OptionConfig {
8
- [propName: string]: string | number;
11
+ [propName: string]: string | number | boolean | ItemConfig[];
9
12
  }
10
- declare type SelectOptionChangeFnType = (arg1: any, arg2: any) => void;
13
+ declare type SelectOptionChangeFnType = (arg1: any, arg2: any, arg3?: any, arg4?: any) => void;
11
14
  declare type SelectProps = {
12
15
  wrapperClassName?: string;
13
16
  value?: string;
@@ -15,7 +18,7 @@ declare type SelectProps = {
15
18
  name?: string;
16
19
  disabled?: any;
17
20
  required?: any;
18
- options?: OptionConfig[] | string;
21
+ options?: OptionConfig[] | string | unknown;
19
22
  hierarchical?: boolean;
20
23
  indentation?: string;
21
24
  doubleIndent?: boolean;
package/Select/index.js CHANGED
@@ -300,17 +300,7 @@ var Select = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(func
300
300
  var optionsRes = options ? isJSON(options) ? JSON.parse(options) : options : '';
301
301
 
302
302
  // return a array of options
303
- var optionsDataInit = [];
304
- var optionKeys = Object.keys(optionsRes);
305
- var optionValues = Object.values(optionsRes).map(function (item) {
306
- return item.toString();
307
- });
308
- optionsDataInit = optionKeys.map(function (item, index) {
309
- return {
310
- label: optionKeys[index],
311
- value: optionValues[index]
312
- };
313
- });
303
+ var optionsDataInit = optionsRes;
314
304
 
315
305
  //
316
306
  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(optionsDataInit),
@@ -447,7 +437,7 @@ var Select = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(func
447
437
 
448
438
  //
449
439
  if (typeof onChange === 'function') {
450
- onChange(event, dataInit[event.target.selectedIndex]);
440
+ onChange(event, dataInit[event.target.selectedIndex].value, dataInit[event.target.selectedIndex], event.target.selectedIndex);
451
441
  event.target.blur();
452
442
  }
453
443
  }
@@ -462,15 +452,32 @@ var Select = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(func
462
452
 
463
453
  // Generate list of options
464
454
  var selectOptionsList = dataInit.map(function (item, index) {
465
- var _disabled = typeof item.disabled === 'undefined' ? false : item.disabled;
466
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("option", {
467
- key: index,
468
- value: item.value,
469
- dangerouslySetInnerHTML: {
470
- __html: "".concat(item.label)
471
- },
472
- disabled: _disabled
473
- });
455
+ if (typeof item.optgroup !== 'undefined') {
456
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("optgroup", {
457
+ key: 'optgroup-' + index,
458
+ label: item.label
459
+ }, item.optgroup.map(function (opt, optIndex) {
460
+ var _disabled = typeof opt.disabled === 'undefined' ? false : opt.disabled;
461
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("option", {
462
+ key: 'option-' + optIndex,
463
+ value: opt.value,
464
+ dangerouslySetInnerHTML: {
465
+ __html: "".concat(opt.label)
466
+ },
467
+ disabled: _disabled
468
+ });
469
+ }));
470
+ } else {
471
+ var _disabled = typeof item.disabled === 'undefined' ? false : item.disabled;
472
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("option", {
473
+ key: 'option-' + index,
474
+ value: item.value,
475
+ dangerouslySetInnerHTML: {
476
+ __html: "".concat(item.label)
477
+ },
478
+ disabled: _disabled
479
+ });
480
+ }
474
481
  });
475
482
  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
476
483
  // data init
package/Table/index.js CHANGED
@@ -1051,17 +1051,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
1051
1051
  var optionsRes = options ? isJSON(options) ? JSON.parse(options) : options : '';
1052
1052
 
1053
1053
  // return a array of options
1054
- var optionsDataInit = [];
1055
- var optionKeys = Object.keys(optionsRes);
1056
- var optionValues = Object.values(optionsRes).map(function (item) {
1057
- return item.toString();
1058
- });
1059
- optionsDataInit = optionKeys.map(function (item, index) {
1060
- return {
1061
- label: optionKeys[index],
1062
- value: optionValues[index]
1063
- };
1064
- });
1054
+ var optionsDataInit = optionsRes;
1065
1055
 
1066
1056
  //
1067
1057
  var _useState = (0, react__WEBPACK_IMPORTED_MODULE_0__.useState)(optionsDataInit),
@@ -1177,10 +1167,10 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
1177
1167
 
1178
1168
  //
1179
1169
  if (typeof onChange === 'function') {
1180
- onChange(event, val, dataInit[currentIndex]);
1170
+ onChange(event, val, dataInit[currentIndex], currentIndex);
1181
1171
  }
1182
1172
  if (typeof onClick === 'function') {
1183
- onClick(event, val, dataInit[currentIndex]);
1173
+ onClick(event, val, dataInit[currentIndex], currentIndex);
1184
1174
  }
1185
1175
  }
1186
1176
  function handleBlur(event) {
@@ -1198,6 +1188,8 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
1198
1188
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1199
1189
  key: index,
1200
1190
  className: inline ? "form-check form-check-inline" : "form-check"
1191
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1192
+ className: "d-inline-block"
1201
1193
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", _extends({
1202
1194
  tabIndex: tabIndex || 0,
1203
1195
  type: "radio",
@@ -1224,7 +1216,11 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
1224
1216
  dangerouslySetInnerHTML: {
1225
1217
  __html: "".concat(item.label)
1226
1218
  }
1227
- }));
1219
+ })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1220
+ className: "d-inline-block"
1221
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1222
+ className: "form-control-extends__wrapper"
1223
+ }, typeof item["extends"] !== 'undefined' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0___default().Fragment, null, item["extends"]) : null)));
1228
1224
  });
1229
1225
  (0, react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
1230
1226
  // data init
@@ -1712,7 +1708,7 @@ var TableFieldRow = function TableFieldRow(props) {
1712
1708
  className: "checkbox-trigger"
1713
1709
  }, useRadio ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((cjs_default()), {
1714
1710
  wrapperClassName: "",
1715
- options: "{\n \"\":\"".concat(rowKey, "\"}"),
1711
+ options: "[\n {\"label\": \"\",\"value\": \"".concat(rowKey, "\"}\n ]"),
1716
1712
  name: "checkbox-".concat(checkboxNamePrefix, "-0"),
1717
1713
  tabIndex: -1,
1718
1714
  "data-index": "".concat(rowIndex),
@@ -1902,7 +1898,7 @@ var TableRow = function TableRow(props) {
1902
1898
  }
1903
1899
  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((cjs_default()), {
1904
1900
  wrapperClassName: "",
1905
- options: "{\n \"\":\"".concat(nonExistentRowKey, "\"}"),
1901
+ options: "[\n {\"label\": \"\",\"value\": \"".concat(nonExistentRowKey, "\"}\n ]"),
1906
1902
  name: "checkbox-".concat(checkboxNamePrefix, "-0"),
1907
1903
  tabIndex: -1,
1908
1904
  "data-index": "".concat(nonExistentRowKey === null || nonExistentRowKey === void 0 ? void 0 : nonExistentRowKey.replace('row-', '')),
package/lib/cjs/MultiFuncSelect/index.d.ts CHANGED
@@ -11,6 +11,7 @@ interface MultiSelectDataConfig {
11
11
  queryStrings: string[] | number[];
12
12
  }
13
13
  interface OptionConfig {
14
+ disabled?: boolean;
14
15
  label: any;
15
16
  value: any;
16
17
  queryString: string | number;
package/lib/cjs/MultiFuncSelect/index.js CHANGED
@@ -2065,7 +2065,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
2065
2065
  type: "button",
2066
2066
  "data-index": index,
2067
2067
  key: index,
2068
- className: "list-group-item list-group-item-action border-start-0 border-end-0 ".concat(startItemBorder, " ").concat(endItemBorder, " border-bottom-0"),
2068
+ className: "list-group-item list-group-item-action border-start-0 border-end-0 ".concat(startItemBorder, " ").concat(endItemBorder, " border-bottom-0 ").concat(typeof item.disabled === 'undefined' ? '' : item.disabled == true ? 'disabled' : ''),
2069
2069
  "data-value": "".concat(item.value),
2070
2070
  "data-label": "".concat(item.label),
2071
2071
  "data-querystring": "".concat(typeof item.queryString === 'undefined' ? '' : item.queryString),
@@ -2086,7 +2086,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
2086
2086
  type: "button",
2087
2087
  "data-index": index,
2088
2088
  key: index,
2089
- className: "list-group-item list-group-item-action border-start-0 border-end-0 ".concat(startItemBorder, " ").concat(endItemBorder, " border-bottom-0 ").concat(itemSelected ? 'list-group-item-secondary item-selected' : ''),
2089
+ className: "list-group-item list-group-item-action border-start-0 border-end-0 ".concat(startItemBorder, " ").concat(endItemBorder, " border-bottom-0 ").concat(itemSelected ? 'list-group-item-secondary item-selected' : '', " ").concat(typeof item.disabled === 'undefined' ? '' : item.disabled == true ? 'disabled' : ''),
2090
2090
  "data-value": "".concat(item.value),
2091
2091
  "data-label": "".concat(item.label),
2092
2092
  "data-querystring": "".concat(typeof item.queryString === 'undefined' ? '' : item.queryString),
package/lib/cjs/Radio/index.d.ts CHANGED
@@ -5,9 +5,9 @@ declare module 'react' {
5
5
  }
6
6
  }
7
7
  interface OptionConfig {
8
- [propName: string]: string | number;
8
+ [propName: string]: string | number | React.ReactNode;
9
9
  }
10
- declare type RadioOptionChangeFnType = (arg1: any, arg2: any, arg3?: any) => void;
10
+ declare type RadioOptionChangeFnType = (arg1: any, arg2: any, arg3?: any, arg4?: any) => void;
11
11
  declare type RadioProps = {
12
12
  wrapperClassName?: string;
13
13
  value?: string;
package/lib/cjs/Radio/index.js CHANGED
@@ -143,17 +143,7 @@ var Radio = function Radio(props) {
143
143
  var optionsRes = options ? isJSON(options) ? JSON.parse(options) : options : '';
144
144
 
145
145
  // return a array of options
146
- var optionsDataInit = [];
147
- var optionKeys = Object.keys(optionsRes);
148
- var optionValues = Object.values(optionsRes).map(function (item) {
149
- return item.toString();
150
- });
151
- optionsDataInit = optionKeys.map(function (item, index) {
152
- return {
153
- label: optionKeys[index],
154
- value: optionValues[index]
155
- };
156
- });
146
+ var optionsDataInit = optionsRes;
157
147
 
158
148
  //
159
149
  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(optionsDataInit),
@@ -269,10 +259,10 @@ var Radio = function Radio(props) {
269
259
 
270
260
  //
271
261
  if (typeof onChange === 'function') {
272
- onChange(event, val, dataInit[currentIndex]);
262
+ onChange(event, val, dataInit[currentIndex], currentIndex);
273
263
  }
274
264
  if (typeof onClick === 'function') {
275
- onClick(event, val, dataInit[currentIndex]);
265
+ onClick(event, val, dataInit[currentIndex], currentIndex);
276
266
  }
277
267
  }
278
268
  function handleBlur(event) {
@@ -290,6 +280,8 @@ var Radio = function Radio(props) {
290
280
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
291
281
  key: index,
292
282
  className: inline ? "form-check form-check-inline" : "form-check"
283
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
284
+ className: "d-inline-block"
293
285
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", _extends({
294
286
  tabIndex: tabIndex || 0,
295
287
  type: "radio",
@@ -315,7 +307,11 @@ var Radio = function Radio(props) {
315
307
  dangerouslySetInnerHTML: {
316
308
  __html: "".concat(item.label)
317
309
  }
318
- }));
310
+ })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
311
+ className: "d-inline-block"
312
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
313
+ className: "form-control-extends__wrapper"
314
+ }, typeof item["extends"] !== 'undefined' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, item["extends"]) : null)));
319
315
  });
320
316
  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
321
317
  // data init
package/lib/cjs/Select/index.d.ts CHANGED
@@ -4,10 +4,13 @@ declare module 'react' {
4
4
  children?: any;
5
5
  }
6
6
  }
7
+ interface ItemConfig {
8
+ [propName: string]: string | number | boolean;
9
+ }
7
10
  interface OptionConfig {
8
- [propName: string]: string | number;
11
+ [propName: string]: string | number | boolean | ItemConfig[];
9
12
  }
10
- declare type SelectOptionChangeFnType = (arg1: any, arg2: any) => void;
13
+ declare type SelectOptionChangeFnType = (arg1: any, arg2: any, arg3?: any, arg4?: any) => void;
11
14
  declare type SelectProps = {
12
15
  wrapperClassName?: string;
13
16
  value?: string;
@@ -15,7 +18,7 @@ declare type SelectProps = {
15
18
  name?: string;
16
19
  disabled?: any;
17
20
  required?: any;
18
- options?: OptionConfig[] | string;
21
+ options?: OptionConfig[] | string | unknown;
19
22
  hierarchical?: boolean;
20
23
  indentation?: string;
21
24
  doubleIndent?: boolean;
package/lib/cjs/Select/index.js CHANGED
@@ -300,17 +300,7 @@ var Select = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(func
300
300
  var optionsRes = options ? isJSON(options) ? JSON.parse(options) : options : '';
301
301
 
302
302
  // return a array of options
303
- var optionsDataInit = [];
304
- var optionKeys = Object.keys(optionsRes);
305
- var optionValues = Object.values(optionsRes).map(function (item) {
306
- return item.toString();
307
- });
308
- optionsDataInit = optionKeys.map(function (item, index) {
309
- return {
310
- label: optionKeys[index],
311
- value: optionValues[index]
312
- };
313
- });
303
+ var optionsDataInit = optionsRes;
314
304
 
315
305
  //
316
306
  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(optionsDataInit),
@@ -447,7 +437,7 @@ var Select = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(func
447
437
 
448
438
  //
449
439
  if (typeof onChange === 'function') {
450
- onChange(event, dataInit[event.target.selectedIndex]);
440
+ onChange(event, dataInit[event.target.selectedIndex].value, dataInit[event.target.selectedIndex], event.target.selectedIndex);
451
441
  event.target.blur();
452
442
  }
453
443
  }
@@ -462,15 +452,32 @@ var Select = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(func
462
452
 
463
453
  // Generate list of options
464
454
  var selectOptionsList = dataInit.map(function (item, index) {
465
- var _disabled = typeof item.disabled === 'undefined' ? false : item.disabled;
466
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("option", {
467
- key: index,
468
- value: item.value,
469
- dangerouslySetInnerHTML: {
470
- __html: "".concat(item.label)
471
- },
472
- disabled: _disabled
473
- });
455
+ if (typeof item.optgroup !== 'undefined') {
456
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("optgroup", {
457
+ key: 'optgroup-' + index,
458
+ label: item.label
459
+ }, item.optgroup.map(function (opt, optIndex) {
460
+ var _disabled = typeof opt.disabled === 'undefined' ? false : opt.disabled;
461
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("option", {
462
+ key: 'option-' + optIndex,
463
+ value: opt.value,
464
+ dangerouslySetInnerHTML: {
465
+ __html: "".concat(opt.label)
466
+ },
467
+ disabled: _disabled
468
+ });
469
+ }));
470
+ } else {
471
+ var _disabled = typeof item.disabled === 'undefined' ? false : item.disabled;
472
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("option", {
473
+ key: 'option-' + index,
474
+ value: item.value,
475
+ dangerouslySetInnerHTML: {
476
+ __html: "".concat(item.label)
477
+ },
478
+ disabled: _disabled
479
+ });
480
+ }
474
481
  });
475
482
  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
476
483
  // data init
package/lib/cjs/Table/index.js CHANGED
@@ -1051,17 +1051,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
1051
1051
  var optionsRes = options ? isJSON(options) ? JSON.parse(options) : options : '';
1052
1052
 
1053
1053
  // return a array of options
1054
- var optionsDataInit = [];
1055
- var optionKeys = Object.keys(optionsRes);
1056
- var optionValues = Object.values(optionsRes).map(function (item) {
1057
- return item.toString();
1058
- });
1059
- optionsDataInit = optionKeys.map(function (item, index) {
1060
- return {
1061
- label: optionKeys[index],
1062
- value: optionValues[index]
1063
- };
1064
- });
1054
+ var optionsDataInit = optionsRes;
1065
1055
 
1066
1056
  //
1067
1057
  var _useState = (0, react__WEBPACK_IMPORTED_MODULE_0__.useState)(optionsDataInit),
@@ -1177,10 +1167,10 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
1177
1167
 
1178
1168
  //
1179
1169
  if (typeof onChange === 'function') {
1180
- onChange(event, val, dataInit[currentIndex]);
1170
+ onChange(event, val, dataInit[currentIndex], currentIndex);
1181
1171
  }
1182
1172
  if (typeof onClick === 'function') {
1183
- onClick(event, val, dataInit[currentIndex]);
1173
+ onClick(event, val, dataInit[currentIndex], currentIndex);
1184
1174
  }
1185
1175
  }
1186
1176
  function handleBlur(event) {
@@ -1198,6 +1188,8 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
1198
1188
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1199
1189
  key: index,
1200
1190
  className: inline ? "form-check form-check-inline" : "form-check"
1191
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1192
+ className: "d-inline-block"
1201
1193
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", _extends({
1202
1194
  tabIndex: tabIndex || 0,
1203
1195
  type: "radio",
@@ -1224,7 +1216,11 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
1224
1216
  dangerouslySetInnerHTML: {
1225
1217
  __html: "".concat(item.label)
1226
1218
  }
1227
- }));
1219
+ })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1220
+ className: "d-inline-block"
1221
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1222
+ className: "form-control-extends__wrapper"
1223
+ }, typeof item["extends"] !== 'undefined' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0___default().Fragment, null, item["extends"]) : null)));
1228
1224
  });
1229
1225
  (0, react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
1230
1226
  // data init
@@ -1712,7 +1708,7 @@ var TableFieldRow = function TableFieldRow(props) {
1712
1708
  className: "checkbox-trigger"
1713
1709
  }, useRadio ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((cjs_default()), {
1714
1710
  wrapperClassName: "",
1715
- options: "{\n \"\":\"".concat(rowKey, "\"}"),
1711
+ options: "[\n {\"label\": \"\",\"value\": \"".concat(rowKey, "\"}\n ]"),
1716
1712
  name: "checkbox-".concat(checkboxNamePrefix, "-0"),
1717
1713
  tabIndex: -1,
1718
1714
  "data-index": "".concat(rowIndex),
@@ -1902,7 +1898,7 @@ var TableRow = function TableRow(props) {
1902
1898
  }
1903
1899
  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((cjs_default()), {
1904
1900
  wrapperClassName: "",
1905
- options: "{\n \"\":\"".concat(nonExistentRowKey, "\"}"),
1901
+ options: "[\n {\"label\": \"\",\"value\": \"".concat(nonExistentRowKey, "\"}\n ]"),
1906
1902
  name: "checkbox-".concat(checkboxNamePrefix, "-0"),
1907
1903
  tabIndex: -1,
1908
1904
  "data-index": "".concat(nonExistentRowKey === null || nonExistentRowKey === void 0 ? void 0 : nonExistentRowKey.replace('row-', '')),
package/lib/esm/MultiFuncSelect/index.tsx CHANGED
@@ -28,6 +28,7 @@ interface MultiSelectDataConfig {
28
28
  }
29
29
 
30
30
  interface OptionConfig {
31
+ disabled?: boolean;
31
32
  label: any;
32
33
  value: any;
33
34
  queryString: string | number;
@@ -1580,7 +1581,7 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
1580
1581
  // ++++++++++++++++++++
1581
1582
  // Single selection
1582
1583
  // ++++++++++++++++++++
1583
- return <button tabIndex={-1} onClick={handleSelect} type="button" data-index={index} key={index} className={`list-group-item list-group-item-action border-start-0 border-end-0 ${startItemBorder} ${endItemBorder} border-bottom-0`} data-value={`${item.value}`} data-label={`${item.label}`} data-querystring={`${typeof item.queryString === 'undefined' ? '' : item.queryString}`} data-itemdata={JSON.stringify(item)} role="tab" dangerouslySetInnerHTML={{
1584
+ return <button tabIndex={-1} onClick={handleSelect} type="button" data-index={index} key={index} className={`list-group-item list-group-item-action border-start-0 border-end-0 ${startItemBorder} ${endItemBorder} border-bottom-0 ${typeof item.disabled === 'undefined' ? '' : (item.disabled == true ? 'disabled' : '')}`} data-value={`${item.value}`} data-label={`${item.label}`} data-querystring={`${typeof item.queryString === 'undefined' ? '' : item.queryString}`} data-itemdata={JSON.stringify(item)} role="tab" dangerouslySetInnerHTML={{
1584
1585
  __html: item.label
1585
1586
  }}></button>
1586
1587
 
@@ -1591,7 +1592,7 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
1591
1592
  // ++++++++++++++++++++
1592
1593
  const itemSelected = multiSelControlOptionExist(controlArr.values, item.value) ? true : false;
1593
1594
 
1594
- return <button tabIndex={-1} onClick={handleSelect} type="button" data-index={index} key={index} className={`list-group-item list-group-item-action border-start-0 border-end-0 ${startItemBorder} ${endItemBorder} border-bottom-0 ${itemSelected ? 'list-group-item-secondary item-selected' : ''}`} data-value={`${item.value}`} data-label={`${item.label}`} data-querystring={`${typeof item.queryString === 'undefined' ? '' : item.queryString}`} data-itemdata={JSON.stringify(item)} role="tab">
1595
+ return <button tabIndex={-1} onClick={handleSelect} type="button" data-index={index} key={index} className={`list-group-item list-group-item-action border-start-0 border-end-0 ${startItemBorder} ${endItemBorder} border-bottom-0 ${itemSelected ? 'list-group-item-secondary item-selected' : ''} ${typeof item.disabled === 'undefined' ? '' : (item.disabled == true ? 'disabled' : '')}`} data-value={`${item.value}`} data-label={`${item.label}`} data-querystring={`${typeof item.queryString === 'undefined' ? '' : item.queryString}`} data-itemdata={JSON.stringify(item)} role="tab">
1595
1596
  <var className="d-inline-block me-1 ">
1596
1597
  {!itemSelected ? <svg width="1.2em" height="1.2em" viewBox="0 0 24 24" fill="none">
1597
1598
  <path d="M4 7.2002V16.8002C4 17.9203 4 18.4801 4.21799 18.9079C4.40973 19.2842 4.71547 19.5905 5.0918 19.7822C5.5192 20 6.07899 20 7.19691 20H16.8031C17.921 20 18.48 20 18.9074 19.7822C19.2837 19.5905 19.5905 19.2842 19.7822 18.9079C20 18.4805 20 17.9215 20 16.8036V7.19691C20 6.07899 20 5.5192 19.7822 5.0918C19.5905 4.71547 19.2837 4.40973 18.9074 4.21799C18.4796 4 17.9203 4 16.8002 4H7.2002C6.08009 4 5.51962 4 5.0918 4.21799C4.71547 4.40973 4.40973 4.71547 4.21799 5.0918C4 5.51962 4 6.08009 4 7.2002Z" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
package/lib/esm/Radio/index.tsx CHANGED
@@ -7,11 +7,11 @@ declare module 'react' {
7
7
  }
8
8
 
9
9
  interface OptionConfig {
10
- [propName: string]: string | number;
10
+ [propName: string]: string | number | React.ReactNode;
11
11
  }
12
12
 
13
13
 
14
- type RadioOptionChangeFnType = (arg1: any, arg2: any, arg3?: any) => void;
14
+ type RadioOptionChangeFnType = (arg1: any, arg2: any, arg3?: any, arg4?: any) => void;
15
15
 
16
16
 
17
17
  type RadioProps = {
@@ -74,17 +74,8 @@ const Radio = (props: RadioProps) => {
74
74
  const optionsRes = options ? isJSON(options) ? JSON.parse(options as string) : options : '';
75
75
 
76
76
  // return a array of options
77
- let optionsDataInit: OptionConfig[] = [];
78
- const optionKeys = Object.keys(optionsRes);
79
- const optionValues = Object.values(optionsRes).map((item: any) => item.toString());
80
-
81
- optionsDataInit = optionKeys.map((item: any, index: number) => {
82
- return {
83
- label: optionKeys[index],
84
- value: optionValues[index]
85
- }
86
- });
87
-
77
+ let optionsDataInit: OptionConfig[] = optionsRes;
78
+
88
79
 
89
80
  //
90
81
  const [dataInit, setDataInit] = useState<OptionConfig[]>(optionsDataInit);
@@ -204,12 +195,13 @@ const Radio = (props: RadioProps) => {
204
195
  //remove focus style
205
196
  rootRef.current.classList.remove('focus');
206
197
 
198
+
207
199
  //
208
200
  if (typeof (onChange) === 'function') {
209
- onChange(event, val, dataInit[currentIndex]);
201
+ onChange(event, val, dataInit[currentIndex], currentIndex);
210
202
  }
211
203
  if (typeof (onClick) === 'function') {
212
- onClick(event, val, dataInit[currentIndex]);
204
+ onClick(event, val, dataInit[currentIndex], currentIndex);
213
205
  }
214
206
  }
215
207
 
@@ -229,27 +221,36 @@ const Radio = (props: RadioProps) => {
229
221
  const requiredVal = index === 0 ? required || null : null;
230
222
 
231
223
  return <div key={index} className={inline ? `form-check form-check-inline` : `form-check`}>
232
- <input
233
- tabIndex={tabIndex || 0}
234
- type="radio"
235
- className="form-check-input"
236
- id={`field-${uniqueID}-${index}`}
237
- name={name}
238
- data-index={index}
239
- value={`${item.value}`}
240
- required={requiredVal}
241
- disabled={disabled || null}
242
- onChange={handleChange}
243
- onClick={typeof (onClick) === 'function' ? handleChange : () => void (0)}
244
- onFocus={handleFocus}
245
- onBlur={handleBlur}
246
- checked={controlValue == item.value} // component status will not change if defaultChecked is used
247
- style={style}
248
- {...attributes}
249
- />
250
- <label className="form-check-label" htmlFor={`field-${uniqueID}-${index}`} dangerouslySetInnerHTML={{
251
- __html: `${item.label}`
252
- }}></label>
224
+
225
+ <div className="d-inline-block">
226
+ <input
227
+ tabIndex={tabIndex || 0}
228
+ type="radio"
229
+ className="form-check-input"
230
+ id={`field-${uniqueID}-${index}`}
231
+ name={name}
232
+ data-index={index}
233
+ value={`${item.value}`}
234
+ required={requiredVal}
235
+ disabled={disabled || null}
236
+ onChange={handleChange}
237
+ onClick={typeof (onClick) === 'function' ? handleChange : () => void (0)}
238
+ onFocus={handleFocus}
239
+ onBlur={handleBlur}
240
+ checked={controlValue == item.value} // component status will not change if defaultChecked is used
241
+ style={style}
242
+ {...attributes}
243
+ />
244
+ <label className="form-check-label" htmlFor={`field-${uniqueID}-${index}`} dangerouslySetInnerHTML={{
245
+ __html: `${item.label}`
246
+ }}></label>
247
+ </div>
248
+ <div className="d-inline-block">
249
+ <div className="form-control-extends__wrapper">{typeof item.extends !== 'undefined' ? <>{item.extends}</> : null}</div>
250
+ </div>
251
+
252
+
253
+
253
254
  </div>;
254
255
 
255
256
  });
package/lib/esm/Select/index.tsx CHANGED
@@ -13,13 +13,18 @@ declare module 'react' {
13
13
  }
14
14
  }
15
15
 
16
+ interface ItemConfig {
17
+ [propName: string]: string | number | boolean;
18
+ }
19
+
20
+
16
21
  interface OptionConfig {
17
- [propName: string]: string | number;
22
+ [propName: string]: string | number | boolean | ItemConfig[];
18
23
  }
19
24
 
20
25
 
21
26
 
22
- type SelectOptionChangeFnType = (arg1: any, arg2: any) => void;
27
+ type SelectOptionChangeFnType = (arg1: any, arg2: any, arg3?: any, arg4?: any) => void;
23
28
 
24
29
 
25
30
  type SelectProps = {
@@ -29,7 +34,7 @@ type SelectProps = {
29
34
  name?: string;
30
35
  disabled?: any;
31
36
  required?: any;
32
- options?: OptionConfig[] | string;
37
+ options?: OptionConfig[] | string | unknown;
33
38
  hierarchical?: boolean;
34
39
  indentation?: string;
35
40
  doubleIndent?: boolean;
@@ -84,17 +89,7 @@ const Select = forwardRef((props: SelectProps, ref: any) => {
84
89
  const optionsRes = options ? isJSON( options ) ? JSON.parse( options as string ) : options : '';
85
90
 
86
91
  // return a array of options
87
- let optionsDataInit: OptionConfig[] = [];
88
- const optionKeys = Object.keys(optionsRes);
89
- const optionValues = Object.values(optionsRes).map((item: any) => item.toString() );
90
-
91
- optionsDataInit = optionKeys.map((item: any, index: number) => {
92
- return {
93
- label: optionKeys[index],
94
- value: optionValues[index]
95
- }
96
- });
97
-
92
+ let optionsDataInit: OptionConfig[] = optionsRes;
98
93
 
99
94
  //
100
95
  const [dataInit, setDataInit] = useState<OptionConfig[]>(optionsDataInit);
@@ -238,7 +233,7 @@ const Select = forwardRef((props: SelectProps, ref: any) => {
238
233
 
239
234
  //
240
235
  if ( typeof(onChange) === 'function' ) {
241
- onChange(event, dataInit[event.target.selectedIndex]);
236
+ onChange(event, dataInit[event.target.selectedIndex].value, dataInit[event.target.selectedIndex], event.target.selectedIndex);
242
237
 
243
238
  event.target.blur();
244
239
  }
@@ -258,11 +253,26 @@ const Select = forwardRef((props: SelectProps, ref: any) => {
258
253
 
259
254
  // Generate list of options
260
255
  const selectOptionsList = dataInit.map((item: any, index: number) => {
261
- const _disabled = typeof item.disabled === 'undefined' ? false : item.disabled;
262
- return <option key={index} value={item.value as string} dangerouslySetInnerHTML={{
263
- __html: `${item.label}`,
264
- }} disabled={_disabled}></option>;
265
-
256
+
257
+ if (typeof item.optgroup !== 'undefined') {
258
+ return <optgroup key={'optgroup-' + index} label={item.label}>
259
+
260
+ {item.optgroup.map((opt: any, optIndex: number) => {
261
+ const _disabled = typeof opt.disabled === 'undefined' ? false : opt.disabled;
262
+ return <option key={'option-' + optIndex} value={opt.value as string} dangerouslySetInnerHTML={{
263
+ __html: `${opt.label}`,
264
+ }} disabled={_disabled}></option>;
265
+ })}
266
+
267
+ </optgroup>;
268
+ } else {
269
+ const _disabled = typeof item.disabled === 'undefined' ? false : item.disabled;
270
+ return <option key={'option-' + index} value={item.value as string} dangerouslySetInnerHTML={{
271
+ __html: `${item.label}`,
272
+ }} disabled={_disabled}></option>;
273
+
274
+ }
275
+
266
276
  });
267
277
 
268
278
 
package/lib/esm/Table/TableFieldRow.tsx CHANGED
@@ -84,8 +84,9 @@ const TableFieldRow = (props: TableFieldRowProps) => {
84
84
  {useRadio ? <>
85
85
  <Radio
86
86
  wrapperClassName=""
87
- options={`{
88
- "":"${rowKey}"}`}
87
+ options={`[
88
+ {"label": "","value": "${rowKey}"}
89
+ ]`}
89
90
  name={`checkbox-${checkboxNamePrefix}-0`}
90
91
  tabIndex={-1}
91
92
  data-index={`${rowIndex}`}
package/lib/esm/Table/TableRow.tsx CHANGED
@@ -108,8 +108,9 @@ const TableRow = (props: TableRowProps) => {
108
108
  <td style={{display: 'none'}}>
109
109
  <Radio
110
110
  wrapperClassName=""
111
- options={`{
112
- "":"${nonExistentRowKey}"}`}
111
+ options={`[
112
+ {"label": "","value": "${nonExistentRowKey}"}
113
+ ]`}
113
114
  name={`checkbox-${checkboxNamePrefix}-0`}
114
115
  tabIndex={-1}
115
116
  data-index={`${nonExistentRowKey?.replace('row-', '')}`}
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.565",
5
+ "version": "1.0.575",
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",