面板 UI SDK

文档

开始

1. 安装 npm 包 : npm install @brandfolder-panel/sdk。 。 。 .
2. 导入样式表, 在 @brandfolder-panel/sdk/styles.css在您的申请中。 所有样式都被命名为 .panel-ui-sdk 因此,不应该有冲突.
3. 初始化并开始使用 SDK.

注:由于Brandfolder GeneralUI SDK使组件处于消耗上下文,而不是在iframe内,所以其所有依赖性目前都包含在包中. 我们将重新评估和移动图书馆,以便在必要时成为同侪的依赖.

初始化

export interface PanelUISdkParameters {
  appName: string;
  anchorElement: HTMLElement; // Used to append the Iframe containing the Panel
  panelUIBaseUrl?: string; // OPTIONAL. Custom base URL if using a self-hosted version of the Panel
  headerBackgroundUrl?: string; // OPTIONAL. Custom background image url for the header
  // OPTIONAL. You can pass in a valid auth token that will be used for requests to the Brandfolder API. If this is
  // not passed in we will fallback to having the user input their API key.
  authParameters?: {
    token: string; // Valid OAuth token or API key
    refreshTokenHandler: () => Promise<string>; // Handler for fetching a new token if the initial one has become invalid. The SDK will call this function as needed.
  };
  statePersistence?: {
    enabled: boolean; // If true, the panel will persist its state in between uses
    storage?: Storage; // OPTIONAL. Allows consumer to pass in a custom storage implementation for persisting state
  };
  styles?: {
    backgroundColor?: string; // Background color for the panel,
    backgroundColorSecondary?: string; // Secondary background color for contrasted elements (i.e. hover styling)
  };
}

反应中的例子 :

function App() {
  const ref = useRef();

  useEffect(() => {
    if (ref.current) {
      const sdk = new PanelUISdk({ appName: 'test', anchorElement: ref.current } });
      sdk.selectAttachments();
    }
  }, [])

  return (
    <div className="App">
      <div ref={ref} id='panel-root' />
    </div>
  );
}

面板UISdk.selectAttachments

如果指定了品牌文件夹或收藏ID,则默认在 Org 登陆页或显示页上打开面板。 允许您通过一个处理器来聆听附件选择事件.

参数 :

export interface SelectAttachmentProps {
  containerId?: string | null; // OPTIONAL - Navigate to specified Brandfolder or Collection, otherwise go to org landing page
  supportedMimeTypes?: string[]; // OPTIONAL - pass in a list of supported mime types
  onDragStart?: (attachment: AttachmentDto) => void; // Called when a user starts dragging an attachment
  onDragEnd?: (attachment: AttachmentDto) => void; // Called when a user stops dragging an attachment
  onSelect: (attachment: AttachmentDto) => void; // Called whenever user selects an attachment
  hideHeader?: boolean; // OPTIONAL - hides the header. Defaults to false.
  resumeSession?: boolean; // OPTIONAL - resume from persisted session
  searchParameters?: SearchParameters; // OPTIONAL - Use search parameters with Brandfolder API 
  enforcedSearchParameters?: EnforcedSearchParameters; // OPTIONAL - Enforce search parameters with Brandfolder API
};

示例

panel.selectAttachments({
  containerId: 'VALID_BRANDFOLDER_ID',
  onSelect: (attachment) => console.log('Attachment selected: ', attachment),
  hideHeader: true,
});

支持品牌文件夹附件的拖放

这个 @brandfolder-panel/sdk/utilities namespace 显示您可以用来简化您如何消耗来自面板的拖放事件的工具功能。 它会从事件中提取附件数据并传递给您的处理者.

现有职能如下:

export function isAttachmentDragEvent(event: DragEvent): boolean => {...};

export function handleAttachmentDragEvent(
  event: DragEvent,
  handler: (props: AttachmentDragEventHandlerProps) => void,
): void => {...};

举个例子,你如何在反应中使用它们:

const handleAttachmentDrag = (event: DragEvent) => {
  if (isAttachmentDragEvent(event)) {
    handleAttachmentDragEvent(event, ({ attachment }) => {
      console.log('Attachment dragged over drop zone: ', attachment);
    });
  }
};

return <div onDragOver={handleAttachmentDrag}>Drop Zone</div>;

面板UISdk.openUpload 软件

在上传页面上打开面板。 允许您通过带有要上传的文件blobs的一系列对象.

参数 :

export interface ImageUploadPayload {
  file_name: string;
  file: Blob;
}

export interface OpenUploadProps {
  uploadAssets: ImageUploadPayload[]; // an array of file blobs with file names
  hideHeader?: boolean; // OPTIONAL - hides the header
}

示例

panel.openUpload({
  uploadAssets: [{file_name: 'new-file', file: new Blob()}];
  hideHeader?: true;
});

面板UISdk.closePanel

将小组从锚要素中删除。 SDK对象仍然有效并可用于启动新的操作.

示例

panel.closePanel()