@react-typed-forms/schemas 10.0.3 → 10.1.0

package/lib/components/CheckRenderer.d.ts

@@ -0,0 +1,25 @@
+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[];

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,9 @@ interface DefaultDataRendererOptions {
     inputClass?: string;
     displayOnlyClass?: string;
     selectOptions?: SelectRendererOptions;
-    radioOptions?: RadioRendererOptions;
+    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

@@ -1751,7 +1751,11 @@ 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"
+    }
   }
 };
 
@@ -2024,32 +2028,113 @@ 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"
+    }));
+  }, {
+    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 +2144,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 +2170,17 @@ 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 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 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 createDefaultActionRenderer(options) {
@@ -2214,11 +2265,13 @@ var DefaultBoolOptions = [{
   value: false
 }];
 function createDefaultDataRenderer(options) {
+  var _options$radioOptions, _options$checkListOpt;
   if (options === void 0) {
     options = {};
   }
   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 +2282,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 +2301,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,6 +2325,8 @@ 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:
@@ -2530,6 +2585,7 @@ function isArrayRegistration(x) {
 }
 
 exports.AppendAdornmentPriority = AppendAdornmentPriority;
+exports.CheckButtons = CheckButtons;
 exports.ControlInput = ControlInput;
 exports.ControlRenderer = ControlRenderer;
 exports.DefaultBoolOptions = DefaultBoolOptions;
@@ -2538,7 +2594,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 +2616,7 @@ exports.controlTitle = controlTitle;
 exports.createAction = createAction;
 exports.createAdornmentRenderer = createAdornmentRenderer;
 exports.createArrayRenderer = createArrayRenderer;
+exports.createCheckListRenderer = createCheckListRenderer;
 exports.createDataRenderer = createDataRenderer;
 exports.createDefaultActionRenderer = createDefaultActionRenderer;
 exports.createDefaultAdornmentRenderer = createDefaultAdornmentRenderer;
@@ -2646,6 +2702,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;