github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-16 03:15:07 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): memoize all components

Browse Source
This commit is contained in:
psychedelicious
2023-12-29 14:05:56 +11:00
committed by Kent Keirsey
parent ca4b8e65c1
commit 56527da73e
65 changed files with 1165 additions and 970 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
invokeai/frontend/web/src/common/components/InvControl/InvControl.tsx
View File

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

23
invokeai/frontend/web/src/common/components/InvControl/InvControlGroup.tsx
View File

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

54
invokeai/frontend/web/src/common/components/InvControl/InvLabel.tsx
View File

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