All files index.js

100% Statements 24/24
100% Branches 2/2
100% Functions 9/9
100% Lines 18/18

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77                  1x   1x 1x 1x 1x 1x                                 2x 2x 2x 1x 1x     1x                 1x                           1x   1x 1x       1x 1x            
import React from 'react';
import PropTypes from 'prop-types';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { sagaInjector } from '@source4society/scepter-ui-utilities';
import { isEmpty, valueOrDefault, eitherOf } from '@source4society/scepter-utility-lib';
import { uploadToS3 } from './action';
import saga from './saga';
 
const fileInputRef = { input: null };
 
const S3FileUploadButton = ({ children, name, id, fileInputVisibility, fileSelectedHandler, className, signedUrl, accept, disabled, buttonProps, inputProps }) => {
  const changeHandler = makeChangeHandler(fileSelectedHandler, signedUrl);
  const refCallback = makeRefCallback(fileInputRef);
  const clickHandler = makeClickHandler(fileInputRef);
  return (
    <button className={className} onClick={clickHandler} disabled={eitherOf(isEmpty(signedUrl), disabled)} {...buttonProps}>
      {children}
      <input
        type="file"
        ref={refCallback}
        name={name}
        id={id}
        onChange={changeHandler}
        style={{ display: fileInputVisibility }}
        accept={accept}
        {...inputProps}
      />
    </button>
  );
};
 
export const makeClickHandler = (superScopedObject) => () => superScopedObject.input.click();
export const makeChangeHandler = (fileSelectedHandler, signedUrl) => () => fileSelectedHandler(signedUrl);
export const makeRefCallback = (superScopedObject) => (input) => {
  const referenceObject = superScopedObject;
  referenceObject.input = input;
};
 
S3FileUploadButton.defaultProps = {
  fileInputVisibility: 'none',
  className: '',
  accept: 'image/*',
  disabled: false,
  buttonProps: {},
  inputProps: {},
};
 
S3FileUploadButton.propTypes = {
  children: PropTypes.any,
  fileInputVisibility: PropTypes.string,
  fileSelectedHandler: PropTypes.func,
  name: PropTypes.string.isRequired,
  id: PropTypes.string.isRequired,
  className: PropTypes.string,
  signedUrl: PropTypes.string.isRequired,
  accept: PropTypes.string,
  disabled: PropTypes.bool,
  buttonProps: PropTypes.object,
  inputProps: PropTypes.object,
};
 
export const mapDispatchToProps = (dispatch) => ({
  fileSelectedHandler: (signedUrl, injectedFileInput) => {
    const fileInput = valueOrDefault(injectedFileInput, fileInputRef && fileInputRef.input);
    return dispatch(uploadToS3(signedUrl, fileInput));
  },
});
 
const withConnect = connect(null, mapDispatchToProps);
const withSaga = sagaInjector({ key: 'uploadToS3Button', saga });
export { S3FileUploadButton };
export default compose(
  withConnect,
  withSaga,
)(S3FileUploadButton);