import React, { useState } from 'react';
import ClickAwayListener from 'react-click-away-listener';
import { Center, Flex, Text } from '@chakra-ui/react';
import { Icon } from '../Icon/Icon';
import { useThingtime } from './useThingtime';
export const SettingsMenu = (props) => {
const [show, setShow] = useState(false);
const hideRef = React.useRef(null);
const [opacity, setOpacity] = React.useState(props?.opacity === 0 ? 0 : 1);
const [pinStatus, setPinStatus] = React.useState(false);
const stateRef = React.useRef({
pinStatus
});
React.useEffect(() => {
stateRef.current.pinStatus = pinStatus;
}, [pinStatus]);
const { thingtime, events } = useThingtime();
const opacityRef = React.useRef(null);
const waitTime = 1555;
const [uuid, setUuid] = React.useState(null);
React.useEffect(() => {
setUuid(Math.random().toString(36).substring(7));
}, []);
React.useEffect(() => {
const subscription = events.subscribe((event) => {
if (event?.type === 'settings-menu-hide' && event?.uuid !== uuid) {
if (!stateRef?.current?.pinStatus || event?.force) {
setShow(false);
setOpacity(0);
}
}
});
return () => {
subscription?.unsubscribe?.();
};
}, [events, uuid]);
React.useEffect(() => {
clearInterval(opacityRef?.current);
if (props?.opacity) {
setOpacity(props?.opacity);
} else {
opacityRef.current = setInterval(() => {
if (!stateRef?.current?.pinStatus) {
setOpacity(props?.opacity);
setShow(false);
}
}, waitTime);
}
}, [props?.opacity]);
React.useEffect(() => {
if (show || props?.opacity) {
clearInterval(hideRef?.current);
events.next({
type: 'settings-menu-hide',
uuid
});
} else if (!show) {
setPinStatus(false);
}
}, [show, props?.opacity, events, uuid]);
const maybeHide = React.useCallback(() => {
clearInterval(hideRef?.current);
hideRef.current = setTimeout(() => {
if (!stateRef?.current?.pinStatus) {
setShow(false);
setOpacity(0);
}
}, waitTime);
}, []);
const showMenu = React.useCallback(() => {
clearInterval(hideRef?.current);
setShow(true);
}, []);
const hideMenu = React.useCallback(() => {
setShow(false);
}, []);
const basePadding = React.useMemo(() => {
return 4;
}, []);
const types = React.useMemo(() => {
const baseTypes = thingtime?.settings?.types?.javascript || {};
const baseTypeKeys = Object.keys(baseTypes);
const customTypes = thingtime?.settings?.types?.custom || {};
const customTypeKeysRaw = Object.keys(customTypes);
const customTypeKeys = customTypeKeysRaw?.filter((key) => {
return !baseTypeKeys?.includes?.(key);
});
const types = [
...(baseTypeKeys?.map?.((key) => {
return {
...baseTypes?.[key],
key
};
}) || []),
...(customTypeKeys?.map?.((key) => {
return {
...customTypes?.[key],
key
};
}) || [])
];
return types;
}, [thingtime?.settings?.types?.javascript, thingtime?.settings?.types?.custom]);
const onType = React.useCallback(
(args) => {
props?.onType?.(args);
},
[props?.onType]
);
const onDelete = React.useCallback(
(type) => {
props?.onDelete?.();
},
[props?.onDelete]
);
const childIconSize = 10;
const iconSize = props?.iconSize || 7;
return (
<ClickAwayListener onClickAway={hideMenu}>
<Center
position="relative"
// width="100%"
paddingRight={36}
opacity={opacity}
transition={props?.transition || 'all 0.2s ease-in-out'}
onMouseEnter={showMenu}
onMouseLeave={maybeHide}
>
<Flex
paddingLeft={1}
// opacity={showContextIcon ? 1 : 0}
cursor="pointer"
// onClick={deleteValue}
transition="all 0.2s ease-in-out"
// add title for hover context
title={`Options`}
>
<Icon name="wizard" size={iconSize}></Icon>
</Flex>
<Flex
position="absolute"
zIndex={999}
top="100%"
left={0}
flexDirection="column"
opacity={show ? 1 : 0}
pointerEvents={show ? 'all' : 'none'}
>
<Flex
position="absolute"
top={0}
right={0}
padding="5px"
cursor="pointer"
onClick={() => setPinStatus((prev) => !prev)}
title={`Pin Options`}
>
{show === true && <Icon opacity={pinStatus ? 1 : 0.5} name={pinStatus ? 'pinned' : 'pin'} size="8px"></Icon>}
</Flex>
{/* edit mode menu item */}
<Flex
flexDirection="column"
// rowGap={basePadding / 3}
background="greys.lightt"
borderRadius={4}
boxShadow={props?.boxShadow || '0px 2px 7px 0px rgba(0,0,0,0.2)'}
paddingY={basePadding}
>
<Flex
alignItems="center"
flexDirection="row"
// paddingRight={basePadding}
paddingLeft={basePadding}
_hover={{
background: 'greys.light'
}}
cursor="pointer"
// paddingX={basePadding * 1}
paddingY={basePadding / 2}
>
<Icon marginBottom="-2px" name="🎨" size={childIconSize}></Icon>
<Text marginTop="-2px" paddingLeft={2} fontSize="xs">
Toggle Edit Mode
</Text>
</Flex>
</Flex>
<Flex
flexDirection="column"
// rowGap={basePadding / 3}
background="greys.lightt"
borderRadius={4}
boxShadow={props?.boxShadow || '0px 2px 7px 0px rgba(0,0,0,0.2)'}
paddingY={basePadding}
>
{!props?.readonly && (
<Flex
alignItems="center"
flexDirection="row"
// paddingRight={basePadding}
paddingLeft={basePadding}
_hover={{
background: 'greys.light'
}}
cursor="pointer"
// paddingX={basePadding * 1}
paddingY={basePadding / 2}
>
<Icon marginBottom="-2px" name="cyclone" size={childIconSize}></Icon>
<Text marginTop="-2px" paddingLeft={2} fontSize="xs">
Types
</Text>
</Flex>
)}
<Flex
flexDirection="column"
// rowGap={basePadding}
overflowY="scroll"
maxHeight="300px"
background="greys.lightt"
cursor="pointer"
>
{!props?.readonly &&
types.map((type, idx) => {
const ret = (
<Flex
key={props?.uuid + props?.fullPath + '-type-menu-' + idx}
width="100%"
_hover={{
'&>div': {
background: 'greys.light'
}
}}
cursor="pointer"
onClick={() => onType({ type })}
paddingY={1}
>
<Flex
alignItems="center"
flexDirection="row"
width="100%"
paddingRight={basePadding}
paddingLeft={basePadding * 2}
paddingY={basePadding / 2}
>
<Icon marginBottom="-2px" name={type?.icon || type?.key || type?.label || type} size={childIconSize}></Icon>
<Text marginTop="-2px" paddingLeft={2} fontSize="xs">
{type?.label || type?.key || type}
</Text>
{type?.wrap && (
<Flex
marginLeft="auto"
_hover={{
transform: 'scale(1.3)'
}}
transition="all 0.2s ease-out"
onClick={(e) => {
e?.preventDefault?.();
e?.stopPropagation?.();
// cancel bubble
e?.nativeEvent?.stopImmediatePropagation?.();
onType({
type,
wrap: true
});
}}
>
<Icon name="wrap" size={childIconSize}></Icon>
</Flex>
)}
</Flex>
</Flex>
);
return ret;
})}
</Flex>
{!props?.readonly && props?.onDelete && (
<Flex
alignItems="center"
flexDirection="row"
_hover={{
background: 'greys.light'
}}
cursor="pointer"
onClick={onDelete}
paddingX={basePadding * 1}
paddingY={basePadding / 2}
>
<Icon marginBottom="-2px" name="bin" size={childIconSize}></Icon>
<Text marginTop="-2px" paddingLeft={2} fontSize="xs">
Recycle
</Text>
</Flex>
)}
</Flex>
</Flex>
</Center>
</ClickAwayListener>
);
};
Reference in New Issue View Git Blame Copy Permalink