storybook-addon-react-docgen/dist/Components/PropVal.js

A storybook addon to display react docgen info.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

var styles = {
  "default": {
    color: '#1EA7FD',
    fontWeight: 700,
    wordBreak: 'break-word'
  },
  empty: {
    color: '#444'
  }
};

var indent = function indent(breakIntoNewLines, level, isBlock) {
  return breakIntoNewLines && /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("span", {
    style: {
      width: level * 10,
      display: 'inline-block'
    }
  }), !isBlock && '  ');
};

var PreviewArray = function PreviewArray(_ref) {
  var val = _ref.val,
      level = _ref.level,
      maxPropArrayLength = _ref.maxPropArrayLength,
      maxPropStringLength = _ref.maxPropStringLength,
      maxPropsIntoLine = _ref.maxPropsIntoLine;
  var items = {};
  var breakIntoNewLines = val.length > maxPropsIntoLine;
  val.slice(0, maxPropArrayLength).forEach(function (item, i) {
    items["n".concat(i)] = /*#__PURE__*/_react["default"].createElement("span", null, indent(breakIntoNewLines, level), /*#__PURE__*/_react["default"].createElement(PropValue, {
      val: item,
      level: level + 1,
      maxPropStringLength: maxPropStringLength,
      maxPropsIntoLine: maxPropsIntoLine
    }));
    items["c".concat(i)] = ',';
  });

  if (val.length > maxPropArrayLength) {
    items.last = /*#__PURE__*/_react["default"].createElement("span", null, indent(breakIntoNewLines, level), "\u2026");
  } else {
    delete items["c".concat(val.length - 1)];
  }

  return /*#__PURE__*/_react["default"].createElement("span", {
    style: styles["default"]
  }, "[", Object.values(items), indent(breakIntoNewLines, level, true), "]");
};

var PreviewObject = function PreviewObject(_ref2) {
  var val = _ref2.val,
      level = _ref2.level,
      maxPropObjectKeys = _ref2.maxPropObjectKeys,
      maxPropStringLength = _ref2.maxPropStringLength,
      maxPropsIntoLine = _ref2.maxPropsIntoLine;
  var names = Object.keys(val);
  var items = {};
  var breakIntoNewLines = names.length > maxPropsIntoLine || Object.values(val).find(function (v) {
    return _typeof(v) === 'object';
  });
  names.slice(0, maxPropObjectKeys).forEach(function (name, i) {
    items["k".concat(i)] = /*#__PURE__*/_react["default"].createElement("span", null, indent(breakIntoNewLines, level), /*#__PURE__*/_react["default"].createElement("span", {
      style: styles["default"]
    }, name));
    items["c".concat(i)] = ': ';
    items["v".concat(i)] = /*#__PURE__*/_react["default"].createElement(PropValue, {
      val: val[name],
      level: level + 1,
      maxPropStringLength: maxPropStringLength,
      maxPropsIntoLine: maxPropsIntoLine
    });
    items["m".concat(i)] = ',';
  });

  if (names.length > maxPropObjectKeys) {
    items.rest = /*#__PURE__*/_react["default"].createElement("span", null, indent(breakIntoNewLines, level), "\u2026");
  } else {
    delete items["m".concat(names.length - 1)];
  }

  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, '{ ', /*#__PURE__*/_react["default"].createElement("span", {
    style: styles["default"]
  }, Object.values(items), indent(breakIntoNewLines, level, true)), ' }');
};

var PropValue = function PropValue(props) {
  var _props$level = props.level,
      level = _props$level === void 0 ? 1 : _props$level,
      _props$maxPropObjectK = props.maxPropObjectKeys,
      maxPropObjectKeys = _props$maxPropObjectK === void 0 ? 3 : _props$maxPropObjectK,
      _props$maxPropArrayLe = props.maxPropArrayLength,
      maxPropArrayLength = _props$maxPropArrayLe === void 0 ? 3 : _props$maxPropArrayLe,
      _props$maxPropStringL = props.maxPropStringLength,
      maxPropStringLength = _props$maxPropStringL === void 0 ? 50 : _props$maxPropStringL,
      _props$maxPropsIntoLi = props.maxPropsIntoLine,
      maxPropsIntoLine = _props$maxPropsIntoLi === void 0 ? 3 : _props$maxPropsIntoLi;
  var val = props.val;
  var content = null;

  if (typeof val === 'number') {
    content = /*#__PURE__*/_react["default"].createElement("span", {
      style: styles["default"]
    }, val);
  } else if (typeof val === 'string') {
    if (val.length > maxPropStringLength) {
      val = "".concat(val.slice(0, maxPropStringLength), "\u2026");
    }

    if (level > 1) {
      val = "'".concat(val, "'");
    }

    content = /*#__PURE__*/_react["default"].createElement("span", {
      style: styles["default"]
    }, val);
  } else if (typeof val === 'boolean') {
    content = /*#__PURE__*/_react["default"].createElement("span", {
      style: styles["default"]
    }, "".concat(val));
  } else if (Array.isArray(val)) {
    content = /*#__PURE__*/_react["default"].createElement(PreviewArray, {
      val: val,
      level: level,
      maxPropArrayLength: maxPropArrayLength,
      maxPropStringLength: maxPropStringLength,
      maxPropsIntoLine: maxPropsIntoLine
    });
  } else if (typeof val === 'function') {
    content = /*#__PURE__*/_react["default"].createElement("span", {
      style: styles["default"]
    }, val.name || 'anonymous');
  } else if (!val) {
    content = /*#__PURE__*/_react["default"].createElement("span", {
      style: styles["default"]
    }, "".concat(val));
  } else if (_typeof(val) !== 'object') {
    content = /*#__PURE__*/_react["default"].createElement("span", null, "\u2026");
  } else if (_react["default"].isValidElement(val)) {
    // @ts-expect-error
    var name = val.displayName || val.name || val;
    content = /*#__PURE__*/_react["default"].createElement("span", {
      style: styles["default"]
    }, "<".concat(name, " />"));
  } else {
    content = /*#__PURE__*/_react["default"].createElement(PreviewObject, {
      val: val,
      level: level,
      maxPropObjectKeys: maxPropObjectKeys,
      maxPropStringLength: maxPropStringLength,
      maxPropsIntoLine: maxPropsIntoLine
    });
  }

  return content;
};

var _default = PropValue;
exports["default"] = _default;
module.exports = exports.default;