all files / dist/ BackgroundPanel.js

100% Statements 41/41
75% Branches 3/4
100% Functions 11/11
100% Lines 38/38
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66                                              14× 14× 14× 10× 20× 20×          
"use strict";
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var React = require("react");
var Swatch_1 = require("./Swatch");
var assign = require("object-assign");
var style = {
    font: {
        fontFamily: "-apple-system,'.SFNSText-Regular', 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif",
        fontSize: "14px",
    },
};
;
var defaultBackground = {
    name: "default",
    value: "transparent",
};
var __html = "\nimport { storiesOf } from \"@kadira/storybook\";\nimport backgrounds from \"react-storybook-addon-backgrounds\";\n\nstoriesOf(\"First Component\", module)\n  .addDecorator(backgrounds([\n    { name: \"twitter\", value: \"#00aced\" },\n    { name: \"facebook\", value: \"#3b5998\" },\n  ]))\n  .add(\"First Button\", () => <button>Click me</button>)\n  ;\n".trim();
var Instructions = function () { return (React.createElement("div", {style: assign({ padding: "20px" }, style.font)}, React.createElement("h5", {style: { fontSize: "16px" }}, "Setup Instructions"), React.createElement("p", null, "Please add the background decorator definition to your story." + ' ' + "The background decorate accepts an array of items, which should include a" + ' ' + "name for your color (preferably the css class name) and the corresponding color / image value."), React.createElement("p", null, "Below is an example of how to add the background decorator to your story definition."), React.createElement("pre", {style: {
    padding: "30px",
    display: "block",
    background: "rgba(19,19,19,0.9)",
    color: "rgba(255,255,255,0.95)",
    marginTop: "15px",
    lineHeight: "1.75em",
}}, React.createElement("code", {dangerouslySetInnerHTML: { __html: __html }})))); };
var BackgroundPanel = (function (_super) {
    __extends(BackgroundPanel, _super);
    function BackgroundPanel(props) {
        var _this = this;
        _super.call(this, props);
        this.state = { backgrounds: [] };
        this.setBackgroundInPreview = function (background) { return _this.props.channel.emit("background", background); };
        this.setBackgroundFromSwatch = function (background) {
            _this.setBackgroundInPreview(background);
            _this.props.api.setQueryParams({ background: background });
        };
        this.props.channel.on("background-set", function (backgrounds) {
            _this.setState({ backgrounds: backgrounds });
            _this.setBackgroundInPreview(_this.props.api.getQueryParam("background"));
        });
        this.props.channel.on("background-unset", function (backgrounds) {
            _this.setState({ backgrounds: [] });
            _this.props.api.setQueryParams({ background: null });
        });
    }
    BackgroundPanel.prototype.render = function () {
        var _this = this;
        var backgrounds = this.state.backgrounds.slice();
        if (!backgrounds.length)
            return React.createElement(Instructions, null);
        backgrounds.push(defaultBackground);
        return (React.createElement("div", {style: { display: "inline-block", padding: "15px" }}, backgrounds.map(function (_a, key) {
            var value = _a.value, name = _a.name;
            return (React.createElement("div", {key: key, style: { display: "inline-block", padding: "5px" }}, React.createElement(Swatch_1.default, {value: value, name: name, setBackground: _this.setBackgroundFromSwatch})));
        })));
    };
    return BackgroundPanel;
}(React.Component));
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = BackgroundPanel;
;
//# sourceMappingURL=BackgroundPanel.js.map