wix-storybook-utils/dist/es/src/CodeBlock/index.js

Utilities for automated component documentation within Storybook

import { __extends } from "tslib";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import copy from 'copy-to-clipboard';
import TextButton from '../TextButton';
import Markdown from '../Markdown';
var toCodeBlock = function (code, type) {
    if (type === void 0) { type = 'js'; }
    return ['```' + type, code.trim(), '```'].join('\n');
};
var CodeBlock = /** @class */ (function (_super) {
    __extends(CodeBlock, _super);
    function CodeBlock() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            showNotification: false,
        };
        _this.onCopyClick = function () {
            copy(_this.props.source);
            _this.setState({ showNotification: true }, function () {
                return setTimeout(function () { return _this.setState({ showNotification: false }); }, 3000);
            });
        };
        return _this;
    }
    CodeBlock.prototype.render = function () {
        var _a = this.props, source = _a.source, type = _a.type, dataHook = _a.dataHook;
        return (React.createElement("div", { "data-hook": dataHook },
            this.state.showNotification && 'Copied!',
            React.createElement(Markdown, { source: toCodeBlock(source, type) }),
            React.createElement(TextButton, { onClick: this.onCopyClick }, "Copy to clipboard")));
    };
    CodeBlock.propTypes = {
        source: PropTypes.string,
        type: PropTypes.string,
        dataHook: PropTypes.string,
    };
    CodeBlock.defaultProps = {
        type: 'js',
    };
    return CodeBlock;
}(Component));
export default CodeBlock;
//# sourceMappingURL=index.js.map