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

package/es/HiNotice/HiKPINotice.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import HiKPI from './HiKPI';
+
+const styles = () => ({
+  container: {
+    minWidth: 230,
+    width: '100%',
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'center'
+  }
+});
+
+const HiKPINotice = ({
+  classes,
+  kpis,
+  activeKpi,
+  minify,
+  onClickOnKPI
+}) => {
+  return React.createElement("div", {
+    className: classes.container
+  }, Object.keys(kpis).map(key => {
+    const kpi = kpis[key];
+    return React.createElement(HiKPI, {
+      key: key,
+      id: key,
+      type: kpi.type,
+      color: kpi.color,
+      title: kpi.title,
+      body: kpi.body,
+      bodyMinify: kpi.bodyMinify,
+      subtitle: kpi.subtitle,
+      tooltip: kpi.tooltip,
+      onClick: () => onClickOnKPI(key),
+      active: activeKpi === key,
+      minify: minify,
+      disable: kpi.disable
+    });
+  }));
+};
+
+HiKPINotice.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Extension du style appliqué au composant
+   */
+  activeKpi: PropTypes.string,
+
+  /**
+   * Liste des KPIs
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Fonction appelée au clic sur un KPI
+   */
+  kpis: PropTypes.object.isRequired,
+
+  /**
+   * Liste des KPIS actifs
+   */
+  minify: PropTypes.bool,
+
+  /**
+   * Minifie les KPIs si vrai
+   */
+  onClickOnKPI: PropTypes.func
+} : {};
+HiKPINotice.defaultProps = {
+  activeKpi: null,
+  minify: false
+};
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiKPINotice'
+})(HiKPINotice);

package/es/HiNotice/index.js

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

package/es/HiPdfReader/HiPdfReader.js

@@ -0,0 +1,214 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import React from 'react';
+import PropTypes from 'prop-types';
+import HiButton from '../HiButton';
+import HiIcon from '../HiIcon'; // import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+// import ChevronRightIcon from '@material-ui/icons/ChevronRight/';
+
+import CircularProgress from '@material-ui/core/CircularProgress/';
+import { withStyles } from '../styles';
+export const styles = theme => ({
+  root: {
+    position: 'relative'
+  },
+  pageNumber: {
+    position: 'absolute',
+    bottom: 16,
+    left: -24,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 4,
+    paddingTop: 7,
+    paddingBottom: 7,
+    paddingRight: 8,
+    paddingLeft: 8,
+    fontSize: 15,
+    fontFamily: theme.typography.fontFamily,
+    boxShadow: '1px 1px 5px rgba(0, 0, 0, .16)',
+    color: '#737373'
+  },
+  pagesNavigation: {
+    position: 'absolute',
+    top: 16,
+    right: -30,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 3,
+    paddingTop: 4,
+    paddingBottom: 4,
+    paddingRight: 3,
+    paddingLeft: 3,
+    fontFamily: theme.typography.fontFamily,
+    boxShadow: '1px 1px 5px rgba(0, 0, 0, .16)',
+    color: '#737373',
+    '&>button:first-child': {
+      marginRight: 6
+    }
+  },
+  navigationButton: {
+    padding: 0,
+    minWidth: 0,
+    minHeight: 0
+  }
+}); // Constantes utilisées pour le redimentionnement du PDF (format mobile par exemple)
+
+const maxWindowWidth = 900;
+const maxPdfWidth = 600;
+let Document;
+let Page;
+
+var _ref = React.createElement(CircularProgress, null);
+
+var _ref2 = React.createElement(HiIcon, {
+  icon: "chevron_left"
+});
+
+var _ref3 = React.createElement(HiIcon, {
+  icon: "chevron_right"
+});
+
+class HiPdfReader extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      numPages: null,
+      pageNumber: 1,
+      error: false,
+      width: 600
+    };
+
+    this.handleLoadSuccess = ({
+      numPages
+    }) => {
+      this.setState({
+        numPages,
+        error: false
+      });
+    };
+
+    this.handleLoadError = () => {
+      this.setState({
+        error: true
+      });
+    };
+
+    this.handleClickNextPage = () => {
+      this.setState(prevState => ({
+        pageNumber: prevState.pageNumber + 1
+      }));
+    };
+
+    this.handleClickPreviousPage = () => {
+      this.setState(prevState => ({
+        pageNumber: prevState.pageNumber - 1
+      }));
+    };
+  }
+
+  componentDidMount() {
+    this.updateDimensions();
+    window.addEventListener('resize', this.updateDimensions.bind(this));
+    /* eslint-disable */
+
+    Document = require('react-pdf').Document;
+    Page = require('react-pdf').Page;
+    /* eslint-enable */
+
+    this.forceUpdate();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updateDimensions.bind(this));
+  } // Fonction appelée une fois le pdf correctement chargé
+
+
+  // Calculate & Update state of new dimensions
+  updateDimensions() {
+    if (window.innerWidth < maxWindowWidth) {
+      const updateWidth = Math.round(window.innerWidth * 100 / maxWindowWidth / 100 * maxPdfWidth);
+      this.setState({
+        width: updateWidth
+      });
+    } else {
+      this.setState({
+        width: maxPdfWidth
+      });
+    }
+  } // Render
+
+
+  render() {
+    const {
+      pageNumber,
+      numPages,
+      error
+    } = this.state;
+
+    const _this$props = this.props,
+          {
+      classes,
+      file,
+      displayPagination,
+      displayNavigationButtons
+    } = _this$props,
+          props = _objectWithoutProperties(_this$props, ["classes", "file", "displayPagination", "displayNavigationButtons"]);
+
+    if (!Document || !Page) return null;
+    return React.createElement("div", {
+      className: classes.root
+    }, React.createElement(Document, _extends({
+      className: classes.style,
+      file: file,
+      onLoadSuccess: this.handleLoadSuccess,
+      onLoadError: this.handleLoadError,
+      loading: _ref
+    }, props), React.createElement(Page, {
+      pageNumber: pageNumber,
+      renderAnnotations: false,
+      renderTextLayer: false,
+      width: this.state.width
+    })), !error && numPages > 1 && displayPagination && React.createElement("span", {
+      className: classes.pageNumber
+    }, "Page ", pageNumber, " sur ", numPages), !error && numPages > 1 && displayNavigationButtons && React.createElement("span", {
+      className: classes.pagesNavigation
+    }, React.createElement(HiButton, {
+      onClick: this.handleClickPreviousPage,
+      disabled: pageNumber === 1,
+      className: classes.navigationButton
+    }, _ref2), React.createElement(HiButton, {
+      onClick: this.handleClickNextPage,
+      disabled: pageNumber === numPages,
+      className: classes.navigationButton
+    }, _ref3)));
+  }
+
+}
+
+HiPdfReader.defaultProps = {
+  displayPagination: true,
+  displayNavigationButtons: true
+};
+HiPdfReader.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Surcharge les classes du composant
+   */
+  classes: PropTypes.object,
+
+  /**
+   * On affiche les boutons de navigation entre les pages si le PDF contient plusieurs pages
+   */
+  displayNavigationButtons: PropTypes.bool,
+
+  /**
+   * On affiche la pagination si le PDF contient plusieurs pages
+   */
+  displayPagination: PropTypes.bool,
+
+  /**
+   * Chemin vers le fichier PDF
+   */
+  file: PropTypes.string.isRequired
+} : {};
+export default withStyles(styles, {
+  name: 'HmuiHiPdfReader',
+  index: 51
+})(HiPdfReader);

package/es/HiPdfReader/index.js

@@ -0,0 +1 @@
+export { default } from './HiPdfReader';

package/es/HiPin/HiPin.js

@@ -6,7 +6,7 @@ import { withStyles } from '../styles';
 export const styles = theme => ({
   root: {
     display: 'inline-block',
-    padding: '0 9px',
+    padding: '1px 9px',
     height: 16,
     lineHeight: '16px',
     minWidth: 25,

package/es/HiRadio/HiRadio.js

@@ -0,0 +1,55 @@
+// @inheritedComponent Radio
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '../styles';
+import Radio from '@material-ui/core/Radio';
+export const styles = theme => ({
+  checked: {
+    color: theme.palette.neutral.main
+  },
+  disabled: {
+    color: theme.palette.action.disabled
+  }
+});
+
+const HiRadio = ({
+  checked,
+  classes,
+  className,
+  color,
+  disabled,
+  label,
+  onChange,
+  value
+}) => {
+  const hcolor = ['positive', 'negative', 'middle', 'neutral', 'inherit'].includes(color) ? 'default' : color;
+  return React.createElement(Radio, {
+    className: className,
+    classes: {
+      checked: classes.checked,
+      disabled: classes.disabled
+    },
+    checked: checked,
+    color: hcolor,
+    label: label,
+    onChange: onChange,
+    disabled: disabled,
+    value: value
+  });
+};
+
+HiRadio.propTypes = process.env.NODE_ENV !== "production" ? {
+  checked: PropTypes.bool,
+  classes: PropTypes.object,
+  className: PropTypes.string,
+  color: PropTypes.oneOf(['inherit', 'primary', 'secondary', 'positive', 'negative', 'middle', 'neutral']),
+  disabled: PropTypes.bool,
+  label: PropTypes.string,
+  onChange: PropTypes.func,
+  value: PropTypes.string
+} : {};
+HiRadio.defaultProps = {};
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiRadio'
+})(HiRadio);

package/es/HiRadio/index.js

@@ -0,0 +1 @@
+export { default } from './HiRadio';

package/es/HiSelect/HiSelect.js

@@ -70,28 +70,6 @@ class HiSelect extends React.PureComponent {
   constructor(_props) {
     super(_props);
 
-    this.handleClick = () => {
-      if (this.state.open) {
-        this.handleClose();
-      } else {
-        this.setState({
-          open: true
-        });
-        const options = this.props.options.slice();
-        this.handleSuggestions(options);
-
-        if (this.props.onClick) {
-          this.props.onClick();
-        } // Gestion du focus
-
-
-        if (!this.props.searchable) {
-          // sinon focus sur le dernier élément selectionné
-          this.focusOnSelectedItem();
-        }
-      }
-    };
-
     this.buildHierarchyTrees = props => {
       // Construct two associative arrays
       // hierarchy[parentId] => children
@@ -153,6 +131,61 @@ class HiSelect extends React.PureComponent {
       }, 1);
     };
 
+    this.handleBlur = () => {
+      this.setState({
+        focused: false
+      });
+    };
+
+    this.handleClick = () => {
+      if (this.state.open) {
+        this.handleClose();
+      } else {
+        this.setState({
+          open: true
+        });
+        const options = this.props.options.slice();
+        this.handleSuggestions(options);
+
+        if (this.props.onClick) {
+          this.props.onClick();
+        } // Gestion du focus
+
+
+        if (!this.props.searchable) {
+          // sinon focus sur le dernier élément selectionné
+          this.focusOnSelectedItem();
+        }
+      }
+    };
+
+    this.handleClickAway = event => {
+      // Au clic sur le bouton, on laisse le handleClick fermer le select
+      if (!this.selectInputElement.contains(event.target)) {
+        this.handleClose(event);
+      }
+    };
+
+    this.handleClose = () => {
+      if (this.props.onClose) {
+        this.props.onClose();
+      }
+
+      if (this.selectInputElement) {
+        this.selectInputElement.focus();
+      }
+
+      this.setState({
+        open: false
+      });
+    };
+
+    this.handleFocus = () => {
+      this.setState({
+        focused: true
+      });
+    };
+
     this.handleKeyDown = event => {
       let nextItem;
 
@@ -186,36 +219,24 @@ class HiSelect extends React.PureComponent {
       }
     };
 
-    this.handleFocus = () => {
-      this.setState({
-        focused: true
-      });
-    };
-
-    this.handleBlur = () => {
-      this.setState({
-        focused: false
-      });
+    this.handleRequestDelete = event => {
+      event.stopPropagation();
+      this.props.onChange(this.props.name, []);
     };
 
-    this.handleClose = () => {
-      if (this.props.onClose) {
-        this.props.onClose();
-      }
-
-      if (this.selectInputElement) {
-        this.selectInputElement.focus();
+    this.handleReset = event => {
+      if (this.props.onReset) {
+        event.stopPropagation();
+        this.props.onReset(event);
       }
-
-      this.setState({
-        open: false
-      });
     };
 
-    this.handleClickAway = event => {
-      // Au clic sur le bouton, on laisse le handleClick fermer le select
-      if (!this.selectInputElement.contains(event.target)) {
-        this.handleClose(event);
+    this.handleScroll = event => {
+      if (!this.props.loadingMoreResults && this.props.hasMore && event.target.scrollHeight - event.target.clientHeight - event.target.scrollTop < 15) {
+        this.props.loadMoreResults(this.state.resultsPageNumber + 1);
+        this.setState(prevState => ({
+          resultsPageNumber: prevState.resultsPageNumber + 1
+        }));
       }
     };
 
@@ -386,20 +407,6 @@ class HiSelect extends React.PureComponent {
       });
     };
 
-    this.handleRequestDelete = evt => {
-      evt.stopPropagation();
-      this.props.onChange(this.props.name, []);
-    };
-
-    this.handleScroll = event => {
-      if (!this.props.loadingMoreResults && this.props.hasMore && event.target.scrollHeight - event.target.clientHeight - event.target.scrollTop < 15) {
-        this.props.loadMoreResults(this.state.resultsPageNumber + 1);
-        this.setState(prevState => ({
-          resultsPageNumber: prevState.resultsPageNumber + 1
-        }));
-      }
-    };
-
     this.state = {
       open: false,
       focused: false,
@@ -455,16 +462,6 @@ class HiSelect extends React.PureComponent {
     } else if (!_props.dynamic) {
       this.state.dynamic = true;
     }
-
-    this.handleSelect = this.handleSelect.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-    this.handleClose = this.handleClose.bind(this);
-    this.handleClickAway = this.handleClickAway.bind(this);
-    this.handleRequestDelete = this.handleRequestDelete.bind(this);
-    this.handleSuggestions = this.handleSuggestions.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleScroll = this.handleScroll.bind(this);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -490,13 +487,6 @@ class HiSelect extends React.PureComponent {
     }
   }
 
-  handleReset(event) {
-    if (this.props.onReset) {
-      event.stopPropagation();
-      this.props.onReset(event);
-    }
-  }
-
   render() {
     const _this$props = this.props,
           {

package/es/HiSelect/HiSuggestSelect.js

@@ -12,6 +12,7 @@ import HiInput from '../HiForm/HiInput';
 import { withStyles } from '../styles';
 import Popper from '@material-ui/core/Popper';
 import { getNextItemSelectable } from '../utils/helpers';
+import keycode from 'keycode';
 export const styles = theme => ({
   root: {
     backgroundColor: theme.palette.background2,
@@ -64,13 +65,20 @@ class HiSuggestSelect extends React.PureComponent {
 
     this.handleKeyDown = event => {
       let nextItem;
+      const key = keycode(event);
 
-      if (event.key === 'ArrowDown') {
+      if (key === 'down') {
+        event.preventDefault();
         nextItem = getNextItemSelectable(document.activeElement, 'down');
-      } else if (event.key === 'ArrowUp') {
+      } else if (key === 'up') {
+        event.preventDefault();
         nextItem = getNextItemSelectable(document.activeElement, 'up');
-      } else if (event.key === 'Tab') {
+      } else if (key === 'tab') {
         document.body.style.overflow = 'auto';
+      } else if (key === 'escape' || 'enter') {
+        event.preventDefault();
+        const item = this.props.options.find(elem => String(elem.id) === event.target.id);
+        this.handleSelect(null, item);
       }
 
       if (nextItem) {
@@ -117,10 +125,14 @@ class HiSuggestSelect extends React.PureComponent {
     }
   }
 
-  handleFocus() {
+  handleFocus(event) {
     this.setState({
       focused: true
     });
+
+    if (this.props.onFocusInput) {
+      this.props.onFocusInput(event);
+    }
   }
 
   handleBlur(event) {
@@ -132,6 +144,10 @@ class HiSuggestSelect extends React.PureComponent {
         focused: false
       });
     }
+
+    if (this.props.onBlurInput) {
+      this.props.onBlurInput(event);
+    }
   }
 
   render() {
@@ -253,6 +269,16 @@ HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   loading: PropTypes.bool,
 
+  /**
+   * Fonction de callback appelée lorsqu'on blur le champ de recherche
+   */
+  onBlurInput: PropTypes.func,
+
+  /**
+   * Fonction de callback appelée lorsqu'on focus le champs de recherche
+   */
+  onFocusInput: PropTypes.func,
+
   /**
    * Fonction de callback appelée lorsqu'on écrit dans le champ
    */

package/es/HiSelect/SelectInput.js

@@ -13,7 +13,10 @@ export const styles = theme => ({
     maxWidth: 500,
     display: 'flex',
     justifyContent: 'center',
-    padding: 8,
+    paddingTop: 7,
+    paddingBottom: 9,
+    paddingRight: 8,
+    paddingLeft: 8,
     cursor: 'pointer'
   },
   underline: {
@@ -300,6 +303,11 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   refElement: PropTypes.func,
 
+  /**
+   * Theme object
+   */
+  theme: PropTypes.object,
+
   /**
    * Valeur à afficher (déjà formattée)
    */

package/es/HiSelectNew/HiNestedSelectContent.js

@@ -175,7 +175,6 @@ class HiNestedSelectContent extends React.PureComponent {
 
     this.buildSelectProps = (options, value = [], search = '', loading = false) => {
       const {
-        classes,
         disabledParent,
         hasAll,
         iconAll,
@@ -291,6 +290,11 @@ HiNestedSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   hasAll: PropTypes.bool,
 
+  /**
+   * Propriétés du composant HiSelectableList
+   */
+  hiSelectableListProps: PropTypes.object,
+
   /**
    * id du select
    */