rmwc/Base/utils/DocumentComponent.js

A thin React wrapper for Material Design (Web) Components

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DocumentComponent = undefined;

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

var _react = require('react');

var React = _interopRequireWildcard(_react);

var _docgen = require('../../docs/docgen');

var _docgen2 = _interopRequireDefault(_docgen);

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

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

var flatDocs = Object.values(_docgen2.default).reduce(function (acc, val) {
  return acc.concat(val);
}, []);

var findDocDef = function findDocDef(name) {
  return flatDocs.find(function (v) {
    return v.displayName === name;
  });
};

var DocumentComponent = exports.DocumentComponent = function DocumentComponent(_ref) {
  var displayName = _ref.displayName;

  var docs = findDocDef(displayName);

  return React.createElement(
    'div',
    { className: 'document-component' },
    React.createElement(
      'h2',
      null,
      displayName
    ),
    docs && !!docs.description && React.createElement(
      'p',
      null,
      docs.description
    ),
    docs && docs.props && React.createElement(
      'div',
      null,
      React.createElement(
        'h3',
        null,
        'Props'
      ),
      React.createElement(
        'table',
        null,
        React.createElement(
          'thead',
          null,
          React.createElement(
            'tr',
            null,
            React.createElement(
              'th',
              null,
              'Name'
            ),
            React.createElement(
              'th',
              null,
              'Type'
            ),
            React.createElement(
              'th',
              null,
              'Default'
            ),
            React.createElement(
              'th',
              null,
              'Description'
            )
          )
        ),
        React.createElement(
          'tbody',
          null,
          Object.entries(docs.props).map(function (_ref2, i) {
            var _ref3 = _slicedToArray(_ref2, 2),
                propName = _ref3[0],
                prop = _ref3[1];

            return React.createElement(
              'tr',
              { key: i },
              React.createElement(
                'td',
                { className: prop.required ? 'required' : '' },
                React.createElement(
                  'code',
                  null,
                  propName
                )
              ),
              React.createElement(
                'td',
                null,
                React.createElement(
                  'code',
                  null,
                  prop.flowType && (prop.flowType.raw || prop.flowType.name || '')
                )
              ),
              React.createElement(
                'td',
                null,
                prop.defaultValue ? React.createElement(
                  'code',
                  null,
                  prop.defaultValue.value
                ) : ''
              ),
              React.createElement(
                'td',
                null,
                prop.description || ''
              )
            );
          })
        )
      )
    )
  );
};