@zengenti/contensis-react-base 3.0.2-beta.18 → 3.0.2-beta.19

package/cjs/forms.js

@@ -36,7 +36,8 @@ const SET_FIELD_ERROR = `${ACTION_PREFIX}SET_FIELD_ERROR`;
 const SET_DATE_RANGE_VALUES = `${ACTION_PREFIX}SET_DATE_RANGE_VALUES`;
 const SET_FORM_ENTRIES = `${ACTION_PREFIX}SET_FORM_ENTRIES`;
 const SET_SUCCESS_MESSAGE = `${ACTION_PREFIX}SET_SUCCESS_MESSAGE`;
-const SET_CHECKBOX_VALUE = `${ACTION_PREFIX}SET_CHECKBOX_VALUE`;
+const SET_MULTIPLE_CHECKBOX_VALUE = `${ACTION_PREFIX}SET_MULTIPLE_CHECKBOX_VALUE`;
+const SET_SINGLE_CHECKBOX_VALUE = `${ACTION_PREFIX}SET_SINGLE_CHECKBOX_VALUE`;
 
 const initialSettings = {
   recaptcha: {
@@ -140,19 +141,26 @@ var reducer = immer.produce((state, action) => {
         };
         return;
       }
-    case SET_CHECKBOX_VALUE:
+    case SET_SINGLE_CHECKBOX_VALUE:
       {
         const {
           formId,
           id,
-          value,
-          isChecked
+          value
         } = action || {};
-        let values = state[formId].data[id] || [];
-        if (isChecked) state[formId].data[id] = {
-          ...values,
+        state[formId].data[id] = value;
+        return;
+      }
+    case SET_MULTIPLE_CHECKBOX_VALUE:
+      {
+        const {
+          formId,
+          id,
+          label,
           value
-        };else state[formId].data[id] = values.filter(v => v !== value);
+        } = action || {};
+        const checked = state[formId].data[id] || [];
+        if (value) state[formId].data[id] = [...checked, label];else state[formId].data[id] = checked.filter(v => v !== label);
         return;
       }
     case SET_DATE_RANGE_VALUES:
@@ -808,11 +816,16 @@ const setValue = (formId, id, value) => action(SET_FIELD_VALUE, {
   id,
   value
 });
-const setCheckboxValue = (formId, id, value, isChecked) => action(SET_CHECKBOX_VALUE, {
+const setSingleCheckboxValue = (formId, id, value) => action(SET_SINGLE_CHECKBOX_VALUE, {
   formId,
   id,
-  value,
-  isChecked
+  value
+});
+const setMultipleCheckboxValue = (formId, id, label, value) => action(SET_MULTIPLE_CHECKBOX_VALUE, {
+  formId,
+  id,
+  label,
+  value
 });
 const setDateRangeValues = (formId, id, dateType, value) => action(SET_DATE_RANGE_VALUES, {
   formId,
@@ -837,8 +850,8 @@ const actions = {
   onSubmit,
   setFormId,
   setValue,
-  setCheckboxValue,
-  setDateRangeValues,
+  setSingleCheckboxValue,
+  setMultipleCheckboxValue,
   onValidateField,
   doTogglePageForward,
   doTogglePageBack
@@ -1279,7 +1292,6 @@ const CheckboxStyled = styled__default["default"].div.withConfig({
 const Checkbox = ({
   className,
   formId,
-  setCheckboxValue,
   id,
   type,
   label,
@@ -1292,14 +1304,15 @@ const Checkbox = ({
   // NF change rules of hooks
   let isDefaultChecked = defaultValue && defaultValue[defaultLanguage];
   const [isChecked, setIsChecked] = React.useState(isDefaultChecked || '');
+  const dispatch = reactRedux.useDispatch();
   switch (type) {
     case 'multiple':
       {
         if (!validations) return null;
         const isRequired = validations && validations.required ? true : false;
         const cbValues = validations && validations.allowedValues && validations.allowedValues.values;
-        const _handleChange = (value, isChecked) => {
-          setCheckboxValue(formId, id, value, isChecked);
+        const _handleChange = (label, value) => {
+          dispatch(setMultipleCheckboxValue(formId, id, label, value));
         };
         if (!cbValues || cbValues.length < 1) return null;
         return /*#__PURE__*/React__default["default"].createElement(CheckboxStyled, {
@@ -1330,9 +1343,9 @@ const Checkbox = ({
       }
     case 'single':
       {
-        const _handleChange = isChecked => {
-          setIsChecked(isChecked);
-          setCheckboxValue(formId, id, isChecked);
+        const _handleChange = value => {
+          setIsChecked(value);
+          dispatch(setSingleCheckboxValue(formId, id, value));
         };
         return /*#__PURE__*/React__default["default"].createElement(CheckboxStyled, {
           className: `checkbox-container`,
@@ -1361,7 +1374,6 @@ Checkbox.propTypes = {
   id: PropTypes__default["default"].string,
   type: PropTypes__default["default"].string,
   label: PropTypes__default["default"].string,
-  setCheckboxValue: PropTypes__default["default"].func,
   validations: PropTypes__default["default"].object,
   defaultLanguage: PropTypes__default["default"].string,
   name: PropTypes__default["default"].object,
@@ -1709,8 +1721,7 @@ const FormComposer = ({
   defaultLanguage,
   errors,
   useDefaultTheme,
-  entries,
-  setCheckboxValue
+  entries
 }) => {
   if (!fields || fields.length < 1) return null;
   return fields.map((field, idx) => {
@@ -1782,8 +1793,7 @@ const FormComposer = ({
             formId: formId,
             defaultValue: formData && formData[field.id] || field.default,
             type: field.dataType === 'boolean' ? 'single' : 'multiple',
-            useDefaultTheme: useDefaultTheme,
-            setCheckboxValue: setCheckboxValue
+            useDefaultTheme: useDefaultTheme
           });
         }
       case 'radio':
@@ -1866,8 +1876,7 @@ FormComposer.propTypes = {
   setDateRangeValues: PropTypes__default["default"].func,
   defaultLanguage: PropTypes__default["default"].string,
   errors: PropTypes__default["default"].array,
-  useDefaultTheme: PropTypes__default["default"].bool,
-  setCheckboxValue: PropTypes__default["default"].func
+  useDefaultTheme: PropTypes__default["default"].bool
 };
 
 const Loader = ({
@@ -1978,7 +1987,6 @@ const Form = ({
   const dispatch = reactRedux.useDispatch();
   const _setFormId = formId => dispatch(setFormId(formId));
   const _setValue = (formId, id, value) => dispatch(setValue(formId, id, value));
-  const _setCheckboxValue = (formId, id, value, isChecked) => dispatch(setCheckboxValue(formId, id, value, isChecked));
   const _setDateRangeValues = (formId, id, dateType, value) => dispatch(setDateRangeValues(formId, id, dateType, value));
   const _onValidateField = (formId, id, value) => dispatch(onValidateField(formId, id, value));
   const _doTogglePageForward = (formId, pageIndex) => dispatch(doTogglePageForward(formId, pageIndex));
@@ -2022,8 +2030,7 @@ const Form = ({
       pagingInfo: pagingInfo,
       useDefaultTheme: useDefaultTheme,
       entries: entries,
-      setDateRangeValues: _setDateRangeValues,
-      setCheckboxValue: _setCheckboxValue
+      setDateRangeValues: _setDateRangeValues
     }), pagingInfo.pageIndex > 0 && /*#__PURE__*/React__default["default"].createElement(Button, {
       className: "form__btn--prev",
       type: "button",
@@ -2081,8 +2088,7 @@ const Form = ({
       defaultLanguage: defaultLanguage,
       errors: errors,
       useDefaultTheme: useDefaultTheme,
-      entries: entries,
-      setCheckboxValue: _setCheckboxValue
+      entries: entries
     }), /*#__PURE__*/React__default["default"].createElement(Button, {
       className: "form__btn--submit",
       loading: status === null || status === void 0 ? void 0 : status.isSubmitting,