@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.js
CHANGED
|
@@ -3886,6 +3886,19 @@ const GoabFilterChip = ({
|
|
|
3886
3886
|
}
|
|
3887
3887
|
);
|
|
3888
3888
|
};
|
|
3889
|
+
function dispatch(el, eventName, detail, opts) {
|
|
3890
|
+
if (!el) {
|
|
3891
|
+
console.error("dispatch element is null");
|
|
3892
|
+
return;
|
|
3893
|
+
}
|
|
3894
|
+
el.dispatchEvent(
|
|
3895
|
+
new CustomEvent(eventName, {
|
|
3896
|
+
composed: true,
|
|
3897
|
+
bubbles: opts == null ? void 0 : opts.bubbles,
|
|
3898
|
+
detail
|
|
3899
|
+
})
|
|
3900
|
+
);
|
|
3901
|
+
}
|
|
3889
3902
|
function relay(el, eventName, data, opts) {
|
|
3890
3903
|
if (!el) {
|
|
3891
3904
|
console.error("dispatch element is null");
|
|
@@ -3908,6 +3921,7 @@ class PublicFormController {
|
|
|
3908
3921
|
__publicField(this, "state");
|
|
3909
3922
|
__publicField(this, "_formData");
|
|
3910
3923
|
__publicField(this, "_formRef");
|
|
3924
|
+
__publicField(this, "_isCompleting", false);
|
|
3911
3925
|
this.type = type;
|
|
3912
3926
|
}
|
|
3913
3927
|
// Obtain reference to the form element
|
|
@@ -4091,6 +4105,70 @@ class PublicFormController {
|
|
|
4091
4105
|
operation: "remove"
|
|
4092
4106
|
});
|
|
4093
4107
|
}
|
|
4108
|
+
/**
|
|
4109
|
+
* Completes the form and triggers the onComplete callback.
|
|
4110
|
+
* This method should be used when you want to complete a form without navigating to a summary page.
|
|
4111
|
+
*
|
|
4112
|
+
* @important Developers must validate the form before calling this method.
|
|
4113
|
+
*
|
|
4114
|
+
* @example
|
|
4115
|
+
* // Validate first, then complete
|
|
4116
|
+
* const [isValid] = this.validate(e, "firstName", [
|
|
4117
|
+
* requiredValidator("First name is required.")
|
|
4118
|
+
* ]);
|
|
4119
|
+
* if (isValid) {
|
|
4120
|
+
* this.complete();
|
|
4121
|
+
* }
|
|
4122
|
+
* @returns void
|
|
4123
|
+
*/
|
|
4124
|
+
complete() {
|
|
4125
|
+
if (!this._formRef) {
|
|
4126
|
+
console.error("complete: form ref is not set");
|
|
4127
|
+
return;
|
|
4128
|
+
}
|
|
4129
|
+
if (this._isCompleting) {
|
|
4130
|
+
console.warn("complete: completion already in progress");
|
|
4131
|
+
return;
|
|
4132
|
+
}
|
|
4133
|
+
this._isCompleting = true;
|
|
4134
|
+
relay(this._formRef, "fieldset::submit", null, { bubbles: true });
|
|
4135
|
+
this._isCompleting = false;
|
|
4136
|
+
}
|
|
4137
|
+
/**
|
|
4138
|
+
* Completes a subform and returns control to the parent form.
|
|
4139
|
+
* This method should be used when working with subforms that need to complete without a summary page.
|
|
4140
|
+
*
|
|
4141
|
+
* @important Developers must validate the subform before calling this method.
|
|
4142
|
+
*
|
|
4143
|
+
* @example
|
|
4144
|
+
* // Validate first, then complete the subform
|
|
4145
|
+
* const [isValid] = this._childFormController.validate(e, "fullName", [
|
|
4146
|
+
* requiredValidator("Please enter the dependent's full name.")
|
|
4147
|
+
* ]);
|
|
4148
|
+
* if (isValid) {
|
|
4149
|
+
* this._childFormController.completeSubform();
|
|
4150
|
+
* }
|
|
4151
|
+
* @returns void
|
|
4152
|
+
*/
|
|
4153
|
+
completeSubform() {
|
|
4154
|
+
if (!this._formRef) {
|
|
4155
|
+
console.error("completeSubform: form ref is not set");
|
|
4156
|
+
return;
|
|
4157
|
+
}
|
|
4158
|
+
if (this._isCompleting) {
|
|
4159
|
+
console.warn("completeSubform: completion already in progress");
|
|
4160
|
+
return;
|
|
4161
|
+
}
|
|
4162
|
+
const formRef = this._formRef;
|
|
4163
|
+
this._isCompleting = true;
|
|
4164
|
+
const stateChangeHandler = (e) => {
|
|
4165
|
+
formRef.removeEventListener("_stateChange", stateChangeHandler);
|
|
4166
|
+
dispatch(formRef, "_complete", {}, { bubbles: true });
|
|
4167
|
+
this._isCompleting = false;
|
|
4168
|
+
};
|
|
4169
|
+
formRef.addEventListener("_stateChange", stateChangeHandler);
|
|
4170
|
+
dispatch(formRef, "_continue", null, { bubbles: true });
|
|
4171
|
+
}
|
|
4094
4172
|
// removes any data collected that doesn't correspond with the final history path
|
|
4095
4173
|
clean(data) {
|
|
4096
4174
|
return data.history.reduce((acc, fieldsetId) => {
|
|
@@ -4194,6 +4272,12 @@ function usePublicFormController(type = "details") {
|
|
|
4194
4272
|
const getStateList = react.useCallback(() => {
|
|
4195
4273
|
return controllerRef.current.getStateList();
|
|
4196
4274
|
}, []);
|
|
4275
|
+
const complete = react.useCallback(() => {
|
|
4276
|
+
controllerRef.current.complete();
|
|
4277
|
+
}, []);
|
|
4278
|
+
const completeSubform = react.useCallback(() => {
|
|
4279
|
+
controllerRef.current.completeSubform();
|
|
4280
|
+
}, []);
|
|
4197
4281
|
return {
|
|
4198
4282
|
state,
|
|
4199
4283
|
init,
|
|
@@ -4203,6 +4287,8 @@ function usePublicFormController(type = "details") {
|
|
|
4203
4287
|
validate,
|
|
4204
4288
|
getStateValue,
|
|
4205
4289
|
getStateList,
|
|
4290
|
+
complete,
|
|
4291
|
+
completeSubform,
|
|
4206
4292
|
controller: controllerRef.current
|
|
4207
4293
|
};
|
|
4208
4294
|
}
|