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 |
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
8×
1×
1×
8×
8×
8×
8×
8×
1×
1×
8×
4×
4×
8×
2×
2×
1×
14×
14×
14×
10×
4×
4×
20×
20×
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 \"@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 |