@hackplan/polaris/esnext/components/AppProvider/AppProvider.js

Shopify’s product component library

import * as tslib_1 from "tslib";
import React from 'react';
import ThemeProvider from '../ThemeProvider';
import { StickyManager, ScrollLockManager, createAppProviderContext, } from './utilities';
import AppProviderContext from './context';
export default class AppProvider extends React.Component {
    constructor(props) {
        super(props);
        this.stickyManager = new StickyManager();
        this.scrollLockManager = new ScrollLockManager();
        const _a = this.props, { theme, children } = _a, rest = tslib_1.__rest(_a, ["theme", "children"]);
        this.state = {
            context: createAppProviderContext(Object.assign({}, rest, { stickyManager: this.stickyManager, scrollLockManager: this.scrollLockManager })),
        };
    }
    componentDidMount() {
        if (document != null) {
            this.stickyManager.setContainer(document);
        }
    }
    componentDidUpdate({ i18n: prevI18n, linkComponent: prevLinkComponent, apiKey: prevApiKey, shopOrigin: prevShopOrigin, forceRedirect: prevForceRedirect, }) {
        const { i18n, linkComponent, apiKey, shopOrigin, forceRedirect } = this.props;
        if (i18n === prevI18n &&
            linkComponent === prevLinkComponent &&
            apiKey === prevApiKey &&
            shopOrigin === prevShopOrigin &&
            forceRedirect === prevForceRedirect) {
            return;
        }
        // eslint-disable-next-line react/no-did-update-set-state
        this.setState({
            context: createAppProviderContext({
                i18n,
                linkComponent,
                apiKey,
                shopOrigin,
                forceRedirect,
                stickyManager: this.stickyManager,
            }),
        });
    }
    render() {
        const { theme = { logo: null }, children } = this.props;
        const { context } = this.state;
        return (<AppProviderContext.Provider value={context}>
        <ThemeProvider theme={theme}>
          {React.Children.only(children)}
        </ThemeProvider>
      </AppProviderContext.Provider>);
    }
}