@insticc/genericform 2.0.6 → 2.0.7

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 (4) hide show
  1. package/build/FormFields/CustomDropdown.js +75 -35
  2. package/build/index.css +11 -2
  3. package/build/index.js +5 -1
  4. package/package.json +1 -1
package/build/FormFields/CustomDropdown.js CHANGED
@@ -9,21 +9,28 @@ var _react = require("react");
9
9
  var _defaults = require("./defaults");
10
10
  var _jsxRuntime = require("react/jsx-runtime");
11
11
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
12
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
12
13
  var CustomDropdown = function CustomDropdown(_ref) {
14
+ var _value$optionProp;
13
15
  var onChange = _ref.onChange,
14
16
  name = _ref.name,
15
17
  displayName = _ref.displayName,
18
+ placeholder = _ref.placeholder,
16
19
  _ref$value = _ref.value,
17
20
  value = _ref$value === void 0 ? "" : _ref$value,
18
21
  _ref$options = _ref.options,
19
22
  options = _ref$options === void 0 ? [] : _ref$options,
20
- placeholder = _ref.placeholder,
23
+ optionProp = _ref.optionProp,
21
24
  _ref$disabled = _ref.disabled,
22
25
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
23
26
  _ref$required = _ref.required,
24
27
  required = _ref$required === void 0 ? false : _ref$required,
25
28
  _ref$multiple = _ref.multiple,
26
29
  multiple = _ref$multiple === void 0 ? false : _ref$multiple,
30
+ contentProp = _ref.contentProp,
31
+ contentLabel = _ref.contentLabel,
32
+ _ref$contentStyle = _ref.contentStyle,
33
+ contentStyle = _ref$contentStyle === void 0 ? {} : _ref$contentStyle,
27
34
  error = _ref.error,
28
35
  _ref$tooltip = _ref.tooltip,
29
36
  tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip,
@@ -49,61 +56,94 @@ var CustomDropdown = function CustomDropdown(_ref) {
49
56
  var _ref5, _ref6, _ref7, _opt$text;
50
57
  return (_ref5 = (_ref6 = (_ref7 = (_opt$text = opt === null || opt === void 0 ? void 0 : opt.text) !== null && _opt$text !== void 0 ? _opt$text : opt === null || opt === void 0 ? void 0 : opt.label) !== null && _ref7 !== void 0 ? _ref7 : opt === null || opt === void 0 ? void 0 : opt.name) !== null && _ref6 !== void 0 ? _ref6 : opt === null || opt === void 0 ? void 0 : opt.key) !== null && _ref5 !== void 0 ? _ref5 : opt;
51
58
  };
59
+
60
+ // In object mode the <select> needs a scalar to match against <option value>
61
+ var selectValue = optionProp ? (_value$optionProp = value === null || value === void 0 ? void 0 : value[optionProp]) !== null && _value$optionProp !== void 0 ? _value$optionProp : "" : value;
52
62
  var handleChange = (0, _react.useCallback)(function (e) {
53
- var _options$find;
54
63
  var raw = e.target.value;
55
- var full = (_options$find = options.find(function (opt) {
56
- return String(resolveValue(opt)) === raw;
57
- })) !== null && _options$find !== void 0 ? _options$find : null;
58
- onChange === null || onChange === void 0 || onChange(name, raw, full);
59
- }, [onChange, name, options]);
64
+ if (optionProp) {
65
+ var _options$find;
66
+ var full = (_options$find = options.find(function (opt) {
67
+ return String(opt[optionProp]) === raw;
68
+ })) !== null && _options$find !== void 0 ? _options$find : null;
69
+ onChange === null || onChange === void 0 || onChange(name, full, full);
70
+ } else {
71
+ var _options$find2;
72
+ var _full = (_options$find2 = options.find(function (opt) {
73
+ return String(resolveValue(opt)) === raw;
74
+ })) !== null && _options$find2 !== void 0 ? _options$find2 : null;
75
+ onChange === null || onChange === void 0 || onChange(name, raw, _full);
76
+ }
77
+ }, [onChange, name, options, optionProp]); // eslint-disable-line react-hooks/exhaustive-deps
78
+
60
79
  var handleMultiChange = (0, _react.useCallback)(function (e) {
61
80
  var selected = Array.from(e.target.selectedOptions).map(function (o) {
62
81
  return o.value;
63
82
  });
64
83
  var fulls = selected.map(function (v) {
65
- var _options$find2;
66
- return (_options$find2 = options.find(function (opt) {
84
+ var _options$find3, _options$find4;
85
+ return optionProp ? (_options$find3 = options.find(function (opt) {
86
+ return String(opt[optionProp]) === v;
87
+ })) !== null && _options$find3 !== void 0 ? _options$find3 : null : (_options$find4 = options.find(function (opt) {
67
88
  return String(resolveValue(opt)) === v;
68
- })) !== null && _options$find2 !== void 0 ? _options$find2 : null;
89
+ })) !== null && _options$find4 !== void 0 ? _options$find4 : null;
69
90
  });
70
- onChange === null || onChange === void 0 || onChange(name, selected, fulls);
71
- }, [onChange, name, options]);
72
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
73
- className: "ufg-field-group",
74
- id: name,
75
- style: mainDivStyle,
76
- children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
77
- id: "form-input-".concat(name),
78
- name: name,
79
- value: value,
80
- disabled: disabled,
81
- multiple: multiple,
82
- className: "ufg-select".concat(error ? " error" : ""),
83
- style: inputStyle,
84
- onChange: multiple ? handleMultiChange : handleChange,
85
- children: [!multiple && /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
86
- value: "",
87
- children: placeholder || "Select..."
88
- }), (options || []).map(function (opt, idx) {
89
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
90
- value: resolveValue(opt),
91
- children: resolveLabel(opt)
92
- }, idx);
91
+ onChange === null || onChange === void 0 || onChange(name, optionProp ? fulls : selected, fulls);
92
+ }, [onChange, name, options, optionProp]); // eslint-disable-line react-hooks/exhaustive-deps
93
+
94
+ var contentValue = contentProp && value && _typeof(value) === "object" ? value[contentProp] : null;
95
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
96
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
97
+ className: "ufg-field-group",
98
+ id: name,
99
+ style: mainDivStyle,
100
+ children: [(0, _defaults.labelJsx)(name, labelStyle, displayName, required, spanStyle, showHelp, helpText), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
101
+ id: "form-input-".concat(name),
102
+ name: name,
103
+ value: selectValue,
104
+ disabled: disabled,
105
+ multiple: multiple,
106
+ className: "ufg-select".concat(error ? " error" : ""),
107
+ style: inputStyle,
108
+ onChange: multiple ? handleMultiChange : handleChange,
109
+ children: [!multiple && /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
110
+ value: "",
111
+ children: placeholder || "Select..."
112
+ }), (options || []).map(function (opt, idx) {
113
+ var v = optionProp ? opt[optionProp] : resolveValue(opt);
114
+ var l = resolveLabel(opt);
115
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
116
+ value: v,
117
+ children: l
118
+ }, idx);
119
+ })]
120
+ }), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
121
+ }), contentValue && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
122
+ className: "ufg-field-group",
123
+ id: "".concat(name, "_content"),
124
+ style: mainDivStyle,
125
+ children: [contentLabel && (0, _defaults.labelJsx)("".concat(name, "_content"), labelStyle, contentLabel, false, spanStyle), /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
126
+ className: "ufg-select-content",
127
+ style: contentStyle,
128
+ children: contentValue
93
129
  })]
94
- }), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
130
+ })]
95
131
  });
96
132
  };
97
133
  CustomDropdown.propTypes = {
98
134
  onChange: _propTypes["default"].func.isRequired,
99
135
  name: _propTypes["default"].string.isRequired,
100
136
  displayName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
101
- value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number, _propTypes["default"].array]),
137
+ value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number, _propTypes["default"].array, _propTypes["default"].object]),
102
138
  options: _propTypes["default"].array,
103
139
  placeholder: _propTypes["default"].string,
104
140
  disabled: _propTypes["default"].bool,
105
141
  required: _propTypes["default"].bool,
106
142
  multiple: _propTypes["default"].bool,
143
+ optionProp: _propTypes["default"].string,
144
+ contentProp: _propTypes["default"].string,
145
+ contentLabel: _propTypes["default"].string,
146
+ contentStyle: _propTypes["default"].object,
107
147
  error: _propTypes["default"].string,
108
148
  tooltip: _propTypes["default"].string,
109
149
  showHelp: _propTypes["default"].bool,
package/build/index.css CHANGED
@@ -189,6 +189,16 @@
189
189
  padding: 6px 8px;
190
190
  }
191
191
 
192
+ .ufg-select-content {
193
+ margin-top: 8px;
194
+ white-space: pre-wrap;
195
+ background: #f8f9fa;
196
+ padding: 12px;
197
+ border-radius: var(--ufg-radius);
198
+ border: 1px solid #ddd;
199
+ font-family: inherit;
200
+ }
201
+
192
202
  /* --------------------------------------------------------------------------
193
203
  Textarea
194
204
  -------------------------------------------------------------------------- */
@@ -325,14 +335,13 @@
325
335
  font-weight: 600;
326
336
  font-size: 15px;
327
337
  cursor: pointer;
328
- border: 2px solid transparent;
338
+ border: 2px solid var(--ufg-border);
329
339
  transition: all 0.12s ease;
330
340
  display: flex;
331
341
  align-items: center;
332
342
  gap: 8px;
333
343
  min-width: 120px;
334
344
  justify-content: center;
335
- background: none;
336
345
  }
337
346
 
338
347
  .ufg-button-primary {
package/build/index.js CHANGED
@@ -532,9 +532,13 @@ var GenericForm = function GenericForm(_ref) {
532
532
  case 'select':
533
533
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomDropdown["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
534
534
  value: value,
535
+ optionProp: field.optionProp,
535
536
  options: field.options,
536
537
  placeholder: field.placeholder,
537
538
  multiple: field.multiple,
539
+ contentProp: field.contentProp,
540
+ contentLabel: field.contentLabel,
541
+ contentStyle: field.contentStyle,
538
542
  onChange: function onChange(name, val, fullOption) {
539
543
  handleFieldChange(name, val, field);
540
544
  onFieldChange === null || onFieldChange === void 0 || onFieldChange({
@@ -739,7 +743,7 @@ var GenericForm = function GenericForm(_ref) {
739
743
  onClick: action.onClick,
740
744
  disabled: !!action.disabled,
741
745
  style: _objectSpread(_objectSpread({}, actionsStyle), action.style),
742
- children: [action.icon, action.label]
746
+ children: [action.icon, action.label || action.name]
743
747
  }, idx);
744
748
  }), showSubmit && haveSaveButton && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
745
749
  type: "submit",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@insticc/genericform",
3
- "version": "2.0.6",
3
+ "version": "2.0.7",
4
4
  "description": "A generic form with a comprehensive set of field types, validation, and external state management",
5
5
  "main": "build/index.js",
6
6
  "scripts": {