@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
67 lines • 3.18 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { PureComponent } from 'react';
import TipIcon from '@atlaskit/icon/glyph/editor/hint';
import InfoIcon from '@atlaskit/icon/glyph/editor/info';
import NoteIcon from '@atlaskit/icon/glyph/editor/note';
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
import WarningIcon from '@atlaskit/icon/glyph/editor/warning';
import ToolbarButton from '../ToolbarButton';
import { availablePanelType } from '../../plugins/panel';
import { TrashToolbarButton, Separator, FloatingToolbar } from './styles';
var icons = {
info: InfoIcon,
note: NoteIcon,
tip: TipIcon,
warning: WarningIcon,
};
var PanelEdit = (function (_super) {
tslib_1.__extends(PanelEdit, _super);
function PanelEdit(props) {
var _this = _super.call(this, props) || this;
_this.state = { toolbarVisible: false };
_this.handlePluginStateChange = function (pluginState) {
var target = pluginState.element, activePanelType = pluginState.activePanelType, toolbarVisible = pluginState.toolbarVisible;
_this.setState({
toolbarVisible: toolbarVisible,
target: target,
activePanelType: activePanelType,
});
};
_this.handleSelectPanelType = function (panelType, event) {
var editorView = _this.props.editorView;
_this.props.pluginState.changePanelType(editorView, panelType);
};
_this.handleRemovePanel = function () {
var editorView = _this.props.editorView;
_this.props.pluginState.removePanel(editorView);
};
return _this;
}
PanelEdit.prototype.componentDidMount = function () {
this.props.pluginState.subscribe(this.handlePluginStateChange);
};
PanelEdit.prototype.componentWillUnmount = function () {
this.props.pluginState.unsubscribe(this.handlePluginStateChange);
};
PanelEdit.prototype.render = function () {
var _this = this;
var _a = this.state, target = _a.target, activePanelType = _a.activePanelType, toolbarVisible = _a.toolbarVisible;
if (toolbarVisible) {
return (React.createElement(FloatingToolbar, { target: target, offset: [0, 3] },
availablePanelType.map(function (panelType, index) {
// tslint:disable-next-line:variable-name
var Icon = icons[panelType.panelType];
return (React.createElement(ToolbarButton, { key: index, selected: activePanelType === panelType.panelType, onClick: _this.handleSelectPanelType.bind(_this, panelType), iconBefore: React.createElement(Icon, { label: "Change panel type to " + panelType.panelType }) }));
}),
React.createElement(Separator, null),
React.createElement(TrashToolbarButton, { onClick: this.handleRemovePanel, iconBefore: React.createElement(RemoveIcon, { label: "Remove panel type" }) })));
}
else {
return null;
}
};
return PanelEdit;
}(PureComponent));
export default PanelEdit;
//# sourceMappingURL=index.js.map