feat(ui): memoize all components

This commit is contained in:
psychedelicious 2023-12-29 14:05:56 +11:00 committed by Kent Keirsey
parent ca4b8e65c1
commit 56527da73e
65 changed files with 1165 additions and 970 deletions

View File

@ -1,4 +1,4 @@
import { PropsWithChildren, useEffect } from 'react';
import { PropsWithChildren, memo, useEffect } from 'react';
import { modelChanged } from '../src/features/parameters/store/generationSlice';
import { useAppDispatch } from '../src/app/store/storeHooks';
import { useGlobalModifiersInit } from '../src/common/hooks/useGlobalModifiers';
@ -6,7 +6,7 @@ import { useGlobalModifiersInit } from '../src/common/hooks/useGlobalModifiers';
* Initializes some state for storybook. Must be in a different component
* so that it is run inside the redux context.
*/
export const ReduxInit = (props: PropsWithChildren) => {
export const ReduxInit = memo((props: PropsWithChildren) => {
const dispatch = useAppDispatch();
useGlobalModifiersInit();
useEffect(() => {
@ -20,4 +20,6 @@ export const ReduxInit = (props: PropsWithChildren) => {
}, []);
return props.children;
};
});
ReduxInit.displayName = 'ReduxInit';

View File

@ -22,7 +22,7 @@ const exit: AnimationProps['exit'] = {
transition: { duration: 0.1 },
};
export const IAIDropOverlay = (props: Props) => {
const IAIDropOverlay = (props: Props) => {
const { isOver, label = 'Drop' } = props;
const motionId = useRef(uuidv4());
return (

View File

@ -1,6 +1,6 @@
import type { As, FlexProps, StyleProps } from '@chakra-ui/react';
import { Flex, Icon, Skeleton, Spinner } from '@chakra-ui/react';
import { useMemo } from 'react';
import { memo, useMemo } from 'react';
import { FaImage } from 'react-icons/fa';
import type { ImageDTO } from 'services/api/types';
@ -8,7 +8,7 @@ import { InvText } from './InvText/wrapper';
type Props = { image: ImageDTO | undefined };
export const IAILoadingImageFallback = (props: Props) => {
export const IAILoadingImageFallback = memo((props: Props) => {
if (props.image) {
return (
<Skeleton
@ -33,7 +33,8 @@ export const IAILoadingImageFallback = (props: Props) => {
<Spinner size="xl" />
</Flex>
);
};
});
IAILoadingImageFallback.displayName = 'IAILoadingImageFallback';
type IAINoImageFallbackProps = FlexProps & {
label?: string;
@ -41,7 +42,7 @@ type IAINoImageFallbackProps = FlexProps & {
boxSize?: StyleProps['boxSize'];
};
export const IAINoContentFallback = (props: IAINoImageFallbackProps) => {
export const IAINoContentFallback = memo((props: IAINoImageFallbackProps) => {
const { icon = FaImage, boxSize = 16, sx, ...rest } = props;
const styles = useMemo(
@ -67,37 +68,39 @@ export const IAINoContentFallback = (props: IAINoImageFallbackProps) => {
{props.label && <InvText textAlign="center">{props.label}</InvText>}
</Flex>
);
};
});
IAINoContentFallback.displayName = 'IAINoContentFallback';
type IAINoImageFallbackWithSpinnerProps = FlexProps & {
label?: string;
};
export const IAINoContentFallbackWithSpinner = (
props: IAINoImageFallbackWithSpinnerProps
) => {
const { sx, ...rest } = props;
const styles = useMemo(
() => ({
w: 'full',
h: 'full',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 'base',
flexDir: 'column',
gap: 2,
userSelect: 'none',
opacity: 0.7,
color: 'base.500',
...sx,
}),
[sx]
);
export const IAINoContentFallbackWithSpinner = memo(
(props: IAINoImageFallbackWithSpinnerProps) => {
const { sx, ...rest } = props;
const styles = useMemo(
() => ({
w: 'full',
h: 'full',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 'base',
flexDir: 'column',
gap: 2,
userSelect: 'none',
opacity: 0.7,
color: 'base.500',
...sx,
}),
[sx]
);
return (
<Flex sx={styles} {...rest}>
<Spinner size="xl" />
{props.label && <InvText textAlign="center">{props.label}</InvText>}
</Flex>
);
};
return (
<Flex sx={styles} {...rest}>
<Spinner size="xl" />
{props.label && <InvText textAlign="center">{props.label}</InvText>}
</Flex>
);
}
);
IAINoContentFallbackWithSpinner.displayName = 'IAINoContentFallbackWithSpinner';

View File

@ -2,36 +2,39 @@ import { Box, forwardRef, Textarea as ChakraTextarea } from '@chakra-ui/react';
import { useGlobalModifiersSetters } from 'common/hooks/useGlobalModifiers';
import { stopPastePropagation } from 'common/util/stopPastePropagation';
import type { KeyboardEvent } from 'react';
import { useCallback } from 'react';
import { memo, useCallback } from 'react';
import ResizeTextarea from 'react-textarea-autosize';
import type { InvAutosizeTextareaProps } from './types';
export const InvAutosizeTextarea = forwardRef<
InvAutosizeTextareaProps,
typeof ResizeTextarea
>((props: InvAutosizeTextareaProps, ref) => {
const { setShift } = useGlobalModifiersSetters();
const onKeyUpDown = useCallback(
(e: KeyboardEvent<HTMLTextAreaElement>) => {
setShift(e.shiftKey);
},
[setShift]
);
return (
<Box pos="relative">
<ChakraTextarea
as={ResizeTextarea}
ref={ref}
overflow="scroll"
w="100%"
resize="none"
minRows={3}
onPaste={stopPastePropagation}
onKeyUp={onKeyUpDown}
onKeyDown={onKeyUpDown}
{...props}
/>
</Box>
);
});
export const InvAutosizeTextarea = memo(
forwardRef<InvAutosizeTextareaProps, typeof ResizeTextarea>(
(props: InvAutosizeTextareaProps, ref) => {
const { setShift } = useGlobalModifiersSetters();
const onKeyUpDown = useCallback(
(e: KeyboardEvent<HTMLTextAreaElement>) => {
setShift(e.shiftKey);
},
[setShift]
);
return (
<Box pos="relative">
<ChakraTextarea
as={ResizeTextarea}
ref={ref}
overflow="scroll"
w="100%"
resize="none"
minRows={3}
onPaste={stopPastePropagation}
onKeyUp={onKeyUpDown}
onKeyDown={onKeyUpDown}
{...props}
/>
</Box>
);
}
)
);
InvAutosizeTextarea.displayName = 'InvAutosizeTextarea';

View File

@ -1,24 +1,33 @@
import { Button, forwardRef } from '@chakra-ui/react';
import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
import { memo } from 'react';
import type { InvButtonProps } from './types';
export const InvButton = forwardRef<InvButtonProps, typeof Button>(
({ isChecked, tooltip, children, ...rest }: InvButtonProps, ref) => {
if (tooltip) {
export const InvButton = memo(
forwardRef<InvButtonProps, typeof Button>(
({ isChecked, tooltip, children, ...rest }: InvButtonProps, ref) => {
if (tooltip) {
return (
<InvTooltip label={tooltip}>
<Button
ref={ref}
colorScheme={isChecked ? 'blue' : 'base'}
{...rest}
>
{children}
</Button>
</InvTooltip>
);
}
return (
<InvTooltip label={tooltip}>
<Button ref={ref} colorScheme={isChecked ? 'blue' : 'base'} {...rest}>
{children}
</Button>
</InvTooltip>
<Button ref={ref} colorScheme={isChecked ? 'blue' : 'base'} {...rest}>
{children}
</Button>
);
}
return (
<Button ref={ref} colorScheme={isChecked ? 'blue' : 'base'} {...rest}>
{children}
</Button>
);
}
)
);
InvButton.displayName = 'InvButton';

View File

@ -1,10 +1,14 @@
import { ButtonGroup, forwardRef } from '@chakra-ui/react';
import { memo } from 'react';
import type { InvButtonGroupProps } from './types';
export const InvButtonGroup = forwardRef<
InvButtonGroupProps,
typeof ButtonGroup
>(({ isAttached = true, ...rest }: InvButtonGroupProps, ref) => {
return <ButtonGroup ref={ref} isAttached={isAttached} {...rest} />;
});
export const InvButtonGroup = memo(
forwardRef<InvButtonGroupProps, typeof ButtonGroup>(
({ isAttached = true, ...rest }: InvButtonGroupProps, ref) => {
return <ButtonGroup ref={ref} isAttached={isAttached} {...rest} />;
}
)
);
InvButtonGroup.displayName = 'InvButtonGroup';

View File

@ -7,7 +7,7 @@ import {
InvAlertDialogOverlay,
} from 'common/components/InvAlertDialog/wrapper';
import { InvButton } from 'common/components/InvButton/InvButton';
import { useCallback, useRef } from 'react';
import { memo, useCallback, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import type { InvConfirmationAlertDialogProps } from './types';
@ -16,59 +16,61 @@ import type { InvConfirmationAlertDialogProps } from './types';
* This component is a wrapper around InvAlertDialog that provides a confirmation dialog.
* Its state must be managed externally using chakra's `useDisclosure()` hook.
*/
export const InvConfirmationAlertDialog = (
props: InvConfirmationAlertDialogProps
) => {
const { t } = useTranslation();
export const InvConfirmationAlertDialog = memo(
(props: InvConfirmationAlertDialogProps) => {
const { t } = useTranslation();
const {
acceptCallback,
cancelCallback,
acceptButtonText = t('common.accept'),
cancelButtonText = t('common.cancel'),
children,
title,
isOpen,
onClose,
} = props;
const {
acceptCallback,
cancelCallback,
acceptButtonText = t('common.accept'),
cancelButtonText = t('common.cancel'),
children,
title,
isOpen,
onClose,
} = props;
const cancelRef = useRef<HTMLButtonElement | null>(null);
const cancelRef = useRef<HTMLButtonElement | null>(null);
const handleAccept = useCallback(() => {
acceptCallback();
onClose();
}, [acceptCallback, onClose]);
const handleAccept = useCallback(() => {
acceptCallback();
onClose();
}, [acceptCallback, onClose]);
const handleCancel = useCallback(() => {
cancelCallback && cancelCallback();
onClose();
}, [cancelCallback, onClose]);
const handleCancel = useCallback(() => {
cancelCallback && cancelCallback();
onClose();
}, [cancelCallback, onClose]);
return (
<InvAlertDialog
isOpen={isOpen}
leastDestructiveRef={cancelRef}
onClose={onClose}
isCentered
>
<InvAlertDialogOverlay>
<InvAlertDialogContent>
<InvAlertDialogHeader fontSize="lg" fontWeight="bold">
{title}
</InvAlertDialogHeader>
return (
<InvAlertDialog
isOpen={isOpen}
leastDestructiveRef={cancelRef}
onClose={onClose}
isCentered
>
<InvAlertDialogOverlay>
<InvAlertDialogContent>
<InvAlertDialogHeader fontSize="lg" fontWeight="bold">
{title}
</InvAlertDialogHeader>
<InvAlertDialogBody>{children}</InvAlertDialogBody>
<InvAlertDialogBody>{children}</InvAlertDialogBody>
<InvAlertDialogFooter>
<InvButton ref={cancelRef} onClick={handleCancel}>
{cancelButtonText}
</InvButton>
<InvButton colorScheme="error" onClick={handleAccept} ml={3}>
{acceptButtonText}
</InvButton>
</InvAlertDialogFooter>
</InvAlertDialogContent>
</InvAlertDialogOverlay>
</InvAlertDialog>
);
};
<InvAlertDialogFooter>
<InvButton ref={cancelRef} onClick={handleCancel}>
{cancelButtonText}
</InvButton>
<InvButton colorScheme="error" onClick={handleAccept} ml={3}>
{acceptButtonText}
</InvButton>
</InvAlertDialogFooter>
</InvAlertDialogContent>
</InvAlertDialogOverlay>
</InvAlertDialog>
);
}
);
InvConfirmationAlertDialog.displayName = 'InvConfirmationAlertDialog';

View File

@ -16,7 +16,7 @@ import type { MenuButtonProps, MenuProps, PortalProps } from '@chakra-ui/react';
import { Portal, useEventListener } from '@chakra-ui/react';
import { InvMenu, InvMenuButton } from 'common/components/InvMenu/wrapper';
import { useGlobalMenuCloseTrigger } from 'common/hooks/useGlobalMenuCloseTrigger';
import { useCallback, useEffect, useRef, useState } from 'react';
import { memo, useCallback, useEffect, useRef, useState } from 'react';
export interface InvContextMenuProps<T extends HTMLElement = HTMLDivElement> {
renderMenu: () => JSX.Element | null;
@ -26,89 +26,91 @@ export interface InvContextMenuProps<T extends HTMLElement = HTMLDivElement> {
menuButtonProps?: MenuButtonProps;
}
export const InvContextMenu = <T extends HTMLElement = HTMLElement>(
props: InvContextMenuProps<T>
) => {
const [isOpen, setIsOpen] = useState(false);
const [isRendered, setIsRendered] = useState(false);
const [isDeferredOpen, setIsDeferredOpen] = useState(false);
const [position, setPosition] = useState<[number, number]>([0, 0]);
const targetRef = useRef<T>(null);
export const InvContextMenu = memo(
<T extends HTMLElement = HTMLElement>(props: InvContextMenuProps<T>) => {
const [isOpen, setIsOpen] = useState(false);
const [isRendered, setIsRendered] = useState(false);
const [isDeferredOpen, setIsDeferredOpen] = useState(false);
const [position, setPosition] = useState<[number, number]>([0, 0]);
const targetRef = useRef<T>(null);
useEffect(() => {
if (isOpen) {
setTimeout(() => {
setIsRendered(true);
useEffect(() => {
if (isOpen) {
setTimeout(() => {
setIsDeferredOpen(true);
setIsRendered(true);
setTimeout(() => {
setIsDeferredOpen(true);
});
});
});
} else {
setIsDeferredOpen(false);
const timeout = setTimeout(() => {
setIsRendered(isOpen);
}, 1000);
return () => clearTimeout(timeout);
}
}, [isOpen]);
} else {
setIsDeferredOpen(false);
const timeout = setTimeout(() => {
setIsRendered(isOpen);
}, 1000);
return () => clearTimeout(timeout);
}
}, [isOpen]);
const onClose = useCallback(() => {
setIsOpen(false);
setIsDeferredOpen(false);
setIsRendered(false);
}, []);
// This is the change from the original chakra-ui-contextmenu
// Close all menus when the globalContextMenuCloseTrigger changes
useGlobalMenuCloseTrigger(onClose);
useEventListener('contextmenu', (e) => {
if (
targetRef.current?.contains(e.target as HTMLElement) ||
e.target === targetRef.current
) {
e.preventDefault();
setIsOpen(true);
setPosition([e.pageX, e.pageY]);
} else {
const onClose = useCallback(() => {
setIsOpen(false);
}
});
setIsDeferredOpen(false);
setIsRendered(false);
}, []);
const onCloseHandler = useCallback(() => {
props.menuProps?.onClose?.();
setIsOpen(false);
}, [props.menuProps]);
// This is the change from the original chakra-ui-contextmenu
// Close all menus when the globalContextMenuCloseTrigger changes
useGlobalMenuCloseTrigger(onClose);
return (
<>
{props.children(targetRef)}
{isRendered && (
<Portal {...props.portalProps}>
<InvMenu
isLazy
isOpen={isDeferredOpen}
gutter={0}
onClose={onCloseHandler}
{...props.menuProps}
>
<InvMenuButton
aria-hidden={true}
w={1}
h={1}
position="absolute"
left={position[0]}
top={position[1]}
cursor="default"
bg="transparent"
size="sm"
_hover={{ bg: 'transparent' }}
{...props.menuButtonProps}
/>
{props.renderMenu()}
</InvMenu>
</Portal>
)}
</>
);
};
useEventListener('contextmenu', (e) => {
if (
targetRef.current?.contains(e.target as HTMLElement) ||
e.target === targetRef.current
) {
e.preventDefault();
setIsOpen(true);
setPosition([e.pageX, e.pageY]);
} else {
setIsOpen(false);
}
});
const onCloseHandler = useCallback(() => {
props.menuProps?.onClose?.();
setIsOpen(false);
}, [props.menuProps]);
return (
<>
{props.children(targetRef)}
{isRendered && (
<Portal {...props.portalProps}>
<InvMenu
isLazy
isOpen={isDeferredOpen}
gutter={0}
onClose={onCloseHandler}
{...props.menuProps}
>
<InvMenuButton
aria-hidden={true}
w={1}
h={1}
position="absolute"
left={position[0]}
top={position[1]}
cursor="default"
bg="transparent"
size="sm"
_hover={{ bg: 'transparent' }}
{...props.menuButtonProps}
/>
{props.renderMenu()}
</InvMenu>
</Portal>
)}
</>
);
}
);
InvContextMenu.displayName = 'InvContextMenu';

View File

@ -5,71 +5,75 @@ import {
forwardRef,
} from '@chakra-ui/react';
import { InvControlGroupContext } from 'common/components/InvControl/InvControlGroup';
import { useContext } from 'react';
import { memo, useContext } from 'react';
import { InvLabel } from './InvLabel';
import type { InvControlProps } from './types';
export const InvControl = forwardRef<InvControlProps, typeof ChakraFormControl>(
(props: InvControlProps, ref) => {
const {
children,
helperText,
feature,
orientation,
renderInfoPopoverInPortal = true,
isDisabled,
labelProps,
label,
...formControlProps
} = props;
export const InvControl = memo(
forwardRef<InvControlProps, typeof ChakraFormControl>(
(props: InvControlProps, ref) => {
const {
children,
helperText,
feature,
orientation,
renderInfoPopoverInPortal = true,
isDisabled,
labelProps,
label,
...formControlProps
} = props;
const ctx = useContext(InvControlGroupContext);
const ctx = useContext(InvControlGroupContext);
if (helperText) {
return (
<ChakraFormControl
ref={ref}
variant="withHelperText"
orientation={orientation ?? ctx.orientation}
isDisabled={isDisabled ?? ctx.isDisabled}
{...formControlProps}
>
<Flex>
{label && (
<InvLabel
feature={feature}
renderInfoPopoverInPortal={renderInfoPopoverInPortal}
{...labelProps}
>
{label}
</InvLabel>
)}
{children}
</Flex>
<ChakraFormHelperText>{helperText}</ChakraFormHelperText>
</ChakraFormControl>
);
}
if (helperText) {
return (
<ChakraFormControl
ref={ref}
variant="withHelperText"
orientation={orientation ?? ctx.orientation}
isDisabled={isDisabled ?? ctx.isDisabled}
orientation={orientation ?? ctx.orientation}
{...formControlProps}
>
<Flex>
{label && (
<InvLabel
feature={feature}
renderInfoPopoverInPortal={renderInfoPopoverInPortal}
{...labelProps}
>
{label}
</InvLabel>
)}
{children}
</Flex>
<ChakraFormHelperText>{helperText}</ChakraFormHelperText>
{label && (
<InvLabel
feature={feature}
renderInfoPopoverInPortal={renderInfoPopoverInPortal}
{...labelProps}
>
{label}
</InvLabel>
)}
{children}
</ChakraFormControl>
);
}
return (
<ChakraFormControl
ref={ref}
isDisabled={isDisabled ?? ctx.isDisabled}
orientation={orientation ?? ctx.orientation}
{...formControlProps}
>
{label && (
<InvLabel
feature={feature}
renderInfoPopoverInPortal={renderInfoPopoverInPortal}
{...labelProps}
>
{label}
</InvLabel>
)}
{children}
</ChakraFormControl>
);
}
)
);
InvControl.displayName = 'InvControl';

View File

@ -1,6 +1,6 @@
import type { FormLabelProps } from '@chakra-ui/react';
import type { PropsWithChildren } from 'react';
import { createContext } from 'react';
import { createContext, memo } from 'react';
export type InvControlGroupProps = {
labelProps?: FormLabelProps;
@ -10,13 +10,14 @@ export type InvControlGroupProps = {
export const InvControlGroupContext = createContext<InvControlGroupProps>({});
export const InvControlGroup = ({
children,
...context
}: PropsWithChildren<InvControlGroupProps>) => {
return (
<InvControlGroupContext.Provider value={context}>
{children}
</InvControlGroupContext.Provider>
);
};
export const InvControlGroup = memo(
({ children, ...context }: PropsWithChildren<InvControlGroupProps>) => {
return (
<InvControlGroupContext.Provider value={context}>
{children}
</InvControlGroupContext.Provider>
);
}
);
InvControlGroup.displayName = 'InvControlGroup';

View File

@ -4,7 +4,7 @@ import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover/IAIInformationalPopover';
import { InvControlGroupContext } from 'common/components/InvControl/InvControlGroup';
import { useContext } from 'react';
import { memo, useContext } from 'react';
import type { InvLabelProps } from './types';
@ -13,31 +13,35 @@ const selector = createSelector(
({ system }) => system.shouldEnableInformationalPopovers
);
export const InvLabel = forwardRef<InvLabelProps, typeof FormLabel>(
(
{ feature, renderInfoPopoverInPortal, children, ...rest }: InvLabelProps,
ref
) => {
const shouldEnableInformationalPopovers = useAppSelector(selector);
const ctx = useContext(InvControlGroupContext);
if (feature && shouldEnableInformationalPopovers) {
export const InvLabel = memo(
forwardRef<InvLabelProps, typeof FormLabel>(
(
{ feature, renderInfoPopoverInPortal, children, ...rest }: InvLabelProps,
ref
) => {
const shouldEnableInformationalPopovers = useAppSelector(selector);
const ctx = useContext(InvControlGroupContext);
if (feature && shouldEnableInformationalPopovers) {
return (
<IAIInformationalPopover
feature={feature}
inPortal={renderInfoPopoverInPortal}
>
<Flex as="span">
<FormLabel ref={ref} {...ctx.labelProps} {...rest}>
{children}
</FormLabel>
</Flex>
</IAIInformationalPopover>
);
}
return (
<IAIInformationalPopover
feature={feature}
inPortal={renderInfoPopoverInPortal}
>
<Flex as="span">
<FormLabel ref={ref} {...ctx.labelProps} {...rest}>
{children}
</FormLabel>
</Flex>
</IAIInformationalPopover>
<FormLabel ref={ref} {...ctx.labelProps} {...rest}>
{children}
</FormLabel>
);
}
return (
<FormLabel ref={ref} {...ctx.labelProps} {...rest}>
{children}
</FormLabel>
);
}
)
);
InvLabel.displayName = 'InvLabel';

View File

@ -1,27 +1,32 @@
import { forwardRef, IconButton } from '@chakra-ui/react';
import type { InvIconButtonProps } from 'common/components/InvIconButton/types';
import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
import { memo } from 'react';
export const InvIconButton = memo(
forwardRef<InvIconButtonProps, typeof IconButton>(
({ isChecked, tooltip, ...rest }: InvIconButtonProps, ref) => {
if (tooltip) {
return (
<InvTooltip label={tooltip}>
<IconButton
ref={ref}
colorScheme={isChecked ? 'blue' : 'base'}
{...rest}
/>
</InvTooltip>
);
}
export const InvIconButton = forwardRef<InvIconButtonProps, typeof IconButton>(
({ isChecked, tooltip, ...rest }: InvIconButtonProps, ref) => {
if (tooltip) {
return (
<InvTooltip label={tooltip}>
<IconButton
ref={ref}
colorScheme={isChecked ? 'blue' : 'base'}
{...rest}
/>
</InvTooltip>
<IconButton
ref={ref}
colorScheme={isChecked ? 'blue' : 'base'}
{...rest}
/>
);
}
return (
<IconButton
ref={ref}
colorScheme={isChecked ? 'blue' : 'base'}
{...rest}
/>
);
}
)
);
InvIconButton.displayName = 'InvIconButton';

View File

@ -2,12 +2,12 @@ import { forwardRef, Input } from '@chakra-ui/react';
import { useGlobalModifiersSetters } from 'common/hooks/useGlobalModifiers';
import { stopPastePropagation } from 'common/util/stopPastePropagation';
import type { KeyboardEvent } from 'react';
import { useCallback } from 'react';
import { memo, useCallback } from 'react';
import type { InvInputProps } from './types';
export const InvInput = forwardRef<InvInputProps, typeof Input>(
(props: InvInputProps, ref) => {
export const InvInput = memo(
forwardRef<InvInputProps, typeof Input>((props: InvInputProps, ref) => {
const { setShift } = useGlobalModifiersSetters();
const onKeyUpDown = useCallback(
(e: KeyboardEvent<HTMLInputElement>) => {
@ -24,5 +24,7 @@ export const InvInput = forwardRef<InvInputProps, typeof Input>(
{...props}
/>
);
}
})
);
InvInput.displayName = 'InvInput';

View File

@ -4,6 +4,7 @@ import {
keyframes,
MenuItem as ChakraMenuItem,
} from '@chakra-ui/react';
import {memo} from'react'
import type { InvMenuItemProps } from './types';
@ -16,29 +17,33 @@ const spin = keyframes`
}
`;
export const InvMenuItem = forwardRef<InvMenuItemProps, typeof ChakraMenuItem>(
(props: InvMenuItemProps, ref) => {
const {
isDestructive = false,
isLoading = false,
isDisabled,
icon,
...rest
} = props;
return (
<ChakraMenuItem
ref={ref}
icon={
isLoading ? (
<SpinnerIcon animation={`${spin} 1s linear infinite`} />
) : (
icon
)
}
isDisabled={isLoading || isDisabled}
data-destructive={isDestructive}
{...rest}
/>
);
}
export const InvMenuItem = memo(
forwardRef<InvMenuItemProps, typeof ChakraMenuItem>(
(props: InvMenuItemProps, ref) => {
const {
isDestructive = false,
isLoading = false,
isDisabled,
icon,
...rest
} = props;
return (
<ChakraMenuItem
ref={ref}
icon={
isLoading ? (
<SpinnerIcon animation={`${spin} 1s linear infinite`} />
) : (
icon
)
}
isDisabled={isLoading || isDisabled}
data-destructive={isDestructive}
{...rest}
/>
);
}
)
);
InvMenuItem.displayName = 'InvMenuItem';

View File

@ -3,20 +3,25 @@ import {
MenuList as ChakraMenuList,
Portal,
} from '@chakra-ui/react';
import { memo } from 'react';
import { menuListMotionProps } from './constants';
import type { InvMenuListProps } from './types';
export const InvMenuList = forwardRef<InvMenuListProps, typeof ChakraMenuList>(
(props: InvMenuListProps, ref) => {
return (
<Portal>
<ChakraMenuList
ref={ref}
motionProps={menuListMotionProps}
{...props}
/>
</Portal>
);
}
export const InvMenuList = memo(
forwardRef<InvMenuListProps, typeof ChakraMenuList>(
(props: InvMenuListProps, ref) => {
return (
<Portal>
<ChakraMenuList
ref={ref}
motionProps={menuListMotionProps}
{...props}
/>
</Portal>
);
}
)
);
InvMenuList.displayName = 'InvMenuList';

View File

@ -5,7 +5,7 @@ import { roundToMultiple } from 'common/util/roundDownToMultiple';
import { stopPastePropagation } from 'common/util/stopPastePropagation';
import { clamp } from 'lodash-es';
import type { FocusEventHandler } from 'react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { memo, useCallback, useEffect, useMemo, useState } from 'react';
import { InvNumberInputField } from './InvNumberInputField';
import { InvNumberInputStepper } from './InvNumberInputStepper';
@ -13,109 +13,121 @@ import type { InvNumberInputProps } from './types';
const isValidCharacter = (char: string) => /^[0-9\-.]$/i.test(char);
export const InvNumberInput = forwardRef<
InvNumberInputProps,
typeof ChakraNumberInput
>((props: InvNumberInputProps, ref) => {
const {
value,
min = 0,
max,
step: _step = 1,
fineStep: _fineStep,
onChange: _onChange,
numberInputFieldProps,
...rest
} = props;
export const InvNumberInput = memo(
forwardRef<InvNumberInputProps, typeof ChakraNumberInput>(
(props: InvNumberInputProps, ref) => {
const {
value,
min = 0,
max,
step: _step = 1,
fineStep: _fineStep,
onChange: _onChange,
numberInputFieldProps,
...rest
} = props;
const [valueAsString, setValueAsString] = useState<string>(String(value));
const [valueAsNumber, setValueAsNumber] = useState<number>(value);
const modifiers = useStore($modifiers);
const step = useMemo(
() => (modifiers.shift ? _fineStep ?? _step : _step),
[modifiers.shift, _fineStep, _step]
);
const isInteger = useMemo(
() => Number.isInteger(_step) && Number.isInteger(_fineStep ?? 1),
[_step, _fineStep]
);
const [valueAsString, setValueAsString] = useState<string>(String(value));
const [valueAsNumber, setValueAsNumber] = useState<number>(value);
const modifiers = useStore($modifiers);
const step = useMemo(
() => (modifiers.shift ? _fineStep ?? _step : _step),
[modifiers.shift, _fineStep, _step]
);
const isInteger = useMemo(
() => Number.isInteger(_step) && Number.isInteger(_fineStep ?? 1),
[_step, _fineStep]
);
const inputMode = useMemo(
() => (isInteger ? 'numeric' : 'decimal'),
[isInteger]
);
const inputMode = useMemo(
() => (isInteger ? 'numeric' : 'decimal'),
[isInteger]
);
const precision = useMemo(() => (isInteger ? 0 : 3), [isInteger]);
const precision = useMemo(() => (isInteger ? 0 : 3), [isInteger]);
const onChange = useCallback(
(valueAsString: string, valueAsNumber: number) => {
setValueAsString(valueAsString);
if (isNaN(valueAsNumber)) {
return;
}
setValueAsNumber(valueAsNumber);
_onChange(valueAsNumber);
},
[_onChange]
);
const onChange = useCallback(
(valueAsString: string, valueAsNumber: number) => {
setValueAsString(valueAsString);
if (isNaN(valueAsNumber)) {
return;
}
setValueAsNumber(valueAsNumber);
_onChange(valueAsNumber);
},
[_onChange]
);
// This appears to be unnecessary? Cannot figure out what it did but leaving it here in case
// it was important.
// const onClickStepper = useCallback(
// () => _onChange(Number(valueAsString)),
// [_onChange, valueAsString]
// );
// This appears to be unnecessary? Cannot figure out what it did but leaving it here in case
// it was important.
// const onClickStepper = useCallback(
// () => _onChange(Number(valueAsString)),
// [_onChange, valueAsString]
// );
const onBlur: FocusEventHandler<HTMLInputElement> = useCallback(
(e) => {
console.log('blur!');
if (!e.target.value) {
// If the input is empty, we set it to the minimum value
onChange(String(min), min);
} else {
// Otherwise, we round the value to the nearest multiple if integer, else 3 decimals
const roundedValue = isInteger
? roundToMultiple(valueAsNumber, _fineStep ?? _step)
: Number(valueAsNumber.toFixed(precision));
// Clamp to min/max
const clampedValue = clamp(roundedValue, min, max);
onChange(String(clampedValue), clampedValue);
}
},
[_fineStep, _step, isInteger, max, min, onChange, precision, valueAsNumber]
);
const onBlur: FocusEventHandler<HTMLInputElement> = useCallback(
(e) => {
console.log('blur!');
if (!e.target.value) {
// If the input is empty, we set it to the minimum value
onChange(String(min), min);
} else {
// Otherwise, we round the value to the nearest multiple if integer, else 3 decimals
const roundedValue = isInteger
? roundToMultiple(valueAsNumber, _fineStep ?? _step)
: Number(valueAsNumber.toFixed(precision));
// Clamp to min/max
const clampedValue = clamp(roundedValue, min, max);
onChange(String(clampedValue), clampedValue);
}
},
[
_fineStep,
_step,
isInteger,
max,
min,
onChange,
precision,
valueAsNumber,
]
);
/**
* When `value` changes (e.g. from a diff source than this component), we need
* to update the internal `valueAsString`, but only if the actual value is different
* from the current value.
*/
useEffect(() => {
if (value !== valueAsNumber) {
setValueAsString(String(value));
setValueAsNumber(value);
/**
* When `value` changes (e.g. from a diff source than this component), we need
* to update the internal `valueAsString`, but only if the actual value is different
* from the current value.
*/
useEffect(() => {
if (value !== valueAsNumber) {
setValueAsString(String(value));
setValueAsNumber(value);
}
}, [value, valueAsNumber]);
return (
<ChakraNumberInput
ref={ref}
min={min}
max={max}
step={step}
value={valueAsString}
onChange={onChange}
clampValueOnBlur={false}
isValidCharacter={isValidCharacter}
focusInputOnChange={false}
onPaste={stopPastePropagation}
inputMode={inputMode}
precision={precision}
variant="filled"
{...rest}
>
<InvNumberInputField onBlur={onBlur} {...numberInputFieldProps} />
<InvNumberInputStepper />
</ChakraNumberInput>
);
}
}, [value, valueAsNumber]);
)
);
return (
<ChakraNumberInput
ref={ref}
min={min}
max={max}
step={step}
value={valueAsString}
onChange={onChange}
clampValueOnBlur={false}
isValidCharacter={isValidCharacter}
focusInputOnChange={false}
onPaste={stopPastePropagation}
inputMode={inputMode}
precision={precision}
variant="filled"
{...rest}
>
<InvNumberInputField onBlur={onBlur} {...numberInputFieldProps} />
<InvNumberInputStepper />
</ChakraNumberInput>
);
});
InvNumberInput.displayName = 'InvNumberInput';

View File

@ -1,11 +1,11 @@
import { NumberInputField as ChakraNumberInputField } from '@chakra-ui/react';
import { useGlobalModifiersSetters } from 'common/hooks/useGlobalModifiers';
import type { KeyboardEventHandler } from 'react';
import { useCallback } from 'react';
import { memo, useCallback } from 'react';
import type { InvNumberInputFieldProps } from './types';
export const InvNumberInputField = (props: InvNumberInputFieldProps) => {
export const InvNumberInputField = memo((props: InvNumberInputFieldProps) => {
const { onKeyUp, onKeyDown, children, ...rest } = props;
const { setShift } = useGlobalModifiersSetters();
@ -29,4 +29,6 @@ export const InvNumberInputField = (props: InvNumberInputFieldProps) => {
{children}
</ChakraNumberInputField>
);
};
});
InvNumberInputField.displayName = 'InvNumberInputField';

View File

@ -5,22 +5,26 @@ import {
NumberIncrementStepper as ChakraNumberIncrementStepper,
NumberInputStepper as ChakraNumberInputStepper,
} from '@chakra-ui/react';
import { memo } from 'react';
import { FaMinus, FaPlus } from 'react-icons/fa6';
import type { InvNumberInputStepperProps } from './types';
export const InvNumberInputStepper = forwardRef<
InvNumberInputStepperProps,
typeof ChakraNumberInputStepper
>((props: InvNumberInputStepperProps, ref) => {
return (
<ChakraNumberInputStepper ref={ref} {...props}>
<ChakraNumberIncrementStepper>
<ChakraIcon as={FaPlus} boxSize={2} />
</ChakraNumberIncrementStepper>
<ChakraNumberDecrementStepper>
<ChakraIcon as={FaMinus} boxSize={2} />
</ChakraNumberDecrementStepper>
</ChakraNumberInputStepper>
);
});
export const InvNumberInputStepper = memo(
forwardRef<InvNumberInputStepperProps, typeof ChakraNumberInputStepper>(
(props: InvNumberInputStepperProps, ref) => {
return (
<ChakraNumberInputStepper ref={ref} {...props}>
<ChakraNumberIncrementStepper>
<ChakraIcon as={FaPlus} boxSize={2} />
</ChakraNumberIncrementStepper>
<ChakraNumberDecrementStepper>
<ChakraIcon as={FaMinus} boxSize={2} />
</ChakraNumberDecrementStepper>
</ChakraNumberInputStepper>
);
}
)
);
InvNumberInputStepper.displayName = 'InvNumberInputStepper';

View File

@ -10,100 +10,113 @@ import type { InvFormattedMark } from 'common/components/InvSlider/types';
import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
import { $modifiers } from 'common/hooks/useGlobalModifiers';
import { AnimatePresence } from 'framer-motion';
import { useCallback, useMemo, useState } from 'react';
import { memo, useCallback, useMemo, useState } from 'react';
import { InvRangeSliderMark } from './InvRangeSliderMark';
import type { InvRangeSliderProps } from './types';
export const InvRangeSlider = (props: InvRangeSliderProps) => {
const {
value,
min,
max,
step: _step = 1,
fineStep: _fineStep,
onChange,
onReset,
formatValue = (v: number) => v.toString(),
marks: _marks,
withThumbTooltip: withTooltip = false,
...sliderProps
} = props;
const [isMouseOverSlider, setIsMouseOverSlider] = useState(false);
const [isChanging, setIsChanging] = useState(false);
export const InvRangeSlider = memo(
forwardRef<InvRangeSliderProps, ChakraRangeSlider>(
(props: InvRangeSliderProps, ref) => {
const {
value,
min,
max,
step: _step = 1,
fineStep: _fineStep,
onChange,
onReset,
formatValue = (v: number) => v.toString(),
marks: _marks,
withThumbTooltip: withTooltip = false,
...sliderProps
} = props;
const [isMouseOverSlider, setIsMouseOverSlider] = useState(false);
const [isChanging, setIsChanging] = useState(false);
const modifiers = useStore($modifiers);
const step = useMemo(
() => (modifiers.shift ? _fineStep ?? _step : _step),
[modifiers.shift, _fineStep, _step]
);
const controlProps = useFormControl({});
const modifiers = useStore($modifiers);
const step = useMemo(
() => (modifiers.shift ? _fineStep ?? _step : _step),
[modifiers.shift, _fineStep, _step]
);
const controlProps = useFormControl({});
const labels = useMemo<string[]>(
() => value.map(formatValue),
[formatValue, value]
);
const labels = useMemo<string[]>(
() => value.map(formatValue),
[formatValue, value]
);
const onMouseEnter = useCallback(() => setIsMouseOverSlider(true), []);
const onMouseLeave = useCallback(() => setIsMouseOverSlider(false), []);
const onChangeStart = useCallback(() => setIsChanging(true), []);
const onChangeEnd = useCallback(() => setIsChanging(false), []);
const onMouseEnter = useCallback(() => setIsMouseOverSlider(true), []);
const onMouseLeave = useCallback(() => setIsMouseOverSlider(false), []);
const onChangeStart = useCallback(() => setIsChanging(true), []);
const onChangeEnd = useCallback(() => setIsChanging(false), []);
const marks = useMemo<InvFormattedMark[]>(() => {
if (_marks === true) {
return [min, max].map((m) => ({ value: m, label: formatValue(m) }));
}
if (_marks) {
return _marks?.map((m) => ({ value: m, label: formatValue(m) }));
}
return [];
}, [_marks, formatValue, max, min]);
const marks = useMemo<InvFormattedMark[]>(() => {
if (_marks === true) {
return [min, max].map((m) => ({ value: m, label: formatValue(m) }));
}
if (_marks) {
return _marks?.map((m) => ({ value: m, label: formatValue(m) }));
}
return [];
}, [_marks, formatValue, max, min]);
return (
<ChakraRangeSlider
value={value}
min={min}
max={max}
step={step}
onChange={onChange}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
focusThumbOnChange={false}
onChangeStart={onChangeStart}
onChangeEnd={onChangeEnd}
{...sliderProps}
{...controlProps}
>
<AnimatePresence>
{marks?.length &&
(isMouseOverSlider || isChanging) &&
marks.map((m, i) => (
<InvRangeSliderMark
key={m.value}
value={m.value}
label={m.label}
index={i}
total={marks.length}
return (
<ChakraRangeSlider
ref={ref}
value={value}
min={min}
max={max}
step={step}
onChange={onChange}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
focusThumbOnChange={false}
onChangeStart={onChangeStart}
onChangeEnd={onChangeEnd}
{...sliderProps}
{...controlProps}
>
<AnimatePresence>
{marks?.length &&
(isMouseOverSlider || isChanging) &&
marks.map((m, i) => (
<InvRangeSliderMark
key={m.value}
value={m.value}
label={m.label}
index={i}
total={marks.length}
/>
))}
</AnimatePresence>
<ChakraRangeSliderTrack>
<ChakraRangeSliderFilledTrack />
</ChakraRangeSliderTrack>
<InvTooltip
isOpen={withTooltip && (isMouseOverSlider || isChanging)}
label={labels[0]}
>
<ChakraRangeSliderThumb
index={0}
onDoubleClick={onReset}
zIndex={0}
/>
))}
</AnimatePresence>
<ChakraRangeSliderTrack>
<ChakraRangeSliderFilledTrack />
</ChakraRangeSliderTrack>
<InvTooltip
isOpen={withTooltip && (isMouseOverSlider || isChanging)}
label={labels[0]}
>
<ChakraRangeSliderThumb index={0} onDoubleClick={onReset} zIndex={0} />
</InvTooltip>
<InvTooltip
isOpen={withTooltip && (isMouseOverSlider || isChanging)}
label={labels[1]}
>
<ChakraRangeSliderThumb index={1} onDoubleClick={onReset} zIndex={0} />
</InvTooltip>
</ChakraRangeSlider>
);
};
</InvTooltip>
<InvTooltip
isOpen={withTooltip && (isMouseOverSlider || isChanging)}
label={labels[1]}
>
<ChakraRangeSliderThumb
index={1}
onDoubleClick={onReset}
zIndex={0}
/>
</InvTooltip>
</ChakraRangeSlider>
);
}
)
);

View File

@ -2,55 +2,55 @@ import { RangeSliderMark as ChakraRangeSliderMark } from '@chakra-ui/react';
import type { InvRangeSliderMarkProps } from 'common/components/InvRangeSlider/types';
import { sliderMarkAnimationConstants } from 'common/components/InvSlider/InvSliderMark';
import { motion } from 'framer-motion';
import { memo } from 'react';
export const InvRangeSliderMark = memo(
({ value, label, index, total }: InvRangeSliderMarkProps) => {
if (index === 0) {
return (
<ChakraRangeSliderMark
as={motion.div}
initial={sliderMarkAnimationConstants.initialFirstLast}
animate={sliderMarkAnimationConstants.animateFirstLast}
exit={sliderMarkAnimationConstants.exitFirstLast}
key={value}
value={value}
sx={sliderMarkAnimationConstants.firstMarkStyle}
>
{label}
</ChakraRangeSliderMark>
);
}
if (index === total - 1) {
return (
<ChakraRangeSliderMark
as={motion.div}
initial={sliderMarkAnimationConstants.initialFirstLast}
animate={sliderMarkAnimationConstants.animateFirstLast}
exit={sliderMarkAnimationConstants.exitFirstLast}
key={value}
value={value}
sx={sliderMarkAnimationConstants.lastMarkStyle}
>
{label}
</ChakraRangeSliderMark>
);
}
export const InvRangeSliderMark = ({
value,
label,
index,
total,
}: InvRangeSliderMarkProps) => {
if (index === 0) {
return (
<ChakraRangeSliderMark
as={motion.div}
initial={sliderMarkAnimationConstants.initialFirstLast}
animate={sliderMarkAnimationConstants.animateFirstLast}
exit={sliderMarkAnimationConstants.exitFirstLast}
initial={sliderMarkAnimationConstants.initialOther}
animate={sliderMarkAnimationConstants.animateOther}
exit={sliderMarkAnimationConstants.exitOther}
key={value}
value={value}
sx={sliderMarkAnimationConstants.firstMarkStyle}
>
{label}
</ChakraRangeSliderMark>
);
}
);
if (index === total - 1) {
return (
<ChakraRangeSliderMark
as={motion.div}
initial={sliderMarkAnimationConstants.initialFirstLast}
animate={sliderMarkAnimationConstants.animateFirstLast}
exit={sliderMarkAnimationConstants.exitFirstLast}
key={value}
value={value}
sx={sliderMarkAnimationConstants.lastMarkStyle}
>
{label}
</ChakraRangeSliderMark>
);
}
return (
<ChakraRangeSliderMark
as={motion.div}
initial={sliderMarkAnimationConstants.initialOther}
animate={sliderMarkAnimationConstants.animateOther}
exit={sliderMarkAnimationConstants.exitOther}
key={value}
value={value}
>
{label}
</ChakraRangeSliderMark>
);
};
InvRangeSliderMark.displayName = 'InvRangeSliderMark';

View File

@ -6,7 +6,7 @@ import { cloneDeep, merge } from 'lodash-es';
import type { UseOverlayScrollbarsParams } from 'overlayscrollbars-react';
import { useOverlayScrollbars } from 'overlayscrollbars-react';
import type { PropsWithChildren } from 'react';
import { useEffect, useRef, useState } from 'react';
import { memo, useEffect, useRef, useState } from 'react';
import type { InvSelectOption } from './types';
@ -25,59 +25,61 @@ const osParams = merge(
overlayScrollbarsParamsOverrides
);
const Scrollable = (
props: PropsWithChildren<{ viewport: HTMLDivElement | null }>
) => {
const { children, viewport } = props;
const Scrollable = memo(
(props: PropsWithChildren<{ viewport: HTMLDivElement | null }>) => {
const { children, viewport } = props;
const targetRef = useRef<HTMLDivElement>(null);
const [initialize, getInstance] = useOverlayScrollbars(osParams);
const targetRef = useRef<HTMLDivElement>(null);
const [initialize, getInstance] = useOverlayScrollbars(osParams);
useEffect(() => {
if (targetRef.current && viewport) {
initialize({
target: targetRef.current,
elements: {
viewport,
},
});
}
return () => getInstance()?.destroy();
}, [viewport, initialize, getInstance]);
useEffect(() => {
if (targetRef.current && viewport) {
initialize({
target: targetRef.current,
elements: {
viewport,
},
});
}
return () => getInstance()?.destroy();
}, [viewport, initialize, getInstance]);
return (
<Box
ref={targetRef}
data-overlayscrollbars=""
border="none"
shadow="dark-lg"
borderRadius="md"
p={1}
>
{children}
</Box>
);
};
export const CustomMenuList = ({
children,
innerRef,
...other
}: CustomMenuListProps) => {
const [viewport, setViewport] = useState<HTMLDivElement | null>(null);
useEffect(() => {
if (!innerRef || !(innerRef instanceof Function)) {
return;
}
innerRef(viewport);
}, [innerRef, viewport]);
return (
<Scrollable viewport={viewport}>
<chakraComponents.MenuList {...other} innerRef={setViewport}>
return (
<Box
ref={targetRef}
data-overlayscrollbars=""
border="none"
shadow="dark-lg"
borderRadius="md"
p={1}
>
{children}
</chakraComponents.MenuList>
</Scrollable>
);
};
</Box>
);
}
);
Scrollable.displayName = 'Scrollable';
export const CustomMenuList = memo(
({ children, innerRef, ...other }: CustomMenuListProps) => {
const [viewport, setViewport] = useState<HTMLDivElement | null>(null);
useEffect(() => {
if (!innerRef || !(innerRef instanceof Function)) {
return;
}
innerRef(viewport);
}, [innerRef, viewport]);
return (
<Scrollable viewport={viewport}>
<chakraComponents.MenuList {...other} innerRef={setViewport}>
{children}
</chakraComponents.MenuList>
</Scrollable>
);
}
);
CustomMenuList.displayName = 'CustomMenuList';

View File

@ -3,6 +3,7 @@ import type { GroupBase, OptionProps } from 'chakra-react-select';
import { chakraComponents } from 'chakra-react-select';
import { InvText } from 'common/components/InvText/wrapper';
import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
import { memo } from 'react';
import type { InvSelectOption } from './types';
@ -12,58 +13,62 @@ type CustomOptionProps = OptionProps<
GroupBase<InvSelectOption>
>;
export const CustomOption = ({ children, ...props }: CustomOptionProps) => {
// On large lists, perf really takes a hit :/
// This improves it drastically and doesn't seem to break anything...
delete props.innerProps.onMouseMove;
delete props.innerProps.onMouseOver;
export const CustomOption = memo(
({ children, ...props }: CustomOptionProps) => {
// On large lists, perf really takes a hit :/
// This improves it drastically and doesn't seem to break anything...
delete props.innerProps.onMouseMove;
delete props.innerProps.onMouseOver;
if (props.data.icon) {
return (
<chakraComponents.Option {...props}>
<InvTooltip label={props.data.tooltip}>
<Flex w="full" h="full" p={1} ps={2} pe={2}>
<Flex ps={1} pe={3} alignItems="center" justifyContent="center">
{props.data.icon}
</Flex>
<Flex flexDir="column">
<InvText>{children}</InvText>
{props.data.description && (
<InvText
data-option-desc
fontSize="sm"
colorScheme="base"
variant="subtext"
noOfLines={1}
>
{props.data.description}
</InvText>
)}
</Flex>
</Flex>
</InvTooltip>
</chakraComponents.Option>
);
}
if (props.data.icon) {
return (
<chakraComponents.Option {...props}>
<InvTooltip label={props.data.tooltip}>
<Flex w="full" h="full" p={1} ps={2} pe={2}>
<Flex ps={1} pe={3} alignItems="center" justifyContent="center">
{props.data.icon}
</Flex>
<Flex flexDir="column">
<InvText>{children}</InvText>
{props.data.description && (
<InvText
data-option-desc
fontSize="sm"
colorScheme="base"
variant="subtext"
noOfLines={1}
>
{props.data.description}
</InvText>
)}
</Flex>
<Flex w="full" h="full" flexDir="column" p={1} px={4}>
<InvText>{children}</InvText>
{props.data.description && (
<InvText
data-option-desc
fontSize="sm"
colorScheme="base"
variant="subtext"
noOfLines={1}
>
{props.data.description}
</InvText>
)}
</Flex>
</InvTooltip>
</chakraComponents.Option>
);
}
);
return (
<chakraComponents.Option {...props}>
<InvTooltip label={props.data.tooltip}>
<Flex w="full" h="full" flexDir="column" p={1} px={4}>
<InvText>{children}</InvText>
{props.data.description && (
<InvText
data-option-desc
fontSize="sm"
colorScheme="base"
variant="subtext"
noOfLines={1}
>
{props.data.description}
</InvText>
)}
</Flex>
</InvTooltip>
</chakraComponents.Option>
);
};
CustomOption.displayName = 'CustomOption';

View File

@ -1,12 +1,15 @@
import { Flex } from '@chakra-ui/react';
import { InvText } from 'common/components/InvText/wrapper';
import { memo } from 'react';
import type { InvSelectFallbackProps } from './types';
export const InvSelectFallback = (props: InvSelectFallbackProps) => (
export const InvSelectFallback = memo((props: InvSelectFallbackProps) => (
<Flex h={8} alignItems="center" justifyContent="center">
<InvText fontSize="sm" color="base.500">
{props.label}
</InvText>
</Flex>
);
));
InvSelectFallback.displayName = 'InvSelectFallback';

View File

@ -4,10 +4,11 @@ import {
InvAccordionItem,
InvAccordionPanel,
} from 'common/components/InvAccordion/wrapper';
import { memo } from 'react';
import type { InvSingleAccordionProps } from './types';
export const InvSingleAccordion = (props: InvSingleAccordionProps) => {
export const InvSingleAccordion = memo((props: InvSingleAccordionProps) => {
return (
<InvAccordion
allowToggle
@ -21,4 +22,6 @@ export const InvSingleAccordion = (props: InvSingleAccordionProps) => {
</InvAccordionItem>
</InvAccordion>
);
};
});
InvSingleAccordion.displayName = 'InvSingleAccordion';

View File

@ -10,12 +10,12 @@ import { InvNumberInput } from 'common/components/InvNumberInput/InvNumberInput'
import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
import { $modifiers } from 'common/hooks/useGlobalModifiers';
import { AnimatePresence } from 'framer-motion';
import { useCallback, useMemo, useState } from 'react';
import { memo, useCallback, useMemo, useState } from 'react';
import { InvSliderMark } from './InvSliderMark';
import type { InvFormattedMark, InvSliderProps } from './types';
export const InvSlider = (props: InvSliderProps) => {
export const InvSlider = memo((props: InvSliderProps) => {
const {
value,
min,
@ -112,4 +112,6 @@ export const InvSlider = (props: InvSliderProps) => {
)}
</>
);
};
});
InvSlider.displayName = 'InvSlider';

View File

@ -3,6 +3,7 @@ import type { SystemStyleObject } from '@chakra-ui/styled-system';
import type { InvSliderMarkProps } from 'common/components/InvSlider/types';
import type { MotionProps } from 'framer-motion';
import { motion } from 'framer-motion';
import { memo } from 'react';
const initialFirstLast: MotionProps['initial'] = { opacity: 0, y: 10 };
const initialOther = { ...initialFirstLast, x: '-50%' };
@ -41,54 +42,53 @@ export const sliderMarkAnimationConstants = {
lastMarkStyle,
};
export const InvSliderMark = ({
value,
label,
index,
total,
}: InvSliderMarkProps) => {
if (index === 0) {
export const InvSliderMark = memo(
({ value, label, index, total }: InvSliderMarkProps) => {
if (index === 0) {
return (
<ChakraSliderMark
as={motion.div}
initial={sliderMarkAnimationConstants.initialFirstLast}
animate={sliderMarkAnimationConstants.animateFirstLast}
exit={sliderMarkAnimationConstants.exitFirstLast}
key={value}
value={value}
sx={sliderMarkAnimationConstants.firstMarkStyle}
>
{label}
</ChakraSliderMark>
);
}
if (index === total - 1) {
return (
<ChakraSliderMark
as={motion.div}
initial={sliderMarkAnimationConstants.initialFirstLast}
animate={sliderMarkAnimationConstants.animateFirstLast}
exit={sliderMarkAnimationConstants.exitFirstLast}
key={value}
value={value}
sx={sliderMarkAnimationConstants.lastMarkStyle}
>
{label}
</ChakraSliderMark>
);
}
return (
<ChakraSliderMark
as={motion.div}
initial={sliderMarkAnimationConstants.initialFirstLast}
animate={sliderMarkAnimationConstants.animateFirstLast}
exit={sliderMarkAnimationConstants.exitFirstLast}
initial={sliderMarkAnimationConstants.initialOther}
animate={sliderMarkAnimationConstants.animateOther}
exit={sliderMarkAnimationConstants.exitOther}
key={value}
value={value}
sx={sliderMarkAnimationConstants.firstMarkStyle}
>
{label}
</ChakraSliderMark>
);
}
);
if (index === total - 1) {
return (
<ChakraSliderMark
as={motion.div}
initial={sliderMarkAnimationConstants.initialFirstLast}
animate={sliderMarkAnimationConstants.animateFirstLast}
exit={sliderMarkAnimationConstants.exitFirstLast}
key={value}
value={value}
sx={sliderMarkAnimationConstants.lastMarkStyle}
>
{label}
</ChakraSliderMark>
);
}
return (
<ChakraSliderMark
as={motion.div}
initial={sliderMarkAnimationConstants.initialOther}
animate={sliderMarkAnimationConstants.animateOther}
exit={sliderMarkAnimationConstants.exitOther}
key={value}
value={value}
>
{label}
</ChakraSliderMark>
);
};
InvSliderMark.displayName = 'InvSliderMark';

View File

@ -2,9 +2,10 @@ import { Spacer } from '@chakra-ui/layout';
import { forwardRef, Tab as ChakraTab } from '@chakra-ui/react';
import { InvBadge } from 'common/components/InvBadge/wrapper';
import type { InvTabProps } from 'common/components/InvTabs/types';
import { memo } from 'react';
export const InvTab = forwardRef<InvTabProps, typeof ChakraTab>(
(props: InvTabProps, ref) => {
export const InvTab = memo(
forwardRef<InvTabProps, typeof ChakraTab>((props: InvTabProps, ref) => {
const { children, badges, ...rest } = props;
return (
<ChakraTab ref={ref} {...rest}>
@ -17,5 +18,7 @@ export const InvTab = forwardRef<InvTabProps, typeof ChakraTab>(
))}
</ChakraTab>
);
}
})
);
InvTab.displayName = 'InvTab';

View File

@ -2,28 +2,32 @@ import { forwardRef, Textarea as ChakraTextarea } from '@chakra-ui/react';
import { useGlobalModifiersSetters } from 'common/hooks/useGlobalModifiers';
import { stopPastePropagation } from 'common/util/stopPastePropagation';
import type { KeyboardEvent } from 'react';
import { useCallback } from 'react';
import { memo, useCallback } from 'react';
import type { InvTextareaProps } from './types';
export const InvTextarea = forwardRef<InvTextareaProps, typeof ChakraTextarea>(
(props: InvTextareaProps, ref) => {
const { ...rest } = props;
const { setShift } = useGlobalModifiersSetters();
const onKeyUpDown = useCallback(
(e: KeyboardEvent<HTMLTextAreaElement>) => {
setShift(e.shiftKey);
},
[setShift]
);
return (
<ChakraTextarea
ref={ref}
onPaste={stopPastePropagation}
onKeyUp={onKeyUpDown}
onKeyDown={onKeyUpDown}
{...rest}
/>
);
}
export const InvTextarea = memo(
forwardRef<InvTextareaProps, typeof ChakraTextarea>(
(props: InvTextareaProps, ref) => {
const { ...rest } = props;
const { setShift } = useGlobalModifiersSetters();
const onKeyUpDown = useCallback(
(e: KeyboardEvent<HTMLTextAreaElement>) => {
setShift(e.shiftKey);
},
[setShift]
);
return (
<ChakraTextarea
ref={ref}
onPaste={stopPastePropagation}
onKeyUp={onKeyUpDown}
onKeyDown={onKeyUpDown}
{...rest}
/>
);
}
)
);
InvTextarea.displayName = 'InvTextarea';

View File

@ -1,19 +1,24 @@
import { forwardRef, Tooltip as ChakraTooltip } from '@chakra-ui/react';
import { memo } from 'react';
import type { InvTooltipProps } from './types';
export const InvTooltip = forwardRef<InvTooltipProps, typeof ChakraTooltip>(
(props: InvTooltipProps, ref) => {
const { children, hasArrow = true, placement = 'top', ...rest } = props;
return (
<ChakraTooltip
ref={ref}
hasArrow={hasArrow}
placement={placement}
{...rest}
>
{children}
</ChakraTooltip>
);
}
export const InvTooltip = memo(
forwardRef<InvTooltipProps, typeof ChakraTooltip>(
(props: InvTooltipProps, ref) => {
const { children, hasArrow = true, placement = 'top', ...rest } = props;
return (
<ChakraTooltip
ref={ref}
hasArrow={hasArrow}
placement={placement}
{...rest}
>
{children}
</ChakraTooltip>
);
}
)
);
InvTooltip.displayName = 'InvTooltip';

View File

@ -1,6 +1,7 @@
import { useAppSelector } from 'app/store/storeHooks';
import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
import type { InvIconButtonProps } from 'common/components/InvIconButton/types';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { FaTrash } from 'react-icons/fa';
@ -8,7 +9,7 @@ type DeleteImageButtonProps = Omit<InvIconButtonProps, 'aria-label'> & {
onClick: () => void;
};
export const DeleteImageButton = (props: DeleteImageButtonProps) => {
export const DeleteImageButton = memo((props: DeleteImageButtonProps) => {
const { onClick, isDisabled } = props;
const { t } = useTranslation();
const isConnected = useAppSelector((state) => state.system.isConnected);
@ -23,4 +24,6 @@ export const DeleteImageButton = (props: DeleteImageButtonProps) => {
colorScheme="error"
/>
);
};
});
DeleteImageButton.displayName = 'DeleteImageButton';

View File

@ -8,13 +8,14 @@ import {
InvModalOverlay,
} from 'common/components/InvModal/wrapper';
import { useDynamicPromptsModal } from 'features/dynamicPrompts/hooks/useDynamicPromptsModal';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import ParamDynamicPromptsMaxPrompts from './ParamDynamicPromptsMaxPrompts';
import ParamDynamicPromptsPreview from './ParamDynamicPromptsPreview';
import ParamDynamicPromptsSeedBehaviour from './ParamDynamicPromptsSeedBehaviour';
export const DynamicPromptsModal = () => {
export const DynamicPromptsModal = memo(() => {
const { t } = useTranslation();
const { isOpen, onClose } = useDynamicPromptsModal();
@ -41,4 +42,6 @@ export const DynamicPromptsModal = () => {
</InvModalContent>
</InvModal>
);
};
});
DynamicPromptsModal.displayName = 'DynamicPromptsModal';

View File

@ -1,10 +1,11 @@
import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
import { useDynamicPromptsModal } from 'features/dynamicPrompts/hooks/useDynamicPromptsModal';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { BsBracesAsterisk } from 'react-icons/bs';
export const ShowDynamicPromptsPreviewButton = () => {
export const ShowDynamicPromptsPreviewButton = memo(() => {
const { t } = useTranslation();
const { isOpen, onOpen } = useDynamicPromptsModal();
return (
@ -19,4 +20,6 @@ export const ShowDynamicPromptsPreviewButton = () => {
/>
</InvTooltip>
);
};
});
ShowDynamicPromptsPreviewButton.displayName = 'ShowDynamicPromptsPreviewButton';

View File

@ -1,5 +1,6 @@
import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { FaCode } from 'react-icons/fa';
@ -8,7 +9,7 @@ type Props = {
onOpen: () => void;
};
export const AddEmbeddingButton = (props: Props) => {
export const AddEmbeddingButton = memo((props: Props) => {
const { onOpen, isOpen } = props;
const { t } = useTranslation();
return (
@ -22,4 +23,6 @@ export const AddEmbeddingButton = (props: Props) => {
/>
</InvTooltip>
);
};
});
AddEmbeddingButton.displayName = 'AddEmbeddingButton';

View File

@ -6,9 +6,10 @@ import {
} from 'common/components/InvPopover/wrapper';
import { EmbeddingSelect } from 'features/embedding/EmbeddingSelect';
import type { EmbeddingPopoverProps } from 'features/embedding/types';
import { memo } from 'react';
import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants';
export const EmbeddingPopover = (props: EmbeddingPopoverProps) => {
export const EmbeddingPopover = memo((props: EmbeddingPopoverProps) => {
const {
onSelect,
isOpen,
@ -43,4 +44,6 @@ export const EmbeddingPopover = (props: EmbeddingPopoverProps) => {
</InvPopoverContent>
</InvPopover>
);
};
});
EmbeddingPopover.displayName = 'EmbeddingPopover';

View File

@ -6,74 +6,75 @@ import { InvSelectFallback } from 'common/components/InvSelect/InvSelectFallback
import { useGroupedModelInvSelect } from 'common/components/InvSelect/useGroupedModelInvSelect';
import type { EmbeddingSelectProps } from 'features/embedding/types';
import { t } from 'i18next';
import { useCallback } from 'react';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import type { TextualInversionModelConfigEntity } from 'services/api/endpoints/models';
import { useGetTextualInversionModelsQuery } from 'services/api/endpoints/models';
const noOptionsMessage = () => t('embedding.noMatchingEmbedding');
export const EmbeddingSelect = ({
onSelect,
onClose,
}: EmbeddingSelectProps) => {
const { t } = useTranslation();
export const EmbeddingSelect = memo(
({ onSelect, onClose }: EmbeddingSelectProps) => {
const { t } = useTranslation();
const currentBaseModel = useAppSelector(
(state) => state.generation.model?.base_model
);
const currentBaseModel = useAppSelector(
(state) => state.generation.model?.base_model
);
const getIsDisabled = (
embedding: TextualInversionModelConfigEntity
): boolean => {
const isCompatible = currentBaseModel === embedding.base_model;
const hasMainModel = Boolean(currentBaseModel);
return !hasMainModel || !isCompatible;
};
const { data, isLoading } = useGetTextualInversionModelsQuery();
const getIsDisabled = (
embedding: TextualInversionModelConfigEntity
): boolean => {
const isCompatible = currentBaseModel === embedding.base_model;
const hasMainModel = Boolean(currentBaseModel);
return !hasMainModel || !isCompatible;
};
const { data, isLoading } = useGetTextualInversionModelsQuery();
const _onChange = useCallback(
(embedding: TextualInversionModelConfigEntity | null) => {
if (!embedding) {
return;
}
onSelect(embedding.model_name);
},
[onSelect]
);
const _onChange = useCallback(
(embedding: TextualInversionModelConfigEntity | null) => {
if (!embedding) {
return;
}
onSelect(embedding.model_name);
},
[onSelect]
);
const { options, onChange } = useGroupedModelInvSelect({
modelEntities: data,
getIsDisabled,
onChange: _onChange,
});
const { options, onChange } = useGroupedModelInvSelect({
modelEntities: data,
getIsDisabled,
onChange: _onChange,
});
if (isLoading) {
return <InvSelectFallback label={t('common.loading')} />;
if (isLoading) {
return <InvSelectFallback label={t('common.loading')} />;
}
if (options.length === 0) {
return <InvSelectFallback label={t('embedding.noEmbeddingsLoaded')} />;
}
return (
<InvControl isDisabled={!options.length}>
<InvSelect
placeholder={t('embedding.addEmbedding')}
defaultMenuIsOpen
autoFocus
value={null}
options={options}
isDisabled={!options.length}
noOptionsMessage={noOptionsMessage}
onChange={onChange}
onMenuClose={onClose}
data-testid="add-embedding"
sx={selectStyles}
/>
</InvControl>
);
}
);
if (options.length === 0) {
return <InvSelectFallback label={t('embedding.noEmbeddingsLoaded')} />;
}
return (
<InvControl isDisabled={!options.length}>
<InvSelect
placeholder={t('embedding.addEmbedding')}
defaultMenuIsOpen
autoFocus
value={null}
options={options}
isDisabled={!options.length}
noOptionsMessage={noOptionsMessage}
onChange={onChange}
onMenuClose={onClose}
data-testid="add-embedding"
sx={selectStyles}
/>
</InvControl>
);
};
EmbeddingSelect.displayName = 'EmbeddingSelect';
const selectStyles: ChakraProps['sx'] = {
w: 'full',

View File

@ -1,29 +1,34 @@
import { InvButton } from 'common/components/InvButton/InvButton';
import type { InvButtonProps } from 'common/components/InvButton/types';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { FaSync } from 'react-icons/fa';
import { useSyncModels } from './useSyncModels';
export const SyncModelsButton = (props: Omit<InvButtonProps, 'children'>) => {
const { t } = useTranslation();
const { syncModels, isLoading } = useSyncModels();
const isSyncModelEnabled = useFeatureStatus('syncModels').isFeatureEnabled;
export const SyncModelsButton = memo(
(props: Omit<InvButtonProps, 'children'>) => {
const { t } = useTranslation();
const { syncModels, isLoading } = useSyncModels();
const isSyncModelEnabled = useFeatureStatus('syncModels').isFeatureEnabled;
if (!isSyncModelEnabled) {
return null;
if (!isSyncModelEnabled) {
return null;
}
return (
<InvButton
isLoading={isLoading}
onClick={syncModels}
leftIcon={<FaSync />}
minW="max-content"
{...props}
>
{t('modelManager.syncModels')}
</InvButton>
);
}
);
return (
<InvButton
isLoading={isLoading}
onClick={syncModels}
leftIcon={<FaSync />}
minW="max-content"
{...props}
>
{t('modelManager.syncModels')}
</InvButton>
);
};
SyncModelsButton.displayName = 'SyncModelsButton';

View File

@ -1,32 +1,35 @@
import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
import type { InvIconButtonProps } from 'common/components/InvIconButton/types';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { FaSync } from 'react-icons/fa';
import { useSyncModels } from './useSyncModels';
export const SyncModelsIconButton = (
props: Omit<InvIconButtonProps, 'aria-label'>
) => {
const { t } = useTranslation();
const { syncModels, isLoading } = useSyncModels();
const isSyncModelEnabled = useFeatureStatus('syncModels').isFeatureEnabled;
export const SyncModelsIconButton = memo(
(props: Omit<InvIconButtonProps, 'aria-label'>) => {
const { t } = useTranslation();
const { syncModels, isLoading } = useSyncModels();
const isSyncModelEnabled = useFeatureStatus('syncModels').isFeatureEnabled;
if (!isSyncModelEnabled) {
return null;
if (!isSyncModelEnabled) {
return null;
}
return (
<InvIconButton
icon={<FaSync />}
tooltip={t('modelManager.syncModels')}
aria-label={t('modelManager.syncModels')}
isLoading={isLoading}
onClick={syncModels}
size="sm"
variant="ghost"
{...props}
/>
);
}
);
return (
<InvIconButton
icon={<FaSync />}
tooltip={t('modelManager.syncModels')}
aria-label={t('modelManager.syncModels')}
isLoading={isLoading}
onClick={syncModels}
size="sm"
variant="ghost"
{...props}
/>
);
};
SyncModelsIconButton.displayName = 'SyncModelsIconButton';

View File

@ -24,7 +24,7 @@ import {
import { $flow } from 'features/nodes/store/reactFlowInstance';
import { bumpGlobalMenuCloseTrigger } from 'features/ui/store/uiSlice';
import type { CSSProperties, MouseEvent } from 'react';
import { useCallback, useMemo, useRef } from 'react';
import { memo, useCallback, useMemo, useRef } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import type {
OnConnect,
@ -77,7 +77,7 @@ const selector = createMemoizedSelector(stateSelector, ({ nodes }) => {
const snapGrid: [number, number] = [25, 25];
export const Flow = () => {
export const Flow = memo(() => {
const dispatch = useAppDispatch();
const nodes = useAppSelector((state) => state.nodes.nodes);
const edges = useAppSelector((state) => state.nodes.edges);
@ -287,4 +287,6 @@ export const Flow = () => {
<Background />
</ReactFlow>
);
};
});
Flow.displayName = 'Flow';

View File

@ -5,7 +5,7 @@ import { InvControl } from 'common/components/InvControl/InvControl';
import { InvNumberInput } from 'common/components/InvNumberInput/InvNumberInput';
import { InvSlider } from 'common/components/InvSlider/InvSlider';
import { heightChanged } from 'features/parameters/store/generationSlice';
import { useCallback } from 'react';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
const selector = createMemoizedSelector(
@ -32,7 +32,7 @@ const selector = createMemoizedSelector(
}
);
export const ParamHeight = () => {
export const ParamHeight = memo(() => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const { initial, height, min, max, inputMax, step, fineStep } =
@ -71,4 +71,6 @@ export const ParamHeight = () => {
/>
</InvControl>
);
};
});
ParamHeight.displayName = 'ParamHeight';

View File

@ -6,10 +6,10 @@ import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover';
import { usePrompt } from 'features/embedding/usePrompt';
import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
import { setNegativePrompt } from 'features/parameters/store/generationSlice';
import { useCallback, useRef } from 'react';
import { memo, useCallback, useRef } from 'react';
import { useTranslation } from 'react-i18next';
export const ParamNegativePrompt = () => {
export const ParamNegativePrompt = memo(() => {
const dispatch = useAppDispatch();
const prompt = useAppSelector((state) => state.generation.negativePrompt);
const textareaRef = useRef<HTMLTextAreaElement>(null);
@ -55,4 +55,6 @@ export const ParamNegativePrompt = () => {
</Box>
</EmbeddingPopover>
);
};
});
ParamNegativePrompt.displayName = 'ParamNegativePrompt';

View File

@ -8,12 +8,12 @@ import { usePrompt } from 'features/embedding/usePrompt';
import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
import { setPositivePrompt } from 'features/parameters/store/generationSlice';
import { SDXLConcatButton } from 'features/sdxl/components/SDXLPrompts/SDXLConcatButton';
import { useCallback, useRef } from 'react';
import { memo, useCallback, useRef } from 'react';
import type { HotkeyCallback } from 'react-hotkeys-hook';
import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next';
export const ParamPositivePrompt = () => {
export const ParamPositivePrompt = memo(() => {
const dispatch = useAppDispatch();
const prompt = useAppSelector((state) => state.generation.positivePrompt);
const baseModel = useAppSelector((state) => state.generation.model)
@ -79,4 +79,6 @@ export const ParamPositivePrompt = () => {
</Box>
</EmbeddingPopover>
);
};
});
ParamPositivePrompt.displayName = 'ParamPositivePrompt';

View File

@ -5,7 +5,7 @@ import { InvControl } from 'common/components/InvControl/InvControl';
import { InvNumberInput } from 'common/components/InvNumberInput/InvNumberInput';
import { InvSlider } from 'common/components/InvSlider/InvSlider';
import { widthChanged } from 'features/parameters/store/generationSlice';
import { useCallback } from 'react';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
const selector = createMemoizedSelector(
@ -31,7 +31,7 @@ const selector = createMemoizedSelector(
};
}
);
export const ParamWidth = () => {
export const ParamWidth = memo(() => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const { initial, width, min, max, inputMax, step, fineStep } =
@ -70,4 +70,6 @@ export const ParamWidth = () => {
/>
</InvControl>
);
};
});
ParamWidth.displayName = 'ParamWidth';

View File

@ -1,9 +1,12 @@
import { useAppSelector } from 'app/store/storeHooks';
import { AspectRatioPreview } from 'common/components/AspectRatioPreview/AspectRatioPreview';
import { memo } from 'react';
export const AspectRatioPreviewWrapper = () => {
export const AspectRatioPreviewWrapper = memo(() => {
const width = useAppSelector((state) => state.generation.width);
const height = useAppSelector((state) => state.generation.height);
return <AspectRatioPreview width={width} height={height} />;
};
});
AspectRatioPreviewWrapper.displayName = 'AspectRatioPreviewWrapper';

View File

@ -7,14 +7,14 @@ import type { InvSelectOption } from 'common/components/InvSelect/types';
import { ASPECT_RATIO_OPTIONS } from 'features/parameters/components/ImageSize/constants';
import { isAspectRatioID } from 'features/parameters/components/ImageSize/types';
import { aspectRatioSelected } from 'features/parameters/store/generationSlice';
import { useCallback, useMemo } from 'react';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { LockAspectRatioButton } from './LockAspectRatioButton';
import { SetOptimalSizeButton } from './SetOptimalSizeButton';
import { SwapDimensionsButton } from './SwapDimensionsButton';
export const AspectRatioSelect = () => {
export const AspectRatioSelect = memo(() => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const aspectRatioID = useAppSelector(
@ -49,6 +49,8 @@ export const AspectRatioSelect = () => {
<SetOptimalSizeButton />
</InvControl>
);
};
});
AspectRatioSelect.displayName = 'AspectRatioSelect';
const selectStyles: SystemStyleObject = { minW: 48 };

View File

@ -1,11 +1,11 @@
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
import { isLockedToggled } from 'features/parameters/store/generationSlice';
import { useCallback } from 'react';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { FaLock, FaLockOpen } from 'react-icons/fa6';
export const LockAspectRatioButton = () => {
export const LockAspectRatioButton = memo(() => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const isLocked = useAppSelector(
@ -24,4 +24,6 @@ export const LockAspectRatioButton = () => {
icon={isLocked ? <FaLock /> : <FaLockOpen />}
/>
);
};
});
LockAspectRatioButton.displayName = 'LockAspectRatioButton';

View File

@ -1,11 +1,11 @@
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
import { sizeReset } from 'features/parameters/store/generationSlice';
import { useCallback } from 'react';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { IoSparkles } from 'react-icons/io5';
export const SetOptimalSizeButton = () => {
export const SetOptimalSizeButton = memo(() => {
const { t } = useTranslation();
const optimalDimension = useAppSelector((state) =>
state.generation.model?.base_model === 'sdxl' ? 1024 : 512
@ -24,4 +24,6 @@ export const SetOptimalSizeButton = () => {
icon={<IoSparkles />}
/>
);
};
});
SetOptimalSizeButton.displayName = 'SetOptimalSizeButton';

View File

@ -1,11 +1,11 @@
import { useAppDispatch } from 'app/store/storeHooks';
import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
import { dimensionsSwapped } from 'features/parameters/store/generationSlice';
import { useCallback } from 'react';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { IoSwapVertical } from 'react-icons/io5';
export const SwapDimensionsButton = () => {
export const SwapDimensionsButton = memo(() => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const onClick = useCallback(() => {
@ -20,4 +20,6 @@ export const SwapDimensionsButton = () => {
icon={<IoSwapVertical />}
/>
);
};
});
SwapDimensionsButton.displayName = 'SwapDimensionsButton';

View File

@ -1,7 +1,7 @@
import { Flex } from '@chakra-ui/layout';
import type { PropsWithChildren } from 'react';
import { memo, type PropsWithChildren } from 'react';
export const PromptOverlayButtonWrapper = (props: PropsWithChildren) => (
export const PromptOverlayButtonWrapper = memo((props: PropsWithChildren) => (
<Flex
pos="absolute"
insetBlockStart={0}
@ -14,4 +14,6 @@ export const PromptOverlayButtonWrapper = (props: PropsWithChildren) => (
>
{props.children}
</Flex>
);
));
PromptOverlayButtonWrapper.displayName = 'PromptOverlayButtonWrapper';

View File

@ -1,12 +1,15 @@
import { Flex } from '@chakra-ui/react';
import { ParamNegativePrompt } from 'features/parameters/components/Core/ParamNegativePrompt';
import { ParamPositivePrompt } from 'features/parameters/components/Core/ParamPositivePrompt';
import { memo } from 'react';
export const Prompts = () => {
export const Prompts = memo(() => {
return (
<Flex flexDir="column" gap={2}>
<ParamPositivePrompt />
<ParamNegativePrompt />
</Flex>
);
};
});
Prompts.displayName = 'Prompts';

View File

@ -3,10 +3,10 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvControl } from 'common/components/InvControl/InvControl';
import { InvNumberInput } from 'common/components/InvNumberInput/InvNumberInput';
import { setSeed } from 'features/parameters/store/generationSlice';
import { useCallback } from 'react';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
export const ParamSeedNumberInput = () => {
export const ParamSeedNumberInput = memo(() => {
const seed = useAppSelector((state) => state.generation.seed);
const shouldRandomizeSeed = useAppSelector(
(state) => state.generation.shouldRandomizeSeed
@ -34,4 +34,6 @@ export const ParamSeedNumberInput = () => {
/>
</InvControl>
);
};
});
ParamSeedNumberInput.displayName = 'ParamSeedNumberInput';

View File

@ -4,10 +4,10 @@ import { InvControl } from 'common/components/InvControl/InvControl';
import { InvSwitch } from 'common/components/InvSwitch/wrapper';
import { setShouldRandomizeSeed } from 'features/parameters/store/generationSlice';
import type { ChangeEvent } from 'react';
import { useCallback } from 'react';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
export const ParamSeedRandomize = () => {
export const ParamSeedRandomize = memo(() => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
@ -29,4 +29,6 @@ export const ParamSeedRandomize = () => {
/>
</InvControl>
);
};
});
ParamSeedRandomize.displayName = 'ParamSeedRandomize';

View File

@ -4,11 +4,11 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvButton } from 'common/components/InvButton/InvButton';
import randomInt from 'common/util/randomInt';
import { setSeed } from 'features/parameters/store/generationSlice';
import { useCallback } from 'react';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { FaShuffle } from 'react-icons/fa6';
export const ParamSeedShuffle = () => {
export const ParamSeedShuffle = memo(() => {
const dispatch = useAppDispatch();
const shouldRandomizeSeed = useAppSelector(
(state: RootState) => state.generation.shouldRandomizeSeed
@ -31,4 +31,6 @@ export const ParamSeedShuffle = () => {
{t('parameters.shuffle')}
</InvButton>
);
};
});
ParamSeedShuffle.displayName = 'ParamSeedShuffle';

View File

@ -6,7 +6,7 @@ import { InvSelect } from 'common/components/InvSelect/InvSelect';
import { useGroupedModelInvSelect } from 'common/components/InvSelect/useGroupedModelInvSelect';
import { vaeSelected } from 'features/parameters/store/generationSlice';
import { pick } from 'lodash-es';
import { useCallback } from 'react';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import type { VaeModelConfigEntity } from 'services/api/endpoints/models';
import { useGetVaeModelsQuery } from 'services/api/endpoints/models';
@ -60,4 +60,4 @@ const ParamVAEModelSelect = () => {
);
};
export default ParamVAEModelSelect;
export default memo(ParamVAEModelSelect);

View File

@ -8,7 +8,7 @@ import { InvNumberInput } from 'common/components/InvNumberInput/InvNumberInput'
import type { InvNumberInputFieldProps } from 'common/components/InvNumberInput/types';
import { setIterations } from 'features/parameters/store/generationSlice';
import { useQueueBack } from 'features/queue/hooks/useQueueBack';
import { useCallback } from 'react';
import { memo, useCallback } from 'react';
import { IoSparkles } from 'react-icons/io5';
import { QueueButtonTooltip } from './QueueButtonTooltip';
@ -40,7 +40,7 @@ const selector = createMemoizedSelector([stateSelector], (state) => {
};
});
export const InvokeQueueBackButton = () => {
export const InvokeQueueBackButton = memo(() => {
const { queueBack, isLoading, isDisabled } = useQueueBack();
const { iterations, step, fineStep } = useAppSelector(selector);
const dispatch = useAppDispatch();
@ -89,4 +89,6 @@ export const InvokeQueueBackButton = () => {
</InvButton>
</Flex>
);
};
});
InvokeQueueBackButton.displayName = 'InvokeQueueBackButton';

View File

@ -9,12 +9,13 @@ import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrent
import { usePauseProcessor } from 'features/queue/hooks/usePauseProcessor';
import { useResumeProcessor } from 'features/queue/hooks/useResumeProcessor';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { FaPause, FaPlay, FaTimes } from 'react-icons/fa';
import { FaList } from 'react-icons/fa6';
import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
export const QueueActionsMenuButton = () => {
export const QueueActionsMenuButton = memo(() => {
const { isOpen, onOpen, onClose } = useDisclosure();
const { t } = useTranslation();
const isPauseEnabled = useFeatureStatus('pauseQueue').isFeatureEnabled;
@ -100,4 +101,6 @@ export const QueueActionsMenuButton = () => {
)}
</Box>
);
};
});
QueueActionsMenuButton.displayName = 'QueueActionsMenuButton';

View File

@ -4,6 +4,7 @@ import ClearQueueButton from 'features/queue/components/ClearQueueButton';
import QueueFrontButton from 'features/queue/components/QueueFrontButton';
import ProgressBar from 'features/system/components/ProgressBar';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { memo } from 'react';
import { InvokeQueueBackButton } from './InvokeQueueBackButton';
import { QueueActionsMenuButton } from './QueueActionsMenuButton';
@ -35,7 +36,7 @@ const QueueControls = () => {
);
};
export default QueueControls;
export default memo(QueueControls);
// const QueueCounts = () => {
// const { t } = useTranslation();

View File

@ -6,11 +6,11 @@ import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover';
import { usePrompt } from 'features/embedding/usePrompt';
import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
import { setNegativeStylePromptSDXL } from 'features/sdxl/store/sdxlSlice';
import { useCallback, useRef } from 'react';
import { memo, useCallback, useRef } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next';
export const ParamSDXLNegativeStylePrompt = () => {
export const ParamSDXLNegativeStylePrompt = memo(() => {
const dispatch = useAppDispatch();
const prompt = useAppSelector((state) => state.sdxl.negativeStylePrompt);
const textareaRef = useRef<HTMLTextAreaElement>(null);
@ -65,4 +65,6 @@ export const ParamSDXLNegativeStylePrompt = () => {
</Box>
</EmbeddingPopover>
);
};
});
ParamSDXLNegativeStylePrompt.displayName = 'ParamSDXLNegativeStylePrompt';

View File

@ -6,10 +6,10 @@ import { EmbeddingPopover } from 'features/embedding/EmbeddingPopover';
import { usePrompt } from 'features/embedding/usePrompt';
import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
import { setPositiveStylePromptSDXL } from 'features/sdxl/store/sdxlSlice';
import { useCallback, useRef } from 'react';
import { memo, useCallback, useRef } from 'react';
import { useTranslation } from 'react-i18next';
export const ParamSDXLPositiveStylePrompt = () => {
export const ParamSDXLPositiveStylePrompt = memo(() => {
const dispatch = useAppDispatch();
const prompt = useAppSelector((state) => state.sdxl.positiveStylePrompt);
const textareaRef = useRef<HTMLTextAreaElement>(null);
@ -55,4 +55,6 @@ export const ParamSDXLPositiveStylePrompt = () => {
</Box>
</EmbeddingPopover>
);
};
});
ParamSDXLPositiveStylePrompt.displayName = 'ParamSDXLPositiveStylePrompt';

View File

@ -2,11 +2,11 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
import { setShouldConcatSDXLStylePrompt } from 'features/sdxl/store/sdxlSlice';
import { useCallback, useMemo } from 'react';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { FaLink, FaUnlink } from 'react-icons/fa';
export const SDXLConcatButton = () => {
export const SDXLConcatButton = memo(() => {
const shouldConcatSDXLStylePrompt = useAppSelector(
(state) => state.sdxl.shouldConcatSDXLStylePrompt
);
@ -38,4 +38,6 @@ export const SDXLConcatButton = () => {
/>
</InvTooltip>
);
};
});
SDXLConcatButton.displayName = 'SDXLConcatButton';

View File

@ -2,11 +2,12 @@ import { Flex } from '@chakra-ui/react';
import { useAppSelector } from 'app/store/storeHooks';
import { ParamNegativePrompt } from 'features/parameters/components/Core/ParamNegativePrompt';
import { ParamPositivePrompt } from 'features/parameters/components/Core/ParamPositivePrompt';
import { memo } from 'react';
import { ParamSDXLNegativeStylePrompt } from './ParamSDXLNegativeStylePrompt';
import { ParamSDXLPositiveStylePrompt } from './ParamSDXLPositiveStylePrompt';
export const SDXLPrompts = () => {
export const SDXLPrompts = memo(() => {
const shouldConcatSDXLStylePrompt = useAppSelector(
(state) => state.sdxl.shouldConcatSDXLStylePrompt
);
@ -18,4 +19,6 @@ export const SDXLPrompts = () => {
{!shouldConcatSDXLStylePrompt && <ParamSDXLNegativeStylePrompt />}
</Flex>
);
};
});
SDXLPrompts.displayName = 'SDXLPrompts';

View File

@ -8,6 +8,7 @@ import ParamSeamlessXAxis from 'features/parameters/components/Seamless/ParamSea
import ParamSeamlessYAxis from 'features/parameters/components/Seamless/ParamSeamlessYAxis';
import ParamVAEModelSelect from 'features/parameters/components/VAEModel/ParamVAEModelSelect';
import ParamVAEPrecision from 'features/parameters/components/VAEModel/ParamVAEPrecision';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
const labelProps: InvLabelProps = {
@ -18,7 +19,7 @@ const labelProps2: InvLabelProps = {
flexGrow: 1,
};
export const AdvancedSettingsAccordion = () => {
export const AdvancedSettingsAccordion = memo(() => {
const { t } = useTranslation();
return (
@ -41,4 +42,6 @@ export const AdvancedSettingsAccordion = () => {
</Flex>
</InvSingleAccordion>
);
};
});
AdvancedSettingsAccordion.displayName = 'AdvancedSettingsAccordion';

View File

@ -21,6 +21,7 @@ import ParamScheduler from 'features/parameters/components/Core/ParamScheduler';
import ParamSteps from 'features/parameters/components/Core/ParamSteps';
import ParamMainModelSelect from 'features/parameters/components/MainModel/ParamMainModelSelect';
import { size, truncate } from 'lodash-es';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
const labelProps: InvLabelProps = {
@ -43,7 +44,7 @@ const badgesSelector = createMemoizedSelector(
}
);
export const GenerationSettingsAccordion = () => {
export const GenerationSettingsAccordion = memo(() => {
const { t } = useTranslation();
const { loraTabBadges, accordionBadges } = useAppSelector(badgesSelector);
@ -86,4 +87,6 @@ export const GenerationSettingsAccordion = () => {
</InvTabs>
</InvSingleAccordion>
);
};
});
GenerationSettingsAccordion.displayName = 'GenerationSettingsAccordion';

View File

@ -23,6 +23,7 @@ import { ParamSeedRandomize } from 'features/parameters/components/Seed/ParamSee
import { ParamSeedShuffle } from 'features/parameters/components/Seed/ParamSeedShuffle';
import type { InvokeTabName } from 'features/ui/store/tabMap';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
const selector = createMemoizedSelector(
@ -49,7 +50,7 @@ const scalingLabelProps: InvLabelProps = {
w: '4.5rem',
};
export const ImageSettingsAccordion = () => {
export const ImageSettingsAccordion = memo(() => {
const { t } = useTranslation();
const { badges, activeTabName } = useAppSelector(selector);
@ -95,9 +96,11 @@ export const ImageSettingsAccordion = () => {
</Flex>
</InvSingleAccordion>
);
};
});
const WidthHeight = (props: { activeTabName: InvokeTabName }) => {
ImageSettingsAccordion.displayName = 'ImageSettingsAccordion';
const WidthHeight = memo((props: { activeTabName: InvokeTabName }) => {
if (props.activeTabName === 'unifiedCanvas') {
return (
<>
@ -113,4 +116,6 @@ const WidthHeight = (props: { activeTabName: InvokeTabName }) => {
<ParamHeight />
</>
);
};
});
WidthHeight.displayName = 'WidthHeight';

View File

@ -5,10 +5,10 @@ import type { InvSelectOnChange } from 'common/components/InvSelect/types';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { languageChanged } from 'features/system/store/systemSlice';
import { isLanguage } from 'features/system/store/types';
import { useCallback, useMemo } from 'react';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
export const SettingsLanguageSelect = () => {
export const SettingsLanguageSelect = memo(() => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const language = useAppSelector((state) => state.system.language);
@ -58,4 +58,6 @@ export const SettingsLanguageSelect = () => {
<InvSelect value={value} options={options} onChange={onChange} />
</InvControl>
);
};
});
SettingsLanguageSelect.displayName = 'SettingsLanguageSelect';

View File

@ -4,10 +4,10 @@ import { InvControl } from 'common/components/InvControl/InvControl';
import { InvSelect } from 'common/components/InvSelect/InvSelect';
import type { InvSelectOnChange } from 'common/components/InvSelect/types';
import { consoleLogLevelChanged } from 'features/system/store/systemSlice';
import { useCallback, useMemo } from 'react';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
export const SettingsLogLevelSelect = () => {
export const SettingsLogLevelSelect = memo(() => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const consoleLogLevel = useAppSelector(
@ -43,4 +43,6 @@ export const SettingsLogLevelSelect = () => {
<InvSelect value={value} options={options} onChange={onChange} />
</InvControl>
);
};
});
SettingsLogLevelSelect.displayName = 'SettingsLogLevelSelect';