@hipay/hipay-material-ui 3.5.0 → 3.6.0-rc1

package/es/HiSelectableList/HiSelectableListItem.js

@@ -0,0 +1,402 @@
+"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

@@ -0,0 +1,31 @@
+"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

@@ -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("@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

@@ -0,0 +1,200 @@
+"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;