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: Lint Errors (returning possible null component)

Browse Source
This commit is contained in:
blessedcoolant 2023-07-28 19:03:29 +12:00
parent f155b03eee
commit 14c4650801
2 changed files with 120 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx
View File

@ -13,6 +13,10 @@ export default function ParamSDXLPromptArea() {
(state: RootState) => state.ui.shouldPinParametersPanel (state: RootState) => state.ui.shouldPinParametersPanel
); );
const shouldConcatSDXLStylePrompt = useAppSelector(
(state: RootState) => state.sdxl.shouldConcatSDXLStylePrompt
);
return ( return (
<Flex <Flex
sx={{ sx={{
@ -20,24 +24,28 @@ export default function ParamSDXLPromptArea() {
gap: 2, gap: 2,
}} }}
> >
<Box {shouldConcatSDXLStylePrompt && (
sx={{ <Box
position: 'absolute', sx={{
w: 'full', position: 'absolute',
top: shouldPinParametersPanel ? '119px' : '175px', w: 'full',
}} top: shouldPinParametersPanel ? '119px' : '175px',
> }}
<SDXLConcatLink /> >
</Box> <SDXLConcatLink />
<Box </Box>
sx={{ )}
position: 'absolute', {shouldConcatSDXLStylePrompt && (
w: 'full', <Box
top: shouldPinParametersPanel ? '263px' : '319px', sx={{
}} position: 'absolute',
> w: 'full',
<SDXLConcatLink /> top: shouldPinParametersPanel ? '263px' : '319px',
</Box> }}
>
<SDXLConcatLink />
</Box>
)}
<ParamPositiveConditioning /> <ParamPositiveConditioning />
<ParamSDXLConcatButton /> <ParamSDXLConcatButton />
<ParamSDXLPositiveStyleConditioning /> <ParamSDXLPositiveStyleConditioning />

195
invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx
View File

@ -1,112 +1,105 @@
import { Box, Flex } from '@chakra-ui/react'; import { Box, Flex } from '@chakra-ui/react';
import { RootState } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { FaLink } from 'react-icons/fa'; import { FaLink } from 'react-icons/fa';
export default function SDXLConcatLink() { export default function SDXLConcatLink() {
const shouldConcatSDXLStylePrompt = useAppSelector(
(state: RootState) => state.sdxl.shouldConcatSDXLStylePrompt
);
return ( return (
shouldConcatSDXLStylePrompt && ( <Flex
<Flex sx={{
h: 0.5,
placeContent: 'center',
gap: 2,
flexDirection: 'column',
}}
>
<Box
as={motion.div}
initial={{
scaleX: 0,
borderRadius: 0,
borderWidth: 0,
display: 'none',
}}
animate={{
display: ['block', 'block', 'block', 'none'],
scaleX: [0, 0.25, 0.5, 1],
borderRadius: [0, 0, 0, 3],
borderWidth: [0, 3, 3, 0],
transition: { duration: 0.5, times: [0, 0.25, 0.5, 1] },
}}
sx={{ sx={{
h: 0.5, position: 'absolute',
placeContent: 'center', top: '1px',
gap: 2, bg: 'none',
flexDirection: 'column', w: 'full',
minH: 2,
borderTop: 'none',
borderTopRadius: 0,
borderColor: 'accent.300',
zIndex: 2,
_dark: {
borderColor: 'accent.600',
},
}}
/>
<Box
as={motion.div}
initial={{
opacity: 0,
scale: 0,
rotate: 0,
}}
animate={{
rotate: 360,
opacity: [0, 1, 1, 1],
scale: [0, 0.75, 1.5, 1],
transition: { duration: 0.6, times: [0, 0.25, 0.5, 1] },
}}
sx={{
zIndex: 3,
position: 'absolute',
left: '48%',
top: '3px',
p: 1,
borderRadius: 4,
bg: 'accent.200',
_dark: {
bg: 'accent.500',
},
}} }}
> >
<Box <FaLink size={12} />
as={motion.div} </Box>
initial={{ <Box
scaleX: 0, as={motion.div}
borderRadius: 0, initial={{
borderWidth: 0, scaleX: 0,
display: 'none', borderRadius: 0,
}} borderWidth: 0,
animate={{ display: 'none',
display: ['block', 'block', 'block', 'none'], }}
scaleX: [0, 0.25, 0.5, 1], animate={{
borderRadius: [0, 0, 0, 3], display: ['block', 'block', 'block', 'none'],
borderWidth: [0, 3, 3, 0], scaleX: [0, 0.25, 0.5, 1],
transition: { duration: 0.5, times: [0, 0.25, 0.5, 1] }, borderRadius: [0, 0, 0, 3],
}} borderWidth: [0, 3, 3, 0],
sx={{ transition: { duration: 0.5, times: [0, 0.25, 0.5, 1] },
position: 'absolute', }}
top: '1px', sx={{
bg: 'none', position: 'absolute',
w: 'full', top: '17px',
minH: 2, bg: 'none',
borderTop: 'none', w: 'full',
borderTopRadius: 0, minH: 2,
borderColor: 'accent.300', borderBottom: 'none',
zIndex: 2, borderBottomRadius: 0,
_dark: { borderColor: 'accent.300',
borderColor: 'accent.600', zIndex: 2,
}, _dark: {
}} borderColor: 'accent.600',
/> },
<Box }}
as={motion.div} />
initial={{ </Flex>
opacity: 0,
scale: 0,
rotate: 0,
}}
animate={{
rotate: 360,
opacity: [0, 1, 1, 1],
scale: [0, 0.75, 1.5, 1],
transition: { duration: 0.6, times: [0, 0.25, 0.5, 1] },
}}
sx={{
zIndex: 3,
position: 'absolute',
left: '48%',
top: '3px',
p: 1,
borderRadius: 4,
bg: 'accent.200',
_dark: {
bg: 'accent.500',
},
}}
>
<FaLink size={12} />
</Box>
<Box
as={motion.div}
initial={{
scaleX: 0,
borderRadius: 0,
borderWidth: 0,
display: 'none',
}}
animate={{
display: ['block', 'block', 'block', 'none'],
scaleX: [0, 0.25, 0.5, 1],
borderRadius: [0, 0, 0, 3],
borderWidth: [0, 3, 3, 0],
transition: { duration: 0.5, times: [0, 0.25, 0.5, 1] },
}}
sx={{
position: 'absolute',
top: '17px',
bg: 'none',
w: 'full',
minH: 2,
borderBottom: 'none',
borderBottomRadius: 0,
borderColor: 'accent.300',
zIndex: 2,
_dark: {
borderColor: 'accent.600',
},
}}
/>
</Flex>
)
); );
} }