react-jsx-style/dist/cjs/keyframe.js

create dynamic injected styles with react component or hooks

"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var react_css_transform_1 = require("./react-css-transform");
var KeyframeBlock = function (_a) {
    var selector = _a.selector, styles = _a.value;
    var css = react_1.useMemo(function () {
        return react_css_transform_1.createCssRules(styles)
            .map(function (_a) {
            var name = _a.name, value = _a.value;
            return name + ":" + value + ";";
        })
            .join('');
    }, [styles]);
    return (react_1.default.createElement(react_1.default.Fragment, null, selector + " { " + css + " }"));
};
function Keyframe(_a) {
    var identity = _a.identity, children = _a.children;
    return (react_1.default.createElement(react_1.default.Fragment, null, "@keyframes " + identity + " {",
        children, "}"));
}
Keyframe.Block = KeyframeBlock;
exports.default = Keyframe;