storybook-addon-styled-components-themes
Version:
Storybook addon for styled components with theme provider
45 lines (44 loc) • 2.17 kB
JavaScript
;
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var addons_1 = require("@storybook/addons");
var react_1 = __importDefault(require("react"));
var styled_components_1 = require("styled-components");
var models_1 = require("./models");
exports.WithThemeProvider = function (_a) {
var children = _a.children;
var _b = __read(react_1.default.useState([]), 2), themes = _b[0], setThemes = _b[1];
var _c = __read(react_1.default.useState(0), 2), indexThemeSelected = _c[0], setIndexThemeSelected = _c[1];
var channel = addons_1.addons.getChannel();
var handleLoadThemes = function (themes) { return setThemes(themes); };
var handleChangeTheme = function (index) { return setIndexThemeSelected(index); };
react_1.default.useEffect(function () {
channel.on(models_1.CHANNEL.LOAD_THEMES, handleLoadThemes);
channel.on(models_1.CHANNEL.CHANGE_THEME, handleChangeTheme);
channel.emit(models_1.CHANNEL.REQUEST_THEMES);
return function () {
channel.removeListener(models_1.CHANNEL.LOAD_THEMES, handleLoadThemes);
channel.removeListener(models_1.CHANNEL.CHANGE_THEME, handleChangeTheme);
};
}, []);
return (react_1.default.createElement(react_1.default.Fragment, null, themes && themes.length ? (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: themes[indexThemeSelected] }, children)) : (react_1.default.createElement(react_1.default.Fragment, null))));
};
exports.default = exports.WithThemeProvider;