Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-13 16:16:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/develop' into fix/experience

Browse Source
This commit is contained in:
DarkSky
2022-08-24 19:17:53 +08:00
parent c20288ce76 ae19fd9b00
commit 280fb4d8c7
122 changed files with 2333 additions and 1537 deletions
Download Patch File Download Diff File Expand all files Collapse all files
libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx
-236
View File
@@ -1,236 +0,0 @@
import {
BlockPendantProvider,
CreateView,
RenderBlock,
useCurrentView,
useOnSelect,
} from '@toeverything/components/editor-core';
import { styled } from '@toeverything/components/ui';
import type {
ComponentPropsWithoutRef,
ComponentPropsWithRef,
CSSProperties,
ReactElement,
} from 'react';
import { forwardRef, useState } from 'react';
import { SCENE_CONFIG } from '../blocks/group/config';
import { BlockContainer } from '../components/BlockContainer';
type WithChildrenConfig = {
indent: CSSProperties['marginLeft'];
};
const defaultConfig: WithChildrenConfig = {
indent: '30px',
};
const TreeView = forwardRef<
HTMLDivElement,
{ lastItem?: boolean } & ComponentPropsWithRef<'div'>
>(({ lastItem = false, children, onClick, ...restProps }, ref) => {
return (
<TreeWrapper ref={ref} {...restProps}>
<StyledTreeView>
<VerticalLine last={lastItem} onClick={onClick} />
<HorizontalLine last={lastItem} onClick={onClick} />
{lastItem && <LastItemRadius />}
</StyledTreeView>
{/* maybe need a child wrapper */}
{children}
</TreeWrapper>
);
});
interface ChildrenViewProp {
childrenIds: string[];
handleCollapse: () => void;
indent?: string | number;
}
const ChildrenView = ({
childrenIds,
handleCollapse,
indent,
}: ChildrenViewProp) => {
const [currentView] = useCurrentView();
const isKanbanScene = currentView.type === SCENE_CONFIG.KANBAN;
return (
<Children style={{ ...(!isKanbanScene && { marginLeft: indent }) }}>
{childrenIds.map((childId, idx) => {
if (isKanbanScene) {
return (
<StyledBorder key={childId}>
<RenderBlock blockId={childId} />
</StyledBorder>
);
}
return (
<TreeView
key={childId}
lastItem={idx === childrenIds.length - 1}
onClick={handleCollapse}
>
<RenderBlock key={childId} blockId={childId} />
</TreeView>
);
})}
</Children>
);
};
const CollapsedNode = forwardRef<
HTMLDivElement,
ComponentPropsWithoutRef<'div'>
>((props, ref) => {
return (
<TreeView ref={ref} lastItem={true} {...props}>
<Collapsed onClick={props.onClick}>···</Collapsed>
</TreeView>
);
});
/**
* Indent rendering child nodes
*/
export const withTreeViewChildren = (
creator: (props: CreateView) => ReactElement,
customConfig: Partial<WithChildrenConfig> = {}
) => {
const config = {
...defaultConfig,
...customConfig,
};
return (props: CreateView) => {
const { block, editor } = props;
const collapsed = block.getProperty('collapsed')?.value;
const childrenIds = block.childrenIds;
const showChildren = !collapsed && childrenIds.length > 0;
const [isSelect, setIsSelect] = useState<boolean>(false);
useOnSelect(block.id, (isSelect: boolean) => {
setIsSelect(isSelect);
});
const handleCollapse = () => {
block.setProperty('collapsed', { value: true });
};
const handleExpand = () => {
block.setProperty('collapsed', { value: false });
};
return (
<BlockContainer
editor={props.editor}
block={block}
selected={isSelect}
className={Wrapper.toString()}
>
<BlockPendantProvider block={block}>
<div>{creator(props)}</div>
</BlockPendantProvider>
{collapsed && (
<CollapsedNode
onClick={handleExpand}
style={{ marginLeft: config.indent }}
/>
)}
{showChildren && (
<ChildrenView
childrenIds={childrenIds}
handleCollapse={handleCollapse}
indent={config.indent}
/>
)}
</BlockContainer>
);
};
};
const Wrapper = styled('div')({ display: 'flex', flexDirection: 'column' });
const Children = Wrapper;
const TREE_COLOR = '#D5DFE6';
// adjust left and right margins of the the tree line
const TREE_LINE_LEFT_OFFSET = '-16px';
// determine the position of the horizontal line by the type of the item
const TREE_LINE_TOP_OFFSET = '20px'; // '50%'
const TREE_LINE_WIDTH = '12px';
const TreeWrapper = styled('div')({
position: 'relative',
});
const StyledTreeView = styled('div')({
position: 'absolute',
left: TREE_LINE_LEFT_OFFSET,
height: '100%',
});
const Line = styled('div')({
position: 'absolute',
cursor: 'pointer',
backgroundColor: TREE_COLOR,
// somehow tldraw would override this
boxSizing: 'content-box!important' as any,
// See [Can I add background color only for padding?](https://stackoverflow.com/questions/14628601/can-i-add-background-color-only-for-padding)
backgroundClip: 'content-box',
backgroundOrigin: 'content-box',
// Increase click hot spot
padding: '10px',
});
const VerticalLine = styled(Line)<{ last: boolean }>(({ last }) => ({
width: '1px',
height: last ? TREE_LINE_TOP_OFFSET : '100%',
paddingTop: 0,
paddingBottom: 0,
transform: 'translate(-50%, 0)',
opacity: last ? 0 : 'unset',
}));
const HorizontalLine = styled(Line)<{ last: boolean }>(({ last }) => ({
width: TREE_LINE_WIDTH,
height: '1px',
paddingLeft: 0,
paddingRight: 0,
top: TREE_LINE_TOP_OFFSET,
transform: 'translate(0, -50%)',
opacity: last ? 0 : 'unset',
}));
const Collapsed = styled('div')({
cursor: 'pointer',
display: 'inline-block',
color: '#98ACBD',
padding: '8px',
});
const LastItemRadius = styled('div')({
boxSizing: 'content-box',
position: 'absolute',
left: '-0.5px',
top: 0,
height: TREE_LINE_TOP_OFFSET,
bottom: '50%',
width: TREE_LINE_WIDTH,
borderWidth: '1px',
borderStyle: 'solid',
borderLeftColor: TREE_COLOR,
borderBottomColor: TREE_COLOR,
borderTop: 'none',
borderRight: 'none',
borderRadius: '0 0 0 3px',
pointerEvents: 'none',
});
const StyledBorder = styled('div')({
border: '1px solid #E0E6EB',
borderRadius: '5px',
margin: '4px',
});