envoc-form 3.3.0 → 4.0.1-0

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

@@ -1,52 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FormInputArray has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="field-array-card card"
-    >
-      <div
-        class="card-header card-action-header d-flex align-items-baseline"
-      >
-        <strong
-          class="mr-auto"
-        >
-          Names
-        </strong>
-        <div
-          class="card-action-header-actions"
-        >
-          <button
-            class="add-array-item btn btn-link"
-            title="Add an additional item"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="svg-inline--fa fa-plus fa-w-14 "
-              data-icon="plus"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              viewBox="0 0 448 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-                fill="currentColor"
-              />
-            </svg>
-             Add New
-          </button>
-        </div>
-      </div>
-      <div
-        class="card-body"
-      />
-    </div>
-  </form>
-</DocumentFragment>
-`;

package/src/FormInputArray/form-input-array.scss

@@ -1,13 +0,0 @@
-.field-array-card {
-  margin-bottom: 1rem;
-
-  .field-array-item {
-    &.removed {
-      display: none;
-    }
-
-    > .remove-array-item {
-      display: flex;
-    }
-  }
-}

package/src/FormInputArray/index.js

@@ -1,2 +0,0 @@
-import FormInputArray from './FormInputArray';
-export default FormInputArray;

package/src/FormSection.js

@@ -1,13 +0,0 @@
-import React, { useContext } from 'react';
-import NestedFormFieldContext from './NestedFormFieldContext';
-
-export default function FormSection({ children, name }) {
-  const parentContext = useContext(NestedFormFieldContext);
-  const effectiveValue = parentContext ? `${parentContext}.${name}` : name;
-
-  return (
-    <NestedFormFieldContext.Provider value={effectiveValue}>
-      {children}
-    </NestedFormFieldContext.Provider>
-  );
-}

package/src/IconInput.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupText,
-  Input as BootstrapInput,
-  FormFeedback,
-} from 'reactstrap';
-import useStandardFormInput from './useStandardFormInput';
-
-export default function IconInput({ className, icon, helpText, ...props }) {
-  const [input, meta] = useStandardFormInput(props);
-  return (
-    <InputGroup className={className}>
-      <InputGroupAddon addonType="prepend">
-        <InputGroupText>
-          <i className={icon} />
-        </InputGroupText>
-      </InputGroupAddon>
-      <BootstrapInput invalid={!!meta.error} {...input} />
-      {meta.error && <FormFeedback>{meta.error}</FormFeedback>}
-      {helpText && <FormFeedback>{helpText}</FormFeedback>}
-    </InputGroup>
-  );
-}
-
-IconInput.propTypes = {
-  icon: PropTypes.string,
-  className: PropTypes.string,
-};

package/src/InlineFormInput/InlineFormInput.js

@@ -1,6 +0,0 @@
-import React from 'react';
-import FormInput from '../FormInput';
-
-export default function InlineFormInput(props) {
-  return <FormInput className="inline-form-input col" {...props} />;
-}

package/src/InlineFormInput/InlineFormInput.test.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { FormTestBase } from '../__Tests__';
-import InlineFormInput from './InlineFormInput';
-
-describe('MoneyInput', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        <InlineFormInput name="test" />
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        <InlineFormInput name="test" />
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});

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

@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MoneyInput has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="inline-form-input col form-group"
-    >
-      <div
-        id="test-error-scroll-target"
-        style="display: none;"
-      />
-      <input
-        aria-invalid="false"
-        class="inline-form-input col form-control"
-        id="test"
-        name="test"
-        type="text"
-        value=""
-      />
-    </div>
-  </form>
-</DocumentFragment>
-`;

package/src/InlineFormInput/index.js

@@ -1,3 +0,0 @@
-import InlineFormInput from './InlineFormInput';
-
-export default InlineFormInput;

package/src/InlineFormInput/inline-form-input.scss

@@ -1,3 +0,0 @@
-.inline-form-input.form-group {
-  display: inline-block;
-}

package/src/MoneyFormattedInput/MoneyFormattedInput.js

@@ -1,115 +0,0 @@
-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

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

package/src/MoneyInput/InlineMoneyInput.js

@@ -1,7 +0,0 @@
-import React from 'react';
-import InlineFormInput from '../InlineFormInput';
-import moneyInputProps from './moneyInputProps';
-
-export default function InlineMoneyInput(props) {
-  return <InlineFormInput {...moneyInputProps} {...props} />;
-}

package/src/MoneyInput/MoneyInput.js

@@ -1,7 +0,0 @@
-import React from 'react';
-import FormInput from '../FormInput';
-import moneyInputProps from './moneyInputProps';
-
-export default function MoneyInput(props) {
-  return <FormInput {...moneyInputProps} {...props} />;
-}

package/src/MoneyInput/MoneyInputs.test.js

@@ -1,43 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { FormTestBase } from '../__Tests__';
-import MoneyInput from './MoneyInput';
-import InlineMoneyInput from './InlineMoneyInput';
-
-describe('MoneyInput', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        <MoneyInput name="moneytest" />
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        <MoneyInput name="moneytest" />
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});
-
-describe('InlineMoneyInput', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        <InlineMoneyInput name="moneytest" />
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        <InlineMoneyInput name="moneytest" />
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});

package/src/MoneyInput/__snapshots__/MoneyInputs.test.js.snap

@@ -1,81 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`InlineMoneyInput has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="money-input form-group"
-    >
-      <div
-        id="moneytest-error-scroll-target"
-        style="display: none;"
-      />
-      <div
-        class="input-group"
-      >
-        <div
-          class="input-group-prepend"
-        >
-          <span
-            class="input-group-text"
-          >
-            $
-          </span>
-        </div>
-        <input
-          aria-invalid="false"
-          class="money-input form-control"
-          id="moneytest"
-          min="0"
-          name="moneytest"
-          step="0.01"
-          type="number"
-          value=""
-        />
-      </div>
-    </div>
-  </form>
-</DocumentFragment>
-`;
-
-exports[`MoneyInput has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="money-input form-group"
-    >
-      <div
-        id="moneytest-error-scroll-target"
-        style="display: none;"
-      />
-      <div
-        class="input-group"
-      >
-        <div
-          class="input-group-prepend"
-        >
-          <span
-            class="input-group-text"
-          >
-            $
-          </span>
-        </div>
-        <input
-          aria-invalid="false"
-          class="money-input form-control"
-          id="moneytest"
-          min="0"
-          name="moneytest"
-          step="0.01"
-          type="number"
-          value=""
-        />
-      </div>
-    </div>
-  </form>
-</DocumentFragment>
-`;

package/src/MoneyInput/index.js

@@ -1,4 +0,0 @@
-import MoneyInput from './MoneyInput';
-import InlineMoneyInput from './InlineMoneyInput';
-
-export { MoneyInput, InlineMoneyInput };

package/src/MoneyInput/money-input.scss

@@ -1,3 +0,0 @@
-input.money-input {
-  text-align: right;
-}

package/src/MoneyInput/moneyInputProps.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { InputGroupAddon } from 'reactstrap';
-
-const MoneyPrepend = <InputGroupAddon addonType="prepend">$</InputGroupAddon>;
-const moneyInputProps = {
-  type: 'number',
-  step: '0.01',
-  min: '0',
-  prepend: MoneyPrepend,
-  className: 'money-input',
-};
-export default moneyInputProps;

package/src/NestedFormFieldContext.js

@@ -1,6 +0,0 @@
-import React from 'react';
-
-// TODO: better name?
-const NestedFormFieldContext = React.createContext();
-
-export default NestedFormFieldContext;

package/src/ReactSelectField/ReactSelectField.js

@@ -1,155 +0,0 @@
-import classNames from 'classnames';
-import React, { useEffect, useRef } from 'react';
-import { default as ReactSelect } from 'react-select';
-
-export const overrideTheme = (theme) => {
-  return {
-    ...theme,
-    borderRadius: 0,
-    spacing: Object.assign(
-      {},
-      { ...theme.spacing },
-      { baseUnit: 2, controlHeight: 35 }
-    ),
-  };
-};
-
-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 }) => {
-    return {
-      ...provided,
-      paddingLeft: '7px',
-      '&:hover': {
-        borderColor: isFocused ? inputBorderColorFocused : inputBorderColor,
-      },
-      borderColor: selectProps.hasErrors
-        ? red
-        : isFocused
-        ? inputBorderColorFocused
-        : inputBorderColor,
-      boxShadow: isFocused ? inputBoxShadowFocused : '',
-    };
-  },
-  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
-export default function ReactSelectInput({
-  className,
-  meta,
-  disabled,
-  onSelected,
-  onChange,
-  onBlur,
-  value,
-  options,
-  defaultValue,
-  defaultIndex,
-  ...props
-}) {
-  const selectedItems = getSelectedItems();
-  const onSelectedRef = useRef(onSelected);
-  onSelectedRef.current = onSelected;
-
-  useEffect(() => {
-    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}
-      options={options}
-      isDisabled={disabled}
-      hasErrors={meta.error}
-      getOptionLabel={(option) => option.label}
-      getOptionValue={getOptionValue}
-      value={selectedItems}
-      onChange={handleChange}
-      onBlur={() => onBlur()}
-      className={classes}
-      theme={overrideTheme}
-      styles={customStyles}
-      menuPortalTarget={document.body}
-      menuPlacement="auto"
-    />
-  );
-
-  function getOptionValue(option) {
-    if (typeof props.getOptionValue === 'function') {
-      return props.getOptionValue(option);
-    } else {
-      return option.value;
-    }
-  }
-
-  function getSelectedItems() {
-    if (defaultValue !== undefined && value === '') {
-      value = defaultValue;
-      onChange(defaultValue);
-    }
-    if (defaultIndex !== undefined && value === '') {
-      const item = options[defaultIndex];
-      onChange(getOptionValue(item));
-      return item;
-    }
-
-    const valueIsArray = Array.isArray(value);
-    const matches = options.filter((x) => {
-      if (valueIsArray) {
-        return value.includes(getOptionValue(x));
-      } else {
-        return value === getOptionValue(x);
-      }
-    });
-    if (matches.length < 1) {
-      return null;
-    }
-    return matches;
-  }
-
-  function handleChange(e) {
-    if (e == null) {
-      onChange(null);
-    } else if (Array.isArray(e)) {
-      onChange(e.map((x) => x.value));
-    } else {
-      onChange(e.value);
-    }
-  }
-}

package/src/ReactSelectField/index.js

@@ -1,6 +0,0 @@
-import ReactSelectField, {
-  overrideTheme,
-  customStyles,
-} from './ReactSelectField';
-
-export { ReactSelectField as default, overrideTheme, customStyles };

package/src/ReactSelectField/react-select-field.scss

@@ -1,5 +0,0 @@
-@import '../variables';
-
-div.react-select-input.has-error {
-  border-color: $red;
-}

package/src/SubmitFormButton.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import { Button } from 'reactstrap';
-import { useFormikContext } from 'formik';
-
-export default function SubmitFormButton({
-  allowPristineSubmit,
-  children,
-  ...props
-}) {
-  const { isSubmitting, dirty } = useFormikContext();
-  const preventSubmit = (!dirty && !allowPristineSubmit) || isSubmitting;
-  return (
-    <Button
-      type="submit"
-      color="primary"
-      disabled={preventSubmit}
-      title={
-        isSubmitting
-          ? 'Loading, please wait...'
-          : preventSubmit
-          ? "You haven't made any changes"
-          : ''
-      }
-      {...props}>
-      {children || 'Submit'}
-    </Button>
-  );
-}