@hipay/hipay-material-ui 3.12.1 → 3.12.3-beta.0

package/HiDatePicker/stylesheet.js

@@ -0,0 +1,263 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _styles = require("@mui/material/styles");
+
+var _default = function _default(theme) {
+  return {
+    root: {
+      position: 'relative',
+      display: 'inline-block',
+      width: '100%',
+      maxWidth: 500
+    },
+    rootMobile: (0, _objectSpread2.default)({}, theme.typography.body2, {
+      backgroundColor: theme.palette.background2,
+      borderBottom: '1px solid #E0E0E0',
+      borderLeft: 'none',
+      borderRight: 'none',
+      borderTop: 'none',
+      height: 40,
+      paddingLeft: 8,
+      paddingTop: 10,
+      position: 'absolute',
+      marginTop: -40,
+      opacity: 0
+    }),
+    mobileRangeRoot: {
+      minWidth: '100%'
+    },
+    fromInput: {
+      position: 'relative',
+      display: 'inline-block',
+      width: 'calc(50% - 4px)',
+      marginRight: theme.spacing(1)
+    },
+    toInput: {
+      position: 'relative',
+      display: 'inline-block',
+      width: 'calc(50% - 4px)',
+      marginLeft: 4
+    },
+    absolute: {
+      position: 'absolute'
+    },
+    right4: {
+      right: 4
+    },
+    dayPickerMargin: {
+      top: -337,
+      width: 'calc(100% - 4px)'
+    },
+    rangePickerContainer: {
+      display: 'flex',
+      alignItems: 'flex-start'
+    },
+    // The container element
+    container: {
+      width: '100%',
+      display: 'inline-block',
+      fontFamily: theme.typography.fontFamily
+    },
+    // The wrapper element, used for keyboard interaction
+    wrapper: {
+      width: '100%',
+      position: 'relative',
+      userSelect: 'none',
+      flexDirection: 'row',
+      backgroundColor: theme.palette.background3
+    },
+    // TODO : Added to the container when there's no interaction with the calendar
+    interactionDisabled: {},
+    // The navigation bar with the arrows to switch between months
+    navBar: {},
+    // Button to switch to the previous month
+    navButtonPrev: {},
+    // Button to switch to the next month
+    navButtonNext: {},
+    // Added to the navbuttons when disabled with fromMonth/toMonth props
+    navButtonInteractionDisabled: {
+      display: 'none'
+    },
+    // Container of the months table
+    months: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      padding: '0 14px'
+    },
+    // The month's main table
+    month: {
+      display: 'table',
+      borderSpacing: 0,
+      userSelect: 'none' // margin: '0 1rem',
+      // marginTop: '1rem',
+
+    },
+    // The caption element, containing the current month's name and year
+    caption: {
+      padding: '0 0.5rem',
+      display: 'table-caption',
+      textAlign: 'left',
+      marginBottom: '0.5rem',
+      '&div': {
+        fontSize: '1.15rem',
+        fontWeight: 500
+      }
+    },
+    // Table header displaying the weekdays names
+    weekdays: {
+      marginTop: '1rem',
+      display: 'table-header-group'
+    },
+    // Table row displaying the weekdays names
+    weekdaysRow: {
+      display: 'table-row',
+      height: 40
+    },
+    // Cell displaying the weekday name
+    weekday: (0, _objectSpread2.default)({
+      display: 'table-cell'
+    }, theme.typography.body2, {
+      color: theme.palette.neutral.main,
+      textAlign: 'center',
+      verticalAlign: 'middle'
+    }),
+    // Table's body with the weeks
+    body: {
+      display: 'table-row-group',
+      padding: '12px 0'
+    },
+    week: {
+      display: 'table-row'
+    },
+    // Table's row for each week
+    weekNumber: {
+      display: 'table-cell',
+      padding: '0.5rem',
+      textAlign: 'right',
+      verticalAlign: 'middle',
+      minWidth: '1rem',
+      fontSize: '0.75em',
+      cursor: 'pointer',
+      color: '#8b9898',
+      borderRight: '1px solid #eaecec'
+    },
+    // The single day cell
+    day: (0, _objectSpread2.default)({
+      display: 'table-cell',
+      padding: '4px 8px',
+      textAlign: 'center',
+      cursor: 'pointer',
+      verticalAlign: 'middle',
+      outline: 'none'
+    }, theme.typography.body2, {
+      color: theme.palette.neutral.dark
+    }),
+    // The calendar footer (only with todayButton prop)
+    footer: {
+      marginTop: 12,
+      borderTop: '1px solid',
+      borderTopColor: theme.palette.divider,
+      padding: '5px',
+      width: '100%'
+    },
+    // The today button (only with todayButton prop)
+    todayButton: (0, _objectSpread2.default)({
+      display: 'table',
+      minWidth: 230,
+      margin: '0 auto',
+      border: 'none',
+      backgroundImage: 'none',
+      backgroundColor: 'transparent',
+      boxShadow: 'none',
+      cursor: 'pointer',
+      height: 30
+    }, theme.typography.body2, {
+      color: theme.palette.neutral.main,
+      fontWeight: theme.typography.fontWeightMedium,
+      textTransform: 'uppercase',
+      '&:hover': {
+        backgroundColor: (0, _styles.alpha)(theme.palette.neutral.dark, theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      },
+      borderRadius: 4
+    }),
+
+    /* default modifiers */
+    // Added to the day's cell for the current day
+    today: {// color: theme.palette.primary.light,
+      // position: 'relative',
+      // borderRadius: '50%',
+      // color: `${theme.palette.neutral.dark} !important`,
+      // fontWeight: theme.typography.fontWeightMedium,
+      // '&:before': {
+      //     content: '""',
+      //     position: 'absolute',
+      //     top: 0,
+      //     left: 0,
+      //     display: 'inline-block',
+      //     width: '100%',
+      //     height: '100%',
+      //     borderRadius: '50%',
+      //     boxShadow: `inset 0 0 0 2px ${theme.palette.neutral.main}`,
+      // },
+    },
+    // Added to the day's cell outside the current month
+    outside: {
+      backgroundColor: '#F8F9FB',
+      color: theme.palette.neutral.main,
+      cursor: 'default'
+    },
+    // Added to the day's cell specified in the "disabledDays" prop
+    disabled: {
+      color: '#dce0e0',
+      cursor: 'default'
+    },
+    // Added to the day's cell specified in the "selectedDays" prop
+
+    /*
+    selected: {
+        borderRadius: '50%',
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.business.primary.contrastText,
+    },
+    */
+    selected: {
+      // backgroundColor: alpha(theme.palette.business.primary.normal, 0.36),
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
+      borderRadius: '0%',
+      border: 'none'
+    },
+    currentDay: {
+      position: 'relative',
+      color: "".concat(theme.palette.neutral.dark, " !important"),
+      fontWeight: theme.typography.fontWeightMedium,
+      '&:before': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        display: 'inline-block',
+        width: '100%',
+        height: '100%',
+        borderRadius: '50%',
+        boxShadow: "inset 0 0 0 2px ".concat(theme.palette.neutral.main)
+      }
+    }
+  };
+};
+
+exports.default = _default;

package/HiDialog/HiDialog.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
+
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var useStyles = (0, _makeStyles.default)(function (theme) {
+  return {
+    paper: {
+      backgroundColor: theme.palette.background3,
+      minWidth: 400,
+      borderRadius: 2,
+      padding: "50px"
+    },
+    header: {
+      textAlign: "center",
+      marginBottom: 25
+    },
+    closeDiv: {
+      marginTop: theme.spacing(-2),
+      marginRight: theme.spacing(-6)
+    },
+    title: (0, _objectSpread2.default)({}, theme.typography.h2, {
+      margin: 0
+    })
+  };
+});
+
+var HiDialog = function HiDialog(props) {
+  var content = props.content,
+      id = props.id,
+      onClose = props.onClose,
+      open = props.open,
+      title = props.title;
+  var classes = useStyles(props);
+  var handleClose = (0, _react.useCallback)(function () {
+    if (onClose) {
+      onClose();
+    }
+  }, [onClose]);
+  return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+    classes: {
+      paper: classes.paper
+    },
+    onClose: handleClose,
+    id: id,
+    open: open
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.header
+  }, typeof title === "string" ? /*#__PURE__*/_react.default.createElement("p", {
+    className: classes.title
+  }, title) : title), /*#__PURE__*/_react.default.createElement("div", null, content));
+};
+
+var _default = HiDialog;
+exports.default = _default;

package/HiDialog/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 _HiDialog.default;
+  }
+});
+
+var _HiDialog = _interopRequireDefault(require("./HiDialog"));

package/HiDotsStepper/HiDot.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styles = exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
+var _HiIconButton = _interopRequireDefault(require("../HiIconButton"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var styles = function styles() {
+  return {
+    dot: {
+      padding: 4,
+      '&:hover': {
+        backgroundColor: 'transparent !important'
+      }
+    }
+  };
+};
+
+exports.styles = styles;
+
+var _ref = /*#__PURE__*/_react.default.createElement(_HiIcon.default, {
+  size: 24
+}, "radio_button_checked");
+
+var _ref2 = /*#__PURE__*/_react.default.createElement(_HiIcon.default, {
+  size: 12
+}, "lens");
+
+var HiDot = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(HiDot, _React$PureComponent);
+
+  var _super = _createSuper(HiDot);
+
+  function HiDot() {
+    (0, _classCallCheck2.default)(this, HiDot);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(HiDot, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          active = _this$props.active,
+          status = _this$props.status,
+          classes = _this$props.classes,
+          onClick = _this$props.onClick,
+          props = (0, _objectWithoutProperties2.default)(_this$props, ["active", "status", "classes", "onClick"]);
+      var dotColor;
+
+      if (!status || status === 'unreviewed') {
+        dotColor = 'default';
+      } else {
+        dotColor = status === 'refused' ? 'negative' : 'positive';
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_HiIconButton.default, (0, _extends2.default)({
+        className: classes.dot,
+        color: dotColor,
+        onClick: onClick
+      }, props), active ? _ref : _ref2);
+    }
+  }]);
+  return HiDot;
+}(_react.default.PureComponent);
+
+HiDot.defaultProps = {
+  active: false,
+  status: 'unreviewed'
+};
+
+var _default = (0, _withStyles.default)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiDot'
+})(HiDot);
+
+exports.default = _default;

package/HiDotsStepper/HiDotsStepper.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styles = exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+
+var _HiDot = _interopRequireDefault(require("./HiDot"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var styles = function styles() {
+  return {
+    dotStepper: {
+      width: '100%',
+      maxWidth: 200,
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'nowrap',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  };
+};
+
+exports.styles = styles;
+
+var HiDotsStepper = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(HiDotsStepper, _React$PureComponent);
+
+  var _super = _createSuper(HiDotsStepper);
+
+  function HiDotsStepper(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiDotsStepper);
+    _this = _super.call(this, props);
+
+    _this.handleClick = function (activeStep) {
+      return function () {
+        _this.props.onChange(activeStep);
+      };
+    };
+
+    _this.handleNavigation = function (e) {
+      var _this$props = _this.props,
+          activeStep = _this$props.activeStep,
+          steps = _this$props.steps;
+      var 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=\"".concat(nextStep, "\"]")).focus();
+
+      _this.props.onChange(nextStep);
+    };
+
+    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleNavigation = _this.handleNavigation.bind((0, _assertThisInitialized2.default)(_this));
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiDotsStepper, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          classes = _this$props2.classes,
+          activeStep = _this$props2.activeStep,
+          steps = _this$props2.steps;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        role: "presentation",
+        className: classes.dotStepper,
+        onKeyDown: this.handleNavigation
+      }, steps.map(function (step, idx) {
+        return /*#__PURE__*/_react.default.createElement(_HiDot.default, {
+          key: step.id,
+          tabIndex: step.id,
+          status: step.status,
+          active: idx === activeStep,
+          onClick: _this2.handleClick(idx)
+        });
+      }));
+    }
+  }]);
+  return HiDotsStepper;
+}(_react.default.PureComponent);
+
+var _default = (0, _withStyles.default)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiDotsStepper'
+})(HiDotsStepper);
+
+exports.default = _default;

package/HiDotsStepper/index.js

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