@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
67 lines • 3.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var react_1 = require("react");
var util_shared_styles_1 = require("@atlaskit/util-shared-styles");
var info_1 = require("@atlaskit/icon/glyph/editor/info");
var hint_1 = require("@atlaskit/icon/glyph/editor/hint");
var note_1 = require("@atlaskit/icon/glyph/editor/note");
var warning_1 = require("@atlaskit/icon/glyph/warning");
var styled_components_1 = require("styled-components");
var config = {
info: {
icon: info_1.default,
background: util_shared_styles_1.akColorB50,
iconColor: util_shared_styles_1.akColorB400,
},
note: {
icon: note_1.default,
background: util_shared_styles_1.akColorP50,
iconColor: util_shared_styles_1.akColorP400,
},
tip: {
icon: hint_1.default,
background: util_shared_styles_1.akColorG50,
iconColor: util_shared_styles_1.akColorG400,
},
warning: {
icon: warning_1.default,
background: util_shared_styles_1.akColorY50,
iconColor: util_shared_styles_1.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_components_1.default.div(_a, util_shared_styles_1.akBorderRadius, util_shared_styles_1.akGridSizeUnitless / 2, util_shared_styles_1.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_components_1.default.span(_b, util_shared_styles_1.akGridSizeUnitless * 3, util_shared_styles_1.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_components_1.default.div(_c, util_shared_styles_1.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;
}(react_1.PureComponent));
exports.default = Panel;
var _a, _b, _c;
//# sourceMappingURL=panel.js.map