rc-g-picker/dist/esm/RCGPicker.js

<!-- Create Readme file for npm package -->

import { __awaiter, __generator } from "tslib";
import React from "react";
import { useEffect, useState } from "react";
import loadScript from "load-script";
var GOOGLE_SDK = "https://apis.google.com/js/api.js";
function RCGPicker(props) {
    var _this = this;
    var _a = useState(true), loading = _a[0], setLoading = _a[1];
    useEffect(function () {
        if (!!window.gapi) {
            gapiLoad();
        }
        else if (!loading) {
            loadScript(GOOGLE_SDK, gapiLoad);
            setLoading(false);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    var gapiLoad = function () { return __awaiter(_this, void 0, void 0, function () {
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0: return [4 /*yield*/, window.gapi.load("auth")];
                case 1:
                    _a.sent();
                    return [4 /*yield*/, window.gapi.load("auth2")];
                case 2:
                    _a.sent();
                    return [4 /*yield*/, window.gapi.load("picker")];
                case 3:
                    _a.sent();
                    setLoading(false);
                    return [2 /*return*/];
            }
        });
    }); };
    var chooseHandler = function () {
        var _a, _b;
        if (!window.gapi ||
            !window.gapi.auth ||
            !window.google.picker ||
            props.disabled)
            return;
        if (!props.clientSecret && props.offline)
            return;
        var token = (_b = (_a = window === null || window === void 0 ? void 0 : window.gapi) === null || _a === void 0 ? void 0 : _a.auth) === null || _b === void 0 ? void 0 : _b.getToken();
        var oauthToken = token && token.access_token;
        if (oauthToken) {
            pickerInit({ access_token: oauthToken });
        }
        else {
            authInit(function (response) {
                var code = undefined;
                if (response.code)
                    code = response.code;
                if (code && props.clientSecret) {
                    var requestData = {
                        code: response.code,
                        client_id: props.clientId,
                        client_secret: props.clientSecret,
                        redirect_uri: "postmessage",
                        grant_type: "authorization_code"
                    };
                    fetch("https://oauth2.googleapis.com/token", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded"
                        },
                        body: new URLSearchParams(requestData)
                    })
                        .then(function (response) { return response.json(); })
                        .then(function (data) {
                        pickerInit({
                            access_token: data.access_token,
                            code: code
                        });
                    });
                }
                else if (response.access_token) {
                    pickerInit({ access_token: response.access_token });
                }
                else {
                    props.onAuthFailed && props.onAuthFailed(response);
                }
            });
        }
    };
    var authInit = function (callback) {
        window.gapi.auth.authorize({
            client_id: props.clientId,
            scope: props.scope,
            immediate: false,
            response_type: props.offline ? "code" : "token"
        }, callback);
    };
    var pickerInit = function (codeResponse) {
        props.onAuthenticate &&
            props.onAuthenticate(codeResponse.code
                ? { code: codeResponse.code, access_token: codeResponse.access_token }
                : codeResponse.access_token);
        var googleViewId = props.viewId && google.picker.ViewId[props.viewId];
        var view = new window.google.picker.View(googleViewId);
        if (props.mimeTypes) {
            view.setMimeTypes(props.mimeTypes.join(","));
        }
        if (props.query) {
            view.setQuery(props.query);
        }
        if (!view) {
            throw new Error("Can't find view by viewId");
        }
        var picker = new window.google.picker.PickerBuilder()
            .addView(view)
            .setOAuthToken(codeResponse.access_token)
            .setDeveloperKey(props.developerKey)
            .setCallback(props.onChange);
        if (props.origin) {
            picker.setOrigin(props.origin);
        }
        if (props.multiselect) {
            picker.enableFeature(window.google.picker.Feature.MULTISELECT_ENABLED);
        }
        picker.build().setVisible(true);
    };
    return (React.createElement("div", { onClick: chooseHandler }, props.children ? (props.children) : (React.createElement("button", { disabled: props.disabled }, props.buttonTitle ? props.buttonTitle : "Choose File"))));
}
export default RCGPicker;
//# sourceMappingURL=RCGPicker.js.map