@vuesion/addon-theme-switcher
Version:
vuesion Storybook addon for switching themes
89 lines (88 loc) • 3.78 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import React from 'react';
import { STORY_RENDERED } from '@storybook/core-events';
import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
import { styled } from '@storybook/theming';
var createItem = function (id, title, change) { return ({
id: id,
title: title,
onClick: function () {
change({ selected: { id: id, title: title }, expanded: false });
document.querySelector('#storybook-preview-iframe').contentDocument.documentElement.className = id;
},
}); };
var IconButtonWithLabel = styled(IconButton)(function () { return ({
display: 'inline-flex',
alignItems: 'center',
}); });
var IconButtonLabel = styled.div(function (_a) {
var theme = _a.theme;
return ({
fontSize: theme.typography.size.s2 - 1,
marginLeft: '10px',
});
});
var ThemeSwitcher = (function (_super) {
__extends(ThemeSwitcher, _super);
function ThemeSwitcher(props) {
var _this = _super.call(this, props) || this;
_this.document = null;
_this.change = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return _this.setState.apply(_this, args);
};
_this.state = {
themes: [],
selected: null,
expanded: false,
};
_this.listener = function () {
var data = props.api.getCurrentStoryData();
var parameters = data ? data.parameters : null;
var themes = (parameters && parameters.themeSwitcher && parameters.themeSwitcher.themes) || [];
themes = themes.map(function (_a) {
var label = _a.label, value = _a.value;
return createItem(value, label, _this.change);
});
if (themes.length === 0 || _this.state.selected) {
return;
}
_this.setState({
themes: themes,
selected: themes[0],
});
document.querySelector('#storybook-preview-iframe').contentDocument.documentElement.className =
themes[0].id;
};
return _this;
}
ThemeSwitcher.prototype.componentDidMount = function () {
var api = this.props.api;
api.on(STORY_RENDERED, this.listener);
};
ThemeSwitcher.prototype.render = function () {
var _this = this;
var _a = this.state, selected = _a.selected, themes = _a.themes, expanded = _a.expanded;
return themes.length > 0 ? (React.createElement(WithTooltip, { placement: "top", trigger: "click", tooltipShown: expanded, onVisibilityChange: function (s) { return _this.setState({ expanded: s }); }, tooltip: React.createElement(TooltipLinkList, { links: themes }), closeOnClick: true },
React.createElement(IconButtonWithLabel, { key: "theme", title: "Change the application theme" },
React.createElement(Icons, { icon: "eye" }),
React.createElement(IconButtonLabel, null, selected.title)))) : null;
};
return ThemeSwitcher;
}(React.Component));
export { ThemeSwitcher };