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
);
const shouldConcatSDXLStylePrompt = useAppSelector(
(state: RootState) => state.sdxl.shouldConcatSDXLStylePrompt
);
return (
<Flex
sx={{
@ -20,24 +24,28 @@ export default function ParamSDXLPromptArea() {
gap: 2,
}}
>
<Box
sx={{
position: 'absolute',
w: 'full',
top: shouldPinParametersPanel ? '119px' : '175px',
}}
>
<SDXLConcatLink />
</Box>
<Box
sx={{
position: 'absolute',
w: 'full',
top: shouldPinParametersPanel ? '263px' : '319px',
}}
>
<SDXLConcatLink />
</Box>
{shouldConcatSDXLStylePrompt && (
<Box
sx={{
position: 'absolute',
w: 'full',
top: shouldPinParametersPanel ? '119px' : '175px',
}}
>
<SDXLConcatLink />
</Box>
)}
{shouldConcatSDXLStylePrompt && (
<Box
sx={{
position: 'absolute',
w: 'full',
top: shouldPinParametersPanel ? '263px' : '319px',
}}
>
<SDXLConcatLink />
</Box>
)}
<ParamPositiveConditioning />
<ParamSDXLConcatButton />
<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 { RootState } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { motion } from 'framer-motion';
import { FaLink } from 'react-icons/fa';
export default function SDXLConcatLink() {
const shouldConcatSDXLStylePrompt = useAppSelector(
(state: RootState) => state.sdxl.shouldConcatSDXLStylePrompt
);
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={{
h: 0.5,
placeContent: 'center',
gap: 2,
flexDirection: 'column',
position: 'absolute',
top: '1px',
bg: 'none',
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
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: '1px',
bg: 'none',
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',
},
}}
>
<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>
)
<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>
);
}