@hipay/hipay-material-ui 2.0.0-beta.55 → 2.0.0-beta.57

package/es/HiForm/HiUploadField.js

@@ -0,0 +1,140 @@
+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'
+  },
+  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() {
+    const _this$props = this.props,
+          {
+      className,
+      label,
+      helperIcon,
+      helperText,
+      values
+    } = _this$props,
+          others = _objectWithoutProperties(_this$props, ["className", "label", "helperIcon", "helperText", "values"]);
+
+    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 = errorText || value.errorMessage;
+      }
+    }
+
+    return React.createElement(HiFormControl, {
+      label: label,
+      className: className,
+      errorText: errorText,
+      error: error,
+      helperIcon: helperIcon,
+      helperText: helperText
+    }, React.createElement(HiUpload, _extends({
+      values: values
+    }, others)));
+  }
+
+}
+
+HiUploadField.defaultProps = {
+  helperText: '',
+  helperIcon: false
+};
+HiUploadField.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 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,
+
+  /**
+   * Valeurs des inputs
+   */
+  values: PropTypes.array
+} : {};
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiUploadField'
+})(HiUploadField);

package/es/HiForm/HiUploadInput.js

@@ -0,0 +1,411 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+import HiIconButton from '../HiIconButton';
+import RemoveRedEye from '@material-ui/icons/RemoveRedEye';
+import Delete from '@material-ui/icons/Delete';
+export const styles = theme => ({
+  root: _objectSpread({
+    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.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.normal}`
+      }
+    }
+  },
+  disabled: {
+    color: `${theme.palette.action.disabled}`,
+    '&:before': {
+      display: 'none'
+    }
+  },
+  focused: {
+    backgroundColor: theme.palette.background3
+  },
+  error: {},
+  label: _objectSpread({}, theme.typography.body1, {
+    fontWeight: theme.typography.fontWeightRegular,
+    caretColor: theme.palette.primary.main,
+    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}`,
+    fontSize: 10,
+    transition: theme.transitions.create(['opacity', 'transform'], {
+      duration: theme.transitions.duration.shorter
+    }),
+    '&:hover': {
+      color: 'inherit',
+      backgroundColor: theme.palette.local.background2
+    }
+  }
+});
+
+var _ref = React.createElement(RemoveRedEye, null);
+
+var _ref2 = React.createElement(Delete, null);
+
+class HiUploadInput extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.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
+          });
+        }
+      }
+    };
+
+    this.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
+          });
+        }
+      }
+    };
+
+    this.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
+        });
+      }
+    };
+
+    this.handleChange = event => {
+      const param = this.handleFile(event.target.files);
+      this.props.onChange(param, this.props.index);
+    };
+
+    this.handleDeleteFile = () => {
+      this.props.onDeleteFile(this.props.index);
+    };
+
+    this.handleEmptyField = event => {
+      event.target.value = '';
+    };
+
+    this.handleSeeFile = () => {
+      this.props.onSeeFile(this.props.value);
+    };
+
+    this.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
+      };
+    };
+
+    this.uploadFieldRef = void 0;
+    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
+
+
+  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',
+      onClick: this.handleEmptyField,
+      hidden: true,
+      onChange: this.handleChange
+    })), value === null || React.createElement("div", {
+      className: classes.endAdornment
+    }, React.createElement(HiIconButton, {
+      className: classes.icon,
+      onClick: this.handleSeeFile
+    }, _ref), React.createElement(HiIconButton, {
+      className: classes.icon,
+      onClick: this.handleDeleteFile
+    }, _ref2)));
+  }
+
+}
+
+HiUploadInput.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'
+  }
+};
+HiUploadInput.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.
+   */
+  onDeleteFile: 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, {
+  hiComponent: true,
+  name: 'HmuiHiUploadInput'
+})(HiUploadInput);

package/es/HiForm/index.js

@@ -1,7 +1,9 @@
+export { default as HiAddressField } from './HiAddressField';
 export { default as HiEmailField } from './HiEmailField';
 export { default as HiFormControl } from './HiFormControl';
 export { default as HiFormLabel } from './HiFormLabel';
 export { default as HiInput } from './HiInput';
 export { default as HiPasswordField } from './HiPasswordField';
 export { default as HiSearchField } from './HiSearchField';
+export { default as HiSlider } from './HiSlider';
 export { default as HiTextField } from './HiTextField';