envoc-form 2.0.1-1 → 2.0.1-13

package/src/FormInput/FormInput.js

@@ -1,136 +1,144 @@
-import React from 'react';
-import classnames from 'classnames';
-import {
-  Input as BootstrapInput,
-  FormFeedback,
-  CustomInput,
-  FormText,
-  Alert,
-} from 'reactstrap';
-import lru from 'lru-cache';
-import PropTypes from 'prop-types';
-import TextareaAutosize from 'react-textarea-autosize';
-import { useAxiosRequest } from 'envoc-request';
-import FormGroupWrapper from '../FormGroupWrapper';
-import DatePickerInput from '../DatePickerInput';
-import ReactSelectField from '../ReactSelectField';
-import useStandardFormInput from '../useStandardFormInput';
-import FileInput from '../FileInput';
-
-export default function FormInput(props) {
-  const [input, meta] = useStandardFormInput(props);
-  const { className, hide } = props;
-  return (
-    <StandardFieldGroup
-      {...input}
-      className={classnames({ 'd-none': hide }, className)}
-      meta={meta}
-    />
-  );
-}
-
-FormInput.propTypes = {
-  id: PropTypes.string,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  name: PropTypes.string.isRequired,
-  placeholder: PropTypes.string,
-  helpText: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-};
-
-function StandardFieldGroup(props) {
-  switch (props.type) {
-    case 'date':
-      return <FormGroupWrapper {...props} Component={DatePicker} />;
-    case 'select':
-      if (props.optionsUrl) {
-        return <FormGroupWrapper {...props} Component={RemoteSelect} />;
-      } else {
-        return <FormGroupWrapper {...props} Component={Select} />;
-      }
-    case 'checkbox':
-    case 'radio':
-      return Checkbox(props);
-    case 'file':
-      return <FormGroupWrapper {...props} Component={FileInput} />;
-    case 'textarea':
-      return <FormGroupWrapper {...props} Component={TextAreaInput} />;
-    default:
-      return <FormGroupWrapper {...props} Component={DefaultInput} />;
-  }
-}
-
-const TextAreaInput = ({ className, meta, helpText, ...props }) => {
-  return (
-    <TextareaAutosize
-      cacheMeasurements
-      className={classnames(
-        className,
-        'form-control',
-        meta.error ? 'is-invalid' : ''
-      )}
-      {...props}
-    />
-  );
-};
-
-const DefaultInput = ({ meta, ...props }) => {
-  return <BootstrapInput invalid={!!meta.error} {...props} />;
-};
-
-const Select = ({ includeEmptyOption = true, options, ...props }) => {
-  const allOptions = includeEmptyOption
-    ? [{ label: ' ', value: null }, ...options]
-    : options;
-  return <ReactSelectField {...props} options={allOptions} />;
-};
-
-export const optionCache = new lru({ max: 500, maxAge: 1000 * 60 * 5 });
-const RemoteSelect = ({
-  optionsUrl,
-  includeEmptyOption = true,
-  includeOtherOption = false,
-  ...props
-}) => {
-  const request = {
-    method: 'get',
-    url: optionsUrl,
-    cache: optionCache,
-    autoExecute: true,
-  };
-  const webRequest = useAxiosRequest(request);
-  if (webRequest.error) {
-    return <Alert color="danger">An error occurred while loading.</Alert>;
-  }
-
-  const options = [];
-
-  if (webRequest.loading) {
-    options.push({ label: 'Loading...', value: '' });
-  } else {
-    if (includeEmptyOption) {
-      options.push({ label: ' ', value: null });
-    }
-    options.push(...webRequest.resp.data.result);
-    if (includeOtherOption) {
-      options.push({ label: 'Other', value: 'other' });
-    }
-  }
-
-  return <ReactSelectField {...props} options={options} />;
-};
-
-const DatePicker = ({ meta, ...props }) => {
-  return (
-    <DatePickerInput {...props} className={meta.error ? 'is-invalid' : ''} />
-  );
-};
-
-const Checkbox = ({ helpText, meta, ...props }) => {
-  return (
-    <React.Fragment>
-      <CustomInput {...props} />
-      {meta.error && <FormFeedback>{meta.error}</FormFeedback>}
-      {helpText && <FormText>{helpText}</FormText>}
-    </React.Fragment>
-  );
-};
+import React from 'react';
+import classnames from 'classnames';
+import {
+  Input as BootstrapInput,
+  FormFeedback,
+  CustomInput,
+  FormText,
+  Alert,
+} from 'reactstrap';
+import lru from 'lru-cache';
+import PropTypes from 'prop-types';
+import TextareaAutosize from 'react-textarea-autosize';
+import { useAxiosRequest } from 'envoc-request';
+import FormGroupWrapper from '../FormGroupWrapper';
+import DatePickerInput from '../DatePickerInput';
+import ReactSelectField from '../ReactSelectField';
+import useStandardFormInput from '../useStandardFormInput';
+import { FileInput, DropzoneFileInput } from '../FileInput';
+
+export default function FormInput(props) {
+  const [input, meta] = useStandardFormInput(props);
+  const { className, hide } = props;
+  return (
+    <StandardFieldGroup
+      {...input}
+      className={classnames({ 'd-none': hide }, className)}
+      meta={meta}
+    />
+  );
+}
+
+FormInput.propTypes = {
+  id: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  name: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
+  helpText: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+};
+
+function StandardFieldGroup(props) {
+  switch (props.type) {
+    case 'date':
+      return <FormGroupWrapper {...props} Component={DatePicker} />;
+    case 'select':
+      if (props.optionsUrl) {
+        return <FormGroupWrapper {...props} Component={RemoteSelect} />;
+      } else {
+        return <FormGroupWrapper {...props} Component={Select} />;
+      }
+    case 'checkbox':
+    case 'radio':
+      return Checkbox(props);
+    case 'file':
+      if (props.dropzone) {
+        return <FormGroupWrapper {...props} Component={DropzoneFileInput} />;
+      }
+      return <FormGroupWrapper {...props} Component={FileInput} />;
+    case 'textarea':
+      return <FormGroupWrapper {...props} Component={TextAreaInput} />;
+    default:
+      return <FormGroupWrapper {...props} Component={DefaultInput} />;
+  }
+}
+
+const TextAreaInput = ({ className, meta, helpText, ...props }) => {
+  return (
+    <TextareaAutosize
+      cacheMeasurements
+      className={classnames(
+        className,
+        'form-control',
+        meta.error ? 'is-invalid' : ''
+      )}
+      {...props}
+    />
+  );
+};
+
+const DefaultInput = ({ meta, ...props }) => {
+  return <BootstrapInput invalid={!!meta.error} {...props} />;
+};
+
+const Select = ({ includeEmptyOption = true, options, ...props }) => {
+  const allOptions = includeEmptyOption
+    ? [{ label: ' ', value: null }, ...options]
+    : options;
+  return <ReactSelectField {...props} options={allOptions} />;
+};
+
+// low cache value just to prevent the same dropdown from hitting the API at the same time
+// TODO: global cache provider / "envoc-cache" instead of this static instance
+export const optionCache = new lru({ max: 500, maxAge: 1000 * 10 });
+const RemoteSelect = ({
+  optionsUrl,
+  includeEmptyOption = true,
+  includeOtherOption = false,
+  cache = optionCache,
+  maxAge = 1000 * 10,
+  ...props
+}) => {
+  const request = {
+    method: 'get',
+    url: optionsUrl,
+    cache: cache,
+    maxAge: maxAge,
+    autoExecute: true,
+  };
+  const webRequest = useAxiosRequest(request);
+  if (webRequest.error) {
+    return <Alert color="danger">An error occurred while loading.</Alert>;
+  }
+
+  const options = [];
+
+  if (webRequest.loading) {
+    options.push({ label: 'Loading...', value: '' });
+  } else {
+    if (includeEmptyOption) {
+      options.push({ label: ' ', value: null });
+    }
+    options.push(...webRequest.resp.data.result);
+    if (includeOtherOption) {
+      options.push({ label: 'Other', value: 'other' });
+    }
+  }
+
+  return <ReactSelectField {...props} options={options} />;
+};
+
+const DatePicker = ({ meta, ...props }) => {
+  return (
+    <DatePickerInput {...props} className={meta.error ? 'is-invalid' : ''} />
+  );
+};
+
+const Checkbox = ({ helpText, meta, ...props }) => {
+  return (
+    <React.Fragment>
+      <CustomInput {...props} />
+      {meta.error && <FormFeedback>{meta.error}</FormFeedback>}
+      {helpText && <FormText>{helpText}</FormText>}
+    </React.Fragment>
+  );
+};

package/src/FormInput/FormInput.test.js

@@ -1,66 +1,66 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import { FormTestBase } from '../__Tests__';
-import FormInput from './FormInput';
-HTMLCanvasElement.prototype.getContext = () => {};
-
-describe('FormInput', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        <FormInput name="test" />
-      </FormTestBase>
-    );
-  });
-
-  it('has matching datepicker snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        <FormInput
-          name="test"
-          minDate={new Date('9/23/2020')}
-          maxDate={new Date('09/23/2021')}
-          type="date"
-        />
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-
-  it('has matching textarea snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        <FormInput name="test" type="textarea" />
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-
-  it('has matching checkbox snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        <FormInput name="test" type="checkbox" />
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-
-  it('has matching file input snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        <FormInput name="test" type="file" />
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-
-  it('has matching select snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        <FormInput name="test" type="select" options={[]} />
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { FormTestBase } from '../__Tests__';
+import FormInput from './FormInput';
+HTMLCanvasElement.prototype.getContext = () => {};
+
+describe('FormInput', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        <FormInput name="test" />
+      </FormTestBase>
+    );
+  });
+
+  it('has matching datepicker snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        <FormInput
+          name="test"
+          minDate={new Date('9/23/2020')}
+          maxDate={new Date('09/23/2021')}
+          type="date"
+        />
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+
+  it('has matching textarea snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        <FormInput name="test" type="textarea" />
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+
+  it('has matching checkbox snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        <FormInput name="test" type="checkbox" />
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+
+  it('has matching file input snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        <FormInput name="test" type="file" />
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+
+  it('has matching select snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        <FormInput name="test" type="select" options={[]} />
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});