@hipay/hipay-material-ui 3.5.0 → 3.5.1

package/src/HiForm/HiUploadField.js

@@ -1,108 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import HiFormControl from './HiFormControl';
-import HiUpload from './HiUpload';
-
-class HiUploadField 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", applique l'attribut css correspondant
-         */
-        fullWidth: PropTypes.bool,
-        /**
-         * 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,
-        /**
-         * Array containing each of the inputs the component has to show (represented by an object).
-         */
-        inputs: PropTypes.array.isRequired,
-        /**
-         * The label of the global input.
-         */
-        label: PropTypes.string,
-        /**
-         * 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,
-        /**
-         * set to false to hide the eye button
-         */
-        seeFile: PropTypes.bool,
-        /**
-         * Valeurs des inputs
-         */
-        values: PropTypes.array,
-    };
-
-    static defaultProps = {
-        helperText: '',
-        helperIcon: false,
-        seeFile: true,
-        fullWidth: false,
-    };
-
-    render() {
-        const {
-            className,
-            label,
-            helperIcon,
-            helperText,
-            values,
-            fullWidth,
-            ...others
-        } = this.props;
-
-        let empty = true;
-        let error = false;
-        let errorText = '';
-
-        for (let i = 0, len = values.length; i < len; i += 1) {
-            const value = values[i];
-            if (value !== undefined) {
-                empty = value.value !== null && !value.error ? false : empty;
-                error = value.error || error;
-                errorText += `${value.errorMessage}`;
-            }
-        }
-
-        return (
-            <HiFormControl
-                label={label}
-                className={className}
-                errorText={errorText}
-                error={error}
-                helperIcon={helperIcon}
-                helperText={helperText}
-                fullWidth={fullWidth}
-            >
-                <HiUpload
-                    values={values}
-                    {...others}
-                />
-            </HiFormControl>
-        );
-    }
-}
-
-export default HiUploadField;

package/src/HiForm/HiUploadField.test.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { createMount, createShallow } from '../test-utils';
-import HiUpload from './HiUpload';
-import HiUploadField from './HiUploadField';
-import HiFormControl from './HiFormControl';
-
-describe('<HiUploadField />', () => {
-    let mount;
-    let shallow;
-
-    before(() => {
-        mount = createMount();
-        shallow = createShallow();
-    });
-
-    after(() => {
-        mount.cleanUp();
-    });
-
-    it('should render a <HiFormControl>and a <HiUpload>', () => {
-        const inputs = [{ id: 1 }, { id: 2 }];
-        const values = [undefined, undefined];
-        const wrapper = shallow(<HiUploadField inputs={inputs} values={values} />);
-        assert.strictEqual(wrapper.find(HiFormControl).length, 1, 'should render a HiFormControl');
-        assert.strictEqual(wrapper.find(HiUpload).length, 1, 'should render a HiUpload');
-    });
-
-    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(<HiUploadField inputs={inputs} values={values} />);
-        assert.strictEqual(
-            wrapper.find(HiFormControl).props().errorText,
-            'error message',
-            'should have the error message given by the change',
-        );
-        assert.strictEqual(wrapper.find(HiFormControl).props().error, true, 'should be on error');
-    });
-});

package/src/HiForm/HiUploadInput.js

@@ -1,400 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-import HiIconButton from '../HiIconButton';
-import RemoveRedEye from '@material-ui/icons/RemoveRedEye';
-import Delete from '@material-ui/icons/Delete';
-
-export const styles = theme => ({
-    root: {
-        position: 'relative',
-        ...theme.typography.body1,
-        borderBottom: `1px solid ${theme.palette.input.bottomLine}`,
-        paddingLeft: 8,
-        backgroundColor: theme.palette.background2,
-        height: 40,
-        display: 'inline-flex',
-        justifyContent: 'flex-start',
-        cursor: 'pointer',
-        '&$focused, &$dragOver': {
-            backgroundColor: theme.palette.background1,
-        },
-        width: '100%',
-        // Ajout d'1px pour ne pas avoir de décalage en mode error avec le border top
-        '&:not($error)': {
-            marginTop: 1,
-        },
-    },
-    underline: {
-        '&:before': {
-            left: 0,
-            bottom: 0,
-            // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-            content: '""',
-            height: 1,
-            position: 'absolute',
-            right: 0,
-            transition: theme.transitions.create('background-color', {
-                duration: theme.transitions.duration.shorter,
-                easing: theme.transitions.easing.ease,
-            }),
-            pointerEvents: 'none', // Transparent to the hover style.
-        },
-        '&:hover:not($disabled):before': {
-            backgroundColor: theme.palette.input.bottomLine,
-            height: 2,
-        },
-        '&$disabled:before': {
-            background: 'transparent',
-            backgroundImage: `linear-gradient(to right, ${
-                theme.palette.input.bottomLine
-                } 33%, transparent 0%)`,
-            backgroundPosition: 'left top',
-            backgroundRepeat: 'repeat-x',
-            backgroundSize: '5px 1px',
-        },
-    },
-    inkbar: {
-        '&:not($disabled)': {
-            '&:not($error):after': {
-                backgroundColor: theme.palette.primary.main,
-                left: 0,
-                bottom: 0,
-                // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-                content: '""',
-                height: 1,
-                position: 'absolute',
-                right: 0,
-                transform: 'scaleX(0)',
-                transition: theme.transitions.create('transform', {
-                    duration: theme.transitions.duration.shorter,
-                    easing: theme.transitions.easing.easeOut,
-                }),
-                pointerEvents: 'none', // Transparent to the hover style.
-            },
-            '&:hover:after': {
-                transform: 'scaleX(1)',
-            },
-            '&$dragOver:after': {
-                transform: 'scaleX(1)',
-            },
-            '&$focused:after': {
-                transform: 'scaleX(1)',
-            },
-            '&$error': {
-                borderBottom: `1px solid ${theme.palette.negative.main}`,
-            },
-        },
-    },
-    disabled: {
-        color: `${theme.palette.action.disabled}`,
-        '&:before': {
-            display: 'none',
-        },
-        cursor: 'default',
-    },
-    focused: {
-        backgroundColor: theme.palette.background3,
-    },
-    error: {},
-    label: {
-        ...theme.typography.body1,
-        fontWeight: theme.typography.fontWeightRegular,
-        caretColor: theme.palette.primary.main,
-        alignItems: 'center',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        padding: `${theme.spacing(2) - 2}px 0 ${theme.spacing(2) - 1}px`,
-        height: 39,
-        display: 'inline-flex',
-        width: '100%',
-        cursor: 'pointer',
-        '&$empty': {
-            opacity: 0.42,
-        },
-    },
-    empty: {},
-    dragOver: {},
-    droppable: {},
-    endAdornment: {
-        display: 'flex',
-        alignItems: 'center',
-    },
-    icon: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        right: 0,
-        padding: '8px',
-        color: `${theme.palette.text.icon}`,
-        fontSize: 10,
-        transition: theme.transitions.create(['opacity', 'transform'], {
-            duration: theme.transitions.duration.shorter,
-        }),
-        '&:hover': {
-            color: 'inherit',
-            background: 'none',
-        },
-    },
-});
-
-class HiUploadInput extends React.Component {
-    static propTypes = {
-        /**
-         * Defines what kind of file types the input accepts. If empty, no restrictions about the file type.
-         */
-        acceptedTypes: PropTypes.array,
-        /**
-         * Useful to extend the style applied to components.
-         */
-        classes: PropTypes.object,
-        /**
-         * Is the field disabled.
-         */
-        disabled: PropTypes.bool,
-        /**
-         * Is there an error with the file selected.
-         */
-        error: PropTypes.bool,
-        /**
-         * Is the field focused.
-         */
-        focused: PropTypes.bool,
-        /**
-         * The index of the input.
-         */
-        index: PropTypes.number,
-        /**
-         * Defines what size the file must not exceed (in bytes).
-         */
-        maxSize: PropTypes.number,
-        /**
-         * The change handler.
-         */
-        onChange: PropTypes.func,
-        /**
-         * The handler to clear the field.
-         */
-        onDeleteFile: PropTypes.func,
-        /**
-         * The handler to see the file.
-         */
-        onSeeFile: PropTypes.func,
-        /**
-         * The placeholder for the field.
-         */
-        placeholder: PropTypes.string,
-        /**
-         * set to false to hide the eye button
-         */
-        seeFile: PropTypes.bool,
-        /**
-         * The translations of the error messages.
-         */
-        translations: PropTypes.object,
-        /**
-         * The file value for the field.
-         */
-        value: PropTypes.object,
-    };
-
-    static defaultProps = {
-        placeholder: 'Choose a file',
-        disabled: false,
-        focused: false,
-        acceptedTypes: [],
-        maxSize: 10000000,
-        value: null,
-        translations: {
-            errorSize: "Votre fichier est trop lourd. Nous acceptons jusqu'à maxSizeMo",
-            errorDropMultiple: 'Veuillez insérer un et un seul fichier',
-            errorType: "Ce type de fichier n'est pas accepté",
-            errorDragEnter: 'Contenu non correct',
-        },
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            errorMessage: '',
-            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);
-    }
-
-    // Action when files are dropped on the field
-    handleDrop = (event) => {
-        if (event.target === this.uploadFieldRef) {
-            event.preventDefault();
-            event.stopPropagation();
-            if (this.state.droppable) {
-                const param = this.handleFile(event.dataTransfer.files);
-                this.setState({ dragOver: false });
-                this.props.onChange(param, this.props.index);
-            } else {
-                this.setState({
-                    errorMessage: this.props.translations.errorDropMultiple,
-                    dragOver: false,
-                });
-            }
-        }
-    };
-
-    // Action when files are dragged over the field.
-    handleDragEnter = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        if (event.target === this.uploadFieldRef) {
-            if (event.dataTransfer.items.length !== 1) {
-                event.dataTransfer.dropEffect = 'none';
-                this.props.onChange(
-                    {
-                        errorMessage: this.props.translations.errorDragEnter,
-                        value: null,
-                    },
-                    this.props.index,
-                );
-                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.target === this.uploadFieldRef &&
-            event.relatedTarget.parentElement !== this.uploadFieldRef
-        ) {
-            this.props.onChange({ errorMessage: '', value: null }, this.props.index);
-            this.setState({ droppable: false, dragOver: false });
-        }
-    };
-
-    handleChange = (event) => {
-        const param = this.handleFile(event.target.files);
-        this.props.onChange(param, this.props.index);
-    };
-
-    handleDeleteFile = () => {
-        this.props.onDeleteFile(this.props.index);
-    };
-
-    handleEmptyField = (event) => {
-        event.target.value = '';
-    };
-
-    handleSeeFile = () => {
-        this.props.onSeeFile(this.props.value);
-    };
-
-    // Handles the file wether it is selected via the input or dropped on it.
-    handleFile = (files) => {
-        let error = false;
-        let errorMessage = '';
-        let file = null;
-        if (files.length === 1) {
-            file = files[0];
-            errorMessage = '';
-            if (file.size > this.props.maxSize) {
-                errorMessage += this.props.translations.errorSize.replace(
-                    'maxSize',
-                    this.props.maxSize / 1000000,
-                );
-                error = true;
-            }
-            if (
-                this.props.acceptedTypes.length !== 0 &&
-                this.props.acceptedTypes.indexOf(file.type) === -1
-            ) {
-                errorMessage += this.props.translations.errorType;
-                error = true;
-            }
-        } else {
-            errorMessage = this.props.translations.errorDropMultiple;
-        }
-        return { errorMessage, error, value: file };
-    };
-
-    uploadFieldRef;
-
-    render() {
-        const { placeholder, classes, disabled, focused, value, error } = this.props;
-
-        const { dragOver, errorMessage, droppable } = this.state;
-
-        // On utilise classNames pour variabiliser les styles et merger les classes appliquées
-        const rootClass = classNames(classes.root, classes.inkbar, classes.underline, {
-            [classes.disabled]: disabled,
-            [classes.focused]: focused,
-            [classes.error]: error && !focused,
-            [classes.dragOver]: dragOver,
-            [classes.droppable]: droppable,
-        });
-
-        const eyeButton = (
-            <HiIconButton
-                className={classes.icon}
-                onClick={this.handleSeeFile}>
-                <RemoveRedEye />
-            </HiIconButton>
-        );
-
-        return (
-            <div className={rootClass}>
-                <label
-                    className={classNames(classes.label, { [classes.empty]: value === null })}
-                    ref={label => { this.uploadFieldRef = label; }}
-                >
-                    {value ? value.name : (error && errorMessage) || placeholder}
-                    <input type={'file'} onClick={this.handleEmptyField} hidden onChange={this.handleChange} />
-                </label>
-                {value === null || (
-                    <div className={classes.endAdornment}>
-                        {this.props.seeFile && eyeButton}
-
-                        <HiIconButton
-                            className={classes.icon}
-                            onClick={this.handleDeleteFile}
-                        >
-                            <Delete />
-                        </HiIconButton>
-                    </div>
-                )}
-            </div>
-        );
-    }
-}
-
-export default withStyles(styles, { hiComponent: true, name: 'HmuiHiUploadInput' })(HiUploadInput);

package/src/HiForm/HiUploadInput.test.js

@@ -1,154 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { spy } from 'sinon';
-import { createMount } from '../test-utils';
-import HiUploadInput from './HiUploadInput';
-import HiIconButton from '../HiIconButton';
-
-describe('<HiUploadInput />', () => {
-    let mount;
-    let fakePdf;
-    let seeFile;
-
-    before(() => {
-        fakePdf = { name: 'fakefile.pdf', size: 32, type: 'application/pdf' };
-        seeFile = true;
-    });
-
-    beforeEach(() => {
-        mount = createMount();
-    });
-
-    afterEach(() => {
-        mount.cleanUp();
-    });
-
-    it('should render an <input> with type file inside a <label> inside a <div>', () => {
-        const defaultPlaceholder = 'default placeholder';
-        const wrapper = mount(<HiUploadInput placeholder={defaultPlaceholder} />);
-        const label = wrapper.find('label');
-        assert.strictEqual(label.name(), 'label', 'should render a label');
-        assert.strictEqual(
-            label.text(),
-            defaultPlaceholder,
-            'should be the placeholder passed in props',
-        );
-        const input = label.find('input');
-        assert.strictEqual(input.name(), 'input', 'should contain an input');
-        assert.strictEqual(input.prop('type'), 'file', 'should be a file input');
-    });
-
-    it('should not show the clear and see buttons when no value is given', () => {
-        const wrapper = mount(<HiUploadInput />);
-        assert.strictEqual(wrapper.find(HiIconButton).length, 0, 'should not have icons');
-    });
-
-    it('should show the clear and see buttons when a value is given', () => {
-        const wrapper = mount(<HiUploadInput value={fakePdf} seeFile={seeFile} />);
-        assert.strictEqual(
-            wrapper.find(HiIconButton).length,
-            2,
-            'should have the clear and see icons',
-        );
-    });
-
-    it('should show the clear button when a value is given', () => {
-        const wrapper = mount(<HiUploadInput value={fakePdf} />);
-        assert.strictEqual(
-            wrapper.find(HiIconButton).length,
-            1,
-            'should have the clear icon',
-        );
-    });
-
-    it('should fire onChange event callbacks', () => {
-        const handleChange = spy();
-        const wrapper = mount(<HiUploadInput onChange={handleChange} index={1} />);
-        wrapper.find('input').simulate('change', { target: { files: [fakePdf] } });
-        assert.strictEqual(handleChange.calledOnce, true, 'should have been called once.');
-        assert.strictEqual(
-            handleChange.calledWith({ errorMessage: '', error: false, value: fakePdf }, 1),
-            true,
-            'should have been called with the fakePdf file.',
-        );
-    });
-
-    it('should fire onDeleteFile event callbacks', () => {
-        const handleDeleteFile = spy();
-        const wrapper = mount(<HiUploadInput onDeleteFile={handleDeleteFile} value={fakePdf} index={1} />);
-        wrapper
-            .find(HiIconButton)
-            .at(0)
-            .simulate('click');
-        assert.strictEqual(handleDeleteFile.calledOnce, true, 'should have been called once.');
-        assert.strictEqual(
-            handleDeleteFile.calledWith(1),
-            true,
-            'should have been called with the index of this HiUploadInput.',
-        );
-    });
-
-    it('should fire onSee event callbacks', () => {
-        const handleSee = spy();
-        const wrapper = mount(<HiUploadInput onSeeFile={handleSee} value={fakePdf} index={1} seeFile={seeFile} />);
-        wrapper
-            .find(HiIconButton)
-            .at(0)
-            .simulate('click');
-        assert.strictEqual(handleSee.calledOnce, true, 'should have been called once.');
-        assert.strictEqual(
-            handleSee.calledWith(fakePdf),
-            true,
-            'should have been called with the file to see.',
-        );
-    });
-
-    it('should fire onChange event callbacks with a size error', () => {
-        const handleChange = spy();
-        const translations = { errorSize: 'error size' };
-        const fakeLargeFile = { name: 'fakelargefile.pdf', size: 4096, type: 'application/pdf' };
-        const wrapper = mount(
-            <HiUploadInput
-                onChange={handleChange}
-                value={fakeLargeFile}
-                maxSize={2048}
-                index={1}
-                translations={translations}
-            />,
-        );
-        wrapper.find('input').simulate('change', { target: { files: [fakeLargeFile] } });
-        assert.strictEqual(handleChange.calledOnce, true, 'should have been called once.');
-        assert.strictEqual(
-            handleChange.calledWith(
-                { errorMessage: translations.errorSize, error: true, value: fakeLargeFile },
-                1,
-            ),
-            true,
-            'should be on error with errorSize message',
-        );
-    });
-
-    it('should fire onChange event callbacks with a type error', () => {
-        const handleChange = spy();
-        const translations = { errorType: 'error type' };
-        const wrapper = mount(
-            <HiUploadInput
-                onChange={handleChange}
-                value={fakePdf}
-                acceptedTypes={['image/jpeg', 'video/mp4']}
-                index={1}
-                translations={translations}
-            />,
-        );
-        wrapper.find('input').simulate('change', { target: { files: [fakePdf] } });
-        assert.strictEqual(handleChange.calledOnce, true, 'should have been called once.');
-        assert.strictEqual(
-            handleChange.calledWith(
-                { errorMessage: translations.errorType, error: true, value: fakePdf },
-                1,
-            ),
-            true,
-            'should be on error with errorType message',
-        );
-    });
-});