All files / react-filestack/src ReactFilestack.jsx

89.74% Statements 35/39
81.82% Branches 18/22
100% Functions 8/8
89.74% Lines 35/39
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 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109                    1x 2x                                               6x 6x 6x 6x 1x 1x         6x 2x 2x           6x           6x 6x 6x 6x   6x 1x 1x 1x         5x 1x 4x 1x 3x 1x 2x   2x 1x     1x       14x 14x 1x       13x 13x                          
import React, { Component } from 'react';
import filestack from 'filestack-js';
import PropTypes from 'prop-types';
 
class ReactFilestack extends Component {
  static defaultProps = {
    file: null,
    link: false,
    buttonText: 'Pick file',
    buttonClass: '',
    onSuccess: result => console.log(result),
    onError: error => console.error(error),
    mode: 'pick',
    options: {},
    security: null,
    children: null,
    render: null,
  };
 
  static propTypes = {
    file: PropTypes.objectOf(PropTypes.any),
    apikey: PropTypes.string.isRequired,
    link: PropTypes.bool,
    mode: PropTypes.string,
    buttonText: PropTypes.string,
    buttonClass: PropTypes.string,
    onSuccess: PropTypes.func,
    onError: PropTypes.func,
    options: PropTypes.objectOf(PropTypes.any),
    security: PropTypes.objectOf(PropTypes.any),
    children: PropTypes.node,
    render: PropTypes.func,
  };
 
  onClickPick = (event) => {
    event.stopPropagation();
    event.preventDefault();
    const { apikey, onSuccess, onError, options, mode, file, security } = this.props;
    const onFinished = (result) => {
      Eif (typeof onSuccess === 'function') {
        onSuccess(result);
      } else {
        console.log(result);
      }
    };
    const onFail = (error) => {
      Eif (typeof onError === 'function') {
        onError(error);
      } else {
        console.error(error);
      }
    };
 
    this.initClient(mode, apikey, options, file, security)
      .then(onFinished)
      .catch(onFail);
  };
 
  initClient = (mode, apikey, options, file, security) => {
    const { url, handle } = options;
    delete options.handle;
    delete options.url;
    const client = filestack.init(apikey, security);
 
    if (mode === 'transform') {
      return new Promise((resolve, reject) => {
        try {
          resolve(client.transform(url, options));
        } catch (err) {
          reject(err);
        }
      });
    } else if (mode === 'retrieve') {
      return client.retrieve(handle, options);
    } else if (mode === 'metadata') {
      return client.metadata(handle, options);
    } else if (mode === 'storeUrl') {
      return client.storeURL(url, options);
    } else Iif (mode === 'upload') {
      return client.upload(file, options);
    } else if (mode === 'remove') {
      return client.remove(handle, security);
    }
 
    return client.pick(options);
  };
 
  render () {
    const { buttonClass, buttonText, link, children, render: CustomRender } = this.props;
    if (CustomRender) {
      return (
        <CustomRender onPick={this.onClickPick} />
      );
    }
    const Tag = link ? 'a' : 'button';
    return (
      <Tag
        name="filestack"
        onClick={this.onClickPick}
        className={buttonClass}
      >
        {children || buttonText}
      </Tag>
    );
  }
}
 
export default ReactFilestack;