envoc-form 2.0.1-7 → 2.0.1

package/src/MoneyInput/moneyInputProps.js

@@ -1,12 +1,12 @@
-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;
+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 +1,6 @@
-import React from 'react';
-
-// TODO: better name?
-const NestedFormFieldContext = React.createContext();
-
-export default NestedFormFieldContext;
+import React from 'react';
+
+// TODO: better name?
+const NestedFormFieldContext = React.createContext();
+
+export default NestedFormFieldContext;

package/src/ReactSelectField/ReactSelectField.js

@@ -1,120 +1,122 @@
-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)';
-
-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 }),
-};
-
-// 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]);
-
-  return (
-    <ReactSelect
-      {...props}
-      options={options}
-      isDisabled={disabled}
-      hasErrors={meta.error}
-      getOptionLabel={(option) => option.label}
-      getOptionValue={getOptionValue}
-      value={selectedItems}
-      onChange={handleChange}
-      className="react-select-input"
-      theme={overrideTheme}
-      styles={customStyles}
-    />
-  );
-
-  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);
-    }
-  }
-}
+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)';
+
+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 }),
+};
+
+// 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]);
+
+  return (
+    <ReactSelect
+      {...props}
+      options={options}
+      isDisabled={disabled}
+      hasErrors={meta.error}
+      getOptionLabel={(option) => option.label}
+      getOptionValue={getOptionValue}
+      value={selectedItems}
+      onChange={handleChange}
+      className="react-select-input"
+      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 +1,6 @@
-import ReactSelectField, {
-  overrideTheme,
-  customStyles,
-} from './ReactSelectField';
-
-export { ReactSelectField as default, overrideTheme, customStyles };
+import ReactSelectField, {
+  overrideTheme,
+  customStyles,
+} from './ReactSelectField';
+
+export { ReactSelectField as default, overrideTheme, customStyles };

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

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

package/src/StandardFormActions.js

@@ -1,27 +1,27 @@
-import React from 'react';
-import { Button } from 'reactstrap';
-import { useFormikContext } from 'formik';
-import SubmitFormButton from './SubmitFormButton';
-
-export default function StandardFormActions({
-  allowPristineSubmit,
-  handleCancel,
-}) {
-  const { isSubmitting } = useFormikContext();
-  return (
-    <>
-      <SubmitFormButton allowPristineSubmit={allowPristineSubmit} />
-      &nbsp;
-      <Button
-        type="button"
-        color="link"
-        disabled={isSubmitting}
-        onClick={handleCancel || goBack}>
-        Cancel
-      </Button>
-    </>
-  );
-  function goBack() {
-    window.history.back();
-  }
-}
+import React from 'react';
+import { Button } from 'reactstrap';
+import { useFormikContext } from 'formik';
+import SubmitFormButton from './SubmitFormButton';
+
+export default function StandardFormActions({
+  allowPristineSubmit,
+  handleCancel,
+}) {
+  const { isSubmitting } = useFormikContext();
+  return (
+    <>
+      <SubmitFormButton allowPristineSubmit={allowPristineSubmit} />
+      &nbsp;
+      <Button
+        type="button"
+        color="link"
+        disabled={isSubmitting}
+        onClick={handleCancel || goBack}>
+        Cancel
+      </Button>
+    </>
+  );
+  function goBack() {
+    window.history.back();
+  }
+}

package/src/SubmitFormButton.js

@@ -1,28 +1,28 @@
-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>
-  );
-}
+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>
+  );
+}

package/src/__Tests__/FormTestBase.js

@@ -1,11 +1,14 @@
-import React from 'react';
-import { HashRouter } from 'react-router-dom';
-import Form from '../Form';
-
-export default function FormTestBase({ children }) {
-  return (
-    <HashRouter>
-      <Form onSubmit={() => {}}>{children}</Form>
-    </HashRouter>
-  );
-}
+import '@testing-library/jest-dom/extend-expect';
+import React from 'react';
+import { HashRouter } from 'react-router-dom';
+import Form from '../Form';
+
+export default function FormTestBase({ children, initialValues }) {
+  return (
+    <HashRouter>
+      <Form onSubmit={() => {}} initialValues={initialValues}>
+        {children}
+      </Form>
+    </HashRouter>
+  );
+}

package/src/__Tests__/IconInput.test.js

@@ -1,23 +1,23 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import FormTestBase from './FormTestBase';
-import IconInput from '../IconInput';
-
-describe('IconInput', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        <IconInput name="test" icon="fa fa-user" helpText="help text" />
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        <IconInput name="test" icon="fa fa-user" helpText="help text" />
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});
+import React from 'react';
+import { render } from '@testing-library/react';
+import FormTestBase from './FormTestBase';
+import IconInput from '../IconInput';
+
+describe('IconInput', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        <IconInput name="test" icon="fa fa-user" helpText="help text" />
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        <IconInput name="test" icon="fa fa-user" helpText="help text" />
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/__Tests__/StandardFormActions.test.js

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

package/src/__Tests__/SubmitFormButton.test.js

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

package/src/__Tests__/__snapshots__/IconInput.test.js.snap

@@ -1,38 +1,38 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`IconInput has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="input-group"
-    >
-      <div
-        class="input-group-prepend"
-      >
-        <span
-          class="input-group-text"
-        >
-          <i
-            class="fa fa-user"
-          />
-        </span>
-      </div>
-      <input
-        aria-invalid="false"
-        class="form-control"
-        id="test"
-        name="test"
-        type="text"
-        value=""
-      />
-      <div
-        class="invalid-feedback"
-      >
-        help text
-      </div>
-    </div>
-  </form>
-</DocumentFragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconInput has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  >
+    <div
+      class="input-group"
+    >
+      <div
+        class="input-group-prepend"
+      >
+        <span
+          class="input-group-text"
+        >
+          <i
+            class="fa fa-user"
+          />
+        </span>
+      </div>
+      <input
+        aria-invalid="false"
+        class="form-control"
+        id="test"
+        name="test"
+        type="text"
+        value=""
+      />
+      <div
+        class="invalid-feedback"
+      >
+        help text
+      </div>
+    </div>
+  </form>
+</DocumentFragment>
+`;