如何在 Chakra UI Modal 中将回调附加到 Google Picker？

编程问答 2022-05-13

问题描述

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

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

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

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

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

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,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 中搜索此问题，但没有找到专门针对此问题的任何内容，因此我认为它不是重复的。我发现的最接近的是 @L_404_1@，其中未接受的答案中的评论表明可能无法通过选项 1 附加回调，但我不能确定

我还注意到有几次，当我期望回​​调被调用时，从 Picker 发送到父窗口的消息，所以我试图捕捉它，但它并没有持续地被触发。

>

对此的任何帮助将不胜感激！

解决方法

事实证明，问题不在于 Google Picker（感谢 iansedano 为我指出了一个可以解决的工作示例！）

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

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

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

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