feat(ui): remove shouldShowDeleteButton

- remove this state entirely
- use `state.hotkeys.shift` directly to hide and show the icon on gallery
- also formatting
This commit is contained in:
psychedelicious
2023-08-16 11:50:57 +10:00
parent 5b1099193d
commit 0f8606914e
8 changed files with 51 additions and 70 deletions

View File

@ -1,4 +1,11 @@
import { ChakraProps, Flex, Icon, Image, useColorMode } from '@chakra-ui/react';
import {
ChakraProps,
Flex,
FlexProps,
Icon,
Image,
useColorMode,
} from '@chakra-ui/react';
import {
IAILoadingImageFallback,
IAINoContentFallback,
@ -25,7 +32,7 @@ import {
TypesafeDroppableData,
} from 'features/dnd/types';
type IAIDndImageProps = {
type IAIDndImageProps = FlexProps & {
imageDTO: ImageDTO | undefined;
onError?: (event: SyntheticEvent<HTMLImageElement>) => void;
onLoad?: (event: SyntheticEvent<HTMLImageElement>) => void;
@ -47,8 +54,6 @@ type IAIDndImageProps = {
useThumbailFallback?: boolean;
withHoverOverlay?: boolean;
children?: JSX.Element;
onMouseOver?: () => void;
onMouseOut?: () => void;
};
const IAIDndImage = (props: IAIDndImageProps) => {
@ -79,14 +84,20 @@ const IAIDndImage = (props: IAIDndImageProps) => {
const { colorMode } = useColorMode();
const [isHovered, setIsHovered] = useState(false);
const handleMouseOver = useCallback(() => {
if (onMouseOver) onMouseOver();
setIsHovered(true);
}, [onMouseOver]);
const handleMouseOut = useCallback(() => {
if (onMouseOut) onMouseOut();
setIsHovered(false);
}, [onMouseOut]);
const handleMouseOver = useCallback(
(e: MouseEvent<HTMLDivElement>) => {
if (onMouseOver) onMouseOver(e);
setIsHovered(true);
},
[onMouseOver]
);
const handleMouseOut = useCallback(
(e: MouseEvent<HTMLDivElement>) => {
if (onMouseOut) onMouseOut(e);
setIsHovered(false);
},
[onMouseOut]
);
const { getUploadButtonProps, getUploadInputProps } = useImageUploadButton({
postUploadAction,

View File

@ -1,6 +1,6 @@
import { JSXElementConstructor, ReactElement, memo, MouseEvent } from 'react';
import IAIIconButton from './IAIIconButton';
import { SystemStyleObject, useColorModeValue } from '@chakra-ui/react';
import { JSXElementConstructor, MouseEvent, ReactElement, memo } from 'react';
import IAIIconButton from './IAIIconButton';
type Props = {
onClick: (event: MouseEvent<HTMLButtonElement>) => void;