storybook-addon-styled-component-theme
Version:
storybook addon with styled-components theme
58 lines • 4.43 kB
JavaScript
;
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Themes = void 0;
var immutable_1 = require("immutable");
var React = require("react");
var recompose_1 = require("recompose");
var styled_components_1 = require("styled-components");
var BaseComponent = function (_a) {
var onSelectTheme = _a.onSelectTheme, themes = _a.themes, theme = _a.theme;
return (React.createElement(FlexRow, null,
themes.map(function (th, i) { return (React.createElement(Button, { id: "theme-selection-button-" + th.name, selected: th === theme, key: i, onClick: function () { return onSelectTheme(th); } }, th.name)); }).toArray(),
React.createElement(FillingDiv, null),
React.createElement(Border, null, "|")));
};
exports.Themes = recompose_1.compose(recompose_1.withState("theme", "setTheme", null), recompose_1.withState("themes", "setThemes", immutable_1.List()), recompose_1.withHandlers({
onSelectTheme: function (_a) {
var channel = _a.channel, setTheme = _a.setTheme;
return function (theme) {
setTheme(theme);
channel.emit("selectTheme", theme.name);
};
},
onReceiveThemes: function (_a) {
var setTheme = _a.setTheme, setThemes = _a.setThemes, channel = _a.channel;
return function (newThemes) {
var themes = immutable_1.List(newThemes);
setThemes(immutable_1.List(themes));
if (themes.count() > 0) {
var theme = themes.first();
setTheme(theme);
channel.emit("selectTheme", theme.name);
}
};
},
}), recompose_1.lifecycle({
componentDidMount: function () {
var _a = this.props, channel = _a.channel, onReceiveThemes = _a.onReceiveThemes;
channel.on("setThemes", onReceiveThemes);
},
componentWillUnmount: function () {
var _a = this.props, channel = _a.channel, onReceiveThemes = _a.onReceiveThemes;
channel.removeListener("setThemes", onReceiveThemes);
},
}), recompose_1.branch(function (_a) {
var active = _a.active;
return !active;
}, recompose_1.renderNothing))(BaseComponent);
var FlexRow = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n padding: 10px;\n box-sizing: border-box;\n"], ["\n display: flex;\n padding: 10px;\n box-sizing: border-box;\n"])));
var FillingDiv = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
// fix the selection not disappear at first time
var Border = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: 0;\n"], ["\n font-size: 0;\n"])));
var Button = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border: 1px solid #BBB;\n border-radius: 6px;\n color: ", ";\n padding: 13px;\n margin-right: 15px;\n height: 55px;\n cursor: pointer;\n font-family: -apple-system, .SFNSText-Regular, San Francisco, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans,\n Droid Sans, Helvetica Neue, Lucida Grande, Arial, sans-serif;\n line-height: 25px;\n font-weight: ", ";\n background-color: ", ";\n white-space: nowrap;\n"], ["\n border: 1px solid #BBB;\n border-radius: 6px;\n color: ", ";\n padding: 13px;\n margin-right: 15px;\n height: 55px;\n cursor: pointer;\n font-family: -apple-system, .SFNSText-Regular, San Francisco, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans,\n Droid Sans, Helvetica Neue, Lucida Grande, Arial, sans-serif;\n line-height: 25px;\n font-weight: ", ";\n background-color: ", ";\n white-space: nowrap;\n"])), function (props) { return props.selected ? "white" : "#BBB"; }, function (props) { return props.selected ? "bold" : "normal"; }, function (props) { return props.selected ? "#333" : "None"; });
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
//# sourceMappingURL=Themes.js.map