@hipay/hipay-material-ui 1.0.0-beta.29 → 1.0.0-beta.4

package/HiForm/HiUploadField.js

@@ -1,456 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-exports.styles = undefined;
-
-var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
-
-var _defineProperty3 = _interopRequireDefault(_defineProperty2);
-
-var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
-
-var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
-
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
-
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
-
-var _createClass2 = require('babel-runtime/helpers/createClass');
-
-var _createClass3 = _interopRequireDefault(_createClass2);
-
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
-
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
-
-var _inherits2 = require('babel-runtime/helpers/inherits');
-
-var _inherits3 = _interopRequireDefault(_inherits2);
-
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _withStyles = require('../styles/withStyles');
-
-var _withStyles2 = _interopRequireDefault(_withStyles);
-
-var _HiIconBuilder = require('../utils/HiIconBuilder');
-
-var _HiIconBuilder2 = _interopRequireDefault(_HiIconBuilder);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var styles = exports.styles = function styles(theme) {
-    return {
-        root: (0, _extends3.default)({
-            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: (0, _extends3.default)({}, 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'
-            }
-        }
-    };
-};
-
-var HiUploadField = function (_React$PureComponent) {
-    (0, _inherits3.default)(HiUploadField, _React$PureComponent);
-
-    function HiUploadField(props) {
-        (0, _classCallCheck3.default)(this, HiUploadField);
-
-        var _this = (0, _possibleConstructorReturn3.default)(this, (HiUploadField.__proto__ || (0, _getPrototypeOf2.default)(HiUploadField)).call(this, 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);
-        return _this;
-    }
-
-    // When component mounts, we add eventListeners to handle the file drag and drop
-
-
-    (0, _createClass3.default)(HiUploadField, [{
-        key: 'componentDidMount',
-        value: function componentDidMount() {
-            this.uploadFieldRef.addEventListener('dragenter', this.handleDragEnter, false);
-            this.uploadFieldRef.addEventListener('dragleave', this.handleDragLeave, false);
-            this.uploadFieldRef.addEventListener('dragover', function (event) {
-                event.preventDefault();
-            }, false);
-            this.uploadFieldRef.addEventListener('drop', this.handleDrop, false);
-        }
-    }, {
-        key: 'componentWillUnmount',
-        value: function componentWillUnmount() {
-            this.uploadFieldRef.removeEventListener('dragenter', this.handleDragEnter, false);
-            this.uploadFieldRef.removeEventListener('dragleave', this.handleDragLeave, false);
-            this.uploadFieldRef.removeEventListener('dragover', function (event) {
-                event.preventDefault();
-            }, false);
-            this.uploadFieldRef.removeEventListener('drop', this.handleDrop, false);
-        }
-
-        // Action when files are dropped on the field
-
-    }, {
-        key: 'handleDrop',
-        value: function handleDrop(event) {
-            if (event.target === this.uploadFieldRef) {
-                event.preventDefault();
-                event.stopPropagation();
-                if (this.state.droppable) {
-                    var 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.
-
-    }, {
-        key: 'handleDragEnter',
-        value: function 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.
-
-    }, {
-        key: 'handleDragLeave',
-        value: function 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 });
-            }
-        }
-    }, {
-        key: 'handleChange',
-        value: function handleChange(event) {
-            var param = this.handleFile(event.target.files);
-            this.props.onChange(param, this.props.index);
-        }
-    }, {
-        key: 'handleClear',
-        value: function handleClear() {
-            this.props.onClear(this.props.index);
-        }
-    }, {
-        key: 'handleSeeFile',
-        value: function handleSeeFile() {
-            this.props.onSeeFile(this.props.value);
-        }
-
-        // Handles the file wether it is selected via the input or dropped on it.
-
-    }, {
-        key: 'handleFile',
-        value: function handleFile(files) {
-            var error = false;
-            var errorMessage = '';
-            var 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: errorMessage, error: error, value: file };
-        }
-    }, {
-        key: 'render',
-        value: function render() {
-            var _classNames,
-                _this2 = this;
-
-            var _props = this.props,
-                placeholder = _props.placeholder,
-                classes = _props.classes,
-                disabled = _props.disabled,
-                focused = _props.focused,
-                value = _props.value,
-                error = _props.error;
-            var _state = this.state,
-                dragOver = _state.dragOver,
-                errorMessage = _state.errorMessage,
-                droppable = _state.droppable;
-
-            // On utilise classNames pour variabiliser les styles et merger les classes appliquées
-
-            var rootClass = (0, _classnames2.default)(classes.root, classes.inkbar, classes.underline, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.disabled, disabled), (0, _defineProperty3.default)(_classNames, classes.focused, focused), (0, _defineProperty3.default)(_classNames, classes.error, error && !focused), (0, _defineProperty3.default)(_classNames, classes.dragOver, dragOver), (0, _defineProperty3.default)(_classNames, classes.droppable, droppable), _classNames));
-
-            return _react2.default.createElement(
-                'div',
-                { className: rootClass },
-                _react2.default.createElement(
-                    'label',
-                    {
-                        className: (0, _classnames2.default)(classes.label, (0, _defineProperty3.default)({}, classes.empty, value === null)),
-                        ref: function ref(label) {
-                            return _this2.uploadFieldRef = label;
-                        }
-                    },
-                    value ? value.name : error && errorMessage || placeholder,
-                    _react2.default.createElement('input', { type: 'file', hidden: true, onChange: this.handleChange })
-                ),
-                value === null || _react2.default.createElement(
-                    'div',
-                    { className: classes.endAdornment },
-                    _react2.default.createElement(_HiIconBuilder2.default, {
-                        icon: 'eye',
-                        size: 36,
-                        className: classes.icon,
-                        onClick: this.handleSeeFile
-                    }),
-                    _react2.default.createElement(_HiIconBuilder2.default, {
-                        icon: 'delete',
-                        size: 36,
-                        className: classes.icon,
-                        onClick: this.handleClear
-                    })
-                )
-            );
-        }
-    }]);
-    return HiUploadField;
-}(_react2.default.PureComponent);
-
-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: _propTypes2.default.array,
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: _propTypes2.default.object,
-    /**
-     * Is the field disabled.
-     */
-    disabled: _propTypes2.default.bool,
-    /**
-     * Is there an error with the file selected.
-     */
-    error: _propTypes2.default.bool,
-    /**
-     * Is the field focused.
-     */
-    focused: _propTypes2.default.bool,
-    /**
-     * The index of the input.
-     */
-    index: _propTypes2.default.number,
-    /**
-     * Defines what size the file must not exceed (in bytes).
-     */
-    maxSize: _propTypes2.default.number,
-    /**
-     * The change handler.
-     */
-    onChange: _propTypes2.default.func,
-    /**
-     * The handler to clear the field.
-     */
-    onClear: _propTypes2.default.func,
-    /**
-     * The handler to see the file.
-     */
-    onSeeFile: _propTypes2.default.func,
-    /**
-     * The placeholder for the field.
-     */
-    placeholder: _propTypes2.default.string,
-    /**
-     * The translations of the error messages.
-     */
-    translations: _propTypes2.default.object,
-    /**
-     * The file value for the field.
-     */
-    value: _propTypes2.default.object
-} : {};
-exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiUploadField' })(HiUploadField);