Baptiste Devessier
093d6c0a1a
- Move the JsonTree component and the other components to twenty-ui - Rely on a React Context to provide translations ## Future work It would be good to migrate the `createRequiredContext` function to `twenty-ui`. I didn't want to migrate it in this PR but would have liked to use it.
53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import { useTheme } from '@emotion/react';
|
|
import styled from '@emotion/styled';
|
|
import { VisibilityHidden } from '@ui/accessibility';
|
|
import { IconChevronDown } from '@ui/display';
|
|
import { useJsonTreeContextOrThrow } from '@ui/json-visualizer/hooks/useJsonTreeContextOrThrow';
|
|
import { motion } from 'framer-motion';
|
|
|
|
const StyledButton = styled(motion.button)`
|
|
align-items: center;
|
|
border-color: ${({ theme }) => theme.border.color.medium};
|
|
border-radius: ${({ theme }) => theme.border.radius.sm};
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-inline: ${({ theme }) => theme.spacing(1)};
|
|
background-color: ${({ theme }) => theme.background.transparent.lighter};
|
|
height: 24px;
|
|
width: 24px;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
`;
|
|
|
|
const MotionIconChevronDown = motion.create(IconChevronDown);
|
|
|
|
export const JsonArrow = ({
|
|
isOpen,
|
|
onClick,
|
|
}: {
|
|
isOpen: boolean;
|
|
onClick: () => void;
|
|
}) => {
|
|
const theme = useTheme();
|
|
|
|
const { arrowButtonCollapsedLabel, arrowButtonExpandedLabel } =
|
|
useJsonTreeContextOrThrow();
|
|
|
|
return (
|
|
<StyledButton onClick={onClick}>
|
|
<VisibilityHidden>
|
|
{isOpen ? arrowButtonExpandedLabel : arrowButtonCollapsedLabel}
|
|
</VisibilityHidden>
|
|
|
|
<MotionIconChevronDown
|
|
size={theme.icon.size.md}
|
|
color={theme.font.color.secondary}
|
|
initial={false}
|
|
animate={{ rotate: isOpen ? -180 : 0 }}
|
|
/>
|
|
</StyledButton>
|
|
);
|
|
};
|