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

A storybook addon to display react docgen info.

"use strict";

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

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

var _storybookPrettyProps = _interopRequireDefault(require("storybook-pretty-props"));

var _PropVal = _interopRequireDefault(require("./PropVal"));

var _utils = require("./utils");

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var cell = {
  paddingRight: 20,
  paddingTop: 15,
  paddingBottom: 15,
  verticalAlign: 'top',
  border: 'none'
};
var styles = {
  table: {
    width: '100%',
    margin: '2rem 0',
    borderCollapse: 'collapse'
  },
  header: {
    paddingRight: 20,
    paddingBottom: 10,
    textAlign: 'left',
    fontWeight: 'bold',
    fontSize: 14,
    whiteSpace: 'nowrap',
    border: 'none',
    borderBottom: '1px solid #ccc'
  },
  property: _objectSpread(_objectSpread({}, cell), {}, {
    fontWeight: 500,
    color: '#FF4400'
  }),
  propType: _objectSpread(_objectSpread({}, cell), {}, {
    fontWeight: 500,
    maxWidth: '150px',
    overflow: 'auto',
    color: '#66BF3C'
  }),
  required: _objectSpread({}, cell),
  defaultValue: _objectSpread({}, cell),
  description: _objectSpread({}, cell)
};

var multiLineText = function multiLineText(input) {
  if (!input) {
    return input;
  }

  var text = String(input);
  var arrayOfText = text.split(/\r?\n|\r/g);
  var isSingleLine = arrayOfText.length < 2;

  if (isSingleLine) {
    return text;
  }

  return arrayOfText.map(function (lineOfText, i) {
    return (
      /*#__PURE__*/
      // eslint-disable-next-line react/no-array-index-key
      _react["default"].createElement("span", {
        key: "".concat(lineOfText, ".").concat(i)
      }, i > 0 && /*#__PURE__*/_react["default"].createElement("br", null), " ", lineOfText)
    );
  });
};

exports.multiLineText = multiLineText;

var determineIncludedPropTypes = function determineIncludedPropTypes(propDefinitions, excludedPropTypes, type) {
  if (excludedPropTypes.length === 0) {
    return propDefinitions;
  }

  var name = (0, _utils.getName)(type);
  return propDefinitions.filter(function (propDefinition) {
    var propertyName = propDefinition.property;
    var propertyNameAbsolute = "".concat(name, ".").concat(propertyName);
    return !(excludedPropTypes.includes(propertyName) || excludedPropTypes.includes(propertyNameAbsolute));
  });
};

var PropTable = function PropTable(props) {
  var type = props.type,
      maxPropObjectKeys = props.maxPropObjectKeys,
      maxPropArrayLength = props.maxPropArrayLength,
      maxPropStringLength = props.maxPropStringLength,
      _props$propDefinition = props.propDefinitions,
      propDefinitions = _props$propDefinition === void 0 ? [] : _props$propDefinition,
      _props$excludedPropTy = props.excludedPropTypes,
      excludedPropTypes = _props$excludedPropTy === void 0 ? [] : _props$excludedPropTy;

  if (!type) {
    return null;
  }

  var includedPropDefinitions = determineIncludedPropTypes(propDefinitions, excludedPropTypes, type);

  if (includedPropDefinitions.length === 0) {
    return /*#__PURE__*/_react["default"].createElement("small", null, "No propTypes defined!");
  }

  var propValueProps = {
    maxPropObjectKeys: maxPropObjectKeys,
    maxPropArrayLength: maxPropArrayLength,
    maxPropStringLength: maxPropStringLength
  };
  return /*#__PURE__*/_react["default"].createElement("table", {
    style: styles.table
  }, /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("th", {
    style: styles.header
  }, "property"), /*#__PURE__*/_react["default"].createElement("th", {
    style: styles.header
  }, "propType"), /*#__PURE__*/_react["default"].createElement("th", {
    style: styles.header
  }, "required"), /*#__PURE__*/_react["default"].createElement("th", {
    style: styles.header
  }, "default"), /*#__PURE__*/_react["default"].createElement("th", {
    style: styles.header
  }, "description"))), /*#__PURE__*/_react["default"].createElement("tbody", null, includedPropDefinitions.map(function (row) {
    return /*#__PURE__*/_react["default"].createElement("tr", {
      key: row.property
    }, /*#__PURE__*/_react["default"].createElement("td", {
      style: styles.property
    }, row.property), /*#__PURE__*/_react["default"].createElement("td", {
      style: styles.propType
    }, /*#__PURE__*/_react["default"].createElement(_storybookPrettyProps["default"], {
      propType: row.propType
    })), /*#__PURE__*/_react["default"].createElement("td", {
      style: styles.required
    }, row.required ? 'yes' : '-'), /*#__PURE__*/_react["default"].createElement("td", {
      style: styles.defaultValue
    }, row.defaultValue === undefined ? '-' : /*#__PURE__*/_react["default"].createElement(_PropVal["default"], _extends({
      val: row.defaultValue
    }, propValueProps))), /*#__PURE__*/_react["default"].createElement("td", {
      style: styles.description
    }, multiLineText(row.description)));
  })));
};

var _default = PropTable;
exports["default"] = _default;