envoc-form 3.3.0 → 4.0.1-2

package/src/FileInput/file-input.scss

@@ -1,58 +0,0 @@
-@import '../variables';
-
-.file-input {
-  &.is-invalid {
-    .custom-file-label {
-      border: 1px solid $red;
-    }
-  }
-}
-
-.custom-file-input:disabled ~ .custom-file-label {
-  background-color: $input-disabled-background-color;
-  border-color: $input-disabled-border-color;
-  &:after {
-    display: none !important;
-  }
-}
-
-section.react-dropzone {
-  & > div {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    align-items: center;
-    border: 1px dashed #d8dbe0;
-    border-radius: 0.25rem;
-    background-color: white;
-    color: #8a93a2;
-    outline: none;
-    margin: 0;
-    padding: 20px;
-    transition: 'border .24s ease-in-out';
-    cursor: pointer;
-    &:focus,
-    &:focus-within {
-      border-color: #958bef;
-      box-shadow: 0 0 0 0.2rem rgba(50, 31, 219, 0.25);
-    }
-  }
-  &.active > div,
-  &.accept > div {
-    border-color: #958bef;
-    box-shadow: 0 0 0 0.2rem rgba(50, 31, 219, 0.25);
-  }
-  &.reject > div {
-    color: rgb(229, 83, 83);
-    border-color: rgb(229, 83, 83);
-    box-shadow: rgba(229, 83, 83, 0.25) 0px 0px 0px 3.2px;
-  }
-  &.disabled > div {
-    background-color: $input-disabled-background-color;
-    border-color: $input-disabled-border-color;
-    cursor: no-drop;
-  }
-  & > aside > .list-group:not(:empty) {
-    margin-top: 1rem;
-  }
-}

package/src/FileInput/index.js

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

package/src/Form/Form.test.js

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

package/src/Form/FormBasedPreventNavigation.js

@@ -1,25 +0,0 @@
-import { useEffect } from 'react';
-import { useFormikContext } from 'formik';
-
-export default function FormBasedPreventNavigation({
-  ignoreLostChanges,
-  promptMessage = 'Changes you made may not be saved.',
-}) {
-  const { dirty, isSubmitting } = useFormikContext();
-  const preventNavigate = !ignoreLostChanges && dirty && !isSubmitting;
-  useEffect(() => {
-    if (!preventNavigate) {
-      return;
-    }
-    window.addEventListener('beforeunload', beforeUnload);
-    return () => {
-      window.removeEventListener('beforeunload', beforeUnload);
-    };
-    function beforeUnload(e) {
-      e.preventDefault();
-      e.returnValue = promptMessage;
-    }
-  }, [preventNavigate, promptMessage]);
-  // TODO: https://reactrouter.com/docs/en/v6/upgrading/v5#prompt-is-not-currently-supported
-  return null;
-}

package/src/Form/ServerErrorContext.js

@@ -1,7 +0,0 @@
-import React from 'react';
-
-const ServerErrorContext = React.createContext({
-  getError: (path) => {},
-  setError: (path, errorMessage) => {},
-});
-export default ServerErrorContext;

package/src/Form/index.js

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

package/src/FormGroup.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import {
-  FormGroup as BootstrapFormGroup,
-  Label,
-  FormFeedback,
-  FormText,
-  Alert,
-} from 'reactstrap';
-
-const FormGroup = ({
-  label,
-  id,
-  helpText,
-  className,
-  style,
-  children,
-  meta,
-}) => {
-  return (
-    <BootstrapFormGroup className={className} style={style}>
-      {!!meta.warning && <Alert color="warning">{meta.warning}</Alert>}
-      {label && <Label htmlFor={id}>{label}</Label>}
-      {children}
-      {meta.error && <FormFeedback>{meta.error}</FormFeedback>}
-      {helpText && <FormText>{helpText}</FormText>}
-    </BootstrapFormGroup>
-  );
-};
-
-export default FormGroup;

package/src/FormGroupWrapper.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import { InputGroup } from 'reactstrap';
-import FormGroup from './FormGroup';
-import ErrorScrollTarget from './ErrorScrollTarget';
-
-export default function FormGroupWrapper({
-  prepend,
-  append,
-  Component,
-  helpText,
-  ...props
-}) {
-  const { meta } = props;
-  return (
-    <FormGroup meta={meta} helpText={helpText} {...props}>
-      <ErrorScrollTarget name={props.name} />
-      {prepend || append ? (
-        <InputGroup>
-          {prepend}
-          <Component {...props} />
-          {append}
-        </InputGroup>
-      ) : (
-        <Component {...props} />
-      )}
-    </FormGroup>
-  );
-}

package/src/FormInput/FormInput.js

@@ -1,148 +0,0 @@
-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 { MoneyFormattedInput } from '../MoneyFormattedInput';
-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} />;
-    case 'moneyFormatted':
-      return <FormGroupWrapper {...props} Component={MoneyFormattedInput} />;
-    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 && !props.isMulti
-      ? [{ 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 && !props.isMulti) {
-      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 +0,0 @@
-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();
-  });
-});