@6thquake/react-material/esm/Codearea/Codearea.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireDefault(require("react"));

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

var _classnames = _interopRequireDefault(require("classnames"));

var _withStyles = _interopRequireDefault(require("../styles/withStyles"));

var _Prism = _interopRequireDefault(require("./Prism"));

var styles = function styles(theme) {
  return {
    root: {
      background: 'none',
      fontFamily: 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
      textAlign: 'left',
      whiteSpace: 'pre',
      wordSpacing: 'normal',
      wordBreak: 'normal',
      wordWrap: 'normal',
      lineHeight: 1.5,
      tabSize: 4,
      hyphens: 'none',
      padding: '1em',
      margin: '.5em 0',
      overflow: 'auto',
      '&:selection': {
        textShadow: 'none',
        background: '#b3d4fc'
      },
      '& @media print': {
        textShadow: 'none'
      },
      '&.light': {
        color: 'black',
        background: '#f5f2f0',
        textShadow: '0 1px white',
        '&>code': {
          color: 'black',
          background: '#f5f2f0',
          textShadow: '0 1px white'
        },
        '& .token': {
          '&.punctuation': {
            color: '#999'
          },
          '&.property, &.tag, &.boolean, &.number, &.constant, &.symbol, &.deleted': {
            color: '#905'
          },
          '&.selector, &.attr-name, &.string, &.char, &.builtin, &.inserted': {
            color: '#690'
          },
          '&.operator, &.entity, &.url': {
            color: '#9a6e3a',
            background: 'hsla(0, 0%, 100%, .5)'
          },
          '&.atrule, &.attr-value, &.keyword': {
            color: '#07a'
          },
          '&.function, &.class-name': {
            color: '#DD4A68'
          },
          '&.regex, &.important, &.variable': {
            color: '#e90'
          }
        },
        '&.language-css, &.style': {
          '& .token': {
            '&.string': {
              color: '#9a6e3a',
              background: 'hsla(0, 0%, 100%, .5)'
            }
          }
        }
      },
      '&.dark': {
        color: '#f8f8f2',
        textShadow: '0 1px rgba(0, 0, 0, 0.3)',
        background: '#272822',
        borderRadius: '0.3em',
        '&>code': {
          color: '#f8f8f2',
          textShadow: '0 1px rgba(0, 0, 0, 0.3)',
          background: '#272822'
        },
        '& .token': {
          '&.punctuation': {
            color: '#f8f8f2'
          },
          '&.property, &.tag, &.constant, &.symbol, &.deleted': {
            color: '#f92672'
          },
          '&.boolean, &.number': {
            color: '#ae81ff'
          },
          '&.selector, &.attr-name, &.string, &.char, &.builtin, &.inserted': {
            color: '#a6e22e'
          },
          '&.operator, &.entity, &.url, &.variable': {
            color: '#f8f8f2'
          },
          '&.atrule, &.attr-value, &.function': {
            color: '#e6db74'
          },
          '&.keyword': {
            color: '#66d9ef'
          },
          '&.regex, &.important': {
            color: '#fd971f'
          }
        },
        '&.language-css, &.style': {
          '& .token': {
            '&.string': {
              color: '#f8f8f2'
            }
          }
        }
      },
      '& .token': {
        '&.comment, &.prolog, &.doctype, &.cdata': {
          color: 'slategray'
        },
        '&.important, &.bold': {
          fontWeight: 'bold'
        },
        '&.italic': {
          fontStyle: 'italic'
        },
        '&.entity': {
          cursor: 'help'
        }
      },
      '& .namespace': {
        opacity: 0.7
      },
      '&.line-numbers': {
        position: 'relative',
        paddingLeft: '3.8em',
        counterReset: 'linenumber',
        '& > code': {
          position: 'relative',
          whiteSpace: 'inherit'
        },
        '& .line-numbers-rows': {
          position: 'absolute',
          pointerEvents: 'none',
          top: 0,
          fontSize: '100%',
          left: '-3.8em',
          width: '3em'
          /* works for line-numbers below 1000 lines */
          ,
          letterSpacing: '-1px',
          borderRight: '1px solid #999',
          userSelect: 'none',
          '&>span': {
            pointerEvents: 'none',
            display: 'block',
            counterIncrement: 'linenumber',
            '&:before': {
              content: 'counter(linenumber)',
              color: '#999',
              display: 'block',
              paddingRight: '0.8em',
              textAlign: 'right'
            }
          }
        }
      }
    }
  };
};

var Codearea =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(Codearea, _React$Component);

  function Codearea() {
    (0, _classCallCheck2.default)(this, Codearea);
    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Codearea).apply(this, arguments));
  }

  (0, _createClass2.default)(Codearea, [{
    key: "render",
    value: function render() {
      var _this = this;

      var lang = '';

      switch ((this.props.language || '').toLowerCase()) {
        case 'css':
          lang = 'css';
          break;

        case 'diff':
          lang = 'diff';
          break;

        case 'typescript':
          lang = 'typescript';
          break;

        case 'markup':
          lang = 'markup';
          break;

        case 'js':
        case 'jsx':
        case 'javascript':
        default:
          lang = 'jsx';
          break;
      }

      var _this$props = this.props,
          classes = _this$props.classes,
          theme = _this$props.theme;

      switch (theme) {
        case 'dark':
        case 'light':
          break;

        default:
          theme = 'light';
          break;
      }

      var className = (0, _classnames.default)(theme, (0, _defineProperty2.default)({
        'react-prism': true,
        'line-numbers': !!this.props.lineNumbers
      }, "language-".concat(lang), true));
      return _react.default.createElement("pre", {
        className: "".concat(className, " ").concat(classes.root)
      }, _react.default.createElement("code", {
        ref: function ref(_ref) {
          return _this.el = _ref;
        }
      }, this.props.children));
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.highlightCode();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.highlightCode();
    }
  }, {
    key: "highlightCode",
    value: function highlightCode() {
      _Prism.default.highlightElement(this.el);
    }
  }]);
  return Codearea;
}(_react.default.Component);

Codearea.propTypes = {
  /**
   * content that needs formatting
   */
  children: _propTypes.default.node.isRequired,

  /**
   * language that needs formating
   */
  language: _propTypes.default.string,

  /**
   * show line numbers whether or not
   */
  lineNumbers: _propTypes.default.bool,

  /**
   * theme(light or dark) of code area, using the light theme as default
   */
  theme: _propTypes.default.oneOf(['light', 'dark'])
};
Codearea.defaultProps = {
  lineNumbers: true,
  theme: 'light'
};

var _default = (0, _withStyles.default)(styles, {
  flip: false,
  name: 'RMCodearea'
})(Codearea);

exports.default = _default;