@hipay/hipay-material-ui 3.12.1 → 3.12.2

package/es/HiSelectableList/HiSelectableListItem.js

@@ -0,0 +1,439 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStyles = exports.useItemLabelStyles = 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 _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _reactUse = require("react-use");
+
+var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
+
+var _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
+
+var _ListSubheader = _interopRequireDefault(require("@mui/material/ListSubheader"));
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
+var _HiCheckbox = _interopRequireDefault(require("../HiCheckbox"));
+
+var _HiColoredLabel = _interopRequireDefault(require("../HiColoredLabel"));
+
+var _HiLoader = _interopRequireDefault(require("../HiLoader"));
+
+var _helpers = require("../utils/helpers");
+
+var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown"));
+
+var _ArrowRight = _interopRequireDefault(require("@mui/icons-material/ArrowRight"));
+
+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 || _typeof3(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 useItemLabelStyles = (0, _makeStyles.default)(function (theme) {
+  return {
+    label: {
+      maxWidth: '100%',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      display: 'inline-block',
+      margin: '1px 0'
+    }
+  };
+});
+exports.useItemLabelStyles = useItemLabelStyles;
+
+function ItemLabel(props) {
+  var color = props.color,
+      label = props.label,
+      labelHighlight = props.labelHighlight,
+      selected = props.selected,
+      title = props.title;
+  var classes = useItemLabelStyles(props);
+
+  if (labelHighlight) {
+    var spanHighlight = /*#__PURE__*/_react.default.createElement("span", {
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML: {
+        __html: (0, _helpers.escapeHTML)(labelHighlight)
+      }
+    });
+
+    if (color && selected) {
+      return /*#__PURE__*/_react.default.createElement(_HiColoredLabel.default, {
+        color: color,
+        label: spanHighlight
+      });
+    }
+
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: classes.label
+    }, spanHighlight);
+  }
+
+  if (color && selected) {
+    return /*#__PURE__*/_react.default.createElement(_HiColoredLabel.default, {
+      className: classes.coloredLabel,
+      color: color,
+      label: label
+    });
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.label,
+    title: title || label
+  }, label);
+}
+
+var useStyles = (0, _makeStyles.default)(function (theme) {
+  return {
+    root: {
+      paddingLeft: theme.spacing(1)
+    },
+    listItem: {
+      backgroundColor: theme.palette.background3,
+      color: theme.palette.neutral.dark,
+      padding: '5px 12px 5px 0px',
+      fontWeight: theme.typography.fontWeightRegular,
+      maxHeight: 56,
+      display: 'inline-flex',
+      alignItems: "center",
+      "&:not($disabled):not($pinned)": {
+        cursor: 'pointer'
+      },
+      '&$listItemInlineWithInfoWithoutSecondary': {
+        justifyContent: 'space-between'
+      },
+      '&$listItemWithoutSecondaryInline': {
+        display: 'block'
+      },
+      '&$inline': {
+        minHeight: 40,
+        '& $secondaryLabel': {
+          display: 'inline-block'
+        }
+      },
+      '&:focus': {
+        '&:not($disabled):not($pinned):not($collapseHeader)': {
+          backgroundColor: theme.palette.action.hover
+        },
+        outline: 'none'
+      },
+      '&$collapseHeader': {
+        minHeight: 32,
+        lineHeight: "32px"
+      }
+    },
+    listItemWithoutSecondaryInline: {},
+    listItemInlineWithInfoWithoutSecondary: {},
+    listItemHover: {
+      '&:hover:not($disabled):not($pinned):not($collapseHeader)': {
+        backgroundColor: theme.palette.action.hover,
+        fontWeight: theme.typography.fontWeightMedium
+      }
+    },
+    centered: {
+      textAlign: 'center',
+      width: '100%'
+    },
+    disabled: {
+      fontWeight: theme.typography.fontWeightLight,
+      cursor: 'default',
+      opacity: 'inherit'
+    },
+    selected: {
+      backgroundColor: theme.palette.action.selected
+    },
+    pinned: {
+      zIndex: 1,
+      display: 'inherit',
+      backgroundColor: theme.palette.background3
+    },
+    collapseHeader: {
+      zIndex: 1,
+      display: 'inherit',
+      backgroundColor: theme.palette.background3
+    },
+    thin: {
+      fontWeight: theme.typography.fontWeightLight
+    },
+    loader: {
+      textAlign: 'center',
+      width: 1,
+      height: 22,
+      padding: theme.spacing(2, 0),
+      margin: 'auto'
+    },
+    listItemContent: (0, _objectSpread2.default)({}, theme.typography.b1, {
+      fontWeight: 'inherit',
+      width: '100%',
+      minWidth: '50%',
+      padding: '5px 0',
+      '&$listItemContentSelected': {
+        marginBottom: 1,
+        marginLeft: theme.spacing(-1)
+      },
+      '& strong': {
+        fontWeight: theme.typography.fontWeightMedium
+      },
+      display: 'contents'
+    }),
+    listItemContentSelected: {},
+    highlight: {
+      fontWeight: theme.typography.fontWeightMedium,
+      color: theme.palette.neutral.main,
+      textTransform: 'uppercase'
+    },
+    primaryHighlight: {
+      fontWeight: theme.typography.fontWeightMedium,
+      color: theme.palette.primary.main,
+      textTransform: 'uppercase'
+    },
+    secondaryLabel: (0, _objectSpread2.default)({}, theme.typography.b3, {
+      color: theme.palette.neutral.main,
+      fontWeight: theme.typography.fontWeightLight,
+      fontSize: 11,
+      marginLeft: theme.spacing(1)
+    }),
+    inline: {},
+    info: (0, _objectSpread2.default)({}, theme.typography.b3, {
+      color: theme.palette.neutral.main,
+      fontWeight: theme.typography.fontWeightLight,
+      fontSize: 12,
+      textOverflow: 'ellipsis',
+      textAlign: 'right',
+      alignSelf: 'center'
+    }),
+    img: {
+      width: 24,
+      height: 'auto',
+      margin: '1px 4px 3px 4px',
+      verticalAlign: 'middle'
+    },
+    icon: function icon(props) {
+      return {
+        marginLeft: theme.spacing(1),
+        marginRight: theme.spacing(1),
+        verticalAlign: 'middle',
+        color: props.selected && props.color ? props.color : 'inherit',
+        fontSize: 20
+      };
+    },
+    labelContent: {
+      display: '-webkit-flex',
+      paddingLeft: theme.spacing(1),
+      alignItems: 'center',
+      maxWidth: '85%',
+      '&$labelWithoutSecondaryInline': {
+        maxWidth: '100%'
+      }
+    },
+    labelWithoutSecondaryInline: {},
+    infosContent: {
+      display: 'flex',
+      alignItems: 'center',
+      paddingLeft: theme.spacing(1),
+      width: '100%',
+      justifyContent: 'space-between',
+      '&$infosInlineWithoutSecondary': {
+        width: 'auto'
+      }
+    },
+    infosInlineWithoutSecondary: {},
+    infosWithSecondaryInline: {},
+    infosWithoutSecondaryInline: {},
+    rightIcon: {
+      position: "absolute",
+      right: 12,
+      top: 8
+    }
+  };
+});
+/**
+ * Construit un élément de liste sélectionnable (avec checkbox)
+ * - la sélection/déséclection d'un item est géré avec KeyDown
+ */
+
+exports.useStyles = useStyles;
+
+var _ref = /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null);
+
+var _ref2 = /*#__PURE__*/_react.default.createElement(_ArrowRight.default, null);
+
+function HiSelectableListItem(props) {
+  var _classNames, _classNames3, _classNames4;
+
+  var centered = props.centered,
+      selected = props.selected,
+      disabled = props.disabled,
+      fallbackImage = props.fallbackImage,
+      hideCheckbox = props.hideCheckbox,
+      onSelect = props.onSelect,
+      indeterminate = props.indeterminate,
+      indeterminateIcon = props.indeterminateIcon,
+      icon = props.icon,
+      id = props.id,
+      img = props.img,
+      info = props.info,
+      hoverIcon = props.hoverIcon,
+      checkedIcon = props.checkedIcon,
+      level = props.level,
+      label = props.label,
+      labelHighlight = props.labelHighlight,
+      paddingLeft = props.paddingLeft,
+      pinned = props.pinned,
+      collapseHeader = props.collapseHeader,
+      secondaryInline = props.secondaryInline,
+      secondaryLabel = props.secondaryLabel,
+      thin = props.thin,
+      title = props.title,
+      type = props.type,
+      color = props.color,
+      item = props.item,
+      opened = props.opened,
+      group = props.group;
+  var classes = useStyles(props);
+  var ref = (0, _react.useRef)(null);
+  var isHovering = !!hoverIcon ? (0, _reactUse.useHoverDirty)(ref) : false;
+  var onKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.code === 'Space' || event.code === 'Enter') {
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (item) {
+        onSelect(event, item);
+      }
+    }
+  }, [item]);
+  (0, _reactUse.useEvent)('keydown', onKeyDown, ref.current); // Return simple loader list item
+
+  if (type === 'loader') {
+    return /*#__PURE__*/_react.default.createElement(_ListItem.default, null, /*#__PURE__*/_react.default.createElement(_HiLoader.default, {
+      className: classes.loader,
+      loading: true,
+      size: 8
+    }));
+  }
+
+  var displayedIcon;
+
+  if (!disabled && isHovering && hoverIcon) {
+    displayedIcon = hoverIcon;
+  } else if (icon) {
+    displayedIcon = icon;
+  }
+
+  var ListItemComponentName = pinned || collapseHeader ? _ListSubheader.default : _ListItem.default;
+  var itemIcon;
+
+  if (displayedIcon) {
+    var iconProps = {
+      className: classes.icon,
+      color: selected && color ? color : 'inherit'
+    };
+
+    if (typeof displayedIcon === 'string') {
+      itemIcon = /*#__PURE__*/_react.default.createElement(_HiIcon.default, (0, _extends2.default)({
+        icon: displayedIcon
+      }, iconProps));
+    } else if ((0, _typeof2.default)(icon) === 'object') {
+      itemIcon = (0, _objectSpread2.default)({}, displayedIcon);
+      itemIcon.props = (0, _objectSpread2.default)({}, itemIcon.props, {}, iconProps);
+    }
+  }
+
+  return /*#__PURE__*/_react.default.createElement(ListItemComponentName, {
+    ref: ref,
+    id: id,
+    tabIndex: disabled || pinned ? '-1' : 0,
+    key: "li-".concat(id),
+    classes: {
+      root: classes.root
+    },
+    className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.selected, selected), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.collapseHeader, collapseHeader), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && typeof info !== "undefined" && !secondaryLabel), _classNames)),
+    disabled: disabled,
+    onClick: !disabled ? onSelect : undefined,
+    style: {
+      paddingLeft: "".concat(paddingLeft + level * 32, "px")
+    },
+    "data-group": group
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.labelContent, (0, _defineProperty2.default)({}, classes.labelWithoutSecondaryInline, !secondaryInline || !secondaryLabel && typeof info === "undefined"))
+  }, !hideCheckbox && !pinned && /*#__PURE__*/_react.default.createElement(_HiCheckbox.default, {
+    tabIndex: 0,
+    classes: {
+      root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
+    },
+    checked: selected,
+    checkedIcon: checkedIcon // color={disabled ? 'inherit' : 'primary'}
+    ,
+    disabled: disabled,
+    icon: itemIcon,
+    indeterminate: indeterminate,
+    indeterminateIcon: indeterminateIcon
+  }), type === 'image' && img && /*#__PURE__*/_react.default.createElement("img", {
+    src: img,
+    alt: '',
+    onError: function onError(e) {
+      if (fallbackImage) {
+        e.target.src = "".concat(fallbackImage);
+      } else {
+        e.target.style.display = 'none';
+      }
+    },
+    className: classes.img
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.listItemContent, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.centered, centered), (0, _defineProperty2.default)(_classNames3, classes.highlight, type === 'highlight'), (0, _defineProperty2.default)(_classNames3, classes.primaryHighlight, type === 'primary-highlight'), (0, _defineProperty2.default)(_classNames3, classes.listItemContentSelected, selected && color), _classNames3)),
+    "data-id": id
+  }, itemIcon && hideCheckbox && itemIcon, /*#__PURE__*/_react.default.createElement(ItemLabel, {
+    color: color,
+    label: label,
+    labelHighlight: labelHighlight,
+    selected: selected,
+    title: title
+  }), collapseHeader && /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.rightIcon
+  }, opened ? _ref : _ref2))), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.infosContent, (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, classes.infosWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosWithSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosInlineWithoutSecondary, secondaryInline && !secondaryLabel), _classNames4))
+  }, !!secondaryLabel && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.secondaryLabel, (0, _defineProperty2.default)({}, classes.inline, secondaryInline))
+  }, secondaryLabel), typeof info !== "undefined" && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)(classes.info)
+  }, info)));
+}
+
+HiSelectableListItem.defaultProps = {
+  centered: false,
+  disabled: false,
+  hideCheckbox: false,
+  checkedIcon: 'check_box',
+  indeterminateIcon: 'indeterminate_check_box',
+  indeterminate: false,
+  level: 0,
+  paddingLeft: 4,
+  pinned: false,
+  secondaryInline: true,
+  selected: false,
+  thin: false,
+  opened: false
+};
+var _default = HiSelectableListItem;
+exports.default = _default;

package/es/HiSelectableList/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "HiSelectableListHierarchic", {
+  enumerable: true,
+  get: function get() {
+    return _HiSelectableListHierarchic.default;
+  }
+});
+Object.defineProperty(exports, "HiSelectableListItem", {
+  enumerable: true,
+  get: function get() {
+    return _HiSelectableListItem.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _HiSelectableList.default;
+  }
+});
+
+var _HiSelectableList = _interopRequireDefault(require("./HiSelectableList"));
+
+var _HiSelectableListItem = _interopRequireDefault(require("./HiSelectableListItem"));
+
+var _HiSelectableListHierarchic = _interopRequireDefault(require("./HiSelectableListHierarchic"));

package/es/HiStepper/DefaultIndicator.js

@@ -0,0 +1,44 @@
+"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 _SvgIcon = _interopRequireDefault(require("@mui/material/SvgIcon"));
+
+var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
+
+/**
+ * Custom style for SvgIcon
+ */
+var useStyles = (0, _makeStyles.default)(function (theme) {
+  return {
+    root: {
+      width: 20,
+      height: 20
+    }
+  };
+});
+
+var _ref = /*#__PURE__*/_react.default.createElement("circle", {
+  cx: "10",
+  cy: "10",
+  r: "2",
+  fill: "white"
+});
+
+var DefaultIndicator = function DefaultIndicator() {
+  var classes = useStyles();
+  return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
+    className: classes.root,
+    viewBox: "0 0 20 20"
+  }, _ref);
+};
+
+var _default = DefaultIndicator;
+exports.default = _default;