@clerk/clerk-react
Version:
Clerk.dev React library
64 lines • 3.01 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.UserButton = exports.UserProfile = exports.SignUp = exports.SignIn = void 0;
const tslib_1 = require("tslib");
const react_1 = (0, tslib_1.__importDefault)(require("react"));
const contexts_1 = require("../contexts");
// README: <Portal/> should be a class pure component in order for mount and unmount
// lifecycle props to be invoked correctly. Replacing the class component with a
// functional component wrapped with a React.memo is not identical to the original
// class implementation due to React intricacies such as the useEffect’s cleanup
// seems to run AFTER unmount, while componentWillUnmount runs BEFORE.
// More information can be found at https://clerkinc.slack.com/archives/C015S0BGH8R/p1624891993016300
// The function Portal implementation is commented out for future reference.
// const Portal = React.memo(({ props, mount, unmount }: MountProps) => {
// const portalRef = React.createRef<HTMLDivElement>();
// useEffect(() => {
// if (portalRef.current) {
// mount(portalRef.current, props);
// }
// return () => {
// if (portalRef.current) {
// unmount(portalRef.current);
// }
// };
// }, []);
// return <div ref={portalRef} />;
// });
// Portal.displayName = 'ClerkPortal';
class Portal extends react_1.default.PureComponent {
constructor() {
super(...arguments);
this.portalRef = react_1.default.createRef();
}
componentDidMount() {
if (this.portalRef.current) {
this.props.mount(this.portalRef.current, this.props.props);
}
}
componentWillUnmount() {
if (this.portalRef.current) {
this.props.unmount(this.portalRef.current);
}
}
render() {
return react_1.default.createElement("div", { ref: this.portalRef });
}
}
exports.SignIn = (0, contexts_1.withClerk)((_a) => {
var { clerk } = _a, props = (0, tslib_1.__rest)(_a, ["clerk"]);
return (react_1.default.createElement(Portal, { mount: clerk.mountSignIn, unmount: clerk.unmountSignIn, props: props }));
}, 'SignIn');
exports.SignUp = (0, contexts_1.withClerk)((_a) => {
var { clerk } = _a, props = (0, tslib_1.__rest)(_a, ["clerk"]);
return (react_1.default.createElement(Portal, { mount: clerk.mountSignUp, unmount: clerk.unmountSignUp, props: props }));
}, 'SignUp');
exports.UserProfile = (0, contexts_1.withClerk)((_a) => {
var { clerk } = _a, props = (0, tslib_1.__rest)(_a, ["clerk"]);
return (react_1.default.createElement(Portal, { mount: clerk.mountUserProfile, unmount: clerk.unmountUserProfile, props: props }));
}, 'UserProfile');
exports.UserButton = (0, contexts_1.withClerk)((_a) => {
var { clerk } = _a, props = (0, tslib_1.__rest)(_a, ["clerk"]);
return (react_1.default.createElement(Portal, { mount: clerk.mountUserButton, unmount: clerk.unmountUserButton, props: props }));
}, 'UserButton');
//# sourceMappingURL=uiComponents.js.map