@react-typed-forms/schemas 11.12.1 → 11.13.0

package/lib/components/JsonataRenderer.d.ts

@@ -0,0 +1,12 @@
+import { JsonataRenderOptions } from "../types";
+import { ControlDataContext } from "../util";
+import { Control } from "@react-typed-forms/core";
+import React from "react";
+export declare function createJsonataRenderer(className?: string): import("../renderers").DataRendererRegistration;
+export declare function JsonataRenderer({ control, renderOptions: { expression }, readonly, className, dataContext, }: {
+    control: Control<any>;
+    renderOptions: JsonataRenderOptions;
+    className?: string;
+    dataContext: ControlDataContext;
+    readonly: boolean;
+}): React.JSX.Element;

package/lib/components/MultilineTextfield.d.ts

@@ -0,0 +1,4 @@
+import { DataRendererProps } from "../controlRender";
+import React from "react";
+export declare function createMultilineFieldRenderer(className?: string): import("../renderers").DataRendererRegistration;
+export declare function MultilineTextfield({ control, className }: DataRendererProps): React.JSX.Element;

package/lib/components/NullToggle.d.ts

@@ -0,0 +1 @@
+export declare function createNullToggleRenderer(): import("../renderers").DataRendererRegistration;

package/lib/controlRender.d.ts

@@ -156,6 +156,7 @@ export type CreateDataProps = (controlProps: DataControlProps) => DataRendererPr
 export interface ControlRenderOptions extends FormContextOptions {
     useDataHook?: (c: ControlDefinition) => CreateDataProps;
     actionOnClick?: (actionId: string, actionData: any) => () => void;
+    customDisplay?: (customId: string, displayProps: DisplayRendererProps) => ReactNode;
     useValidationHook?: (validator: SchemaValidator, ctx: ValidationContext) => void;
     useEvalExpressionHook?: UseEvalExpressionHook;
     clearHidden?: boolean;
@@ -200,6 +201,7 @@ export interface RenderControlProps {
     actionOnClick?: (actionId: string, actionData: any) => () => void;
     schemaInterface?: SchemaInterface;
     designMode?: boolean;
+    customDisplay?: (customId: string, displayProps: DisplayRendererProps) => ReactNode;
 }
 export declare function renderControlLayout(props: RenderControlProps): ControlLayoutProps;
 type MarkupKeys = keyof Omit<RenderedLayout, "errorControl" | "style" | "className" | "wrapLayout">;

package/lib/createDefaultRenderers.d.ts

@@ -47,6 +47,8 @@ interface DefaultDataRendererOptions {
     checkListOptions?: CheckRendererOptions;
     booleanOptions?: FieldOption[];
     optionRenderer?: DataRendererRegistration;
+    multilineClass?: string;
+    jsonataClass?: string;
 }
 export declare function createDefaultDataRenderer(options?: DefaultDataRendererOptions): DataRendererRegistration;
 export interface DefaultAccordionRendererOptions {
@@ -70,6 +72,5 @@ interface DefaultLabelRendererOptions {
     labelContainer?: (children: ReactElement) => ReactElement;
 }
 export declare function createDefaultLabelRenderer(options?: DefaultLabelRendererOptions): LabelRendererRegistration;
-export declare function createNullToggleRenderer(): DataRendererRegistration;
 export declare function createDefaultRenderers(options?: DefaultRendererOptions): DefaultRenderers;
 export {};

package/lib/index.js

@@ -91,6 +91,7 @@ exports.DataRenderType = void 0;
   DataRenderType["DisplayOnly"] = "DisplayOnly";
   DataRenderType["Group"] = "Group";
   DataRenderType["NullToggle"] = "NullToggle";
+  DataRenderType["Jsonata"] = "Jsonata";
 })(exports.DataRenderType || (exports.DataRenderType = {}));
 exports.SyncTextType = void 0;
 (function (SyncTextType) {
@@ -110,6 +111,7 @@ exports.DisplayDataType = void 0;
   DisplayDataType["Text"] = "Text";
   DisplayDataType["Html"] = "Html";
   DisplayDataType["Icon"] = "Icon";
+  DisplayDataType["Custom"] = "Custom";
 })(exports.DisplayDataType || (exports.DisplayDataType = {}));
 exports.ValidatorType = void 0;
 (function (ValidatorType) {
@@ -1145,6 +1147,7 @@ function useJsonataExpression(jExpr, dataContext, bindings, coerce) {
     return "#$i[" + x + "]";
   });
   var fullExpr = pathString ? pathString + ".(" + jExpr + ")" : jExpr;
+  console.log(fullExpr);
   var compiledExpr = React.useMemo(function () {
     try {
       return jsonata__default["default"](fullExpr);
@@ -1586,6 +1589,7 @@ function useControlRenderer(definition, fields, renderer, options) {
         displayControl: displayControl,
         style: customStyle.value,
         allowedOptions: allowedOptions,
+        customDisplay: _options.customDisplay,
         actionDataControl: actionData,
         actionOnClick: _options.actionOnClick,
         useChildVisibility: function useChildVisibility(childDef, context) {
@@ -1771,7 +1775,8 @@ function renderControlLayout(props) {
     labelText = props.labelText,
     parentContext = props.parentContext,
     useChildVisibility = props.useChildVisibility,
-    designMode = props.designMode;
+    designMode = props.designMode,
+    customDisplay = props.customDisplay;
   if (isDataControlDefinition(c)) {
     return renderData(c);
   }
@@ -1823,14 +1828,21 @@ function renderControlLayout(props) {
   }
   if (isDisplayControlsDefinition(c)) {
     var _c$displayData;
+    var data = (_c$displayData = c.displayData) != null ? _c$displayData : {};
+    var displayProps = {
+      data: data,
+      className: cc(c.styleClass),
+      style: style,
+      display: displayControl,
+      dataContext: dataContext
+    };
+    if (data.type === exports.DisplayDataType.Custom && customDisplay) {
+      return {
+        children: customDisplay(data.customId, displayProps)
+      };
+    }
     return {
-      children: renderer.renderDisplay({
-        data: (_c$displayData = c.displayData) != null ? _c$displayData : {},
-        className: cc(c.styleClass),
-        style: style,
-        display: displayControl,
-        dataContext: dataContext
-      })
+      children: renderer.renderDisplay(displayProps)
     };
   }
   return {};
@@ -2037,7 +2049,8 @@ var defaultTailwindTheme = {
     },
     selectOptions: {
       emptyText: "<select>"
-    }
+    },
+    multilineClass: "border p-2 outline-0 whitespace-pre"
   },
   adornment: {
     accordion: {
@@ -2089,6 +2102,8 @@ function DefaultDisplay(_ref) {
             __html: display ? (_display$value = display.value) != null ? _display$value : "" : data.html
           }
         });
+      case exports.DisplayDataType.Custom:
+        return /*#__PURE__*/React__default["default"].createElement("div", null, "Custom display placeholder: ", data.customId);
       default:
         return /*#__PURE__*/React__default["default"].createElement("h1", null, "Unknown display type: ", data.type);
     }
@@ -2569,6 +2584,136 @@ function DefaultAccordion(_ref) {
 }
 
 var _excluded = ["control", "field", "renderOptions"];
+function createNullToggleRenderer() {
+  return createDataRenderer(function (_ref, renderers) {
+    var _control$meta, _nullControl, _control$meta$_nullCo;
+    var control = _ref.control,
+      field = _ref.field,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    var nullControl = (_control$meta$_nullCo = (_control$meta = control.meta)[_nullControl = "nullControl"]) != null ? _control$meta$_nullCo : _control$meta[_nullControl] = core.newControl(control.current.value != null);
+    return function (layout) {
+      var newLayout = renderers.renderData(_extends({}, props, {
+        control: nullControl,
+        field: _extends({}, field, {
+          type: exports.FieldType.Bool
+        }),
+        renderOptions: {
+          type: exports.DataRenderType.Checkbox
+        }
+      }))(layout);
+      return _extends({}, newLayout, {
+        children: /*#__PURE__*/React__default["default"].createElement(NullWrapper, {
+          control: control,
+          nullControl: nullControl,
+          children: newLayout.children,
+          readonly: props.readonly,
+          defaultValue: props.definition.defaultValue
+        })
+      });
+    };
+  });
+}
+function NullWrapper(_ref2) {
+  var children = _ref2.children,
+    nullControl = _ref2.nullControl,
+    control = _ref2.control,
+    defaultValue = _ref2.defaultValue,
+    readonly = _ref2.readonly;
+  core.useControlEffect(function () {
+    return readonly;
+  }, function (r) {
+    return nullControl.disabled = r;
+  }, true);
+  core.useControlEffect(function () {
+    return nullControl.value;
+  }, function (e) {
+    if (e) {
+      var _nullControl$meta$non;
+      control.value = (_nullControl$meta$non = nullControl.meta["nonNullValue"]) != null ? _nullControl$meta$non : defaultValue;
+    } else {
+      nullControl.meta["nonNullValue"] = control.value;
+      control.value = null;
+    }
+  });
+  return children;
+}
+
+function createMultilineFieldRenderer(className) {
+  return createDataRenderer(function (p) {
+    return /*#__PURE__*/React__default["default"].createElement(MultilineTextfield, _extends({}, p, {
+      className: rendererClass(p.className, className)
+    }));
+  });
+}
+function MultilineTextfield(_ref) {
+  var _effect = core.useComponentTracking();
+  try {
+    var control = _ref.control,
+      className = _ref.className;
+    var codeRef = React.useRef(null);
+    core.useControlEffect(function () {
+      return control.value;
+    }, function (v) {
+      var c = codeRef.current;
+      if (c && c.textContent !== v) {
+        c.textContent = v;
+      }
+    }, true);
+    return /*#__PURE__*/React__default["default"].createElement("code", {
+      contentEditable: !control.disabled,
+      className: className,
+      onInput: function onInput(t) {
+        return control.value = t.currentTarget.textContent;
+      },
+      ref: codeRef
+    });
+  } finally {
+    _effect();
+  }
+}
+
+function createJsonataRenderer(className) {
+  return createDataRenderer(function (p) {
+    return /*#__PURE__*/React__default["default"].createElement(JsonataRenderer, {
+      renderOptions: p.renderOptions,
+      className: rendererClass(p.className, className),
+      dataContext: p.parentContext,
+      control: p.control,
+      readonly: p.readonly
+    });
+  }, {
+    renderType: exports.DataRenderType.Jsonata
+  });
+}
+function JsonataRenderer(_ref) {
+  var _effect = core.useComponentTracking();
+  try {
+    var control = _ref.control,
+      expression = _ref.renderOptions.expression,
+      readonly = _ref.readonly,
+      className = _ref.className,
+      dataContext = _ref.dataContext;
+    var rendered = useJsonataExpression(expression, dataContext, function () {
+      return {
+        value: control.value,
+        readonly: readonly,
+        disabled: control.disabled
+      };
+    }, function (v) {
+      return typeof v === "object" ? "error: " + JSON.stringify(v) : v.toString();
+    });
+    console.log(expression);
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: className,
+      dangerouslySetInnerHTML: {
+        __html: rendered.value
+      }
+    });
+  } finally {
+    _effect();
+  }
+}
+
 function createButtonActionRenderer(actionId, options) {
   if (options === void 0) {
     options = {};
@@ -2657,7 +2802,9 @@ function createDefaultDataRenderer(options) {
   if (options === void 0) {
     options = {};
   }
+  var jsonataRenderer = createJsonataRenderer(options.jsonataClass);
   var nullToggler = createNullToggleRenderer();
+  var multilineRenderer = createMultilineFieldRenderer(options.multilineClass);
   var checkboxRenderer = createCheckboxRenderer((_options$checkOptions = options.checkOptions) != null ? _options$checkOptions : options.checkboxOptions);
   var selectRenderer = createSelectRenderer(options.selectOptions);
   var radioRenderer = createRadioRenderer((_options$radioOptions = options.radioOptions) != null ? _options$radioOptions : options.checkOptions);
@@ -2725,7 +2872,10 @@ function createDefaultDataRenderer(options) {
         return radioRenderer.render(props, renderers);
       case exports.DataRenderType.Checkbox:
         return checkboxRenderer.render(props, renderers);
+      case exports.DataRenderType.Jsonata:
+        return jsonataRenderer.render(props, renderers);
     }
+    if (isTextfieldRenderer(renderOptions) && renderOptions.multiline) return multilineRenderer.render(props, renderers);
     var placeholder = isTextfieldRenderer(renderOptions) ? renderOptions.placeholder : undefined;
     return /*#__PURE__*/React__default["default"].createElement(ControlInput, {
       className: rendererClass(props.className, inputClass),
@@ -2817,52 +2967,6 @@ function createDefaultLabelRenderer(options) {
     type: "label"
   };
 }
-function createNullToggleRenderer() {
-  return createDataRenderer(function (_ref7, renderers) {
-    var _control$meta, _nullControl, _control$meta$_nullCo;
-    var control = _ref7.control,
-      field = _ref7.field,
-      props = _objectWithoutPropertiesLoose(_ref7, _excluded);
-    var nullControl = (_control$meta$_nullCo = (_control$meta = control.meta)[_nullControl = "nullControl"]) != null ? _control$meta$_nullCo : _control$meta[_nullControl] = core.newControl(control.current.value != null);
-    return function (layout) {
-      var newLayout = renderers.renderData(_extends({}, props, {
-        control: nullControl,
-        field: _extends({}, field, {
-          type: exports.FieldType.Bool
-        }),
-        renderOptions: {
-          type: exports.DataRenderType.Checkbox
-        }
-      }))(layout);
-      return _extends({}, newLayout, {
-        children: /*#__PURE__*/React__default["default"].createElement(NullWrapper, {
-          control: control,
-          nullControl: nullControl,
-          children: newLayout.children,
-          defaultValue: props.definition.defaultValue
-        })
-      });
-    };
-  });
-}
-function NullWrapper(_ref8) {
-  var children = _ref8.children,
-    nullControl = _ref8.nullControl,
-    control = _ref8.control,
-    defaultValue = _ref8.defaultValue;
-  core.useControlEffect(function () {
-    return nullControl.value;
-  }, function (e) {
-    if (e) {
-      var _nullControl$meta$non;
-      control.value = (_nullControl$meta$non = nullControl.meta["nonNullValue"]) != null ? _nullControl$meta$non : defaultValue;
-    } else {
-      nullControl.meta["nonNullValue"] = control.value;
-      control.value = null;
-    }
-  });
-  return children;
-}
 function createDefaultRenderers(options) {
   if (options === void 0) {
     options = {};
@@ -3092,7 +3196,6 @@ exports.createGroupRenderer = createGroupRenderer;
 exports.createInputConversion = createInputConversion;
 exports.createLabelRenderer = createLabelRenderer;
 exports.createLayoutRenderer = createLayoutRenderer;
-exports.createNullToggleRenderer = createNullToggleRenderer;
 exports.createRadioRenderer = createRadioRenderer;
 exports.createSelectConversion = createSelectConversion;
 exports.createSelectRenderer = createSelectRenderer;