@springmicro/forms 0.6.4 → 0.7.0

package/src/templates/ArrayFieldTemplate.tsx

@@ -1,90 +1,90 @@
-import React from "react";
-import type {
-  ArrayFieldTemplateProps,
-  ArrayFieldTemplateItemType,
-  GenericObjectType,
-} from "@rjsf/utils";
-import { getTemplate, getUiOptions } from "@rjsf/utils";
-
-/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
- *
- * @param props - The `ArrayFieldTemplateItemType` props for the component
- */
-export default function ArrayFieldTemplate<
-  T = any,
-  F extends GenericObjectType = any
->(props: ArrayFieldTemplateProps<T, F>) {
-  const {
-    canAdd,
-    className,
-    disabled,
-    idSchema,
-    uiSchema,
-    items,
-    onAddClick,
-    readonly,
-    registry,
-    required,
-    schema,
-    title,
-  } = props;
-  const uiOptions = getUiOptions<T, F>(uiSchema);
-  const ArrayFieldDescriptionTemplate = getTemplate<
-    "ArrayFieldDescriptionTemplate",
-    T,
-    F
-  >("ArrayFieldDescriptionTemplate", registry, uiOptions);
-  const ArrayFieldItemTemplate = getTemplate<"ArrayFieldItemTemplate", T, F>(
-    "ArrayFieldItemTemplate",
-    registry,
-    uiOptions
-  );
-  const ArrayFieldTitleTemplate = getTemplate<"ArrayFieldTitleTemplate", T, F>(
-    "ArrayFieldTitleTemplate",
-    registry,
-    uiOptions
-  );
-  // Button templates are not overridden in the uiSchema
-  const {
-    ButtonTemplates: { AddButton },
-  } = registry.templates;
-  return (
-    <fieldset className={className} id={idSchema.$id}>
-      <ArrayFieldTitleTemplate
-        schema={schema}
-        idSchema={idSchema}
-        title={uiOptions.title || title}
-        required={required}
-        uiSchema={uiSchema}
-        registry={registry}
-      />
-      {(uiOptions.description || schema.description) && (
-        <ArrayFieldDescriptionTemplate
-          schema={schema}
-          idSchema={idSchema}
-          description={(uiOptions.description || schema.description)!}
-          uiSchema={uiSchema}
-          registry={registry}
-        />
-      )}
-      <div className="row array-item-list">
-        {items &&
-          items.map(
-            // @ts-ignore
-            ({ key, ...itemProps }: ArrayFieldTemplateItemType) => (
-              // @ts-ignore
-              <ArrayFieldItemTemplate key={key} {...itemProps} />
-            )
-          )}
-      </div>
-      {canAdd && (
-        <AddButton
-          registry={registry}
-          className="array-item-add"
-          onClick={onAddClick}
-          disabled={disabled || readonly}
-        />
-      )}
-    </fieldset>
-  );
-}
+import React from "react";
+import type {
+  ArrayFieldTemplateProps,
+  ArrayFieldTemplateItemType,
+  GenericObjectType,
+} from "@rjsf/utils";
+import { getTemplate, getUiOptions } from "@rjsf/utils";
+
+/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
+ *
+ * @param props - The `ArrayFieldTemplateItemType` props for the component
+ */
+export default function ArrayFieldTemplate<
+  T = any,
+  F extends GenericObjectType = any
+>(props: ArrayFieldTemplateProps<T, F>) {
+  const {
+    canAdd,
+    className,
+    disabled,
+    idSchema,
+    uiSchema,
+    items,
+    onAddClick,
+    readonly,
+    registry,
+    required,
+    schema,
+    title,
+  } = props;
+  const uiOptions = getUiOptions<T, F>(uiSchema);
+  const ArrayFieldDescriptionTemplate = getTemplate<
+    "ArrayFieldDescriptionTemplate",
+    T,
+    F
+  >("ArrayFieldDescriptionTemplate", registry, uiOptions);
+  const ArrayFieldItemTemplate = getTemplate<"ArrayFieldItemTemplate", T, F>(
+    "ArrayFieldItemTemplate",
+    registry,
+    uiOptions
+  );
+  const ArrayFieldTitleTemplate = getTemplate<"ArrayFieldTitleTemplate", T, F>(
+    "ArrayFieldTitleTemplate",
+    registry,
+    uiOptions
+  );
+  // Button templates are not overridden in the uiSchema
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+  return (
+    <fieldset className={className} id={idSchema.$id}>
+      <ArrayFieldTitleTemplate
+        schema={schema}
+        idSchema={idSchema}
+        title={uiOptions.title || title}
+        required={required}
+        uiSchema={uiSchema}
+        registry={registry}
+      />
+      {(uiOptions.description || schema.description) && (
+        <ArrayFieldDescriptionTemplate
+          schema={schema}
+          idSchema={idSchema}
+          description={(uiOptions.description || schema.description)!}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      <div className="row array-item-list">
+        {items &&
+          items.map(
+            // @ts-ignore
+            ({ key, ...itemProps }: ArrayFieldTemplateItemType) => (
+              // @ts-ignore
+              <ArrayFieldItemTemplate key={key} {...itemProps} />
+            )
+          )}
+      </div>
+      {canAdd && (
+        <AddButton
+          registry={registry}
+          className="array-item-add"
+          onClick={onAddClick}
+          disabled={disabled || readonly}
+        />
+      )}
+    </fieldset>
+  );
+}

package/src/templates/ArrayFieldTitleTemplate.tsx

@@ -1,44 +1,44 @@
-import React from "react";
-import type {
-  ArrayFieldTitleProps,
-  TemplatesType,
-  GenericObjectType,
-  Registry,
-  UiSchema,
-} from "@rjsf/utils";
-import { getTemplate, getUiOptions } from "@rjsf/utils";
-
-/** The `ArrayFieldTitleTemplate` component renders a `TitleFieldTemplate` with an `id` derived from
- * the `idSchema`.
- *
- * @param props - The `ArrayFieldTitleProps` for the component
- */
-export default function ArrayFieldTitleTemplate<
-  T = any,
-  F extends GenericObjectType = any
->(props: ArrayFieldTitleProps) {
-  const { schema, idSchema, title, uiSchema, required, registry } = props;
-  if (!title) {
-    return null;
-  }
-  const options = getUiOptions<T, F>(
-    uiSchema as unknown as UiSchema<T, F, any>
-  );
-  const TitleFieldTemplate: TemplatesType<T, F>["TitleFieldTemplate"] =
-    getTemplate<"TitleFieldTemplate", T, F>(
-      "TitleFieldTemplate",
-      registry as unknown as Registry<T, F, any>,
-      options
-    );
-  const id = `${idSchema.$id}__title`;
-  return (
-    <TitleFieldTemplate
-      schema={schema as unknown as F}
-      id={id}
-      title={title}
-      required={required}
-      uiSchema={uiSchema as unknown as UiSchema<T, F, any>}
-      registry={registry as unknown as Registry<T, F, any>}
-    />
-  );
-}
+import React from "react";
+import type {
+  ArrayFieldTitleProps,
+  TemplatesType,
+  GenericObjectType,
+  Registry,
+  UiSchema,
+} from "@rjsf/utils";
+import { getTemplate, getUiOptions } from "@rjsf/utils";
+
+/** The `ArrayFieldTitleTemplate` component renders a `TitleFieldTemplate` with an `id` derived from
+ * the `idSchema`.
+ *
+ * @param props - The `ArrayFieldTitleProps` for the component
+ */
+export default function ArrayFieldTitleTemplate<
+  T = any,
+  F extends GenericObjectType = any
+>(props: ArrayFieldTitleProps) {
+  const { schema, idSchema, title, uiSchema, required, registry } = props;
+  if (!title) {
+    return null;
+  }
+  const options = getUiOptions<T, F>(
+    uiSchema as unknown as UiSchema<T, F, any>
+  );
+  const TitleFieldTemplate: TemplatesType<T, F>["TitleFieldTemplate"] =
+    getTemplate<"TitleFieldTemplate", T, F>(
+      "TitleFieldTemplate",
+      registry as unknown as Registry<T, F, any>,
+      options
+    );
+  const id = `${idSchema.$id}__title`;
+  return (
+    <TitleFieldTemplate
+      schema={schema as unknown as F}
+      id={id}
+      title={title}
+      required={required}
+      uiSchema={uiSchema as unknown as UiSchema<T, F, any>}
+      registry={registry as unknown as Registry<T, F, any>}
+    />
+  );
+}

package/src/templates/BaseInputTemplate.tsx

@@ -1,94 +1,94 @@
-import React, { useCallback } from "react";
-import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
-import { getInputProps } from "@rjsf/utils";
-
-/** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
- * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
- * It can be customized/overridden for other themes or individual implementations as needed.
- *
- * @param props - The `WidgetProps` for this template
- */
-export default function BaseInputTemplate<
-  T = any,
-  F extends GenericObjectType = any
->(props: WidgetProps<T, F>) {
-  const {
-    id,
-    value,
-    readonly,
-    disabled,
-    autofocus,
-    onBlur,
-    onFocus,
-    onChange,
-    options,
-    schema,
-    uiSchema,
-    formContext,
-    registry,
-    rawErrors,
-    type,
-    ...rest
-  } = props;
-
-  // Note: since React 15.2.0 we can't forward unknown element attributes, so we
-  // exclude the "options" and "schema" ones here.
-  if (!id) {
-    console.log("No id for", props);
-    throw new Error(`no id for props ${JSON.stringify(props)}`);
-  }
-  const inputProps = { ...rest, ...getInputProps<T, F>(schema, type, options) };
-
-  let inputValue;
-  if (inputProps.type === "number" || inputProps.type === "integer") {
-    inputValue = value || value === 0 ? value : "";
-  } else {
-    inputValue = value == null ? "" : value;
-  }
-
-  const _onChange = useCallback(
-    ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) =>
-      onChange(value === "" ? options.emptyValue : value),
-    [onChange, options]
-  );
-  const _onBlur = useCallback(
-    ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
-      onBlur(id, value),
-    [onBlur, id]
-  );
-  const _onFocus = useCallback(
-    ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
-      onFocus(id, value),
-    [onFocus, id]
-  );
-
-  return (
-    <>
-      <input
-        key={id}
-        id={id}
-        className="input input-bordered"
-        readOnly={readonly}
-        disabled={disabled}
-        autoFocus={autofocus}
-        value={inputValue}
-        {...inputProps}
-        list={schema.examples ? `examples_${id}` : undefined}
-        onChange={_onChange}
-        onBlur={_onBlur}
-        onFocus={_onFocus}
-      />
-      {Array.isArray(schema.examples) && (
-        <datalist key={`datalist_${id}`} id={`examples_${id}`}>
-          {[
-            ...new Set(
-              schema.examples.concat(schema.default ? [schema.default] : [])
-            ),
-          ].map((example: any) => (
-            <option key={example} value={example} />
-          ))}
-        </datalist>
-      )}
-    </>
-  );
-}
+import React, { useCallback } from "react";
+import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
+import { getInputProps } from "@rjsf/utils";
+
+/** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
+ * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
+ * It can be customized/overridden for other themes or individual implementations as needed.
+ *
+ * @param props - The `WidgetProps` for this template
+ */
+export default function BaseInputTemplate<
+  T = any,
+  F extends GenericObjectType = any
+>(props: WidgetProps<T, F>) {
+  const {
+    id,
+    value,
+    readonly,
+    disabled,
+    autofocus,
+    onBlur,
+    onFocus,
+    onChange,
+    options,
+    schema,
+    uiSchema,
+    formContext,
+    registry,
+    rawErrors,
+    type,
+    ...rest
+  } = props;
+
+  // Note: since React 15.2.0 we can't forward unknown element attributes, so we
+  // exclude the "options" and "schema" ones here.
+  if (!id) {
+    console.log("No id for", props);
+    throw new Error(`no id for props ${JSON.stringify(props)}`);
+  }
+  const inputProps = { ...rest, ...getInputProps<T, F>(schema, type, options) };
+
+  let inputValue;
+  if (inputProps.type === "number" || inputProps.type === "integer") {
+    inputValue = value || value === 0 ? value : "";
+  } else {
+    inputValue = value == null ? "" : value;
+  }
+
+  const _onChange = useCallback(
+    ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) =>
+      onChange(value === "" ? options.emptyValue : value),
+    [onChange, options]
+  );
+  const _onBlur = useCallback(
+    ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
+      onBlur(id, value),
+    [onBlur, id]
+  );
+  const _onFocus = useCallback(
+    ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
+      onFocus(id, value),
+    [onFocus, id]
+  );
+
+  return (
+    <>
+      <input
+        key={id}
+        id={id}
+        className="input input-bordered"
+        readOnly={readonly}
+        disabled={disabled}
+        autoFocus={autofocus}
+        value={inputValue}
+        {...inputProps}
+        list={schema.examples ? `examples_${id}` : undefined}
+        onChange={_onChange}
+        onBlur={_onBlur}
+        onFocus={_onFocus}
+      />
+      {Array.isArray(schema.examples) && (
+        <datalist key={`datalist_${id}`} id={`examples_${id}`}>
+          {[
+            ...new Set(
+              schema.examples.concat(schema.default ? [schema.default] : [])
+            ),
+          ].map((example: any) => (
+            <option key={example} value={example} />
+          ))}
+        </datalist>
+      )}
+    </>
+  );
+}

package/src/templates/ButtonTemplates/AddButton.tsx

@@ -1,29 +1,29 @@
-import React from "react";
-import { IconButtonProps } from "@rjsf/utils";
-
-import IconButton from "./IconButton";
-
-/** The `AddButton` renders a button that represent the `Add` action on a form
- */
-export default function AddButton({
-  registry,
-  className,
-  onClick,
-  disabled,
-}: IconButtonProps) {
-  return (
-    <div className="row">
-      <p className={`col-xs-3 col-xs-offset-9 text-right ${className}`}>
-        <IconButton
-          registry={registry}
-          iconType="info"
-          icon="plus"
-          className="btn-add col-xs-12"
-          title="Add"
-          onClick={onClick}
-          disabled={disabled}
-        />
-      </p>
-    </div>
-  );
-}
+import React from "react";
+import { IconButtonProps } from "@rjsf/utils";
+
+import IconButton from "./IconButton";
+
+/** The `AddButton` renders a button that represent the `Add` action on a form
+ */
+export default function AddButton({
+  registry,
+  className,
+  onClick,
+  disabled,
+}: IconButtonProps) {
+  return (
+    <div className="row">
+      <p className={`col-xs-3 col-xs-offset-9 text-right ${className}`}>
+        <IconButton
+          registry={registry}
+          iconType="info"
+          icon="plus"
+          className="btn-add col-xs-12"
+          title="Add"
+          onClick={onClick}
+          disabled={disabled}
+        />
+      </p>
+    </div>
+  );
+}

package/src/templates/ButtonTemplates/IconButton.tsx

@@ -1,49 +1,49 @@
-import React from "react";
-import { IconButtonProps } from "@rjsf/utils";
-
-export default function IconButton(props: IconButtonProps) {
-  const { iconType = "default", icon, className, ...otherProps } = props;
-  return (
-    <button
-      type="button"
-      className={`btn btn-${iconType} ${className}`}
-      {...otherProps}
-    >
-      <i className={`glyphicon glyphicon-${icon}`} />
-    </button>
-  );
-}
-
-export function MoveDownButton(props: IconButtonProps) {
-  return (
-    <IconButton
-      title="Move down"
-      className="array-item-move-down"
-      {...props}
-      icon="arrow-down"
-    />
-  );
-}
-
-export function MoveUpButton(props: IconButtonProps) {
-  return (
-    <IconButton
-      title="Move up"
-      className="array-item-move-up"
-      {...props}
-      icon="arrow-up"
-    />
-  );
-}
-
-export function RemoveButton(props: IconButtonProps) {
-  return (
-    <IconButton
-      title="Remove"
-      className="array-item-remove"
-      {...props}
-      iconType="danger"
-      icon="remove"
-    />
-  );
-}
+import React from "react";
+import { IconButtonProps } from "@rjsf/utils";
+
+export default function IconButton(props: IconButtonProps) {
+  const { iconType = "default", icon, className, ...otherProps } = props;
+  return (
+    <button
+      type="button"
+      className={`btn btn-${iconType} ${className}`}
+      {...otherProps}
+    >
+      <i className={`glyphicon glyphicon-${icon}`} />
+    </button>
+  );
+}
+
+export function MoveDownButton(props: IconButtonProps) {
+  return (
+    <IconButton
+      title="Move down"
+      className="array-item-move-down"
+      {...props}
+      icon="arrow-down"
+    />
+  );
+}
+
+export function MoveUpButton(props: IconButtonProps) {
+  return (
+    <IconButton
+      title="Move up"
+      className="array-item-move-up"
+      {...props}
+      icon="arrow-up"
+    />
+  );
+}
+
+export function RemoveButton(props: IconButtonProps) {
+  return (
+    <IconButton
+      title="Remove"
+      className="array-item-remove"
+      {...props}
+      iconType="danger"
+      icon="remove"
+    />
+  );
+}

package/src/templates/ButtonTemplates/SubmitButton.tsx

@@ -1,29 +1,29 @@
-import React from "react";
-import { SubmitButtonProps, GenericObjectType } from "@rjsf/utils";
-import { getSubmitButtonOptions } from "@rjsf/utils";
-
-/** The `SubmitButton` renders a button that represent the `Submit` action on a form
- */
-export default function SubmitButton<T, F extends GenericObjectType = any>({
-  uiSchema,
-}: SubmitButtonProps<T, F>) {
-  const {
-    submitText,
-    norender,
-    props: submitButtonProps = {},
-  } = getSubmitButtonOptions(uiSchema);
-  if (norender) {
-    return null;
-  }
-  return (
-    <div>
-      <button
-        type="submit"
-        {...submitButtonProps}
-        className={`btn btn-primary ${submitButtonProps.className}`}
-      >
-        {submitText}
-      </button>
-    </div>
-  );
-}
+import React from "react";
+import { SubmitButtonProps, GenericObjectType } from "@rjsf/utils";
+import { getSubmitButtonOptions } from "@rjsf/utils";
+
+/** The `SubmitButton` renders a button that represent the `Submit` action on a form
+ */
+export default function SubmitButton<T, F extends GenericObjectType = any>({
+  uiSchema,
+}: SubmitButtonProps<T, F>) {
+  const {
+    submitText,
+    norender,
+    props: submitButtonProps = {},
+  } = getSubmitButtonOptions(uiSchema);
+  if (norender) {
+    return null;
+  }
+  return (
+    <div>
+      <button
+        type="submit"
+        {...submitButtonProps}
+        className={`btn btn-primary ${submitButtonProps.className}`}
+      >
+        {submitText}
+      </button>
+    </div>
+  );
+}