mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-16 09:36:17 +08:00
feat: modify styles & ui components
This commit is contained in:
QiShaoXuan
@@ -9,7 +9,7 @@ import {
|
||||
StyledMoreMenuItem,
|
||||
IconButton,
|
||||
} from './styles';
|
||||
import { Popover } from '@/components/popover';
|
||||
import { Popover } from '@/ui/popover';
|
||||
import { useEditor } from '@/components/editor-provider';
|
||||
import EditorModeSwitch from '@/components/editor-mode-switch';
|
||||
import { EdgelessIcon, PaperIcon } from '../editor-mode-switch/icons';
|
||||
|
||||
@@ -14,7 +14,7 @@ import {
|
||||
UndoIcon,
|
||||
RedoIcon,
|
||||
} from './icons';
|
||||
import { Tooltip } from '@/components/tooltip';
|
||||
import { Tooltip } from '@/ui/tooltip';
|
||||
import Slide from '@mui/material/Slide';
|
||||
import { useEditor } from '@/components/editor-provider';
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
} from './style';
|
||||
import { CloseIcon, ContactIcon, HelpIcon, KeyboardIcon } from './icons';
|
||||
import Grow from '@mui/material/Grow';
|
||||
import { Tooltip } from '../tooltip';
|
||||
import { Tooltip } from '@/ui/tooltip';
|
||||
import { useEditor } from '@/components/editor-provider';
|
||||
import { useModal } from '@/components/global-modal-provider';
|
||||
import { useTheme } from '@/styles';
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import type { CSSProperties, PropsWithChildren, ReactNode } from 'react';
|
||||
import Grow from '@mui/material/Grow';
|
||||
|
||||
import { styled } from '@/styles';
|
||||
|
||||
type PopoverProps = {
|
||||
popoverContent?: ReactNode;
|
||||
style?: CSSProperties;
|
||||
};
|
||||
|
||||
const StyledPopoverContainer = styled('div')({
|
||||
position: 'relative',
|
||||
cursor: 'pointer',
|
||||
});
|
||||
|
||||
const StyledPopoverWrapper = styled('div')({
|
||||
position: 'absolute',
|
||||
bottom: '0',
|
||||
right: '0',
|
||||
paddingTop: '46px',
|
||||
zIndex: 1000,
|
||||
});
|
||||
const StyledPopover = styled('div')(({ theme }) => {
|
||||
return {
|
||||
width: '248px',
|
||||
background: theme.colors.popoverBackground,
|
||||
boxShadow: theme.shadow.popover,
|
||||
color: theme.colors.popoverColor,
|
||||
borderRadius: '10px 0px 10px 10px',
|
||||
padding: '8px 4px',
|
||||
position: 'absolute',
|
||||
top: '46px',
|
||||
right: '0',
|
||||
};
|
||||
});
|
||||
export const Popover = ({
|
||||
children,
|
||||
popoverContent,
|
||||
style = {},
|
||||
}: PropsWithChildren<PopoverProps>) => {
|
||||
const [show, setShow] = useState(false);
|
||||
return (
|
||||
<StyledPopoverContainer
|
||||
onClick={() => {
|
||||
setShow(!show);
|
||||
}}
|
||||
onMouseEnter={() => {
|
||||
setShow(true);
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
setShow(false);
|
||||
}}
|
||||
style={style}
|
||||
>
|
||||
{children}
|
||||
<Grow in={show}>
|
||||
<StyledPopoverWrapper>
|
||||
<StyledPopover>{popoverContent}</StyledPopover>
|
||||
</StyledPopoverWrapper>
|
||||
</Grow>
|
||||
</StyledPopoverContainer>
|
||||
);
|
||||
};
|
||||
@@ -1,93 +0,0 @@
|
||||
import { forwardRef } from 'react';
|
||||
import { styled } from '@/styles';
|
||||
import { PopperArrowProps } from './interface';
|
||||
|
||||
// eslint-disable-next-line react/display-name
|
||||
export const PopperArrow = forwardRef<HTMLElement, PopperArrowProps>(
|
||||
({ placement }, ref) => {
|
||||
return <StyledArrow placement={placement} ref={ref} />;
|
||||
}
|
||||
);
|
||||
|
||||
const getArrowStyle = (placement: PopperArrowProps['placement']) => {
|
||||
if (placement.indexOf('bottom') === 0) {
|
||||
return {
|
||||
top: 0,
|
||||
left: 0,
|
||||
marginTop: '-0.9em',
|
||||
width: '3em',
|
||||
height: '1em',
|
||||
'&::before': {
|
||||
borderWidth: '0 1em 1em 1em',
|
||||
borderColor: `transparent transparent #98ACBD transparent`,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
if (placement.indexOf('top') === 0) {
|
||||
return {
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
marginBottom: '-0.9em',
|
||||
width: '3em',
|
||||
height: '1em',
|
||||
'&::before': {
|
||||
borderWidth: '1em 1em 0 1em',
|
||||
borderColor: `#98ACBD transparent transparent transparent`,
|
||||
},
|
||||
};
|
||||
}
|
||||
if (placement.indexOf('left') === 0) {
|
||||
return {
|
||||
right: 0,
|
||||
marginRight: '-0.9em',
|
||||
height: '3em',
|
||||
width: '1em',
|
||||
'&::before': {
|
||||
borderWidth: '1em 0 1em 1em',
|
||||
borderColor: `transparent transparent transparent #98ACBD`,
|
||||
},
|
||||
};
|
||||
}
|
||||
if (placement.indexOf('right') === 0) {
|
||||
return {
|
||||
left: 0,
|
||||
marginLeft: '-0.9em',
|
||||
height: '3em',
|
||||
width: '1em',
|
||||
'&::before': {
|
||||
borderWidth: '1em 1em 1em 0',
|
||||
borderColor: `transparent #98ACBD transparent transparent`,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
display: 'none',
|
||||
};
|
||||
};
|
||||
|
||||
const StyledArrow = styled('span')<{
|
||||
placement: PopperArrowProps['placement'];
|
||||
}>(({ placement }) => {
|
||||
return {
|
||||
position: 'absolute',
|
||||
fontSize: '7px',
|
||||
width: '3em',
|
||||
'::before': {
|
||||
content: '""',
|
||||
margin: 'auto',
|
||||
display: 'block',
|
||||
width: 0,
|
||||
height: 0,
|
||||
borderStyle: 'solid',
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
|
||||
...getArrowStyle(placement),
|
||||
};
|
||||
});
|
||||
@@ -1,189 +0,0 @@
|
||||
import {
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import PopperUnstyled from '@mui/base/PopperUnstyled';
|
||||
import ClickAwayListener from '@mui/base/ClickAwayListener';
|
||||
import Grow from '@mui/material/Grow';
|
||||
|
||||
import { styled } from '@/styles';
|
||||
|
||||
import { PopperProps, VirtualElement } from './interface';
|
||||
import { PopperArrow } from './PopoverArrow';
|
||||
export const Popper = ({
|
||||
children,
|
||||
content,
|
||||
anchorEl: propsAnchorEl,
|
||||
placement = 'top-start',
|
||||
defaultVisible = false,
|
||||
visible: propsVisible,
|
||||
trigger = 'hover',
|
||||
pointerEnterDelay = 100,
|
||||
pointerLeaveDelay = 100,
|
||||
onVisibleChange,
|
||||
popoverStyle,
|
||||
popoverClassName,
|
||||
anchorStyle,
|
||||
anchorClassName,
|
||||
zIndex,
|
||||
offset = [0, 5],
|
||||
showArrow = false,
|
||||
popperHandlerRef,
|
||||
onClick,
|
||||
onClickAway,
|
||||
...popperProps
|
||||
}: PopperProps) => {
|
||||
// @ts-ignore
|
||||
const [anchorEl, setAnchorEl] = useState<VirtualElement>(null);
|
||||
const [visible, setVisible] = useState(defaultVisible);
|
||||
// @ts-ignore
|
||||
const [arrowRef, setArrowRef] = useState<HTMLElement>(null);
|
||||
const popperRef = useRef();
|
||||
const pointerLeaveTimer = useRef<number>();
|
||||
const pointerEnterTimer = useRef<number>();
|
||||
|
||||
const visibleControlledByParent = typeof propsVisible !== 'undefined';
|
||||
const isAnchorCustom = typeof propsAnchorEl !== 'undefined';
|
||||
|
||||
const hasHoverTrigger = useMemo(() => {
|
||||
return (
|
||||
trigger === 'hover' ||
|
||||
(Array.isArray(trigger) && trigger.includes('hover'))
|
||||
);
|
||||
}, [trigger]);
|
||||
|
||||
const hasClickTrigger = useMemo(() => {
|
||||
return (
|
||||
trigger === 'click' ||
|
||||
(Array.isArray(trigger) && trigger.includes('click'))
|
||||
);
|
||||
}, [trigger]);
|
||||
|
||||
const onPointerEnterHandler = () => {
|
||||
if (!hasHoverTrigger || visibleControlledByParent) {
|
||||
return;
|
||||
}
|
||||
window.clearTimeout(pointerLeaveTimer.current);
|
||||
|
||||
pointerEnterTimer.current = window.setTimeout(() => {
|
||||
setVisible(true);
|
||||
}, pointerEnterDelay);
|
||||
};
|
||||
|
||||
const onPointerLeaveHandler = () => {
|
||||
if (!hasHoverTrigger || visibleControlledByParent) {
|
||||
return;
|
||||
}
|
||||
window.clearTimeout(pointerEnterTimer.current);
|
||||
pointerLeaveTimer.current = window.setTimeout(() => {
|
||||
setVisible(false);
|
||||
}, pointerLeaveDelay);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
onVisibleChange?.(visible);
|
||||
}, [visible, onVisibleChange]);
|
||||
|
||||
useImperativeHandle(popperHandlerRef, () => {
|
||||
return {
|
||||
setVisible: (visible: boolean) => {
|
||||
!visibleControlledByParent && setVisible(visible);
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
// @ts-ignore
|
||||
return (
|
||||
<ClickAwayListener
|
||||
onClickAway={() => {
|
||||
if (visibleControlledByParent) {
|
||||
onClickAway?.();
|
||||
} else {
|
||||
setVisible(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Container>
|
||||
{isAnchorCustom ? null : (
|
||||
<div
|
||||
ref={(dom: HTMLDivElement) => setAnchorEl(dom)}
|
||||
onClick={e => {
|
||||
if (!hasClickTrigger || visibleControlledByParent) {
|
||||
onClick?.(e);
|
||||
return;
|
||||
}
|
||||
setVisible(!visible);
|
||||
}}
|
||||
onPointerEnter={onPointerEnterHandler}
|
||||
onPointerLeave={onPointerLeaveHandler}
|
||||
style={anchorStyle}
|
||||
className={anchorClassName}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
<BasicStyledPopper
|
||||
// @ts-ignore
|
||||
popperRef={popperRef}
|
||||
open={visibleControlledByParent ? propsVisible : visible}
|
||||
zIndex={zIndex}
|
||||
anchorEl={isAnchorCustom ? propsAnchorEl : anchorEl}
|
||||
placement={placement}
|
||||
transition
|
||||
modifiers={[
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'arrow',
|
||||
enabled: showArrow,
|
||||
options: {
|
||||
element: arrowRef,
|
||||
},
|
||||
},
|
||||
]}
|
||||
{...popperProps}
|
||||
>
|
||||
{({ TransitionProps }) => (
|
||||
<Grow {...TransitionProps}>
|
||||
<div
|
||||
onPointerEnter={onPointerEnterHandler}
|
||||
onPointerLeave={onPointerLeaveHandler}
|
||||
style={popoverStyle}
|
||||
className={popoverClassName}
|
||||
>
|
||||
{showArrow && (
|
||||
// @ts-ignore
|
||||
<PopperArrow placement={placement} ref={setArrowRef} />
|
||||
)}
|
||||
{content}
|
||||
</div>
|
||||
</Grow>
|
||||
)}
|
||||
</BasicStyledPopper>
|
||||
</Container>
|
||||
</ClickAwayListener>
|
||||
);
|
||||
};
|
||||
|
||||
// The children of ClickAwayListener must be a DOM Node to judge whether the click is outside, use node.contains
|
||||
const Container = styled('div')({
|
||||
display: 'contents',
|
||||
});
|
||||
|
||||
const BasicStyledPopper = styled(PopperUnstyled, {
|
||||
shouldForwardProp: (propName: string) =>
|
||||
!['zIndex'].some(name => name === propName),
|
||||
})<{
|
||||
zIndex?: number;
|
||||
}>(({ zIndex, theme }) => {
|
||||
return {
|
||||
zIndex: zIndex,
|
||||
};
|
||||
});
|
||||
@@ -1,2 +0,0 @@
|
||||
export * from './interface';
|
||||
export * from './Popper';
|
||||
@@ -1,66 +0,0 @@
|
||||
import type { CSSProperties, ReactNode, Ref } from 'react';
|
||||
import {
|
||||
type PopperPlacementType,
|
||||
type PopperUnstyledProps,
|
||||
} from '@mui/base/PopperUnstyled';
|
||||
export type VirtualElement = {
|
||||
getBoundingClientRect: () => ClientRect | DOMRect;
|
||||
contextElement?: Element;
|
||||
};
|
||||
|
||||
export type PopperHandler = {
|
||||
setVisible: (visible: boolean) => void;
|
||||
};
|
||||
|
||||
export type PopperArrowProps = {
|
||||
placement: PopperPlacementType;
|
||||
};
|
||||
|
||||
export type PopperProps = {
|
||||
// Popover content
|
||||
content: ReactNode;
|
||||
|
||||
// Popover trigger
|
||||
children?: ReactNode;
|
||||
|
||||
// Whether the default is implicit
|
||||
defaultVisible?: boolean;
|
||||
|
||||
// Used to manually control the visibility of the Popover
|
||||
visible?: boolean;
|
||||
|
||||
// TODO: support focus
|
||||
trigger?: 'hover' | 'click' | 'focus' | ('click' | 'hover' | 'focus')[];
|
||||
|
||||
// How long does it take for the mouse to display the Popover, in milliseconds
|
||||
pointerEnterDelay?: number;
|
||||
|
||||
// How long does it take to hide the Popover after the mouse moves out, in milliseconds
|
||||
pointerLeaveDelay?: number;
|
||||
|
||||
// Callback fired when the component closed or open
|
||||
onVisibleChange?: (visible: boolean) => void;
|
||||
|
||||
// Popover container style
|
||||
popoverStyle?: CSSProperties;
|
||||
|
||||
// Popover container class name
|
||||
popoverClassName?: string;
|
||||
|
||||
// Anchor style
|
||||
anchorStyle?: CSSProperties;
|
||||
|
||||
// Anchor class name
|
||||
anchorClassName?: string;
|
||||
|
||||
// Popover z-index
|
||||
zIndex?: number;
|
||||
|
||||
offset?: [number, number];
|
||||
|
||||
showArrow?: boolean;
|
||||
|
||||
popperHandlerRef?: Ref<PopperHandler>;
|
||||
|
||||
onClickAway?: () => void;
|
||||
} & Omit<PopperUnstyledProps, 'open' | 'ref'>;
|
||||
@@ -1,29 +0,0 @@
|
||||
import { styled } from '@/styles';
|
||||
import type { ReactNode, CSSProperties } from 'react';
|
||||
import type { PopoverDirection } from './interface';
|
||||
export interface PopoverContainerProps {
|
||||
children?: ReactNode;
|
||||
/**
|
||||
* The pop-up window points to. The pop-up window has three rounded corners, one is a right angle, and the right angle is the direction of the pop-up window.
|
||||
*/
|
||||
direction: PopoverDirection;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
const border_radius_map: Record<PopoverContainerProps['direction'], string> = {
|
||||
none: '10px',
|
||||
'left-top': '0 10px 10px 10px',
|
||||
'left-bottom': '10px 10px 10px 0',
|
||||
'right-top': '10px 0 10px 10px',
|
||||
'right-bottom': '10px 10px 0 10px',
|
||||
};
|
||||
|
||||
export const PopoverContainer = styled('div')<
|
||||
Pick<PopoverContainerProps, 'direction'>
|
||||
>(({ direction, style }) => {
|
||||
const borderRadius =
|
||||
border_radius_map[direction] || border_radius_map['left-top'];
|
||||
return {
|
||||
borderRadius: borderRadius,
|
||||
...style,
|
||||
};
|
||||
});
|
||||
@@ -1,65 +0,0 @@
|
||||
import { type CSSProperties, type PropsWithChildren } from 'react';
|
||||
import { PopoverContainer } from './Container';
|
||||
import { Popper, type PopperProps } from '../popper';
|
||||
import { useTheme } from '@/styles';
|
||||
import type { PopperPlacementType, TooltipProps } from '@mui/material';
|
||||
import type { PopoverDirection } from './interface';
|
||||
export const placementToContainerDirection: Record<
|
||||
PopperPlacementType,
|
||||
PopoverDirection
|
||||
> = {
|
||||
top: 'none',
|
||||
'top-start': 'left-bottom',
|
||||
'top-end': 'right-bottom',
|
||||
right: 'none',
|
||||
'right-start': 'left-top',
|
||||
'right-end': 'left-bottom',
|
||||
bottom: 'none',
|
||||
'bottom-start': 'left-top',
|
||||
'bottom-end': 'right-top',
|
||||
left: 'none',
|
||||
'left-start': 'right-top',
|
||||
'left-end': 'right-bottom',
|
||||
auto: 'none',
|
||||
'auto-start': 'none',
|
||||
'auto-end': 'none',
|
||||
};
|
||||
|
||||
const useTooltipStyle = (): CSSProperties => {
|
||||
const { theme, mode } = useTheme();
|
||||
return {
|
||||
boxShadow: '1px 1px 4px rgba(0, 0, 0, 0.14)',
|
||||
padding: '4px 12px',
|
||||
backgroundColor:
|
||||
mode === 'dark'
|
||||
? theme.colors.popoverBackground
|
||||
: theme.colors.primaryColor,
|
||||
color: '#fff',
|
||||
fontSize: theme.font.xs,
|
||||
};
|
||||
};
|
||||
|
||||
export const Tooltip = (
|
||||
props: PropsWithChildren<PopperProps & Omit<TooltipProps, 'title'>>
|
||||
) => {
|
||||
const { content, placement = 'top-start' } = props;
|
||||
const style = useTooltipStyle();
|
||||
// If there is no content, hide forever
|
||||
const visibleProp = content ? {} : { visible: false };
|
||||
return (
|
||||
<Popper
|
||||
{...visibleProp}
|
||||
placement="top"
|
||||
{...props}
|
||||
showArrow={false}
|
||||
content={
|
||||
<PopoverContainer
|
||||
style={style}
|
||||
direction={placementToContainerDirection[placement]}
|
||||
>
|
||||
{content}
|
||||
</PopoverContainer>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export * from './Tooltip';
|
||||
@@ -1,9 +0,0 @@
|
||||
export type TooltipProps = {
|
||||
showArrow?: boolean;
|
||||
};
|
||||
export type PopoverDirection =
|
||||
| 'none'
|
||||
| 'left-top'
|
||||
| 'left-bottom'
|
||||
| 'right-top'
|
||||
| 'right-bottom';
|
||||
Reference in New Issue
Block a user