wix-storybook-utils
Version:
Utilities for automated component documentation within Storybook
50 lines • 2.05 kB
JavaScript
import { __extends } from "tslib";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Collapse from 'react-collapse';
import styles from './styles.scss';
import CodeBlock from '../CodeBlock';
import TextButton from '../TextButton';
var CodeExample = /** @class */ (function (_super) {
__extends(CodeExample, _super);
function CodeExample(props) {
var _this = _super.call(this, props) || this;
_this.state = {
isOpened: !!props.autoExpand,
};
_this.toggleCode = _this.toggleCode.bind(_this);
return _this;
}
CodeExample.prototype.toggleCode = function () {
this.setState({
isOpened: !this.state.isOpened,
});
};
CodeExample.prototype.render = function () {
var _a = this.props, dataHook = _a.dataHook, title = _a.title, code = _a.code, codeType = _a.codeType, children = _a.children;
return (React.createElement("div", { "data-hook": dataHook },
React.createElement("div", { className: styles.panelControl, style: { display: 'flex' } },
React.createElement("h2", null, title),
React.createElement("div", { style: { margin: '22px 24px 0' } },
React.createElement(TextButton, { onClick: this.toggleCode },
this.state.isOpened ? 'Hide' : 'Show',
" code"))),
React.createElement(Collapse, { isOpened: this.state.isOpened },
React.createElement(CodeBlock, { source: code, type: codeType })),
React.createElement("div", null, children)));
};
CodeExample.propTypes = {
code: PropTypes.string,
codeType: PropTypes.string,
children: PropTypes.node,
title: PropTypes.string,
autoExpand: PropTypes.bool,
dataHook: PropTypes.string,
};
CodeExample.defaultProps = {
codeType: 'js',
};
return CodeExample;
}(Component));
export default CodeExample;
//# sourceMappingURL=index.js.map