@hipay/hipay-material-ui 3.4.2 → 3.5.0

package/es/HiSelectableList/HiSelectableListItem.js

@@ -1,402 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.useStyles = exports.useItemLabelStyles = 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 _styles = require("@material-ui/core/styles");
-
-var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
-
-var _ListSubheader = _interopRequireDefault(require("@material-ui/core/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 useItemLabelStyles = (0, _styles.makeStyles)(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;
-  var classes = useItemLabelStyles(props);
-
-  if (labelHighlight) {
-    var spanHighlight = _react.default.createElement("span", {
-      // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML: {
-        __html: (0, _helpers.escapeHTML)(labelHighlight)
-      }
-    });
-
-    if (color && selected) {
-      return _react.default.createElement(_HiColoredLabel.default, {
-        color: color,
-        label: spanHighlight
-      });
-    }
-
-    return _react.default.createElement("span", {
-      className: classes.label
-    }, spanHighlight);
-  }
-
-  if (color && selected) {
-    return _react.default.createElement(_HiColoredLabel.default, {
-      className: classes.coloredLabel,
-      color: color,
-      label: label
-    });
-  }
-
-  return _react.default.createElement("div", {
-    className: classes.label,
-    title: label
-  }, label);
-}
-
-var useStyles = (0, _styles.makeStyles)(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)': {
-          backgroundColor: theme.palette.action.hover
-        },
-        outline: 'none'
-      }
-    },
-    listItemWithoutSecondaryInline: {},
-    listItemInlineWithInfoWithoutSecondary: {},
-    listItemHover: {
-      '&:hover:not($disabled):not($pinned)': {
-        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
-    },
-    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: {}
-  };
-});
-/**
- * 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;
-
-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,
-      secondaryInline = props.secondaryInline,
-      secondaryLabel = props.secondaryLabel,
-      thin = props.thin,
-      type = props.type,
-      color = props.color,
-      item = props.item;
-  var classes = useStyles(props);
-  var ref = (0, _react.useRef)(null);
-  var isHovering = !!hoverIcon ? (0, _reactUse.useHoverDirty)(ref) : false;
-  var onKeyDown = (0, _react.useCallback)(function (_ref) {
-    var code = _ref.code;
-
-    if (code === 'Space' || code === 'Enter') {
-      event.preventDefault();
-      event.stopPropagation();
-      if (item) onSelect(null, item);
-    }
-  }, [item]);
-  (0, _reactUse.useEvent)('keydown', onKeyDown, ref.current); // Return simple loader list item
-
-  if (type === 'loader') {
-    return _react.default.createElement(_ListItem.default, null, _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 ? _ListSubheader.default : _ListItem.default;
-  var itemIcon;
-
-  if (displayedIcon) {
-    var iconProps = {
-      className: classes.icon,
-      color: selected && color ? color : 'inherit'
-    };
-
-    if (typeof displayedIcon === 'string') {
-      itemIcon = _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 _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.inline, secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && info && !secondaryLabel), _classNames)),
-    disabled: disabled,
-    onClick: onSelect,
-    style: {
-      paddingLeft: "".concat(paddingLeft + level * 32, "px")
-    }
-  }, _react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.labelContent, (0, _defineProperty2.default)({}, classes.labelWithoutSecondaryInline, !secondaryInline || !secondaryLabel && !info))
-  }, !hideCheckbox && !pinned && _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 && _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
-  }), _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, _react.default.createElement(ItemLabel, {
-    color: color,
-    label: label,
-    labelHighlight: labelHighlight,
-    selected: selected
-  }))), _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 && _react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.secondaryLabel, (0, _defineProperty2.default)({}, classes.inline, secondaryInline))
-  }, secondaryLabel), !!info && _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
-};
-var _default = HiSelectableListItem;
-exports.default = _default;

package/es/HiSelectableList/index.js

@@ -1,31 +0,0 @@
-"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 _HiSelectableList.default;
-  }
-});
-Object.defineProperty(exports, "HiSelectableListItem", {
-  enumerable: true,
-  get: function get() {
-    return _HiSelectableListItem.default;
-  }
-});
-Object.defineProperty(exports, "HiSelectableListHierarchic", {
-  enumerable: true,
-  get: function get() {
-    return _HiSelectableListHierarchic.default;
-  }
-});
-
-var _HiSelectableList = _interopRequireDefault(require("./HiSelectableList"));
-
-var _HiSelectableListItem = _interopRequireDefault(require("./HiSelectableListItem"));
-
-var _HiSelectableListHierarchic = _interopRequireDefault(require("./HiSelectableListHierarchic"));

package/es/HiStepper/DefaultIndicator.js

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

package/es/HiStepper/HiStep.js

@@ -1,200 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _Step = _interopRequireDefault(require("@material-ui/core/Step"));
-
-var _StepButton = _interopRequireDefault(require("@material-ui/core/StepButton"));
-
-var _StepContent = _interopRequireDefault(require("@material-ui/core/StepContent"));
-
-var _StepLabel = _interopRequireDefault(require("@material-ui/core/StepLabel"));
-
-var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
-
-var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
-
-var _Remove = _interopRequireDefault(require("@material-ui/icons/Remove"));
-
-var _DefaultIndicator = _interopRequireDefault(require("./DefaultIndicator"));
-
-/**
- * HiStepIcon used internally by HiStep
- */
-var HiStepIcon = function HiStepIcon(_ref) {
-  var color = _ref.color,
-      indicator = _ref.indicator,
-      status = _ref.status;
-  // get icon style from color
-  var style = (0, _react.useMemo)(function () {
-    return {
-      backgroundColor: color,
-      color: "#fff",
-      borderRadius: "50%",
-      width: 20,
-      height: 20,
-      lineHeight: "20px",
-      fontWeight: 600,
-      fontSize: 13
-    };
-  }, [color]); // get component from status
-
-  var StepIconComponent = (0, _react.useMemo)(function () {
-    switch (status) {
-      case "done":
-        return _Check.default;
-
-      case "error":
-        return _Close.default;
-
-      case "warning":
-        return _Remove.default;
-
-      case "in_progress":
-      default:
-        return function (props) {
-          return _react.default.createElement("div", props, indicator);
-        };
-    }
-  }, [status, indicator]);
-  return _react.default.createElement(StepIconComponent, {
-    style: style
-  });
-};
-/**
- * Custom style for StepButton
- */
-
-
-var useStepButtonStyle = (0, _styles.makeStyles)(function (theme) {
-  return {
-    root: {
-      fontFamily: theme.typography.fontFamily
-    },
-    vertical: {
-      marginBottom: 'auto'
-    }
-  };
-});
-/**
- * Custom style for StepContent
- */
-
-var useStepContentStyle = (0, _styles.makeStyles)(function (theme) {
-  return {
-    root: {
-      marginLeft: 9,
-      marginTop: 0,
-      textAlign: "left",
-      borderLeft: "2px solid ".concat(theme.palette.neutral.light)
-    },
-    last: {
-      borderLeft: "none"
-    }
-  };
-});
-/**
- * Custom style for StepLabel
- */
-
-var useStepLabelStyle = (0, _styles.makeStyles)(function (theme) {
-  return {
-    label: (0, _objectSpread2.default)({}, theme.typography.button, {
-      fontWeight: '600 !important',
-      color: "inherit !important",
-      fontSize: '13px'
-    }),
-    active: {},
-    completed: {}
-  };
-});
-
-var HiStep = _react.default.forwardRef(function (props, ref) {
-  var content = props.content,
-      disabled = props.disabled,
-      indicator = props.indicator,
-      label = props.label,
-      onClick = props.onClick,
-      status = props.status,
-      others = (0, _objectWithoutProperties2.default)(props, ["content", "disabled", "indicator", "label", "onClick", "status"]);
-  var theme = (0, _styles.useTheme)();
-  var stepButtonClasses = useStepButtonStyle(props);
-  var stepContentClasses = useStepContentStyle(props);
-  var stepLabelClasses = useStepLabelStyle(props);
-  var color = (0, _react.useMemo)(function () {
-    switch (status) {
-      case "done":
-        return theme.palette.positive.main;
-
-      case "error":
-        return theme.palette.negative.main;
-
-      case "in_progress":
-        return theme.palette.primary.main;
-
-      case "warning":
-        return theme.palette.middle.main;
-
-      default:
-        return disabled ? theme.palette.text.disabled : theme.palette.neutral.light;
-    }
-  }, [status, disabled]); // set label color
-
-  var stepLabelStyle = (0, _react.useMemo)(function () {
-    return {
-      color: color
-    };
-  }, [color]);
-
-  var _ref2 = _react.default.createElement(HiStepIcon, {
-    color: color,
-    indicator: indicator,
-    status: status
-  });
-
-  var StepIconProps = (0, _react.useMemo)(function () {
-    return {
-      icon: _ref2
-    };
-  }, [color, indicator, status]);
-  return _react.default.createElement(_Step.default, (0, _extends2.default)({
-    ref: ref,
-    completed: status === "done",
-    disabled: disabled
-  }, others), _react.default.createElement(_StepButton.default, {
-    classes: stepButtonClasses,
-    onClick: onClick
-  }, _react.default.createElement(_StepLabel.default, {
-    classes: stepLabelClasses,
-    StepIconProps: StepIconProps,
-    style: stepLabelStyle
-  }, label)), content && _react.default.createElement(_StepContent.default, {
-    classes: stepContentClasses
-  }, content));
-});
-
-HiStep.defaultProps = {
-  /**
-   * Default indicator
-   */
-  indicator: _react.default.createElement(_DefaultIndicator.default, null)
-};
-var _default = HiStep;
-exports.default = _default;