Transition
Import
import {
Scale,
Slide,
SlideIn,
} from '@trendmicro/react-styled-ui';
Usage
Scale transition
EDITABLE EXAMPLE
const SkeletonContent = (props) => (
<ModalContent p="4x" {...props}>
<Flex>
<Flex flex="none" mr="4x" align="center">
<Skeleton variant="circle" width="10x" height="10x" />
</Flex>
<Box flex="auto">
<Skeleton />
<Skeleton />
<Skeleton />
</Box>
</Flex>
</ModalContent>
);
function Example() {
const { isOpen, onToggle } = useDisclosure();
return (
<>
<Button onClick={onToggle}>
Toggle
</Button>
<Scale in={isOpen}>
{styles => (
<SkeletonContent mt="4x" {...styles} />
)}
</Scale>
</>
);
}
render(<Example />);
Slide transition
EDITABLE EXAMPLE
const SelectableButton = ({ selected, ...props }) => {
const [colorMode] = useColorMode();
const { colors } = useTheme();
const focusColor = colors['blue:60'];
let _selectedColor = {
dark: 'blue:60',
light: 'blue:60',
}[colorMode];
_selectedColor = colors[_selectedColor];
const getSelectedProps = {
bg: _selectedColor,
borderColor: _selectedColor,
color: 'white:emphasis',
cursor: 'default',
pointerEvents: 'none',
zIndex: 1,
css: {
'&::before': {
backgroundColor: _selectedColor,
},
'&:focus': {
':not(:active)': {
borderColor: focusColor,
boxShadow: `inset 0 0 0 1px ${focusColor}`,
},
'&::before': {
backgroundColor: focusColor,
},
}
},
_hover: {
bg: _selectedColor,
},
_active: {
bg: _selectedColor,
},
};
return (
<Button
{...(selected && getSelectedProps)}
{...props}
/>
);
};
const useSelection = (defaultValue) => {
const [value, setValue] = React.useState(defaultValue);
const changeBy = (value) => () => setValue(value);
return [value, changeBy];
};
const SkeletonContent = (props) => (
<ModalContent p="4x" {...props}>
<Flex>
<Flex flex="none" mr="4x" align="center">
<Skeleton variant="circle" width="10x" height="10x" />
</Flex>
<Box flex="auto">
<Skeleton />
<Skeleton />
<Skeleton />
</Box>
</Flex>
</ModalContent>
);
function Example() {
const { isOpen, onClose, onToggle } = useDisclosure();
const [from, changeFromBy] = useSelection('top');
return (
<>
<Box mb="4x">
<Button onClick={onToggle}>
Toggle
</Button>
</Box>
<ButtonGroup
variant="secondary"
css={{
'> *:not(:first-of-type)': {
marginLeft: -1
}
}}
>
{['top', 'bottom', 'left', 'right'].map(value => {
const changeFrom = changeFromBy(value);
const onClick = () => {
changeFrom();
onClose();
};
return (
<SelectableButton
key={value}
selected={value === from}
onClick={onClick}
minWidth="15x"
>
{value}
</SelectableButton>
);
})}
</ButtonGroup>
<Slide
in={isOpen}
from={from}
finalWidth="100%"
>
{styles => (
<SkeletonContent mt="4x" {...styles} />
)}
</Slide>
</>
);
}
render(<Example />);
Slide in transition
EDITABLE EXAMPLE
const SkeletonContent = (props) => (
<ModalContent p="4x" {...props}>
<Flex>
<Flex flex="none" mr="4x" align="center">
<Skeleton variant="circle" width="10x" height="10x" />
</Flex>
<Box flex="auto">
<Skeleton />
<Skeleton />
<Skeleton />
</Box>
</Flex>
</ModalContent>
);
function Example() {
const { isOpen, onToggle } = useDisclosure();
return (
<>
<Button onClick={onToggle}>
Toggle
</Button>
<SlideIn in={isOpen}>
{styles => (
<SkeletonContent mt="4x" {...styles} />
)}
</SlideIn>
</>
);
}
render(<Example />);
Props
Scale
| Name | Type | Default | Description |
|---|
| in | boolean | | Toggle visibility with a transition effect. |
| children | function | | A single function-child that receives the styles and renders components. |
| duration | number | 150 | The duration of the transition. |
| initialScale | number | 0.97 | The initial zoom level. |
Slide
| Name | Type | Default | Description |
|---|
| in | boolean | | Toggle visibility with a transition effect. |
| children | function | | A single function-child that receives the styles and renders components. |
| duration | number | 250 | The duration of the transition. |
| from | string | | One of: 'bottom', 'top', 'left', 'right' |
| finalHeight | string | 'auto' | |
| finalWidth | string | | |
SlideIn
| Name | Type | Default | Description |
|---|
| in | boolean | | Toggle visibility with a transition effect. |
| children | function | | A single function-child that receives the styles and renders components. |
| duration | number | 150 | The duration of the transition. |
| offset | string | '10px' | The slide-in offset in pixel. |
