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

package/HiNotice/HiKPI.js

@@ -0,0 +1,238 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _styles = require("../styles");
+
+var _ButtonBase = _interopRequireDefault(require("@material-ui/core/ButtonBase"));
+
+var styles = function styles(theme) {
+  return {
+    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
+    }
+  };
+};
+
+exports.styles = styles;
+
+var HiKPI =
+/*#__PURE__*/
+function (_React$Component) {
+  (0, _inherits2.default)(HiKPI, _React$Component);
+
+  function HiKPI(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiKPI);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiKPI).call(this, props));
+
+    _this.handleClick = function (id) {
+      return function () {
+        _this.props.onClick(id);
+      };
+    };
+
+    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiKPI, [{
+    key: "render",
+    value: function render() {
+      var _classNames;
+
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          minify = _this$props.minify,
+          bodyMinify = _this$props.bodyMinify,
+          active = _this$props.active,
+          title = _this$props.title,
+          body = _this$props.body,
+          subtitle = _this$props.subtitle,
+          color = _this$props.color,
+          id = _this$props.id,
+          tooltip = _this$props.tooltip,
+          disable = _this$props.disable;
+      var rootclass = (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.inherit, color === 'inherit' && !disable), (0, _defineProperty2.default)(_classNames, classes.warning, color === 'warning' && !disable), (0, _defineProperty2.default)(_classNames, classes.error, color === 'error' && !disable), (0, _defineProperty2.default)(_classNames, classes.positive, color === 'positive' && !disable), (0, _defineProperty2.default)(_classNames, classes.active, active), (0, _defineProperty2.default)(_classNames, classes.minify, minify), _classNames));
+      return _react.default.createElement(_ButtonBase.default, {
+        className: rootclass,
+        onClick: !disable ? this.handleClick(id) : undefined,
+        title: tooltip
+      }, title && _react.default.createElement("h3", {
+        className: classes.title
+      }, title), _react.default.createElement("div", {
+        className: classes.body
+      }, minify && bodyMinify ? bodyMinify : body), subtitle && minify === false && _react.default.createElement("div", {
+        className: classes.subtitle
+      }, subtitle));
+    }
+  }]);
+  return HiKPI;
+}(_react.default.Component);
+
+HiKPI.defaultProps = {
+  active: false,
+  minify: false
+};
+HiKPI.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Extension du style appliqué au composant
+   */
+  active: _propTypes.default.bool,
+
+  /**
+   * Corps du KPI
+   */
+  body: _propTypes.default.any.isRequired,
+
+  /**
+   * Version minifiée du composant
+   */
+  bodyMinify: _propTypes.default.any,
+
+  /**
+   * Fonction appelée au clic sur le KPI
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * KPI est-il actif ?
+   */
+  color: _propTypes.default.oneOf(['inherit', 'warning', 'error', 'positive']),
+
+  /**
+   * Titre du KPI
+   */
+  disable: _propTypes.default.bool,
+
+  /**
+   * KPI id
+   */
+  id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+
+  /**
+   * Corps minifié du KPI si nécessaire
+   */
+  minify: _propTypes.default.bool,
+
+  /**
+   * Sous-titre du KPI
+   */
+  onClick: _propTypes.default.func,
+
+  /**
+   * Type du KPI (ancré ou normal : ancré permet action de clic)
+   */
+  subtitle: _propTypes.default.any,
+
+  /**
+   * Couleur de l'ombre du KPI
+   */
+  title: _propTypes.default.string,
+
+  /**
+   * Contenu du tooltip (facultatif)
+   */
+  tooltip: _propTypes.default.any
+} : {};
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiKPI'
+})(HiKPI);
+
+exports.default = _default;

package/HiNotice/HiKPINotice.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _HiKPI = _interopRequireDefault(require("./HiKPI"));
+
+var styles = function styles() {
+  return {
+    container: {
+      minWidth: 230,
+      width: '100%',
+      display: 'flex',
+      flexWrap: 'wrap',
+      justifyContent: 'center'
+    }
+  };
+};
+
+var HiKPINotice = function HiKPINotice(_ref) {
+  var classes = _ref.classes,
+      kpis = _ref.kpis,
+      activeKpi = _ref.activeKpi,
+      minify = _ref.minify,
+      onClickOnKPI = _ref.onClickOnKPI;
+  return _react.default.createElement("div", {
+    className: classes.container
+  }, Object.keys(kpis).map(function (key) {
+    var kpi = kpis[key];
+    return _react.default.createElement(_HiKPI.default, {
+      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: function onClick() {
+        return 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.default.string,
+
+  /**
+   * Liste des KPIs
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * Fonction appelée au clic sur un KPI
+   */
+  kpis: _propTypes.default.object.isRequired,
+
+  /**
+   * Liste des KPIS actifs
+   */
+  minify: _propTypes.default.bool,
+
+  /**
+   * Minifie les KPIs si vrai
+   */
+  onClickOnKPI: _propTypes.default.func
+} : {};
+HiKPINotice.defaultProps = {
+  activeKpi: null,
+  minify: false
+};
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiKPINotice'
+})(HiKPINotice);
+
+exports.default = _default;

package/HiNotice/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "HiKPI", {
+  enumerable: true,
+  get: function get() {
+    return _HiKPI.default;
+  }
+});
+Object.defineProperty(exports, "HiKPINotice", {
+  enumerable: true,
+  get: function get() {
+    return _HiKPINotice.default;
+  }
+});
+
+var _HiKPI = _interopRequireDefault(require("./HiKPI"));
+
+var _HiKPINotice = _interopRequireDefault(require("./HiKPINotice"));

package/HiPdfReader/HiPdfReader.js

@@ -0,0 +1,269 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _HiButton = _interopRequireDefault(require("../HiButton"));
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
+var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress/"));
+
+var _styles = require("../styles");
+
+// import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+// import ChevronRightIcon from '@material-ui/icons/ChevronRight/';
+var styles = function styles(theme) {
+  return {
+    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)
+
+
+exports.styles = styles;
+var maxWindowWidth = 900;
+var maxPdfWidth = 600;
+var Document;
+var Page;
+
+var _ref2 = _react.default.createElement(_CircularProgress.default, null);
+
+var _ref3 = _react.default.createElement(_HiIcon.default, {
+  icon: "chevron_left"
+});
+
+var _ref4 = _react.default.createElement(_HiIcon.default, {
+  icon: "chevron_right"
+});
+
+var HiPdfReader =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiPdfReader, _React$PureComponent);
+
+  function HiPdfReader() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiPdfReader);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(HiPdfReader)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this.state = {
+      numPages: null,
+      pageNumber: 1,
+      error: false,
+      width: 600
+    };
+
+    _this.handleLoadSuccess = function (_ref) {
+      var numPages = _ref.numPages;
+
+      _this.setState({
+        numPages: numPages,
+        error: false
+      });
+    };
+
+    _this.handleLoadError = function () {
+      _this.setState({
+        error: true
+      });
+    };
+
+    _this.handleClickNextPage = function () {
+      _this.setState(function (prevState) {
+        return {
+          pageNumber: prevState.pageNumber + 1
+        };
+      });
+    };
+
+    _this.handleClickPreviousPage = function () {
+      _this.setState(function (prevState) {
+        return {
+          pageNumber: prevState.pageNumber - 1
+        };
+      });
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiPdfReader, [{
+    key: "componentDidMount",
+    value: function 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();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener('resize', this.updateDimensions.bind(this));
+    } // Fonction appelée une fois le pdf correctement chargé
+
+  }, {
+    key: "updateDimensions",
+    // Calculate & Update state of new dimensions
+    value: function updateDimensions() {
+      if (window.innerWidth < maxWindowWidth) {
+        var updateWidth = Math.round(window.innerWidth * 100 / maxWindowWidth / 100 * maxPdfWidth);
+        this.setState({
+          width: updateWidth
+        });
+      } else {
+        this.setState({
+          width: maxPdfWidth
+        });
+      }
+    } // Render
+
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state = this.state,
+          pageNumber = _this$state.pageNumber,
+          numPages = _this$state.numPages,
+          error = _this$state.error;
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          file = _this$props.file,
+          displayPagination = _this$props.displayPagination,
+          displayNavigationButtons = _this$props.displayNavigationButtons,
+          props = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "file", "displayPagination", "displayNavigationButtons"]);
+      if (!Document || !Page) return null;
+      return _react.default.createElement("div", {
+        className: classes.root
+      }, _react.default.createElement(Document, (0, _extends2.default)({
+        className: classes.style,
+        file: file,
+        onLoadSuccess: this.handleLoadSuccess,
+        onLoadError: this.handleLoadError,
+        loading: _ref2
+      }, props), _react.default.createElement(Page, {
+        pageNumber: pageNumber,
+        renderAnnotations: false,
+        renderTextLayer: false,
+        width: this.state.width
+      })), !error && numPages > 1 && displayPagination && _react.default.createElement("span", {
+        className: classes.pageNumber
+      }, "Page ", pageNumber, " sur ", numPages), !error && numPages > 1 && displayNavigationButtons && _react.default.createElement("span", {
+        className: classes.pagesNavigation
+      }, _react.default.createElement(_HiButton.default, {
+        onClick: this.handleClickPreviousPage,
+        disabled: pageNumber === 1,
+        className: classes.navigationButton
+      }, _ref3), _react.default.createElement(_HiButton.default, {
+        onClick: this.handleClickNextPage,
+        disabled: pageNumber === numPages,
+        className: classes.navigationButton
+      }, _ref4)));
+    }
+  }]);
+  return HiPdfReader;
+}(_react.default.PureComponent);
+
+HiPdfReader.defaultProps = {
+  displayPagination: true,
+  displayNavigationButtons: true
+};
+HiPdfReader.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Surcharge les classes du composant
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * On affiche les boutons de navigation entre les pages si le PDF contient plusieurs pages
+   */
+  displayNavigationButtons: _propTypes.default.bool,
+
+  /**
+   * On affiche la pagination si le PDF contient plusieurs pages
+   */
+  displayPagination: _propTypes.default.bool,
+
+  /**
+   * Chemin vers le fichier PDF
+   */
+  file: _propTypes.default.string.isRequired
+} : {};
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'HmuiHiPdfReader',
+  index: 51
+})(HiPdfReader);
+
+exports.default = _default;

package/HiPdfReader/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _HiPdfReader.default;
+  }
+});
+
+var _HiPdfReader = _interopRequireDefault(require("./HiPdfReader"));

package/HiPin/HiPin.js

@@ -23,7 +23,7 @@ var styles = function styles(theme) {
   return {
     root: {
       display: 'inline-block',
-      padding: '0 9px',
+      padding: '1px 9px',
       height: 16,
       lineHeight: '16px',
       minWidth: 25,