@6thquake/react-material
Version:
React components that implement Google's Material Design.
314 lines (281 loc) • 8.14 kB
JavaScript
;
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;