@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
65 lines • 2.93 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { PureComponent } from 'react';
import { akBorderRadius, akGridSizeUnitless, akColorG50, akColorG400, akColorP50, akColorP400, akColorB400, akColorY50, akColorB50, akColorY400 } from '@atlaskit/util-shared-styles';
import InfoIcon from '@atlaskit/icon/glyph/editor/info';
import TipIcon from '@atlaskit/icon/glyph/editor/hint';
import NoteIcon from '@atlaskit/icon/glyph/editor/note';
import WarningIcon from '@atlaskit/icon/glyph/warning';
import styled from 'styled-components';
var config = {
info: {
icon: InfoIcon,
background: akColorB50,
iconColor: akColorB400,
},
note: {
icon: NoteIcon,
background: akColorP50,
iconColor: akColorP400,
},
tip: {
icon: TipIcon,
background: akColorG50,
iconColor: akColorG400,
},
warning: {
icon: WarningIcon,
background: akColorY50,
iconColor: akColorY400,
},
};
// tslint:disable-next-line:variable-name
var PanelWrapper = (_a = ["\n border-radius: ", ";\n margin: ", "px 0;\n padding: ", "px;\n background: ", "\n"], _a.raw = ["\n border-radius: ", ";\n margin: ", "px 0;\n padding: ", "px;\n background: ", "\n"], styled.div(_a, akBorderRadius, akGridSizeUnitless / 2, akGridSizeUnitless, function (_a) {
var panelType = _a.panelType;
return config[panelType].background;
}));
// tslint:disable-next-line:variable-name
var IconWrapper = (_b = ["\n position: absolute;\n height: ", "px;\n width: ", "px;\n color: ", "\n"], _b.raw = ["\n position: absolute;\n height: ", "px;\n width: ", "px;\n color: ", "\n"], styled.span(_b, akGridSizeUnitless * 3, akGridSizeUnitless * 3, function (_a) {
var panelType = _a.panelType;
return config[panelType].iconColor;
}));
// tslint:disable-next-line:variable-name
var ContentWrapper = (_c = ["\n margin: 1px 0 1px ", "px\n"], _c.raw = ["\n margin: 1px 0 1px ", "px\n"], styled.div(_c, akGridSizeUnitless * 4));
var Panel = (function (_super) {
tslib_1.__extends(Panel, _super);
function Panel() {
return _super !== null && _super.apply(this, arguments) || this;
}
Panel.prototype.render = function () {
var _a = this.props, panelType = _a.panelType, children = _a.children;
return (React.createElement(PanelWrapper, { panelType: panelType },
React.createElement(IconWrapper, { panelType: panelType }, this.getIcon()),
React.createElement(ContentWrapper, null, children)));
};
Panel.prototype.getIcon = function () {
var panelType = this.props.panelType;
// tslint:disable-next-line:variable-name
var Icon = config[panelType].icon;
return React.createElement(Icon, { label: "Panel {panelType}" });
};
return Panel;
}(PureComponent));
export default Panel;
var _a, _b, _c;
//# sourceMappingURL=panel.js.map