@hipay/hipay-material-ui 2.0.0-beta.58 → 2.0.0-beta.60

package/es/HiForm/HiFormControl.js

@@ -22,13 +22,11 @@ export const styles = theme => ({
     marginTop: 2
   },
   iconButton: {
-    position: 'absolute',
-    right: 5,
     cursor: 'pointer',
     zIndex: 1,
-    top: '-5px',
-    height: 24,
-    width: 24,
+    height: 20,
+    width: 20,
+    marginLeft: 3,
     '&$iconButtonError': {
       color: theme.palette.negative.main
     },
@@ -37,11 +35,18 @@ export const styles = theme => ({
     },
     '&$iconButtonInfoActive': {
       color: theme.palette.primary.main
+    },
+    '&$iconFullWidth': {
+      position: 'absolute',
+      right: 5,
+      marginLeft: 0,
+      bottom: 0
     }
   },
   iconButtonError: {},
   iconButtonInfo: {},
   iconButtonInfoActive: {},
+  iconFullWidth: {},
   errorDiv: _objectSpread({}, theme.typography.b3, {
     backgroundColor: theme.palette.negative.main,
     color: '#FFFFFF',
@@ -60,8 +65,15 @@ export const styles = theme => ({
     borderTop: '4px solid #000',
     position: 'absolute',
     bottom: -4,
-    right: 13
+    '&$arrowNotFullWidth': {
+      left: 8
+    },
+    '&$arrowFullWidth': {
+      right: 13
+    }
   },
+  arrowNotFullWidth: {},
+  arrowFullWidth: {},
   errorDivArrowDown: {
     borderTopColor: theme.palette.negative.main
   },
@@ -81,7 +93,8 @@ export const styles = theme => ({
     borderTopColor: '#ffffff'
   },
   icon: {
-    position: 'absolute'
+    position: 'absolute',
+    fontSize: 19
   }
 });
 /**
@@ -176,7 +189,7 @@ class HiFormControl extends React.PureComponent {
     }, others), error && errorText && helperOpen && React.createElement("div", {
       className: classes.errorDiv
     }, React.createElement("div", {
-      className: classNames(classes.arrowDown, classes.errorDivArrowDown)
+      className: classNames(classes.arrowDown, classes.errorDivArrowDown, fullWidth ? [classes.arrowFullWidth] : [classes.arrowNotFullWidth])
     }), React.createElement("span", {
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML: {
@@ -185,7 +198,7 @@ class HiFormControl extends React.PureComponent {
     })), helperIcon && helperText && !error && helperOpen && React.createElement("div", {
       className: classes.helperDiv
     }, React.createElement("div", {
-      className: classNames(classes.arrowDown, classes.helperDivArrowDown)
+      className: classNames(classes.arrowDown, classes.helperDivArrowDown, fullWidth ? [classes.arrowFullWidth] : [classes.arrowNotFullWidth])
     }), React.createElement("span", {
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML: {
@@ -198,13 +211,16 @@ class HiFormControl extends React.PureComponent {
       disabled: disabled,
       focused: !disabled && (focused || hovered)
     }, InputLabelProps), error && errorText && React.createElement(HiIconButton, {
-      className: classNames(classes.iconButton, classes.iconButtonError),
+      className: classNames(classes.iconButton, classes.iconButtonError, {
+        [classes.iconFullWidth]: fullWidth
+      }),
       onClick: this.handleHelperClick
     }, React.createElement(Warning, {
       className: classNames(classes.icon)
     })), helperIcon && helperText && !error && React.createElement(HiIconButton, {
       className: classNames(classes.iconButton, classes.iconButtonInfo, {
-        [classes.iconButtonInfoActive]: helperOpen
+        [classes.iconButtonInfoActive]: helperOpen,
+        [classes.iconFullWidth]: fullWidth
       }),
       onClick: this.handleHelperClick
     }, React.createElement(Info, {

package/es/HiForm/HiFormLabel.js

@@ -19,7 +19,9 @@ export const styles = theme => ({
     },
     '&$error': {
       color: theme.palette.negative.main
-    }
+    },
+    display: 'flex',
+    alignItems: 'center'
   }),
   optional: {
     fontSize: 11,

package/es/HiForm/HiInput.js

@@ -2,6 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread";
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import keycode from 'keycode/index';
 import Input from '@material-ui/core/Input';
 import HiIcon from '../HiIcon';
 import HiIconButton from '../HiIconButton';
@@ -127,6 +128,25 @@ var _ref = React.createElement(HiIcon, {
 class HiInput extends React.PureComponent {
   constructor() {
     super();
+
+    this.handleKeyDown = event => {
+      const key = keycode(event);
+
+      if (this.props.onKeyDown) {
+        this.props.onKeyDown(event);
+      }
+
+      if (key === 'enter' && this.props.onSubmit) {
+        this.props.onSubmit(event);
+      }
+    };
+
+    this.handleClick = () => {
+      if (this.props.onClick) {
+        this.props.onClick();
+      }
+    };
+
     this.state = {
       focused: false
     };
@@ -346,7 +366,8 @@ class HiInput extends React.PureComponent {
       value: value,
       placeholder: placeholder,
       onFocus: this.handleFocus,
-      onKeyDown: this.props.onKeyDown,
+      onKeyDown: this.handleKeyDown,
+      onClick: this.handleClick,
       onBlur: this.handleBlur,
       inputRef: this.getInputElement,
       disabled: disabled,
@@ -466,6 +487,11 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onChange: PropTypes.func,
 
+  /**
+   * Fonction de callback appelée au click dans l'input
+   */
+  onClick: PropTypes.func,
+
   /**
    * Fonction de callback appelée au focus du champs
    */
@@ -506,6 +532,11 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onRightIconClick: PropTypes.func,
 
+  /**
+   * Fonction de callback appelée lorsque l'utilisateur tape sur "Entrée"
+   */
+  onSubmit: PropTypes.func,
+
   /**
    * Passe une ref callback au composant div parent
    */

package/es/HiForm/HiUpload.js

@@ -1,14 +1,15 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import keycode from 'keycode/index';
 import withStyles from '../styles/withStyles';
 import HiUploadInput from './HiUploadInput';
 import HiIcon from '../HiIcon';
 export const styles = theme => ({
   flexContainer: {
-    display: '  flex',
+    display: 'flex',
     alignItems: 'center'
   },
   statusIcon: {
@@ -22,8 +23,10 @@ export const styles = theme => ({
     color: `${theme.palette.middle.main} !important`,
     fontSize: '80px'
   },
+  dragOver: {},
   inputContainer: {
-    flex: '1'
+    flex: '1',
+    width: 'calc(100% - 88px)'
   },
   empty: {
     border: `1px solid ${theme.palette.input.bottomLine}`,
@@ -37,39 +40,249 @@ export const styles = theme => ({
   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 {
+  constructor() {
+    super();
+
+    this.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
+          });
+        }
+      }
+    };
+
+    this.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
+          });
+        }
+      }
+    };
+
+    this.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
+        });
+      }
+    };
+
+    this.handleChange = event => {
+      const index = this.getNextInputIndex();
+      const param = this.handleFile(event.target.files, index);
+      this.props.onChange(param, index);
+    };
+
+    this.handleEmptyField = event => {
+      event.target.value = '';
+    };
+
+    this.handleKeyPress = event => {
+      const key = keycode(event);
+
+      if (key === 'enter' || key === 'space') {
+        event.preventDefault();
+        this.uploadInput.click();
+      }
+    };
+
+    this.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
+      };
+    };
+
+    this.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(React.createElement(HiUploadInput, _extends({
+            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;
+    };
+
+    this.uploadFieldRef = void 0;
+    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
+
+
   render() {
     const _this$props = this.props,
           {
+      id,
       inputs,
       classes,
-      values
+      values,
+      focused
     } = _this$props,
-          others = _objectWithoutProperties(_this$props, ["inputs", "classes", "values"]);
+          others = _objectWithoutProperties(_this$props, ["id", "inputs", "classes", "values", "focused"]);
 
+    const {
+      dragOver,
+      droppable
+    } = this.state;
     let complete = true;
     let empty = true;
-    let error = false;
+    let error = false; // For unlimited inputs: always grey
 
-    for (let i = 0, len = values.length; i < len; i += 1) {
-      const value = values[i];
+    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;
+        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,
-      [classes.error]: error
+      [classes.complete]: complete
     });
     let icon;
 
@@ -81,27 +294,49 @@ class HiUpload extends React.PureComponent {
       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 React.createElement("div", {
       className: classes.flexContainer
-    }, React.createElement(HiIcon, {
-      className: statusClass,
+    }, React.createElement("label", {
+      htmlFor: "flat-button-file",
+      ref: label => {
+        this.uploadFieldRef = label;
+      },
+      tabIndex: "-1"
+    }, React.createElement("input", {
+      hidden: true,
+      id: "flat-button-file",
+      type: !complete || values.length === 1 ? 'file' : 'hidden',
+      onChange: this.handleChange,
+      onClick: focusable ? this.handleEmptyField : undefined,
+      ref: el => {
+        this.uploadInput = el;
+      }
+    }), React.createElement(HiIcon, {
+      ref: uploadIcon => {
+        this.uploadIconRef = uploadIcon;
+      },
+      id: `iconUpload-${id}`,
+      className: iconClass,
       icon: icon,
-      size: 32
-    }), React.createElement("div", {
+      size: 32,
+      tabIndex: focusable ? '0' : '-1',
+      onKeyPress: this.handleKeyPress
+    })), React.createElement("div", {
       className: classes.inputContainer
-    }, inputs.map((item, index) => React.createElement(HiUploadInput, _extends({
-      maxSize: item.maxSize,
-      acceptedTypes: item.acceptedTypes,
-      placeholder: item.placeholder,
-      value: values[index] ? values[index].value : null,
-      error: values[index] ? values[index].error : null,
-      errorMessage: values[index] ? values[index].errorMessage : null,
-      onSeeFile: this.handleSeeFile,
-      onDeleteFile: this.props.onDeleteFile,
-      onChange: this.props.onChange,
-      index: index,
-      key: item.id
-    }, others)))));
+    }, this.createInputs(others)));
   }
 
 }
@@ -127,8 +362,14 @@ HiUpload.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   helperText: PropTypes.string,
 
+  /**
+   * id du composant
+   */
+  id: PropTypes.string.isRequired,
+
   /**
    * 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,
 
@@ -148,7 +389,7 @@ HiUpload.propTypes = process.env.NODE_ENV !== "production" ? {
   onSeeFile: PropTypes.func,
 
   /**
-   * Valeurs des inputs
+   * True if can upload an unlimited number of files
    */
   values: PropTypes.array
 } : {};

package/es/HiForm/HiUploadField.js

@@ -2,43 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from '../styles/withStyles';
 import HiFormControl from './HiFormControl';
 import HiUpload from './HiUpload';
-export const styles = theme => ({
-  flexContainer: {
-    display: '  flex',
-    alignItems: 'center'
-  },
-  statusIcon: {
-    height: '80px',
-    width: '80px',
-    marginRight: '8px',
-    padding: '24px',
-    borderRadius: '2px',
-    backgroundColor: theme.palette.local.background2,
-    border: `1px solid ${theme.palette.middle.main}`,
-    color: `${theme.palette.middle.main} !important`,
-    fontSize: '80px'
-  },
-  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`
-  }
-});
 
 class HiUploadField extends React.PureComponent {
   render() {
@@ -48,9 +13,10 @@ class HiUploadField extends React.PureComponent {
       label,
       helperIcon,
       helperText,
-      values
+      values,
+      fullWidth
     } = _this$props,
-          others = _objectWithoutProperties(_this$props, ["className", "label", "helperIcon", "helperText", "values"]);
+          others = _objectWithoutProperties(_this$props, ["className", "label", "helperIcon", "helperText", "values", "fullWidth"]);
 
     let empty = true;
     let error = false;
@@ -72,7 +38,8 @@ class HiUploadField extends React.PureComponent {
       errorText: errorText,
       error: error,
       helperIcon: helperIcon,
-      helperText: helperText
+      helperText: helperText,
+      fullWidth: fullWidth
     }, React.createElement(HiUpload, _extends({
       values: values
     }, others)));
@@ -82,7 +49,9 @@ class HiUploadField extends React.PureComponent {
 
 HiUploadField.defaultProps = {
   helperText: '',
-  helperIcon: false
+  helperIcon: false,
+  seeFile: true,
+  fullWidth: false
 };
 HiUploadField.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
@@ -95,6 +64,11 @@ HiUploadField.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   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"
    */
@@ -130,12 +104,14 @@ HiUploadField.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onSeeFile: PropTypes.func,
 
+  /**
+   * set to false to hide the eye button
+   */
+  seeFile: PropTypes.bool,
+
   /**
    * Valeurs des inputs
    */
   values: PropTypes.array
 } : {};
-export default withStyles(styles, {
-  hiComponent: true,
-  name: 'HmuiHiUploadField'
-})(HiUploadField);
+export default HiUploadField;