Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): fix typing issues

Browse Source
This commit is contained in:
psychedelicious 2023-12-29 14:30:06 +11:00 committed by Kent Keirsey
parent 56527da73e
commit 300805a25a
5 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
invokeai/frontend/web/src/common/components/InvContextMenu/InvContextMenu.tsx
View File

@ -16,7 +16,8 @@ import type { MenuButtonProps, MenuProps, PortalProps } from '@chakra-ui/react';
import { Portal, useEventListener } from '@chakra-ui/react'; import { Portal, useEventListener } from '@chakra-ui/react';
import { InvMenu, InvMenuButton } from 'common/components/InvMenu/wrapper'; import { InvMenu, InvMenuButton } from 'common/components/InvMenu/wrapper';
import { useGlobalMenuCloseTrigger } from 'common/hooks/useGlobalMenuCloseTrigger'; import { useGlobalMenuCloseTrigger } from 'common/hooks/useGlobalMenuCloseTrigger';
import { memo, useCallback, useEffect, useRef, useState } from 'react'; import { typedMemo } from 'common/util/typedMemo';
import { useCallback, useEffect, useRef, useState } from 'react';
export interface InvContextMenuProps<T extends HTMLElement = HTMLDivElement> { export interface InvContextMenuProps<T extends HTMLElement = HTMLDivElement> {
renderMenu: () => JSX.Element | null; renderMenu: () => JSX.Element | null;
@ -26,7 +27,7 @@ export interface InvContextMenuProps<T extends HTMLElement = HTMLDivElement> {
menuButtonProps?: MenuButtonProps; menuButtonProps?: MenuButtonProps;
} }
export const InvContextMenu = memo( export const InvContextMenu = typedMemo(
<T extends HTMLElement = HTMLElement>(props: InvContextMenuProps<T>) => { <T extends HTMLElement = HTMLElement>(props: InvContextMenuProps<T>) => {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [isRendered, setIsRendered] = useState(false); const [isRendered, setIsRendered] = useState(false);
@ -113,4 +114,6 @@ export const InvContextMenu = memo(
} }
); );
InvContextMenu.displayName = 'InvContextMenu'; Object.assign(InvContextMenu, {
displayName: 'InvContextMenu',
});

2
invokeai/frontend/web/src/common/components/InvMenu/InvMenuItem.tsx
View File

@ -4,7 +4,7 @@ import {
keyframes, keyframes,
MenuItem as ChakraMenuItem, MenuItem as ChakraMenuItem,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import {memo} from'react' import { memo } from 'react';
import type { InvMenuItemProps } from './types'; import type { InvMenuItemProps } from './types';

3
invokeai/frontend/web/src/common/components/InvRangeSlider/InvRangeSlider.tsx
View File

@ -1,4 +1,5 @@
import { import {
forwardRef,
RangeSlider as ChakraRangeSlider, RangeSlider as ChakraRangeSlider,
RangeSliderFilledTrack as ChakraRangeSliderFilledTrack, RangeSliderFilledTrack as ChakraRangeSliderFilledTrack,
RangeSliderThumb as ChakraRangeSliderThumb, RangeSliderThumb as ChakraRangeSliderThumb,
@ -16,7 +17,7 @@ import { InvRangeSliderMark } from './InvRangeSliderMark';
import type { InvRangeSliderProps } from './types'; import type { InvRangeSliderProps } from './types';
export const InvRangeSlider = memo( export const InvRangeSlider = memo(
forwardRef<InvRangeSliderProps, ChakraRangeSlider>( forwardRef<InvRangeSliderProps, typeof ChakraRangeSlider>(
(props: InvRangeSliderProps, ref) => { (props: InvRangeSliderProps, ref) => {
const { const {
value, value,

6
invokeai/frontend/web/src/common/util/typedMemo.ts Normal file
View File

@ -0,0 +1,6 @@
import { memo } from 'react';
/**
* A typed version of React.memo, useful for components that take generics.
*/
export const typedMemo: <T>(c: T) => T = memo;

2
invokeai/frontend/web/src/features/queue/components/QueueControls.stories.tsx
View File

@ -12,5 +12,5 @@ export default meta;
type Story = StoryObj<typeof QueueControls>; type Story = StoryObj<typeof QueueControls>;
export const Default: Story = { export const Default: Story = {
render: QueueControls, render: () => <QueueControls />,
}; };