@zengenti/contensis-react-base 3.0.2-beta.15 → 3.0.2-beta.17

package/cjs/forms.js

@@ -319,7 +319,7 @@ const makeSelectFormValidationSent = formId => reselect.createSelector(selectFor
   var _forms$formId16;
   return forms === null || forms === void 0 ? void 0 : (_forms$formId16 = forms[formId]) === null || _forms$formId16 === void 0 ? void 0 : _forms$formId16.status.validation.sent;
 });
-const makeSelectFormGroup$1 = formId => reselect.createSelector(selectForms, forms => {
+const makeSelectFormGroup = formId => reselect.createSelector(selectForms, forms => {
   var _forms$formId17;
   return forms === null || forms === void 0 ? void 0 : (_forms$formId17 = forms[formId]) === null || _forms$formId17 === void 0 ? void 0 : _forms$formId17.groups;
 });
@@ -339,7 +339,7 @@ const selectors = {
   makeSelectDefaultLang,
   makeSelectFormSuccessMessage,
   makeSelectFormValidationSent,
-  makeSelectFormGroup: makeSelectFormGroup$1,
+  makeSelectFormGroup,
   makeSelectHasError
 };
 
@@ -563,7 +563,9 @@ const getFieldType = field => {
   }
 };
 
-const sagas = [effects.takeEvery(SUBMIT_FORM_SUCCESS, onFormSuccess), effects.takeEvery(SUBMIT_FORM_FOR_VALIDATION, doValidateForm), effects.takeEvery(SUBMIT_FORM, onSubmitForm), effects.takeEvery(SET_FORM_ID, doFetchForm), effects.takeLatest(VALIDATE_FIELD, onValidateField$1), effects.takeEvery(PAGE_FORWARD, doTogglePage), effects.takeEvery(PAGE_BACK, doTogglePage), effects.takeEvery(SET_FORM_DATA, getEntryPickerData), effects.takeLatest(SET_FORM_DATA, setDefaultValueFields)];
+const sagas = [effects.takeEvery(SUBMIT_FORM_SUCCESS, onFormSuccess), effects.takeEvery(SUBMIT_FORM_FOR_VALIDATION, doValidateForm), effects.takeEvery(SUBMIT_FORM, onSubmitForm), effects.takeEvery(SET_FORM_ID, doFetchForm),
+// takeLatest(VALIDATE_FIELD, onValidateField),
+effects.takeEvery(PAGE_FORWARD, doTogglePage), effects.takeEvery(PAGE_BACK, doTogglePage), effects.takeEvery(SET_FORM_DATA, getEntryPickerData), effects.takeLatest(SET_FORM_DATA, setDefaultValueFields)];
 function* doValidateForm(action) {
   const {
     formId
@@ -574,35 +576,31 @@ function* doValidateForm(action) {
     formId
   });
 }
-function* onValidateField$1(action) {
-  const {
-    formId,
-    id,
-    value
-  } = action;
-  if ((value === null || value === void 0 ? void 0 : value.length) >= 1) yield effects.call(onValidateSingleField, formId, id, value);
-}
-function* validateGroupfields(formId, groupId) {
+// function* onValidateField(action) {
+//   const { formId, id, value } = action;
+//   if (value?.length >= 1) yield call(onValidateSingleField, formId, id, value);
+// }
+
+function* onValidateGroupFields(formId, groupId) {
   const state = yield effects.select();
   const selectPostData = makeSelectFormPostData(formId);
   const postData = selectPostData(state);
   const selectFormFields = makeSelectFormFields(formId);
   const fields = selectFormFields(state);
-  const groupFields = fields.filter(f => f.groupid == groupId);
-  let newErrors = [];
+  const groupFields = fields.filter(f => f.groupId == groupId);
+  let errors = [];
   groupFields.forEach(field => {
-    let val = '';
-    if (postData[field.id]) {
-      val = postData[field.id];
-    }
-    const err = doValidateField(field, val);
-    if (err) newErrors.push(err);
+    let value = '';
+    if (postData[field.id]) value = postData[field.id];
+    const error = doValidateField(field, value);
+    if (error) errors.push(error);
   });
   yield effects.put({
     type: SET_FIELD_ERROR,
     formId: formId,
-    value: newErrors
+    value: errors
   });
+  return errors;
 }
 function* onValidateAllFields(formId) {
   const state = yield effects.select();
@@ -610,42 +608,17 @@ function* onValidateAllFields(formId) {
   const postData = selectPostData(state);
   const selectFormFields = makeSelectFormFields(formId);
   const fields = selectFormFields(state);
-  let newErrors = [];
+  const errors = [];
   fields.forEach(field => {
-    let val = '';
-    if (postData[field.id]) {
-      val = postData[field.id];
-    }
-    const err = doValidateField(field, val);
-    if (err) newErrors.push(err);
+    let value = '';
+    if (postData[field.id]) value = postData[field.id];
+    const error = doValidateField(field, value);
+    if (error) errors.push(error);
   });
   yield effects.put({
     type: SET_FIELD_ERROR,
     formId: formId,
-    value: newErrors
-  });
-}
-function* onValidateSingleField(formId, fieldId, value) {
-  const state = yield effects.select();
-  const selectFormFields = makeSelectFormFields(formId);
-  const fields = selectFormFields(state);
-  const selectFormFieldErrors = makeSelectFormFieldErrors(formId);
-  const errors = selectFormFieldErrors(state);
-  const fieldData = fields.find(f => f.id == fieldId);
-  const newErrors = [];
-  //loop through current errors to remove any of the item we currently edit
-  errors.forEach(error => {
-    if (error.fieldId !== fieldId) {
-      //push any existing errors to new array
-      newErrors.push(error);
-    }
-  });
-  const err = doValidateField(fieldData, value);
-  if (err) newErrors.push(err);
-  yield effects.put({
-    type: SET_FIELD_ERROR,
-    formId: formId,
-    value: newErrors
+    value: errors
   });
 }
 function* doTogglePage(action) {
@@ -657,15 +630,25 @@ function* doTogglePage(action) {
   const selectFormGroups = makeSelectFormGroup(formId);
   const formGroups = selectFormGroups(state);
   if (action.type === PAGE_FORWARD) {
-    yield validateGroupfields(formId, formGroups[pageIndex].id);
+    const errors = yield onValidateGroupFields(formId, formGroups[pageIndex - 1].id);
+    if (errors && errors.length <= 0) {
+      yield effects.put({
+        type: SET_CURRENT_PAGE,
+        formId: formId,
+        pageId: formGroups[pageIndex].id,
+        pageCount: formGroups.length,
+        pageIndex: pageIndex
+      });
+    }
+  } else if (action.type === PAGE_BACK) {
+    yield effects.put({
+      type: SET_CURRENT_PAGE,
+      formId: formId,
+      pageId: formGroups[pageIndex].id,
+      pageCount: formGroups.length,
+      pageIndex: pageIndex
+    });
   }
-  yield effects.put({
-    type: SET_CURRENT_PAGE,
-    formId: formId,
-    pageId: formGroups[pageIndex].id,
-    pageCount: formGroups.length,
-    pageIndex: pageIndex
-  });
 }
 function* doFetchForm(action) {
   var _schema$groups;
@@ -917,7 +900,7 @@ const FormStyled = styled__default["default"].form.withConfig({
   theme,
   useDefaultTheme
 }) => {
-  return styled.css(["", ""], useDefaultTheme && styled.css(["> div:not(:first-child){margin-top:16px;}padding:0 16px;.success-message{font-size:18px;margin:0;}.visuallyHidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}.loading{display:block;margin:24px auto;}label{display:inline-block;.isRequired{color:", ";}}input,textarea,select{display:block;font-family:inherit;background-color:", ";border-radius:3px;border:1px solid ", ";height:40px;padding:8px;margin-top:4px;width:100%;}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px ", " inset;}textarea{height:200px;resize:none;}[aria-invalid='false']{background:", ";border:1px solid ", ";&:-webkit-autofill,&:-webkit-autofill:hover,&:-webkit-autofill:focus,&:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px", " inset;}}[aria-invalid='true']{background:", ";border:1px solid ", ";&:-webkit-autofill,&:-webkit-autofill:hover,&:-webkit-autofill:focus,&:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px", " inset;}}input ~ .svg{position:absolute;right:8px;top:50%;transform:translateY(-50%);}textarea ~ .svg{position:absolute;right:8px;top:8px;}"], theme.colors.red_darker, theme.colors.white, theme.colors.light_grey_darkest, theme.colors.white, theme.colors.green_lightest, theme.colors.green_darker, theme.colors.green_lightest, theme.colors.red_lightest, theme.colors.red_darker, theme.colors.red_lightest));
+  return styled.css(["", ""], useDefaultTheme && styled.css(["> div:not(:first-child){margin-top:16px;}padding:0 16px;.success-message{font-size:18px;margin:0;}.visuallyHidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}.loading{display:block;margin:24px auto;}label{display:inline-block;.isRequired{color:", ";}}input,textarea,select{display:block;font-family:inherit;background-color:", ";border-radius:3px;border:1px solid ", ";height:40px;padding:8px;margin-top:4px;width:100%;}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px ", " inset;}textarea{height:200px;resize:none;}[aria-invalid='false']{background:", ";border:1px solid ", ";&:-webkit-autofill,&:-webkit-autofill:hover,&:-webkit-autofill:focus,&:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px", " inset;}}[aria-invalid='true']{background:", ";border:1px solid ", ";&:-webkit-autofill,&:-webkit-autofill:hover,&:-webkit-autofill:focus,&:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px", " inset;}}input ~ .svg{position:absolute;right:8px;top:50%;transform:translateY(-50%);}textarea ~ .svg{position:absolute;right:8px;top:8px;}button:not(:last-of-type){margin-right:16px;}"], theme.colors.red_darker, theme.colors.white, theme.colors.light_grey_darkest, theme.colors.white, theme.colors.green_lightest, theme.colors.green_darker, theme.colors.green_lightest, theme.colors.red_lightest, theme.colors.red_darker, theme.colors.red_lightest));
 });
 
 const Label = ({
@@ -1945,7 +1928,7 @@ const Button = ({
   useDefaultTheme
 }) => {
   return /*#__PURE__*/React__default["default"].createElement(ButtonStyled, {
-    className: `${className ? className : ''} btnSubmit`,
+    className: className,
     type: type,
     onClick: () => action(),
     disabled: loading,
@@ -2012,7 +1995,6 @@ const Form = ({
   const selectFormFieldErrors = makeSelectFormFieldErrors(formId);
   const selectFormEntries = makeSelectFormEntries(formId);
   const selectFormPostData = makeSelectFormPostData(formId);
-  const selectFormValidationSent = makeSelectFormValidationSent(formId);
   const status = reactRedux.useSelector(selectFormStatus);
   const fields = reactRedux.useSelector(selectFormFields);
   const pagingInfo = reactRedux.useSelector(selectPagingInfo);
@@ -2021,7 +2003,6 @@ const Form = ({
   const errors = reactRedux.useSelector(selectFormFieldErrors);
   const entries = reactRedux.useSelector(selectFormEntries);
   const formData = reactRedux.useSelector(selectFormPostData);
-  const validate = reactRedux.useSelector(selectFormValidationSent);
   if (pagingInfo && pagingInfo.pageCount > 1) {
     const isLastPage = pagingInfo.pageCount == pagingInfo.pageIndex + 1;
     return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
@@ -2030,12 +2011,7 @@ const Form = ({
       className: className,
       id: formId,
       useDefaultTheme: useDefaultTheme
-    }, !(status !== null && status !== void 0 && status.hasSuccess) && !(status !== null && status !== void 0 && status.isLoading) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, pagingInfo.pageIndex > 0 && /*#__PURE__*/React__default["default"].createElement(Button, {
-      type: "button",
-      text: "Go Back",
-      action: () => _doTogglePageBack(formId, pagingInfo.pageIndex - 1),
-      useDefaultTheme: useDefaultTheme
-    }), /*#__PURE__*/React__default["default"].createElement(FormComposer, {
+    }, !(status !== null && status !== void 0 && status.hasSuccess) && !(status !== null && status !== void 0 && status.isLoading) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(FormComposer, {
       fields: fields,
       formData: formData,
       formId: formId,
@@ -2048,15 +2024,23 @@ const Form = ({
       entries: entries,
       setDateRangeValues: _setDateRangeValues,
       setCheckboxValue: _setCheckboxValue
+    }), pagingInfo.pageIndex > 0 && /*#__PURE__*/React__default["default"].createElement(Button, {
+      className: "form__btn--prev",
+      type: "button",
+      text: "Go Back",
+      action: () => _doTogglePageBack(formId, pagingInfo.pageIndex - 1),
+      useDefaultTheme: useDefaultTheme
     }), !isLastPage && /*#__PURE__*/React__default["default"].createElement(Button, {
+      className: "form__btn--next",
       type: "button",
       text: "Next",
       action: () => _doTogglePageForward(formId, pagingInfo.pageIndex + 1),
       useDefaultTheme: useDefaultTheme
     }), isLastPage && /*#__PURE__*/React__default["default"].createElement(Button, {
+      className: "form__btn--submit",
       text: (settings === null || settings === void 0 ? void 0 : settings.submitButtonText) || "Submit",
       type: "button",
-      loading: status === null || status === void 0 ? void 0 : status.isLoading,
+      loading: status === null || status === void 0 ? void 0 : status.isSubmitting,
       action: () => {
         _onSubmit(formId);
         if (onCustomSubmit) onCustomSubmit();
@@ -2069,7 +2053,7 @@ const Form = ({
       color: "#333"
     }), (status === null || status === void 0 ? void 0 : status.hasSuccess) && (status === null || status === void 0 ? void 0 : status.messages.success) && /*#__PURE__*/React__default["default"].createElement("p", {
       className: "success-message"
-    }, status.messages.success), (errors === null || errors === void 0 ? void 0 : errors.length) >= 1 && validate && /*#__PURE__*/React__default["default"].createElement("div", {
+    }, status.messages.success), (errors === null || errors === void 0 ? void 0 : errors.length) >= 1 && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "form__errors",
       role: "alert"
     }, errors === null || errors === void 0 ? void 0 : errors.map(({
@@ -2100,6 +2084,7 @@ const Form = ({
       entries: entries,
       setCheckboxValue: _setCheckboxValue
     }), /*#__PURE__*/React__default["default"].createElement(Button, {
+      className: "form__btn--submit",
       loading: status === null || status === void 0 ? void 0 : status.isSubmitting,
       text: (settings === null || settings === void 0 ? void 0 : settings.submitButtonText) || "Submit",
       type: "button",
@@ -2115,7 +2100,7 @@ const Form = ({
       color: "#333"
     }), (status === null || status === void 0 ? void 0 : status.hasSuccess) && (status === null || status === void 0 ? void 0 : status.messages.success) && /*#__PURE__*/React__default["default"].createElement("p", {
       className: "success-message"
-    }, status.messages.success), (errors === null || errors === void 0 ? void 0 : errors.length) >= 1 && validate && /*#__PURE__*/React__default["default"].createElement("div", {
+    }, status.messages.success), (errors === null || errors === void 0 ? void 0 : errors.length) >= 1 && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "form__errors",
       role: "alert"
     }, errors === null || errors === void 0 ? void 0 : errors.map(({