@brizy/media-gallery
Version:
113 lines (112 loc) • 4.32 kB
JavaScript
import React, { useCallback, useRef } from "react";
import { Item } from "../common/Item";
import { Space } from "@brizy/ui/lib/Space";
import { Layout, LayoutSection } from "@brizy/ui/lib/Layout";
import { Select, SelectOption } from "@brizy/ui/lib/Select";
import { useTranslation } from "../../../locale/useTranslation";
import { Masonry } from "@brizy/ui/lib/Masonry";
import { Input } from "@brizy/ui/lib/Input";
import { Button } from "@brizy/ui/lib/Button";
import { Inline } from "@brizy/ui/lib/Inline";
import { FileTypes } from "../../../pages/mediaLibrary/types/types";
var gutter = [
20,
0
];
var size = {
x: 10.5,
y: 65.5
};
var headerSpacing = [
25.8,
0,
0
];
var spacing = [
0,
25
];
export var Content = function(param) {
var items = param.items, isMultipleSelected = param.isMultipleSelected, isBulkSelected = param.isBulkSelected, isDisabledBulkSelected = param.isDisabledBulkSelected, isSearchDisabled = param.isSearchDisabled, search = param.search, onBulkSelect = param.onBulkSelect, onSelectItem = param.onSelectItem, onSearchClick = param.onSearchClick;
var t = useTranslation().t;
var contentRef = useRef(null);
var getContainer = useCallback(function() {
var _contentRef_current;
return (_contentRef_current = contentRef.current) !== null && _contentRef_current !== void 0 ? _contentRef_current : window.parent.document.body;
}, []);
var color = isDisabledBulkSelected ? "gray-mid" : "gray";
return /*#__PURE__*/ React.createElement(Space, {
spacing: spacing
}, /*#__PURE__*/ React.createElement(Layout, {
gutter: gutter,
align: "center",
alignY: "middle"
}, /*#__PURE__*/ React.createElement(LayoutSection, {
span: 4
}, /*#__PURE__*/ React.createElement(Input.Item, {
label: t("Stock Image Provider")
}, /*#__PURE__*/ React.createElement(Select, {
size: "large",
value: "unsplash",
checkMark: true,
getContainer: getContainer
}, /*#__PURE__*/ React.createElement(SelectOption, {
value: "unsplash"
}, t("Unsplash"))), /*#__PURE__*/ React.createElement("div", {
className: "brz-stock-photos__select--content",
ref: contentRef
}))), /*#__PURE__*/ React.createElement(LayoutSection, {
span: 11
}, /*#__PURE__*/ React.createElement(Input.Item, {
label: t("Search Photos & Illustrations")
}, /*#__PURE__*/ React.createElement(Input.Text, {
size: "large",
placeholder: t("Enter search keyword"),
value: search.value,
onChange: search.onChange,
onBlur: search.onBlur,
onPressEnter: onSearchClick
}))), /*#__PURE__*/ React.createElement(LayoutSection, {
span: 3
}, /*#__PURE__*/ React.createElement(Space, {
spacing: headerSpacing
}, /*#__PURE__*/ React.createElement(Button, {
size: size,
color: "gray",
hoverColor: "dark",
onClick: onSearchClick,
disabled: isSearchDisabled
}, t("Search")))), /*#__PURE__*/ React.createElement(LayoutSection, {
span: 6
}, /*#__PURE__*/ React.createElement(Space, {
spacing: headerSpacing
}, /*#__PURE__*/ React.createElement(Inline, {
alignY: "center",
align: "right"
}, /*#__PURE__*/ React.createElement(Button, {
type: "link",
size: "large",
color: color,
hoverColor: "dark",
onClick: onBulkSelect,
disabled: isDisabledBulkSelected
}, t("Bulk Select"))))), /*#__PURE__*/ React.createElement(LayoutSection, null, /*#__PURE__*/ React.createElement(Space, {
spacing: 15
}), /*#__PURE__*/ React.createElement(Masonry, {
columns: 4,
gap: 13
}, items.map(function(param) {
var id = param.id, fileName = param.fileName, thumbnailUrl = param.thumbnailUrl, isSelected = param.isSelected;
return /*#__PURE__*/ React.createElement(Item, {
id: id,
type: FileTypes.Image,
name: fileName,
url: thumbnailUrl,
isSelected: isSelected,
key: id,
onSelectItem: onSelectItem,
isMultipleSelected: isMultipleSelected,
isBulkSelected: isBulkSelected
});
})))));
};