@hipay/hipay-material-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/es/HiForm/HiUpload.js

@@ -0,0 +1,194 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent HiUploadField
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+import withTheme from '../styles/withTheme';
+import HiFormControl from './HiFormControl';
+import HiUploadField from './HiUploadField';
+import HiIconBuilder from '../utils/HiIconBuilder';
+
+export const styles = theme => ({
+    flexContainer: {
+        display: '  flex',
+        alignItems: 'center'
+    },
+    statusIcon: {
+        color: theme.palette.text.icon,
+        marginRight: '8px',
+        padding: '24px',
+        borderRadius: '2px',
+        border: `1px solid ${theme.palette.input.bottomLine}`,
+        backgroundColor: theme.palette.local.background2,
+        '&:not($empty)': {
+            border: `1px solid ${theme.palette.middle.normal}`,
+            color: `${theme.palette.middle.normal}`
+        },
+        '&$complete': {
+            border: `1px solid ${theme.palette.positive.normal}`,
+            color: `${theme.palette.positive.normal}`
+        },
+        '&$error': {
+            border: `1px solid ${theme.palette.negative.normal}`,
+            color: `${theme.palette.negative.normal}`
+        }
+    },
+    inputContainer: {
+        flex: '1'
+    },
+    empty: {},
+    complete: {},
+    error: {}
+});
+
+class HiUpload extends React.PureComponent {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            params: new Array(this.props.inputs.length)
+        };
+
+        this.handleChange = this.handleChange.bind(this);
+        this.handleClear = this.handleClear.bind(this);
+        this.handleSeeFile = this.handleSeeFile.bind(this);
+    }
+
+    handleChange(param, index) {
+        this.setState(prevState => {
+            const oldParams = [...prevState.params];
+            oldParams.splice(index, 1, param);
+            return {
+                params: oldParams
+            };
+        });
+    }
+
+    handleClear(index) {
+        this.setState(prevState => {
+            const oldParams = [...prevState.params];
+            oldParams.splice(index, 1, undefined);
+            return {
+                params: oldParams
+            };
+        });
+    }
+
+    handleSeeFile(file) {
+        this.props.onSeeFile(file);
+    }
+
+    render() {
+        const _props = this.props,
+              { inputs, className, classes, label, helperIcon, helperText } = _props,
+              others = _objectWithoutProperties(_props, ['inputs', 'className', 'classes', 'label', 'helperIcon', 'helperText']);
+
+        const { params } = this.state;
+
+        let complete = true;
+        let empty = true;
+        let error = false;
+        let errorText = '';
+
+        for (let i = 0, len = params.length; i < len; i += 1) {
+            const param = params[i];
+            if (param !== undefined) {
+                complete = param.value === null || param.error ? false : complete;
+                empty = param.value !== null && !param.error ? false : empty;
+                error = param.error || error;
+                errorText = errorText || param.errorMessage;
+            } else {
+                complete = false;
+            }
+        }
+
+        const statusClass = classNames(classes.statusIcon, {
+            [classes.empty]: empty,
+            [classes.complete]: complete,
+            [classes.error]: error
+        });
+
+        let icon;
+
+        if (error) {
+            icon = 'alert';
+        } else if (complete) {
+            icon = 'check_circle';
+        } else {
+            icon = 'upload';
+        }
+
+        return React.createElement(
+            HiFormControl,
+            {
+                label: label,
+                className: className,
+                errorText: errorText,
+                error: error,
+                helperIcon: helperIcon,
+                helperText: helperText
+            },
+            React.createElement(
+                'div',
+                { className: classes.flexContainer },
+                React.createElement(HiIconBuilder, { className: statusClass, size: 80, icon: icon }),
+                React.createElement(
+                    'div',
+                    { className: classes.inputContainer },
+                    inputs.map((item, index) => React.createElement(HiUploadField, _extends({
+                        maxSize: item.maxSize,
+                        acceptedTypes: item.acceptedTypes,
+                        placeholder: item.placeholder,
+                        value: params[index] ? params[index].value : null,
+                        error: params[index] ? params[index].error : null,
+                        errorMessage: params[index] ? params[index].errorMessage : null,
+                        onSeeFile: this.handleSeeFile,
+                        onClear: this.handleClear,
+                        onChange: this.handleChange,
+                        index: index,
+                        key: item.id
+                    }, others)))
+                )
+            )
+        );
+    }
+}
+
+HiUpload.defaultProps = {
+    helperText: '',
+    helperIcon: false
+};
+HiUpload.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * 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,
+    /**
+     * 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 see the file.
+     */
+    onSeeFile: PropTypes.func
+} : {};
+export default withStyles(styles, { name: 'HmuiHiUpload', withTheme: true })(HiUpload);

package/es/HiForm/HiUploadField.js

@@ -0,0 +1,368 @@
+import _extends from 'babel-runtime/helpers/extends';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+import HiIconBuilder from '../utils/HiIconBuilder';
+
+export const styles = theme => ({
+    root: _extends({
+        position: 'relative'
+    }, theme.typography.body1, {
+        borderBottom: `1px solid ${theme.palette.input.bottomLine}`,
+        paddingLeft: 8,
+        backgroundColor: theme.palette.local.background2,
+        height: 40,
+        display: 'inline-flex',
+        justifyContent: 'flex-start',
+        '&$focused, &$dragOver': {
+            backgroundColor: theme.palette.global.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.business.primary.normal,
+                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.normal}`
+            }
+        }
+    },
+    disabled: {
+        color: `${theme.palette.action.disabled}`,
+        '&:before': {
+            display: 'none'
+        }
+    },
+    focused: {
+        backgroundColor: theme.palette.background3
+    },
+    error: {},
+    label: _extends({}, theme.typography.body1, {
+        fontWeight: theme.typography.fontWeightRegular,
+        caretColor: theme.palette.business.primary.normal,
+        alignItems: 'center',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        padding: `${theme.spacing.unit - 2}px 0 ${theme.spacing.unit - 1}px`,
+        height: 39,
+        display: 'inline-flex',
+        width: '100%',
+        '&$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}`,
+        transition: theme.transitions.create(['opacity', 'transform'], {
+            duration: theme.transitions.duration.shorter
+        }),
+        '&:hover': {
+            color: 'inherit'
+        }
+    }
+});
+
+class HiUploadField extends React.PureComponent {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            errorMessage: '',
+            dragOver: false,
+            droppable: false
+        };
+        this.uploadFieldRef;
+        this.handleChange = this.handleChange.bind(this);
+        this.handleClear = this.handleClear.bind(this);
+        this.handleSeeFile = this.handleSeeFile.bind(this);
+        this.handleDrop = this.handleDrop.bind(this);
+        this.handleDragEnter = this.handleDragEnter.bind(this);
+        this.handleDragLeave = this.handleDragLeave.bind(this);
+    }
+
+    // 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,
+                    error: false,
+                    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,
+                    error: true,
+                    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: '', error: false, 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);
+    }
+
+    handleClear() {
+        this.props.onClear(this.props.index);
+    }
+
+    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 };
+    }
+
+    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
+        });
+
+        return React.createElement(
+            'div',
+            { className: rootClass },
+            React.createElement(
+                'label',
+                {
+                    className: classNames(classes.label, { [classes.empty]: value === null }),
+                    ref: label => this.uploadFieldRef = label
+                },
+                value ? value.name : error && errorMessage || placeholder,
+                React.createElement('input', { type: 'file', hidden: true, onChange: this.handleChange })
+            ),
+            value === null || React.createElement(
+                'div',
+                { className: classes.endAdornment },
+                React.createElement(HiIconBuilder, {
+                    icon: 'eye',
+                    size: 36,
+                    className: classes.icon,
+                    onClick: this.handleSeeFile
+                }),
+                React.createElement(HiIconBuilder, {
+                    icon: 'delete',
+                    size: 36,
+                    className: classes.icon,
+                    onClick: this.handleClear
+                })
+            )
+        );
+    }
+}
+
+HiUploadField.defaultProps = {
+    placeholder: 'Choose a file',
+    disabled: false,
+    focused: false,
+    acceptedTypes: [],
+    maxSize: 10000000,
+    error: false,
+    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'
+    }
+};
+HiUploadField.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * 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.
+     */
+    onClear: PropTypes.func,
+    /**
+     * The handler to see the file.
+     */
+    onSeeFile: PropTypes.func,
+    /**
+     * The placeholder for the field.
+     */
+    placeholder: PropTypes.string,
+    /**
+     * The translations of the error messages.
+     */
+    translations: PropTypes.object,
+    /**
+     * The file value for the field.
+     */
+    value: PropTypes.object
+} : {};
+export default withStyles(styles, { name: 'HmuiHiUploadField' })(HiUploadField);

package/es/HiForm/index.js

@@ -4,4 +4,8 @@ export { default as HiFormLabel } from './HiFormLabel';
 export { default as HiInput } from './HiInput';
 export { default as HiPasswordField } from './HiPasswordField';
 export { default as HiTextField } from './HiTextField';
-export { default as HiSearchField } from './HiSearchField';
+export { default as HiSearchField } from './HiSearchField';
+export { default as HiUpload } from './HiUpload';
+export { default as HiUploadField } from './HiUploadField';
+export { default as HiSlider } from './HiSlider';
+export { default as HiAddressField } from './HiAddressField';