@atlaskit/skeleton

Version:
A skeleton acts as a placeholder for content, usually while the content loads.
73 lines (70 loc) • 3.94 kB
JavaScript
/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("./index.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
var _fg = require("@atlaskit/platform-feature-flags/fg");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var shimmerKeyframes = null;
var skeletonStyles = null;
var activeShimmerStyles = null;

/**
 * `useLayoutEffect` is being used in SSR safe form. On the server, this work doesn’t need to run.
 * `useEffect` is used in-place, because `useEffect` is not run on the server and it matches types
 * which makes things simpler than doing an `isServer` check or a `null` check.
 *
 * @see https://hello.atlassian.net/wiki/spaces/DST/pages/2081696628/DSTDACI-010+-+Interaction+Tracing+hooks+in+DS+components
 */
var useLayoutEffect = typeof window === 'undefined' ? _react.useEffect : _react.useLayoutEffect;

/**
 * __Skeleton__
 *
 * A skeleton acts as a placeholder for content, usually while the content loads.
 *
 * - [Examples](https://atlassian.design/components/skeleton/examples)
 * - [Code](https://atlassian.design/components/skeleton/code)
 */
var Skeleton = function Skeleton(_ref) {
  var width = _ref.width,
    height = _ref.height,
    _ref$borderRadius = _ref.borderRadius,
    borderRadius = _ref$borderRadius === void 0 ? "var(--ds-radius-small, 4px)" : _ref$borderRadius,
    color = _ref.color,
    ShimmeringEndColor = _ref.ShimmeringEndColor,
    _ref$isShimmering = _ref.isShimmering,
    isShimmering = _ref$isShimmering === void 0 ? false : _ref$isShimmering,
    groupName = _ref.groupName,
    interactionName = _ref.interactionName,
    testId = _ref.testId;
  var groupDataAttribute = groupName && "data-".concat(groupName);
  var context = (0, _react.useContext)(_interactionContext.default);
  useLayoutEffect(function () {
    if (context != null && (0, _fg.fg)('platform-dst-skeleton-ufo-hold')) {
      return context.hold(interactionName);
    }
  }, [context, interactionName]);
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    "data-testid": testId,
    style: {
      width: width,
      height: height,
      borderRadius: borderRadius,
      backgroundColor: color,
      // Override the keyframes if both colors are provided, otherwise use the CSS variable fallbacks in our keyframes
      '--ds-skeleton-from-color': color && ShimmeringEndColor ? color : undefined,
      '--ds-skeleton-to-color': color && ShimmeringEndColor ? ShimmeringEndColor : undefined
    }
  }, groupDataAttribute && (0, _defineProperty2.default)({}, groupDataAttribute, 'true'), {
    className: (0, _runtime.ax)(["_7hjf1yy8 _5sag12o8 _tip812c5 _1pglp3kn _bfhkizff", isShimmering && "", isShimmering && "_j7hq1532"])
  }));
};
var _default = exports.default = Skeleton;