@wix/design-system/dist/cjs/EmptyState/EmptyState.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.defaultEmptyStateProps = exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _EmptyStateSt = require("./EmptyState.st.css.js");
var _Heading = _interopRequireDefault(require("../Heading"));
var _Text = _interopRequireDefault(require("../Text"));
var _deprecationLog = _interopRequireDefault(require("../utils/deprecationLog"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/EmptyState/EmptyState.tsx";
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 defaultEmptyStateProps = exports.defaultEmptyStateProps = {
  skin: 'section',
  image: null,
  children: null,
  align: 'center'
};

/**
 * Representing a state of an empty page, section, table, etc.
 */
var EmptyState = _ref => {
  var {
    theme,
    skin,
    image = defaultEmptyStateProps.image,
    children = defaultEmptyStateProps.children,
    align = defaultEmptyStateProps.align,
    title,
    subtitle,
    classNames: classNamesProp,
    className,
    dataHook
  } = _ref;
  var mergedSkin = skin || theme || defaultEmptyStateProps.skin;
  (0, _react.useEffect)(() => {
    if (theme) {
      (0, _deprecationLog.default)('<EmptyState/> - prop "theme" is deprecated and will be removed in next major release, please use "skin" property instead.');
    }
  }, [theme]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _EmptyStateSt.st)(_EmptyStateSt.classes.root, {
      skin: mergedSkin,
      align
    }, className),
    "data-hook": dataHook,
    "data-skin": mergedSkin,
    "data-align": align,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 43,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _EmptyStateSt.classes.container,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 49,
      columnNumber: 7
    }
  }, image && /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _EmptyStateSt.st)(_EmptyStateSt.classes.imageContainer, {}, classNamesProp && classNamesProp.imageContainer || ''),
    "data-hook": "empty-state-image-container",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 51,
      columnNumber: 11
    }
  }, typeof image === 'string' ? /*#__PURE__*/_react.default.createElement("img", {
    className: _EmptyStateSt.classes.imageElement,
    src: image,
    "data-hook": "image-element",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 60,
      columnNumber: 15
    }
  }) : (/*#__PURE__*/_react.default.cloneElement(image, {
    'data-hook': 'image-node'
  }))), title && /*#__PURE__*/_react.default.createElement("div", {
    className: _EmptyStateSt.classes.titleContainer,
    "data-hook": "empty-state-title-container",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 74,
      columnNumber: 11
    }
  }, mergedSkin === 'section' ? /*#__PURE__*/_react.default.createElement(_Text.default, {
    weight: "bold",
    className: _EmptyStateSt.classes.sectionTitle,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 79,
      columnNumber: 15
    }
  }, title) : /*#__PURE__*/_react.default.createElement(_Heading.default, {
    className: _EmptyStateSt.classes.title,
    size: "medium",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 83,
      columnNumber: 15
    }
  }, title)), subtitle && /*#__PURE__*/_react.default.createElement("div", {
    className: _EmptyStateSt.classes.subtitleContainer,
    "data-hook": "empty-state-subtitle-container",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 91,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
    className: _EmptyStateSt.classes.subtitle,
    size: "small",
    secondary: true,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 95,
      columnNumber: 13
    }
  }, subtitle)), children && /*#__PURE__*/_react.default.createElement("div", {
    className: _EmptyStateSt.classes.childrenContainer,
    "data-hook": "empty-state-children-container",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 102,
      columnNumber: 11
    }
  }, children)));
};
EmptyState.displayName = 'EmptyState';
EmptyState.propTypes = {
  skin: _propTypes.default.oneOf(['page', 'page-no-border', 'section']),
  theme: _propTypes.default.oneOf(['page', 'page-no-border', 'section']),
  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
  subtitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
  image: _propTypes.default.node,
  classNames: _propTypes.default.shape({
    imageContainer: _propTypes.default.string
  }),
  className: _propTypes.default.string,
  children: _propTypes.default.node,
  dataHook: _propTypes.default.string,
  align: _propTypes.default.oneOf(['start', 'center', 'end'])
};
var _default = exports.default = EmptyState;
//# sourceMappingURL=EmptyState.js.map