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 | 1× 1× 1× 1× 1× 1× 1× 1× 1× 1× 10× 1× 1× 10× 10× 10× 10× 10× 1× 1× 10× 6× 6× 6× 24× 8× 2× 10× 2× 2× 1× 18× 18× 18× 12× 24× 6× 4× 6× 28× 28× 1× 1× 1× | "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 |