wix-style-react/dist/src/Skeleton/Skeleton.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _SkeletonSt = require("./Skeleton.st.css");
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Skeleton/Skeleton.js";
/**
 * Skeleton is a “placeholder” component.
 * Used for filling up screen usually for when some async operation is ongoing.
 */
class Skeleton extends _react.default.PureComponent {
  render() {
    var {
      dataHook,
      content,
      alignment,
      spacing,
      className
    } = this.props;
    return /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": dataHook,
      "data-alignment": alignment,
      "data-spacing": spacing,
      className: (0, _SkeletonSt.st)(_SkeletonSt.classes.root, {
        alignment,
        spacing
      }, className),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 14,
        columnNumber: 7
      }
    }, content.map((_ref, key) => {
      var {
        type,
        size
      } = _ref;
      return /*#__PURE__*/_react.default.createElement("div", {
        key: key,
        "data-hook": _constants.dataHooks.line,
        className: (0, _SkeletonSt.st)(_SkeletonSt.classes.line, {
          alignment,
          spacing
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 21,
          columnNumber: 11
        }
      }, /*#__PURE__*/_react.default.createElement("div", {
        "data-hook": _constants.dataHooks.chunk,
        "data-type": type,
        "data-size": size,
        className: (0, _SkeletonSt.st)(_SkeletonSt.classes.chunk, {
          size
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 26,
          columnNumber: 13
        }
      }));
    }));
  }
}
Skeleton.displayName = 'Skeleton';
Skeleton.propTypes = {
  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook: _propTypes.default.string,
  /** A single CSS class name to be appended to the root element. */
  className: _propTypes.default.string,
  /** The type of the skeleton */
  content: _propTypes.default.arrayOf(_propTypes.default.shape({
    type: _propTypes.default.oneOf(['line']).isRequired,
    size: _propTypes.default.oneOf(['small', 'medium', 'large', 'full']).isRequired
  })).isRequired,
  /** The position of the indicating progress line */
  alignment: _propTypes.default.oneOf(['start', 'middle']),
  /** The space between the first and second lines */
  spacing: _propTypes.default.oneOf(['small', 'medium', 'large'])
};
Skeleton.defaultProps = {
  alignment: 'start',
  spacing: 'medium',
  content: [{
    type: 'line',
    size: 'small'
  }]
};
var _default = exports.default = Skeleton;
//# sourceMappingURL=Skeleton.js.map