@itwin/core-react 3.4.0-dev.59 → 3.4.0-dev.60

package/lib/esm/core-react/form/Form.d.ts

@@ -1,132 +1,132 @@
-/** @packageDocumentation
- * @module Form
- */
-import "./Form.scss";
-import * as React from "react";
-/** The available editors for the fields in a [[Form]].
- * @public @deprecated
- */
-export declare type FieldEditor = "textbox" | "multilinetextbox" | "dropdown" | "checkbox";
-/** Interface used to define each [[Field]] in a [[Form]]
- * @public @deprecated
- */
-export interface FieldDef {
-    label?: string;
-    editor?: FieldEditor;
-    options?: string[] | {
-        [key: string]: string;
-    };
-    value?: any;
-}
-/** Key/value pairs for all the field values with key being the field HTML Id.
- * @public @deprecated
- */
-export interface FieldValues {
-    [key: string]: any;
-}
-/** The state data used by [[Form]] to hold state of each [[Field]] and the result of submit button processing.
- * @public @deprecated
- */
-interface FormState {
-    values: FieldValues;
-    errorMsg: string;
-    submitSuccess?: boolean;
-}
-/**
- * FormContextState combines the Form's state data with the callbacks used to update the value of the state data.
- * @public @deprecate
- */
-export interface FormContextState extends FormState {
-    setValues: (values: FieldValues) => void;
-}
-/** React context used by Form as a Provider and by the Fields as Consumers and updaters.
- * @public @deprecated
- */
-export declare const FormContext: React.Context<FormContextState | undefined>;
-/** Key/value pairs for all the field definitions to be displayed in a [[Form]].
- * @public
- */
-export interface FieldDefinitions {
-    [key: string]: FieldDef;
-}
-/** Properties that define [[Form]] including the callback to be called when the Submit button is pressed.
- * @public
- */
-export interface FormProps {
-    /** Required async callback the processes the Form data and throws and Error if the data cannot be processed.  */
-    handleFormSubmit: (values: FieldValues) => Promise<void>;
-    /** Definition used to create each Field in the Form. */
-    fields: FieldDefinitions;
-    /** Optional label which will override default Submit button label. */
-    submitButtonLabel?: string;
-}
-/** Component used to create a Form using supplied properties to specify the fields of the Form.
- * @example
- * // Example of using a form as contents of a modal dialog.
- * export class ExampleForm extends React.Component {
- *   public static open() {
- *   const form = new ExampleForm({});
- *   ModalDialogManager.openDialog(form.render());
- * }
- *
- * protected async handleSubmit(values: FieldValues): Promise<void> {
- *   await this.processFormSubmission(values);
- *   ModalDialogManager.closeDialog();
- *   const msg = JSON.stringify(values);
- *   IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Info, "Form Submitted", msg));
- * }
- *
- * protected async processFormSubmission(values: FieldValues): Promise<void> {
- *   // if error occurs during async processing throw an Error and return error message back to form.
- *   throw new Error("Error processing form");
- * }
- *
- * protected handleCancel() {
- *   ModalDialogManager.closeDialog();
- * }
- *
- * public render() {
- *   const fields: FieldDefinitions = {
- *     Name: {
- *       label: this._nameLabel,
- *       editor: "textbox",
- *       value: "John Smith",
- *     },
- *     PickList: {
- *       label: this._pickListLabel,
- *       editor: "dropdown",
- *       value: "one",
- *       options: ["one", "two", "three", "four"],
- *     },
- *   };
- *
- *   return (
- *     <div>
- *       <Dialog title="Example Form"
- *         opened={true}
- *         onClose={() => this.handleCancel()}>
- *         <Form handleFormSubmit={(values: FieldValues) => this.handleSubmit(values)}
- *           fields={fields}
- *         />
- *       </Dialog>
- *     </div >
- *   );
- * }
- * @public @deprecate
- */
-export declare class Form extends React.Component<FormProps, FormState> {
-    private _submitButtonLabel;
-    private _errorPrefix;
-    private _errorSuffix;
-    constructor(props: FormProps);
-    /**
-     * Returns whether there is an errorMsg message in the state/context
-     * @param errorMsg - The form errorMsg
-     */
-    private haveError;
-    private _setValues;
-    private _handleSubmit;
-    render(): JSX.Element;
-}
-export {};
+/** @packageDocumentation
+ * @module Form
+ */
+import "./Form.scss";
+import * as React from "react";
+/** The available editors for the fields in a [[Form]].
+ * @public @deprecated
+ */
+export declare type FieldEditor = "textbox" | "multilinetextbox" | "dropdown" | "checkbox";
+/** Interface used to define each [[Field]] in a [[Form]]
+ * @public @deprecated
+ */
+export interface FieldDef {
+    label?: string;
+    editor?: FieldEditor;
+    options?: string[] | {
+        [key: string]: string;
+    };
+    value?: any;
+}
+/** Key/value pairs for all the field values with key being the field HTML Id.
+ * @public @deprecated
+ */
+export interface FieldValues {
+    [key: string]: any;
+}
+/** The state data used by [[Form]] to hold state of each [[Field]] and the result of submit button processing.
+ * @public @deprecated
+ */
+interface FormState {
+    values: FieldValues;
+    errorMsg: string;
+    submitSuccess?: boolean;
+}
+/**
+ * FormContextState combines the Form's state data with the callbacks used to update the value of the state data.
+ * @public @deprecate
+ */
+export interface FormContextState extends FormState {
+    setValues: (values: FieldValues) => void;
+}
+/** React context used by Form as a Provider and by the Fields as Consumers and updaters.
+ * @public @deprecated
+ */
+export declare const FormContext: React.Context<FormContextState | undefined>;
+/** Key/value pairs for all the field definitions to be displayed in a [[Form]].
+ * @public
+ */
+export interface FieldDefinitions {
+    [key: string]: FieldDef;
+}
+/** Properties that define [[Form]] including the callback to be called when the Submit button is pressed.
+ * @public
+ */
+export interface FormProps {
+    /** Required async callback the processes the Form data and throws and Error if the data cannot be processed.  */
+    handleFormSubmit: (values: FieldValues) => Promise<void>;
+    /** Definition used to create each Field in the Form. */
+    fields: FieldDefinitions;
+    /** Optional label which will override default Submit button label. */
+    submitButtonLabel?: string;
+}
+/** Component used to create a Form using supplied properties to specify the fields of the Form.
+ * @example
+ * // Example of using a form as contents of a modal dialog.
+ * export class ExampleForm extends React.Component {
+ *   public static open() {
+ *   const form = new ExampleForm({});
+ *   ModalDialogManager.openDialog(form.render());
+ * }
+ *
+ * protected async handleSubmit(values: FieldValues): Promise<void> {
+ *   await this.processFormSubmission(values);
+ *   ModalDialogManager.closeDialog();
+ *   const msg = JSON.stringify(values);
+ *   IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Info, "Form Submitted", msg));
+ * }
+ *
+ * protected async processFormSubmission(values: FieldValues): Promise<void> {
+ *   // if error occurs during async processing throw an Error and return error message back to form.
+ *   throw new Error("Error processing form");
+ * }
+ *
+ * protected handleCancel() {
+ *   ModalDialogManager.closeDialog();
+ * }
+ *
+ * public render() {
+ *   const fields: FieldDefinitions = {
+ *     Name: {
+ *       label: this._nameLabel,
+ *       editor: "textbox",
+ *       value: "John Smith",
+ *     },
+ *     PickList: {
+ *       label: this._pickListLabel,
+ *       editor: "dropdown",
+ *       value: "one",
+ *       options: ["one", "two", "three", "four"],
+ *     },
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <Dialog title="Example Form"
+ *         opened={true}
+ *         onClose={() => this.handleCancel()}>
+ *         <Form handleFormSubmit={(values: FieldValues) => this.handleSubmit(values)}
+ *           fields={fields}
+ *         />
+ *       </Dialog>
+ *     </div >
+ *   );
+ * }
+ * @public @deprecate
+ */
+export declare class Form extends React.Component<FormProps, FormState> {
+    private _submitButtonLabel;
+    private _errorPrefix;
+    private _errorSuffix;
+    constructor(props: FormProps);
+    /**
+     * Returns whether there is an errorMsg message in the state/context
+     * @param errorMsg - The form errorMsg
+     */
+    private haveError;
+    private _setValues;
+    private _handleSubmit;
+    render(): JSX.Element;
+}
+export {};
 //# sourceMappingURL=Form.d.ts.map

package/lib/esm/core-react/form/Form.js

@@ -1,128 +1,128 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/* eslint-disable deprecation/deprecation */
-/** @packageDocumentation
- * @module Form
- */
-import "./Form.scss";
-import * as React from "react";
-import { UiCore } from "../UiCore";
-import { Field } from "./Field";
-import { Button } from "@itwin/itwinui-react";
-/** React context used by Form as a Provider and by the Fields as Consumers and updaters.
- * @public @deprecated
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const FormContext = React.createContext(undefined);
-FormContext.displayName = "core-react:FormContext";
-/** Component used to create a Form using supplied properties to specify the fields of the Form.
- * @example
- * // Example of using a form as contents of a modal dialog.
- * export class ExampleForm extends React.Component {
- *   public static open() {
- *   const form = new ExampleForm({});
- *   ModalDialogManager.openDialog(form.render());
- * }
- *
- * protected async handleSubmit(values: FieldValues): Promise<void> {
- *   await this.processFormSubmission(values);
- *   ModalDialogManager.closeDialog();
- *   const msg = JSON.stringify(values);
- *   IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Info, "Form Submitted", msg));
- * }
- *
- * protected async processFormSubmission(values: FieldValues): Promise<void> {
- *   // if error occurs during async processing throw an Error and return error message back to form.
- *   throw new Error("Error processing form");
- * }
- *
- * protected handleCancel() {
- *   ModalDialogManager.closeDialog();
- * }
- *
- * public render() {
- *   const fields: FieldDefinitions = {
- *     Name: {
- *       label: this._nameLabel,
- *       editor: "textbox",
- *       value: "John Smith",
- *     },
- *     PickList: {
- *       label: this._pickListLabel,
- *       editor: "dropdown",
- *       value: "one",
- *       options: ["one", "two", "three", "four"],
- *     },
- *   };
- *
- *   return (
- *     <div>
- *       <Dialog title="Example Form"
- *         opened={true}
- *         onClose={() => this.handleCancel()}>
- *         <Form handleFormSubmit={(values: FieldValues) => this.handleSubmit(values)}
- *           fields={fields}
- *         />
- *       </Dialog>
- *     </div >
- *   );
- * }
- * @public @deprecate
- */
-export class Form extends React.Component {
-    constructor(props) {
-        super(props);
-        this._submitButtonLabel = UiCore.translate("form.submitButtonLabel");
-        this._errorPrefix = UiCore.translate("form.errorPrefix");
-        this._errorSuffix = UiCore.translate("form.errorSuffix");
-        this._setValues = (values) => {
-            this.setState((prevState) => ({ values: { ...prevState.values, ...values } }));
-        };
-        this._handleSubmit = (event, values) => {
-            event.preventDefault();
-            // istanbul ignore next
-            if (!this.props.handleFormSubmit || !values || 0 === values.length)
-                throw new Error("A handleFormSubmit function and values must be defined");
-            this.props.handleFormSubmit(values)
-                .then(() => {
-                // Currently we don't need to do anything if successful. Typically the hosting dialog will close when the
-                // submission is successful.
-                // console.log(rtnMsg);
-            })
-                .catch((reason) => {
-                this.setState({ submitSuccess: false, errorMsg: reason.message });
-            });
-        };
-        // set initial values for field values
-        const values = {};
-        Object.keys(props.fields).forEach((key) => values[key] = props.fields[key].value);
-        this.state = {
-            errorMsg: "",
-            values,
-        };
-    }
-    /**
-     * Returns whether there is an errorMsg message in the state/context
-     * @param errorMsg - The form errorMsg
-     */
-    haveError(errorMsg) {
-        return errorMsg && errorMsg.length;
-    }
-    render() {
-        const { submitSuccess, errorMsg } = this.state;
-        const { fields, submitButtonLabel } = this.props;
-        const context = { ...this.state, setValues: this._setValues };
-        return (React.createElement(FormContext.Provider, { value: context },
-            React.createElement("div", { className: "core-form-wrapper" },
-                React.createElement("form", { onSubmit: (event) => this._handleSubmit(event, this.state.values), noValidate: true },
-                    React.createElement("div", { className: "core-form-container" },
-                        Object.keys(fields).map((key) => React.createElement(Field, { key: key, id: key, ...this.props.fields[key] })),
-                        React.createElement("div", { className: "core-form-footer" },
-                            React.createElement("div", { className: "core-form-buttons" },
-                                React.createElement(Button, { type: "submit", styleType: "high-visibility" }, submitButtonLabel ? submitButtonLabel : this._submitButtonLabel)),
-                            submitSuccess === false && this.haveError(errorMsg) && (React.createElement("div", { className: "core-form-alert", role: "alert" }, `${this._errorPrefix}-${errorMsg} ${this._errorSuffix}`))))))));
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/* eslint-disable deprecation/deprecation */
+/** @packageDocumentation
+ * @module Form
+ */
+import "./Form.scss";
+import * as React from "react";
+import { UiCore } from "../UiCore";
+import { Field } from "./Field";
+import { Button } from "@itwin/itwinui-react";
+/** React context used by Form as a Provider and by the Fields as Consumers and updaters.
+ * @public @deprecated
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const FormContext = React.createContext(undefined);
+FormContext.displayName = "core-react:FormContext";
+/** Component used to create a Form using supplied properties to specify the fields of the Form.
+ * @example
+ * // Example of using a form as contents of a modal dialog.
+ * export class ExampleForm extends React.Component {
+ *   public static open() {
+ *   const form = new ExampleForm({});
+ *   ModalDialogManager.openDialog(form.render());
+ * }
+ *
+ * protected async handleSubmit(values: FieldValues): Promise<void> {
+ *   await this.processFormSubmission(values);
+ *   ModalDialogManager.closeDialog();
+ *   const msg = JSON.stringify(values);
+ *   IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Info, "Form Submitted", msg));
+ * }
+ *
+ * protected async processFormSubmission(values: FieldValues): Promise<void> {
+ *   // if error occurs during async processing throw an Error and return error message back to form.
+ *   throw new Error("Error processing form");
+ * }
+ *
+ * protected handleCancel() {
+ *   ModalDialogManager.closeDialog();
+ * }
+ *
+ * public render() {
+ *   const fields: FieldDefinitions = {
+ *     Name: {
+ *       label: this._nameLabel,
+ *       editor: "textbox",
+ *       value: "John Smith",
+ *     },
+ *     PickList: {
+ *       label: this._pickListLabel,
+ *       editor: "dropdown",
+ *       value: "one",
+ *       options: ["one", "two", "three", "four"],
+ *     },
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <Dialog title="Example Form"
+ *         opened={true}
+ *         onClose={() => this.handleCancel()}>
+ *         <Form handleFormSubmit={(values: FieldValues) => this.handleSubmit(values)}
+ *           fields={fields}
+ *         />
+ *       </Dialog>
+ *     </div >
+ *   );
+ * }
+ * @public @deprecate
+ */
+export class Form extends React.Component {
+    constructor(props) {
+        super(props);
+        this._submitButtonLabel = UiCore.translate("form.submitButtonLabel");
+        this._errorPrefix = UiCore.translate("form.errorPrefix");
+        this._errorSuffix = UiCore.translate("form.errorSuffix");
+        this._setValues = (values) => {
+            this.setState((prevState) => ({ values: { ...prevState.values, ...values } }));
+        };
+        this._handleSubmit = (event, values) => {
+            event.preventDefault();
+            // istanbul ignore next
+            if (!this.props.handleFormSubmit || !values || 0 === values.length)
+                throw new Error("A handleFormSubmit function and values must be defined");
+            this.props.handleFormSubmit(values)
+                .then(() => {
+                // Currently we don't need to do anything if successful. Typically the hosting dialog will close when the
+                // submission is successful.
+                // console.log(rtnMsg);
+            })
+                .catch((reason) => {
+                this.setState({ submitSuccess: false, errorMsg: reason.message });
+            });
+        };
+        // set initial values for field values
+        const values = {};
+        Object.keys(props.fields).forEach((key) => values[key] = props.fields[key].value);
+        this.state = {
+            errorMsg: "",
+            values,
+        };
+    }
+    /**
+     * Returns whether there is an errorMsg message in the state/context
+     * @param errorMsg - The form errorMsg
+     */
+    haveError(errorMsg) {
+        return errorMsg && errorMsg.length;
+    }
+    render() {
+        const { submitSuccess, errorMsg } = this.state;
+        const { fields, submitButtonLabel } = this.props;
+        const context = { ...this.state, setValues: this._setValues };
+        return (React.createElement(FormContext.Provider, { value: context },
+            React.createElement("div", { className: "core-form-wrapper" },
+                React.createElement("form", { onSubmit: (event) => this._handleSubmit(event, this.state.values), noValidate: true },
+                    React.createElement("div", { className: "core-form-container" },
+                        Object.keys(fields).map((key) => React.createElement(Field, { key: key, id: key, ...this.props.fields[key] })),
+                        React.createElement("div", { className: "core-form-footer" },
+                            React.createElement("div", { className: "core-form-buttons" },
+                                React.createElement(Button, { type: "submit", styleType: "high-visibility" }, submitButtonLabel ? submitButtonLabel : this._submitButtonLabel)),
+                            submitSuccess === false && this.haveError(errorMsg) && (React.createElement("div", { className: "core-form-alert", role: "alert" }, `${this._errorPrefix}-${errorMsg} ${this._errorSuffix}`))))))));
+    }
+}
 //# sourceMappingURL=Form.js.map

package/lib/esm/core-react/form/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../../src/core-react/form/Form.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/* eslint-disable deprecation/deprecation */\n/** @packageDocumentation\n * @module Form\n */\n\nimport \"./Form.scss\";\nimport * as React from \"react\";\nimport { UiCore } from \"../UiCore\";\nimport { Field } from \"./Field\";\nimport { Button } from \"@itwin/itwinui-react\";\n\n// cSpell:ignore multilinetextbox\n\n/** The available editors for the fields in a [[Form]].\n * @public @deprecated\n */\nexport type FieldEditor = \"textbox\" | \"multilinetextbox\" | \"dropdown\" | \"checkbox\";\n\n/** Interface used to define each [[Field]] in a [[Form]]\n * @public @deprecated\n */\nexport interface FieldDef {\n  /* The label text for the field */\n  label?: string;\n\n  /* The editor for the field */\n  editor?: FieldEditor;\n\n  /* The drop down items for the field */\n  options?: string[] | { [key: string]: string };\n\n  /* The initial field value */\n  value?: any;\n}\n\n/** Key/value pairs for all the field values with key being the field HTML Id.\n * @public @deprecated\n */\nexport interface FieldValues {\n  [key: string]: any;\n}\n\n/** The state data used by [[Form]] to hold state of each [[Field]] and the result of submit button processing.\n * @public @deprecated\n */\ninterface FormState {\n  /* The field values */\n  values: FieldValues;\n\n  /* The errorMsg message return in catch of async submit button processing */\n  errorMsg: string;\n\n  /* Whether the form has been successfully submitted */\n  submitSuccess?: boolean;\n}\n\n/**\n * FormContextState combines the Form's state data with the callbacks used to update the value of the state data.\n * @public @deprecate\n */\nexport interface FormContextState extends FormState {\n  setValues: (values: FieldValues) => void;\n}\n\n/** React context used by Form as a Provider and by the Fields as Consumers and updaters.\n * @public @deprecated\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const FormContext = React.createContext<FormContextState | undefined>(undefined);\nFormContext.displayName = \"core-react:FormContext\";\n\n/** Key/value pairs for all the field definitions to be displayed in a [[Form]].\n * @public\n */\nexport interface FieldDefinitions {\n  [key: string]: FieldDef;\n}\n\n/** Properties that define [[Form]] including the callback to be called when the Submit button is pressed.\n * @public\n */\nexport interface FormProps {\n  /** Required async callback the processes the Form data and throws and Error if the data cannot be processed.  */\n  handleFormSubmit: (values: FieldValues) => Promise<void>;\n  /** Definition used to create each Field in the Form. */\n  fields: FieldDefinitions;\n  /** Optional label which will override default Submit button label. */\n  submitButtonLabel?: string;\n}\n\n/** Component used to create a Form using supplied properties to specify the fields of the Form.\n * @example\n * // Example of using a form as contents of a modal dialog.\n * export class ExampleForm extends React.Component {\n *   public static open() {\n *   const form = new ExampleForm({});\n *   ModalDialogManager.openDialog(form.render());\n * }\n *\n * protected async handleSubmit(values: FieldValues): Promise<void> {\n *   await this.processFormSubmission(values);\n *   ModalDialogManager.closeDialog();\n *   const msg = JSON.stringify(values);\n *   IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Info, \"Form Submitted\", msg));\n * }\n *\n * protected async processFormSubmission(values: FieldValues): Promise<void> {\n *   // if error occurs during async processing throw an Error and return error message back to form.\n *   throw new Error(\"Error processing form\");\n * }\n *\n * protected handleCancel() {\n *   ModalDialogManager.closeDialog();\n * }\n *\n * public render() {\n *   const fields: FieldDefinitions = {\n *     Name: {\n *       label: this._nameLabel,\n *       editor: \"textbox\",\n *       value: \"John Smith\",\n *     },\n *     PickList: {\n *       label: this._pickListLabel,\n *       editor: \"dropdown\",\n *       value: \"one\",\n *       options: [\"one\", \"two\", \"three\", \"four\"],\n *     },\n *   };\n *\n *   return (\n *     <div>\n *       <Dialog title=\"Example Form\"\n *         opened={true}\n *         onClose={() => this.handleCancel()}>\n *         <Form handleFormSubmit={(values: FieldValues) => this.handleSubmit(values)}\n *           fields={fields}\n *         />\n *       </Dialog>\n *     </div >\n *   );\n * }\n * @public @deprecate\n */\nexport class Form extends React.Component<FormProps, FormState> {\n  private _submitButtonLabel = UiCore.translate(\"form.submitButtonLabel\");\n  private _errorPrefix = UiCore.translate(\"form.errorPrefix\");\n  private _errorSuffix = UiCore.translate(\"form.errorSuffix\");\n\n  constructor(props: FormProps) {\n    super(props);\n\n    // set initial values for field values\n    const values: FieldValues = {};\n    Object.keys(props.fields).forEach((key) => values[key] = props.fields[key].value);\n\n    this.state = {\n      errorMsg: \"\",\n      values,\n    };\n  }\n\n  /**\n   * Returns whether there is an errorMsg message in the state/context\n   * @param errorMsg - The form errorMsg\n   */\n  private haveError(errorMsg: string) {\n    return errorMsg && errorMsg.length;\n  }\n\n  private _setValues = (values: FieldValues) => {\n    this.setState((prevState) => ({ values: { ...prevState.values, ...values } }));\n  };\n\n  private _handleSubmit = (event: React.FormEvent<HTMLFormElement>, values: FieldValues) => {\n    event.preventDefault();\n\n    // istanbul ignore next\n    if (!this.props.handleFormSubmit || !values || 0 === values.length)\n      throw new Error(\"A handleFormSubmit function and values must be defined\");\n\n    this.props.handleFormSubmit(values)\n      .then(() => {\n        // Currently we don't need to do anything if successful. Typically the hosting dialog will close when the\n        // submission is successful.\n        // console.log(rtnMsg);\n      })\n      .catch((reason: Error) => {\n        this.setState({ submitSuccess: false, errorMsg: reason.message });\n      });\n  };\n\n  public override render() {\n    const { submitSuccess, errorMsg } = this.state;\n    const { fields, submitButtonLabel } = this.props;\n    const context: FormContextState = { ...this.state, setValues: this._setValues };\n\n    return (\n      <FormContext.Provider value={context}>\n        <div className=\"core-form-wrapper\">\n          <form onSubmit={(event: React.FormEvent<HTMLFormElement>) => this._handleSubmit(event, this.state.values)} noValidate={true}>\n            <div className=\"core-form-container\">\n              {Object.keys(fields).map((key) => <Field key={key} id={key} {...this.props.fields[key]} />)}\n              <div className=\"core-form-footer\">\n                <div className=\"core-form-buttons\">\n                  <Button type=\"submit\" styleType=\"high-visibility\">\n                    {submitButtonLabel ? submitButtonLabel : this._submitButtonLabel}\n                  </Button>\n                </div>\n                {submitSuccess === false && this.haveError(errorMsg) && (\n                  <div className=\"core-form-alert\" role=\"alert\">{`${this._errorPrefix}-${errorMsg} ${this._errorSuffix}`}</div>\n                )}\n              </div>\n            </div>\n          </form>\n        </div>\n      </FormContext.Provider>\n    );\n  }\n}\n"]}
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../../src/core-react/form/Form.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module Form\r\n */\r\n\r\nimport \"./Form.scss\";\r\nimport * as React from \"react\";\r\nimport { UiCore } from \"../UiCore\";\r\nimport { Field } from \"./Field\";\r\nimport { Button } from \"@itwin/itwinui-react\";\r\n\r\n// cSpell:ignore multilinetextbox\r\n\r\n/** The available editors for the fields in a [[Form]].\r\n * @public @deprecated\r\n */\r\nexport type FieldEditor = \"textbox\" | \"multilinetextbox\" | \"dropdown\" | \"checkbox\";\r\n\r\n/** Interface used to define each [[Field]] in a [[Form]]\r\n * @public @deprecated\r\n */\r\nexport interface FieldDef {\r\n  /* The label text for the field */\r\n  label?: string;\r\n\r\n  /* The editor for the field */\r\n  editor?: FieldEditor;\r\n\r\n  /* The drop down items for the field */\r\n  options?: string[] | { [key: string]: string };\r\n\r\n  /* The initial field value */\r\n  value?: any;\r\n}\r\n\r\n/** Key/value pairs for all the field values with key being the field HTML Id.\r\n * @public @deprecated\r\n */\r\nexport interface FieldValues {\r\n  [key: string]: any;\r\n}\r\n\r\n/** The state data used by [[Form]] to hold state of each [[Field]] and the result of submit button processing.\r\n * @public @deprecated\r\n */\r\ninterface FormState {\r\n  /* The field values */\r\n  values: FieldValues;\r\n\r\n  /* The errorMsg message return in catch of async submit button processing */\r\n  errorMsg: string;\r\n\r\n  /* Whether the form has been successfully submitted */\r\n  submitSuccess?: boolean;\r\n}\r\n\r\n/**\r\n * FormContextState combines the Form's state data with the callbacks used to update the value of the state data.\r\n * @public @deprecate\r\n */\r\nexport interface FormContextState extends FormState {\r\n  setValues: (values: FieldValues) => void;\r\n}\r\n\r\n/** React context used by Form as a Provider and by the Fields as Consumers and updaters.\r\n * @public @deprecated\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const FormContext = React.createContext<FormContextState | undefined>(undefined);\r\nFormContext.displayName = \"core-react:FormContext\";\r\n\r\n/** Key/value pairs for all the field definitions to be displayed in a [[Form]].\r\n * @public\r\n */\r\nexport interface FieldDefinitions {\r\n  [key: string]: FieldDef;\r\n}\r\n\r\n/** Properties that define [[Form]] including the callback to be called when the Submit button is pressed.\r\n * @public\r\n */\r\nexport interface FormProps {\r\n  /** Required async callback the processes the Form data and throws and Error if the data cannot be processed.  */\r\n  handleFormSubmit: (values: FieldValues) => Promise<void>;\r\n  /** Definition used to create each Field in the Form. */\r\n  fields: FieldDefinitions;\r\n  /** Optional label which will override default Submit button label. */\r\n  submitButtonLabel?: string;\r\n}\r\n\r\n/** Component used to create a Form using supplied properties to specify the fields of the Form.\r\n * @example\r\n * // Example of using a form as contents of a modal dialog.\r\n * export class ExampleForm extends React.Component {\r\n *   public static open() {\r\n *   const form = new ExampleForm({});\r\n *   ModalDialogManager.openDialog(form.render());\r\n * }\r\n *\r\n * protected async handleSubmit(values: FieldValues): Promise<void> {\r\n *   await this.processFormSubmission(values);\r\n *   ModalDialogManager.closeDialog();\r\n *   const msg = JSON.stringify(values);\r\n *   IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Info, \"Form Submitted\", msg));\r\n * }\r\n *\r\n * protected async processFormSubmission(values: FieldValues): Promise<void> {\r\n *   // if error occurs during async processing throw an Error and return error message back to form.\r\n *   throw new Error(\"Error processing form\");\r\n * }\r\n *\r\n * protected handleCancel() {\r\n *   ModalDialogManager.closeDialog();\r\n * }\r\n *\r\n * public render() {\r\n *   const fields: FieldDefinitions = {\r\n *     Name: {\r\n *       label: this._nameLabel,\r\n *       editor: \"textbox\",\r\n *       value: \"John Smith\",\r\n *     },\r\n *     PickList: {\r\n *       label: this._pickListLabel,\r\n *       editor: \"dropdown\",\r\n *       value: \"one\",\r\n *       options: [\"one\", \"two\", \"three\", \"four\"],\r\n *     },\r\n *   };\r\n *\r\n *   return (\r\n *     <div>\r\n *       <Dialog title=\"Example Form\"\r\n *         opened={true}\r\n *         onClose={() => this.handleCancel()}>\r\n *         <Form handleFormSubmit={(values: FieldValues) => this.handleSubmit(values)}\r\n *           fields={fields}\r\n *         />\r\n *       </Dialog>\r\n *     </div >\r\n *   );\r\n * }\r\n * @public @deprecate\r\n */\r\nexport class Form extends React.Component<FormProps, FormState> {\r\n  private _submitButtonLabel = UiCore.translate(\"form.submitButtonLabel\");\r\n  private _errorPrefix = UiCore.translate(\"form.errorPrefix\");\r\n  private _errorSuffix = UiCore.translate(\"form.errorSuffix\");\r\n\r\n  constructor(props: FormProps) {\r\n    super(props);\r\n\r\n    // set initial values for field values\r\n    const values: FieldValues = {};\r\n    Object.keys(props.fields).forEach((key) => values[key] = props.fields[key].value);\r\n\r\n    this.state = {\r\n      errorMsg: \"\",\r\n      values,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Returns whether there is an errorMsg message in the state/context\r\n   * @param errorMsg - The form errorMsg\r\n   */\r\n  private haveError(errorMsg: string) {\r\n    return errorMsg && errorMsg.length;\r\n  }\r\n\r\n  private _setValues = (values: FieldValues) => {\r\n    this.setState((prevState) => ({ values: { ...prevState.values, ...values } }));\r\n  };\r\n\r\n  private _handleSubmit = (event: React.FormEvent<HTMLFormElement>, values: FieldValues) => {\r\n    event.preventDefault();\r\n\r\n    // istanbul ignore next\r\n    if (!this.props.handleFormSubmit || !values || 0 === values.length)\r\n      throw new Error(\"A handleFormSubmit function and values must be defined\");\r\n\r\n    this.props.handleFormSubmit(values)\r\n      .then(() => {\r\n        // Currently we don't need to do anything if successful. Typically the hosting dialog will close when the\r\n        // submission is successful.\r\n        // console.log(rtnMsg);\r\n      })\r\n      .catch((reason: Error) => {\r\n        this.setState({ submitSuccess: false, errorMsg: reason.message });\r\n      });\r\n  };\r\n\r\n  public override render() {\r\n    const { submitSuccess, errorMsg } = this.state;\r\n    const { fields, submitButtonLabel } = this.props;\r\n    const context: FormContextState = { ...this.state, setValues: this._setValues };\r\n\r\n    return (\r\n      <FormContext.Provider value={context}>\r\n        <div className=\"core-form-wrapper\">\r\n          <form onSubmit={(event: React.FormEvent<HTMLFormElement>) => this._handleSubmit(event, this.state.values)} noValidate={true}>\r\n            <div className=\"core-form-container\">\r\n              {Object.keys(fields).map((key) => <Field key={key} id={key} {...this.props.fields[key]} />)}\r\n              <div className=\"core-form-footer\">\r\n                <div className=\"core-form-buttons\">\r\n                  <Button type=\"submit\" styleType=\"high-visibility\">\r\n                    {submitButtonLabel ? submitButtonLabel : this._submitButtonLabel}\r\n                  </Button>\r\n                </div>\r\n                {submitSuccess === false && this.haveError(errorMsg) && (\r\n                  <div className=\"core-form-alert\" role=\"alert\">{`${this._errorPrefix}-${errorMsg} ${this._errorSuffix}`}</div>\r\n                )}\r\n              </div>\r\n            </div>\r\n          </form>\r\n        </div>\r\n      </FormContext.Provider>\r\n    );\r\n  }\r\n}\r\n"]}