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 67 68 69 70 71 72 73 74 75 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 10x 1x 1x 10x 10x 10x 10x 10x 1x 1x 10x 6x 6x 6x 24x 8x 2x 10x 2x 2x 1x 18x 18x 18x 12x 24x 6x 4x 6x 28x 28x 1x 1x 1x | "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 \"@storybook/react\";\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 }); var currentBackground = _this.props.api.getQueryParam("background"); Iif (currentBackground) { _this.setBackgroundInPreview(currentBackground); } else if (backgrounds.filter(function (x) { return x.default; }).length) { var defaultBgs = backgrounds.filter(function (x) { return x.default; }); _this.setBackgroundInPreview(defaultBgs[0].value); } }); 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); var hasDefault = backgrounds.filter(function (x) { return x.default; }).length; if (!hasDefault) 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 |