@insticc/genericform 2.1.0 → 2.1.2

package/build/FormFields/CustomCheckboxGroup.js

@@ -65,6 +65,8 @@ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref2) {
     defaultCollapsed = _ref2$defaultCollapse === void 0 ? true : _ref2$defaultCollapse,
     _ref2$enableParent = _ref2.enableParent,
     enableParent = _ref2$enableParent === void 0 ? false : _ref2$enableParent,
+    _ref2$parentCheckAll = _ref2.parentCheckAll,
+    parentCheckAll = _ref2$parentCheckAll === void 0 ? true : _ref2$parentCheckAll,
     error = _ref2.error,
     _ref2$tooltip = _ref2.tooltip,
     tooltip = _ref2$tooltip === void 0 ? "" : _ref2$tooltip,
@@ -119,7 +121,7 @@ var CustomCheckboxGroup = function CustomCheckboxGroup(_ref2) {
   var handleParentChange = (0, _react.useCallback)(function (opt, state) {
     var parentVal = opt.name || opt.value;
     var children = getChildValues(opt);
-    var data = state ? _toConsumableArray(new Set([].concat(_toConsumableArray(checked), [parentVal]))) : checked.filter(function (v) {
+    var data = state ? _toConsumableArray(new Set(parentCheckAll ? [].concat(_toConsumableArray(checked), [parentVal, children]) : [].concat(_toConsumableArray(checked), [parentVal]))) : checked.filter(function (v) {
       return v !== parentVal && !children.includes(v);
     });
     onChange === null || onChange === void 0 || onChange(name, data);
@@ -244,6 +246,7 @@ CustomCheckboxGroup.propTypes = {
   collapsible: _propTypes["default"].bool,
   defaultCollapsed: _propTypes["default"].bool,
   enableParent: _propTypes["default"].bool,
+  parentCheckAll: _propTypes["default"].bool,
   error: _propTypes["default"].string,
   tooltip: _propTypes["default"].string,
   mainDivStyle: _propTypes["default"].object,

package/build/FormFields/CustomInputAdd.js

@@ -0,0 +1,123 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _defaults = require("./defaults");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var CustomInputAdd = function CustomInputAdd(_ref) {
+  var _ref$handleAdd = _ref.handleAdd,
+    handleAdd = _ref$handleAdd === void 0 ? function () {} : _ref$handleAdd,
+    _ref$addText = _ref.addText,
+    addText = _ref$addText === void 0 ? null : _ref$addText,
+    name = _ref.name,
+    label = _ref.label,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? "" : _ref$value,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "text" : _ref$type,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    placeholder = _ref.placeholder,
+    error = _ref.error,
+    _ref$tooltip = _ref.tooltip,
+    tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip,
+    _ref$showHelp = _ref.showHelp,
+    showHelp = _ref$showHelp === void 0 ? false : _ref$showHelp,
+    _ref$helpText = _ref.helpText,
+    helpText = _ref$helpText === void 0 ? "" : _ref$helpText,
+    className = _ref.className,
+    _ref$mainDivStyle = _ref.mainDivStyle,
+    mainDivStyle = _ref$mainDivStyle === void 0 ? {} : _ref$mainDivStyle,
+    _ref$labelStyle = _ref.labelStyle,
+    labelStyle = _ref$labelStyle === void 0 ? {} : _ref$labelStyle,
+    _ref$spanStyle = _ref.spanStyle,
+    spanStyle = _ref$spanStyle === void 0 ? {} : _ref$spanStyle,
+    _ref$inputStyle = _ref.inputStyle,
+    inputStyle = _ref$inputStyle === void 0 ? {} : _ref$inputStyle,
+    _ref$tooltipStyle = _ref.tooltipStyle,
+    tooltipStyle = _ref$tooltipStyle === void 0 ? {} : _ref$tooltipStyle;
+  var _useState = (0, _react.useState)(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var onAdd = function onAdd() {
+    if (!inputValue.trim()) return;
+    handleAdd === null || handleAdd === void 0 || handleAdd(inputValue);
+    setInputValue('');
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "ufg-field-group",
+    id: name,
+    style: mainDivStyle,
+    children: [(0, _defaults.labelJsx)({
+      name: name,
+      labelStyle: labelStyle,
+      label: label,
+      spanStyle: spanStyle,
+      showHelp: showHelp,
+      helpText: helpText
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "ufg-field-group",
+      style: {
+        flexDirection: 'row'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        id: "form-input-".concat(name),
+        type: type,
+        name: name,
+        value: inputValue,
+        placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : label,
+        disabled: disabled,
+        className: "ufg-input".concat(error ? " error" : "").concat(className ? " ".concat(className) : ""),
+        style: inputStyle,
+        onChange: function onChange(e) {
+          return setInputValue(e.target.value);
+        },
+        onKeyDown: function onKeyDown(e) {
+          return e.key === 'Enter' && onAdd();
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        className: "ufg-button ufg-button-primary",
+        disabled: !inputValue.trim(),
+        onClick: onAdd,
+        children: addText || 'Add'
+      })]
+    }), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
+  });
+};
+CustomInputAdd.propTypes = _defineProperty(_defineProperty({
+  handleAdd: _propTypes["default"].func.isRequired,
+  addText: _propTypes["default"].string,
+  name: _propTypes["default"].string.isRequired,
+  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  value: _propTypes["default"].string,
+  type: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  placeholder: _propTypes["default"].string,
+  error: _propTypes["default"].string,
+  tooltip: _propTypes["default"].string,
+  showHelp: _propTypes["default"].bool,
+  helpText: _propTypes["default"].string,
+  className: _propTypes["default"].string,
+  inputStyle: _propTypes["default"].object,
+  mainDivStyle: _propTypes["default"].object,
+  labelStyle: _propTypes["default"].object,
+  spanStyle: _propTypes["default"].object
+}, "inputStyle", _propTypes["default"].object), "tooltipStyle", _propTypes["default"].object);
+var _default = exports["default"] = CustomInputAdd;

package/build/FormFields/CustomMobilePhone.js

@@ -15,45 +15,18 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-var COUNTRY_CODES = [{
-  label: "🇵🇹 +351",
-  value: "+351"
-}, {
-  label: "🇪🇸 +34",
-  value: "+34"
-}, {
-  label: "🇬🇧 +44",
-  value: "+44"
-}, {
-  label: "🇺🇸 +1",
-  value: "+1"
-}, {
-  label: "🇫🇷 +33",
-  value: "+33"
-}, {
-  label: "🇩🇪 +49",
-  value: "+49"
-}
-// ...
-];
-
-/**
- * Mobile phone input with country code selector.
- * value format: "+351 916999999"
- * onChange(value, name) — same signature as other custom inputs.
- */
 var CustomMobilePhone = function CustomMobilePhone(_ref) {
   var onChange = _ref.onChange,
     name = _ref.name,
     label = _ref.label,
     _ref$value = _ref.value,
-    value = _ref$value === void 0 ? "" : _ref$value,
+    externalValue = _ref$value === void 0 ? "" : _ref$value,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$required = _ref.required,
     required = _ref$required === void 0 ? false : _ref$required,
     _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? "912 345 678" : _ref$placeholder,
+    placeholder = _ref$placeholder === void 0 ? "+351 912345678" : _ref$placeholder,
     error = _ref.error,
     _ref$tooltip = _ref.tooltip,
     tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip,
@@ -70,33 +43,33 @@ var CustomMobilePhone = function CustomMobilePhone(_ref) {
     _ref$inputStyle = _ref.inputStyle,
     inputStyle = _ref$inputStyle === void 0 ? {} : _ref$inputStyle,
     _ref$tooltipStyle = _ref.tooltipStyle,
-    tooltipStyle = _ref$tooltipStyle === void 0 ? {} : _ref$tooltipStyle,
-    _ref$countryCodes = _ref.countryCodes,
-    countryCodes = _ref$countryCodes === void 0 ? COUNTRY_CODES : _ref$countryCodes,
-    _ref$defaultCountryCo = _ref.defaultCountryCode,
-    defaultCountryCode = _ref$defaultCountryCo === void 0 ? "+351" : _ref$defaultCountryCo;
-  // Split stored value into prefix + local number
-  var _ref2 = function () {
-      if (!value) return [defaultCountryCode, ""];
-      var found = countryCodes.find(function (c) {
-        return value.startsWith(c.value);
-      });
-      if (found) return [found.value, value.slice(found.value.length)];
-      return [defaultCountryCode, value];
-    }(),
-    _ref3 = _slicedToArray(_ref2, 2),
-    prefix = _ref3[0],
-    localNumber = _ref3[1];
-  var handlePrefixChange = (0, _react.useCallback)(function (e) {
-    return onChange === null || onChange === void 0 ? void 0 : onChange(name, "".concat(e.target.value).concat(localNumber));
-  }, [onChange, name, localNumber]);
-  var handleNumberChange = (0, _react.useCallback)(function (e) {
-    var digits = e.target.value.replace(/[^\d]/g, "");
-    onChange === null || onChange === void 0 || onChange(name, "".concat(prefix).concat(digits));
-  }, [onChange, name, prefix]);
+    tooltipStyle = _ref$tooltipStyle === void 0 ? {} : _ref$tooltipStyle;
+  var _useState = (0, _react.useState)(externalValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    localValue = _useState2[0],
+    setLocalValue = _useState2[1];
+
+  // Sync with external value
+  (0, _react.useEffect)(function () {
+    setLocalValue(externalValue);
+  }, [externalValue]);
+  var handleChange = (0, _react.useCallback)(function (e) {
+    var rawValue = e.target.value;
+
+    // Auto-add "+" if user starts typing digits without it
+    var newValue = rawValue;
+    if (rawValue && !rawValue.startsWith('+')) {
+      var digits = rawValue.replace(/\D/g, '');
+      newValue = "+".concat(digits);
+    } else {
+      // Keep existing + and clean other characters
+      newValue = rawValue.replace(/[^\d+]/g, '');
+    }
+    setLocalValue(newValue);
+    onChange === null || onChange === void 0 || onChange(name, newValue);
+  }, [onChange, name]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "ufg-field-group",
-    id: "form-telDiv-".concat(name),
     style: mainDivStyle,
     children: [(0, _defaults.labelJsx)({
       name: name,
@@ -106,37 +79,20 @@ var CustomMobilePhone = function CustomMobilePhone(_ref) {
       spanStyle: spanStyle,
       showHelp: showHelp,
       helpText: helpText
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: {
-        display: "flex",
-        gap: "8px"
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("select", {
-        value: prefix,
-        disabled: disabled,
-        onChange: handlePrefixChange,
-        className: "ufg-input".concat(error ? " error" : ""),
-        style: {
-          width: "110px",
-          flexShrink: 0
-        },
-        children: countryCodes.map(function (c) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-            value: c.value,
-            children: c.label
-          }, c.value);
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-        id: "form-input-".concat(name),
-        type: "tel",
-        value: localNumber,
-        disabled: disabled,
-        required: required,
-        placeholder: placeholder,
-        onChange: handleNumberChange,
-        className: "ufg-input".concat(error ? " error" : ""),
-        style: inputStyle
-      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      id: "form-input-".concat(name),
+      type: "tel",
+      value: localValue,
+      disabled: disabled,
+      required: required,
+      placeholder: placeholder,
+      onChange: handleChange,
+      className: "ufg-input".concat(error ? " error" : ""),
+      style: inputStyle,
+      inputMode: "numeric",
+      pattern: "[0-9+]*",
+      autoComplete: "tel",
+      title: "Phone number (auto-adds + prefix)"
     }), (0, _defaults.errorJsx)(error), (0, _defaults.tooltipJsx)(tooltip, tooltipStyle)]
   });
 };
@@ -156,11 +112,6 @@ CustomMobilePhone.propTypes = {
   labelStyle: _propTypes["default"].object,
   spanStyle: _propTypes["default"].object,
   inputStyle: _propTypes["default"].object,
-  tooltipStyle: _propTypes["default"].object,
-  countryCodes: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    label: _propTypes["default"].string.isRequired,
-    value: _propTypes["default"].string.isRequired
-  })),
-  defaultCountryCode: _propTypes["default"].string
+  tooltipStyle: _propTypes["default"].object
 };
 var _default = exports["default"] = CustomMobilePhone;

package/build/index.js

@@ -51,6 +51,12 @@ Object.defineProperty(exports, "CustomInput", {
     return _CustomInput["default"];
   }
 });
+Object.defineProperty(exports, "CustomInputAdd", {
+  enumerable: true,
+  get: function get() {
+    return _CustomInputAdd["default"];
+  }
+});
 Object.defineProperty(exports, "CustomJson", {
   enumerable: true,
   get: function get() {
@@ -117,6 +123,7 @@ var _CustomDatePicker = _interopRequireDefault(require("./FormFields/CustomDateP
 var _CustomDropdown = _interopRequireDefault(require("./FormFields/CustomDropdown"));
 var _CustomFileInput = _interopRequireDefault(require("./FormFields/CustomFileInput"));
 var _CustomInput = _interopRequireDefault(require("./FormFields/CustomInput"));
+var _CustomInputAdd = _interopRequireDefault(require("./FormFields/CustomInputAdd"));
 var _CustomJson = _interopRequireDefault(require("./FormFields/CustomJson"));
 var _CustomLabel = _interopRequireDefault(require("./FormFields/CustomLabel"));
 var _CustomMobilePhone = _interopRequireDefault(require("./FormFields/CustomMobilePhone"));
@@ -615,9 +622,7 @@ var GenericForm = function GenericForm(_ref) {
       case 'tel':
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomMobilePhone["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
           value: value,
-          onChange: fieldHandler,
-          countryCodes: field.countryCodes,
-          defaultCountryCode: field.defaultCountryCode
+          onChange: fieldHandler(field)
         }), field.name);
 
       // Date
@@ -744,6 +749,13 @@ var GenericForm = function GenericForm(_ref) {
           accept: field.accept,
           onChange: fieldHandler(field)
         }), field.name);
+      case 'inputAdd':
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomInputAdd["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, cp), sp), fp), {}, {
+          value: value,
+          handleAdd: field.handleAdd,
+          addText: field.addText,
+          addStyle: field.addStyle
+        }), field.name);
       default:
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomInput["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({
           type: field.type

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@insticc/genericform",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "A generic form with a comprehensive set of field types, validation, and external state management",
   "main": "build/index.js",
   "scripts": {