envoc-form 3.0.0 → 3.3.0

package/lib/index.js

@@ -7,22 +7,130 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "BoolInput", {
+  enumerable: true,
+  get: function get() {
+    return _BoolInput.BoolInput;
+  }
+});
+Object.defineProperty(exports, "InlineBoolInput", {
+  enumerable: true,
+  get: function get() {
+    return _BoolInput.InlineBoolInput;
+  }
+});
+Object.defineProperty(exports, "InlineMoneyInput", {
+  enumerable: true,
+  get: function get() {
+    return _MoneyInput.InlineMoneyInput;
+  }
+});
+Object.defineProperty(exports, "MoneyInput", {
+  enumerable: true,
+  get: function get() {
+    return _MoneyInput.MoneyInput;
+  }
+});
+Object.defineProperty(exports, "MoneyFormattedInput", {
+  enumerable: true,
+  get: function get() {
+    return _MoneyFormattedInput.MoneyFormattedInput;
+  }
+});
+Object.defineProperty(exports, "AddressInput", {
+  enumerable: true,
+  get: function get() {
+    return _AddressInput["default"];
+  }
+});
+Object.defineProperty(exports, "UsStates", {
+  enumerable: true,
+  get: function get() {
+    return _AddressInput.UsStates;
+  }
+});
+Object.defineProperty(exports, "ConfirmBaseForm", {
+  enumerable: true,
+  get: function get() {
+    return _ConfirmBaseForm["default"];
+  }
+});
+Object.defineProperty(exports, "ConfirmDeleteForm", {
+  enumerable: true,
+  get: function get() {
+    return _ConfirmDeleteForm["default"];
+  }
+});
+Object.defineProperty(exports, "DatePickerInput", {
+  enumerable: true,
+  get: function get() {
+    return _DatePickerInput["default"];
+  }
+});
+Object.defineProperty(exports, "ErrorScrollTarget", {
+  enumerable: true,
+  get: function get() {
+    return _ErrorScrollTarget["default"];
+  }
+});
+Object.defineProperty(exports, "FileInput", {
+  enumerable: true,
+  get: function get() {
+    return _FileInput.FileInput;
+  }
+});
+Object.defineProperty(exports, "DropzoneFileInput", {
+  enumerable: true,
+  get: function get() {
+    return _FileInput.DropzoneFileInput;
+  }
+});
+Object.defineProperty(exports, "DefaultFileList", {
+  enumerable: true,
+  get: function get() {
+    return _FileInput.DefaultFileList;
+  }
+});
 Object.defineProperty(exports, "Form", {
   enumerable: true,
   get: function get() {
     return _Form["default"];
   }
 });
-Object.defineProperty(exports, "FormInput", {
+Object.defineProperty(exports, "ServerErrorContext", {
   enumerable: true,
   get: function get() {
-    return _FormInput["default"];
+    return _Form.ServerErrorContext;
   }
 });
-Object.defineProperty(exports, "InlineFormInput", {
+Object.defineProperty(exports, "FocusError", {
   enumerable: true,
   get: function get() {
-    return _InlineFormInput["default"];
+    return _Form.FocusError;
+  }
+});
+Object.defineProperty(exports, "FormBasedPreventNavigation", {
+  enumerable: true,
+  get: function get() {
+    return _Form.FormBasedPreventNavigation;
+  }
+});
+Object.defineProperty(exports, "FormGroup", {
+  enumerable: true,
+  get: function get() {
+    return _FormGroup["default"];
+  }
+});
+Object.defineProperty(exports, "FormGroupWrapper", {
+  enumerable: true,
+  get: function get() {
+    return _FormGroupWrapper["default"];
+  }
+});
+Object.defineProperty(exports, "FormInput", {
+  enumerable: true,
+  get: function get() {
+    return _FormInput["default"];
   }
 });
 Object.defineProperty(exports, "FormInputArray", {
@@ -31,22 +139,22 @@ Object.defineProperty(exports, "FormInputArray", {
     return _FormInputArray["default"];
   }
 });
-Object.defineProperty(exports, "IconInput", {
+Object.defineProperty(exports, "FormSection", {
   enumerable: true,
   get: function get() {
-    return _IconInput["default"];
+    return _FormSection["default"];
   }
 });
-Object.defineProperty(exports, "BoolInput", {
+Object.defineProperty(exports, "IconInput", {
   enumerable: true,
   get: function get() {
-    return _BoolInput.BoolInput;
+    return _IconInput["default"];
   }
 });
-Object.defineProperty(exports, "InlineBoolInput", {
+Object.defineProperty(exports, "InlineFormInput", {
   enumerable: true,
   get: function get() {
-    return _BoolInput.InlineBoolInput;
+    return _InlineFormInput["default"];
   }
 });
 Object.defineProperty(exports, "StandardFormActions", {
@@ -55,79 +163,99 @@ Object.defineProperty(exports, "StandardFormActions", {
     return _StandardFormActions["default"];
   }
 });
-Object.defineProperty(exports, "validators", {
+Object.defineProperty(exports, "SubmitFormButton", {
   enumerable: true,
   get: function get() {
-    return _validators["default"];
+    return _SubmitFormButton["default"];
   }
 });
-Object.defineProperty(exports, "ConfirmBaseForm", {
+Object.defineProperty(exports, "useStandardFormInput", {
   enumerable: true,
   get: function get() {
-    return _ConfirmBaseForm["default"];
+    return _useStandardFormInput["default"];
   }
 });
-Object.defineProperty(exports, "ConfirmDeleteForm", {
+Object.defineProperty(exports, "validators", {
   enumerable: true,
   get: function get() {
-    return _ConfirmDeleteForm["default"];
+    return _validators["default"];
   }
 });
-Object.defineProperty(exports, "SubmitFormButton", {
+Object.defineProperty(exports, "ReactSelectField", {
   enumerable: true,
   get: function get() {
-    return _SubmitFormButton["default"];
+    return _ReactSelectField["default"];
   }
 });
-Object.defineProperty(exports, "AddressInput", {
+Object.defineProperty(exports, "customReactSelectFieldStyles", {
   enumerable: true,
   get: function get() {
-    return _AddressInput["default"];
+    return _ReactSelectField.customStyles;
   }
 });
-Object.defineProperty(exports, "MoneyInput", {
+Object.defineProperty(exports, "overrideReactSelectFieldStyles", {
   enumerable: true,
   get: function get() {
-    return _MoneyInput.MoneyInput;
+    return _ReactSelectField.overrideTheme;
   }
 });
-Object.defineProperty(exports, "InlineMoneyInput", {
+Object.defineProperty(exports, "NestedFormFieldContext", {
   enumerable: true,
   get: function get() {
-    return _MoneyInput.InlineMoneyInput;
+    return _NestedFormFieldContext["default"];
   }
 });
 exports.normalizers = void 0;
 
-var _Form = _interopRequireDefault(require("./Form"));
+var normalizers = _interopRequireWildcard(require("./normalizers"));
 
-var _FormInput = _interopRequireDefault(require("./FormInput"));
+exports.normalizers = normalizers;
 
-var _InlineFormInput = _interopRequireDefault(require("./InlineFormInput"));
+var _BoolInput = require("./BoolInput");
 
-var _FormInputArray = _interopRequireDefault(require("./FormInputArray"));
+var _MoneyInput = require("./MoneyInput");
 
-var _IconInput = _interopRequireDefault(require("./IconInput"));
+var _MoneyFormattedInput = require("./MoneyFormattedInput");
 
-var _BoolInput = require("./BoolInput");
+var _AddressInput = _interopRequireWildcard(require("./AddressInput"));
 
-var _StandardFormActions = _interopRequireDefault(require("./StandardFormActions"));
+var _ConfirmBaseForm = _interopRequireDefault(require("./ConfirmBaseForm"));
 
-var _validators = _interopRequireDefault(require("./validators"));
+var _ConfirmDeleteForm = _interopRequireDefault(require("./ConfirmDeleteForm"));
 
-var normalizers = _interopRequireWildcard(require("./normalizers"));
+var _DatePickerInput = _interopRequireDefault(require("./DatePickerInput"));
 
-exports.normalizers = normalizers;
+var _ErrorScrollTarget = _interopRequireDefault(require("./ErrorScrollTarget"));
 
-var _ConfirmBaseForm = _interopRequireDefault(require("./ConfirmBaseForm"));
+var _FileInput = require("./FileInput");
 
-var _ConfirmDeleteForm = _interopRequireDefault(require("./ConfirmDeleteForm"));
+var _Form = _interopRequireWildcard(require("./Form"));
+
+var _FormGroup = _interopRequireDefault(require("./FormGroup"));
+
+var _FormGroupWrapper = _interopRequireDefault(require("./FormGroupWrapper"));
+
+var _FormInput = _interopRequireDefault(require("./FormInput"));
+
+var _FormInputArray = _interopRequireDefault(require("./FormInputArray"));
+
+var _FormSection = _interopRequireDefault(require("./FormSection"));
+
+var _IconInput = _interopRequireDefault(require("./IconInput"));
+
+var _InlineFormInput = _interopRequireDefault(require("./InlineFormInput"));
+
+var _StandardFormActions = _interopRequireDefault(require("./StandardFormActions"));
 
 var _SubmitFormButton = _interopRequireDefault(require("./SubmitFormButton"));
 
-var _AddressInput = _interopRequireDefault(require("./AddressInput"));
+var _useStandardFormInput = _interopRequireDefault(require("./useStandardFormInput"));
 
-var _MoneyInput = require("./MoneyInput");
+var _validators = _interopRequireDefault(require("./validators"));
+
+var _ReactSelectField = _interopRequireWildcard(require("./ReactSelectField"));
+
+var _NestedFormFieldContext = _interopRequireDefault(require("./NestedFormFieldContext"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 

package/lib/validators/validators.js

@@ -82,7 +82,7 @@ function minCount(count) {
 
 var maxValue = function maxValue(value) {
   return function (inputValue) {
-    if (inputValue && value) {
+    if (inputValue != null && value != null) {
       return inputValue <= value ? undefined : "Maximum value ".concat(value, " exceeded");
     } else {
       return undefined;
@@ -94,7 +94,7 @@ exports.maxValue = maxValue;
 
 var minValue = function minValue(value) {
   return function (inputValue) {
-    if (inputValue && value) {
+    if (inputValue != null && value != null) {
       return inputValue >= value ? undefined : "Minimum value ".concat(value, " not met");
     } else {
       return undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "envoc-form",
-  "version": "3.0.0",
+  "version": "3.3.0",
   "description": "Envoc form components",
   "keywords": [
     "react-component",
@@ -26,7 +26,8 @@
     "axios": "^0.21.1",
     "classnames": "^2.3.1",
     "date-fns": "^2.22.1",
-    "envoc-request": "^3.0.0",
+    "envoc-request": "^3.3.0",
+    "lodash": "^4.17.21",
     "lru-cache": "^6.0.0",
     "prop-types": "^15.7.2",
     "react-date-picker": "^8.2.0",

package/src/AddressInput/__snapshots__/AddesssInput.test.js.snap

@@ -110,7 +110,7 @@ exports[`AddressInput has matching snapshot 1`] = `
                 class=" css-lbak6p-Component"
               >
                 <div
-                  class=" css-1osw1h9-placeholder"
+                  class=" css-1vk4ta-placeholder"
                 >
                   State
                 </div>

package/src/AddressInput/index.js

@@ -1,2 +1,3 @@
 import AddressInput from './AddressInput';
-export default AddressInput;
+import UsStates from './UsStates';
+export { AddressInput as default, UsStates };

package/src/BoolInput/__snapshots__/BoolInput.test.js.snap

@@ -23,7 +23,7 @@ exports[`BoolInput has matching snapshot 1`] = `
             class=" css-lbak6p-Component"
           >
             <div
-              class=" css-1osw1h9-placeholder"
+              class=" css-1vk4ta-placeholder"
             >
               Select...
             </div>

package/src/DatePickerInput/DatePickerInput.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import DatePicker from 'react-date-picker';
+import DatePicker from 'react-date-picker/dist/entry.nostyle';
 import parseISO from 'date-fns/parseISO';
 import classnames from 'classnames';
 

package/src/FileInput/index.js

@@ -1,4 +1,5 @@
 import FileInput from './FileInput';
 import DropzoneFileInput from './DropzoneFileInput';
+import DefaultFileList from './DefaultFileList';
 
-export { FileInput, DropzoneFileInput };
+export { FileInput, DropzoneFileInput, DefaultFileList };

package/src/Form/index.js

@@ -1,3 +1,11 @@
+import FocusError from './FocusError';
 import Form from './Form';
+import FormBasedPreventNavigation from './FormBasedPreventNavigation';
 import ServerErrorContext from './ServerErrorContext';
-export { Form as default, ServerErrorContext };
+
+export {
+  Form as default,
+  ServerErrorContext,
+  FocusError,
+  FormBasedPreventNavigation,
+};

package/src/FormInput/FormInput.js

@@ -15,6 +15,7 @@ import FormGroupWrapper from '../FormGroupWrapper';
 import DatePickerInput from '../DatePickerInput';
 import ReactSelectField from '../ReactSelectField';
 import useStandardFormInput from '../useStandardFormInput';
+import { MoneyFormattedInput } from '../MoneyFormattedInput';
 import { FileInput, DropzoneFileInput } from '../FileInput';
 
 export default function FormInput(props) {
@@ -57,6 +58,8 @@ function StandardFieldGroup(props) {
       return <FormGroupWrapper {...props} Component={FileInput} />;
     case 'textarea':
       return <FormGroupWrapper {...props} Component={TextAreaInput} />;
+    case 'moneyFormatted':
+      return <FormGroupWrapper {...props} Component={MoneyFormattedInput} />;
     default:
       return <FormGroupWrapper {...props} Component={DefaultInput} />;
   }

package/src/FormInput/__snapshots__/FormInput.test.js.snap

@@ -234,7 +234,7 @@ exports[`FormInput has matching select snapshot 1`] = `
             class=" css-lbak6p-Component"
           >
             <div
-              class=" css-1osw1h9-placeholder"
+              class=" css-1vk4ta-placeholder"
             >
               Select...
             </div>

package/src/MoneyFormattedInput/MoneyFormattedInput.js

@@ -0,0 +1,115 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useField } from 'formik';
+import debounce from 'lodash/debounce';
+import classNames from 'classnames';
+
+// Money input that will format the value to always have commas, a single decimal, and
+// exactly two digits after the decimal. This happens after a delay (using debounce).
+export default function MoneyFormattedInput({
+  name,
+  onBlur,
+  onChange,
+  classname,
+  disabled = false,
+  debounceTimer = 1500,
+  meta,
+}) {
+  // The displayed state and formik state are two seperate values that we handle
+  const [inputValue, setInputValue] = useState('');
+  const [{ value: formikValue }] = useField(name);
+
+  const handleChangeDebounce = useMemo(() => {
+    return debounce(debouncedUpdateInput, debounceTimer);
+
+    function debouncedUpdateInput(value) {
+      var result = formatToCurrency(value);
+
+      setInputValue(result ?? '');
+
+      // sets value in formik
+      onChange(result ?? '');
+      onBlur();
+    }
+  }, [onBlur, onChange]);
+
+  // Format first render
+  useEffect(() => {
+    var formattedFormikValue = formatToCurrency(formikValue);
+    setInputValue(formattedFormikValue ?? '');
+  }, [formikValue]);
+
+  function handleChange(e) {
+    const onlyNumbersDecimalComma = e.target.value
+      .toString()
+      .replace(/[^.,0-9]/g, '');
+
+    setInputValue(onlyNumbersDecimalComma);
+    handleChangeDebounce(onlyNumbersDecimalComma);
+  }
+
+  return (
+    <>
+      <div className="input-group">
+        <div className="input-group-prepend">
+          <span className="input-group-text">$</span>
+        </div>
+        <input
+          name={name}
+          type="text"
+          value={inputValue}
+          onChange={handleChange}
+          onBlur={onBlur}
+          disabled={disabled}
+          className={classNames(
+            classname,
+            meta.error === 'Required' ? 'is-invalid' : '',
+            'react-select-input money-input form-control'
+          )}
+        />
+      </div>
+    </>
+  );
+}
+
+function formatToCurrency(value) {
+  if (value === null || value === undefined) {
+    return null;
+  }
+
+  // 'value' is sometimes a number on first render
+  const onlyNumbersDecimal = value.toString().replace(/[^.0-9]/g, '');
+
+  if (!onlyNumbersDecimal) {
+    return null;
+  }
+
+  var result = new Intl.NumberFormat('en-US', {
+    style: 'decimal',
+    minimumSignificantDigits: 2,
+    minimumFractionDigits: 2,
+  }).format(parseFloat(onlyNumbersDecimal));
+
+  result = formatTwoDecimalPlaces(result);
+  return result;
+}
+
+function formatTwoDecimalPlaces(value) {
+  const decimalIndex = value.indexOf('.');
+
+  // If the string doesn't contain a decimal OR
+  // the string contains a single '.' with nothing to the right of the decimal -> append '.00'
+  // Reason: parseFloat will remove '.00' from whole numbers (ex. 350.00 -> 350)
+  if (!value.includes('.')) {
+    return value.concat('.00');
+  }
+  // If 2 or more characters to the right of the decimal
+  else if (!!value.charAt(decimalIndex + 2)) {
+    return value.substring(0, decimalIndex + 3);
+  }
+  // If only 1 character to the right of the decimal
+  else if (!!value.charAt(decimalIndex + 1)) {
+    return value.substring(0, decimalIndex + 2).concat('0');
+  }
+
+  return value;
+}

package/src/MoneyFormattedInput/index.js

@@ -0,0 +1,3 @@
+import MoneyFormattedInput from './MoneyFormattedInput';
+
+export { MoneyFormattedInput };

package/src/ReactSelectField/ReactSelectField.js

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React, { useEffect, useRef } from 'react';
 import { default as ReactSelect } from 'react-select';
 
@@ -17,6 +18,8 @@ const red = '#f86c6b';
 const inputBorderColor = '#c2cfd6';
 const inputBorderColorFocused = '#8ad4ee';
 const inputBoxShadowFocused = '0 0 0 0.2rem rgba(32, 168, 216, 0.25)';
+const placeholderColor = '#9ca3af';
+const disabledSingleValueColor = '#4b5563';
 
 export const customStyles = {
   control: (provided, { isFocused, selectProps }) => {
@@ -35,6 +38,13 @@ export const customStyles = {
     };
   },
   menu: (provided) => ({ ...provided, zIndex: 3 }),
+  singleValue: (provided, state) => {
+    const color = state.isDisabled ? disabledSingleValueColor : '';
+    return { ...provided, color };
+  },
+  placeholder: (defaultStyles) => {
+    return { ...defaultStyles, color: placeholderColor };
+  },
 };
 
 // internal to forms use only
@@ -59,6 +69,28 @@ export default function ReactSelectInput({
     onSelectedRef.current && onSelectedRef.current(selectedItems);
   }, [selectedItems]);
 
+  const onBlurRef = useRef(onBlur);
+  onBlurRef.current = onBlur;
+  const { touched } = meta;
+
+  useEffect(() => {
+    if (!touched) return;
+
+    // without the timer set to 0, if the empty option is selected the required message doesn't appear until clicked away from the select input
+    const timerRef = setTimeout(() => {
+      onBlurRef.current && onBlurRef.current();
+    }, 0);
+
+    return () => {
+      clearTimeout(timerRef);
+    };
+  }, [value, touched]);
+
+  const classes = classNames(className, 'react-select-input', {
+    'is-invalid': !!meta.error,
+    disabled: disabled,
+  });
+
   return (
     <ReactSelect
       {...props}
@@ -69,7 +101,8 @@ export default function ReactSelectInput({
       getOptionValue={getOptionValue}
       value={selectedItems}
       onChange={handleChange}
-      className="react-select-input"
+      onBlur={() => onBlur()}
+      className={classes}
       theme={overrideTheme}
       styles={customStyles}
       menuPortalTarget={document.body}