@upleveled/code-surfer/dist/code-surfer.js

React component for scrolling, zooming and highlighting code.

"use strict";

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _prismReactRenderer = require("@upleveled/prism-react-renderer");

var _prismReactRenderer2 = _interopRequireDefault(_prismReactRenderer);

var _duotoneDark = require("@upleveled/prism-react-renderer/themes/duotoneDark");

var _duotoneDark2 = _interopRequireDefault(_duotoneDark);

var _duotoneLight = require("@upleveled/prism-react-renderer/themes/duotoneLight");

var _duotoneLight2 = _interopRequireDefault(_duotoneLight);

var _scroller = require("./scroller");

var Scroller = _interopRequireWildcard(_scroller);

var _glamor = require("glamor");

var _stepParser = require("./step-parser");

var _stepParser2 = _interopRequireDefault(_stepParser);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

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; } }

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

var selectedRules = (0, _glamor.css)({
  opacity: 1,
  transition: "opacity 300ms"
});
var unselectedRules = (0, _glamor.css)({
  opacity: 0.3,
  transition: "opacity 300ms"
});

var CodeSurfer = function CodeSurfer(_ref) {
  var code = _ref.code,
      step = _ref.step,
      lang = _ref.lang,
      showNumbers = _ref.showNumbers,
      dark = _ref.dark,
      theme = _ref.theme,
      monospace = _ref.monospace,
      Prism = _ref.Prism;

  var selectedTokens = new _stepParser2.default(step);

  return _react2.default.createElement(
    _prismReactRenderer2.default,
    _extends({}, _prismReactRenderer.defaultProps, {
      Prism: Prism || _prismReactRenderer.defaultProps.Prism,
      code: code,
      language: lang || "jsx",
      theme: theme !== undefined ? theme : dark ? _duotoneDark2.default : _duotoneLight2.default
    }),
    function (_ref2) {
      var className = _ref2.className,
          style = _ref2.style,
          tokens = _ref2.tokens,
          getLineProps = _ref2.getLineProps,
          getTokenProps = _ref2.getTokenProps;
      return _react2.default.createElement(
        Scroller.Container,
        {
          type: "pre",
          className: className,
          style: Object.assign({}, style, {
            background: null,
            fontFamily: monospace
          })
        },
        _react2.default.createElement(
          Scroller.Content,
          { type: "code", style: { fontFamily: monospace } },
          tokens.map(function (line, i) {
            var lineNumber = i + 1;
            return _react2.default.createElement(
              "div",
              getLineProps({ line: line, key: i }),
              showNumbers && _react2.default.createElement(
                "span",
                {
                  className: "token comment " + (selectedTokens.isLineSelected(i) ? selectedRules : unselectedRules),
                  style: { userSelect: "none" }
                },
                (lineNumber + ".").padStart(3),
                " "
              ),
              line.map(function (token, key) {
                return _react2.default.createElement(Scroller.Element, _extends({
                  type: "span"
                }, getTokenProps({
                  token: token,
                  key: key,
                  selected: selectedTokens.isTokenSelected(i, key),
                  className: selectedTokens.isTokenSelected(i, key) ? selectedRules : unselectedRules
                })));
              }),
              step.lineAnnotations && step.lineAnnotations[lineNumber] ? typeof step.lineAnnotations[lineNumber] === "function" ? step.lineAnnotations[lineNumber]() : step.lineAnnotations[lineNumber] : null
            );
          })
        )
      );
    }
  );
};

CodeSurfer.propTypes = {
  /** The code you want to show */
  code: _propTypes2.default.string.isRequired,
  /** The lines/tokens to highlight */
  step: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.shape({
    lines: _propTypes2.default.arrayOf(_propTypes2.default.number),
    range: _propTypes2.default.arrayOf(_propTypes2.default.number),
    ranges: _propTypes2.default.arrayOf(_propTypes2.default.arrayOf(_propTypes2.default.number)),
    tokens: _propTypes2.default.objectOf(_propTypes2.default.arrayOf(_propTypes2.default.number))
  })]),
  /** Any language supported in [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js) */
  lang: _propTypes2.default.string,
  /** Whether to show line numbers or not */
  showNumbers: _propTypes2.default.bool,
  /** If you have a dark background set this prop to true (it will use the default dark theme) */
  dark: _propTypes2.default.bool,
  /** Use a theme from react-prism-renderer */
  theme: _propTypes2.default.object,
  /** Use your own font-family */
  monospace: _propTypes2.default.string
};

CodeSurfer.defaultProps = {
  lang: "jsx",
  step: {}
};

exports.default = CodeSurfer;