@react-typed-forms/schemas 10.0.3 → 10.2.0

package/lib/components/CheckRenderer.d.ts

@@ -0,0 +1,26 @@
+import { FieldOption } from "../types";
+import { Control } from "@react-typed-forms/core";
+import React from "react";
+export interface CheckRendererOptions {
+    className?: string;
+    entryClass?: string;
+    checkClass?: string;
+    labelClass?: string;
+}
+export declare function createRadioRenderer(options?: CheckRendererOptions): import("../renderers").DataRendererRegistration;
+export declare function createCheckListRenderer(options?: CheckRendererOptions): import("../renderers").DataRendererRegistration;
+export declare function CheckButtons({ control, options, labelClass, checkClass, readonly, entryClass, className, id, type, isChecked, setChecked, }: {
+    id?: string;
+    className?: string;
+    options?: FieldOption[] | null;
+    control: Control<any>;
+    entryClass?: string;
+    checkClass?: string;
+    labelClass?: string;
+    readonly?: boolean;
+    type: "checkbox" | "radio";
+    isChecked: (c: Control<any>, o: FieldOption) => boolean;
+    setChecked: (c: Control<any>, o: FieldOption, checked: boolean) => void;
+}): React.JSX.Element;
+export declare function setIncluded<A>(array: A[], elem: A, included: boolean): A[];
+export declare function createCheckboxRenderer(options?: CheckRendererOptions): import("../renderers").DataRendererRegistration;

package/lib/createDefaultRenderers.d.ts

@@ -4,8 +4,8 @@ import { ActionRendererRegistration, AdornmentRendererRegistration, DataRenderer
 import { CSSProperties, ReactElement, ReactNode } from "react";
 import { FieldOption, GridRenderer } from "./types";
 import { SelectRendererOptions } from "./components/SelectDataRenderer";
-import { RadioRendererOptions } from "./components/RadioRenderer";
 import { DefaultArrayRendererOptions } from "./components/DefaultArrayRenderer";
+import { CheckRendererOptions } from "./components/CheckRenderer";
 export interface DefaultRendererOptions {
     data?: DefaultDataRendererOptions;
     display?: DefaultDisplayRendererOptions;
@@ -39,7 +39,10 @@ interface DefaultDataRendererOptions {
     inputClass?: string;
     displayOnlyClass?: string;
     selectOptions?: SelectRendererOptions;
-    radioOptions?: RadioRendererOptions;
+    checkboxOptions?: CheckRendererOptions;
+    checkOptions?: CheckRendererOptions;
+    radioOptions?: CheckRendererOptions;
+    checkListOptions?: CheckRendererOptions;
     booleanOptions?: FieldOption[];
     optionRenderer?: DataRendererRegistration;
 }

package/lib/index.d.ts

@@ -13,7 +13,7 @@ export * from "./createFormRenderer";
 export * from "./components/DefaultDisplay";
 export * from "./components/ControlInput";
 export * from "./components/SelectDataRenderer";
-export * from "./components/RadioRenderer";
+export * from "./components/CheckRenderer";
 export * from "./components/DefaultLayout";
 export * from "./components/DefaultDisplayOnly";
 export * from "./components/DefaultVisibility";

package/lib/index.js

@@ -152,63 +152,53 @@ function isDataGroupRenderer(options) {
   return options.type === exports.DataRenderType.Group;
 }
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (it) return (it = it.call(o)).next.bind(it);
-  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-    if (it) o = it;
-    var i = 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 _createForOfIteratorHelperLoose(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (t) return (t = t.call(r)).next.bind(t);
+  if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
+    t && (r = t);
+    var o = 0;
     return function () {
-      if (i >= o.length) return {
-        done: true
-      };
-      return {
-        done: false,
-        value: o[i++]
+      return o >= r.length ? {
+        done: !0
+      } : {
+        done: !1,
+        value: r[o++]
       };
     };
   }
   throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (e.indexOf(n) >= 0) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+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 applyDefaultValues(v, fields, doneSet) {
   var _doneSet;
@@ -1577,7 +1567,7 @@ function renderControlLayout(props) {
   }
   return {};
   function renderData(c) {
-    var _labelText$value3;
+    var _labelText$value3, _c$children$length, _c$children2;
     if (!field) return {
       children: "No schema field for: " + c.field
     };
@@ -1589,7 +1579,7 @@ function renderControlLayout(props) {
     return {
       processLayout: renderer.renderData(rendererProps),
       label: {
-        type: exports.LabelType.Control,
+        type: ((_c$children$length = (_c$children2 = c.children) == null ? void 0 : _c$children2.length) != null ? _c$children$length : 0) > 0 ? exports.LabelType.Group : exports.LabelType.Control,
         label: label,
         forId: rendererProps.id,
         required: c.required,
@@ -1751,7 +1741,14 @@ var defaultTailwindTheme = {
     errorClass: "text-sm text-danger-500"
   },
   data: {
-    displayOnlyClass: "flex flex-row items-center gap-2"
+    displayOnlyClass: "flex flex-row items-center gap-2",
+    checkOptions: {
+      className: "flex items-center gap-4",
+      entryClass: "flex gap-1 items-center"
+    },
+    selectOptions: {
+      emptyText: "<select>"
+    }
   }
 };
 
@@ -2024,32 +2021,114 @@ function createInputConversion(ft) {
   }
 }
 
+function createDefaultArrayRenderer(options) {
+  return {
+    render: function render(props, _ref) {
+      var renderAction = _ref.renderAction;
+      return /*#__PURE__*/React__default["default"].createElement(DefaultArrayRenderer, _extends({}, props, options, {
+        renderAction: renderAction
+      }));
+    },
+    type: "array"
+  };
+}
+function DefaultArrayRenderer(props) {
+  var _effect = core.useComponentTracking();
+  try {
+    var renderElement = props.renderElement,
+      className = props.className,
+      removableClass = props.removableClass,
+      childClass = props.childClass,
+      removableChildClass = props.removableChildClass,
+      removeActionClass = props.removeActionClass,
+      addActionClass = props.addActionClass,
+      arrayControl = props.arrayControl,
+      renderAction = props.renderAction,
+      style = props.style;
+    var _applyArrayLengthRest = applyArrayLengthRestrictions(props),
+      addAction = _applyArrayLengthRest.addAction,
+      removeAction = _applyArrayLengthRest.removeAction;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      style: style
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: clsx__default["default"](className, removeAction && removableClass)
+    }, /*#__PURE__*/React__default["default"].createElement(core.RenderElements, {
+      control: arrayControl
+    }, function (_, x) {
+      return removeAction ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: clsx__default["default"](childClass, removableChildClass)
+      }, renderElement(x)), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: removeActionClass
+      }, renderAction(removeAction(x)))) : /*#__PURE__*/React__default["default"].createElement("div", {
+        className: childClass
+      }, renderElement(x));
+    })), addAction && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: addActionClass
+    }, renderAction(addAction)));
+  } finally {
+    _effect();
+  }
+}
+
 function createRadioRenderer(options) {
   if (options === void 0) {
     options = {};
   }
   return createDataRenderer(function (p) {
-    return /*#__PURE__*/React__default["default"].createElement(RadioButtons, _extends({}, options, p, {
+    return /*#__PURE__*/React__default["default"].createElement(CheckButtons, _extends({}, options, p, {
       className: rendererClass(p.className, options.className),
-      control: p.control
+      isChecked: function isChecked(control, o) {
+        return control.value == o.value;
+      },
+      setChecked: function setChecked(c, o) {
+        return c.value = o.value;
+      },
+      control: p.control,
+      type: "radio"
     }));
   }, {
     renderType: exports.DataRenderType.Radio
   });
 }
-function RadioButtons(_ref) {
+function createCheckListRenderer(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return createDataRenderer(function (p) {
+    return /*#__PURE__*/React__default["default"].createElement(CheckButtons, _extends({}, options, p, {
+      className: rendererClass(p.className, options.className),
+      isChecked: function isChecked(control, o) {
+        var v = control.value;
+        return Array.isArray(v) ? v.includes(o.value) : false;
+      },
+      setChecked: function setChecked(c, o, checked) {
+        c.setValue(function (x) {
+          return setIncluded(x != null ? x : [], o.value, checked);
+        });
+      },
+      control: p.control,
+      type: "checkbox"
+    }));
+  }, {
+    collection: true,
+    renderType: exports.DataRenderType.CheckList
+  });
+}
+function CheckButtons(_ref) {
   var _effect = core.useComponentTracking();
   try {
     var control = _ref.control,
       options = _ref.options,
       labelClass = _ref.labelClass,
-      radioClass = _ref.radioClass,
+      checkClass = _ref.checkClass,
       readonly = _ref.readonly,
       entryClass = _ref.entryClass,
       className = _ref.className,
-      id = _ref.id;
+      id = _ref.id,
+      type = _ref.type,
+      isChecked = _ref.isChecked,
+      setChecked = _ref.setChecked;
     var disabled = control.disabled;
-    var canChange = !disabled && !readonly;
     var name = "r" + control.uniqueId;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: className,
@@ -2059,19 +2138,22 @@ function RadioButtons(_ref) {
         return x.value != null;
       })
     }, function (o, i) {
+      var checked = core.useComputed(function () {
+        return isChecked(control, o);
+      }).value;
       return /*#__PURE__*/React__default["default"].createElement("div", {
         key: i,
         className: entryClass
       }, /*#__PURE__*/React__default["default"].createElement("input", {
         id: name + "_" + i,
-        className: radioClass,
-        type: "radio",
+        className: checkClass,
+        type: type,
         name: name,
         readOnly: readonly,
         disabled: disabled,
-        checked: control.value == o.value,
+        checked: checked,
         onChange: function onChange(x) {
-          return control.value = o.value;
+          return setChecked(control, o, x.target.checked);
         }
       }), /*#__PURE__*/React__default["default"].createElement("label", {
         className: labelClass,
@@ -2082,54 +2164,41 @@ function RadioButtons(_ref) {
     _effect();
   }
 }
-
-function createDefaultArrayRenderer(options) {
-  return {
-    render: function render(props, _ref) {
-      var renderAction = _ref.renderAction;
-      return /*#__PURE__*/React__default["default"].createElement(DefaultArrayRenderer, _extends({}, props, options, {
-        renderAction: renderAction
-      }));
-    },
-    type: "array"
-  };
+function setIncluded(array, elem, included) {
+  var already = array.includes(elem);
+  if (included === already) {
+    return array;
+  }
+  if (included) {
+    return [].concat(array, [elem]);
+  }
+  return array.filter(function (e) {
+    return e !== elem;
+  });
 }
-function DefaultArrayRenderer(props) {
-  var _effect = core.useComponentTracking();
-  try {
-    var renderElement = props.renderElement,
-      className = props.className,
-      removableClass = props.removableClass,
-      childClass = props.childClass,
-      removableChildClass = props.removableChildClass,
-      removeActionClass = props.removeActionClass,
-      addActionClass = props.addActionClass,
-      arrayControl = props.arrayControl,
-      renderAction = props.renderAction,
-      style = props.style;
-    var _applyArrayLengthRest = applyArrayLengthRestrictions(props),
-      addAction = _applyArrayLengthRest.addAction,
-      removeAction = _applyArrayLengthRest.removeAction;
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      style: style
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: clsx__default["default"](className, removeAction && removableClass)
-    }, /*#__PURE__*/React__default["default"].createElement(core.RenderElements, {
-      control: arrayControl
-    }, function (_, x) {
-      return removeAction ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: clsx__default["default"](childClass, removableChildClass)
-      }, renderElement(x)), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: removeActionClass
-      }, renderAction(removeAction(x)))) : /*#__PURE__*/React__default["default"].createElement("div", {
-        className: childClass
-      }, renderElement(x));
-    })), addAction && /*#__PURE__*/React__default["default"].createElement("div", {
-      className: addActionClass
-    }, renderAction(addAction)));
-  } finally {
-    _effect();
+function createCheckboxRenderer(options) {
+  if (options === void 0) {
+    options = {};
   }
+  return createDataRenderer(function (props, renderer) {
+    return function (p) {
+      return _extends({}, p, {
+        label: undefined,
+        children: /*#__PURE__*/React__default["default"].createElement("div", {
+          className: rendererClass(props.className, options.className)
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: options.entryClass
+        }, /*#__PURE__*/React__default["default"].createElement(core.Fcheckbox, {
+          id: props.id,
+          control: props.control,
+          style: props.style,
+          className: options.checkClass
+        }), p.label && renderer.renderLabel(p.label, undefined, undefined)))
+      });
+    };
+  }, {
+    renderType: exports.DataRenderType.Checkbox
+  });
 }
 
 function createDefaultActionRenderer(options) {
@@ -2214,11 +2283,14 @@ var DefaultBoolOptions = [{
   value: false
 }];
 function createDefaultDataRenderer(options) {
+  var _options$checkOptions, _options$radioOptions, _options$checkListOpt;
   if (options === void 0) {
     options = {};
   }
+  var checkboxRenderer = createCheckboxRenderer((_options$checkOptions = options.checkOptions) != null ? _options$checkOptions : options.checkboxOptions);
   var selectRenderer = createSelectRenderer(options.selectOptions);
-  var radioRenderer = createRadioRenderer(options.radioOptions);
+  var radioRenderer = createRadioRenderer((_options$radioOptions = options.radioOptions) != null ? _options$radioOptions : options.checkOptions);
+  var checkListRenderer = createCheckListRenderer((_options$checkListOpt = options.checkListOptions) != null ? _options$checkListOpt : options.checkOptions);
   var _optionRenderer$boole = _extends({
       optionRenderer: selectRenderer,
       booleanOptions: DefaultBoolOptions
@@ -2229,14 +2301,15 @@ function createDefaultDataRenderer(options) {
     displayOnlyClass = _optionRenderer$boole.displayOnlyClass;
   return createDataRenderer(function (props, renderers) {
     var fieldType = props.field.type;
-    if (props.toArrayProps) {
+    var renderOptions = props.renderOptions;
+    var renderType = renderOptions.type;
+    if (props.toArrayProps && renderType !== exports.DataRenderType.CheckList) {
       return function (p) {
         return _extends({}, p, {
           children: renderers.renderArray(props.toArrayProps())
         });
       };
     }
-    var renderOptions = props.renderOptions;
     if (fieldType === exports.FieldType.Compound) {
       var _ref5;
       var groupOptions = (_ref5 = isDataGroupRenderer(renderOptions) ? renderOptions.groupOptions : undefined) != null ? _ref5 : {
@@ -2247,7 +2320,6 @@ function createDefaultDataRenderer(options) {
         renderOptions: groupOptions
       }));
     }
-    var renderType = renderOptions.type;
     if (fieldType == exports.FieldType.Any) return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, "No control for Any");
     if (isDisplayOnlyRenderer(renderOptions)) return function (p) {
       return _extends({}, p, {
@@ -2272,16 +2344,14 @@ function createDefaultDataRenderer(options) {
       return optionRenderer.render(props, renderers);
     }
     switch (renderType) {
+      case exports.DataRenderType.CheckList:
+        return checkListRenderer.render(props, renderers);
       case exports.DataRenderType.Dropdown:
         return selectRenderer.render(props, renderers);
       case exports.DataRenderType.Radio:
         return radioRenderer.render(props, renderers);
       case exports.DataRenderType.Checkbox:
-        return /*#__PURE__*/React__default["default"].createElement(core.Fcheckbox, {
-          style: props.style,
-          className: props.className,
-          control: props.control
-        });
+        return checkboxRenderer.render(props, renderers);
     }
     var placeholder = isTextfieldRenderer(renderOptions) ? renderOptions.placeholder : undefined;
     return /*#__PURE__*/React__default["default"].createElement(ControlInput, {
@@ -2349,10 +2419,10 @@ function createDefaultLabelRenderer(options) {
     labelContainer = _requiredElement$labe.labelContainer;
   return {
     render: function render(props, labelStart, labelEnd) {
-      return labelContainer( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, labelStart, /*#__PURE__*/React__default["default"].createElement("label", {
+      return labelContainer( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("label", {
         htmlFor: props.forId,
         className: rendererClass(props.className, clsx__default["default"](className, props.type === exports.LabelType.Group && groupLabelClass, props.type === exports.LabelType.Control && controlLabelClass))
-      }, props.label, props.required && requiredElement), labelEnd));
+      }, labelStart, props.label, props.required && requiredElement), labelEnd));
     },
     type: "label"
   };
@@ -2530,6 +2600,7 @@ function isArrayRegistration(x) {
 }
 
 exports.AppendAdornmentPriority = AppendAdornmentPriority;
+exports.CheckButtons = CheckButtons;
 exports.ControlInput = ControlInput;
 exports.ControlRenderer = ControlRenderer;
 exports.DefaultBoolOptions = DefaultBoolOptions;
@@ -2538,7 +2609,6 @@ exports.DefaultDisplayOnly = DefaultDisplayOnly;
 exports.DefaultLayout = DefaultLayout;
 exports.DefaultSchemaInterface = DefaultSchemaInterface;
 exports.DefaultVisibility = DefaultVisibility;
-exports.RadioButtons = RadioButtons;
 exports.SelectDataRenderer = SelectDataRenderer;
 exports.WrapAdornmentPriority = WrapAdornmentPriority;
 exports.addFieldOption = addFieldOption;
@@ -2561,6 +2631,8 @@ exports.controlTitle = controlTitle;
 exports.createAction = createAction;
 exports.createAdornmentRenderer = createAdornmentRenderer;
 exports.createArrayRenderer = createArrayRenderer;
+exports.createCheckListRenderer = createCheckListRenderer;
+exports.createCheckboxRenderer = createCheckboxRenderer;
 exports.createDataRenderer = createDataRenderer;
 exports.createDefaultActionRenderer = createDefaultActionRenderer;
 exports.createDefaultAdornmentRenderer = createDefaultAdornmentRenderer;
@@ -2646,6 +2718,7 @@ exports.renderControlLayout = renderControlLayout;
 exports.renderLayoutParts = renderLayoutParts;
 exports.rendererClass = rendererClass;
 exports.resolveSchemas = resolveSchemas;
+exports.setIncluded = setIncluded;
 exports.stringField = stringField;
 exports.stringOptionsField = stringOptionsField;
 exports.textDisplayControl = textDisplayControl;