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

Merge branch 'develop' into feature/remove-react-fc

Browse Source
This commit is contained in:
DarkSky
2022-08-12 19:18:57 +08:00
committed by GitHub
parent 495d9ccc0c ebed12dbec
commit 8b7d8dc348
64 changed files with 1953 additions and 1059 deletions
Download Patch File Download Diff File Expand all files Collapse all files
libs/components/layout/src/header/FileSystem.tsx
+115
View File
@@ -0,0 +1,115 @@
/* eslint-disable filename-rules/match */
import { useCallback, useMemo, useState } from 'react';
import { IconButton, MuiSnackbar, styled } from '@toeverything/components/ui';
import { services } from '@toeverything/datasource/db-service';
import { useLocalTrigger } from '@toeverything/datasource/state';
import { CloseIcon } from '@toeverything/components/common';
const cleanupWorkspace = (workspace: string) =>
new Promise((resolve, reject) => {
const req = indexedDB.deleteDatabase(workspace);
req.addEventListener('error', e => reject(e));
req.addEventListener('blocked', e => reject(e));
req.addEventListener('upgradeneeded', e => reject(e));
req.addEventListener('success', e => resolve(e));
});
const requestPermission = async (workspace: string) => {
await cleanupWorkspace(workspace);
// @ts-ignore
const dirHandler = await window.showDirectoryPicker({
id: 'AFFiNE_' + workspace,
mode: 'readwrite',
startIn: 'documents',
});
const fileHandle = await dirHandler.getFileHandle('affine.db', {
create: true,
});
const file = await fileHandle.getFile();
const initialData = new Uint8Array(await file.arrayBuffer());
const exporter = async (contents: Uint8Array) => {
try {
const writable = await fileHandle.createWritable();
await writable.write(contents);
await writable.close();
} catch (e) {
console.log(e);
}
};
await services.api.editorBlock.setupDataExporter(
workspace,
new Uint8Array(initialData),
exporter
);
};
const StyledFileSystem = styled('div')<{ disabled?: boolean }>({
padding: '10px 12px',
fontWeight: 600,
fontSize: '14px',
color: '#3E6FDB',
textTransform: 'uppercase',
cursor: 'pointer',
'&:hover': {
background: '#F5F7F8',
borderRadius: '5px',
},
});
export const fsApiSupported = () => {
try {
return 'showOpenFilePicker' in window;
} catch (e) {
return false;
}
};
export const FileSystem = () => {
const [selected, onSelected] = useLocalTrigger();
const [error, setError] = useState(false);
const onError = useCallback(() => {
setError(true);
setTimeout(() => setError(false), 3000);
}, []);
const apiSupported = useMemo(() => fsApiSupported(), []);
if (apiSupported && !selected) {
return (
<>
<MuiSnackbar
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
open={error}
message="Request File Permission failed, please check if you have permission"
sx={{ marginTop: '3em' }}
action={
<IconButton
aria-label="close"
onClick={() => setError(false)}
>
<CloseIcon />
</IconButton>
}
/>
<StyledFileSystem
onClick={async () => {
try {
await requestPermission('AFFiNE');
onSelected();
} catch (e) {
onError();
}
}}
>
Sync to Disk
</StyledFileSystem>
</>
);
}
return null;
};
libs/components/layout/src/header/LayoutHeader.tsx
+22 -7
View File
@@ -1,19 +1,36 @@
import { IconButton, styled, MuiButton } from '@toeverything/components/ui';
import { useMemo } from 'react';
import { IconButton, styled } from '@toeverything/components/ui';
import {
LogoIcon,
SideBarViewIcon,
SearchIcon,
SideBarViewCloseIcon,
} from '@toeverything/components/icons';
import { useShowSettingsSidebar } from '@toeverything/datasource/state';
import {
useShowSettingsSidebar,
useLocalTrigger,
} from '@toeverything/datasource/state';
import { CurrentPageTitle } from './Title';
import { EditorBoardSwitcher } from './EditorBoardSwitcher';
import { fsApiSupported, FileSystem } from './FileSystem';
import { CurrentPageTitle } from './Title';
export const LayoutHeader = () => {
const [isLocalWorkspace] = useLocalTrigger();
const { toggleSettingsSidebar: toggleInfoSidebar, showSettingsSidebar } =
useShowSettingsSidebar();
const warningTips = useMemo(() => {
if (!fsApiSupported()) {
return 'Your browser does not support the local storage feature, please upgrade to the latest version of Chrome or Edge browser';
} else if (!isLocalWorkspace) {
return 'You are in DEMO mode. Changes will NOT be saved unless you SYNC TO DISK';
} else {
return 'AFFiNE is under active development and the current version is UNSTABLE. Please DO NOT store information or data';
}
}, [isLocalWorkspace]);
return (
<StyledContainerForHeaderRoot>
<StyledHeaderRoot>
@@ -25,6 +42,7 @@ export const LayoutHeader = () => {
</FlexContainer>
<FlexContainer>
<StyledHelper>
<FileSystem />
<StyledShare disabled={true}>Share</StyledShare>
<div style={{ margin: '0px 12px' }}>
<IconButton
@@ -51,10 +69,7 @@ export const LayoutHeader = () => {
</StyledContainerForEditorBoardSwitcher>
</StyledHeaderRoot>
<StyledUnstableTips>
<StyledUnstableTipsText>
AFFiNE now under active development, the version is
UNSTABLE, please DO NOT store important data in this version
</StyledUnstableTipsText>
<StyledUnstableTipsText>{warningTips}</StyledUnstableTipsText>
</StyledUnstableTips>
</StyledContainerForHeaderRoot>
);
libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx
+3 -9
View File
@@ -36,19 +36,13 @@ export type DndTreeProps = {
indentationWidth?: number;
collapsible?: boolean;
removable?: boolean;
showDragIndicator?: boolean;
};
/**
* Currently does not support drag and drop using the keyboard.
*/
export function DndTree(props: DndTreeProps) {
const {
indentationWidth = 20,
collapsible,
removable,
showDragIndicator,
} = props;
const { indentationWidth = 20, collapsible, removable } = props;
const sensors = useSensors(
useSensor(PointerSensor, { activationConstraint: { distance: 8 } })
@@ -111,7 +105,6 @@ export function DndTree(props: DndTreeProps) {
: depth
}
indentationWidth={indentationWidth}
indicator={showDragIndicator}
childCount={children.length}
onCollapse={
collapsible && children.length
@@ -129,7 +122,8 @@ export function DndTree(props: DndTreeProps) {
)}
<DragOverlay
dropAnimation={dropAnimation}
style={{ marginTop: '-65px' }}
// TODO fix drag offset when the position of the page tree changes
style={{ marginTop: '-100px' }}
>
{activeId && activeItem ? (
<DndTreeItem
libs/components/layout/src/workspace-sidebar/page-tree/tree-item/DndTreeItem.tsx
+2 -4
View File
@@ -16,8 +16,7 @@ export function DndTreeItem({ id, depth, ...props }: DndTreeItemProps) {
isDragging,
isSorting,
listeners,
setDraggableNodeRef,
setDroppableNodeRef,
setNodeRef,
transform,
transition,
} = useSortable({ id });
@@ -29,8 +28,7 @@ export function DndTreeItem({ id, depth, ...props }: DndTreeItemProps) {
return (
<TreeItem
ref={setDraggableNodeRef}
wrapperRef={setDroppableNodeRef}
ref={setNodeRef}
pageId={id}
style={style}
depth={depth}
libs/components/layout/src/workspace-sidebar/page-tree/tree-item/TreeItem.tsx
+33 -40
View File
@@ -15,7 +15,6 @@ import {
TextLink,
TreeItemContainer,
TreeItemContent,
Wrapper,
} from './styles';
export type TreeItemProps = {
@@ -33,13 +32,10 @@ export type TreeItemProps = {
/** isDragging */
ghost?: boolean;
handleProps?: any;
indicator?: boolean;
indentationWidth: number;
onCollapse?(): void;
onRemove?(): void;
/** The ref of the outermost container is often used as droppaHTMLAttributes<HTMLLIElement>ble-node; the ref of the inner dom is often used as draggable-node */
wrapperRef?(node: HTMLLIElement): void;
} & HTMLAttributes<HTMLLIElement>;
} & HTMLAttributes<HTMLDivElement>;
export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
(
@@ -52,13 +48,10 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
ghost,
handleProps,
indentationWidth,
indicator,
collapsed,
onCollapse,
onRemove,
style,
value,
wrapperRef,
pageId,
...props
},
@@ -71,8 +64,8 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
);
return (
<Wrapper
ref={wrapperRef}
<TreeItemContainer
ref={ref}
clone={clone}
ghost={ghost}
disableSelection={disableSelection}
@@ -81,38 +74,38 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
active={pageId === page_id}
{...props}
>
<TreeItemContainer ref={ref} style={style} title={value}>
<ActionButton tabIndex={0} onClick={onCollapse}>
{childCount !== 0 ? (
collapsed ? (
<ArrowRightIcon />
) : (
<ArrowDropDownIcon />
)
) : (
<DotIcon />
)}
</ActionButton>
{childCount !== 0 ? (
collapsed ? (
<ActionButton tabIndex={0} onClick={onCollapse}>
<ArrowRightIcon />
</ActionButton>
) : (
<ActionButton tabIndex={0} onClick={onCollapse}>
<ArrowDropDownIcon />
</ActionButton>
)
) : (
<DotIcon />
)}
<TreeItemContent {...handleProps}>
<TextLink to={`/${workspace_id}/${pageId}`}>
{value}
</TextLink>
{BooleanPageTreeItemMoreActions && (
<MoreActions
workspaceId={workspace_id}
pageId={pageId}
onRemove={onRemove}
/>
)}
<TreeItemContent {...handleProps}>
<TextLink to={`/${workspace_id}/${pageId}`}>
{value}
</TextLink>
{BooleanPageTreeItemMoreActions && (
<MoreActions
workspaceId={workspace_id}
pageId={pageId}
onRemove={onRemove}
/>
)}
{/*{!clone && onRemove && <Remove onClick={onRemove} />}*/}
{clone && childCount && childCount > 1 ? (
<Counter>{childCount}</Counter>
) : null}
</TreeItemContent>
</TreeItemContainer>
</Wrapper>
{/*{!clone && onRemove && <Remove onClick={onRemove} />}*/}
{clone && childCount && childCount > 1 ? (
<Counter>{childCount}</Counter>
) : null}
</TreeItemContent>
</TreeItemContainer>
);
}
);
libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts
+15 -88
View File
@@ -1,22 +1,18 @@
import { styled } from '@toeverything/components/ui';
import { Link } from 'react-router-dom';
export const TreeItemContainer = styled('div')`
box-sizing: border-box;
display: flex;
align-items: center;
color: #4c6275;
`;
export const Wrapper = styled('li')<{
export const TreeItemContainer = styled('div')<{
spacing: string;
clone?: boolean;
ghost?: boolean;
indicator?: boolean;
disableSelection?: boolean;
disableInteraction?: boolean;
active?: boolean;
}>`
display: flex;
align-items: center;
color: #4c6275;
box-sizing: border-box;
padding-left: ${({ spacing }) => spacing};
list-style: none;
@@ -26,21 +22,13 @@ export const Wrapper = styled('li')<{
${({ clone, disableSelection }) =>
(clone || disableSelection) &&
`width: 100%;
.Text,
.Count {
user-select: none;
-webkit-user-select: none;
}`}
${({ indicator }) =>
indicator &&
`width: 100%;
.Text,
.Count {
user-select: none;
-webkit-user-select: none;
}`}
`
width: 100%;
user-select: none;
opacity: 0.7;
background: transparent;
cursor: grab;
`}
${({ disableInteraction }) => disableInteraction && `pointer-events: none;`}
@@ -48,64 +36,6 @@ export const Wrapper = styled('li')<{
background: #f5f7f8;
border-radius: 5px;
}
&.clone {
display: inline-block;
padding: 0;
margin-left: 10px;
margin-top: 5px;
pointer-events: none;
${TreeItemContainer} {
padding-right: 20px;
border-radius: 4px;
box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1);
}
}
&.ghost {
&.indicator {
opacity: 1;
position: relative;
z-index: 1;
margin-bottom: -1px;
${TreeItemContainer} {
position: relative;
padding: 0;
height: 8px;
border-color: #2389ff;
background-color: #56a1f8;
&:before {
position: absolute;
left: -8px;
top: -4px;
display: block;
content: '';
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid #2389ff;
}
> * {
/* Items are hidden using height and opacity to retain focus */
opacity: 0;
height: 0;
}
}
}
&:not(.indicator) {
opacity: 0.5;
}
${TreeItemContainer} > * {
box-shadow: none;
background-color: transparent;
}
}
`;
export const Counter = styled('span')`
@@ -138,7 +68,7 @@ export const ActionButton = styled('button')<{
border: none;
outline: none;
appearance: none;
background-color: transparent;
background: transparent;
-webkit-tap-highlight-color: transparent;
svg {
@@ -151,8 +81,7 @@ export const ActionButton = styled('button')<{
}
&:active {
background-color: ${({ background }) =>
background ?? 'rgba(0, 0, 0, 0.05)'};
background: ${({ background }) => background ?? 'rgba(0, 0, 0, 0.05)'};
svg {
fill: ${({ fill }) => fill ?? '#788491'};
@@ -170,9 +99,7 @@ export const TreeItemMoreActions = styled('div')`
visibility: hidden;
`;
export const TextLink = styled(Link, {
shouldForwardProp: (prop: string) => !['active'].includes(prop),
})<{ active?: boolean }>`
export const TextLink = styled(Link)`
display: flex;
align-items: center;
flex-grow: 1;