| 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 |