@brizy/media-gallery
Version:
100 lines (99 loc) • 4 kB
JavaScript
import React from "react";
import { Item } from "./Item";
import { Space } from "@brizy/ui/lib/Space";
import { Layout, LayoutSection } from "@brizy/ui/lib/Layout";
import { useTranslation } from "../../../locale/useTranslation";
import { Input } from "@brizy/ui/lib/Input";
import { Button } from "@brizy/ui/lib/Button";
import { Inline } from "@brizy/ui/lib/Inline";
var gutter = [
15,
30
];
var size = {
x: 10.5,
y: 23
};
var spacing = [
0,
25
];
var fileValueFromSource = function(source) {
return {
name: "start-from-image",
source: source
};
};
export var Content = function(param) {
var items = param.items, prompt = param.prompt, startFromImageUrl = param.startFromImageUrl, onSelectItem = param.onSelectItem, onPreviewItem = param.onPreviewItem, onDownloadItem = param.onDownloadItem, onRegenerateItem = param.onRegenerateItem, regeneratingItemId = param.regeneratingItemId, onGenerateImage = param.onGenerateImage, onClearStartFromImage = param.onClearStartFromImage, isGenerating = param.isGenerating;
var t = useTranslation().t;
return /*#__PURE__*/ React.createElement(Space, {
spacing: spacing
}, /*#__PURE__*/ React.createElement(Layout, {
gutter: gutter,
align: "center",
alignY: "middle"
}, /*#__PURE__*/ React.createElement(LayoutSection, {
span: 10
}, /*#__PURE__*/ React.createElement(Input.Item, {
label: t("Image Prompt"),
description: t("Enter a detailed description of the image you want to generate"),
errorMessage: prompt.touched && prompt.error ? prompt.error : undefined
}, /*#__PURE__*/ React.createElement(Input.Text, {
size: "large",
placeholder: t("Describe the image you want to generate"),
value: prompt.value,
onChange: prompt.onChange,
onBlur: prompt.onBlur,
onPressEnter: onGenerateImage
}))), /*#__PURE__*/ React.createElement(LayoutSection, {
span: 6
}, /*#__PURE__*/ React.createElement(Input.Item, {
label: t("Start From Image (Optional)"),
description: t("Create similar images guided by your prompt.")
}, /*#__PURE__*/ React.createElement(Input.Upload, {
size: "large",
value: startFromImageUrl.value ? fileValueFromSource(startFromImageUrl.value) : undefined,
onChange: function(f) {
return startFromImageUrl.onChange(URL.createObjectURL(f));
},
onBlur: startFromImageUrl.onBlur,
onRemove: function() {
return onClearStartFromImage();
}
})), prompt.touched && prompt.error ? /*#__PURE__*/ React.createElement(Space, {
spacing: 13
}) : null), /*#__PURE__*/ React.createElement(LayoutSection, {
span: 8
}, /*#__PURE__*/ React.createElement(Button, {
size: size,
color: "gray",
hoverColor: "dark",
onClick: onGenerateImage,
disabled: Boolean(isGenerating),
loading: Boolean(isGenerating)
}, t("Generate Image")), prompt.touched && prompt.error ? /*#__PURE__*/ React.createElement(Space, {
spacing: 13
}) : null), /*#__PURE__*/ React.createElement(LayoutSection, {
span: 16
}, /*#__PURE__*/ React.createElement(Space, {
spacing: 25
}), /*#__PURE__*/ React.createElement(Inline, {
spacing: 54
}, items.map(function(param) {
var id = param.id, thumbnailUrl = param.thumbnailUrl, isSelected = param.isSelected;
return /*#__PURE__*/ React.createElement(Item, {
key: id,
id: id,
url: thumbnailUrl,
isSelected: isSelected,
isRegenerating: Boolean(regeneratingItemId && regeneratingItemId === id),
onSelectItem: onSelectItem,
onPreview: onPreviewItem,
onDownload: onDownloadItem,
onRegenerate: onRegenerateItem
});
}))), /*#__PURE__*/ React.createElement(LayoutSection, {
span: 8
})));
};