{"size": 4086, "ext": "js", "max_stars_repo_path": "packages/core/icon/cjs/components/Icon.js", "max_stars_repo_name": "HereSinceres/atlaskit-mk-2", "max_stars_repo_stars_event_min_datetime": "2020-04-24T13:28:17.000Z", "max_stars_repo_stars_event_max_datetime": "2020-04-24T13:28:17.000Z", "max_issues_repo_path": "packages/core/icon/cjs/components/Icon.js", "max_issues_repo_name": "HereSinceres/atlaskit-mk-2", "max_issues_repo_issues_event_min_datetime": "2022-03-02T07:06:35.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-02T07:06:35.000Z", "max_forks_repo_path": "packages/core/icon/cjs/components/Icon.js", "max_forks_repo_name": "HereSinceres/atlaskit-mk-2", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 83.387755102, "max_line_length": 1443, "alphanum_fraction": 0.6754772394}
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
var uuid_1 = tslib_1.__importDefault(require("uuid"));
var colors_1 = require("@atlaskit/theme/colors");
var constants_1 = require("../constants");
var getSize = function (_a) {
    var size = _a.size;
    return size ? "height: " + constants_1.sizes[size] + "; width: " + constants_1.sizes[size] + ";" : null;
};
exports.IconWrapper = styled_components_1.default.span(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", " color: ", ";\n  display: inline-block;\n  fill: ", ";\n  flex-shrink: 0;\n  line-height: 1;\n\n  > svg {\n    ", " max-height: 100%;\n    max-width: 100%;\n    overflow: hidden;\n    pointer-events: none;\n    vertical-align: bottom;\n  }\n  /* Stop-color doesn't properly apply in chrome when the inherited/current color changes.\n   * We have to initially set stop-color to inherit (either via DOM attribute or an initial CSS\n   * rule) and then override it with currentColor for the color changes to be picked up.\n   */\n  stop {\n    stop-color: currentColor;\n  }\n"], ["\n  ", " color: ", ";\n  display: inline-block;\n  fill: ", ";\n  flex-shrink: 0;\n  line-height: 1;\n\n  > svg {\n    ", " max-height: 100%;\n    max-width: 100%;\n    overflow: hidden;\n    pointer-events: none;\n    vertical-align: bottom;\n  }\n  /* Stop-color doesn't properly apply in chrome when the inherited/current color changes.\n   * We have to initially set stop-color to inherit (either via DOM attribute or an initial CSS\n   * rule) and then override it with currentColor for the color changes to be picked up.\n   */\n  stop {\n    stop-color: currentColor;\n  }\n"])), getSize, function (p) { return p.primaryColor || 'currentColor'; }, function (p) { return p.secondaryColor || colors_1.background; }, getSize);
var Icon = /** @class */ (function (_super) {
    tslib_1.__extends(Icon, _super);
    function Icon() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    /* Icons need unique gradient IDs across instances for different gradient definitions to work
     * correctly.
     * A step in the icon build process replaces linear gradient IDs and their references in paths
     * to a placeholder string so we can replace them with a dynamic ID here.
     * Replacing the original IDs with placeholders in the build process is more robust than not
     * using placeholders as we do not have to rely on regular expressions to find specific element
     * to replace.
     */
    Icon.insertDynamicGradientID = function (svgStr) {
        var id = uuid_1.default();
        var replacedSvgStr = svgStr
            .replace(/id="([^"]+)-idPlaceholder"/g, "id=$1-" + id)
            .replace(/fill="url\(#([^"]+)-idPlaceholder\)"/g, "fill=\"url(#$1-" + id + ")\"");
        return replacedSvgStr;
    };
    Icon.prototype.render = function () {
        var _a = this.props, Glyph = _a.glyph, dangerouslySetGlyph = _a.dangerouslySetGlyph, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, size = _a.size;
        // handling the glyphs as strings
        if (dangerouslySetGlyph) {
            return (react_1.default.createElement(exports.IconWrapper, { primaryColor: primaryColor, secondaryColor: secondaryColor, size: size, "aria-label": this.props.label, dangerouslySetInnerHTML: {
                    __html: Icon.insertDynamicGradientID(dangerouslySetGlyph),
                } }));
        }
        // handling the glyphs when passed through as functions
        return (react_1.default.createElement(exports.IconWrapper, { primaryColor: primaryColor, secondaryColor: secondaryColor, size: size, "aria-label": this.props.label }, Glyph ? react_1.default.createElement(Glyph, { role: "presentation" }) : null));
    };
    return Icon;
}(react_1.Component));
exports.default = Icon;
var templateObject_1;
//# sourceMappingURL=Icon.js.map