vue-styleguidist
Version:
Vue components style guide generator
189 lines • 8.6 kB
JavaScript
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.to-string.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 "core-js/modules/es.reflect.construct.js";
import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
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";
import _regeneratorRuntime from "@babel/runtime/regenerator";
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; } }
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; }
import "core-js/modules/es.string.small.js";
import "core-js/modules/es.string.link.js";
import "core-js/modules/es.array.concat.js";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import { isCodeVueSfc } from 'vue-inbrowser-compiler-utils';
import getHighlight from 'vue-inbrowser-prismjs-highlighter';
import { polyfill } from 'react-lifecycles-compat';
import SimpleEditor from 'react-simple-code-editor';
import { space } from 'react-styleguidist/lib/client/styles/theme';
import prismTheme from 'react-styleguidist/lib/client/styles/prismTheme';
import Styled from 'rsg-components/Styled';
import { useStyleGuideContext } from 'rsg-components/Context/Context';
var VSimpleEditor = SimpleEditor;
var styles = function styles(_ref) {
var fontFamily = _ref.fontFamily,
fontSize = _ref.fontSize,
color = _ref.color,
borderRadius = _ref.borderRadius;
return {
root: {
fontFamily: fontFamily.monospace,
fontSize: fontSize.small,
borderRadius: borderRadius,
'& textarea': {
isolate: false,
transition: 'all ease-in-out .1s',
// important to override inline styles in react-simple-code-editor
border: "1px ".concat(color.border, " solid !important"),
borderRadius: borderRadius
},
'& textarea:focus': {
isolate: false,
outline: 0,
borderColor: "".concat(color.link, " !important"),
boxShadow: [[0, 0, 0, 2, color.focus]]
}
},
jssEditor: _objectSpread({
background: color.codeBackground
}, prismTheme({
color: color
}))
};
};
export var UnconfiguredEditor = /*#__PURE__*/function (_Component) {
_inherits(UnconfiguredEditor, _Component);
var _super = _createSuper(UnconfiguredEditor);
function UnconfiguredEditor() {
var _this;
_classCallCheck(this, UnconfiguredEditor);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "state", {
code: _this.props.code,
prevCode: _this.props.code,
highlight: function highlight() {
return function (code) {
return code;
};
}
});
_defineProperty(_assertThisInitialized(_this), "loadHighlightCode", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var highlight;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return getHighlight();
case 2:
highlight = _context.sent;
_this.setState({
highlight: highlight
});
case 4:
case "end":
return _context.stop();
}
}
}, _callee);
})));
_defineProperty(_assertThisInitialized(_this), "handleChange", function (code) {
_this.setState({
code: code
});
_this.props.onChange(code);
});
return _this;
}
_createClass(UnconfiguredEditor, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
this.loadHighlightCode().then(function () {
return _this2.forceUpdate();
});
}
}, {
key: "shouldComponentUpdate",
value: function shouldComponentUpdate(nextProps, nextState) {
return nextState.code !== this.state.code;
}
}, {
key: "render",
value: function render() {
var _this$props$classes = this.props.classes,
root = _this$props$classes.root,
jssEditor = _this$props$classes.jssEditor;
var isVueSFC = isCodeVueSfc(this.state.code);
var _this$props = this.props,
jssThemedEditor = _this$props.jssThemedEditor,
jsxInExamples = _this$props.jsxInExamples,
editorPadding = _this$props.editorPadding;
var langClass = isVueSFC ? 'language-html' : 'language-jsx';
return /*#__PURE__*/React.createElement(VSimpleEditor, {
className: cx(root, jssThemedEditor ? jssEditor : langClass, 'prism-editor'),
value: this.state.code,
onValueChange: this.handleChange,
highlight: this.state.highlight(isVueSFC ? 'html' : 'vsg', jsxInExamples)
// Padding should be passed via a prop (not CSS) for a proper
// cursor position calculation
,
padding: editorPadding || space[2]
// to make sure the css styles for prism are taken into account
,
preClassName: cx(!jssThemedEditor && langClass)
});
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(nextProps, prevState) {
var code = nextProps.code;
if (prevState.prevCode !== code) {
return {
prevCode: code,
code: code
};
}
return null;
}
}]);
return UnconfiguredEditor;
}(Component);
_defineProperty(UnconfiguredEditor, "propTypes", {
classes: PropTypes.objectOf(PropTypes.string.isRequired).isRequired,
code: PropTypes.string.isRequired,
jssThemedEditor: PropTypes.bool.isRequired,
jsxInExamples: PropTypes.bool.isRequired,
onChange: PropTypes.func.isRequired,
editorPadding: PropTypes.number
});
var PEditor = polyfill(UnconfiguredEditor);
function Editor(props) {
var _ref3 = useStyleGuideContext(),
_ref3$config = _ref3.config,
jssThemedEditor = _ref3$config.jssThemedEditor,
jsxInExamples = _ref3$config.jsxInExamples;
return /*#__PURE__*/React.createElement(PEditor, _extends({}, props, {
jssThemedEditor: jssThemedEditor,
jsxInExamples: jsxInExamples
}));
}
export default Styled(styles)(Editor);