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

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

package/es/HiMap/HiMapExpand.js

@@ -0,0 +1,162 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import ExpansionPanel from '@material-ui/core/ExpansionPanel';
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
+import { withStyles } from '../styles';
+import HiMap from './HiMap';
+import HiIcon from '../HiIcon/HiIcon';
+
+const styles = theme => ({
+  column: {
+    flexBasis: '33.33%'
+  },
+  root: {
+    flexGrow: 1,
+    boxShadow: 'none'
+  },
+  imgListItem: {
+    width: 24,
+    height: 'auto',
+    marginRight: 8,
+    verticalAlign: 'middle'
+  },
+  expandMoreIcon: {},
+  disabledIcon: {
+    color: theme.palette.action.disabled
+  },
+  panelSummaryExpanded: {
+    minHeight: 0
+  },
+  panelSummary: {
+    '&>div:first-child': {
+      margin: '12px 0'
+    }
+  },
+  expanded: {
+    '& $expandMoreIcon': {
+      transform: 'translateY(-50%) rotate(0) !important',
+      color: theme.palette.primary.light
+    },
+    minHeight: '0 !important'
+  },
+  heading: _objectSpread({}, theme.typography.b1, {
+    margin: 0,
+    fontSize: 15,
+    lineHeight: '24px'
+  }),
+  secondaryHeading: _objectSpread({}, theme.typography.b3, {
+    margin: 0,
+    fontSize: 15,
+    lineHeight: '24px',
+    float: 'left',
+    '&>svg': {
+      fontSize: 18,
+      marginLeft: 3,
+      marginBottom: -5
+    }
+  })
+});
+
+class HiMapExpand extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      addressNotFound: false,
+      expanded: false
+    };
+    this.handleAddressNotFound = this.handleAddressNotFound.bind(this);
+    this.handleExpand = this.handleExpand.bind(this);
+  }
+
+  handleExpand() {
+    this.setState(prevState => ({
+      expanded: !prevState.addressNotFound && !prevState.expanded
+    }));
+  }
+
+  handleAddressNotFound() {
+    this.setState({
+      addressNotFound: true
+    });
+  }
+
+  render() {
+    const {
+      classes,
+      address,
+      countryFlagPath
+    } = this.props;
+    const {
+      addressNotFound,
+      expanded
+    } = this.state;
+    const flag = countryFlagPath ? React.createElement("img", {
+      src: countryFlagPath,
+      className: classes.imgListItem,
+      alt: 'country flag'
+    }) : '';
+    return React.createElement(ExpansionPanel, {
+      className: classes.root,
+      defaultExpanded: false,
+      expanded: expanded,
+      onChange: this.handleExpand
+    }, React.createElement(ExpansionPanelSummary, {
+      classes: {
+        root: classes.panelSummary,
+        expanded: classes.expanded,
+        expandIcon: classes.expandMoreIcon
+      },
+      expandIcon: React.createElement(HiIcon, {
+        icon: 'place',
+        style: {
+          position: 'relative',
+          top: 2,
+          marginRight: 5
+        },
+        className: classNames({
+          [classes.disabledIcon]: addressNotFound
+        })
+      })
+    }, React.createElement("div", {
+      className: classes.column
+    }, React.createElement("p", {
+      className: classes.secondaryHeading
+    }, "Adresse")), React.createElement("div", null, React.createElement("p", {
+      className: classes.heading
+    }, flag, address))), React.createElement(ExpansionPanelDetails, {
+      style: {
+        padding: 0
+      }
+    }, React.createElement(HiMap, {
+      address: address,
+      onAddressNotFound: this.handleAddressNotFound
+    })));
+  }
+
+}
+
+HiMapExpand.defaultProps = {
+  countryFlagPath: ''
+};
+HiMapExpand.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,
+
+  /**
+   * The path to the country flag image.
+   */
+  countryFlagPath: PropTypes.string
+} : {};
+export default withStyles(styles, {
+  name: 'HmuiHiMapExpand'
+})(HiMapExpand);

package/es/HiMap/index.js

@@ -0,0 +1,2 @@
+export { default } from './HiMap';
+export { default as HiMapExpand } from './HiMapExpand';

package/es/HiNotice/HiKPI.js

@@ -0,0 +1,196 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '../styles';
+import ButtonBase from '@material-ui/core/ButtonBase';
+export const styles = theme => ({
+  root: {
+    background: theme.palette.background3,
+    height: 104,
+    width: 136,
+    padding: '0px 8px',
+    margin: 8,
+    display: 'flex',
+    textAlign: 'center',
+    flexDirection: 'column',
+    alignItems: 'center',
+    fontFamily: theme.typography.fontFamily
+  },
+  error: {
+    boxShadow: '0px 2px 4px 0px rgba(213, 0, 0, 0.24)',
+    '&:hover': {
+      boxShadow: '0px 3px 5px 0px rgba(213, 0, 0, 0.32)'
+    }
+  },
+  warning: {
+    boxShadow: '0px 2px 4px 0px rgba(249, 148, 8, 0.32)',
+    '&:hover': {
+      boxShadow: '0px 3px 5px 0px rgba(249, 148, 8, 0.40)'
+    }
+  },
+  inherit: {
+    boxShadow: '0px 1px 3px 0px rgba(0, 0, 0, 0.16)',
+    '&:hover': {
+      boxShadow: '0px 3px 5px 0px rgba(0, 0, 0, 0.24)'
+    }
+  },
+  positive: {
+    boxShadow: '0px 1px 3px 0px rgba(0, 175, 1, 0.36)',
+    '&:hover': {
+      boxShadow: '0px 3px 5px 0px rgba(0, 175, 1, 0.44)'
+    }
+  },
+  active: {
+    background: theme.palette.background2,
+    boxShadow: 'none'
+  },
+  body: {
+    height: '100%',
+    margin: 0,
+    display: 'inline-grid',
+    alignItems: 'center',
+    fontSize: 20,
+    fontWeight: theme.typography.fontWeightLight
+  },
+  title: {
+    height: '100%',
+    maxHeight: 16,
+    maxWidth: '100%',
+    margin: '7px 0px',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    fontSize: 14,
+    fontWeight: theme.typography.fontWeightLight
+  },
+  subtitle: {
+    height: '100%',
+    maxHeight: 28,
+    margin: '2px 0px',
+    maxWidth: '100%',
+    color: theme.palette.neutral.main,
+    fontSize: 11,
+    lineHeight: '13px',
+    fontWeight: theme.typography.fontWeightMedium
+  },
+  minify: {
+    height: 72
+  }
+});
+
+class HiKPI extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleClick = id => () => {
+      this.props.onClick(id);
+    };
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  render() {
+    const {
+      classes,
+      minify,
+      bodyMinify,
+      active,
+      title,
+      body,
+      subtitle,
+      color,
+      id,
+      tooltip,
+      disable
+    } = this.props;
+    const rootclass = classNames(classes.root, {
+      [classes.inherit]: color === 'inherit' && !disable,
+      [classes.warning]: color === 'warning' && !disable,
+      [classes.error]: color === 'error' && !disable,
+      [classes.positive]: color === 'positive' && !disable,
+      [classes.active]: active,
+      [classes.minify]: minify
+    });
+    return React.createElement(ButtonBase, {
+      className: rootclass,
+      onClick: !disable ? this.handleClick(id) : undefined,
+      title: tooltip
+    }, title && React.createElement("h3", {
+      className: classes.title
+    }, title), React.createElement("div", {
+      className: classes.body
+    }, minify && bodyMinify ? bodyMinify : body), subtitle && minify === false && React.createElement("div", {
+      className: classes.subtitle
+    }, subtitle));
+  }
+
+}
+
+HiKPI.defaultProps = {
+  active: false,
+  minify: false
+};
+HiKPI.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Extension du style appliqué au composant
+   */
+  active: PropTypes.bool,
+
+  /**
+   * Corps du KPI
+   */
+  body: PropTypes.any.isRequired,
+
+  /**
+   * Version minifiée du composant
+   */
+  bodyMinify: PropTypes.any,
+
+  /**
+   * Fonction appelée au clic sur le KPI
+   */
+  classes: PropTypes.object,
+
+  /**
+   * KPI est-il actif ?
+   */
+  color: PropTypes.oneOf(['inherit', 'warning', 'error', 'positive']),
+
+  /**
+   * Titre du KPI
+   */
+  disable: PropTypes.bool,
+
+  /**
+   * KPI id
+   */
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+
+  /**
+   * Corps minifié du KPI si nécessaire
+   */
+  minify: PropTypes.bool,
+
+  /**
+   * Sous-titre du KPI
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Type du KPI (ancré ou normal : ancré permet action de clic)
+   */
+  subtitle: PropTypes.any,
+
+  /**
+   * Couleur de l'ombre du KPI
+   */
+  title: PropTypes.string,
+
+  /**
+   * Contenu du tooltip (facultatif)
+   */
+  tooltip: PropTypes.any
+} : {};
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiKPI'
+})(HiKPI);