@talend/react-components

Version:
Set of react components.
github.com/Talend/ui/tree/master/packages/components
147 lines (145 loc) • 5.05 kB
JavaScript
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.STATUS = void 0;
exports.Status = Status;
exports.getbsStyleFromStatus = getbsStyleFromStatus;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Actions = _interopRequireDefault(require("../Actions/Actions.component"));
var _CircularProgress = _interopRequireDefault(require("../CircularProgress/CircularProgress.component"));
var _Icon = _interopRequireDefault(require("../Icon"));
var _Skeleton = _interopRequireDefault(require("../Skeleton"));
var _TooltipTrigger = _interopRequireDefault(require("../TooltipTrigger"));
var _StatusModule = _interopRequireDefault(require("./Status.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
 * @param {object} props react props
 * @example
 const status = {
			status: 'Successful',
			label: 'Successful',
			icon: 'fa fa-check',
			actions: [
					{
						label: 'cancel',
						icon: 'fa fa-cancel',
						onClick: action('onCancel'),
					},
					{
						label: 'delete',
						icon: 'fa fa-delete',
						onClick: action('onDelete'),
					}],
	};
 <Status {...status}/>
 */

const STATUS = exports.STATUS = {
  IN_PROGRESS: 'inProgress',
  SUCCESSFUL: 'successful',
  FAILED: 'failed',
  CANCELED: 'canceled',
  WARNING: 'warning',
  SKELETON: 'skeleton'
};
function getbsStyleFromStatus(status) {
  switch (status) {
    case STATUS.IN_PROGRESS:
      return 'info';
    case STATUS.SUCCESSFUL:
      return 'success';
    case STATUS.FAILED:
      return 'danger';
    case STATUS.CANCELED:
      return 'muted';
    case STATUS.WARNING:
      return 'warning';
    case STATUS.SKELETON:
      return 'skeleton';
    default:
      return '';
  }
}
function renderIcon(status, icon, progress) {
  switch (status) {
    case STATUS.IN_PROGRESS:
      if (icon) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
          name: icon
        });
      }
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
        size: "small",
        percent: progress
      });
    case STATUS.SKELETON:
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
        className: (0, _classnames.default)(_StatusModule.default['tc-status-skeleton-item'], 'tc-status-skeleton-item'),
        type: _Skeleton.default.TYPES.circle,
        size: _Skeleton.default.SIZES.small
      });
    default:
      return icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
        name: icon
      });
  }
}
function renderLabel(status, label) {
  if (status === STATUS.SKELETON) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
      className: (0, _classnames.default)(_StatusModule.default['tc-status-skeleton-item'], 'tc-status-skeleton-item'),
      type: _Skeleton.default.TYPES.text,
      size: _Skeleton.default.SIZES.large
    });
  }
  return label;
}
function Status({
  status,
  label,
  icon,
  actions,
  progress,
  tooltip
}) {
  const rootClassnames = (0, _classnames.default)(_StatusModule.default['tc-status'], 'tc-status', {
    [_StatusModule.default.action]: actions && actions.length
  });
  const iconClassnames = (0, _classnames.default)(_StatusModule.default['tc-status-icon'], 'tc-status-icon', _StatusModule.default[getbsStyleFromStatus(status)]);
  const labelClassNames = (0, _classnames.default)(_StatusModule.default['tc-status-label'], 'tc-status-label', _StatusModule.default[getbsStyleFromStatus(status)]);
  const labelText = renderLabel(status, label);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    role: "status",
    className: rootClassnames,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      className: iconClassnames,
      children: renderIcon(status, icon, progress)
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipTrigger.default, {
      label: tooltip || labelText,
      tooltipPlacement: "top",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        className: labelClassNames,
        children: labelText
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.default, {
      actions: actions,
      className: (0, _classnames.default)(_StatusModule.default['tc-status-actions'], 'tc-status-actions')
    })]
  });
}
Status.displayName = 'Status';
Status.propTypes = {
  status: _propTypes.default.oneOf([STATUS.IN_PROGRESS, STATUS.SUCCESSFUL, STATUS.FAILED, STATUS.CANCELED, STATUS.WARNING, STATUS.SKELETON]),
  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]).isRequired,
  icon: _propTypes.default.string,
  actions: _Actions.default.propTypes.actions,
  progress: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
  tooltip: _propTypes.default.string
};
Status.defaultProps = {
  actions: []
};
Status.getBsStyleFromStatus = getbsStyleFromStatus;
//# sourceMappingURL=Status.component.js.map