vue-styleguidist
Version:
Vue components style guide generator
124 lines (123 loc) • 6 kB
JavaScript
import "core-js/modules/es.object.to-string.js";
import "core-js/modules/es.reflect.construct.js";
import "core-js/modules/es.object.keys.js";
import "core-js/modules/es.symbol.js";
import "core-js/modules/es.array.filter.js";
import "core-js/modules/es.object.get-own-property-descriptor.js";
import "core-js/modules/web.dom-collections.for-each.js";
import "core-js/modules/es.object.get-own-property-descriptors.js";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
import "core-js/modules/es.string.small.js";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import debounce from 'lodash/debounce';
import { UnControlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/mode/jsx/jsx';
import Styled from 'rsg-components/Styled';
import Context from 'rsg-components/Context';
// We’re explicitly specifying Webpack loaders here so we could skip specifying them in Webpack configuration.
// That way we could avoid clashes between our loaders and user loaders.
// eslint-disable-next-line import/no-unresolved
require('!!../../../loaders/style-loader!../../../loaders/css-loader!codemirror/lib/codemirror.css');
// eslint-disable-next-line import/no-unresolved
require('!!../../../loaders/style-loader!../../../loaders/css-loader!rsg-codemirror-theme.css');
var UPDATE_DELAY = 10;
var styles = function styles(_ref) {
var fontFamily = _ref.fontFamily,
space = _ref.space,
fontSize = _ref.fontSize;
return {
root: {
'& .CodeMirror': {
isolate: false,
fontFamily: fontFamily.monospace,
height: 'auto',
padding: [[space[1], space[2]]],
fontSize: fontSize.small
},
'& .CodeMirror pre': {
isolate: false,
padding: 0
},
'& .CodeMirror-scroll': {
isolate: false,
height: 'auto',
overflowY: 'hidden',
overflowX: 'auto'
},
'& .cm-error': {
isolate: false,
background: 'none'
}
}
};
};
export var Editor = /*#__PURE__*/function (_Component) {
_inherits(Editor, _Component);
var _super = _createSuper(Editor);
function Editor() {
var _this;
_classCallCheck(this, Editor);
_this = _super.call(this);
_defineProperty(_assertThisInitialized(_this), "location", '');
_this.handleChange = debounce(_this.handleChange.bind(_assertThisInitialized(_this)), UPDATE_DELAY);
_this.location = document.location.href;
return _this;
}
_createClass(Editor, [{
key: "shouldComponentUpdate",
value: function shouldComponentUpdate(nextProps) {
var differentLocation = this.location !== document.location.href;
if ((differentLocation || this.getEditorConfig(nextProps).readOnly) && nextProps.code !== this.props.code) {
this.location = document.location.href;
return true;
}
return false;
}
}, {
key: "getEditorConfig",
value: function getEditorConfig(props) {
return _objectSpread(_objectSpread({}, this.context.config.editorConfig), props.editorConfig);
}
}, {
key: "handleChange",
value: function handleChange(editor, metadata, newCode) {
var onChange = this.props.onChange;
if (onChange) {
onChange(newCode);
}
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
code = _this$props.code,
classes = _this$props.classes;
return /*#__PURE__*/React.createElement(CodeMirror, {
className: classes.root,
value: code,
onChange: this.handleChange,
options: this.getEditorConfig(this.props)
});
}
}]);
return Editor;
}(Component);
_defineProperty(Editor, "propTypes", {
code: PropTypes.string.isRequired,
onChange: PropTypes.func,
editorConfig: PropTypes.object,
classes: PropTypes.object.isRequired
});
_defineProperty(Editor, "contextType", Context);
export default Styled(styles)(Editor);