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

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;

package/es/HiForm/HiFormControl.js

@@ -27,6 +27,8 @@ export const styles = theme => ({
     cursor: 'pointer',
     zIndex: 1,
     top: '-5px',
+    height: 24,
+    width: 24,
     '&$iconButtonError': {
       color: theme.palette.negative.main
     },

package/es/HiForm/HiInput.js

@@ -89,10 +89,10 @@ export const styles = theme => ({
     padding: 0
   }),
   inputText: {
-    height: 39
+    height: 40
   },
   inputTextArea: {
-    minHeight: 39,
+    minHeight: 40,
     paddingTop: 8
   },
   iconPointer: {
@@ -100,7 +100,7 @@ export const styles = theme => ({
     cursor: 'pointer'
   },
   eraseButton: {
-    height: 39,
+    height: 40,
     width: 40,
     display: 'inline-block'
   },

package/es/HiForm/HiSlider.js

@@ -0,0 +1,302 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import React from 'react';
+import withStyles from '../styles/withStyles';
+import HiFormControl from './HiFormControl';
+import PropTypes from 'prop-types';
+import HiIcon from '../HiIcon/HiIcon';
+import classNames from 'classnames';
+export const styles = theme => ({
+  barContainer: {
+    width: '100%',
+    position: 'relative',
+    margin: '0 7px'
+  },
+  barHidden: {
+    width: '100%',
+    opacity: 0,
+    position: 'absolute',
+    top: '7px',
+    zIndex: '2',
+    cursor: 'pointer'
+  },
+  mainContainer: _objectSpread({}, theme.typography.body1, {
+    display: 'flex',
+    flexWrap: 'nowrap',
+    alignItems: 'center'
+  }),
+  topContainer: {
+    display: 'flex',
+    flexWrap: 'nowrap',
+    height: '18px'
+  },
+  bottomContainer: {
+    display: 'flex',
+    flexWrap: 'nowrap',
+    height: '18px'
+  },
+  barValue: {
+    display: 'flex',
+    width: '100%',
+    height: '4px',
+    borderRadius: '2px',
+    backgroundColor: theme.palette.primary.main,
+    position: 'absolute',
+    zIndex: '2'
+  },
+  arrow: {
+    position: 'absolute',
+    zIndex: '1',
+    transform: 'rotate(-90deg) translate(0%,-50%)',
+    transition: 'transform 300ms cubic-bezier(0.4, 0, 0.2, 1)',
+    transitionProperty: 'transform color',
+    fontSize: 20,
+    cursor: 'pointer'
+  },
+  leftLabel: {
+    color: theme.palette.primary.main,
+    left: '0px',
+    position: 'absolute',
+    fontSize: '11px',
+    alignSelf: 'flex-end'
+  },
+  rightLabel: {
+    color: '#737373',
+    right: '0px',
+    position: 'absolute',
+    fontSize: '11px',
+    alignSelf: 'flex-end'
+  },
+  textValue: {
+    position: 'absolute',
+    zIndex: '2'
+  },
+  trackAfter: {
+    backgroundColor: 'gray',
+    opacity: 0.24
+  },
+  focused: {
+    fontSize: 24,
+    color: theme.palette.primary.dark
+  }
+});
+/**
+ * HiSlider component
+ */
+
+class HiSlider extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleChange = event => {
+      this.props.onChange(parseFloat(event.target.value));
+      this.textValueWidth = this.textValue.offsetWidth;
+    };
+
+    this.handleFocus = isFocused => () => {
+      this.setState({
+        focused: isFocused
+      });
+    };
+
+    this.state = {
+      focused: false
+    };
+  }
+  /**
+   * Measures several components once they are mounted.
+   * If the value and a label (left or right) are hovered,
+   * we hide this label.
+   */
+
+
+  componentDidMount() {
+    this.leftLabelWidth = this.leftLabel.offsetWidth;
+    this.rightLabelWidth = this.rightLabel.offsetWidth;
+    this.textValueWidth = this.textValue.offsetWidth;
+    this.barContainerWidth = this.barContainer.offsetWidth;
+    const {
+      hoveringLeft,
+      hoveringRight
+    } = this.getHovering();
+
+    if (hoveringLeft || hoveringRight) {
+      this.forceUpdate();
+    }
+  }
+  /**
+   * Calculates if the labels are hovered.
+   */
+
+
+  getHovering() {
+    const ratio = (this.props.value - this.props.min) / (this.props.max - this.props.min);
+    const hoveringLeft = this.leftLabelWidth - (ratio * this.barContainerWidth - ratio * this.textValueWidth) > 0;
+    const hoveringRight = this.barContainerWidth - ratio * this.barContainerWidth - this.rightLabelWidth - (1 - ratio) * this.textValueWidth < 0;
+    return {
+      hoveringLeft,
+      hoveringRight
+    };
+  }
+
+  render() {
+    const {
+      classes,
+      className,
+      min,
+      max,
+      leftLabel,
+      rightLabel,
+      step,
+      suffix,
+      id,
+      label,
+      value,
+      theme
+    } = this.props;
+    const {
+      focused
+    } = this.state;
+    const ratio = (value - min) / (max - min);
+    const percentage = ratio * 100;
+    const {
+      hoveringLeft,
+      hoveringRight
+    } = this.getHovering();
+    const barColor = focused ? theme.palette.primary.dark : theme.palette.primary.main;
+    return (// HiFormControl pour l'affichage du label
+      React.createElement(HiFormControl, {
+        id: id,
+        label: label,
+        className: className,
+        onFocus: this.handleFocus(true),
+        onBlur: this.handleFocus(false)
+      }, React.createElement("div", {
+        className: classes.mainContainer
+      }, React.createElement("div", null, min, suffix), React.createElement("div", {
+        className: classes.barContainer,
+        ref: div => {
+          this.barContainer = div;
+        }
+      }, React.createElement("div", {
+        className: classes.topContainer
+      }, !hoveringLeft && React.createElement("div", {
+        className: classes.leftLabel,
+        ref: div => {
+          this.leftLabel = div;
+        }
+      }, leftLabel), React.createElement("div", {
+        className: classes.textValue,
+        style: {
+          left: `${percentage}%`,
+          transform: `translate(-${percentage}%)`
+        },
+        ref: div => {
+          this.textValue = div;
+        }
+      }, value, suffix), !hoveringRight && React.createElement("div", {
+        className: classes.rightLabel,
+        ref: div => {
+          this.rightLabel = div;
+        }
+      }, rightLabel)), React.createElement("div", {
+        className: classes.barValue,
+        style: {
+          background: `linear-gradient(to right, ${barColor}, ${barColor} ${percentage}%, #E0E0E0 ${percentage}%, #E0E0E0)`
+        }
+      }), React.createElement("input", {
+        type: 'range',
+        min: min,
+        max: max,
+        value: value,
+        onChange: this.handleChange,
+        className: classes.barHidden,
+        step: step
+      }), React.createElement("div", {
+        className: classes.bottomContainer
+      }, React.createElement(HiIcon, {
+        className: classNames(classes.arrow, {
+          [classes.focused]: focused
+        }),
+        icon: 'play_arrow',
+        style: {
+          left: `${percentage}%`,
+          color: barColor
+        }
+      }))), React.createElement("div", null, max, suffix)))
+    );
+  }
+
+}
+
+HiSlider.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Classes CSS appliquées.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Id de l'élément input
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Label du champ
+   */
+  label: PropTypes.string,
+
+  /**
+   * The label to show on the left.
+   */
+  leftLabel: PropTypes.string,
+
+  /**
+   * The Maximum value for the slider.
+   */
+  max: PropTypes.number.isRequired,
+
+  /**
+   * The Minimum value for the slider.
+   */
+  min: PropTypes.number.isRequired,
+
+  /**
+   * Fonction de callback appelée lorsqu'on change la valeur du slider.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * The label to show on the right
+   */
+  rightLabel: PropTypes.string,
+
+  /**
+   * The step between two selectable values.
+   */
+  step: PropTypes.number,
+
+  /**
+   * The suffix to show after each number.
+   */
+  suffix: PropTypes.string,
+
+  /**
+   * @ignore
+   */
+  theme: PropTypes.object,
+
+  /**
+   * The
+   * value of the input.
+   */
+  value: PropTypes.number
+} : {};
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HiSlider',
+  withTheme: true
+})(HiSlider);

package/es/HiForm/HiUpload.js

@@ -0,0 +1,158 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+import HiUploadInput from './HiUploadInput';
+import HiIcon from '../HiIcon';
+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 HiUpload extends React.PureComponent {
+  render() {
+    const _this$props = this.props,
+          {
+      inputs,
+      classes,
+      values
+    } = _this$props,
+          others = _objectWithoutProperties(_this$props, ["inputs", "classes", "values"]);
+
+    let complete = true;
+    let empty = true;
+    let error = false;
+
+    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;
+      }
+    }
+
+    const statusClass = classNames(classes.statusIcon, {
+      [classes.empty]: empty,
+      [classes.complete]: complete,
+      [classes.error]: error
+    });
+    let icon;
+
+    if (error) {
+      icon = 'warning';
+    } else if (complete) {
+      icon = 'check_circle';
+    } else {
+      icon = 'file_upload';
+    }
+
+    return React.createElement("div", {
+      className: classes.flexContainer
+    }, React.createElement(HiIcon, {
+      className: statusClass,
+      icon: icon,
+      size: 32
+    }), 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)))));
+  }
+
+}
+
+HiUpload.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 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: 'HmuiHiUpload'
+})(HiUpload);