如何将回调附加到脉轮 UI 模式中的 Google 选择器？

Question

我正在尝试将 Google Picker 集成到我的应用程序中，并且 UI 正按预期完美显示，但我似乎无法让它调用任何回调我'我试过附加到它。

有 2 种使用选择器的方法，我更喜欢选项 1，但我可以接受任何一种

选项 1：将选择器构建为 URL 以在自定义模式中呈现

我正在用 React（特别是 Chakra）构建我的应用程序，我更喜欢使用 Chakra 的 <Popover> 元素来帮助选择器与页面的其余部分融为一体。

使用这条路线，这是我目前的相关代码：

function getPicker(callback) {
  const view = new google.picker.DocsView(google.picker.ViewId.FOLDERS);
  view.setSelectFolderEnabled(true);

  return (
    new google.picker.PickerBuilder()
      .addView(view)
      .setSelectableMimeTypes("application/vnd.google-apps.folder")
      .setTitle("")
      .setCallback(callback)
      .enableFeature(google.picker.Feature.NAV_HIDDEN)
      .setOAuthToken(getAccessToken() /* defined elsewhere - assume this works */)
      .setDeveloperKey(process.env.API_KEY)
      .setOrigin(window.location.host)
      .toUri();
  );
}

// This is an event listener 
function showPicker() {
  function handleFolderSelected(folder) {
    const { Response, Action, Document } = google.picker;

    if (folder[Response.ACTION] === Action.PICKED) {
      const targetFolder = folder[Response.DOCUMENTS][0][Document.ID];
      // do stuff
    }

    setIsFolderPickerOpen(false); // closes the <Popover>
  }

  const pickerUrl = getPicker(handleFolderSelected);

  // Opens the <Popover> and sets the source of an iframe inside to the url
  setPickerUrl(pickerUrl);
  setIsFolderPickerOpen(true);
}

选项 2：让 Picker 构建自己的 iframe

如果有必要的话，虽然我认为它在视觉上没有那么吸引人，但我可以走这条路。这是我到目前为止为此选项尝试的代码（大部分相同，但不完全相同）

function getPicker(callback) {
  const view = new google.picker.DocsView(google.picker.ViewId.FOLDERS);
  view.setSelectFolderEnabled(true);

  return (
    new google.picker.PickerBuilder()
      .addView(view)
      .setSelectableMimeTypes("application/vnd.google-apps.folder")
      .setTitle("")
      .setCallback(callback)
      .enableFeature(google.picker.Feature.NAV_HIDDEN)
      .setOAuthToken(getAccessToken() /* defined elsewhere - assume this works */)
      .setDeveloperKey(process.env.API_KEY)
      .setOrigin(window.location.host)
      .build();
  );
}

// This is an event listener 
function showPicker() {
  function handleFolderSelected(folder) {
    const { Response, Action, Document } = google.picker;

    if (folder[Response.ACTION] === Action.PICKED) {
      const targetFolder = folder[Response.DOCUMENTS][0][Document.ID];
      // do stuff
    }
  }

  const picker = getPicker(handleFolderSelected);
  picker.setVisible(true);
}

其他信息

我已经尝试在 Stack 中搜索这个问题，但我没有找到任何专门针对这个问题的东西，所以我认为它不是重复的。我找到的最接近的是 this one，其中未接受答案中的评论表明可能无法通过选项 1 附加回调，但我不能确定

我还注意到几次当我希望回调被调用时，有一条来自选择器的消息被发布到父 window，所以我试图捕捉它，但它没有被足够连续发射。

如有任何帮助，我们将不胜感激！

Answer 1

事实证明，问题不在于 Google Picker（感谢 iansedano 为我提供了一个工作示例！）

问题是，出于可访问性的原因，Chakra UI 将注意力集中在模式中。这通常是一件好事，但由于 Picker 的工作方式，每次您尝试单击“选择文件”按钮时，Chakra 都会在 Picker 可以处理单击之前将焦点偷回模态的关闭按钮。

解决方法是使用下面的属性来“解除”焦点。注意：我建议仅在选择器打开时临时执行此操作。在所有其他情况下，焦点陷印是一件好事。

import { Modal } from "@chakra-ui/react"

function Component() {
  return (
    <Modal trapFocus={false}>
      ...
    </Modal>
  );
}

如何将回调附加到脉轮 UI 模式中的 Google 选择器？

How do I attach a callback to the Google Picker in a Chakra UI Modal?

javascript

google-picker

选项 1：将选择器构建为 URL 以在自定义模式中呈现

选项 2：让 Picker 构建自己的 iframe

其他信息