@talend/react-components/lib/Actions/ActionButton/ActionButton.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _reactBootstrap = require("@talend/react-bootstrap");
var _reactI18next = require("react-i18next");
var _TooltipTrigger = _interopRequireDefault(require("../../TooltipTrigger"));
var _CircularProgress = _interopRequireDefault(require("../../CircularProgress"));
var _Skeleton = _interopRequireDefault(require("../../Skeleton"));
var _Icon = _interopRequireDefault(require("../../Icon"));
var _getPropsFrom = _interopRequireDefault(require("../../utils/getPropsFrom"));
var _ActionButtonModule = _interopRequireDefault(require("./ActionButton.module.scss"));
var _constants = _interopRequireDefault(require("../../constants"));
var _translate = _interopRequireDefault(require("../../translate"));
var _OverlayTrigger = _interopRequireDefault(require("../../OverlayTrigger"));
var _designSystem = require("@talend/design-system");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const LEFT = 'left';
const RIGHT = 'right';
function getIcon({
  icon,
  iconName,
  iconTransform,
  inProgress,
  loading
}) {
  if (inProgress) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
      size: "small"
    }, "icon");
  }
  if (loading) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
      size: "small",
      type: "circle",
      className: (0, _classnames.default)(_ActionButtonModule.default['tc-action-button-skeleton-circle'], 'tc-action-button-skeleton-circle')
    }, "icon-skeleton");
  }
  if (iconName) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.SizedIcon, {
      name: iconName,
      transform: iconTransform,
      size: "M"
    }, "icon");
  }
  if (icon) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
      name: icon,
      transform: iconTransform
    }, "icon");
  }
  return null;
}
getIcon.propTypes = {
  icon: _propTypes.default.string,
  iconTransform: _propTypes.default.string,
  inProgress: _propTypes.default.bool
};
function getLabel({
  hideLabel,
  label,
  loading
}) {
  if (hideLabel) {
    return null;
  }
  if (loading) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
      type: "text",
      size: "medium"
    }, "label-skeleton");
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
    children: label
  }, "label");
}
getLabel.propTypes = {
  label: _propTypes.default.string,
  loading: _propTypes.default.bool,
  hideLabel: _propTypes.default.bool
};
function adjustContentPlacement(icon, label, iconPosition) {
  if (iconPosition === RIGHT) {
    return [label, icon];
  }
  return [icon, label];
}
function getContent(props) {
  return adjustContentPlacement(getIcon(props), getLabel(props), props.iconPosition);
}
function getHandler(func, model, label, rest) {
  return func && (event => func(event, {
    action: {
      label,
      ...rest
    },
    model
  }));
}
function noOp() {}

/**
 * @param {object} props react props
 * @example
 const props = {
	label: 'edit',
	icon: 'fa fa-edit',
	onClick: action('onEdit'),
	tooltipPlacement: 'right',
	hideLabel: true,
	link: true,
};
 <Action {...props} />
 */
function ActionButton(props) {
  const {
    bsStyle,
    buttonRef,
    children,
    inProgress,
    disabled,
    hideLabel,
    label,
    loading,
    download,
    link,
    model,
    onMouseDown = noOp,
    onClick = noOp,
    onMouseEnter,
    onMouseLeave,
    overlayId,
    overlayComponent,
    overlayPlacement,
    overlayRef,
    tooltipPlacement,
    tooltipClassName,
    tooltip,
    tooltipLabel,
    available,
    t,
    ...rest
  } = props;
  if (!available) {
    return null;
  }
  if (loading && !link) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
      type: "button"
    });
  }
  const buttonProps = (0, _getPropsFrom.default)(_reactBootstrap.Button, rest);
  const buttonContent = getContent(props);
  const btnIsDisabled = inProgress || disabled;
  const style = link ? 'link' : bsStyle;
  const rClick = getHandler(onClick, model, label, rest);
  const rMouseDown = getHandler(onMouseDown, model, label, rest);
  const rMouseEnter = getHandler(onMouseEnter, model, label, rest);
  const rMouseLeave = getHandler(onMouseLeave, model, label, rest);
  buttonProps.className = (0, _classnames.default)(buttonProps.className, {
    'btn-icon-only': hideLabel || !label,
    [_ActionButtonModule.default['btn-disabled']]: btnIsDisabled
  });
  let ariaLabel = tooltipLabel || label;
  if (inProgress) {
    ariaLabel = t('ACTION_IN_PROGRESS', {
      defaultValue: '{{label}} (in progress)',
      label: ariaLabel
    });
  }
  if (loading) {
    ariaLabel = t('SKELETON_LOADING', {
      defaultValue: '{{type}} Loading...',
      type: ariaLabel
    });
  }
  const hasPopup = !inProgress && overlayComponent;
  if (hasPopup) {
    buttonProps['aria-haspopup'] = true;
  }
  // enforce security on target="_blank"
  if (buttonProps.target === '_blank') {
    buttonProps.rel = 'noopener noreferrer';
  }
  let btn = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Button, {
    onMouseDown: !overlayComponent ? rMouseDown : null,
    onClick: !overlayComponent ? rClick : null,
    onMouseEnter: !overlayComponent ? rMouseEnter : null,
    onMouseLeave: !overlayComponent ? rMouseLeave : null,
    bsStyle: style,
    disabled: btnIsDisabled,
    role: link ? 'link' : null,
    "aria-label": ariaLabel,
    ref: buttonRef,
    download: download,
    ...buttonProps,
    children: [buttonContent, children]
  });
  if (hasPopup) {
    btn = /*#__PURE__*/(0, _jsxRuntime.jsx)(_OverlayTrigger.default, {
      onClick: rClick,
      onMouseEnter: rMouseEnter,
      onMouseLeave: rMouseLeave,
      overlayRef: overlayRef,
      overlayId: overlayId,
      overlayPlacement: overlayPlacement,
      overlayComponent: props.overlayComponent,
      getComponent: props.getComponent,
      preventScrolling: props.preventScrolling,
      children: btn
    });
  }

  // 2 ways to display the tooltip via props: `hideLabel` and `tooltip`.
  // warning: when `tooltip` is set to false, then no tooltip even if `hideLabel` is set
  const shouldDisplayTooltip = (hideLabel || tooltip || tooltipLabel) && tooltip !== false;
  if (ariaLabel && shouldDisplayTooltip) {
    btn = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipTrigger.default, {
      label: ariaLabel,
      tooltipPlacement: tooltipPlacement,
      className: tooltipClassName,
      children: btn
    });
  }
  return btn;
}
ActionButton.propTypes = {
  ...getIcon.propTypes,
  available: _propTypes.default.bool,
  inProgress: _propTypes.default.bool,
  id: _propTypes.default.string,
  bsStyle: _propTypes.default.string,
  buttonRef: _propTypes.default.func,
  disabled: _propTypes.default.bool,
  download: _propTypes.default.string,
  hideLabel: _propTypes.default.bool,
  iconPosition: _propTypes.default.oneOf([LEFT, RIGHT]),
  label: _propTypes.default.string.isRequired,
  loading: _propTypes.default.bool,
  link: _propTypes.default.bool,
  model: _propTypes.default.object,
  // eslint-disable-line react/forbid-prop-types
  name: _propTypes.default.string,
  onClick: _propTypes.default.func,
  iconName: _propTypes.default.string,
  tooltipPlacement: _OverlayTrigger.default.propTypes.placement,
  t: _propTypes.default.func,
  tooltip: _propTypes.default.bool,
  tooltipLabel: _propTypes.default.string,
  tooltipClassName: _propTypes.default.string
};
ActionButton.defaultProps = {
  available: true,
  bsStyle: 'default',
  tooltipPlacement: 'top',
  inProgress: false,
  loading: false,
  disabled: false,
  t: (0, _translate.default)()
};
ActionButton.displayName = 'ActionButton';
var _default = exports.default = (0, _reactI18next.withTranslation)(_constants.default)(ActionButton);
//# sourceMappingURL=ActionButton.component.js.map