@abgov/react-components 6.6.1 → 6.7.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.js +86 -0
- package/index.js.map +1 -1
- package/index.mjs +86 -0
- package/index.mjs.map +1 -1
- package/lib/use-public-form-controller.d.ts +2 -0
- package/package.json +1 -1
package/index.mjs
CHANGED
|
@@ -3884,6 +3884,19 @@ const GoabFilterChip = ({
|
|
|
3884
3884
|
}
|
|
3885
3885
|
);
|
|
3886
3886
|
};
|
|
3887
|
+
function dispatch(el, eventName, detail, opts) {
|
|
3888
|
+
if (!el) {
|
|
3889
|
+
console.error("dispatch element is null");
|
|
3890
|
+
return;
|
|
3891
|
+
}
|
|
3892
|
+
el.dispatchEvent(
|
|
3893
|
+
new CustomEvent(eventName, {
|
|
3894
|
+
composed: true,
|
|
3895
|
+
bubbles: opts == null ? void 0 : opts.bubbles,
|
|
3896
|
+
detail
|
|
3897
|
+
})
|
|
3898
|
+
);
|
|
3899
|
+
}
|
|
3887
3900
|
function relay(el, eventName, data, opts) {
|
|
3888
3901
|
if (!el) {
|
|
3889
3902
|
console.error("dispatch element is null");
|
|
@@ -3906,6 +3919,7 @@ class PublicFormController {
|
|
|
3906
3919
|
__publicField(this, "state");
|
|
3907
3920
|
__publicField(this, "_formData");
|
|
3908
3921
|
__publicField(this, "_formRef");
|
|
3922
|
+
__publicField(this, "_isCompleting", false);
|
|
3909
3923
|
this.type = type;
|
|
3910
3924
|
}
|
|
3911
3925
|
// Obtain reference to the form element
|
|
@@ -4089,6 +4103,70 @@ class PublicFormController {
|
|
|
4089
4103
|
operation: "remove"
|
|
4090
4104
|
});
|
|
4091
4105
|
}
|
|
4106
|
+
/**
|
|
4107
|
+
* Completes the form and triggers the onComplete callback.
|
|
4108
|
+
* This method should be used when you want to complete a form without navigating to a summary page.
|
|
4109
|
+
*
|
|
4110
|
+
* @important Developers must validate the form before calling this method.
|
|
4111
|
+
*
|
|
4112
|
+
* @example
|
|
4113
|
+
* // Validate first, then complete
|
|
4114
|
+
* const [isValid] = this.validate(e, "firstName", [
|
|
4115
|
+
* requiredValidator("First name is required.")
|
|
4116
|
+
* ]);
|
|
4117
|
+
* if (isValid) {
|
|
4118
|
+
* this.complete();
|
|
4119
|
+
* }
|
|
4120
|
+
* @returns void
|
|
4121
|
+
*/
|
|
4122
|
+
complete() {
|
|
4123
|
+
if (!this._formRef) {
|
|
4124
|
+
console.error("complete: form ref is not set");
|
|
4125
|
+
return;
|
|
4126
|
+
}
|
|
4127
|
+
if (this._isCompleting) {
|
|
4128
|
+
console.warn("complete: completion already in progress");
|
|
4129
|
+
return;
|
|
4130
|
+
}
|
|
4131
|
+
this._isCompleting = true;
|
|
4132
|
+
relay(this._formRef, "fieldset::submit", null, { bubbles: true });
|
|
4133
|
+
this._isCompleting = false;
|
|
4134
|
+
}
|
|
4135
|
+
/**
|
|
4136
|
+
* Completes a subform and returns control to the parent form.
|
|
4137
|
+
* This method should be used when working with subforms that need to complete without a summary page.
|
|
4138
|
+
*
|
|
4139
|
+
* @important Developers must validate the subform before calling this method.
|
|
4140
|
+
*
|
|
4141
|
+
* @example
|
|
4142
|
+
* // Validate first, then complete the subform
|
|
4143
|
+
* const [isValid] = this._childFormController.validate(e, "fullName", [
|
|
4144
|
+
* requiredValidator("Please enter the dependent's full name.")
|
|
4145
|
+
* ]);
|
|
4146
|
+
* if (isValid) {
|
|
4147
|
+
* this._childFormController.completeSubform();
|
|
4148
|
+
* }
|
|
4149
|
+
* @returns void
|
|
4150
|
+
*/
|
|
4151
|
+
completeSubform() {
|
|
4152
|
+
if (!this._formRef) {
|
|
4153
|
+
console.error("completeSubform: form ref is not set");
|
|
4154
|
+
return;
|
|
4155
|
+
}
|
|
4156
|
+
if (this._isCompleting) {
|
|
4157
|
+
console.warn("completeSubform: completion already in progress");
|
|
4158
|
+
return;
|
|
4159
|
+
}
|
|
4160
|
+
const formRef = this._formRef;
|
|
4161
|
+
this._isCompleting = true;
|
|
4162
|
+
const stateChangeHandler = (e) => {
|
|
4163
|
+
formRef.removeEventListener("_stateChange", stateChangeHandler);
|
|
4164
|
+
dispatch(formRef, "_complete", {}, { bubbles: true });
|
|
4165
|
+
this._isCompleting = false;
|
|
4166
|
+
};
|
|
4167
|
+
formRef.addEventListener("_stateChange", stateChangeHandler);
|
|
4168
|
+
dispatch(formRef, "_continue", null, { bubbles: true });
|
|
4169
|
+
}
|
|
4092
4170
|
// removes any data collected that doesn't correspond with the final history path
|
|
4093
4171
|
clean(data) {
|
|
4094
4172
|
return data.history.reduce((acc, fieldsetId) => {
|
|
@@ -4192,6 +4270,12 @@ function usePublicFormController(type = "details") {
|
|
|
4192
4270
|
const getStateList = useCallback(() => {
|
|
4193
4271
|
return controllerRef.current.getStateList();
|
|
4194
4272
|
}, []);
|
|
4273
|
+
const complete = useCallback(() => {
|
|
4274
|
+
controllerRef.current.complete();
|
|
4275
|
+
}, []);
|
|
4276
|
+
const completeSubform = useCallback(() => {
|
|
4277
|
+
controllerRef.current.completeSubform();
|
|
4278
|
+
}, []);
|
|
4195
4279
|
return {
|
|
4196
4280
|
state,
|
|
4197
4281
|
init,
|
|
@@ -4201,6 +4285,8 @@ function usePublicFormController(type = "details") {
|
|
|
4201
4285
|
validate,
|
|
4202
4286
|
getStateValue,
|
|
4203
4287
|
getStateList,
|
|
4288
|
+
complete,
|
|
4289
|
+
completeSubform,
|
|
4204
4290
|
controller: controllerRef.current
|
|
4205
4291
|
};
|
|
4206
4292
|
}
|