@hipay/hipay-material-ui 3.11.2 → 3.12.1

package/src/HiForm/HiUpload.js

@@ -0,0 +1,386 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import keycode from 'keycode/index';
+import withStyles from '@mui/styles/withStyles';
+import HiUploadInput from './HiUploadInput';
+import HiIcon from '../HiIcon';
+
+export const styles = theme => ({
+    flexContainer: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    statusIcon: {
+        height: '80px',
+        width: '80px',
+        marginRight: '8px',
+        padding: '24px',
+        borderRadius: '2px',
+        backgroundColor: theme.palette.background2,
+        border: `1px solid ${theme.palette.middle.main}`,
+        color: `${theme.palette.middle.main} !important`,
+        fontSize: '80px',
+    },
+    dragOver: {},
+    inputContainer: {
+        flex: '1',
+        width: 'calc(100% - 88px)',
+    },
+    empty: {
+        border: `1px solid ${theme.palette.input.bottomLine}`,
+        color: `${theme.palette.neutral.main} !important`,
+    },
+    complete: {
+        border: `1px solid ${theme.palette.positive.main}`,
+        color: `${theme.palette.positive.main} !important`,
+        fontSize: '32px',
+    },
+    error: {
+        border: `1px solid ${theme.palette.negative.main}`,
+        color: `${theme.palette.negative.main} !important`,
+    },
+    fileButton: {
+        marginRight: 8,
+        '&$focusable': {
+            cursor: 'pointer',
+            '&:hover, &:focus, &$dragOver': {
+                border: `1px solid ${theme.palette.primary.main}`,
+                color: `${theme.palette.primary.main} !important`,
+            },
+        },
+    },
+    focusable: {},
+});
+
+class HiUpload extends React.PureComponent {
+    static propTypes = {
+        /**
+         * Useful to extend the style applied to components.
+         */
+        classes: PropTypes.object,
+        /**
+         * Classes CSS appliquées.
+         */
+        className: PropTypes.string,
+        /**
+         * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+         */
+        helperIcon: PropTypes.bool,
+        /**
+         * Texte de l'aide
+         */
+        helperText: PropTypes.string,
+        /**
+         * Identifiant unique
+         */
+        id: PropTypes.string,
+        /**
+         * Array containing each of the inputs the component has to show (represented by an object).
+         * If empty => unlimited number of files accepted
+         */
+        inputs: PropTypes.array.isRequired,
+        /**
+         * The method given to change the file.
+         */
+        onChange: PropTypes.func,
+        /**
+         * The method to delete a file.
+         */
+        onDeleteFile: PropTypes.func,
+        /**
+         * The method given to see the file.
+         */
+        onSeeFile: PropTypes.func,
+        /**
+         * True if can upload an unlimited number of files
+         */
+        values: PropTypes.array,
+    };
+
+    constructor() {
+        super();
+        this.state = {
+            dragOver: false,
+            droppable: false,
+        };
+    }
+
+    // When component mounts, we add eventListeners to handle the file drag and drop
+    componentDidMount() {
+        this.uploadFieldRef.addEventListener('dragenter', this.handleDragEnter, false);
+        this.uploadFieldRef.addEventListener('dragleave', this.handleDragLeave, false);
+        this.uploadFieldRef.addEventListener(
+            'dragover',
+            event => {
+                event.preventDefault();
+            },
+            false,
+        );
+        this.uploadFieldRef.addEventListener('drop', this.handleDrop, false);
+    }
+
+    componentWillUnmount() {
+        this.uploadFieldRef.removeEventListener('dragenter', this.handleDragEnter, false);
+        this.uploadFieldRef.removeEventListener('dragleave', this.handleDragLeave, false);
+        this.uploadFieldRef.removeEventListener(
+            'dragover',
+            event => {
+                event.preventDefault();
+            },
+            false,
+        );
+        this.uploadFieldRef.removeEventListener('drop', this.handleDrop, false);
+    }
+
+    getNextInputIndex() {
+        let index = 0;
+
+        // Add an input at the end
+        if (!this.props.inputs.length) {
+            index = this.props.values.length + 1;
+        } else {
+            // First empty input
+            for (let i = 0; i < this.props.values.length; i += 1) {
+                if (!this.props.values[i] || this.props.values[i].error || !this.props.values[i].value) {
+                    index = i;
+                    break;
+                }
+            }
+        }
+        return index;
+    }
+
+    // Action when files are dropped on the field
+    handleDrop = (event) => {
+        if (event.path[0].id === this.uploadIconRef.props.id) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (this.state.droppable) {
+                const index = this.getNextInputIndex();
+                const param = this.handleFile(event.dataTransfer.files, index);
+                this.setState({ dragOver: false });
+                this.props.onChange(param, 0);
+            } else {
+                this.setState({
+                    dragOver: false,
+                });
+            }
+        }
+    };
+
+    // Action when files are dragged over the field.
+    handleDragEnter = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.path[0].id === this.uploadIconRef.props.id) {
+            if (event.dataTransfer.items.length !== 1) {
+                event.dataTransfer.dropEffect = 'none';
+                this.props.onChange(
+                    {
+                        errorMessage: this.props.translations.errorDragEnter,
+                        value: null,
+                    },
+                    0,
+                );
+                this.setState({ dragOver: true });
+            } else {
+                this.setState({ droppable: true, dragOver: true });
+            }
+        }
+    };
+
+    // Action when files are not dragged over the field anymore.
+    handleDragLeave = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (
+            event.path[0].id === this.uploadIconRef.props.id &&
+            event.relatedTarget.parentElement !== this.uploadFieldRef
+        ) {
+            this.props.onChange({ errorMessage: '', value: null }, 0);
+            this.setState({ droppable: false, dragOver: false });
+        }
+    };
+
+    handleChange = (event) => {
+        const index = this.getNextInputIndex();
+        const param = this.handleFile(event.target.files, index);
+        this.props.onChange(param, index);
+    };
+
+    handleEmptyField = (event) => {
+        event.target.value = '';
+    };
+
+    handleKeyPress = (event) => {
+        const key = keycode(event);
+        if (key === 'enter' || key === 'space') {
+            event.preventDefault();
+            this.uploadInput.click();
+        }
+    };
+
+    // Handles the file wether it is selected via the input or dropped on it.
+    handleFile = (files, index) => {
+        let error = false;
+        let errorMessage = '';
+        let file = null;
+        if (files.length === 1) {
+            file = files[0];
+            if (this.props.inputs[index] && file.size > this.props.inputs[index].maxSize) {
+                errorMessage += this.props.translations.errorSize.replace(
+                    'maxSize',
+                    this.props.inputs[index].maxSize / 1000000,
+                );
+                error = true;
+            }
+            if (this.props.inputs[index] &&
+                this.props.inputs[index].acceptedTypes &&
+                this.props.inputs[index].acceptedTypes.length !== 0 &&
+                this.props.inputs[index].acceptedTypes.indexOf(file.type) === -1
+            ) {
+                errorMessage += this.props.translations.errorType;
+                error = true;
+            }
+        } else {
+            errorMessage = this.props.translations.errorDropMultiple;
+        }
+        return { errorMessage, error, value: file };
+    };
+
+    createInputs = (others) => {
+        const {
+            inputs,
+            values,
+        } = this.props;
+
+        let files = inputs;
+
+        // unlimited number of files
+        if (inputs.length === 0) {
+            files = values;
+        }
+
+        const inputComponents = [];
+        for (let i = 0; i < files.length; i += 1) {
+            if (files.length > 1 || (values[i] && values[i].value)) {
+                inputComponents.push(
+                    <HiUploadInput
+                        maxSize={inputs[i] ? inputs[i].maxSize : undefined}
+                        acceptedTypes={inputs[i] ? inputs[i].acceptedTypes : undefined}
+                        placeholder={inputs[i] ? inputs[i].placeholder : undefined}
+                        value={values[i] ? values[i].value : null}
+                        error={values[i] ? values[i].error : null}
+                        errorMessage={values[i] ? values[i].errorMessage : null}
+                        onSeeFile={this.handleSeeFile}
+                        onDeleteFile={this.props.onDeleteFile}
+                        onChange={this.props.onChange}
+                        index={i}
+                        key={inputs[i] ? inputs[i].id : `doc-${i}`}
+                        {...others}
+                    />,
+                );
+            }
+        }
+
+        return inputComponents;
+    };
+
+    uploadFieldRef;
+
+    render() {
+        const {
+            id,
+            inputs,
+            classes,
+            values,
+            focused,
+            ...others
+        } = this.props;
+
+        const { dragOver, droppable } = this.state;
+
+        let complete = true;
+        let empty = true;
+        let error = false;
+
+        // For unlimited inputs: always grey
+        if (!inputs.length) {
+            complete = false;
+        } else if (values.length === 0 || (inputs.length > 0 && inputs.length !== values.length)) {
+            complete = false;
+        } else {
+            for (let i = 0, len = values.length; i < len; i += 1) {
+                const value = values[i];
+                if (value !== undefined) {
+                    complete = value.value === null || value.error ? false : complete;
+                    empty = value.value !== null && !value.error ? false : empty;
+                    error = value.error || error;
+                } else {
+                    complete = false;
+                }
+            }
+        }
+
+        const statusClass = classNames(classes.statusIcon, {
+            [classes.empty]: empty,
+            [classes.complete]: complete,
+        });
+
+        let icon;
+        if (error) {
+            icon = 'warning';
+        } else if (complete) {
+            icon = 'check_circle';
+        } else {
+            icon = 'file_upload';
+        }
+
+        let focusable = true;
+        if (complete && values.length > 1) {
+            focusable = false;
+        }
+
+        const iconClass = classNames(statusClass, classes.fileButton, {
+            [classes.dragOver]: dragOver,
+            [classes.droppable]: droppable,
+            [classes.focused]: focused,
+            [classes.error]: error && !focused,
+            [classes.focusable]: focusable,
+        });
+
+
+        return (
+            <div className={classes.flexContainer}>
+                <label ref={label => { this.uploadFieldRef = label; }} tabIndex="-1">
+                    <input
+                        hidden
+                        type={(!complete || values.length === 1) ? 'file' : 'hidden'}
+                        onChange={this.handleChange}
+                        onClick={focusable ? this.handleEmptyField : undefined}
+                        ref={el => {
+                            this.uploadInput = el;
+                        }}
+                    />
+                    <HiIcon
+                        ref={uploadIcon => {
+                            this.uploadIconRef = uploadIcon;
+                        }}
+                        id={`iconUpload-${id}`}
+                        className={iconClass}
+                        icon={icon}
+                        size={32}
+                        tabIndex={focusable ? '0' : '-1'}
+                        onKeyPress={this.handleKeyPress}
+                    />
+                </label>
+                <div className={classes.inputContainer}>
+                    {this.createInputs(others)}
+                </div>
+            </div>
+        );
+    }
+}
+
+export default withStyles(styles, { hiComponent: true, name: 'HmuiHiUpload' })(HiUpload);

package/src/HiForm/HiUpload.test.js

@@ -0,0 +1,231 @@
+import React from 'react';
+import { assert } from 'chai';
+import { spy } from 'sinon';
+import { createMount, createShallow, getClasses } from '../test-utils';
+import classNames from 'classnames';
+import HiUpload from './HiUpload';
+import HiUploadInput from './HiUploadInput';
+import HiIcon from '../HiIcon';
+
+describe('<HiUpload />', () => {
+    let mount;
+    let shallow;
+    let classes;
+
+    before(() => {
+        mount = createMount();
+        shallow = createShallow({ dive: true });
+        classes = getClasses(<HiUpload inputs={[]} values={[]} id="upload" />);
+    });
+
+    after(() => {
+        mount.cleanUp();
+    });
+
+    // 1 input empty
+    it('should render 0 <HiUploadInput> because 1 input waiting and undefined value', () => {
+        const inputs = [{ id: 1 }];
+        const values = [undefined];
+        const wrapper = shallow(<HiUpload inputs={inputs} values={values} id="upload" />, { disableLifecycleMethods: true });
+        assert.strictEqual(
+            wrapper
+                .find(HiUploadInput).length,
+            0,
+            'should render 0 HiUploadInput',
+        );
+
+        assert.strictEqual(
+            wrapper
+                .find(HiIcon)
+                .dive()
+                .props().className,
+            classNames(classes.statusIcon, classes.empty, classes.fileButton, classes.focusable),
+        );
+    });
+
+    // 1 input empty
+    it('should render 0 <HiUploadInput> because 1 input waiting and no value', () => {
+        const inputs = [{ id: 1 }];
+        const values = [];
+        const wrapper = shallow(<HiUpload inputs={inputs} values={values} id="upload" />, { disableLifecycleMethods: true });
+        assert.strictEqual(
+            wrapper
+                .find(HiUploadInput).length,
+            0,
+            'should render 0 HiUploadInput',
+        );
+        assert.strictEqual(
+            wrapper
+                .find(HiIcon)
+                .dive()
+                .props().className,
+            classNames(classes.statusIcon, classes.empty, classes.fileButton, classes.focusable),
+        );
+    });
+
+    // 1 input complete
+    it('should render 1 <HiUploadInput> because first value is defined and 1 values is expected', () => {
+        const inputs = [{ id: 1 }];
+        const values = [{ value: 'test' }];
+        const wrapper = shallow(<HiUpload inputs={inputs} values={values} id="upload" />, { disableLifecycleMethods: true });
+        assert.strictEqual(
+            wrapper
+                .find(HiUploadInput).length,
+            1,
+            'should render 1 HiUploadInput',
+        );
+        assert.strictEqual(
+            wrapper
+                .find(HiIcon)
+                .dive()
+                .props().className,
+            classNames(classes.statusIcon, classes.complete, classes.fileButton, classes.focusable),
+        );
+    });
+
+    // 2 input empty
+    it('should render 2 <HiUploadInput> because first value is defined and 2 values are expected', () => {
+        const inputs = [{ id: 1 }, { id: 2 }];
+        const values = [];
+        const wrapper = shallow(<HiUpload inputs={inputs} values={values} id="upload" />, { disableLifecycleMethods: true });
+        assert.strictEqual(
+            wrapper
+                .find(HiUploadInput).length,
+            2,
+            'should render 2 HiUploadInput',
+        );
+        assert.strictEqual(
+            wrapper
+                .find(HiIcon)
+                .dive()
+                .props().className,
+            classNames(classes.statusIcon, classes.empty, classes.fileButton, classes.focusable),
+        );
+    });
+
+    // 2 input not empty / not full
+    it('should render 2 <HiUploadInput> because first value is defined and 2 values are expected', () => {
+        const inputs = [{ id: 1 }, { id: 2 }];
+        const values = [{ value: 'test' }, undefined];
+        const wrapper = shallow(<HiUpload inputs={inputs} values={values} id="upload" />, { disableLifecycleMethods: true });
+        assert.strictEqual(
+            wrapper
+                .find(HiUploadInput).length,
+            2,
+            'should render 2 HiUploadInput',
+        );
+        assert.strictEqual(
+            wrapper
+                .find(HiIcon)
+                .dive()
+                .props().className,
+            classNames(classes.statusIcon, classes.fileButton, classes.focusable),
+        );
+    });
+
+    // 2 input full => not focusable
+    it('should render 2 <HiUploadInput> because first value is defined and 2 values are expected', () => {
+        const inputs = [{ id: 1 }, { id: 2 }];
+        const values = [{ value: 'test' }, { value: 'test2' }];
+        const wrapper = shallow(<HiUpload inputs={inputs} values={values} id="upload" />, { disableLifecycleMethods: true });
+        assert.strictEqual(
+            wrapper
+                .find(HiUploadInput).length,
+            2,
+            'should render 2 HiUploadInput',
+        );
+        assert.strictEqual(
+            wrapper
+                .find(HiIcon)
+                .dive()
+                .props().className,
+            classNames(classes.statusIcon, classes.complete, classes.fileButton),
+        );
+    });
+
+    // unlimited inputs empty
+    it('should render 0 <HiUploadInput> because unlimited inputs and no values', () => {
+        const inputs = [];
+        const values = [];
+        const wrapper = shallow(<HiUpload inputs={inputs} values={values} id="upload" />, { disableLifecycleMethods: true });
+        assert.strictEqual(
+            wrapper
+                .find(HiUploadInput).length,
+            0,
+            'should render 1 HiUploadInput',
+        );
+        assert.strictEqual(
+            wrapper
+                .find(HiIcon)
+                .dive()
+                .props().className,
+            classNames(classes.statusIcon, classes.empty, classes.fileButton, classes.focusable),
+        );
+    });
+
+    it('should render 5 <HiUploadInput> because unlimited inputs and 5 values', () => {
+        const inputs = [];
+        const values = [{ value: 'test1' }, { value: 'test2' }, { value: 'test3' }, { value: 'test4' }, { value: 'test5' }];
+        const wrapper = shallow(<HiUpload inputs={inputs} values={values} id="upload" />, { disableLifecycleMethods: true });
+        assert.strictEqual(
+            wrapper
+                .find(HiUploadInput).length,
+            5,
+            'should render 1 HiUploadInput',
+        );
+        assert.strictEqual(
+            wrapper
+                .find(HiIcon)
+                .dive()
+                .props().className,
+            classNames(classes.statusIcon, classes.empty, classes.fileButton, classes.focusable),
+        );
+    });
+
+    it('should fire onChange event callbacks', () => {
+        const inputs = [{ id: 1 }, { id: 2 }];
+        const values = [{ value: { name: 'test.pdf', size: 32, type: 'application/pdf' } }, undefined];
+        const handleChange = spy();
+        const wrapper = shallow(<HiUpload onChange={handleChange} inputs={inputs} values={values} id="upload" />, { disableLifecycleMethods: true });
+        const fakeFile = { name: 'fakefile.pdf', size: 32, type: 'application/pdf' };
+        const fakeChangeParams = { errorMessage: '', error: false, value: fakeFile };
+
+        assert.strictEqual(
+            wrapper
+                .find(HiIcon)
+                .prop('icon'),
+            'file_upload',
+            'should render a upload icon',
+        );
+        wrapper
+            .find(HiUploadInput)
+            .at(0)
+            .dive()
+            .simulate('change', fakeChangeParams, 0);
+        assert.strictEqual(
+            handleChange.calledWith({ errorMessage: '', error: false, value: fakeFile }, 0),
+            true,
+            'should have been called with the fakeFile.',
+        );
+    });
+
+    it('should be on error', () => {
+        const inputs = [{ id: 1 }, { id: 2 }];
+        const fakeFile = { name: 'fakefile.pdf', size: 32, type: 'application/pdf' };
+        const fakeFalseParams = { errorMessage: 'error message', error: true, value: fakeFile };
+        const values = [fakeFalseParams, undefined];
+        const wrapper = shallow(<HiUpload inputs={inputs} values={values} id="upload" />, { disableLifecycleMethods: true });
+        assert.include(
+            wrapper.find(HiIcon).props().className,
+            'error',
+            'should have the class error',
+        );
+        assert.strictEqual(
+            wrapper
+                .find(HiIcon)
+                .dive()
+                .props().className,
+            classNames(classes.statusIcon, classes.empty, classes.fileButton, classes.error, classes.focusable),
+        );
+    });
+});