@hipay/hipay-material-ui 2.0.0-beta.54 → 2.0.0-beta.56

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';

package/es/HiMap/HiMap.js

@@ -0,0 +1,290 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '../styles';
+import HiButton from '../HiButton';
+import HiIcon from '../HiIcon';
+import HiLoader from '../HiLoader';
+const apiUrl = 'https://nominatim.openstreetmap.org/search?q='; // The original CSS can be found here : https://unpkg.com/leaflet@1.3.1/dist/leaflet.css
+
+export const styles = theme => ({
+  map: {
+    height: '100%',
+    overflow: 'hidden',
+    // eslint-disable-next-line max-len
+    '& .leaflet-pane, & .leaflet-tile, & .leaflet-marker-icon, & .leaflet-marker-shadow, & .leaflet-tile-container, & .leaflet-pane > svg, & .leaflet-pane > canvas, & .leaflet-zoom-box, & .leaflet-image-layer, & .leaflet-layer': {
+      position: 'absolute',
+      left: 0,
+      top: 0
+    },
+    '& .leaflet-container': {
+      overflow: 'hidden',
+      height: '100%'
+    },
+    '& .leaflet-tile, & .leaflet-marker-icon, & .leaflet-marker-shadow': {
+      '-webkit-user-select': 'none',
+      '-moz-user-select': 'none',
+      userSelect: 'none',
+      '-webkit-user-drag': 'none'
+    },
+    '& .leaflet-control': {
+      display: 'none'
+    },
+    '& .map_marker': {
+      fill: theme.palette.primary.light
+    }
+  },
+  controlButtons: {
+    position: 'absolute',
+    bottom: 16,
+    right: 16
+  },
+  centerIcon: {
+    fontSize: 14
+  },
+  centerButtonContainer: {
+    backgroundColor: theme.palette.global.background1,
+    borderRadius: 3,
+    padding: 3,
+    fontFamily: theme.typography.fontFamily,
+    boxShadow: '1px 1px 5px rgba(0, 0, 0, .16)',
+    color: theme.palette.neutral.normal,
+    '&>button:first-child': {
+      borderBottom: `1px solid ${theme.palette.neutral.normal}`
+    }
+  },
+  centerButton: {
+    color: theme.palette.neutral.normal,
+    padding: '1px !important',
+    height: 26,
+    minHeight: 26,
+    width: 26,
+    minWidth: 26
+  },
+  zoomButtons: {
+    backgroundColor: theme.palette.global.background1,
+    borderRadius: 3,
+    padding: 3,
+    fontFamily: theme.typography.fontFamily,
+    boxShadow: '1px 1px 5px rgba(0, 0, 0, .16)',
+    color: theme.palette.neutral.normal,
+    '&>button:first-child': {
+      borderBottom: `1px solid ${theme.palette.neutral.normal}`
+    }
+  },
+  zoomButton: {
+    paddingTop: '0px !important',
+    paddingBottom: 0,
+    paddingRight: 6,
+    paddingLeft: 6,
+    minWidth: 0,
+    minHeight: 0,
+    borderRadius: 0,
+    display: 'block',
+    fontSize: 24,
+    fontWeight: 'bold',
+    lineHeight: '26px',
+    '&>span': {
+      width: 14
+    }
+  }
+});
+let L;
+let Map;
+let TileLayer;
+let Marker;
+
+var _ref = React.createElement(TileLayer, {
+  url: "http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png"
+});
+
+var _ref2 = React.createElement(HiLoader, {
+  loading: true
+});
+
+class HiMap extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.mounted = false;
+    this.state = {
+      lat: 0,
+      lng: 0,
+      notFound: false,
+      loaded: false,
+      zoom: 16
+    };
+    this.handleClickZoomIn = this.handleClickZoomIn.bind(this);
+    this.handleScrollZoom = this.handleScrollZoom.bind(this);
+    this.handleClickZoomOut = this.handleClickZoomOut.bind(this);
+    this.handleCenter = this.handleCenter.bind(this);
+  } // Loads the libraries once the component mounted to avoid error caused by server-cli rendering.
+
+
+  componentDidMount() {
+    this.mounted = true;
+    this.findCoords();
+    /* eslint-disable */
+
+    L = require('leaflet');
+    Map = require('react-leaflet').Map;
+    Marker = require('react-leaflet').Marker;
+    TileLayer = require('react-leaflet').TileLayer;
+    /* eslint-enable */
+  }
+
+  componentWillUnmount() {
+    this.mounted = false;
+  }
+
+  handleScrollZoom(event) {
+    this.setState({
+      zoom: event.zoom
+    });
+  }
+
+  handleClickZoomIn() {
+    this.setState(prevState => {
+      return {
+        zoom: prevState.zoom + 1
+      };
+    });
+  }
+
+  handleClickZoomOut() {
+    this.setState(prevState => {
+      return {
+        zoom: prevState.zoom - 1
+      };
+    });
+  }
+
+  handleCenter() {
+    // trick to center the map.
+    this.setState(prevState => {
+      return {
+        lat: prevState.lat + 0.0000000001
+      };
+    });
+  } // Call to the geocoding API.
+
+
+  findCoords() {
+    fetch(`${apiUrl}${this.props.address}&format=jsonv2&limit=5&bounded=1&dedupe=1&namedetails=1`).then(result => result.json()).then(response => {
+      if (this.mounted) {
+        if (response.length !== 0) {
+          this.setState({
+            lat: parseFloat(response[0].lat),
+            lng: parseFloat(response[0].lon),
+            notFound: false,
+            loaded: true
+          });
+        } else {
+          this.setState({
+            notFound: true
+          });
+          this.props.onAddressNotFound();
+        }
+      }
+    });
+  }
+
+  render() {
+    const {
+      zoom,
+      lng,
+      lat,
+      notFound,
+      loaded
+    } = this.state;
+    const {
+      translations,
+      classes
+    } = this.props;
+    const position = [lat, lng];
+    let element;
+    let myIcon;
+    if (notFound) element = translations.notFound;
+
+    if (loaded) {
+      myIcon = L.divIcon({
+        html: '<svg x="0px" y="0px" viewBox="0 0 365 560" enable-background="new 0 0 365 560" xml:space="preserve">\n' + '<path class="map_marker" ' + 'd="M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9 ' + 'C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,175.3,357.4S182.9,551.7,182.9,551.7z' + ' M122.2,187.2c0-33.6,27.2-60.8,60.8-60.8 ' + 'c33.6,0,60.8,27.2,60.8,60.8S216.5,248,182.9,248C149.4,248,122.2,220.8,122.2,187.2z"/>\n' + '</svg>',
+        iconSize: [24, 36],
+        iconAnchor: [11, 36]
+      });
+      element = React.createElement(Map, {
+        zoom: zoom,
+        center: position,
+        className: classes.map,
+        onViewportChange: this.handleScrollZoom
+      }, _ref, React.createElement(Marker, {
+        position: position,
+        icon: myIcon
+      }), React.createElement("div", {
+        className: classes.controlButtons
+      }, React.createElement("div", {
+        className: classes.centerButtonContainer
+      }, React.createElement(HiButton, {
+        className: classes.centerButton,
+        onClick: this.handleCenter
+      }, React.createElement(HiIcon, {
+        className: classes.centerIcon,
+        icon: 'my_location',
+        size: 24
+      }))), React.createElement("div", {
+        className: classes.zoomButtons
+      }, React.createElement(HiButton, {
+        onClick: this.handleClickZoomIn,
+        className: classes.zoomButton
+      }, "+"), React.createElement(HiButton, {
+        onClick: this.handleClickZoomOut,
+        className: classes.zoomButton
+      }, "-"))));
+    } else {
+      element = React.createElement("div", {
+        style: {
+          top: '50%',
+          left: '50%',
+          position: 'absolute'
+        }
+      }, _ref2);
+    }
+
+    return React.createElement("div", {
+      style: {
+        height: '352px',
+        width: '100%',
+        position: 'relative'
+      }
+    }, element);
+  }
+
+}
+
+HiMap.defaultProps = {
+  translations: {
+    notFound: 'Address not found'
+  }
+};
+HiMap.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The address to see in the Map component.
+   */
+  address: PropTypes.string.isRequired,
+
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+
+  /**
+   * Function to tell the parent composant that the address was not found by the API.
+   */
+  onAddressNotFound: PropTypes.func,
+
+  /**
+   * Traductions
+   */
+  translations: PropTypes.object
+} : {};
+export default withStyles(styles, {
+  name: 'HmuiHiMap'
+})(HiMap);