vue-styleguidist/lib/client/rsg-components/Props/PropsRenderer.js

Vue components style guide generator

import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import "core-js/modules/es.symbol.js";
import "core-js/modules/es.symbol.description.js";
import "core-js/modules/es.array.concat.js";
import "core-js/modules/es.function.name.js";
import "core-js/modules/es.array.iterator.js";
import "core-js/modules/es.object.to-string.js";
import "core-js/modules/web.dom-collections.iterator.js";
import "core-js/modules/es.array.reduce.js";
import "core-js/modules/es.array.map.js";
import React from 'react';
import PropTypes from 'prop-types';
import Styled from 'rsg-components/Styled';
import Arguments from 'rsg-components/Arguments';
import Argument from 'rsg-components/Argument';
import Code from 'rsg-components/Code';
import JsDoc from 'rsg-components/JsDoc';
import Markdown from 'rsg-components/Markdown';
import Name from 'rsg-components/Name';
import Table from 'rsg-components/Table';
import getOriginColumn from 'rsg-components/OriginColumn';
import styles from '../../utils/propStyles';
import renderDefaultHoc from './renderDefault';
import renderTypeBox from './renderType';
function renderDescription(classes) {
  return function renderDesc(prop) {
    var description = prop.description,
      _prop$tags = prop.tags,
      tags = _prop$tags === void 0 ? {} : _prop$tags;
    var args = [].concat(_toConsumableArray(tags.arg || []), _toConsumableArray(tags.argument || []), _toConsumableArray(tags.param || []));
    var returnDocumentation = tags["return"] && tags["return"][0] || tags.returns && tags.returns[0];
    return /*#__PURE__*/React.createElement("div", null, description && /*#__PURE__*/React.createElement("div", {
      className: classes.descriptionWrapper
    }, /*#__PURE__*/React.createElement(Markdown, {
      text: description
    })), /*#__PURE__*/React.createElement(JsDoc, tags), args.length > 0 && /*#__PURE__*/React.createElement(Arguments, {
      args: args,
      heading: true
    }), returnDocumentation && /*#__PURE__*/React.createElement(Argument, _extends({}, returnDocumentation, {
      returns: true
    })), /*#__PURE__*/React.createElement("div", {
      className: classes.type
    }, renderTypeBox(prop, classes)));
  };
}
function renderName(prop) {
  var name = prop.name,
    _prop$tags2 = prop.tags,
    tags = _prop$tags2 === void 0 ? {} : _prop$tags2;
  return /*#__PURE__*/React.createElement(Name, {
    deprecated: !!tags.deprecated
  }, name);
}
export function getRowKey(row) {
  return row.name;
}
function renderValuesHoc(classes) {
  return function renderValues(prop) {
    return /*#__PURE__*/React.createElement("p", {
      className: classes.values
    }, prop.values ? prop.values.map(function (v) {
      return /*#__PURE__*/React.createElement(Code, {
        key: v
      }, v);
    }).reduce(function (prev, curr) {
      return [prev, ', ', curr];
    }) : '-');
  };
}
export var columns = function columns(props, classes) {
  return [{
    caption: 'Prop name',
    render: renderName,
    className: classes.name
  }, {
    caption: 'Description',
    render: renderDescription(classes),
    className: classes.description
  }].concat(_toConsumableArray(props.some(function (p) {
    return p.values;
  }) ? [{
    caption: 'Values',
    render: renderValuesHoc(classes)
  }] : []), [{
    caption: 'Default',
    render: renderDefaultHoc(classes)
  }], _toConsumableArray(getOriginColumn(props)));
};
function PropsRenderer(_ref) {
  var props = _ref.props,
    classes = _ref.classes;
  return /*#__PURE__*/React.createElement(Table, {
    columns: columns(props, classes),
    rows: props,
    getRowKey: getRowKey
  });
}
PropsRenderer.propTypes = {
  props: PropTypes.array.isRequired,
  classes: PropTypes.object.isRequired
};
export default Styled(styles)(PropsRenderer);