@evg-b/evg-tools/dist/PropDoc/PropDoc.js

EVG-TOOLS, tools for doc EVG-UI.

import _extends from '@babel/runtime/helpers/extends';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@evg-b/evg-ui';
import classNames from 'classnames';

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; }
var styles = {
  base: {
    backgroundColor: '#FFFFFF',
    '-webkit-overflow-scrolling': 'touch',
    display: 'inline-flex',
    width: '100%',
    color: '#1d1d1f'
  },
  table: {
    overflow: 'hidden',
    overflowX: 'auto',
    display: 'block',
    width: '100%',
    borderCollapse: 'collapse',
    wordBreak: 'normal',
    textAlign: 'left',
    '& td,& th': {
      border: 0
    },
    '& tr': {
      backgroundColor: '#FFFFFF !important'
    }
  },
  Tr: {
    borderTop: 0,
    borderBottom: '1px solid rgba(0,0,0,.12)'
  },
  TrHeaderTh: {
    color: '#7B1FA2',
    '&>th': {
      height: 56,
      paddingRight: 16,
      paddingLeft: 16
    }
  },
  TrItemTh: {
    '&>td': {
      height: 52,
      paddingRight: 16,
      paddingLeft: 16,
      '&:nth-child(1)': {
        width: '15%'
      },
      '&:nth-child(2)': {
        whiteSpace: 'pre-line',
        maxWidth: '28%',
        color: '#7B1FA2',
        fontWeight: 500
      },
      '&:nth-child(3)': {
        width: '10%'
      },
      '&:nth-child(4)': {}
    }
  }
};

var ValueDetectArr = function ValueDetectArr(value) {
  if (Array.isArray(value)) {
    return value.reduce(function (mem, val, index, arr) {
      if (Array.isArray(val.value)) {
        return mem + "".concat(val.name, "[\n").concat(ValueDetectArr(val.value), "\n] or ");
      } else {
        return mem + "".concat(val.value || val.name).concat(index === arr.length - 1 ? '' : ',\n ');
      }
    }, "");
  } else {
    return value;
  }
};

var PropDoc = /*#__PURE__*/React.forwardRef(function PropDoc(props, ref) {
  var classes = props.classes;
      props.className;
      props.children;
      var patient = props.patient,
      full = props.full,
      otherProps = _objectWithoutProperties(props, ["classes", "className", "children", "patient", "full"]);

  var prop = function prop(_ref) {
    var name = _ref.name,
        type = _ref.type,
        defaultValue = _ref.defaultValue,
        description = _ref.description;
    if (!type) return null; // defender wrong JSON

    var values;

    if (type.value) {
      if (type.name === 'arrayOf') {
        values = "[".concat(type.value.name, "]");
      } else {
        values = ValueDetectArr(type.value);
      }
    } else {
      values = type.name;
    }

    return /*#__PURE__*/React.createElement("tr", {
      key: name,
      className: classNames(classes.Tr, classes.TrItemTh)
    }, /*#__PURE__*/React.createElement("td", null, name), /*#__PURE__*/React.createElement("td", null, values), /*#__PURE__*/React.createElement("td", null, defaultValue ? defaultValue.value : null), /*#__PURE__*/React.createElement("td", null, description));
  };

  var Description = function Description() {
    return /*#__PURE__*/React.createElement("p", {
      style: {
        color: '#1d1d1f',
        fontSize: '20px'
      }
    }, patient.description);
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, full && Description(), /*#__PURE__*/React.createElement("div", _extends({
    ref: ref,
    className: classes.base
  }, otherProps), /*#__PURE__*/React.createElement("table", {
    className: classes.table
  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", {
    className: classNames(classes.Tr, classes.TrHeaderTh)
  }, /*#__PURE__*/React.createElement("th", null, "Name"), /*#__PURE__*/React.createElement("th", null, "Type"), /*#__PURE__*/React.createElement("th", null, "Default"), /*#__PURE__*/React.createElement("th", null, "Description"))), /*#__PURE__*/React.createElement("tbody", null, patient.props && Object.entries(patient.props).map(function (_ref2) {
    var _ref3 = _slicedToArray(_ref2, 2),
        name = _ref3[0],
        p = _ref3[1];

    return prop(_objectSpread({
      name: name
    }, p));
  })))));
});
PropDoc.propTypes = {
  /**
  * Это контент между открывающим и закрывающим тегом компонента.
  */
  children: PropTypes.node,

  /**
   * Объект содержит jss стили компонента.
  */
  classes: PropTypes.object,

  /**
   * Чтобы указать CSS классы, используйте этот атрибут.
  */
  className: PropTypes.string,

  /**
   * JSON объект с информацией о props компонента.
  */
  patient: PropTypes.object,

  /**
   * true - показывает description.
  */
  full: PropTypes.bool
};
PropDoc.defaultProps = {
  patient: {},
  full: false
};
PropDoc.displayName = 'PropDocEVG';
var PropDoc$1 = withStyles(styles)(PropDoc);

export default PropDoc$1;