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

EVG-TOOLS, tools for doc EVG-UI.

import _extends from '@babel/runtime/helpers/extends';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React, { useRef, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { withStyles, IconButton, Tooltip, Loader, Scroll } from '@evg-b/evg-ui';
import classNames from 'classnames';
import { Code } from '@evg-b/evg-icons';
import { PrismLight } from 'react-syntax-highlighter';
import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
import SyntaxStyle from 'react-syntax-highlighter/dist/esm/styles/prism/okaidia';

PrismLight.registerLanguage('jsx', jsx);
var styles = {
  base: {
    overflow: 'hidden',
    display: 'flex',
    flexDirection: 'column',
    width: '100%',
    borderRadius: '10px',
    border: '1px solid rgba(0,0,0,.1)'
  },
  header: {
    height: '80px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: '0 20px',
    fontSize: '1rem'
  },
  headerLeft: {},
  headerRight: {
    fontSize: '1rem'
  },
  body: {
    backgroundColor: 'rgba(0,0,0,.05)'
  },
  panelDemo: {
    display: 'flex',
    justifyContent: 'center',
    padding: '20px'
  },
  panelCode: {
    // userSelect: 'auto',
    width: '100%',
    backgroundColor: '#272822'
  },
  styleCodeFix: {
    display: 'inline-block'
  }
};
var CodeExample = /*#__PURE__*/React.forwardRef(function CodeExample(props, ref) {
  var classes = props.classes;
      props.className;
      props.children;
      var title = props.title,
      demo = props.demo,
      snippet = props.snippet;
      props.language;
      var otherProps = _objectWithoutProperties(props, ["classes", "className", "children", "title", "demo", "snippet", "language"]);

  var CodeExample_ref = useRef();
  CodeExample_ref = ref || CodeExample_ref;
  var observer = useRef();

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      openCode = _useState2[0],
      setOpenCode = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      mountNode = _useState4[0],
      setMountNode = _useState4[1];

  var Syntax_ref = useRef();
  var btnCode_ref = useRef();

  var snippetPanel = function snippetPanel(snippet) {
    return /*#__PURE__*/React.createElement("div", {
      className: classNames(classes.panelCode)
    }, /*#__PURE__*/React.createElement(Scroll, {
      autoHide: false,
      style: {
        maxHeight: 600
      },
      ref: Syntax_ref,
      color: "#FFFFFF"
    }, /*#__PURE__*/React.createElement(PrismLight, {
      className: classes.styleCodeFix,
      language: "jsx",
      style: SyntaxStyle,
      customStyle: {
        margin: 0,
        fontSize: '.8em'
      }
    }, snippet.trim())));
  };

  useEffect(function () {
    if (!observer.current) {
      observer.current = new IntersectionObserver(function (_ref) {
        var _ref2 = _slicedToArray(_ref, 1),
            entries = _ref2[0];

        entries.isIntersecting ? setMountNode(true) : null;
      });
      observer.current.observe(CodeExample_ref.current);
    }

    return function () {
      return observer.current.disconnect();
    };
  }, []);
  return /*#__PURE__*/React.createElement("div", _extends({
    className: classes.base,
    ref: CodeExample_ref
  }, otherProps), /*#__PURE__*/React.createElement("div", {
    className: classes.header
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.headerLeft
  }, title), /*#__PURE__*/React.createElement("div", {
    className: classes.headerRight
  }, /*#__PURE__*/React.createElement(IconButton, {
    ref: btnCode_ref,
    onClick: function onClick() {
      return setOpenCode(function (prev) {
        return !prev;
      });
    },
    color: openCode ? 'primary' : 'default'
  }, /*#__PURE__*/React.createElement(Code, null)), /*#__PURE__*/React.createElement(Tooltip, {
    target: btnCode_ref
  }, openCode ? 'hide code' : 'show code'))), /*#__PURE__*/React.createElement("div", {
    className: classes.body
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.panelDemo
  }, mountNode ? demo : /*#__PURE__*/React.createElement(Loader, {
    color: "primary"
  }))), openCode && snippetPanel(snippet));
});
CodeExample.propTypes = {
  /**
  * Это контент между открывающим и закрывающим тегом компонента.
  */
  children: PropTypes.node,

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

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

  /**
   * title демки.
  */
  title: PropTypes.string,

  /**
   * Демка с компонентом.
  */
  demo: PropTypes.node,

  /**
   * Исходный код компонента в в виде текста.
  */
  snippet: PropTypes.string,

  /**
   * Язык разметки для react-syntax-highlighter.
  */
  language: PropTypes.string
};
CodeExample.defaultProps = {
  title: 'Title',
  snippet: '',
  language: 'jsx'
};
CodeExample.displayName = 'CodeExampleEVG';
var CodeExample$1 = withStyles(styles)(CodeExample);

export default CodeExample$1;