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

Utilities for automated component documentation within Storybook

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var prop_types_1 = tslib_1.__importDefault(require("prop-types"));
var copy_to_clipboard_1 = tslib_1.__importDefault(require("copy-to-clipboard"));
var TextButton_1 = tslib_1.__importDefault(require("../TextButton"));
var Markdown_1 = tslib_1.__importDefault(require("../Markdown"));
var toCodeBlock = function (code, type) {
    if (type === void 0) { type = 'js'; }
    return ['```' + type, code.trim(), '```'].join('\n');
};
var CodeBlock = /** @class */ (function (_super) {
    tslib_1.__extends(CodeBlock, _super);
    function CodeBlock() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            showNotification: false,
        };
        _this.onCopyClick = function () {
            (0, copy_to_clipboard_1.default)(_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_1.default.createElement("div", { "data-hook": dataHook },
            this.state.showNotification && 'Copied!',
            react_1.default.createElement(Markdown_1.default, { source: toCodeBlock(source, type) }),
            react_1.default.createElement(TextButton_1.default, { onClick: this.onCopyClick }, "Copy to clipboard")));
    };
    CodeBlock.propTypes = {
        source: prop_types_1.default.string,
        type: prop_types_1.default.string,
        dataHook: prop_types_1.default.string,
    };
    CodeBlock.defaultProps = {
        type: 'js',
    };
    return CodeBlock;
}(react_1.Component));
exports.default = CodeBlock;
//# sourceMappingURL=index.js.map