From 31f04296de36ebed765561a792ce08aae0be4b10 Mon Sep 17 00:00:00 2001 From: markus-moser Date: Tue, 3 Dec 2024 17:05:48 +0100 Subject: [PATCH] Image data object data type --- .../image-preview/image-preview.styles.tsx | 3 + .../image-preview/image-preview.tsx | 33 ++++++++--- .../components/image-target/image-target.tsx | 3 +- .../data-related/components/image/footer.tsx | 55 +++++++++++++------ .../data-related/components/image/image.tsx | 43 +++++++-------- 5 files changed, 90 insertions(+), 47 deletions(-) diff --git a/assets/js/src/core/components/image-preview/image-preview.styles.tsx b/assets/js/src/core/components/image-preview/image-preview.styles.tsx index ed5080bae..13a49027e 100644 --- a/assets/js/src/core/components/image-preview/image-preview.styles.tsx +++ b/assets/js/src/core/components/image-preview/image-preview.styles.tsx @@ -16,6 +16,9 @@ import { createStyles } from 'antd-style' export const useStyle = createStyles(({ token, css }) => { return { imagePreviewContainer: css` + display: flex; + justify-content: center; + align-items: center; max-width: 100%; .ant-image { diff --git a/assets/js/src/core/components/image-preview/image-preview.tsx b/assets/js/src/core/components/image-preview/image-preview.tsx index f0aad54e4..221b28bed 100644 --- a/assets/js/src/core/components/image-preview/image-preview.tsx +++ b/assets/js/src/core/components/image-preview/image-preview.tsx @@ -11,13 +11,15 @@ * @license https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL */ -import React, { type CSSProperties } from 'react' -import { Flex } from '@Pimcore/components/flex/flex' +import React, { type CSSProperties, forwardRef, type MutableRefObject, useEffect } from 'react' import { useStyle } from './image-preview.styles' import cn from 'classnames' import { toCssDimension } from '@Pimcore/utils/css' import { Image } from 'antd' import { getPrefix } from '@Pimcore/app/api/pimcore/route' +import { useDroppable } from '@Pimcore/components/drag-and-drop/hooks/use-droppable' +import { Spin } from '@Pimcore/components/spin/spin' +import { Flex } from '@Pimcore/components/flex/flex' interface ImagePreviewProps { src?: string @@ -28,16 +30,31 @@ interface ImagePreviewProps { style?: CSSProperties } -export const ImagePreview = ({ src, assetId, width, height, className, style }: ImagePreviewProps): React.JSX.Element => { +export const ImagePreview = forwardRef(function ImagePreview ({ src, assetId, width, height, className, style }: ImagePreviewProps, ref: MutableRefObject): React.JSX.Element { + const [key, setKey] = React.useState(0) + const { getStateClasses } = useDroppable() const { styles } = useStyle() const imageSrc = assetId !== undefined ? `${getPrefix()}/assets/${assetId}/image/stream/preview` : src - return ( + useEffect(() => { + setKey(key + 1) + }, [imageSrc]) + + const loadingSpinner = ( + + + ) + + return ( +
- +
) -} +}) diff --git a/assets/js/src/core/components/image-target/image-target.tsx b/assets/js/src/core/components/image-target/image-target.tsx index ffaab2bcf..345e69f39 100644 --- a/assets/js/src/core/components/image-target/image-target.tsx +++ b/assets/js/src/core/components/image-target/image-target.tsx @@ -28,9 +28,8 @@ interface ImageTargetProps { uploadIcon?: boolean } -export const ImageTarget = forwardRef(function ImageTarget (props: ImageTargetProps, ref: MutableRefObject): React.JSX.Element { +export const ImageTarget = forwardRef(function ImageTarget ({ title, className, width = 200, height = 200, dndIcon, uploadIcon }: ImageTargetProps, ref: MutableRefObject): React.JSX.Element { const { getStateClasses } = useDroppable() - const { title, className, width = 200, height = 200, dndIcon, uploadIcon } = props const { styles } = useStyle() return ( diff --git a/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/image/footer.tsx b/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/image/footer.tsx index 5b7364594..32e069a87 100644 --- a/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/image/footer.tsx +++ b/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/image/footer.tsx @@ -11,31 +11,54 @@ * @license https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL */ -import React, { useEffect } from 'react' +import React from 'react' import { IconButton } from '@Pimcore/components/icon-button/icon-button' +import { + type ImageValue +} from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/components/image/image' +import _ from 'lodash' +import { Tooltip } from 'antd' +import { useTranslation } from 'react-i18next' +import { ButtonGroup } from '@Pimcore/components/button-group/button-group' +import { useAssetHelper } from '@Pimcore/modules/asset/hooks/use-asset-helper' interface ImageFooterProps { - value?: string - onChange?: (value?: string) => void + emptyValue?: () => void disabled?: boolean + value?: ImageValue | null } export const ImageFooter = (props: ImageFooterProps): React.JSX.Element => { - const [value, setValue] = React.useState(props.value) - - const emptyValue = (): void => { - setValue(undefined) - } - - useEffect(() => { - props.onChange?.(value) - }, [value]) + const { t } = useTranslation() + const { openAsset } = useAssetHelper() return ( - + + , + + { + if (typeof props.value?.id === 'number') { + openAsset({ config: { id: props.value.id } }) + } + } } + /> + + ] } /> ) } diff --git a/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/image/image.tsx b/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/image/image.tsx index 7e4b264af..5c92d8c5a 100644 --- a/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/image/image.tsx +++ b/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/image/image.tsx @@ -38,10 +38,8 @@ export interface ImageProps { export const Image = (props: ImageProps): React.JSX.Element => { const [value, setValue] = React.useState(props.value ?? null) const { t } = useTranslation() - console.log(setValue) - const onChange = (value?: string): void => { - // const newUrl = value !== '' && value !== undefined ? value : null - // setValue(newUrl === null ? null : { url: newUrl }) + const emptyValue = (): void => { + setValue(null) } useEffect(() => { @@ -55,33 +53,34 @@ export const Image = (props: ImageProps): React.JSX.Element => { fitContent footer={ } > - { value !== null - ? ( - - ) - : ( - true } - isValidData={ (info: DragAndDropInfo) => info.type === 'asset' && info.data.type === 'image' } - onDrop={ (info: DragAndDropInfo) => { setValue({ type: 'asset', id: info.data.id as number }) } } - variant="outline" - > + true } + isValidData={ (info: DragAndDropInfo) => info.type === 'asset' && info.data.type === 'image' } + onDrop={ (info: DragAndDropInfo) => { setValue({ type: 'asset', id: info.data.id as number }) } } + variant="outline" + > + { value !== null + ? ( + + ) + : ( - - ) } + ) } + )