@atlaskit/renderer
Version:
Renderer component
79 lines • 3.08 kB
JavaScript
import React from 'react';
import { PanelType } from '@atlaskit/adf-schema';
import { PanelInfoIcon, PanelSuccessIcon, PanelNoteIcon, PanelWarningIcon, PanelErrorIcon } from '@atlaskit/editor-common/icons';
import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
import EmojiIcon from '@atlaskit/icon/core/emoji';
import TipIcon from '@atlaskit/icon/core/lightbulb';
import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import EmojiItem from './emoji';
import { PanelStyledCompiled } from './panel-compiled';
import { PanelStyledEmotion } from './panel-emotion';
var panelIcons = {
info: PanelInfoIcon,
success: PanelSuccessIcon,
note: PanelNoteIcon,
tip: TipIcon,
warning: PanelWarningIcon,
error: PanelErrorIcon,
custom: EmojiIcon
};
var PanelStyledMigration = componentWithCondition(function () {
return expValEquals('platform_editor_renderer_static_css', 'isEnabled', true);
}, PanelStyledCompiled, PanelStyledEmotion);
var Panel = function Panel(props) {
var allowCustomPanels = props.allowCustomPanels,
type = props.panelType,
panelColor = props.panelColor,
panelIcon = props.panelIcon,
panelIconId = props.panelIconId,
panelIconText = props.panelIconText,
providers = props.providers,
children = props.children,
localId = props.localId;
// only allow custom panel type if flag is set
// otherwise fall back to info if custom panel is given
var panelType = allowCustomPanels ? type : type === PanelType.CUSTOM ? PanelType.INFO : type;
var getIcon = function getIcon() {
if (panelType === PanelType.CUSTOM) {
if (panelIcon && providers) {
return /*#__PURE__*/React.createElement(EmojiItem, {
id: panelIconId,
text: panelIconText,
shortName: panelIcon,
providers: providers
});
}
return null;
}
var Icon = panelIcons[panelType];
return /*#__PURE__*/React.createElement(Icon, {
label: "".concat(panelType, " panel")
});
};
var icon = getIcon();
var renderIcon = function renderIcon() {
if (icon) {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
return /*#__PURE__*/React.createElement("div", {
className: PanelSharedCssClassName.icon
}, icon);
}
};
return /*#__PURE__*/React.createElement(PanelStyledMigration
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
, {
className: PanelSharedCssClassName.prefix,
"data-local-id": localId,
"data-panel-type": panelType,
"data-panel-color": panelColor,
"data-panel-icon": panelIcon,
"data-panel-icon-id": panelIconId,
"data-panel-icon-text": panelIconText,
backgroundColor: panelColor,
hasIcon: Boolean(icon)
}, renderIcon(), /*#__PURE__*/React.createElement("div", {
className: PanelSharedCssClassName.content
}, children));
};
export default Panel;