@droppii-org/chat-sdk
Version:
Droppii React Chat SDK
58 lines (57 loc) • 2.91 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useBoolean } from "ahooks";
import { Button, Drawer, Tabs } from "antd";
import { Icon } from "../icon";
import { useTranslation } from "react-i18next";
import ImageCollection from "./ImageCollection";
import VideoCollection from "./VideoCollection";
import { useIsMobile } from "../../hooks/common/useIsMobile";
import { useMemo } from "react";
import FileCollection from "./FileCollection";
import LinkCollection from "./LinkCollection";
export var MediaCollectionTabKey;
(function (MediaCollectionTabKey) {
MediaCollectionTabKey["Image"] = "image";
MediaCollectionTabKey["Video"] = "video";
MediaCollectionTabKey["File"] = "file";
MediaCollectionTabKey["Link"] = "link";
})(MediaCollectionTabKey || (MediaCollectionTabKey = {}));
const MediaCollection = () => {
const { t } = useTranslation();
const [isOpen, { toggle }] = useBoolean(false);
const isMobile = useIsMobile();
const items = useMemo(() => {
if (!isOpen)
return [];
return [
{
key: MediaCollectionTabKey.Image,
label: t("image"),
children: _jsx(ImageCollection, {}),
},
{
key: MediaCollectionTabKey.Video,
label: t("video"),
children: _jsx(VideoCollection, {}),
},
{
key: MediaCollectionTabKey.File,
label: t("file"),
children: _jsx(FileCollection, {}),
},
{
key: MediaCollectionTabKey.Link,
label: t("link"),
children: _jsx(LinkCollection, { onClose: toggle }),
},
];
}, [isOpen, t]);
return (_jsxs(_Fragment, { children: [_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "folder-o", size: 22 }) }), _jsx(Drawer, { open: isOpen, onClose: toggle, mask: false, closeIcon: false, styles: {
body: {
padding: 0,
height: "100%",
},
}, getContainer: false, width: isMobile ? "100%" : 360, children: _jsxs("div", { className: "flex flex-col h-full", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsx("span", { className: "text-lg font-medium", children: t("library") }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "close-b", size: 22 }) })] }), _jsx("div", { className: "flex-1 overflow-hidden", children: _jsx(Tabs, { defaultActiveKey: MediaCollectionTabKey.Image, items: items, className: "h-full" }) })] }) })] }));
};
export default MediaCollection;