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

package/es/HiDatePicker/Overlays/CustomOverlayLayout.js

@@ -7,10 +7,15 @@ import Paper from '@material-ui/core/Paper';
 import withStyles from '../../styles/withStyles';
 export const styles = theme => ({
   paper: {
-    position: 'absolute',
     width: '100%',
     zIndex: 10
   },
+  absolute: {
+    position: 'absolute'
+  },
+  relative: {
+    position: 'relative'
+  },
   left: {
     width: '200%',
     left: 0
@@ -56,30 +61,35 @@ const CustomOverlayLayout = (_ref) => {
     headerElement,
     footerElement,
     absoluteElement,
-    side
+    side,
+    staticPosition
   } = _ref,
-      props = _objectWithoutProperties(_ref, ["classes", "children", "headerElement", "footerElement", "absoluteElement", "side"]);
+      props = _objectWithoutProperties(_ref, ["classes", "children", "headerElement", "footerElement", "absoluteElement", "side", "staticPosition"]);
 
   const paperClass = classNames(classes.paper, {
     [classes.left]: side === 'from',
-    [classes.right]: side === 'to'
+    [classes.right]: side === 'to',
+    [classes.absolute]: staticPosition !== true,
+    [classes.relative]: staticPosition === true
   });
 
-  let paperProps = _objectSpread({}, props);
+  const paperProps = _objectSpread({}, props);
 
-  return React.createElement(Paper, {
-    className: paperClass,
-    onBlur: paperProps.onBlur,
-    onFocus: paperProps.onFocus
-  }, React.createElement("div", {
-    className: classes.overlay
-  }, React.createElement("div", {
-    className: classes.header
-  }, headerElement), React.createElement("div", {
-    className: classes.body
-  }, children), React.createElement("div", {
-    className: classes.footer
-  }, footerElement), absoluteElement));
+  return (// eslint-disable-next-line react/jsx-handler-names
+    React.createElement(Paper, {
+      className: paperClass,
+      onBlur: paperProps.onBlur,
+      onFocus: paperProps.onFocus
+    }, React.createElement("div", {
+      className: classes.overlay
+    }, React.createElement("div", {
+      className: classes.header
+    }, headerElement), React.createElement("div", {
+      className: classes.body
+    }, children), React.createElement("div", {
+      className: classes.footer
+    }, footerElement), absoluteElement))
+  );
 };
 
 CustomOverlayLayout.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -96,7 +106,8 @@ CustomOverlayLayout.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Définit comment construire le Paper dans le cas d'un double input
    */
-  side: PropTypes.string
+  side: PropTypes.string,
+  staticPosition: PropTypes.bool
 } : {};
 export default withStyles(styles, {
   name: 'HmuiCustomOverlayLayout'

package/es/HiDatePicker/Overlays/MonthPickerOverlay.js

@@ -31,8 +31,8 @@ class MonthPickerOverlay extends React.Component {
     } = _this$props,
           props = _objectWithoutProperties(_this$props, ["value", "translations"]);
 
-    let now = new Date();
-    let currentMonth = props.localeUtils ? props.localeUtils.getMonths()[now.getMonth()] : props.children.props.localeUtils.getMonths()[now.getMonth()];
+    const now = new Date();
+    const currentMonth = props.localeUtils ? props.localeUtils.getMonths()[now.getMonth()] : props.children.props.localeUtils.getMonths()[now.getMonth()];
     return React.createElement(CustomOverlayLayout, _extends({
       headerElement: translations.month
     }, props), React.createElement(ListPicker, {

package/es/HiDatePicker/Overlays/MonthPickerOverlay.spec.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React from 'react';
 import { assert } from 'chai';
 import { spy } from 'sinon';

package/es/HiDatePicker/Overlays/Overlay.js

@@ -45,15 +45,17 @@ const Overlay = (_ref) => {
     [classes.relative]: staticPosition === true
   });
 
-  let paperProps = _objectSpread({}, props);
+  const paperProps = _objectSpread({}, props);
 
-  return React.createElement(Paper, {
-    onBlur: paperProps.onBlur,
-    onFocus: paperProps.onFocus,
-    className: paperClass
-  }, React.createElement("div", {
-    className: classes.overlay
-  }, children));
+  return (// eslint-disable-next-line react/jsx-handler-names
+    React.createElement(Paper, {
+      onBlur: paperProps.onBlur,
+      onFocus: paperProps.onFocus,
+      className: paperClass
+    }, React.createElement("div", {
+      className: classes.overlay
+    }, children))
+  );
 };
 
 Overlay.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -88,7 +90,12 @@ Overlay.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Définit comment construire le Paper dans le cas d'un double input
    */
-  side: PropTypes.string
+  side: PropTypes.string,
+
+  /**
+   * Display overlay with position static
+   */
+  staticPosition: PropTypes.bool
 } : {};
 export default withStyles(styles, {
   name: 'HmuiOverlay'

package/es/HiDatePicker/Overlays/Overlay.spec.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React from 'react';
 import { assert } from 'chai';
 import { createShallow, getClasses } from '../../test-utils/index';

package/es/HiDatePicker/Overlays/TimePickerOverlay.js

@@ -81,7 +81,7 @@ export const styles = theme => ({
     bottom: 0,
     height: 32,
     width: 32,
-    margin: '0px 24px'
+    margin: '4px 24px'
   },
   calendarButton: {
     fontWeight: theme.typography.fontWeightMedium
@@ -92,7 +92,7 @@ var _ref = React.createElement(CalendarIcon, null);
 
 class TimePickerOverlay extends React.Component {
   constructor(props) {
-    super();
+    super(props);
     this.hours = Array.from(Array(24).keys());
     this.minutes = Array.from(Array(60).keys());
     this.handleHourClick = this.handleHourClick.bind(this);

package/es/HiDatePicker/Overlays/TimePickerOverlay.spec.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React from 'react';
 import { assert } from 'chai';
 import { spy } from 'sinon';

package/es/HiDatePicker/Overlays/YearPickerOverlay.js

@@ -7,7 +7,7 @@ import ListPicker from '../ListPicker';
 
 class YearPickerOverlay extends React.Component {
   constructor(props) {
-    super();
+    super(props);
     this.years = [];
     this.handleYearClick = this.handleYearClick.bind(this);
     const currentYear = new Date().getFullYear();
@@ -55,8 +55,6 @@ class YearPickerOverlay extends React.Component {
 }
 
 YearPickerOverlay.defaultProps = {
-  // disableFutureDays: true,
-  // disablePastDays: false,
   minimumDate: new Date(2013, 4, 1),
   // by default 1 May 2013
   translations: {
@@ -92,7 +90,7 @@ YearPickerOverlay.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Date minimale sélectionnable
    */
-  minimumDate: PropTypes.instanceOf(Date).isRequired,
+  minimumDate: PropTypes.instanceOf(Date),
 
   /**
    * Fonction de callback

package/es/HiDatePicker/Overlays/YearPickerOverlay.spec.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React from 'react';
 import { assert } from 'chai';
 import { spy } from 'sinon';

package/es/HiDatePicker/stylesheet.js

@@ -161,7 +161,7 @@ export default (theme => ({
   // Added to the day's cell for the current day
   today: {
     // color: theme.palette.primary.light,
-    border: '2px solid #8b9898',
+    boxShadow: 'inset 0 0 0 2px #8b9898',
     borderRadius: '50%',
     color: `${theme.palette.neutral.dark} !important`,
     fontWeight: theme.typography.fontWeightMedium
@@ -169,7 +169,8 @@ export default (theme => ({
   // Added to the day's cell outside the current month
   outside: {
     backgroundColor: '#F8F9FB',
-    color: theme.palette.neutral.main
+    color: theme.palette.neutral.main,
+    cursor: 'default'
   },
   // Added to the day's cell specified in the "disabledDays" prop
   disabled: {

package/es/HiDotsStepper/HiDot.js

@@ -0,0 +1,66 @@
+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 HiIcon from '../HiIcon';
+import HiIconButton from '../HiIconButton';
+export const styles = () => ({
+  dot: {
+    padding: 4,
+    '&:hover': {
+      backgroundColor: 'transparent !important'
+    }
+  }
+});
+
+var _ref = React.createElement(HiIcon, {
+  size: 24
+}, "radio_button_checked");
+
+var _ref2 = React.createElement(HiIcon, {
+  size: 12
+}, "lens");
+
+class HiDot extends React.PureComponent {
+  render() {
+    const _this$props = this.props,
+          {
+      active,
+      status,
+      classes,
+      onClick
+    } = _this$props,
+          props = _objectWithoutProperties(_this$props, ["active", "status", "classes", "onClick"]);
+
+    let dotColor;
+
+    if (!status || status === 'unreviewed') {
+      dotColor = 'default';
+    } else {
+      dotColor = status === 'refused' ? 'negative' : 'positive';
+    }
+
+    return React.createElement(HiIconButton, _extends({
+      className: classes.dot,
+      color: dotColor,
+      onClick: onClick
+    }, props), active ? _ref : _ref2);
+  }
+
+}
+
+HiDot.defaultProps = {
+  active: false,
+  status: 'unreviewed'
+};
+HiDot.propTypes = process.env.NODE_ENV !== "production" ? {
+  active: PropTypes.bool,
+  classes: PropTypes.object,
+  onClick: PropTypes.func,
+  status: PropTypes.oneOf(['refused', 'validated', 'unreviewed'])
+} : {};
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiDot'
+})(HiDot);

package/es/HiDotsStepper/HiDotsStepper.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from '../styles/withStyles';
+import HiDot from './HiDot';
+export const styles = () => ({
+  dotStepper: {
+    width: '100%',
+    maxWidth: 200,
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+});
+
+class HiDotsStepper extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.handleClick = activeStep => () => {
+      this.props.onChange(activeStep);
+    };
+
+    this.handleNavigation = e => {
+      const {
+        activeStep,
+        steps
+      } = this.props;
+      let nextStep = activeStep;
+      if (e.key === 'ArrowLeft') nextStep -= 1;
+      if (e.key === 'ArrowRight') nextStep += 1;
+      nextStep = (nextStep + steps.length) % steps.length; // Permet la navigation d'un Dot au suivant / précédent
+
+      document.querySelector(`button[tabIndex="${nextStep}"]`).focus();
+      this.props.onChange(nextStep);
+    };
+
+    this.handleClick = this.handleClick.bind(this);
+    this.handleNavigation = this.handleNavigation.bind(this);
+  }
+
+  render() {
+    const {
+      classes,
+      activeStep,
+      steps
+    } = this.props;
+    return React.createElement("div", {
+      role: "presentation",
+      className: classes.dotStepper,
+      onKeyDown: this.handleNavigation
+    }, steps.map((step, idx) => React.createElement(HiDot, {
+      key: step.id,
+      tabIndex: step.id,
+      status: step.status,
+      active: idx === activeStep,
+      onClick: this.handleClick(idx)
+    })));
+  }
+
+}
+
+HiDotsStepper.propTypes = process.env.NODE_ENV !== "production" ? {
+  activeStep: PropTypes.number.isRequired,
+  classes: PropTypes.object,
+  onChange: PropTypes.func,
+  steps: PropTypes.array.isRequired
+} : {};
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiDotsStepper'
+})(HiDotsStepper);

package/es/HiExpansionPanel/HiExpansionPanel.js

@@ -114,7 +114,7 @@ HiExpansionPanel.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Titre principal du panel
    */
-  heading: PropTypes.string.isRequired,
+  heading: PropTypes.any,
 
   /**
    * Titre secondaire du panel

package/es/HiForm/HiAddressField.js

@@ -0,0 +1,134 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+// @inheritedComponent HiSuggestSelectField
+import React from 'react';
+import PropTypes from 'prop-types';
+import HiSuggestSelectField from '../HiSelect/HiSuggestSelectField'; // OpenStreeMap API url
+
+const API_URL = 'https://nominatim.openstreetmap.org/search?q=';
+/**
+ * Champs input adresse pour formulaire
+ */
+
+class HiAddressField extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.displaySuggestions = predictions => {
+      const options = [];
+      let isExact = false;
+      predictions.forEach(prediction => {
+        // Si le texte saisi est identique à une des propositions, on estime que la valeur de l'adresse est exacte.
+        isExact = prediction.display_name === this.state.inputValue ? true : isExact;
+        options.push({
+          id: prediction.place_id,
+          label: prediction.display_name,
+          labelHighlight: prediction.display_name.replace(new RegExp(this.value, 'gi'), '<strong>$&</strong>'),
+          // Liste des types d'adresse : https://github.com/openstreetmap/Nominatim/blob/80df4d3b560f5b1fd550dcf8cdc09a992b69fee0/settings/partitionedtags.def
+          icon: ['amenity', 'building'].includes(prediction.category) ? 'domain' : 'place',
+          type: 'icon',
+          key: prediction.id
+        });
+      }, this);
+      this.setState({
+        options,
+        isExact
+      });
+    };
+
+    this.state = {
+      inputValue: null,
+      options: [],
+      isExact: false
+    };
+    this.handleSearch = this.handleSearch.bind(this);
+    this.handleSelect = this.handleSelect.bind(this);
+    this.handleReset = this.handleReset.bind(this);
+    this.displaySuggestions = this.displaySuggestions.bind(this);
+  }
+
+  handleSearch(event) {
+    if (event.target.value) {
+      this.setState({
+        inputValue: event.target.value
+      });
+      fetch(`${API_URL} + ${this.state.inputValue} + &format=jsonv2&limit=5&bounded=1&dedupe=1&namedetails=1`).then(result => result.json()).then(data => {
+        this.displaySuggestions(data, 'OK');
+      });
+    } else {
+      this.setState({
+        options: []
+      });
+    }
+
+    this.props.onSearch(event);
+  }
+
+  handleReset() {
+    this.props.onReset();
+    this.setState({
+      options: [],
+      isExact: false
+    });
+  }
+
+  handleSelect(event, value) {
+    // Mise à jour de la valeur du champ + la valeur de l'adresse est exacte
+    this.setState({
+      options: [],
+      isExact: true
+    });
+    this.props.onSelect(event, value.label);
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      exactOnly,
+      onSearch,
+      onReset,
+      onSelect
+    } = _this$props,
+          otherProps = _objectWithoutProperties(_this$props, ["exactOnly", "onSearch", "onReset", "onSelect"]);
+
+    const {
+      options,
+      isExact
+    } = this.state; // On met le champ en erreur si une adresse exacte est éxigée
+    // et si l'adresse courante n'est pas complète
+
+    const showError = exactOnly && !isExact;
+    return React.createElement(HiSuggestSelectField, _extends({
+      error: showError,
+      options: options,
+      onSearch: this.handleSearch,
+      onSelect: this.handleSelect,
+      onReset: this.handleReset,
+      isExact: isExact
+    }, otherProps));
+  }
+
+}
+
+HiAddressField.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Est-ce qu'on n'accepte que les adresses trouvées par GMaps
+   */
+  exactOnly: PropTypes.bool,
+
+  /**
+   *  Callback function called to empty the field.
+   */
+  onReset: PropTypes.func,
+
+  /**
+   *  Callback function called when we write in the input.
+   */
+  onSearch: PropTypes.func,
+
+  /**
+   *  Callback function called when a suggestion is selected.
+   */
+  onSelect: PropTypes.func
+} : {};
+export default HiAddressField;