@hipay/hipay-material-ui 2.3.0-rc.5 → 2.3.0-rc.PSYCHE-2530-2

package/es/HiChip/HiChip.js

@@ -1,300 +1,227 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread";
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import keycode from 'keycode';
-import HiIcon from '../HiIcon';
-import { withStyles } from '@material-ui/core/styles';
-export const styles = theme => ({
-  root: _objectSpread({}, 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.main,
-    padding: 8,
-    alignItems: 'center',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    '&$rightNavigation': {
-      paddingRight: 2
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectSpread2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@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 _styles = require("@material-ui/core/styles");
+
+var styles = function styles(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.main,
+      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: {
+      marginRight: 4
     },
-    '&$leftNavigation': {
-      paddingLeft: 2
+    iconClickable: {
+      cursor: 'pointer',
+      '&:hover, &:focus': {
+        color: theme.palette.primary.main
+      }
     },
-    '&$deletable': {
-      paddingRight: 2
+    eraseIcon: {
+      // Remove grey highlight
+      WebkitTapHighlightColor: 'transparent',
+      marginLeft: 4,
+      position: 'relative',
+      cursor: 'pointer',
+      '&:hover, &:focus': {
+        color: theme.palette.neutral.dark
+      }
     },
-    '&$leftIcon': {
-      paddingLeft: 2
-    }
-  }),
-  leftNavigation: {},
-  rightNavigation: {},
-  deletable: {},
-  leftIcon: {},
-  icon: {
-    marginRight: 4
-  },
-  iconClickable: {
-    cursor: 'pointer',
-    '&:hover, &:focus': {
-      color: theme.palette.primary.main
-    }
-  },
-  eraseIcon: {
-    // Remove grey highlight
-    WebkitTapHighlightColor: 'transparent',
-    marginLeft: 4,
-    position: 'relative',
-    cursor: 'pointer',
-    '&:hover, &:focus': {
-      color: theme.palette.neutral.dark
-    }
-  },
-  label: {
-    userSelect: 'none',
-    whiteSpace: 'nowrap',
-    color: theme.palette.neutral.dark,
-    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]
+    label: {
+      userSelect: 'none',
+      whiteSpace: 'nowrap',
+      color: theme.palette.neutral.dark,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
     },
-    position: 'relative'
-  },
-  badge: {
-    height: 16,
-    paddingLeft: '2px',
-    paddingRight: '8px'
-  }
-});
+    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'
+    }
+  };
+};
+
+exports.styles = styles;
 
-const handleKeyDown = (e, fn) => {
-  if (keycode(e) === 'space' || keycode(e) === 'enter') {
+var handleKeyDown = function handleKeyDown(e, fn) {
+  if ((0, _keycode.default)(e) === 'space' || (0, _keycode.default)(e) === 'enter') {
     e.preventDefault();
     fn();
   }
 };
 
 function HiChip(props) {
-  const {
-    className,
-    classes,
-    fallbackImage,
-    icon,
-    iconSize = 20,
-    id,
-    img,
-    label,
-    onClick,
-    onKeyDown,
-    onPrevious,
-    onNext,
-    onDelete,
-    prefix,
-    onIconClick,
-    title,
-    titleDelete,
-    titleIcon,
-    titleImg,
-    titleNext,
-    titlePrevious
-  } = props;
-  return React.createElement("div", {
+  var _classNames;
+
+  var className = props.className,
+      classes = props.classes,
+      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,
+      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;
+  return _react.default.createElement("div", {
     id: id,
     role: 'button',
-    className: classNames(classes.root, className, {
-      [classes.leftNavigation]: onPrevious,
-      [classes.rightNavigation]: onNext,
-      [classes.deletable]: onDelete,
-      [classes.leftIcon]: icon
-    }),
+    className: (0, _classnames.default)(classes.root, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.leftNavigation, onPrevious), (0, _defineProperty2.default)(_classNames, classes.rightNavigation, onNext), (0, _defineProperty2.default)(_classNames, classes.deletable, onDelete), (0, _defineProperty2.default)(_classNames, classes.leftIcon, icon), _classNames)),
     title: title,
     onClick: onClick,
     onKeyDown: onKeyDown,
-    tabIndex: onKeyDown ? "0" : "-1"
-  }, icon && React.createElement(HiIcon, {
-    className: classNames(classes.icon, {
-      [classes.iconClickable]: onIconClick
-    }),
+    tabIndex: onKeyDown ? '0' : '-1',
+    style: style
+  }, icon && _react.default.createElement(_HiIcon.default, {
+    className: (0, _classnames.default)(classes.icon, (0, _defineProperty2.default)({}, classes.iconClickable, onIconClick)),
+    id: "".concat(id, "-icon"),
     icon: icon,
     size: iconSize,
     onClick: onIconClick,
-    onKeyDown: event => handleKeyDown(event, onIconClick),
+    onKeyDown: function onKeyDown(event) {
+      return handleKeyDown(event, onIconClick);
+    },
     title: titleIcon,
     tabIndex: onIconClick ? 0 : -1
-  }), prefix && React.createElement("span", {
+  }), prefix && _react.default.createElement("span", {
+    id: "".concat(id, "-prefix"),
     className: classes.prefix
-  }, prefix), img && React.createElement("img", {
+  }, prefix), img && _react.default.createElement("img", {
     className: classes.badge,
+    id: "".concat(id, "-badge"),
     src: img,
     alt: img,
-    onError: e => {
+    onError: function onError(e) {
       if (fallbackImage) {
-        e.target.src = `${fallbackImage}`;
+        e.target.src = "".concat(fallbackImage);
       } else {
         e.target.style.display = 'none';
       }
     },
     title: titleImg
-  }), onPrevious && React.createElement(HiIcon, {
-    className: classNames(classes.navigate),
+  }), onPrevious && _react.default.createElement(_HiIcon.default, {
+    className: (0, _classnames.default)(classes.navigate),
+    id: "".concat(id, "-previous"),
     icon: "arrow_left",
     onClick: onPrevious,
-    onKeyDown: event => handleKeyDown(event, onPrevious),
+    onKeyDown: function onKeyDown(event) {
+      return handleKeyDown(event, onPrevious);
+    },
     size: iconSize,
     title: titlePrevious,
     tabIndex: 0
-  }), React.createElement("span", {
+  }), _react.default.createElement("span", {
+    id: "".concat(id, "-label"),
     className: classes.label
-  }, label), onNext && React.createElement(HiIcon, {
-    className: classNames(classes.navigate),
+  }, label), onNext && _react.default.createElement(_HiIcon.default, {
+    className: (0, _classnames.default)(classes.navigate),
+    id: "".concat(id, "-next"),
     icon: "arrow_right",
     onClick: onNext,
-    onKeyDown: event => handleKeyDown(event, onNext),
+    onKeyDown: function onKeyDown(event) {
+      return handleKeyDown(event, onNext);
+    },
     size: iconSize,
     title: titleNext,
     tabIndex: 0
-  }), onDelete && React.createElement(HiIcon, {
+  }), onDelete && _react.default.createElement(_HiIcon.default, {
     classes: {
       root: classes.eraseIcon
     },
+    id: "".concat(id, "-delete"),
     icon: "cancel",
     onClick: onDelete,
-    onKeyDown: event => handleKeyDown(event, onDelete),
+    onKeyDown: function onKeyDown(event) {
+      return handleKeyDown(event, onDelete);
+    },
     size: iconSize,
     title: titleDelete,
     tabIndex: 0
   }));
 }
 
-HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Surcharge les classes du composant
-   */
-  classes: PropTypes.object,
-
-  /**
-   * Surcharge les classes du composant
-   */
-  className: PropTypes.object,
-
-  /**
-   * Chemin vers l'image à afficher par défaut si une image n'est pas trouvée
-   */
-  fallbackImage: PropTypes.string,
-
-  /**
-   * Icone affiché à gauche
-   */
-  icon: PropTypes.string,
-
-  /**
-   * Font size des icônes (default = 20px)
-   */
-  iconSize: PropTypes.number,
-
-  /**
-   * Identifiant de l'élément
-   */
-  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Ajoute une image à gauche du Chip
-   */
-  img: PropTypes.string,
-
-  /**
-   * Label qu'affiche le Chip
-   */
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-
-  /**
-   * Fonction de callback au clic sur la chip
-   */
-  onClick: PropTypes.func,
-
-  /**
-   * Fonction de callback au clic sur l'icon close si cancelable = true
-   */
-  onDelete: PropTypes.func,
-
-  /**
-   * Fonction de callback au clic sur l'icon à gauche
-   */
-  onIconClick: PropTypes.func,
-
-  /**
-   * Fonction de callback à l'appui sur une touche du clavier
-   */
-  onKeyDown: PropTypes.func,
-
-  /**
-   * Fonction de callback au clic sur l'icon next
-   */
-  onNext: PropTypes.func,
-
-  /**
-   * Fonction de callback au clic sur l'icon previous
-   */
-  onPrevious: PropTypes.func,
-
-  /**
-   * Préfixe dans le HiChip
-   */
-  prefix: PropTypes.string,
-
-  /**
-   * Titre du chip
-   */
-  title: PropTypes.string,
-
-  /**
-   * Titre de l'icône supprimer
-   */
-  titleDelete: PropTypes.string,
-
-  /**
-   * Titre de l'icône
-   */
-  titleIcon: PropTypes.string,
-
-  /**
-   * Titre de la balise img
-   */
-  titleImg: PropTypes.string,
-
-  /**
-   * Titre de la navigation suivante
-   */
-  titleNext: PropTypes.string,
-
-  /**
-   * Titre de la navigation précédente
-   */
-  titlePrevious: PropTypes.string
-} : {};
-export default withStyles(styles, {
+var _default = (0, _styles.withStyles)(styles, {
   hiComponent: true,
   name: 'HmuiHiChip'
-})(HiChip);
+})(HiChip);
+
+exports.default = _default;