@hipay/hipay-material-ui 1.0.0-beta.19 → 1.0.0-beta.20

package/HiForm/HiUploadField.js

@@ -0,0 +1,456 @@
+'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);

package/HiForm/index.js

@@ -67,6 +67,24 @@ Object.defineProperty(exports, 'HiSearchField', {
   }
 });
 
+var _HiUpload = require('./HiUpload');
+
+Object.defineProperty(exports, 'HiUpload', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HiUpload).default;
+  }
+});
+
+var _HiUploadField = require('./HiUploadField');
+
+Object.defineProperty(exports, 'HiUploadField', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HiUploadField).default;
+  }
+});
+
 var _HiSlider = require('./HiSlider');
 
 Object.defineProperty(exports, 'HiSlider', {