@bearer/react/lib/from-bearer.js

"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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const React = __importStar(require("react"));
const case_1 = __importDefault(require("case"));
const bearer_provider_1 = require("./bearer-provider");
const BEARER_EVENT_PROP_PREFIX = 'bearer-';
function fromBearer(TagName) {
    var _a;
    const propSetEvent = `${TagName}-prop-set`;
    return _a = class extends React.Component {
            constructor(props) {
                super(props);
                this.prophandler = (e) => {
                    if (this.context.handlePropUpdates) {
                        this.context.handlePropUpdates(e);
                    }
                };
                this.eventRef = React.createRef();
            }
            componentDidMount() {
                if (this.eventRef.current) {
                    this.eventRef.current.addEventListener(propSetEvent, this.prophandler);
                    // NB: This means once a component is mounted we cannot change its event handlers
                    // In the future it would be good to improve this to allow dynamic allocation
                    this.handlers.forEach(key => {
                        const anyProps = this.props;
                        if (anyProps[key]) {
                            this.eventRef.current.addEventListener(key, anyProps[key]);
                        }
                    });
                }
            }
            componentWillUnmount() {
                if (this.eventRef.current) {
                    this.eventRef.current.removeEventListener(propSetEvent, this.prophandler);
                    this.handlers.forEach(key => {
                        const anyProps = this.props;
                        if (anyProps[key]) {
                            this.eventRef.current.removeEventListener(key, anyProps[key]);
                        }
                    });
                }
            }
            render() {
                const combinedProps = Object.assign({}, this.context.state, this.props);
                const tranformerdProps = Object.keys(combinedProps).reduce((acc, key) => {
                    acc[case_1.default.kebab(key)] = combinedProps[key];
                    return acc;
                }, {});
                // @ts-ignore
                return React.createElement(TagName, Object.assign({}, tranformerdProps, { ref: this.eventRef }));
            }
            get handlers() {
                return Object.keys(this.props).filter((key) => key.startsWith(BEARER_EVENT_PROP_PREFIX));
            }
        },
        _a.displayName = `Bearer(${TagName})`,
        _a.contextType = bearer_provider_1.BearerContext,
        _a;
}
exports.default = fromBearer;