@hipay/hipay-material-ui 3.12.1 → 3.12.2

package/HiCell/CellTextStyled.js

@@ -0,0 +1,113 @@
+"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 _react = _interopRequireDefault(require("react"));
+
+var _HiColoredLabel = _interopRequireDefault(require("../HiColoredLabel"));
+
+var _HiButton = _interopRequireDefault(require("../HiButton"));
+
+var styleRoot = {
+  width: '100%',
+  height: 19,
+  margin: 'auto 0',
+  display: 'flex',
+  lineHeight: '15px',
+  alignItems: 'center'
+};
+var styleColorLabel = {
+  display: 'inline-block',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'pre'
+};
+var styleLabel = {
+  display: 'inline-block',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'pre',
+  width: '100%'
+};
+var styleButton = {
+  padding: '1px 5px',
+  minHeight: '18px',
+  maxHeight: '18px'
+};
+/**
+ * CellText functional component
+ * (don't includes complex ellipsis: middle, after-first-word...)
+ *
+ * @param label
+ * @param color
+ * @param isButton
+ * @param onClick
+ * @param value
+ * @param active
+ * @param title
+ * @param align
+ * @returns {*}
+ * @constructor
+ */
+
+var CellTextStyled = function CellTextStyled(_ref) {
+  var label = _ref.label,
+      color = _ref.color,
+      isButton = _ref.isButton,
+      onClick = _ref.onClick,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
+      _ref$active = _ref.active,
+      active = _ref$active === void 0 ? false : _ref$active,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'left' : _ref$align;
+  var valueString = label ? label.toString() : value ? value.toString() : "";
+
+  if (isButton) {
+    return /*#__PURE__*/_react.default.createElement(_HiButton.default, {
+      color: color,
+      onClick: onClick,
+      size: "small",
+      style: styleButton,
+      variant: "contained"
+    }, valueString);
+  }
+
+  if (align === 'right') {
+    styleRoot = (0, _objectSpread2.default)({}, styleRoot, {
+      textAlign: 'right'
+    });
+    styleColorLabel = (0, _objectSpread2.default)({}, styleColorLabel, {
+      justifyContent: 'flex-end'
+    });
+  } else {
+    styleRoot = (0, _objectSpread2.default)({}, styleRoot, {
+      textAlign: 'left'
+    });
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: styleRoot,
+    title: title || valueString
+  }, color ? /*#__PURE__*/_react.default.createElement(_HiColoredLabel.default, {
+    style: styleColorLabel,
+    label: valueString,
+    color: color,
+    active: active,
+    fontSize: 13
+  }) : /*#__PURE__*/_react.default.createElement("div", {
+    style: styleLabel
+  }, valueString));
+};
+
+var _default = CellTextStyled;
+exports.default = _default;

package/HiCell/index.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CellAddress", {
+  enumerable: true,
+  get: function get() {
+    return _CellAddress.default;
+  }
+});
+Object.defineProperty(exports, "CellDate", {
+  enumerable: true,
+  get: function get() {
+    return _CellDate.default;
+  }
+});
+Object.defineProperty(exports, "CellIcon", {
+  enumerable: true,
+  get: function get() {
+    return _CellIcon.default;
+  }
+});
+Object.defineProperty(exports, "CellImage", {
+  enumerable: true,
+  get: function get() {
+    return _CellImage.default;
+  }
+});
+Object.defineProperty(exports, "CellNumeric", {
+  enumerable: true,
+  get: function get() {
+    return _CellNumeric.default;
+  }
+});
+Object.defineProperty(exports, "CellRate", {
+  enumerable: true,
+  get: function get() {
+    return _CellRate.default;
+  }
+});
+Object.defineProperty(exports, "CellSentinel", {
+  enumerable: true,
+  get: function get() {
+    return _CellSentinel.default;
+  }
+});
+Object.defineProperty(exports, "CellText", {
+  enumerable: true,
+  get: function get() {
+    return _CellText.default;
+  }
+});
+Object.defineProperty(exports, "CellTextStyled", {
+  enumerable: true,
+  get: function get() {
+    return _CellTextStyled.default;
+  }
+});
+
+var _CellAddress = _interopRequireDefault(require("./CellAddress"));
+
+var _CellDate = _interopRequireDefault(require("./CellDate"));
+
+var _CellIcon = _interopRequireDefault(require("./CellIcon"));
+
+var _CellImage = _interopRequireDefault(require("./CellImage"));
+
+var _CellNumeric = _interopRequireDefault(require("./CellNumeric"));
+
+var _CellRate = _interopRequireDefault(require("./CellRate"));
+
+var _CellSentinel = _interopRequireDefault(require("./CellSentinel"));
+
+var _CellText = _interopRequireDefault(require("./CellText"));
+
+var _CellTextStyled = _interopRequireDefault(require("./CellTextStyled"));

package/HiCheckbox/HiCheckbox.js

@@ -0,0 +1,193 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styles = exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+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 _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 _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+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(theme) {
+  return {
+    root: {
+      marginRight: 4,
+      marginLeft: 4,
+      padding: 0,
+      fontSize: 20
+    },
+    checked: {},
+    checkedPrimary: {
+      color: theme.palette.primary.main
+    },
+    checkedSecondary: {
+      color: theme.palette.secondary.main
+    },
+    checkedPositive: {
+      color: theme.palette.positive.main
+    },
+    checkedNegative: {
+      color: theme.palette.negative.main
+    },
+    checkedMiddle: {
+      color: theme.palette.middle.main
+    },
+    checkedNeutral: {
+      color: theme.palette.neutral.main
+    },
+    disabled: {
+      color: theme.palette.action.disabled
+    }
+  };
+};
+
+exports.styles = styles;
+
+var HiCheckbox = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(HiCheckbox, _React$PureComponent);
+
+  var _super = _createSuper(HiCheckbox);
+
+  function HiCheckbox(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiCheckbox);
+    _this = _super.call(this, props);
+    _this.handleChange = _this.handleChange.bind((0, _assertThisInitialized2.default)(_this));
+    return _this;
+  }
+  /**
+   * Call callback function and stop click propagation
+   * @param event
+   * @param checked
+   */
+
+
+  (0, _createClass2.default)(HiCheckbox, [{
+    key: "handleChange",
+    value: function handleChange(event, checked) {
+      // Stop propagation
+      if (event) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+
+      if (this.props.onChange) {
+        this.props.onChange(event, checked);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _classNames;
+
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          color = _this$props.color,
+          checkedIcon = _this$props.checkedIcon,
+          icon = _this$props.icon,
+          indeterminateIcon = _this$props.indeterminateIcon,
+          style = _this$props.style,
+          size = _this$props.size,
+          className = _this$props.className,
+          other = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "color", "checkedIcon", "icon", "indeterminateIcon", "style", "size", "className"]);
+      var iconStyles = (0, _objectSpread2.default)({
+        width: size,
+        height: size
+      }, style);
+      var hcolor = ['positive', 'negative', 'middle', 'neutral', 'inherit'].includes(color) ? 'default' : color;
+      var checkboxIcon;
+
+      if (icon) {
+        var iconProps = {
+          className: classes.root
+        };
+
+        if (typeof icon === 'string') {
+          checkboxIcon = /*#__PURE__*/_react.default.createElement(_HiIcon.default, (0, _extends2.default)({
+            icon: icon
+          }, iconProps));
+        } else if ((0, _typeof2.default)(icon) === 'object') {
+          checkboxIcon = (0, _objectSpread2.default)({}, icon);
+          checkboxIcon.props = (0, _objectSpread2.default)({}, checkboxIcon.props, {}, iconProps);
+        }
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_Checkbox.default, (0, _extends2.default)({
+        classes: {
+          root: classes.root,
+          checked: (0, _classnames.default)(classes.checked, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.checkedPrimary, color === 'primary' || color === 'inherit'), (0, _defineProperty2.default)(_classNames, classes.checkedSecondary, color === 'secondary'), (0, _defineProperty2.default)(_classNames, classes.checkedPositive, color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.checkedNegative, color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.checkedMiddle, color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.checkedNeutral, color === 'neutral'), _classNames)),
+          disabled: classes.disabled
+        },
+        style: iconStyles,
+        color: hcolor,
+        onChange: this.handleChange,
+        icon: checkboxIcon
+      }, checkedIcon && {
+        checkedIcon: /*#__PURE__*/_react.default.createElement(_HiIcon.default, {
+          className: classes.root,
+          icon: checkedIcon,
+          color: color,
+          size: 20
+        })
+      }, indeterminateIcon && {
+        indeterminateIcon: /*#__PURE__*/_react.default.createElement(_HiIcon.default, {
+          className: classes.root,
+          icon: indeterminateIcon,
+          color: color,
+          size: 20
+        })
+      }, other));
+    }
+  }]);
+  return HiCheckbox;
+}(_react.default.PureComponent);
+
+HiCheckbox.defaultProps = {
+  checked: false,
+  color: 'inherit',
+  size: 20,
+  icon: 'check_box_outline_blank'
+};
+
+var _default = (0, _withStyles.default)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiCheckbox'
+})(HiCheckbox);
+
+exports.default = _default;

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

package/HiChip/HiChip.js

@@ -0,0 +1,268 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _keycode = _interopRequireDefault(require("keycode"));
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
+var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
+
+var useStyles = (0, _makeStyles.default)(function (theme) {
+  return {
+    root: (0, _objectSpread2.default)({}, theme.typography.b3, {
+      display: 'inline-flex',
+      marginRight: 4,
+      width: 'fit-content',
+      height: 24,
+      borderRadius: 12,
+      fontSize: 13,
+      backgroundColor: theme.palette.grey[300],
+      color: theme.palette.neutral.dark,
+      padding: 8,
+      alignItems: 'center',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      '&$rightNavigation': {
+        paddingRight: 2
+      },
+      '&$leftNavigation': {
+        paddingLeft: 2
+      },
+      '&$deletable': {
+        paddingRight: 2
+      },
+      '&$leftIcon': {
+        paddingLeft: 2
+      }
+    }),
+    leftNavigation: {},
+    rightNavigation: {},
+    deletable: {},
+    leftIcon: {},
+    icon: function icon(props) {
+      var fontSize = props.iconSize || 20;
+      return {
+        marginRight: 4,
+        fontSize: fontSize
+      };
+    },
+    iconClickable: {
+      cursor: 'pointer',
+      '&:hover, &:focus': {
+        color: theme.palette.primary.main
+      }
+    },
+    eraseIcon: {
+      // Remove grey highlight
+      WebkitTapHighlightColor: 'transparent',
+      marginLeft: 4,
+      position: 'relative',
+      cursor: 'pointer',
+      color: theme.palette.neutral.main,
+      '&:hover, &:focus': {
+        color: theme.palette.neutral.dark
+      }
+    },
+    label: {
+      userSelect: 'none',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    prefix: {
+      whiteSpace: 'nowrap',
+      color: theme.palette.neutral.dark,
+      paddingRight: 4
+    },
+    navigate: {
+      // Remove grey highlight
+      WebkitTapHighlightColor: 'transparent',
+      backgroundColor: theme.palette.grey[300],
+      color: theme.palette.neutral.normal,
+      marginRight: 2,
+      marginLeft: 2,
+      borderRadius: 10,
+      cursor: 'pointer',
+      '&:hover, &:focus': {
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.grey[300]
+      },
+      position: 'relative'
+    },
+    badge: {
+      height: 16,
+      paddingLeft: '2px',
+      paddingRight: '8px'
+    }
+  };
+});
+
+var handleKeyDown = function handleKeyDown(e, fn) {
+  if ((0, _keycode.default)(e) === 'space' || (0, _keycode.default)(e) === 'enter') {
+    e.preventDefault();
+    fn();
+  }
+};
+
+var HiChip = function HiChip(props) {
+  var _classNames2;
+
+  var className = props.className,
+      fallbackImage = props.fallbackImage,
+      icon = props.icon,
+      _props$iconSize = props.iconSize,
+      iconSize = _props$iconSize === void 0 ? 20 : _props$iconSize,
+      id = props.id,
+      img = props.img,
+      label = props.label,
+      labelIcon = props.labelIcon,
+      onClick = props.onClick,
+      onKeyDown = props.onKeyDown,
+      onPrevious = props.onPrevious,
+      onNext = props.onNext,
+      onDelete = props.onDelete,
+      prefix = props.prefix,
+      onIconClick = props.onIconClick,
+      title = props.title,
+      titleDelete = props.titleDelete,
+      titleIcon = props.titleIcon,
+      titleImg = props.titleImg,
+      titleNext = props.titleNext,
+      titlePrevious = props.titlePrevious,
+      style = props.style;
+  var classes = useStyles(props);
+  var chipIcon;
+
+  if (icon) {
+    var iconProps = {
+      className: (0, _classnames.default)(classes.icon, (0, _defineProperty2.default)({}, classes.iconClickable, onIconClick)),
+      id: "".concat(id, "-icon"),
+      onClick: onIconClick,
+      onKeyDown: function onKeyDown(event) {
+        return handleKeyDown(event, onIconClick);
+      },
+      title: titleIcon,
+      tabIndex: onIconClick ? 0 : -1
+    };
+
+    if (typeof icon === 'string') {
+      chipIcon = /*#__PURE__*/_react.default.createElement(_HiIcon.default, (0, _extends2.default)({
+        icon: icon
+      }, iconProps));
+    } else if ((0, _typeof2.default)(icon) === 'object') {
+      chipIcon = (0, _objectSpread2.default)({}, icon);
+      chipIcon.props = (0, _objectSpread2.default)({}, iconProps);
+    }
+  }
+
+  var chipLabelIcon;
+
+  if (labelIcon) {
+    var _iconProps = {
+      className: classes.icon,
+      id: "".concat(id, "-labelIcon"),
+      size: iconSize,
+      title: titleIcon,
+      tabIndex: -1
+    };
+
+    if (typeof labelIcon === 'string') {
+      chipLabelIcon = /*#__PURE__*/_react.default.createElement(_HiIcon.default, (0, _extends2.default)({
+        icon: labelIcon
+      }, _iconProps));
+    } else if ((0, _typeof2.default)(labelIcon) === 'object') {
+      chipLabelIcon = (0, _objectSpread2.default)({}, labelIcon);
+      chipLabelIcon.props = (0, _objectSpread2.default)({}, _iconProps, {
+        style: {
+          fontSize: props.iconSize || 20
+        }
+      });
+    }
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
+    role: 'button',
+    className: (0, _classnames.default)(classes.root, className, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.leftNavigation, onPrevious), (0, _defineProperty2.default)(_classNames2, classes.rightNavigation, onNext), (0, _defineProperty2.default)(_classNames2, classes.deletable, onDelete), (0, _defineProperty2.default)(_classNames2, classes.leftIcon, icon), _classNames2)),
+    title: title,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    tabIndex: onKeyDown ? '0' : '-1',
+    style: style
+  }, chipIcon, prefix && /*#__PURE__*/_react.default.createElement("span", {
+    id: "".concat(id, "-prefix"),
+    className: classes.prefix
+  }, prefix), img && /*#__PURE__*/_react.default.createElement("img", {
+    className: classes.badge,
+    id: "".concat(id, "-badge"),
+    src: img,
+    alt: label,
+    onError: function onError(e) {
+      if (fallbackImage) {
+        e.target.src = "".concat(fallbackImage);
+      } else {
+        e.target.style.display = 'none';
+      }
+    },
+    title: titleImg
+  }), labelIcon && chipLabelIcon, onPrevious && /*#__PURE__*/_react.default.createElement(_HiIcon.default, {
+    className: (0, _classnames.default)(classes.navigate),
+    id: "".concat(id, "-previous"),
+    icon: "arrow_left",
+    onClick: onPrevious,
+    onKeyDown: function onKeyDown(event) {
+      return handleKeyDown(event, onPrevious);
+    },
+    size: iconSize,
+    title: titlePrevious,
+    tabIndex: 0
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    id: "".concat(id, "-label"),
+    className: classes.label
+  }, label), onNext && /*#__PURE__*/_react.default.createElement(_HiIcon.default, {
+    className: (0, _classnames.default)(classes.navigate),
+    id: "".concat(id, "-next"),
+    icon: "arrow_right",
+    onClick: onNext,
+    onKeyDown: function onKeyDown(event) {
+      return handleKeyDown(event, onNext);
+    },
+    size: iconSize,
+    title: titleNext,
+    tabIndex: 0
+  }), onDelete && /*#__PURE__*/_react.default.createElement(_HiIcon.default, {
+    classes: {
+      root: classes.eraseIcon
+    },
+    id: "".concat(id, "-delete"),
+    icon: "cancel",
+    onClick: onDelete,
+    onKeyDown: function onKeyDown(event) {
+      return handleKeyDown(event, onDelete);
+    },
+    size: iconSize,
+    title: titleDelete,
+    tabIndex: 0
+  }));
+};
+
+var _default = HiChip;
+exports.default = _default;