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

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,
+
+  /**
+   * KPI id
+   */
+  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,
+
+  /**
+   * Corps du KPI
+   */
+  id: 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);

package/es/HiNotice/HiKPINotice.js

@@ -0,0 +1,77 @@
+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,
+  activeKpis,
+  minify,
+  onClickOnKPI
+}) => {
+  return React.createElement("div", {
+    className: classes.container
+  }, kpis.map(kpi => {
+    return React.createElement(HiKPI, {
+      key: kpi.id,
+      id: kpi.id,
+      type: kpi.type,
+      color: kpi.color,
+      title: kpi.title,
+      body: kpi.body,
+      bodyMinify: kpi.bodyMinify,
+      subtitle: kpi.subtitle,
+      tooltip: kpi.tooltip,
+      onClick: onClickOnKPI,
+      active: !!activeKpis.includes(kpi.id),
+      minify: minify,
+      disable: kpi.disable
+    });
+  }));
+};
+
+HiKPINotice.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Extension du style appliqué au composant
+   */
+  activeKpis: PropTypes.array,
+
+  /**
+   * Liste des KPIs
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Fonction appelée au clic sur un KPI
+   */
+  kpis: PropTypes.array.isRequired,
+
+  /**
+   * Liste des KPIS actifs
+   */
+  minify: PropTypes.bool,
+
+  /**
+   * Minifie les KPIs si vrai
+   */
+  onClickOnKPI: PropTypes.func
+} : {};
+HiKPINotice.defaultProps = {
+  activeKpis: [],
+  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/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';