@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
79 lines (78 loc) • 4.07 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ThemePopup = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_redux_1 = require("react-redux");
const ThemeRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ThemeRedux"));
const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
const ThemeEditor_1 = require("./ThemeEditor");
const rebass_1 = require("rebass");
const ObjectFactory_1 = tslib_1.__importDefault(require("../../Utilities/ObjectFactory"));
const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
const icons_1 = require("../../components/icons");
const ThemeSelector_1 = require("./ThemeSelector");
class ThemePopupComponent extends React.Component {
constructor() {
super(...arguments);
this.handleCreateNewTheme = (variant) => {
let nthItem = this.props.UserThemes.length + 1;
let name = 'Custom-Theme-' + nthItem;
// make sure it is unique
while (this.props.UserThemes.some((theme) => theme.Name === name)) {
nthItem++;
name = 'Custom-Theme-' + nthItem;
}
const newTheme = ObjectFactory_1.default.CreateEmptyTheme(name);
newTheme.Variant = variant;
this.props.api.themeApi.addUserTheme(newTheme);
this.props.api.themeApi.loadTheme(newTheme.Name);
};
}
render() {
const isCustomTheme = this.props.api.themeApi
.getUserThemes()
.some((theme) => theme.Name === this.props.CurrentTheme);
const disabled = this.props.accessLevel === 'ReadOnly';
const newButton = (React.createElement(DropdownButton_1.default, { ml: 2, disabled: disabled, tone: "accent", variant: "raised", columns: ['label'], items: [
{
label: 'Dark',
onClick: () => this.handleCreateNewTheme('dark'),
},
{
label: 'Light',
onClick: () => this.handleCreateNewTheme('light'),
},
] },
React.createElement(icons_1.Icon, { name: "plus" }),
" New"));
return (React.createElement(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), button: React.createElement(React.Fragment, null,
!this.props.hideShowInWindow && (React.createElement(SimpleButton_1.default, { icon: "open-in-new", onClick: () => {
this.props.api.themeApi.internalApi.openInWindow();
} })),
newButton) },
React.createElement(FormLayout_1.default, null,
React.createElement(FormLayout_1.FormRow, { label: "Current Theme:" },
React.createElement(rebass_1.Box, { maxWidth: 150 },
React.createElement(ThemeSelector_1.ThemeSelector, null)))),
isCustomTheme && (React.createElement(rebass_1.Box, { mt: 3 },
React.createElement(ThemeEditor_1.ThemeEditor, { accessLevel: this.props.accessLevel, theme: this.props.CurrentTheme })))));
}
onChangeTheme(value) {
this.props.SelectTheme(value);
}
}
function mapStateToProps(state, ownProps) {
return {
CurrentTheme: state.Theme.CurrentTheme,
UserThemes: state.Theme.UserThemes,
};
}
function mapDispatchToProps(dispatch) {
return {
SelectTheme: (newTheme) => dispatch(ThemeRedux.ThemeSelect(newTheme)),
};
}
exports.ThemePopup = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(ThemePopupComponent);