@react-typed-forms/schemas 11.5.5 → 11.6.0

package/lib/components/DefaultAccordion.d.ts

@@ -0,0 +1,15 @@
+import React, { CSSProperties, ReactElement, ReactNode } from "react";
+import { AccordionAdornment } from "../types";
+import { Control } from "@react-typed-forms/core";
+export declare function DefaultAccordion({ children, accordion, contentStyle, contentClassName, designMode, togglerOpenClass, togglerClosedClass, className, renderTitle, renderToggler, }: {
+    children: ReactElement;
+    accordion: Partial<AccordionAdornment>;
+    contentStyle?: CSSProperties;
+    contentClassName?: string;
+    designMode?: boolean;
+    className?: string;
+    togglerOpenClass?: string;
+    togglerClosedClass?: string;
+    renderTitle?: (title: string | undefined, current: Control<boolean>) => ReactNode;
+    renderToggler?: (current: Control<boolean>) => ReactNode;
+}): React.JSX.Element;

package/lib/controlRender.d.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties, FC, Key, ReactNode } from "react";
+import React, { CSSProperties, FC, Key, ReactElement, ReactNode } from "react";
 import { Control } from "@react-typed-forms/core";
 import { AdornmentPlacement, ControlAdornment, ControlDefinition, DataControlDefinition, DisplayData, FieldOption, GroupRenderOptions, RenderOptions, SchemaField, SchemaInterface } from "./types";
 import { ControlDataContext, JsonPath } from "./util";
@@ -16,6 +16,7 @@ export interface FormRenderer {
 }
 export interface AdornmentProps {
     adornment: ControlAdornment;
+    designMode?: boolean;
 }
 export declare const AppendAdornmentPriority = 0;
 export declare const WrapAdornmentPriority = 1000;
@@ -49,6 +50,7 @@ export interface RenderedLayout {
     errorControl?: Control<any>;
     className?: string;
     style?: React.CSSProperties;
+    wrapLayout: (layout: ReactElement) => ReactElement;
 }
 export interface RenderedControl {
     children: ReactNode;
@@ -96,6 +98,7 @@ export interface ParentRendererProps {
     dataContext: ControlDataContext;
     parentContext: ControlDataContext;
     useChildVisibility: ChildVisibilityFunc;
+    designMode?: boolean;
 }
 export interface GroupRendererProps extends ParentRendererProps {
     definition: ControlDefinition;
@@ -144,6 +147,7 @@ export interface DataControlProps {
     allowedOptions?: Control<any[] | undefined>;
     useChildVisibility: ChildVisibilityFunc;
     schemaInterface?: SchemaInterface;
+    designMode?: boolean;
 }
 export type CreateDataProps = (controlProps: DataControlProps) => DataRendererProps;
 export interface ControlRenderOptions extends FormContextOptions {
@@ -191,11 +195,14 @@ export interface RenderControlProps {
     useChildVisibility: ChildVisibilityFunc;
     actionOnClick?: (actionId: string, actionData: any) => () => void;
     schemaInterface?: SchemaInterface;
+    designMode?: boolean;
 }
 export declare function renderControlLayout(props: RenderControlProps): ControlLayoutProps;
-export declare function appendMarkup(k: keyof Omit<RenderedLayout, "errorControl" | "style" | "className">, markup: ReactNode): (layout: RenderedLayout) => void;
-export declare function wrapMarkup(k: keyof Omit<RenderedLayout, "errorControl" | "style" | "className">, wrap: (ex: ReactNode) => ReactNode): (layout: RenderedLayout) => void;
-export declare function layoutKeyForPlacement(pos: AdornmentPlacement): keyof Omit<RenderedLayout, "errorControl" | "style" | "className">;
+type MarkupKeys = keyof Omit<RenderedLayout, "errorControl" | "style" | "className" | "wrapLayout">;
+export declare function appendMarkup(k: MarkupKeys, markup: ReactNode): (layout: RenderedLayout) => void;
+export declare function wrapMarkup(k: MarkupKeys, wrap: (ex: ReactNode) => ReactNode): (layout: RenderedLayout) => void;
+export declare function layoutKeyForPlacement(pos: AdornmentPlacement): MarkupKeys;
+export declare function wrapLayout(wrap: (layout: ReactElement) => ReactElement): (renderedLayout: RenderedLayout) => void;
 export declare function appendMarkupAt(pos: AdornmentPlacement, markup: ReactNode): (layout: RenderedLayout) => void;
 export declare function wrapMarkupAt(pos: AdornmentPlacement, wrap: (ex: ReactNode) => ReactNode): (layout: RenderedLayout) => void;
 export declare function renderLayoutParts(props: ControlLayoutProps, renderer: FormRenderer): RenderedLayout;
@@ -204,3 +211,4 @@ export declare function applyArrayLengthRestrictions({ arrayControl, min, max, a
     addDisabled: boolean;
     removeDisabled: boolean;
 };
+export {};

package/lib/createDefaultRenderers.d.ts

@@ -4,6 +4,7 @@ import { ActionRendererRegistration, AdornmentRendererRegistration, DataRenderer
 import { CSSProperties, ReactElement, ReactNode } from "react";
 import { FieldOption, GridRenderer } from "./types";
 import { SelectRendererOptions } from "./components/SelectDataRenderer";
+import { Control } from "@react-typed-forms/core";
 import { DefaultArrayRendererOptions } from "./components/DefaultArrayRenderer";
 import { CheckRendererOptions } from "./components/CheckRenderer";
 export interface DefaultRendererOptions {
@@ -49,6 +50,13 @@ interface DefaultDataRendererOptions {
 }
 export declare function createDefaultDataRenderer(options?: DefaultDataRendererOptions): DataRendererRegistration;
 export interface DefaultAdornmentRendererOptions {
+    accordion?: {
+        className?: string;
+        togglerOpenClass?: string;
+        togglerClosedClass?: string;
+        renderTitle?: (title: string | undefined, current: Control<boolean>) => ReactNode;
+        renderToggler?: (current: Control<boolean>) => ReactNode;
+    };
 }
 export declare function createDefaultAdornmentRenderer(options?: DefaultAdornmentRendererOptions): AdornmentRendererRegistration;
 interface DefaultLabelRendererOptions {

package/lib/index.js

@@ -1660,7 +1660,8 @@ function renderControlLayout(props) {
     style = props.style,
     labelText = props.labelText,
     parentContext = props.parentContext,
-    useChildVisibility = props.useChildVisibility;
+    useChildVisibility = props.useChildVisibility,
+    designMode = props.designMode;
   if (isDataControlDefinition(c)) {
     return renderData(c);
   }
@@ -1685,7 +1686,8 @@ function renderControlLayout(props) {
         },
         className: cc(c.styleClass),
         useChildVisibility: useChildVisibility,
-        style: style
+        style: style,
+        designMode: designMode
       }),
       label: {
         label: (_labelText$value = labelText == null ? void 0 : labelText.value) != null ? _labelText$value : c.title,
@@ -1768,6 +1770,14 @@ function layoutKeyForPlacement(pos) {
       return "labelEnd";
   }
 }
+function wrapLayout(wrap) {
+  return function (rl) {
+    var orig = rl.wrapLayout;
+    rl.wrapLayout = function (x) {
+      return wrap(orig(x));
+    };
+  };
+}
 function appendMarkupAt(pos, markup) {
   return appendMarkup(layoutKeyForPlacement(pos), markup);
 }
@@ -1787,7 +1797,10 @@ function renderLayoutParts(props, renderer) {
     children: children,
     errorControl: errorControl,
     style: style,
-    className: cc(className)
+    className: cc(className),
+    wrapLayout: function wrapLayout(x) {
+      return x;
+    }
   };
   (adornments != null ? adornments : []).sort(function (a, b) {
     return a.priority - b.priority;
@@ -1822,6 +1835,9 @@ function applyArrayLengthRestrictions(_ref7, disable) {
 function isIconAdornment(a) {
   return a.type === exports.ControlAdornmentType.Icon;
 }
+function isAccordionAdornment(a) {
+  return a.type === exports.ControlAdornmentType.Accordion;
+}
 function createLayoutRenderer(render, options) {
   return _extends({
     type: "layout",
@@ -1912,6 +1928,13 @@ var defaultTailwindTheme = {
     selectOptions: {
       emptyText: "<select>"
     }
+  },
+  adornment: {
+    accordion: {
+      className: "flex items-center gap-2 my-2",
+      togglerOpenClass: "fa fa-chevron-up",
+      togglerClosedClass: "fa fa-chevron-down"
+    }
   }
 };
 
@@ -2389,6 +2412,47 @@ function createCheckboxRenderer(options) {
   });
 }
 
+function DefaultAccordion(_ref) {
+  var _effect = core.useComponentTracking();
+  try {
+    var children = _ref.children,
+      accordion = _ref.accordion,
+      contentStyle = _ref.contentStyle,
+      contentClassName = _ref.contentClassName,
+      designMode = _ref.designMode,
+      togglerOpenClass = _ref.togglerOpenClass,
+      togglerClosedClass = _ref.togglerClosedClass,
+      className = _ref.className,
+      _ref$renderTitle = _ref.renderTitle,
+      renderTitle = _ref$renderTitle === void 0 ? function (x) {
+        return /*#__PURE__*/React__default["default"].createElement("span", null, x);
+      } : _ref$renderTitle,
+      renderToggler = _ref.renderToggler;
+    var open = core.useControl(!!accordion.defaultExpanded);
+    var isOpen = open.value;
+    var fullContentStyle = isOpen || designMode ? contentStyle : _extends({}, contentStyle, {
+      display: "none"
+    });
+    var toggler = renderToggler ? renderToggler(open) : /*#__PURE__*/React__default["default"].createElement("button", {
+      onClick: function onClick() {
+        return open.setValue(function (x) {
+          return !x;
+        });
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("i", {
+      className: clsx__default["default"](isOpen ? togglerOpenClass : togglerClosedClass)
+    }));
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: className
+    }, renderTitle(accordion.title, open), toggler), /*#__PURE__*/React__default["default"].createElement("div", {
+      style: fullContentStyle,
+      className: contentClassName
+    }, children));
+  } finally {
+    _effect();
+  }
+}
+
 function createButtonActionRenderer(actionId, options) {
   if (options === void 0) {
     options = {};
@@ -2556,10 +2620,14 @@ function createDefaultDataRenderer(options) {
   });
 }
 function createDefaultAdornmentRenderer(options) {
+  if (options === void 0) {
+    options = {};
+  }
   return {
     type: "adornment",
     render: function render(_ref6) {
-      var adornment = _ref6.adornment;
+      var adornment = _ref6.adornment,
+        designMode = _ref6.designMode;
       return {
         apply: function apply(rl) {
           if (isIconAdornment(adornment)) {
@@ -2568,6 +2636,17 @@ function createDefaultAdornmentRenderer(options) {
               className: adornment.iconClass
             }))(rl);
           }
+          if (isAccordionAdornment(adornment)) {
+            return wrapLayout(function (x) {
+              return /*#__PURE__*/React__default["default"].createElement(DefaultAccordion, _extends({
+                children: x,
+                accordion: adornment,
+                contentStyle: rl.style,
+                contentClassName: rl.className,
+                designMode: designMode
+              }, options.accordion));
+            })(rl);
+          }
         },
         priority: 0,
         adornment: adornment
@@ -2584,9 +2663,9 @@ function createDefaultLayoutRenderer(options) {
       className: rendererClass(props.className, options.className)
     }), renderers);
     return {
-      children: /*#__PURE__*/React__default["default"].createElement(DefaultLayout, _extends({
+      children: layout.wrapLayout( /*#__PURE__*/React__default["default"].createElement(DefaultLayout, _extends({
         layout: layout
-      }, options)),
+      }, options))),
       className: layout.className,
       style: layout.style,
       divRef: function divRef(e) {
@@ -2628,7 +2707,7 @@ function createDefaultRenderers(options) {
     array: createDefaultArrayRenderer(options.array),
     group: createDefaultGroupRenderer(options.group),
     label: createDefaultLabelRenderer(options.label),
-    adornment: createDefaultAdornmentRenderer(),
+    adornment: createDefaultAdornmentRenderer(options.adornment),
     renderLayout: createDefaultLayoutRenderer(options.layout),
     visibility: createDefaultVisibilityRenderer()
   };
@@ -2885,6 +2964,7 @@ exports.hasOptions = hasOptions;
 exports.hideDisplayOnly = hideDisplayOnly;
 exports.htmlDisplayControl = htmlDisplayControl;
 exports.intField = intField;
+exports.isAccordionAdornment = isAccordionAdornment;
 exports.isActionControlsDefinition = isActionControlsDefinition;
 exports.isCompoundField = isCompoundField;
 exports.isControlDisabled = isControlDisabled;
@@ -2946,6 +3026,7 @@ exports.visitControlDataArray = visitControlDataArray;
 exports.visitControlDefinition = visitControlDefinition;
 exports.watchControlLookup = watchControlLookup;
 exports.withScalarOptions = withScalarOptions;
+exports.wrapLayout = wrapLayout;
 exports.wrapMarkup = wrapMarkup;
 exports.wrapMarkupAt = wrapMarkupAt;
 //# sourceMappingURL=index.js.map