chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
267 lines (264 loc) • 9.74 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _Icon = _interopRequireDefault(require("../../react-chayns-icon/component/Icon"));
var _RadioButton = _interopRequireDefault(require("../../react-chayns-radiobutton/component/RadioButton"));
var _TappPortal = _interopRequireDefault(require("../../react-chayns-tapp_portal/component/TappPortal"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/* eslint-disable jsx-a11y/click-events-have-key-events,class-methods-use-this */
class ModeSwitch extends _react.Component {
static getCurrentMode() {
const {
modes,
activeModeId
} = ModeSwitch;
return modes.find(mode => mode.id === activeModeId || null);
}
static addChangeListener(callback) {
ModeSwitch.onChangeListener.push(callback);
if (ModeSwitch.modes.length > 0) {
const mode = ModeSwitch.modes.find(m => m.id === ModeSwitch.activeModeId);
callback(mode);
}
}
static removeChangeListener(callback) {
ModeSwitch.onChangeListener.splice(ModeSwitch.onChangeListener.indexOf(callback), 1);
}
constructor(props) {
super(props);
this.showModeSwitch = this.showModeSwitch.bind(this);
this.toggleModeSwitch = this.toggleModeSwitch.bind(this);
this.switchMode = this.switchMode.bind(this);
this.setMode = this.setMode.bind(this);
this.onChange = this.onChange.bind(this);
this.init = this.init.bind(this);
this.state = {
modes: [],
activeModeId: null,
open: false
};
ModeSwitch.adminSwitchStatus = chayns.env.user.adminMode ? 1 : 0;
ModeSwitch.adminSwitchSupport = !(chayns.env.appVersion < 5691 && chayns.env.isIOS && chayns.env.isApp) && !!chayns.env.user.groups.find(g => g.id === 1);
window.chayns.ready.then(() => {
window.chayns.addAccessTokenChangeListener(this.init);
this.init();
});
}
componentDidUpdate(prevProps) {
const {
modes
} = this.props;
if (chayns.env.user.isAuthenticated && prevProps.modes !== modes) {
ModeSwitch.modes = this.setModes(modes);
// eslint-disable-next-line react/no-did-update-set-state
this.setState({
modes: ModeSwitch.modes
});
}
}
onChange(id) {
const {
modes
} = this.state;
const {
onChange
} = this.props;
const mode = modes.find(m => m && m.id === id);
if (onChange) {
onChange(mode);
}
ModeSwitch.onChangeListener.forEach(listener => {
listener(mode);
});
}
setMode(id) {
const {
save
} = this.props;
this.setState({
activeModeId: id
});
ModeSwitch.activeModeId = id;
if (save) {
window.chayns.utils.ls.set('react__modeSwitch--currentMode', id);
}
}
setModes(modes) {
let newModes = modes || [];
const user = newModes.filter(mode => mode.id === 0);
const admin = newModes.filter(mode => mode.id === 1);
if (admin.length === 0) {
newModes.unshift({
id: 1,
name: 'chayns® Manager',
uacIds: [1]
});
}
if (user.length === 0) {
newModes.unshift({
id: 0,
name: window.chayns.env.user.name
});
}
newModes = newModes.filter(mode => !mode.uacIds || this.isUserInGroup(mode.uacIds));
return newModes;
}
async init() {
const {
defaultMode,
save,
modes,
parent
} = this.props;
this.pageYOffset = (parent || document.getElementsByClassName('tapp')[0] || document.body).getBoundingClientRect().top;
if (chayns.env.user.isAuthenticated) {
ModeSwitch.modes = this.setModes(modes);
ModeSwitch.activeModeId = defaultMode || 0;
ModeSwitch.open = false;
ModeSwitch.adminSwitchStatus = chayns.env.user.adminMode ? 1 : 0;
if (ModeSwitch.adminSwitchSupport && this.isUserInGroup([1])) {
chayns.removeAdminSwitchListener(this.switchMode);
chayns.addAdminSwitchListener(this.switchMode);
}
if (defaultMode) {
ModeSwitch.activeModeId = defaultMode;
}
if (save) {
const storage = window.chayns.utils.ls.get('react__modeSwitch--currentMode');
if (chayns.utils.isNumber(storage)) {
ModeSwitch.activeModeId = storage;
}
}
if (ModeSwitch.adminSwitchSupport && (ModeSwitch.activeModeId === 0 || ModeSwitch.activeModeId === 1)) {
ModeSwitch.activeModeId = ModeSwitch.adminSwitchStatus;
}
} else {
ModeSwitch.modes = [];
ModeSwitch.activeModeId = null;
ModeSwitch.open = false;
}
this.setState({
modes: ModeSwitch.modes,
activeModeId: ModeSwitch.activeModeId,
open: ModeSwitch.open
});
this.onChange(ModeSwitch.activeModeId);
}
switchMode(id) {
if (id.mode !== undefined) {
ModeSwitch.adminSwitchStatus = id.mode;
this.setMode(id.mode);
this.onChange(id.mode);
} else {
if (id === 0 && ModeSwitch.adminSwitchSupport) {
chayns.deactivateAdminMode();
ModeSwitch.adminSwitchStatus = 0;
} else if (id === 1 && ModeSwitch.adminSwitchSupport) {
chayns.activateAdminMode();
ModeSwitch.adminSwitchStatus = 1;
} else {
this.onChange(id);
}
this.setState({
open: false
});
this.setMode(id);
}
}
isUserInGroup(uacIds) {
return !!window.chayns.env.user.groups.find(group => uacIds.indexOf(group.id) >= 0);
}
toggleModeSwitch() {
const {
open
} = this.state;
this.setState({
open: !open
});
}
showModeSwitch() {
const {
show
} = this.props;
const {
modes
} = this.state;
let customModes = modes.length;
if (modes.find(mode => mode.uacIds && mode.uacIds.indexOf(1) >= 0)) {
customModes -= 1;
}
if (modes.find(mode => !mode.uacIds || mode.uacIds && mode.uacIds.indexOf(0) >= 0)) {
customModes -= 1;
}
return (show || show === null && modes.length > 1 && (!ModeSwitch.adminSwitchSupport || modes.length > 2 || customModes)) && chayns.env.user.isAuthenticated;
}
render() {
const {
modes,
open,
activeModeId
} = this.state;
const {
parent
} = this.props;
if (this.showModeSwitch()) {
return /*#__PURE__*/_react.default.createElement(_TappPortal.default, {
parent: parent
}, /*#__PURE__*/_react.default.createElement("div", {
className: 'cc__modeswitch' + (open ? " cc__modeswitch--open" : ""),
style: {
top: `${this.pageYOffset}px`
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: "cc__modeswitch__content"
}, /*#__PURE__*/_react.default.createElement("h2", null, "Diese Seite verwenden als:"), modes.map(mode => !ModeSwitch.adminSwitchSupport || mode.id > 1 || mode.id === ModeSwitch.adminSwitchStatus ? /*#__PURE__*/_react.default.createElement("div", {
key: mode.id,
className: "grid__item col-1-2-desktop col-1-1-mobile"
}, /*#__PURE__*/_react.default.createElement(_RadioButton.default, {
name: "modeSwitchRadioButtons",
value: mode.id,
onChange: this.switchMode,
checked: mode.id === activeModeId
}, mode.name)) : null)), /*#__PURE__*/_react.default.createElement("div", {
className: 'cc__modeswitch__trigger' + (activeModeId > 1 ? " cc__modeswitch__trigger--red" : ""),
onClick: this.toggleModeSwitch
}, /*#__PURE__*/_react.default.createElement(_Icon.default, {
icon: "ts-cog"
}))));
}
return null;
}
}
exports.default = ModeSwitch;
ModeSwitch.modes = [];
ModeSwitch.activeModeId = 0;
ModeSwitch.open = false;
ModeSwitch.onChangeListener = [];
ModeSwitch.adminSwitchSupport = false;
ModeSwitch.adminSwitchStatus = 0;
ModeSwitch.propTypes = {
modes: _propTypes.default.arrayOf(_propTypes.default.shape({
id: _propTypes.default.number,
name: _propTypes.default.string,
uacIds: _propTypes.default.arrayOf(_propTypes.default.number)
})),
save: _propTypes.default.bool,
onChange: _propTypes.default.func,
defaultMode: _propTypes.default.number,
show: _propTypes.default.bool,
parent: typeof Element !== 'undefined' ? _propTypes.default.instanceOf(Element) : () => {}
};
ModeSwitch.defaultProps = {
modes: null,
save: false,
onChange: null,
defaultMode: null,
show: null,
parent: null
};
ModeSwitch.displayName = 'ModeSwitch';
//# sourceMappingURL=ModeSwitch.js.map