字节收缩视图 — react 组件

可嵌入的拜德资产拾取器,作为 @bynder/compact-view 国家防范机制一揽子计划.

用于CDN/window.BynderCompactView.open() 使用,参见 文档。 。 。 .

安装

npm install @bynder/compact-view

同伴依赖性 : react 财务报告和审定财务报表 react-dom (单位:千美元)^19.2.5) (中文(简体) ).

出口

import {
    CompactView,
    Login,
    Modal,
    // types
    type CompactViewProps,
    type CompactViewLoginProps,
    type CompactViewModalProps,
} from '@bynder/compact-view';

使用量

CompactView 必须在内部 <Login>。 。 。 . <Modal> 是可选的——如果省略,则挂载 <Login> 输入您的容器元素.

import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { CompactView, Login, Modal } from '@bynder/compact-view';

const assetFieldSelection = `
    name
    url
    originalUrl
    derivatives {
        thumbnail
        webImage
    }
    ... on Video {
        previewUrls
    }
`;

function App() {
    const [isOpen, setIsOpen] = useState(false);

    const onSuccess = (assets, additionalInfo) => {
        console.log(assets, additionalInfo);
        setIsOpen(false);
    };

    return (
        <>
            <button onClick={() => setIsOpen(true)}>Open Compact View</button>
            <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
                <Login portal={{ url: 'portal.bynder.com', editable: true }} language="en_US">
                    <CompactView
                        language="en_US"
                        onSuccess={onSuccess}
                        assetFieldSelection={assetFieldSelection}
                    />
                </Login>
            </Modal>
        </>
    );
}

const root = createRoot(document.getElementById('app'));
root.render(<App />);

对于装有容器的变体,可降低 <Modal> 通过 isContainerMode 改为 <CompactView>数字 :

<div style={{ width: 800, height: 600 }}>
    <Login portal={{ url: 'portal.bynder.com' }}>
        <CompactView isContainerMode onSuccess={onSuccess} />
    </Login>
</div>

更多见 符号文档。 。 。 .

API 密码

<CompactView> 道具( r)CompactViewProps(中文(简体) )

所有道具都是可选的.

<Login> 道具( r)CompactViewLoginProps(中文(简体) )

<Modal> 道具( r)CompactViewModalProps(中文(简体) )

类型

type AssetType = 'AUDIO' | 'DOCUMENT' | 'IMAGE' | 'VIDEO' | 'ARCHIVE';

type SelectionMode = 'SingleSelect' | 'SingleSelectFile' | 'MultiSelect';

type File = {
    url: string;
    width?: number;
    height?: number;
    fileSize?: number;
};

type PortalConfig = {
    url: string;
    editable?: boolean;
};

type AssetFilterJson = {
    predefinedAssetType?: AssetType[];
    collectionId?: string;
    predefinedMetapropertiesOptions?: Record<string, Record<string, string>>;
    searchTerm?: string;
    predefinedTagNames?: string[];
    isLimitedUse?: boolean;
    showToolbar?: boolean;
};

type Theme = {
    colorPrimary?: string;
    colorButtonPrimary?: string;
    colorButtonPrimaryLabel?: string;
    colorButtonPrimaryActive?: string;
    colorButtonPrimaryHover?: string;
    colorButtonPrimaryHoverLabel?: string;
};

type VideoPreset = {
    presetId: string;
    name: string;
    format: string;
    previewUrl: string;
};

type AdditionalInfo = { selectedFile?: File };

interface OnSuccessAsset {
    id: string;
    files: Record<string, File>;
    name?: string;
    description?: string;
    databaseId?: string;
    createdAt?: string;
    originalUrl?: string;
    publishedAt?: string;
    tags?: string[];
    type?: AssetType;
    updatedAt?: string;
    url?: string;
    extensions?: string[];
    metaproperties?: { nodes: OnSuccessAssetMetaproperty[] };
    textMetaproperties?: OnSuccessAssetTextMetaproperty[];
    derivatives?: { thumbnail?: string; webImage?: string };
    previewUrls?: string[];
    streamingLinks?: { hls?: string; dash?: string; embedCode?: string };
    videoPresets?: VideoPreset[];
}

type OnSuccessCallback = (assets: OnSuccessAsset[], info: AdditionalInfo) => void;

OnSuccessAsset 反映默认的 GraphQL 字段选择。 有习惯 assetFieldSelection,未在 OnSuccessAsset 将不会被键入 —— 投放到自定义接口读取 .