mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
feat(ui): memoize all components
This commit is contained in:
parent
ca4b8e65c1
commit
56527da73e
@ -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';
|
||||
|
@ -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 (
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
)
|
||||
);
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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',
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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 };
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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);
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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();
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
Loading…
Reference in New Issue
Block a user