@zengenti/contensis-react-base 3.0.0-beta.7 → 3.0.0-beta.72

package/esm/forms.js

@@ -1,7 +1,9 @@
-import { Map, fromJS, Iterable } from 'immutable';
+import { produce } from 'immer';
 import { takeEvery, takeLatest, put, call, select, all } from '@redux-saga/core/effects';
 import { createSelector } from 'reselect';
-import React, { createContext, useEffect, useState } from 'react';
+import { getIn } from '@zengenti/contensis-react-base/redux';
+import { selectors } from '@zengenti/contensis-react-base/routing';
+import React, { useState, createContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import styled, { css, ThemeProvider as ThemeProvider$1 } from 'styled-components';
@@ -58,6 +60,18 @@ const initialSettings = {
     siteKey: null
   }
 };
+const initialStatus = {
+  isLoading: false,
+  isSubmitting: false,
+  hasSuccess: false,
+  successMessage: null,
+  hasError: false
+};
+const initialPagingInfo = {
+  pageIndex: 0,
+  pageCount: 0,
+  currentPageId: null
+};
 const initialFormData = {
   formId: null,
   data: {},
@@ -66,120 +80,198 @@ const initialFormData = {
   fieldErrors: [],
   groups: [],
   defaultLanguage: null,
-  pagingInfo: {
-    pageIndex: 0,
-    pageCount: 0,
-    currentPageId: null
-  },
-  status: {
-    isLoading: false,
-    isSubmitting: false,
-    hasSuccess: false,
-    successMessage: null,
-    hasError: false
-  }
+  pagingInfo: initialPagingInfo,
+  status: initialStatus
 };
-let initialState = Map({
-  settings: fromJS(initialSettings)
-});
-var reducer = ((state = initialState, action) => {
+let initialState = {
+  settings: initialSettings
+};
+var reducer = produce((state, action) => {
   switch (action.type) {
     case SET_FORM_ID:
-      return state.setIn([action.formId], initialFormData);
+      {
+        const {
+          formId
+        } = action || {};
+        state[formId] = initialFormData;
+        return;
+      }
 
     case SET_FORM_DATA:
       {
-        const fields = action.fields; //const fObj = {};
-
+        const {
+          fields,
+          formId,
+          groups,
+          defaultLanguage
+        } = action || {};
         fields.map(field => {
           field.type = MakeFieldType(field);
         });
-        return state.setIn([fromJS(action.formId), 'fields'], fields).setIn([fromJS(action.formId), 'formId'], action.formId).setIn([fromJS(action.formId), 'groups'], action.groups).setIn([fromJS(action.formId), 'defaultLanguage'], action.defaultLanguage).setIn([fromJS(action.formId), 'status', 'isSubmitting'], false).setIn([fromJS(action.formId), 'status', 'hasSuccess'], false).setIn([fromJS(action.formId), 'status', 'hasError'], false);
+        state[formId].fields = fields;
+        state[formId].formId = formId;
+        state[formId].groups = groups;
+        state[formId].defaultLanguage = defaultLanguage;
+        state[formId].status.isSubmitting = false;
+        state[formId].status.hasSuccess = false;
+        state[formId].status.hasError = false;
+        return;
       }
 
     case SET_CURRENT_PAGE:
-      return state.setIn([action.formId, 'pagingInfo', 'currentPageId'], action.pageId).setIn([action.formId, 'pagingInfo', 'pageIndex'], action.pageIndex).setIn([action.formId, 'pagingInfo', 'pageCount'], action.pageCount);
+      {
+        const {
+          formId,
+          pageId,
+          pageIndex,
+          pageCount
+        } = action || {};
+        state[formId].pagingInfo.currentPageId = pageId;
+        state[formId].pagingInfo.pageIndex = pageIndex;
+        state[formId].pagingInfo.pageCount = pageCount;
+        return;
+      }
 
     case SET_FIELD_VALUE:
-      return state.setIn([action.formId, 'data', action.id], action.value);
+      {
+        const {
+          formId,
+          id,
+          value
+        } = action || {};
+        state[formId].data[id] = value;
+        return;
+      }
 
     case SET_DEFAULT_FIELD_VALUE:
-      return state.setIn([action.formId, 'data'], action.value);
+      {
+        const {
+          formId,
+          value
+        } = action || {};
+        state[formId].data = value;
+        return;
+      }
 
     case SET_CHECKBOX_VALUE:
       {
-        const prevState = state.getIn([action.formId, 'data', action.id]);
-        let values = prevState ? prevState : [];
-
-        if (action.isChecked) {
-          values.push(action.value);
-        } else {
-          values = values.filter(value => value !== action.value);
-        }
-
-        return state.setIn([action.formId, 'data', action.id], values);
+        const {
+          formId,
+          id,
+          value,
+          isChecked
+        } = action || {};
+        let values = state[formId].data[id] || [];
+        if (isChecked) state[formId].data[id] = { ...values,
+          value
+        };else state[formId].data[id] = values.filter(v => v !== value);
+        return;
       }
 
     case SET_DATE_RANGE_VALUES:
-      return state.setIn([action.formId, 'data', action.id, action.dateType], action.value);
+      {
+        const {
+          formId,
+          id,
+          value,
+          dateType
+        } = action || {};
+        state[formId].data[id][dateType] = value;
+        return;
+      }
 
     case SET_FIELD_ERROR:
-      return state.setIn([action.formId, 'fieldErrors'], action.value);
+      {
+        const {
+          formId,
+          value
+        } = action || {};
+        state[formId].fieldErrors = value;
+        return;
+      }
 
     case SET_SUBMITTING_FORM:
-      return state.setIn([fromJS(action.formId), 'status', 'isSubmitting'], action.isSubmitting);
+      {
+        const {
+          formId,
+          isSubmitting
+        } = action || {};
+        state[formId].status.isSubmitting = isSubmitting;
+        return;
+      }
 
     case SUBMIT_FORM_SUCCESS:
-      return state.setIn([fromJS(action.formId), 'status', 'hasError'], false).setIn([fromJS(action.formId), 'status', 'isSubmitting'], false).setIn([fromJS(action.formId), 'status', 'hasSuccess'], true);
+      {
+        const {
+          formId
+        } = action || {};
+        state[formId].status.hasError = false;
+        state[formId].status.isSubmitting = false;
+        state[formId].status.hasSuccess = true;
+        return;
+      }
 
     case SET_SUCCESS_MESSAGE:
-      return state.setIn([fromJS(action.formId), 'status', 'successMessage'], action.message);
+      {
+        const {
+          formId,
+          message
+        } = action || {};
+        state[formId].status.successMessage = message;
+        return;
+      }
 
     case SUBMIT_FORM_ERROR:
-      return state.setIn([fromJS(action.formId), 'status', 'hasError'], true).setIn([fromJS(action.formId), 'status', 'isSubmitting'], false);
+      {
+        const {
+          formId
+        } = action || {};
+        state[formId].status.hasError = true;
+        state[formId].status.isSubmitting = false;
+        return;
+      }
 
     case SET_FORM_ENTRIES:
       {
-        const entries = action.entries;
-        const eObj = {};
+        const {
+          formId,
+          entries
+        } = action || {};
+        const entryObject = {};
         entries.map(entry => {
           if (!entry) return null;
-          eObj[entry.id] = entry.entries;
-          return eObj;
+          entryObject[entry.id] = entry.entries;
+          return entryObject;
         });
-        return state.setIn([action.formId, 'entries'], eObj);
+        state[formId].entries = entryObject;
+        return;
       }
 
     case SET_ERROR:
-      return state.setIn([fromJS(action.formId), 'status', 'hasError'], true).setIn([fromJS(action.formId), 'status', 'isSubmitting'], false);
+      {
+        const {
+          formId
+        } = action || {};
+        state[formId].status.hasError = true;
+        state[formId].status.isSubmitting = false;
+        return;
+      }
 
     default:
       return state;
   }
-});
-
-const selectForms = state => state.getIn(['forms']);
-const makeSelectIsLoading = formId => createSelector(selectForms, forms => forms.getIn([formId, 'status', 'isLoading']));
-const makeSelectFormFields = formId => createSelector(selectForms, forms => forms.getIn([formId, 'fields']));
-const makeSelectDefaultLang = formId => createSelector(selectForms, forms => forms.getIn([formId, 'defaultLanguage']));
-const selectFieldErrors = (state, formId) => {
-  return state.getIn(['forms', formId, 'fieldErrors']);
-};
-const selectPostData = (state, formId) => {
-  return state.getIn(['forms', formId, 'data']);
-};
-const selectFormGroups = (state, formId) => {
-  return state.getIn(['forms', formId, 'groups']);
-};
-const selectPagingInfo = (state, formId) => {
-  return state.getIn(['forms', formId, 'pagingInfo']);
-};
-const selectFormStatus = (state, formId) => {
-  return state.getIn(['forms', formId, 'status']);
-};
+}, initialState);
+
+const selectForms = state => getIn(state, ['forms']);
+const selectFieldErrors = (state, formId) => getIn(state, ['forms', formId, 'fieldErrors']);
+const selectPostData = (state, formId) => getIn(state, ['forms', formId, 'data']);
+const selectFormGroups = (state, formId) => getIn(state, [('groups')]);
+const selectPagingInfo = (state, formId) => getIn(state, ['forms', formId, 'pagingInfo']);
+const selectFormStatus = (state, formId) => getIn(state, ['forms', formId, 'status']);
+const selectEntries = (state, formId) => getIn(state, ['forms', formId, 'entries']);
 const selectPagedFields = formId => createSelector([selectForms], form => {
-  const pagingInfo = form.getIn([formId, 'pagingInfo']);
-  const fields = form.getIn([formId, 'fields']);
+  const pagingInfo = getIn(form, [formId, 'pagingInfo']);
+  const fields = getIn(form, [formId, 'fields']);
 
   if (fields && fields.length > 0 && pagingInfo && pagingInfo.pageCount > 1) {
     return fields.filter(f => f.groupId == pagingInfo.currentPageId);
@@ -187,9 +279,9 @@ const selectPagedFields = formId => createSelector([selectForms], form => {
 
   return fields;
 });
-const selectEntries = (state, formId) => {
-  return state.getIn(['forms', formId, 'entries']);
-};
+const makeSelectIsLoading = formId => createSelector(selectForms, forms => getIn(forms, [formId, 'status', 'isLoading']));
+const makeSelectFormFields = formId => createSelector(selectForms, forms => getIn(forms, [formId, 'fields']));
+const makeSelectDefaultLang = formId => createSelector(selectForms, forms => getIn(forms, [formId, 'defaultLanguage']));
 
 const URI = '/forms';
 const getFormSchema = async formId => {
@@ -413,7 +505,7 @@ function* togglePage(action) {
     pageIndex
   } = action;
   const state = yield select();
-  const formGroups = selectFormGroups(state, formId);
+  const formGroups = selectFormGroups(state);
 
   if (action.type === PAGE_FORWARD) {
     yield validateGroupfields(formId, formGroups[pageIndex].id);
@@ -431,7 +523,7 @@ function* togglePage(action) {
 function* fetchForm(action) {
   const formId = action.formId;
   const schema = yield getFormSchema(formId);
-  const groups = schema.groups && schema.groups.length > 0 && schema.groups.filter(group => group.id !== 'private');
+  const groups = schema && schema.groups && schema.groups.length > 0 && schema.groups.filter(group => group.id !== 'private');
 
   if (formId && schema) {
     if (schema.groups && schema.groups.length > 0) {
@@ -486,7 +578,7 @@ function* submitForm$1(action) {
       formId: action.formId
     });
     const forms = yield select(selectForms);
-    const rawData = forms.get(action.formId);
+    const rawData = forms[action.formId];
     const formObj = {
       contentType: action.formId,
       formPost: rawData.data
@@ -513,7 +605,7 @@ function* setDefaultValueFields(action) {
     fields,
     defaultLanguage
   } = action;
-  const entryId = yield select(state => state.getIn(['routing', 'entry', 'sys', 'id']));
+  const entryId = yield select(selectors.selectRouteEntryEntryId);
   let fieldObj = {};
   fields.forEach(field => {
     if (field.dataType == 'string' && field.default) {
@@ -565,16 +657,6 @@ function* getEntryPickerData(action) {
   }
 }
 
-const toJS = WrappedComponent => wrappedComponentProps => {
-  const KEY = 0;
-  const VALUE = 1;
-  const propsJS = Object.entries(wrappedComponentProps).reduce((newProps, wrappedComponentProp) => {
-    newProps[wrappedComponentProp[KEY]] = Iterable.isIterable(wrappedComponentProp[VALUE]) ? wrappedComponentProp[VALUE].toJS() : wrappedComponentProp[VALUE];
-    return newProps;
-  }, {});
-  return /*#__PURE__*/React.createElement(WrappedComponent, propsJS);
-};
-
 //Brand
 const open_teal = '#37BFA7'; //Brand dark
 
@@ -1016,7 +1098,7 @@ Dropdown.propTypes = {
 
 const CheckboxStyled = styled.div.withConfig({
   displayName: "Checkbox__CheckboxStyled",
-  componentId: "s8ewuf-0"
+  componentId: "sc-s8ewuf-0"
 })(["", ";"], ({
   useDefaultTheme
 }) => {
@@ -1295,7 +1377,7 @@ SingleDate.propTypes = {
 
 const DateRangeStyled = styled.div.withConfig({
   displayName: "DateRange__DateRangeStyled",
-  componentId: "hnzg32-0"
+  componentId: "sc-hnzg32-0"
 })(["", ";"], ({
   useDefaultTheme
 }) => {
@@ -1399,7 +1481,7 @@ DateRange.propTypes = {
 
 const EntryPickerStyled = styled.div.withConfig({
   displayName: "EntryPicker__EntryPickerStyled",
-  componentId: "svnu18-0"
+  componentId: "sc-svnu18-0"
 })(["", ";"], ({
   useDefaultTheme
 }) => {
@@ -1656,7 +1738,7 @@ FormComposer.propTypes = {
 
 const ButtonStyled = styled.button.withConfig({
   displayName: "Button__ButtonStyled",
-  componentId: "hr2oup-0"
+  componentId: "sc-hr2oup-0"
 })(["", ";"], ({
   theme,
   useDefaultTheme
@@ -1686,7 +1768,7 @@ Button.propTypes = {
   useDefaultTheme: PropTypes.bool
 };
 
-const ThemeContext = createContext();
+const ThemeContext = /*#__PURE__*/createContext();
 
 const ThemeProvider = ({
   children,
@@ -2060,7 +2142,7 @@ const Form$1 = ({
       type: "button",
       action: () => {
         submitForm(formId);
-        customSubmit();
+        if (customSubmit) customSubmit();
       },
       useDefaultTheme: useDefaultTheme
     })), status && status.hasSuccess && status.successMessage && /*#__PURE__*/React.createElement("p", {
@@ -2089,7 +2171,7 @@ const Form$1 = ({
       type: "button",
       action: () => {
         submitForm(formId);
-        customSubmit();
+        if (customSubmit) customSubmit();
       },
       useDefaultTheme: useDefaultTheme
     })), status && status.hasSuccess && status.successMessage && /*#__PURE__*/React.createElement("p", {
@@ -2124,12 +2206,10 @@ Form$1.propTypes = {
   setCheckboxValue: PropTypes.func
 };
 
-function action(type, payload = {}) {
-  return {
-    type,
-    ...payload
-  };
-}
+const action = (type, payload = {}) => ({
+  type,
+  ...payload
+});
 
 const submitForm = formId => action(SUBMIT_FORM_FOR_VALIDATION, {
   formId
@@ -2266,7 +2346,7 @@ const mapDispatchToProps = dispatch => {
   };
 };
 
-connect(mapStateToProps, mapDispatchToProps)(toJS(FormContainer));
+var Form = connect(mapStateToProps, mapDispatchToProps)(FormContainer);
 
-export { reducer, formV2Sagas as sagas };
+export { Form as default, reducer, formV2Sagas as sagas };
 //# sourceMappingURL=forms.js.map