feat: update animate of pandent trigger line

This commit is contained in:
QiShaoXuan 2022-08-11 15:51:24 +08:00
parent 137d6a1923
commit 716c9ea34c
3 changed files with 28 additions and 13 deletions

View File

@ -3,6 +3,7 @@ import { styled } from '@toeverything/components/ui';
import type { AsyncBlock } from '../editor'; import type { AsyncBlock } from '../editor';
import { PendantPopover } from './pendant-popover'; import { PendantPopover } from './pendant-popover';
import { PendantRender } from './pendant-render'; import { PendantRender } from './pendant-render';
import { useRef } from 'react';
/** /**
* @deprecated * @deprecated
*/ */
@ -14,13 +15,16 @@ export const BlockPendantProvider: FC<PropsWithChildren<BlockTagProps>> = ({
block, block,
children, children,
}) => { }) => {
const triggerRef = useRef<HTMLDivElement>();
return ( return (
<Container> <Container>
{children} {children}
<PendantPopover block={block}> <StyledPendantContainer ref={triggerRef}>
<StyledTriggerLine /> <PendantPopover block={block} container={triggerRef.current}>
</PendantPopover> <StyledTriggerLine />
</PendantPopover>
</StyledPendantContainer>
<PendantRender block={block} /> <PendantRender block={block} />
</Container> </Container>
@ -43,10 +47,12 @@ const StyledTriggerLine = styled('div')({
width: '100%', width: '100%',
height: '2px', height: '2px',
background: '#dadada', background: '#dadada',
display: 'none', display: 'flex',
position: 'absolute', position: 'absolute',
left: '0', left: '0',
top: '4px', top: '4px',
transition: 'opacity .2s',
opacity: '0',
}, },
'::after': { '::after': {
content: "''", content: "''",
@ -60,18 +66,24 @@ const StyledTriggerLine = styled('div')({
transition: 'width .3s', transition: 'width .3s',
}, },
}); });
const StyledPendantContainer = styled('div')({
const Container = styled('div')({ width: '100px',
position: 'relative',
paddingBottom: `${LINE_GAP - TAG_GAP * 2}px`,
'&:hover': { '&:hover': {
[StyledTriggerLine.toString()]: { [`${StyledTriggerLine}`]: {
'&::before': {
display: 'flex',
},
'&::after': { '&::after': {
width: '100%', width: '100%',
}, },
}, },
}, },
}); });
const Container = styled('div')({
position: 'relative',
paddingBottom: `${LINE_GAP - TAG_GAP * 2}px`,
'&:hover': {
[`${StyledTriggerLine}`]: {
'&::before': {
opacity: '1',
},
},
},
});

View File

@ -29,6 +29,7 @@ export const PendantHistoryPanel = ({
const [history, setHistory] = useState<RecastBlockValue[]>([]); const [history, setHistory] = useState<RecastBlockValue[]>([]);
const popoverHandlerRef = useRef<{ [key: string]: PopperHandler }>({}); const popoverHandlerRef = useRef<{ [key: string]: PopperHandler }>({});
const historyPanelRef = useRef<HTMLDivElement>();
const { getValueHistory } = getRecastItemValue(block); const { getValueHistory } = getRecastItemValue(block);
useEffect(() => { useEffect(() => {
@ -84,7 +85,7 @@ export const PendantHistoryPanel = ({
}, [block, getProperties, groupBlock, recastBlock]); }, [block, getProperties, groupBlock, recastBlock]);
return ( return (
<StyledPendantHistoryPanel> <StyledPendantHistoryPanel ref={historyPanelRef}>
{history.map(item => { {history.map(item => {
const property = getProperty(item.id); const property = getProperty(item.id);
return ( return (
@ -116,6 +117,7 @@ export const PendantHistoryPanel = ({
/> />
} }
trigger="click" trigger="click"
container={historyPanelRef.current}
> >
<PendantTag <PendantTag
style={{ style={{

View File

@ -26,6 +26,7 @@ export const PendantPopover: FC<
block={block} block={block}
endElement={ endElement={
<AddPendantPopover <AddPendantPopover
container={popoverProps.container}
block={block} block={block}
onSure={() => { onSure={() => {
popoverHandlerRef.current?.setVisible(false); popoverHandlerRef.current?.setVisible(false);