react-native-ui-lib/src/helpers/DocsGenerator.js

[](https://travis-ci.org/wix/react-native-ui-lib) [](https://www.npmjs.com/package/react-native-ui-lib) [![NPM Down

import React from 'react';
import _ from 'lodash';

const TAB = '    ';
const LINE_BREAK = '\n';

export function extractComponentInfo(instance) {
  const componentName = instance.constructor.displayName;
  const defaultProps = instance.constructor.defaultProps || {};
  const props = instance.props || {};
  return {componentName, defaultProps, props};
}

export function generateSnippet({componentName, defaultProps, props}) {
  let snippet = `<${componentName}`;

  _.forEach(props, (value, key) => {
    if (key === 'children') {
      return;
    }
    let formattedValue = `{${value}}`;
    if (_.isObject(value)) {
      formattedValue = `{${JSON.stringify(value)}}`;
    } else if (_.isString(value)) {
      formattedValue = `"${value}"`;
    } else if (_.isBoolean(value) && value === true) {
      formattedValue = '';
    }

    const hasEmptyValue = _.isUndefined(value) || (_.isObject(value) && _.isEmpty(value));
    const hasDefaultValue = value == defaultProps[key]; // eslint-disable-line
    if (!hasEmptyValue && !hasDefaultValue) {
      snippet += `${LINE_BREAK}${TAB}${key}`;
      if (formattedValue) {
        snippet += `=${formattedValue}`;
      }
    }
  });

  if (props.children) {
    const childrenSnippets = React.Children.map(props.children, (child) => {
      if (_.get(child, 'type.displayName')) {
        const childSnippet = TAB + generateSnippet({
          componentName: child.type.displayName,
          props: child.props || {},
          defaultProps: child.type.defaultProps || {},
        });
        return childSnippet;
      }
      if (typeof child === 'string') {
        return child;
      }
    });
    snippet += `>${LINE_BREAK}${childrenSnippets.join(LINE_BREAK)}${LINE_BREAK}</${componentName}>`;
  } else {
    snippet += '/>';
  }
  return snippet;
}