@zengenti/contensis-react-base 3.2.1-beta.3 → 3.2.1-beta.5

package/esm/forms.js

@@ -6,6 +6,7 @@ import React, { createContext, useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector, useDispatch } from 'react-redux';
 import styled, { ThemeProvider as ThemeProvider$1, css } from 'styled-components';
+import Markdown from 'markdown-to-jsx';
 import { c as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers-1789f0cf.js';
 
 const ACTION_PREFIX = '@FORM2/';
@@ -555,8 +556,6 @@ const getFieldType = field => {
     return 'textarea';
   } else if (field.dataType === 'string' && field.editor && field.editor.id === 'list-dropdown') {
     return 'dropdown';
-  } else if (field !== null && field !== void 0 && (_field$editor = field.editor) !== null && _field$editor !== void 0 && (_field$editor$propert = _field$editor.properties) !== null && _field$editor$propert !== void 0 && _field$editor$propert.readOnly || (field === null || field === void 0 ? void 0 : field.groupId) === 'private' || (field === null || field === void 0 ? void 0 : field.groupId) === 'settings') {
-    return 'hidden';
   } else if (field.dataType === 'stringArray' || field.dataType === 'boolean') {
     return 'checkbox';
   } else if (field.dataType === 'string' && field.validations && field.validations.allowedValues) {
@@ -570,7 +569,9 @@ const getFieldType = field => {
   } else if (field.dataFormat === 'entry') {
     return 'entryPicker';
   }
-  if (field.dataFormat === 'quote') return 'title';else return 'textfield';
+  if (field.dataFormat === 'quote') return 'content';else if (field !== null && field !== void 0 && (_field$editor = field.editor) !== null && _field$editor !== void 0 && (_field$editor$propert = _field$editor.properties) !== null && _field$editor$propert !== void 0 && _field$editor$propert.readOnly || (field === null || field === void 0 ? void 0 : field.groupId) === 'private' || (field === null || field === void 0 ? void 0 : field.groupId) === 'settings') {
+    return 'hidden';
+  } else return 'textfield';
 };
 
 const sagas = [takeEvery(SUBMIT_FORM_SUCCESS, onFormSuccess), takeEvery(SUBMIT_FORM_FOR_VALIDATION, doValidateForm), takeEvery(SUBMIT_FORM, onSubmitForm), takeEvery(SET_FORM_ID, doFetchForm),
@@ -1016,7 +1017,7 @@ const TextfieldStyled = styled.div.withConfig({
 })(["", ";"], ({
   isHidden
 }) => {
-  return css(["display:", ";"], isHidden ? 'none' : 'block');
+  return css(["display:", ";position:relative;"], isHidden ? 'none' : 'block');
 });
 const Textfield = ({
   className,
@@ -1032,7 +1033,8 @@ const Textfield = ({
   defaultLanguage,
   placeholder,
   isHidden,
-  useDefaultTheme
+  useDefaultTheme,
+  instructions
 }) => {
   const [hasCharLimit, setCharLimit] = useState(false);
   const isRequired = validations && validations.required ? true : false;
@@ -1045,6 +1047,7 @@ const Textfield = ({
   useEffect(() => {
     if (formValidationSent) setA11yInvalid(doA11yValidation(_, field, true));
   }, [formValidationSent]);
+  const [isVisible, setVisible] = React.useState(false);
   return /*#__PURE__*/React.createElement(TextfieldStyled, {
     className: className,
     isHidden: isHidden
@@ -1065,7 +1068,7 @@ const Textfield = ({
     }
   }, /*#__PURE__*/React.createElement("input", {
     className: "text-field__input",
-    type: type,
+    type: (isVisible != null ? isVisible : 'text') || type,
     defaultValue: defaultValueText,
     placeholder: placeholderText,
     "aria-invalid": a11yInvalid,
@@ -1107,6 +1110,35 @@ const Textfield = ({
   }, /*#__PURE__*/React.createElement("path", {
     fill: "#333",
     d: "m2 8 4.418 4.667L14 4.659l-1.246-1.326-6.336 6.692-3.18-3.332L2 8Z"
+  }))), instructions && /*#__PURE__*/React.createElement(Markdown, {
+    className: "text-field__input--markdown"
+  }, instructions), id === 'password' && /*#__PURE__*/React.createElement("button", {
+    className: "text-input__button--pw",
+    type: "button",
+    onClick: () => setVisible(!isVisible),
+    "aria-label": `${isVisible ? 'Hide' : 'Show'} Password.`
+  }, isVisible ? /*#__PURE__*/React.createElement("svg", {
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z",
+    fill: "currentColor",
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd"
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z",
+    fill: "currentColor",
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd"
   }))));
 };
 Textfield.propTypes = {
@@ -5106,10 +5138,12 @@ const FormComposer = ({
       case 'number':
       case 'textfield':
         {
+          var _field$editor, _field$editor$instruc;
+          const instructions = field === null || field === void 0 ? void 0 : (_field$editor = field.editor) === null || _field$editor === void 0 ? void 0 : (_field$editor$instruc = _field$editor.instructions) === null || _field$editor$instruc === void 0 ? void 0 : _field$editor$instruc[defaultLanguage];
           return /*#__PURE__*/React.createElement(Textfield, {
             key: `${field.id}-${idx}`,
             field: field,
-            type: field.type,
+            type: field.id === 'password' ? 'password' : field.type,
             id: field.id,
             label: field.name && field.name[defaultLanguage],
             formId: formId,
@@ -5120,7 +5154,8 @@ const FormComposer = ({
             defaultValue: formData && formData[field.id] || field.default,
             placeholder: field.editor,
             errors: errors,
-            useDefaultTheme: useDefaultTheme
+            useDefaultTheme: useDefaultTheme,
+            instructions: instructions
           });
         }
       case 'textarea':
@@ -5241,7 +5276,7 @@ const FormComposer = ({
         }
       case 'country':
         {
-          var _field$default, _field$editor, _field$editor$propert, _field$editor$propert2;
+          var _field$default, _field$editor2, _field$editor2$proper, _field$editor2$proper2;
           return /*#__PURE__*/React.createElement(CountrySelect, {
             key: `${field.id}-${idx}`,
             formId: formId,
@@ -5250,18 +5285,29 @@ const FormComposer = ({
             label: field.name && field.name[defaultLanguage],
             validations: field.validations,
             defaultValue: formData && formData[field.id] || (field === null || field === void 0 ? void 0 : (_field$default = field.default) === null || _field$default === void 0 ? void 0 : _field$default[defaultLanguage]),
-            placeholder: field === null || field === void 0 ? void 0 : (_field$editor = field.editor) === null || _field$editor === void 0 ? void 0 : (_field$editor$propert = _field$editor.properties) === null || _field$editor$propert === void 0 ? void 0 : (_field$editor$propert2 = _field$editor$propert.placeholderText) === null || _field$editor$propert2 === void 0 ? void 0 : _field$editor$propert2[defaultLanguage]
+            placeholder: field === null || field === void 0 ? void 0 : (_field$editor2 = field.editor) === null || _field$editor2 === void 0 ? void 0 : (_field$editor2$proper = _field$editor2.properties) === null || _field$editor2$proper === void 0 ? void 0 : (_field$editor2$proper2 = _field$editor2$proper.placeholderText) === null || _field$editor2$proper2 === void 0 ? void 0 : _field$editor2$proper2[defaultLanguage]
           });
         }
-      case 'title':
+      case 'content':
         {
+          var _editor$instructions;
+          const {
+            name,
+            editor
+          } = field || {};
+          const instructions = editor === null || editor === void 0 ? void 0 : (_editor$instructions = editor.instructions) === null || _editor$instructions === void 0 ? void 0 : _editor$instructions[defaultLanguage];
           return /*#__PURE__*/React.createElement("span", {
-            className: "form__title",
+            className: "form__content",
             "data-form": "title",
             style: {
               display: 'block'
-            }
-          }, field.name && field.name[defaultLanguage]);
+            },
+            key: `${field.id}-${idx}`
+          }, /*#__PURE__*/React.createElement("span", {
+            className: "form__content--title"
+          }, name === null || name === void 0 ? void 0 : name[defaultLanguage]), instructions && /*#__PURE__*/React.createElement(Markdown, {
+            className: "form__content--markdown"
+          }, instructions));
         }
     }
   });
@@ -5432,7 +5478,9 @@ const Form = ({
       useDefaultTheme: useDefaultTheme,
       entries: entries,
       setDateRangeValues: _setDateRangeValues
-    }), pagingInfo.pageIndex > 0 && /*#__PURE__*/React.createElement(Button, {
+    }), pagingInfo.pageCount >= 2 && /*#__PURE__*/React.createElement("div", {
+      className: "form__btns"
+    }, pagingInfo.pageIndex > 0 && /*#__PURE__*/React.createElement(Button, {
       className: "form__btn--prev",
       type: "button",
       text: "Go Back",
@@ -5454,7 +5502,7 @@ const Form = ({
         if (onCustomSubmit) onCustomSubmit();
       },
       useDefaultTheme: useDefaultTheme
-    })), (status === null || status === void 0 ? void 0 : status.isLoading) && !(status !== null && status !== void 0 && status.hasSuccess) && /*#__PURE__*/React.createElement(Loader, {
+    }))), (status === null || status === void 0 ? void 0 : status.isLoading) && !(status !== null && status !== void 0 && status.hasSuccess) && /*#__PURE__*/React.createElement(Loader, {
       className: "loading",
       height: 24,
       width: 24,