feat: main Added click away logic to commander

Browse Source
This commit is contained in:
Nikolaj Frey 2023-07-02 00:49:01 +10:00
parent a95e6833fb
commit 0a99a50746
3 changed files with 125 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

214
remix/app/components/Commander/Commander.tsx
View File

@ -3,6 +3,7 @@ import { Center, Box, Flex, Input } from '@chakra-ui/react'
import { useThingtime } from '../Thingtime/useThingtime' import { useThingtime } from '../Thingtime/useThingtime'
import { Thingtime } from '../Thingtime/Thingtime' import { Thingtime } from '../Thingtime/Thingtime'
import { sanitise } from '~/functions/path' import { sanitise } from '~/functions/path'
import ClickAwayListener from 'react-click-away-listener'
export const Commander = props => { export const Commander = props => {
const { thingtime, setThingtime, getThingtime, thingtimeRef } = useThingtime() const { thingtime, setThingtime, getThingtime, thingtimeRef } = useThingtime()
@ -175,7 +176,12 @@ export const Commander = props => {
const fn = `() => { return ${escapedCommandValue} }` const fn = `() => { return ${escapedCommandValue} }`
const evalFn = eval(fn) const evalFn = eval(fn)
const realVal = evalFn() const realVal = evalFn()
const prevVal = getThingtime(commandPath)
setThingtime(commandPath, realVal) setThingtime(commandPath, realVal)
if (!prevVal) {
setContextPath(commandPath)
setShowContext(true, 'commandIsAction check')
}
} catch (err) { } catch (err) {
console.log('setThingtime errored in Commander', err) console.log('setThingtime errored in Commander', err)
} }
@ -277,123 +283,125 @@ export const Commander = props => {
}, []) }, [])
return ( return (
<Flex <ClickAwayListener onClickAway={closeCommander}>
id='commander'
// display={['flex', showCommander ? 'flex' : 'none']}
justifyContent={['flex-start', 'center']}
// zIndex={99999}
// position='fixed'
// top='100px'
pointerEvents={'none'}
position='absolute'
h='100%'
top={0}
left={0}
right={0}
py={1}
px={1}
maxW='100%'
>
<Flex <Flex
alignItems={['flex-start', 'center']} id='commander'
// display={['flex', showCommander ? 'flex' : 'none']}
justifyContent={['flex-start', 'center']}
// zIndex={99999}
// position='fixed'
// top='100px'
pointerEvents={'none'}
position='absolute' position='absolute'
top={'100%'} h='100%'
maxH='90vh' top={0}
overflowY='scroll'
left={0} left={0}
right={0} right={0}
h='auto' py={1}
mt={2} px={1}
mx={1}
maxW='100%' maxW='100%'
borderRadius={'12px'}
flexDir='column'
> >
<Flex <Flex
display={renderedSuggestions?.length ? 'flex' : 'none'} alignItems={['flex-start', 'center']}
w={['100%', '400px']} position='absolute'
maxW={'100%'} top={'100%'}
bg='grey' maxH='90vh'
overflowY='scroll'
left={0}
right={0}
h='auto'
mt={2}
mx={1}
maxW='100%'
borderRadius={'12px'} borderRadius={'12px'}
flexDir='column' flexDir='column'
id='commander-suggestions'
py={3}
mb={3}
pointerEvents={'all'}
> >
{renderedSuggestions.map((suggestion, i) => { <Flex
return ( display={renderedSuggestions?.length ? 'flex' : 'none'}
<Flex w={['100%', '400px']}
cursor='pointer' maxW={'100%'}
px={4} bg='grey'
_hover={{ borderRadius={'12px'}
bg: 'greys.medium' flexDir='column'
}} id='commander-suggestions'
key={i} py={3}
onClick={() => selectSuggestion(suggestion)} mb={3}
> pointerEvents={'all'}
{suggestion} >
</Flex> {renderedSuggestions.map((suggestion, i) => {
) return (
})} <Flex
cursor='pointer'
px={4}
_hover={{
bg: 'greys.medium'
}}
key={i}
onClick={() => selectSuggestion(suggestion)}
>
{suggestion}
</Flex>
)
})}
</Flex>
<Flex
display={showContext ? 'flex' : 'none'}
maxW='100%'
py={3}
borderRadius={'12px'}
bg='grey'
pointerEvents={'all'}
>
<Thingtime thing={contextValue}></Thingtime>
</Flex>
</Flex> </Flex>
<Flex <Center
display={showContext ? 'flex' : 'none'} position='relative'
maxW='100%'
py={3}
borderRadius={'12px'}
bg='grey' bg='grey'
w={['100%', '400px']}
maxW={[mobileVW, '100%']}
h='100%'
outline={'none'}
overflow='hidden'
p={'1px'}
borderRadius={'6px'}
pointerEvents={'all'} pointerEvents={'all'}
> >
<Thingtime thing={contextValue}></Thingtime> <Box
</Flex> position='absolute'
</Flex> width='105%'
<Center pb={'105%'}
position='relative' bg={
bg='grey' 'conic-gradient(#f34a4a, #ffbc48, #58ca70, #47b5e6, #a555e8, #f34a4a)'
w={['100%', '400px']}
maxW={[mobileVW, '100%']}
h='100%'
outline={'none'}
overflow='hidden'
p={'1px'}
borderRadius={'6px'}
pointerEvents={'all'}
>
<Box
position='absolute'
width='105%'
pb={'105%'}
bg={
'conic-gradient(#f34a4a, #ffbc48, #58ca70, #47b5e6, #a555e8, #f34a4a)'
}
sx={{
'@keyframes rainbow-conical': {
'100%': {
transform: 'rotate(-360deg)'
}
},
animation: 'rainbow-conical 1s linear infinite'
}}
></Box>
<Input
ref={inputRef}
h='100%'
borderRadius={'5px'}
outline={'none'}
border={'none'}
value={value}
onChange={onChange}
onKeyDown={onKeyDown}
w='100%'
sx={{
'&::placeholder': {
color: 'greys.dark'
} }
}} sx={{
placeholder={"What's on your mind?"} '@keyframes rainbow-conical': {
></Input> '100%': {
</Center> transform: 'rotate(-360deg)'
</Flex> }
},
animation: 'rainbow-conical 1s linear infinite'
}}
></Box>
<Input
ref={inputRef}
h='100%'
borderRadius={'5px'}
outline={'none'}
border={'none'}
value={value}
onChange={onChange}
onKeyDown={onKeyDown}
w='100%'
sx={{
'&::placeholder': {
color: 'greys.dark'
}
}}
placeholder={"What's on your mind?"}
></Input>
</Center>
</Flex>
</ClickAwayListener>
) )
} }

1
remix/package.json
View File

@ -15,6 +15,7 @@
"isbot": "latest", "isbot": "latest",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"react": "^18.2.0", "react": "^18.2.0",
"react-click-away-listener": "^2.2.3",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"uuid": "^9.0.0" "uuid": "^9.0.0"
}, },

13
remix/pnpm-lock.yaml
View File

@ -32,6 +32,9 @@ dependencies:
react: react:
specifier: ^18.2.0 specifier: ^18.2.0
version: 18.2.0 version: 18.2.0
react-click-away-listener:
specifier: ^2.2.3
version: 2.2.3(react-dom@18.2.0)(react@18.2.0)
react-dom: react-dom:
specifier: ^18.2.0 specifier: ^18.2.0
version: 18.2.0(react@18.2.0) version: 18.2.0(react@18.2.0)
@ -7644,6 +7647,16 @@ packages:
iconv-lite: 0.4.24 iconv-lite: 0.4.24
unpipe: 1.0.0 unpipe: 1.0.0
/react-click-away-listener@2.2.3(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-p63JRQtK9d085+QHUJ2Pje22P/N4tEaXsS2x7tbbptriQqZ9o8xEk7G1JrxwND5YmEVc/VO4fC3+cSBsqqgLUQ==}
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
dependencies:
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
dev: false
/react-clientside-effect@1.2.6(react@18.2.0): /react-clientside-effect@1.2.6(react@18.2.0):
resolution: {integrity: sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==} resolution: {integrity: sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==}
peerDependencies: peerDependencies: