@talend/react-components/lib/Skeleton/Skeleton.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactI18next = require("react-i18next");
var _Icon = _interopRequireDefault(require("../Icon"));
var _SkeletonModule = _interopRequireDefault(require("./Skeleton.module.scss"));
var _theme = require("../theme");
var _constants = _interopRequireDefault(require("../constants"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const theme = (0, _theme.getTheme)(_SkeletonModule.default);
const TYPES = {
  icon: 'icon',
  text: 'text',
  button: 'button',
  circle: 'circle'
};
const SIZES = {
  xlarge: 'xlarge',
  large: 'large',
  medium: 'medium',
  small: 'small'
};
function getTranslatedType(t, type) {
  switch (type) {
    case TYPES.button:
      return t('SKELETON_TYPE_BUTTON', {
        defaultValue: 'button'
      });
    case TYPES.circle:
      return t('SKELETON_TYPE_CIRCLE', {
        defaultValue: 'circle'
      });
    case TYPES.icon:
      return t('SKELETON_TYPE_ICON', {
        defaultValue: 'icon'
      });
    case TYPES.text:
      return t('SKELETON_TYPE_TEXT', {
        defaultValue: 'text'
      });
    default:
      return type;
  }
}
/**
 * This component show some skeleton stuff
 * @param {object} props the react props
 * @param {string} props.size the wanted size
 * @param {string} props.type the type of skeleton
 * @param {number} props.width width to override size's width
 * @param {number} props.height height to override size's height
 * @param {string} props.className classes to apply on skeleton
 */
function Skeleton({
  heartbeat = true,
  type = TYPES.text,
  size = SIZES.medium,
  width,
  height,
  name,
  className
}) {
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.default);
  const classes = theme('tc-skeleton', `tc-skeleton-${type}`, `tc-skeleton-${type}-${size}`, className, {
    'tc-skeleton-heartbeat': heartbeat
  });
  const ariaLabel = t('SKELETON_LOADING', {
    defaultValue: '{{type}} Loading...',
    type: getTranslatedType(t, type)
  });
  if (type === 'icon' && name) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
      className: classes,
      name: name,
      "aria-label": ariaLabel
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
    style: {
      width,
      height
    },
    className: classes,
    "aria-label": ariaLabel
  });
}
Skeleton.displayName = 'Skeleton';
Skeleton.TYPES = TYPES;
Skeleton.SIZES = SIZES;
var _default = exports.default = Skeleton;
//# sourceMappingURL=Skeleton.component.js.map