@react-typed-forms/schemas 1.0.0-dev.20 → 1.0.0-dev.21

package/README.md

@@ -0,0 +1,223 @@
+
+# React typed forms schemas
+
+A simple abstraction on top of `@react-typed-forms/core` for defining JSON compatible schemas and 
+rendering UIs for users to enter that data. 
+
+## Install
+
+```npm
+npm install @react-typed-forms/schemas
+```
+
+## Example
+
+<!-- AUTO-GENERATED-CONTENT:START (CODE:src=../examples/src/docs/schemas-example.tsx) -->
+<!-- The below code snippet is automatically added from ../examples/src/docs/schemas-example.tsx -->
+```tsx
+import { useControl } from "@react-typed-forms/core";
+import React from "react";
+import {
+  buildSchema,
+  createDefaultRenderers,
+  createFormRenderer,
+  defaultFormEditHooks,
+  defaultTailwindTheme,
+  defaultValueForFields,
+  FormRenderer,
+  intField,
+  renderControl,
+  stringField,
+  useControlDefinitionForSchema,
+} from "@react-typed-forms/schemas";
+
+/** Define your form */
+interface SimpleForm {
+  firstName: string;
+  lastName: string;
+  yearOfBirth: number;
+}
+
+/* Build your schema fields. Importantly giving them Display Names for showing in a UI */
+const simpleSchema = buildSchema<SimpleForm>({
+  firstName: stringField("First Name"),
+  lastName: stringField("Last Name", { required: true }),
+  yearOfBirth: intField("Year of birth", { defaultValue: 1980 }),
+});
+
+/* Create a form renderer based on a simple tailwind css based theme */
+const renderer: FormRenderer = createFormRenderer(
+  [],
+  createDefaultRenderers(defaultTailwindTheme),
+);
+
+export default function SimpleSchemasExample() {
+  /* Create a `Control` for collecting the data, the schema fields can be used to get a default value */
+  const data = useControl<SimpleForm>(() =>
+    defaultValueForFields(simpleSchema),
+  );
+
+  /* Generate a ControlDefinition automatically from the schema */
+  const controlDefinition = useControlDefinitionForSchema(simpleSchema);
+
+  return (
+    <div className="container my-4 max-w-2xl">
+      {/* Render the ControlDefinition using `data` for the form state */}
+      {renderControl(controlDefinition, data, {
+        fields: simpleSchema,
+        renderer,
+        hooks: defaultFormEditHooks,
+      })}
+      <pre>{JSON.stringify(data.value, null, 2)}</pre>
+    </div>
+  );
+}
+```
+<!-- AUTO-GENERATED-CONTENT:END -->
+
+This will produce this UI:
+
+<img src="../../images/schemas.png">
+
+## Schema Fields and Control Definitions
+
+### `SchemaField`
+
+A `SchemaField` is a JSON object which describes the definition of a field inside the context of a JSON object. Each `SchemaField` must have a field name and a `FieldType` which will map to JSON. The following built in types are defined with these JSON mappings:
+
+* `String` - A JSON string
+* `Bool` - A JSON boolean
+* `Int` - A JSON number
+* `Double` - A JSON number
+* `Date` - A date stored as 'yyyy-MM-dd' in a JSON string
+* `DateTime` - A date and time stored in ISO8601 format in a JSON string
+* `Compound` - A JSON object with a list of `SchemaField` children
+
+Each `SchemaField` can also be marked as a `collection` which means that it will be mapped to a JSON array of the defined `FieldType`.
+
+TODO - buildSchema, FieldOptions, extending FieldType
+
+### `ControlDefinition`
+A `ControlDefinition` is a JSON object which describes what should be rendered in a UI. Each `ControlDefinition` can be one of 4 distinct types:
+
+* `DataControlDefinition` - Points to a `SchemaField` in order to render a control for editing of data.
+* `GroupedControlsDefinition` - Contains an optional title and a list of `ControlDefinition` children which should be rendered as a group. Optionally can refer to a `SchemaField` with type `Compound` in order to capture nested data.
+* `DisplayControlDefinition` - Render readonly content, current text and HTML variants are defined.
+* `ActionControlDefinition` - Renders an action button, useful for hooking forms up with outside functionality.
+
+If you don't care about the layout of the form that much you can generate the definition automatically by using `useControlDefinitionForSchema()`.
+
+TODO renderOptions, DataRenderType for choosing render style.
+
+## Form Renderer
+
+The actual rendering of the UI is abstracted into an object which contains functions for rendering the various `ControlDefinition`s and various parts of the UI:
+
+<!-- AUTO-GENERATED-CONTENT:START (CODE:src=./src/controlRender.tsx&lines=128-138) -->
+<!-- The below code snippet is automatically added from ./src/controlRender.tsx -->
+```tsx
+export interface FormRenderer {
+  renderData: (props: DataRendererProps) => ReactElement;
+  renderGroup: (props: GroupRendererProps) => ReactElement;
+  renderDisplay: (props: DisplayRendererProps) => ReactElement;
+  renderAction: (props: ActionRendererProps) => ReactElement;
+  renderArray: (props: ArrayRendererProps) => ReactElement;
+  renderLabel: (props: LabelRendererProps, elem: ReactElement) => ReactElement;
+  renderVisibility: (visible: Visibility, elem: ReactElement) => ReactElement;
+  renderAdornment: (props: AdornmentProps) => AdornmentRenderer;
+}
+```
+<!-- AUTO-GENERATED-CONTENT:END -->
+
+The `createFormRenderer` function takes an array of `RendererRegistration` which allows for customising the rendering.
+
+<!-- AUTO-GENERATED-CONTENT:START (CODE:src=./src/renderers.tsx&lines=109-118) -->
+<!-- The below code snippet is automatically added from ./src/renderers.tsx -->
+```tsx
+export type RendererRegistration =
+  | DataRendererRegistration
+  | GroupRendererRegistration
+  | DisplayRendererRegistration
+  | ActionRendererRegistration
+  | LabelRendererRegistration
+  | ArrayRendererRegistration
+  | AdornmentRendererRegistration
+  | VisibilityRendererRegistration;
+```
+<!-- AUTO-GENERATED-CONTENT:END -->
+
+Probably the most common customisation would be to add a `DataRendererRegistration` which will change the way a `DataControlDefinition` is rendered for a particular FieldType:
+
+<!-- AUTO-GENERATED-CONTENT:START (CODE:src=./src/renderers.tsx&lines=48-61) -->
+<!-- The below code snippet is automatically added from ./src/renderers.tsx -->
+```tsx
+export interface DataRendererRegistration {
+  type: "data";
+  schemaType?: string | string[];
+  renderType?: string | string[];
+  options?: boolean;
+  collection?: boolean;
+  match?: (props: DataRendererProps) => boolean;
+  render: (
+    props: DataRendererProps,
+    defaultLabel: (label?: Partial<LabelRendererProps>) => LabelRendererProps,
+    renderers: FormRenderer,
+  ) => ReactElement;
+}
+```
+<!-- AUTO-GENERATED-CONTENT:END -->
+* The `schemaType` field specifies which `FieldType`(s) should use this `DataRendererRegistration`, unspecified means allow any.
+* The `renderType` field specifies which `DataRenderType` this registration applies to.
+* The `match` function can be used if the matching logic is more complicated than provided by the other.
+* The `render` function does the actual rendering if the ControlDefinition/SchemaField matches the registration.
+
+A good example of a custom DataRendererRegistration is the `muiTextField` which renders `String` fields using the `FTextField` wrapper of the `@react-typed-forms/mui` library:
+
+<!-- AUTO-GENERATED-CONTENT:START (CODE:src=../schemas-mui/src/index.tsx&lines=12-35) -->
+<!-- The below code snippet is automatically added from ../schemas-mui/src/index.tsx -->
+```tsx
+export function muiTextfieldRenderer(
+  variant?: "standard" | "outlined" | "filled",
+): DataRendererRegistration {
+  return {
+    type: "data",
+    schemaType: FieldType.String,
+    renderType: DataRenderType.Standard,
+    render: (r, makeLabel, { renderVisibility }) => {
+      const { title, required } = makeLabel();
+      return renderVisibility(
+        r.visible,
+        <FTextField
+          variant={variant}
+          required={required}
+          fullWidth
+          size="small"
+          state={r.control}
+          label={title}
+        />,
+      );
+    },
+  };
+}
+```
+<!-- AUTO-GENERATED-CONTENT:END -->
+
+Changing the simple example above to use the following:
+
+```tsx
+const renderer: FormRenderer = createFormRenderer(
+    [muiTextFieldRenderer()], 
+    createDefaultRenderer (defaultTailwindTheme));
+```
+
+This will produce this UI:
+
+<img src="../../images/schemas-muifield.png">
+
+## TODO
+
+* Label rendering
+* Visibility
+* Arrays
+* Display controls
+

package/lib/controlRender.d.ts

@@ -1,13 +1,13 @@
 import { ActionControlDefinition, AdornmentPlacement, CompoundField, ControlAdornment, ControlDefinition, DataControlDefinition, DisplayControlDefinition, EntityExpression, FieldOption, GroupedControlsDefinition, RenderOptions, SchemaField, SchemaValidator } from "./types";
-import React, { Key, ReactElement, ReactNode } from "react";
+import { Key, ReactElement, ReactNode } from "react";
 import { Control } from "@react-typed-forms/core";
 export interface SchemaHooks {
     useExpression(expr: EntityExpression, formState: FormEditState): Control<any | undefined>;
     useValidators(formState: FormEditState, isVisible: boolean, control: Control<any>, required: boolean, validations?: SchemaValidator[] | null): void;
 }
 export interface FormEditHooks {
-    useDataProperties(formState: FormEditState, definition: DataControlDefinition, field: SchemaField, renderers: FormRenderer): DataRendererProps;
-    useGroupProperties(formState: FormEditState, definition: GroupedControlsDefinition, currentHooks: FormEditHooks, renderers: FormRenderer): GroupRendererProps;
+    useDataProperties(formState: FormEditState, definition: DataControlDefinition, field: SchemaField): DataRendererProps;
+    useGroupProperties(formState: FormEditState, definition: GroupedControlsDefinition): GroupRendererProps;
     useDisplayProperties(formState: FormEditState, definition: DisplayControlDefinition): DisplayRendererProps;
     useActionProperties(formState: FormEditState, definition: ActionControlDefinition): ActionRendererProps;
     schemaHooks: SchemaHooks;
@@ -39,12 +39,17 @@ export interface GroupRendererProps {
 export interface ControlData {
     [field: string]: any;
 }
-export interface FormEditState {
+export interface FormDataContext {
     fields: SchemaField[];
     data: Control<ControlData>;
+}
+export interface FormEditState extends FormDataContext {
+    hooks: FormEditHooks;
+    renderer: FormRenderer;
     readonly?: boolean;
     invisible?: boolean;
 }
+export type RenderControlOptions = Omit<FormEditState, "data">;
 export interface ArrayRendererProps {
     definition: DataControlDefinition | GroupedControlsDefinition;
     control: Control<any[]>;
@@ -73,11 +78,6 @@ export interface FormRenderer {
     renderVisibility: (visible: Visibility, elem: ReactElement) => ReactElement;
     renderAdornment: (props: AdornmentProps) => AdornmentRenderer;
 }
-export declare function FormRendererProvider({ value, children, }: {
-    value: FormRenderer;
-    children: ReactNode;
-}): React.JSX.Element;
-export declare function useFormRendererComponents(): FormRenderer;
 export interface Visibility {
     value: boolean;
     canChange: boolean;
@@ -104,9 +104,9 @@ export type AnySchemaFields = SchemaField | (Omit<CompoundField, "children"> & {
     children: AnySchemaFields[];
 });
 export declare function controlTitle(title: string | undefined | null, field: SchemaField): string;
-export declare function renderControl<S extends ControlDefinition>(definition: S, formState: FormEditState, hooks: FormEditHooks, key: Key): ReactElement;
+export declare function renderControl<S extends ControlDefinition>(definition: S, data: Control<any>, options: RenderControlOptions, key?: Key): ReactElement;
 export declare function controlForField(field: string, formState: FormEditState): Control<any>;
 export declare function fieldForControl(c: ControlDefinition): string | null | undefined;
 export declare const AlwaysVisible: Visibility;
 export declare function createAction(label: string, onClick: () => void, actionId?: string): ActionRendererProps;
-export declare function visitControlData<S extends ControlDefinition, A>(definition: S, { fields, data }: FormEditState, cb: (definition: DataControlDefinition, control: Control<any>) => A | undefined): A | undefined;
+export declare function visitControlData<S extends ControlDefinition, A>(definition: S, { fields, data }: FormDataContext, cb: (definition: DataControlDefinition, control: Control<any>) => A | undefined): A | undefined;

package/lib/hooks.d.ts

@@ -8,4 +8,4 @@ export declare function getOptionsForScalarField(field: SchemaField): FieldOptio
 export declare function createDefaultSchemaHooks(): SchemaHooks;
 export declare const defaultFormEditHooks: FormEditHooks;
 export declare function createFormEditHooks(schemaHooks: SchemaHooks): FormEditHooks;
-export declare function useControlsWithDefaults(definition: GroupedControlsDefinition, sf: SchemaField[]): GroupedControlsDefinition;
+export declare function useControlDefinitionForSchema(sf: SchemaField[], definition?: GroupedControlsDefinition): GroupedControlsDefinition;

package/lib/index.js

@@ -423,40 +423,14 @@ function addMissingControls(fields, controls) {
   }));
 }
 
-var _FormRendererComponentsContext = null;
-function FormRendererComponentsContext() {
-  if (!_FormRendererComponentsContext) {
-    _FormRendererComponentsContext = React.createContext(undefined);
-  }
-  return _FormRendererComponentsContext;
-}
-function FormRendererProvider(_ref) {
-  var _effect = core.useComponentTracking();
-  try {
-    var value = _ref.value,
-      children = _ref.children;
-    var _FormRendererComponen = FormRendererComponentsContext(),
-      Provider = _FormRendererComponen.Provider;
-    return /*#__PURE__*/React__default["default"].createElement(Provider, {
-      value: value,
-      children: children
-    });
-  } finally {
-    _effect();
-  }
-}
-function useFormRendererComponents() {
-  var c = React.useContext(FormRendererComponentsContext());
-  if (!c) {
-    throw "Need to use FormRendererComponentContext.Provider";
-  }
-  return c;
-}
 function controlTitle(title, field) {
   return title ? title : fieldDisplayName(field);
 }
-function renderControl(definition, formState, hooks, key) {
-  var fields = formState.fields;
+function renderControl(definition, data, options, key) {
+  var fields = options.fields;
+  var formState = _extends({}, options, {
+    data: data
+  });
   return visitControlDefinition(definition, {
     data: function data(def) {
       var fieldData = findScalarField(fields, def.field);
@@ -466,7 +440,6 @@ function renderControl(definition, formState, hooks, key) {
       return /*#__PURE__*/React__default["default"].createElement(DataRenderer, {
         key: key,
         formState: formState,
-        hooks: hooks,
         controlDef: def,
         fieldData: fieldData
       });
@@ -474,7 +447,6 @@ function renderControl(definition, formState, hooks, key) {
     group: function group(d) {
       return /*#__PURE__*/React__default["default"].createElement(GroupRenderer, {
         key: key,
-        hooks: hooks,
         groupDef: d,
         formState: formState
       });
@@ -482,7 +454,6 @@ function renderControl(definition, formState, hooks, key) {
     action: function action(d) {
       return /*#__PURE__*/React__default["default"].createElement(ActionRenderer, {
         key: key,
-        hooks: hooks,
         formState: formState,
         actionDef: d
       });
@@ -490,7 +461,6 @@ function renderControl(definition, formState, hooks, key) {
     display: function display(d) {
       return /*#__PURE__*/React__default["default"].createElement(DisplayRenderer, {
         key: key,
-        hooks: hooks,
         formState: formState,
         displayDef: d
       });
@@ -500,69 +470,59 @@ function renderControl(definition, formState, hooks, key) {
   });
 }
 /** @trackControls */
-function DataRenderer(_ref2) {
-  var _effect2 = core.useComponentTracking();
+function DataRenderer(_ref) {
+  var _effect = core.useComponentTracking();
   try {
     var _props$customRender;
-    var hooks = _ref2.hooks,
-      formState = _ref2.formState,
-      controlDef = _ref2.controlDef,
-      fieldData = _ref2.fieldData;
-    var renderer = useFormRendererComponents();
-    var props = hooks.useDataProperties(formState, controlDef, fieldData, renderer);
-    return ((_props$customRender = props.customRender) != null ? _props$customRender : renderer.renderData)(props);
+    var formState = _ref.formState,
+      controlDef = _ref.controlDef,
+      fieldData = _ref.fieldData;
+    var props = formState.hooks.useDataProperties(formState, controlDef, fieldData);
+    return ((_props$customRender = props.customRender) != null ? _props$customRender : formState.renderer.renderData)(props);
   } finally {
-    _effect2();
+    _effect();
   }
 }
 /** @trackControls */ /** @trackControls */
-function ActionRenderer(_ref3) {
-  var _effect3 = core.useComponentTracking();
+function ActionRenderer(_ref2) {
+  var _effect2 = core.useComponentTracking();
   try {
-    var hooks = _ref3.hooks,
-      formState = _ref3.formState,
-      actionDef = _ref3.actionDef;
-    var _useFormRendererCompo = useFormRendererComponents(),
-      renderAction = _useFormRendererCompo.renderAction;
-    var actionControlProperties = hooks.useActionProperties(formState, actionDef);
-    return renderAction(actionControlProperties);
+    var formState = _ref2.formState,
+      actionDef = _ref2.actionDef;
+    var actionControlProperties = formState.hooks.useActionProperties(formState, actionDef);
+    return formState.renderer.renderAction(actionControlProperties);
   } finally {
-    _effect3();
+    _effect2();
   }
 }
 /** @trackControls */ /** @trackControls */
-function GroupRenderer(_ref4) {
-  var _effect4 = core.useComponentTracking();
+function GroupRenderer(_ref3) {
+  var _effect3 = core.useComponentTracking();
   try {
-    var hooks = _ref4.hooks,
-      formState = _ref4.formState,
-      groupDef = _ref4.groupDef;
-    var renderers = useFormRendererComponents();
-    var groupProps = hooks.useGroupProperties(formState, groupDef, hooks, renderers);
-    return renderers.renderGroup(groupProps);
+    var formState = _ref3.formState,
+      groupDef = _ref3.groupDef;
+    var groupProps = formState.hooks.useGroupProperties(formState, groupDef);
+    return formState.renderer.renderGroup(groupProps);
   } finally {
-    _effect4();
+    _effect3();
   }
 }
 /** @trackControls */ /** @trackControls */
-function DisplayRenderer(_ref5) {
-  var _effect5 = core.useComponentTracking();
+function DisplayRenderer(_ref4) {
+  var _effect4 = core.useComponentTracking();
   try {
-    var hooks = _ref5.hooks,
-      formState = _ref5.formState,
-      displayDef = _ref5.displayDef;
-    var _useFormRendererCompo2 = useFormRendererComponents(),
-      renderDisplay = _useFormRendererCompo2.renderDisplay;
-    var displayProps = hooks.useDisplayProperties(formState, displayDef);
-    return renderDisplay(displayProps);
+    var formState = _ref4.formState,
+      displayDef = _ref4.displayDef;
+    var displayProps = formState.hooks.useDisplayProperties(formState, displayDef);
+    return formState.renderer.renderDisplay(displayProps);
   } finally {
-    _effect5();
+    _effect4();
   }
 }
 function controlForField(field, formState) {
-  var _ref6;
+  var _ref5;
   var refField = findField(formState.fields, field);
-  return (_ref6 = refField && formState.data.fields[refField.field]) != null ? _ref6 : core.newControl(undefined);
+  return (_ref5 = refField && formState.data.fields[refField.field]) != null ? _ref5 : core.newControl(undefined);
 }
 function fieldForControl(c) {
   return isDataControl(c) ? c.field : isGroupControl(c) ? c.compoundField : undefined;
@@ -582,9 +542,9 @@ function createAction(label, onClick, actionId) {
     onClick: onClick
   };
 }
-function visitControlData(definition, _ref7, cb) {
-  var fields = _ref7.fields,
-    _data = _ref7.data;
+function visitControlData(definition, _ref6, cb) {
+  var fields = _ref6.fields,
+    _data = _ref6.data;
   return visitControlDefinition(definition, {
     data: function data(def) {
       var fieldData = findScalarField(fields, def.field);
@@ -775,7 +735,7 @@ var defaultFormEditHooks = createFormEditHooks(createDefaultSchemaHooks());
 function createFormEditHooks(schemaHooks) {
   return {
     schemaHooks: schemaHooks,
-    useDataProperties: function useDataProperties(formState, definition, field, renderer) {
+    useDataProperties: function useDataProperties(formState, definition, field) {
       var visible = useIsControlVisible(definition, formState, schemaHooks);
       var isVisible = visible.value && !formState.invisible;
       var defaultValue = useDefaultValue(definition, field, formState, schemaHooks);
@@ -798,7 +758,7 @@ function createFormEditHooks(schemaHooks) {
       if (!field.collection) return dataProps;
       return _extends({}, dataProps, {
         array: defaultArrayRendererProps(scalarControl, field, definition, dataProps.readonly, function (c) {
-          return renderer.renderData(_extends({}, dataProps, {
+          return formState.renderer.renderData(_extends({}, dataProps, {
             control: c
           }));
         })
@@ -811,34 +771,32 @@ function createFormEditHooks(schemaHooks) {
         definition: definition
       };
     },
-    useGroupProperties: function useGroupProperties(fs, definition, hooks, renderers) {
+    useGroupProperties: function useGroupProperties(fs, definition) {
       var _definition$groupOpti;
       var visible = useIsControlVisible(definition, fs, schemaHooks);
       var field = definition.compoundField ? findCompoundField(fs.fields, definition.compoundField) : undefined;
       var newFs = _extends({}, fs, {
         fields: field ? field.children : fs.fields,
-        data: field ? fs.data.fields[field.field] : fs.data,
         invisible: !visible.value || fs.invisible
       });
+      var data = field ? fs.data.fields[field.field] : fs.data;
       var groupProps = {
         visible: visible,
-        hooks: hooks,
+        hooks: fs.hooks,
         hideTitle: (_definition$groupOpti = definition.groupOptions.hideTitle) != null ? _definition$groupOpti : false,
         childCount: definition.children.length,
         renderChild: function renderChild(i) {
-          return renderControl(definition.children[i], newFs, hooks, i);
+          return renderControl(definition.children[i], data, newFs, i);
         },
         definition: definition
       };
       if (field != null && field.collection) {
         return _extends({}, groupProps, {
-          array: defaultArrayRendererProps(newFs.data, field, definition, fs.readonly, function (e) {
-            return renderers.renderGroup(_extends({}, groupProps, {
+          array: defaultArrayRendererProps(data, field, definition, fs.readonly, function (e) {
+            return fs.renderer.renderGroup(_extends({}, groupProps, {
               hideTitle: true,
               renderChild: function renderChild(i) {
-                return renderControl(definition.children[i], _extends({}, newFs, {
-                  data: e
-                }), hooks, i);
+                return renderControl(definition.children[i], e, newFs, i);
               }
             }));
           })
@@ -904,7 +862,18 @@ function defaultArrayRendererProps(control, field, definition, readonly, renderE
     }
   };
 }
-function useControlsWithDefaults(definition, sf) {
+var emptyGroupDefinition = {
+  type: exports.ControlDefinitionType.Group,
+  children: [],
+  groupOptions: {
+    type: exports.GroupRenderType.Standard,
+    hideTitle: true
+  }
+};
+function useControlDefinitionForSchema(sf, definition) {
+  if (definition === void 0) {
+    definition = emptyGroupDefinition;
+  }
   return React.useMemo(function () {
     return definition.children.length ? definition : _extends({}, definition, {
       children: addMissingControls(sf, [])
@@ -1546,7 +1515,6 @@ exports.AlwaysVisible = AlwaysVisible;
 exports.ControlInput = ControlInput;
 exports.DefaultBoolOptions = DefaultBoolOptions;
 exports.DefaultLabelRenderer = DefaultLabelRenderer;
-exports.FormRendererProvider = FormRendererProvider;
 exports.SelectDataRenderer = SelectDataRenderer;
 exports.addMissingControls = addMissingControls;
 exports.applyDefaultForField = applyDefaultForField;
@@ -1611,9 +1579,8 @@ exports.makeScalarField = makeScalarField;
 exports.renderControl = renderControl;
 exports.stringField = stringField;
 exports.stringOptionsField = stringOptionsField;
-exports.useControlsWithDefaults = useControlsWithDefaults;
+exports.useControlDefinitionForSchema = useControlDefinitionForSchema;
 exports.useDefaultValue = useDefaultValue;
-exports.useFormRendererComponents = useFormRendererComponents;
 exports.useIsControlVisible = useIsControlVisible;
 exports.visibility = visibility;
 exports.visitControlData = visitControlData;