mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-13 21:05:19 +00:00
feat(core): add doc grant feature to share menu (#9672)
This commit is contained in:
JimmFly
@@ -1,20 +0,0 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
|
||||
export const CloudSvg = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="146"
|
||||
height="84"
|
||||
viewBox="0 0 146 84"
|
||||
fill="none"
|
||||
>
|
||||
<g opacity="0.1">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M66.9181 15.9788C52.6393 15.9788 41.064 27.5541 41.064 41.8329C41.064 43.7879 41.2801 45.687 41.6881 47.5094C42.2383 49.9676 40.6923 52.4066 38.2344 52.9579C29.4068 54.938 22.814 62.8293 22.814 72.2496C22.814 83.1687 31.6657 92.0204 42.5848 92.0204H97.3348C111.614 92.0204 123.189 80.4451 123.189 66.1663C123.189 51.8874 111.614 40.3121 97.3348 40.3121C97.1618 40.3121 96.9892 40.3138 96.8169 40.3172C94.6134 40.3603 92.6941 38.8222 92.2561 36.6623C89.8629 24.8606 79.4226 15.9788 66.9181 15.9788ZM31.939 41.8329C31.939 22.5145 47.5997 6.85376 66.9181 6.85376C82.573 6.85376 95.8181 17.1339 100.285 31.3098C118.223 32.808 132.314 47.8415 132.314 66.1663C132.314 85.4847 116.653 101.145 97.3348 101.145H42.5848C26.6261 101.145 13.689 88.2083 13.689 72.2496C13.689 59.9818 21.3304 49.5073 32.1102 45.3122C31.9969 44.1668 31.939 43.0061 31.939 41.8329Z"
|
||||
fill={cssVar('iconColor')}
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
@@ -1,34 +0,0 @@
|
||||
import { useEnableCloud } from '@affine/core/components/hooks/affine/use-enable-cloud';
|
||||
import type { Workspace } from '@affine/core/modules/workspace';
|
||||
import { track } from '@affine/track';
|
||||
import type { Store } from '@blocksuite/affine/store';
|
||||
import { useCallback } from 'react';
|
||||
|
||||
import { ShareMenu } from './share-menu';
|
||||
|
||||
type SharePageModalProps = {
|
||||
workspace: Workspace;
|
||||
page: Store;
|
||||
};
|
||||
|
||||
export const SharePageButton = ({ workspace, page }: SharePageModalProps) => {
|
||||
const confirmEnableCloud = useEnableCloud();
|
||||
const handleOpenShareModal = useCallback((open: boolean) => {
|
||||
if (open) {
|
||||
track.$.sharePanel.$.open();
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ShareMenu
|
||||
workspaceMetadata={workspace.meta}
|
||||
currentPage={page}
|
||||
onEnableAffineCloud={() =>
|
||||
confirmEnableCloud(workspace, {
|
||||
openPageId: page.id,
|
||||
})
|
||||
}
|
||||
onOpenShareModal={handleOpenShareModal}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -1,116 +0,0 @@
|
||||
import { Button, Menu, MenuItem, MenuTrigger } from '@affine/component';
|
||||
import {
|
||||
getSelectedNodes,
|
||||
useSharingUrl,
|
||||
} from '@affine/core/components/hooks/affine/use-share-url';
|
||||
import { EditorService } from '@affine/core/modules/editor';
|
||||
import { useI18n } from '@affine/i18n';
|
||||
import type { DocMode } from '@blocksuite/affine/blocks';
|
||||
import { BlockIcon, EdgelessIcon, PageIcon } from '@blocksuite/icons/rc';
|
||||
import { useLiveData, useService } from '@toeverything/infra';
|
||||
import clsx from 'clsx';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
|
||||
import * as styles from './index.css';
|
||||
|
||||
export const CopyLinkButton = ({
|
||||
workspaceId,
|
||||
secondary,
|
||||
}: {
|
||||
secondary?: boolean;
|
||||
workspaceId: string;
|
||||
}) => {
|
||||
const t = useI18n();
|
||||
|
||||
const editor = useService(EditorService).editor;
|
||||
const currentMode = useLiveData(editor.mode$);
|
||||
const editorContainer = useLiveData(editor.editorContainer$);
|
||||
|
||||
const { blockIds, elementIds } = useMemo(
|
||||
() => getSelectedNodes(editorContainer?.host || null, currentMode),
|
||||
[editorContainer, currentMode]
|
||||
);
|
||||
const { onClickCopyLink } = useSharingUrl({
|
||||
workspaceId,
|
||||
pageId: editor.doc.id,
|
||||
});
|
||||
|
||||
const onCopyPageLink = useCallback(() => {
|
||||
onClickCopyLink('page' as DocMode);
|
||||
}, [onClickCopyLink]);
|
||||
const onCopyEdgelessLink = useCallback(() => {
|
||||
onClickCopyLink('edgeless' as DocMode);
|
||||
}, [onClickCopyLink]);
|
||||
const onCopyBlockLink = useCallback(() => {
|
||||
onClickCopyLink(currentMode, blockIds, elementIds);
|
||||
}, [onClickCopyLink, currentMode, blockIds, elementIds]);
|
||||
return (
|
||||
<div
|
||||
className={clsx(styles.copyLinkContainerStyle, { secondary: secondary })}
|
||||
>
|
||||
<Button
|
||||
className={styles.copyLinkButtonStyle}
|
||||
onClick={onCopyBlockLink}
|
||||
withoutHover
|
||||
variant={secondary ? 'secondary' : 'primary'}
|
||||
>
|
||||
<span
|
||||
className={clsx(styles.copyLinkLabelStyle, {
|
||||
secondary: secondary,
|
||||
})}
|
||||
>
|
||||
{t['com.affine.share-menu.copy']()}
|
||||
</span>
|
||||
{BUILD_CONFIG.isDesktopEdition && (
|
||||
<span
|
||||
className={clsx(styles.copyLinkShortcutStyle, {
|
||||
secondary: secondary,
|
||||
})}
|
||||
>
|
||||
{environment.isMacOs ? '⌘ + ⌥ + C' : 'Ctrl + Shift + C'}
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
<Menu
|
||||
contentOptions={{
|
||||
align: 'end',
|
||||
}}
|
||||
items={
|
||||
<>
|
||||
<MenuItem
|
||||
prefixIcon={<PageIcon />}
|
||||
onSelect={onCopyPageLink}
|
||||
data-testid="share-link-menu-copy-page"
|
||||
>
|
||||
{t['com.affine.share-menu.copy.page']()}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
prefixIcon={<EdgelessIcon />}
|
||||
onSelect={onCopyEdgelessLink}
|
||||
data-testid="share-link-menu-copy-edgeless"
|
||||
>
|
||||
{t['com.affine.share-menu.copy.edgeless']()}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
prefixIcon={<BlockIcon />}
|
||||
onSelect={onCopyBlockLink}
|
||||
disabled={blockIds.length + elementIds.length === 0}
|
||||
>
|
||||
{t['com.affine.share-menu.copy.block']()}
|
||||
</MenuItem>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<MenuTrigger
|
||||
variant={secondary ? 'secondary' : 'primary'}
|
||||
className={clsx(styles.copyLinkTriggerStyle, {
|
||||
secondary: secondary,
|
||||
})}
|
||||
data-testid="share-menu-copy-link-button"
|
||||
suffixStyle={{ width: 20, height: 20 }}
|
||||
withoutHover
|
||||
/>
|
||||
</Menu>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,271 +0,0 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { cssVarV2 } from '@toeverything/theme/v2';
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
export const headerStyle = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: cssVar('fontSm'),
|
||||
fontWeight: 600,
|
||||
lineHeight: '22px',
|
||||
padding: '0 4px',
|
||||
gap: '4px',
|
||||
});
|
||||
export const content = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '8px',
|
||||
});
|
||||
export const menuStyle = style({
|
||||
width: '390px',
|
||||
height: 'auto',
|
||||
padding: '12px',
|
||||
});
|
||||
export const menuTriggerStyle = style({
|
||||
width: '150px',
|
||||
padding: '4px 10px',
|
||||
justifyContent: 'space-between',
|
||||
});
|
||||
export const publicItemRowStyle = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
});
|
||||
export const DoneIconStyle = style({
|
||||
color: cssVarV2('button/primary'),
|
||||
fontSize: cssVar('fontH5'),
|
||||
marginLeft: '8px',
|
||||
});
|
||||
export const exportItemStyle = style({
|
||||
padding: '4px',
|
||||
transition: 'all 0.3s',
|
||||
gap: '0px',
|
||||
});
|
||||
globalStyle(`${exportItemStyle} > div:first-child`, {
|
||||
alignItems: 'center',
|
||||
});
|
||||
globalStyle(`${exportItemStyle} svg`, {
|
||||
width: '16px',
|
||||
height: '16px',
|
||||
});
|
||||
|
||||
export const copyLinkContainerStyle = style({
|
||||
padding: '4px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
selectors: {
|
||||
'&.secondary': {
|
||||
padding: 0,
|
||||
marginTop: '12px',
|
||||
},
|
||||
},
|
||||
});
|
||||
export const copyLinkButtonStyle = style({
|
||||
flex: 1,
|
||||
padding: '4px 12px',
|
||||
paddingRight: '6px',
|
||||
borderRight: 'none',
|
||||
borderTopRightRadius: '0',
|
||||
borderBottomRightRadius: '0',
|
||||
color: 'transparent',
|
||||
position: 'initial',
|
||||
selectors: {
|
||||
'&.dark': {
|
||||
backgroundColor: cssVarV2('layer/pureBlack'),
|
||||
},
|
||||
'&.dark::hover': {
|
||||
backgroundColor: cssVarV2('layer/pureBlack'),
|
||||
},
|
||||
},
|
||||
});
|
||||
export const copyLinkLabelContainerStyle = style({
|
||||
width: '100%',
|
||||
borderRight: 'none',
|
||||
borderTopRightRadius: '0',
|
||||
borderBottomRightRadius: '0',
|
||||
position: 'relative',
|
||||
});
|
||||
export const copyLinkLabelStyle = style({
|
||||
position: 'absolute',
|
||||
textAlign: 'end',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%) translateY(-50%)',
|
||||
lineHeight: '20px',
|
||||
color: cssVarV2('text/pureWhite'),
|
||||
selectors: {
|
||||
'&.secondary': {
|
||||
color: cssVarV2('text/primary'),
|
||||
},
|
||||
},
|
||||
});
|
||||
export const copyLinkShortcutStyle = style({
|
||||
position: 'absolute',
|
||||
textAlign: 'end',
|
||||
top: '50%',
|
||||
right: '52px',
|
||||
transform: 'translateY(-50%)',
|
||||
opacity: 0.5,
|
||||
lineHeight: '20px',
|
||||
color: cssVarV2('text/pureWhite'),
|
||||
selectors: {
|
||||
'&.secondary': {
|
||||
color: cssVarV2('text/secondary'),
|
||||
},
|
||||
},
|
||||
});
|
||||
export const copyLinkTriggerStyle = style({
|
||||
padding: '4px 12px 4px 8px',
|
||||
borderLeft: 'none',
|
||||
borderTopLeftRadius: '0',
|
||||
borderBottomLeftRadius: '0',
|
||||
':hover': {
|
||||
backgroundColor: cssVarV2('button/primary'),
|
||||
color: cssVarV2('button/pureWhiteText'),
|
||||
},
|
||||
'::after': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
left: '0',
|
||||
top: '0',
|
||||
height: '100%',
|
||||
width: '1px',
|
||||
backgroundColor: cssVarV2('button/innerBlackBorder'),
|
||||
},
|
||||
selectors: {
|
||||
'&.secondary': {
|
||||
backgroundColor: cssVarV2('button/secondary'),
|
||||
color: cssVarV2('text/secondary'),
|
||||
},
|
||||
'&.secondary:hover': {
|
||||
backgroundColor: cssVarV2('button/secondary'),
|
||||
color: cssVarV2('text/secondary'),
|
||||
},
|
||||
},
|
||||
});
|
||||
globalStyle(`${copyLinkTriggerStyle} svg`, {
|
||||
color: cssVarV2('button/pureWhiteText'),
|
||||
transform: 'translateX(2px)',
|
||||
});
|
||||
globalStyle(`${copyLinkTriggerStyle}.secondary svg`, {
|
||||
color: cssVarV2('text/secondary'),
|
||||
transform: 'translateX(2px)',
|
||||
});
|
||||
export const copyLinkMenuItemStyle = style({
|
||||
padding: '4px',
|
||||
transition: 'all 0.3s',
|
||||
});
|
||||
export const descriptionStyle = style({
|
||||
wordWrap: 'break-word',
|
||||
fontSize: cssVar('fontXs'),
|
||||
lineHeight: '20px',
|
||||
color: cssVarV2('text/secondary'),
|
||||
textAlign: 'left',
|
||||
padding: '0 6px',
|
||||
});
|
||||
export const containerStyle = style({
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
flexDirection: 'column',
|
||||
gap: '8px',
|
||||
});
|
||||
export const indicatorContainerStyle = style({
|
||||
position: 'relative',
|
||||
});
|
||||
export const titleContainerStyle = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: cssVar('fontXs'),
|
||||
color: cssVarV2('text/secondary'),
|
||||
fontWeight: 400,
|
||||
padding: '8px 4px 0 4px',
|
||||
});
|
||||
export const columnContainerStyle = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
gap: '8px',
|
||||
});
|
||||
export const rowContainerStyle = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: '4px',
|
||||
});
|
||||
export const exportContainerStyle = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '8px',
|
||||
});
|
||||
export const labelStyle = style({
|
||||
fontSize: cssVar('fontSm'),
|
||||
fontWeight: 500,
|
||||
});
|
||||
export const disableSharePage = style({
|
||||
color: cssVarV2('button/error'),
|
||||
});
|
||||
export const localSharePage = style({
|
||||
padding: '12px 8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
borderRadius: '8px',
|
||||
backgroundColor: cssVarV2('layer/background/secondary'),
|
||||
minHeight: '84px',
|
||||
position: 'relative',
|
||||
});
|
||||
export const cloudSvgContainer = style({
|
||||
width: '146px',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
position: 'absolute',
|
||||
bottom: '0',
|
||||
right: '0',
|
||||
});
|
||||
export const shareLinkStyle = style({
|
||||
padding: '4px',
|
||||
fontSize: cssVar('fontXs'),
|
||||
fontWeight: 500,
|
||||
lineHeight: '20px',
|
||||
transform: 'translateX(-4px)',
|
||||
gap: '4px',
|
||||
});
|
||||
globalStyle(`${shareLinkStyle} > span`, {
|
||||
color: cssVarV2('text/link'),
|
||||
});
|
||||
globalStyle(`${shareLinkStyle} > div > svg`, {
|
||||
color: cssVarV2('text/link'),
|
||||
});
|
||||
export const buttonContainer = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '4px',
|
||||
fontWeight: 500,
|
||||
});
|
||||
export const button = style({
|
||||
padding: '6px 8px',
|
||||
height: 32,
|
||||
});
|
||||
export const shortcutStyle = style({
|
||||
fontSize: cssVar('fontXs'),
|
||||
color: cssVarV2('text/secondary'),
|
||||
fontWeight: 400,
|
||||
});
|
||||
export const openWorkspaceSettingsStyle = style({
|
||||
color: cssVarV2('text/link'),
|
||||
fontSize: cssVar('fontXs'),
|
||||
fontWeight: 500,
|
||||
display: 'flex',
|
||||
gap: '8px',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
width: '100%',
|
||||
padding: '4px',
|
||||
cursor: 'pointer',
|
||||
});
|
||||
globalStyle(`${openWorkspaceSettingsStyle} svg`, {
|
||||
color: cssVarV2('text/link'),
|
||||
});
|
||||
@@ -1,3 +0,0 @@
|
||||
import { atom } from 'jotai/vanilla';
|
||||
|
||||
export const enableShareMenuAtom = atom(false);
|
||||
@@ -1 +0,0 @@
|
||||
export * from './share-menu';
|
||||
@@ -1,45 +0,0 @@
|
||||
import { useExportPage } from '@affine/core/components/hooks/affine/use-export-page';
|
||||
import {
|
||||
ExportMenuItems,
|
||||
PrintMenuItems,
|
||||
} from '@affine/core/components/page-list';
|
||||
import { EditorService } from '@affine/core/modules/editor';
|
||||
import { useI18n } from '@affine/i18n';
|
||||
import { useLiveData, useService } from '@toeverything/infra';
|
||||
|
||||
import * as styles from './index.css';
|
||||
|
||||
export const ShareExport = () => {
|
||||
const t = useI18n();
|
||||
const editor = useService(EditorService).editor;
|
||||
const exportHandler = useExportPage();
|
||||
const currentMode = useLiveData(editor.mode$);
|
||||
|
||||
return (
|
||||
<div className={styles.exportContainerStyle}>
|
||||
<div className={styles.descriptionStyle}>
|
||||
{t['com.affine.share-menu.ShareViaExportDescription']()}
|
||||
</div>
|
||||
<div className={styles.exportContainerStyle}>
|
||||
<ExportMenuItems
|
||||
exportHandler={exportHandler}
|
||||
className={styles.exportItemStyle}
|
||||
pageMode={currentMode}
|
||||
/>
|
||||
</div>
|
||||
{currentMode === 'page' && (
|
||||
<>
|
||||
<div className={styles.descriptionStyle}>
|
||||
{t['com.affine.share-menu.ShareViaPrintDescription']()}
|
||||
</div>
|
||||
<div>
|
||||
<PrintMenuItems
|
||||
exportHandler={exportHandler}
|
||||
className={styles.exportItemStyle}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,124 +0,0 @@
|
||||
import { Tabs, Tooltip } from '@affine/component';
|
||||
import { Button } from '@affine/component/ui/button';
|
||||
import { Menu } from '@affine/component/ui/menu';
|
||||
import { ShareInfoService } from '@affine/core/modules/share-doc';
|
||||
import type { WorkspaceMetadata } from '@affine/core/modules/workspace';
|
||||
import { useI18n } from '@affine/i18n';
|
||||
import type { Store } from '@blocksuite/affine/store';
|
||||
import { LockIcon, PublishIcon } from '@blocksuite/icons/rc';
|
||||
import { useLiveData, useService } from '@toeverything/infra';
|
||||
import { forwardRef, type PropsWithChildren, type Ref, useEffect } from 'react';
|
||||
|
||||
import * as styles from './index.css';
|
||||
import { ShareExport } from './share-export';
|
||||
import { SharePage } from './share-page';
|
||||
|
||||
export interface ShareMenuProps extends PropsWithChildren {
|
||||
workspaceMetadata: WorkspaceMetadata;
|
||||
currentPage: Store;
|
||||
onEnableAffineCloud: () => void;
|
||||
onOpenShareModal?: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export const ShareMenuContent = (props: ShareMenuProps) => {
|
||||
const t = useI18n();
|
||||
return (
|
||||
<div className={styles.containerStyle}>
|
||||
<Tabs.Root defaultValue="share">
|
||||
<Tabs.List>
|
||||
<Tabs.Trigger value="share">
|
||||
{t['com.affine.share-menu.shareButton']()}
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger value="export">{t['Export']()}</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
<Tabs.Content value="share">
|
||||
<SharePage {...props} />
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="export">
|
||||
<ShareExport />
|
||||
</Tabs.Content>
|
||||
</Tabs.Root>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const DefaultShareButton = forwardRef(function DefaultShareButton(
|
||||
_,
|
||||
ref: Ref<HTMLButtonElement>
|
||||
) {
|
||||
const t = useI18n();
|
||||
const shareInfoService = useService(ShareInfoService);
|
||||
const shared = useLiveData(shareInfoService.shareInfo.isShared$);
|
||||
|
||||
useEffect(() => {
|
||||
shareInfoService.shareInfo.revalidate();
|
||||
}, [shareInfoService]);
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
content={
|
||||
shared
|
||||
? t['com.affine.share-menu.option.link.readonly.description']()
|
||||
: t['com.affine.share-menu.option.link.no-access.description']()
|
||||
}
|
||||
>
|
||||
<Button ref={ref} className={styles.button}>
|
||||
<div className={styles.buttonContainer}>
|
||||
{shared ? <PublishIcon fontSize={16} /> : <LockIcon fontSize={16} />}
|
||||
{t['com.affine.share-menu.shareButton']()}
|
||||
</div>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
);
|
||||
});
|
||||
|
||||
const LocalShareMenu = (props: ShareMenuProps) => {
|
||||
return (
|
||||
<Menu
|
||||
items={<ShareMenuContent {...props} />}
|
||||
contentOptions={{
|
||||
className: styles.menuStyle,
|
||||
['data-testid' as string]: 'local-share-menu',
|
||||
align: 'end',
|
||||
}}
|
||||
rootOptions={{
|
||||
modal: false,
|
||||
onOpenChange: props.onOpenShareModal,
|
||||
}}
|
||||
>
|
||||
<div data-testid="local-share-menu-button">
|
||||
{props.children || <DefaultShareButton />}
|
||||
</div>
|
||||
</Menu>
|
||||
);
|
||||
};
|
||||
|
||||
const CloudShareMenu = (props: ShareMenuProps) => {
|
||||
return (
|
||||
<Menu
|
||||
items={<ShareMenuContent {...props} />}
|
||||
contentOptions={{
|
||||
className: styles.menuStyle,
|
||||
['data-testid' as string]: 'cloud-share-menu',
|
||||
align: 'end',
|
||||
}}
|
||||
rootOptions={{
|
||||
modal: false,
|
||||
onOpenChange: props.onOpenShareModal,
|
||||
}}
|
||||
>
|
||||
<div data-testid="cloud-share-menu-button">
|
||||
{props.children || <DefaultShareButton />}
|
||||
</div>
|
||||
</Menu>
|
||||
);
|
||||
};
|
||||
|
||||
export const ShareMenu = (props: ShareMenuProps) => {
|
||||
const { workspaceMetadata } = props;
|
||||
|
||||
if (workspaceMetadata.flavour === 'local') {
|
||||
return <LocalShareMenu {...props} />;
|
||||
}
|
||||
return <CloudShareMenu {...props} />;
|
||||
};
|
||||
@@ -1,253 +0,0 @@
|
||||
import { notify, Skeleton } from '@affine/component';
|
||||
import { Button } from '@affine/component/ui/button';
|
||||
import { Menu, MenuItem, MenuTrigger } from '@affine/component/ui/menu';
|
||||
import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
|
||||
import { ServerService } from '@affine/core/modules/cloud';
|
||||
import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
|
||||
import { WorkspacePermissionService } from '@affine/core/modules/permissions';
|
||||
import { ShareInfoService } from '@affine/core/modules/share-doc';
|
||||
import { PublicDocMode } from '@affine/graphql';
|
||||
import { useI18n } from '@affine/i18n';
|
||||
import { track } from '@affine/track';
|
||||
import {
|
||||
CollaborationIcon,
|
||||
DoneIcon,
|
||||
LockIcon,
|
||||
SingleSelectCheckSolidIcon,
|
||||
ViewIcon,
|
||||
} from '@blocksuite/icons/rc';
|
||||
import { useLiveData, useService } from '@toeverything/infra';
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { Suspense, useCallback, useEffect } from 'react';
|
||||
import { ErrorBoundary } from 'react-error-boundary';
|
||||
|
||||
import { CloudSvg } from '../cloud-svg';
|
||||
import { CopyLinkButton } from './copy-link-button';
|
||||
import * as styles from './index.css';
|
||||
import type { ShareMenuProps } from './share-menu';
|
||||
|
||||
export const LocalSharePage = (props: ShareMenuProps) => {
|
||||
const t = useI18n();
|
||||
const {
|
||||
workspaceMetadata: { id: workspaceId },
|
||||
} = props;
|
||||
return (
|
||||
<>
|
||||
<div className={styles.localSharePage}>
|
||||
<div className={styles.columnContainerStyle} style={{ gap: '12px' }}>
|
||||
<div
|
||||
className={styles.descriptionStyle}
|
||||
style={{ maxWidth: '230px' }}
|
||||
>
|
||||
{t['com.affine.share-menu.EnableCloudDescription']()}
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
onClick={props.onEnableAffineCloud}
|
||||
variant="primary"
|
||||
data-testid="share-menu-enable-affine-cloud-button"
|
||||
>
|
||||
{t['Enable AFFiNE Cloud']()}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.cloudSvgContainer}>
|
||||
<CloudSvg />
|
||||
</div>
|
||||
</div>
|
||||
<CopyLinkButton workspaceId={workspaceId} secondary />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const AFFiNESharePage = (props: ShareMenuProps) => {
|
||||
const t = useI18n();
|
||||
const {
|
||||
workspaceMetadata: { id: workspaceId },
|
||||
} = props;
|
||||
const shareInfoService = useService(ShareInfoService);
|
||||
const serverService = useService(ServerService);
|
||||
useEffect(() => {
|
||||
shareInfoService.shareInfo.revalidate();
|
||||
}, [shareInfoService]);
|
||||
const isSharedPage = useLiveData(shareInfoService.shareInfo.isShared$);
|
||||
const sharedMode = useLiveData(shareInfoService.shareInfo.sharedMode$);
|
||||
const baseUrl = serverService.server.baseUrl;
|
||||
const isLoading =
|
||||
isSharedPage === null || sharedMode === null || baseUrl === null;
|
||||
|
||||
const permissionService = useService(WorkspacePermissionService);
|
||||
const isOwner = useLiveData(permissionService.permission.isOwner$);
|
||||
const workspaceDialogService = useService(WorkspaceDialogService);
|
||||
|
||||
const onOpenWorkspaceSettings = useCallback(() => {
|
||||
workspaceDialogService.open('setting', {
|
||||
activeTab: 'workspace:preference',
|
||||
});
|
||||
}, [workspaceDialogService]);
|
||||
|
||||
const onClickAnyoneReadOnlyShare = useAsyncCallback(async () => {
|
||||
if (isSharedPage) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
// TODO(@JimmFly): remove mode when we have a better way to handle it
|
||||
await shareInfoService.shareInfo.enableShare(PublicDocMode.Page);
|
||||
track.$.sharePanel.$.createShareLink();
|
||||
notify.success({
|
||||
title:
|
||||
t[
|
||||
'com.affine.share-menu.create-public-link.notification.success.title'
|
||||
](),
|
||||
message:
|
||||
t[
|
||||
'com.affine.share-menu.create-public-link.notification.success.message'
|
||||
](),
|
||||
style: 'normal',
|
||||
icon: <SingleSelectCheckSolidIcon color={cssVar('primaryColor')} />,
|
||||
});
|
||||
} catch (err) {
|
||||
notify.error({
|
||||
title:
|
||||
t[
|
||||
'com.affine.share-menu.confirm-modify-mode.notification.fail.title'
|
||||
](),
|
||||
message:
|
||||
t[
|
||||
'com.affine.share-menu.confirm-modify-mode.notification.fail.message'
|
||||
](),
|
||||
});
|
||||
console.error(err);
|
||||
}
|
||||
}, [isSharedPage, shareInfoService.shareInfo, t]);
|
||||
|
||||
const onDisablePublic = useAsyncCallback(async () => {
|
||||
try {
|
||||
await shareInfoService.shareInfo.disableShare();
|
||||
notify.error({
|
||||
title:
|
||||
t[
|
||||
'com.affine.share-menu.disable-publish-link.notification.success.title'
|
||||
](),
|
||||
message:
|
||||
t[
|
||||
'com.affine.share-menu.disable-publish-link.notification.success.message'
|
||||
](),
|
||||
});
|
||||
} catch (err) {
|
||||
notify.error({
|
||||
title:
|
||||
t[
|
||||
'com.affine.share-menu.disable-publish-link.notification.fail.title'
|
||||
](),
|
||||
message:
|
||||
t[
|
||||
'com.affine.share-menu.disable-publish-link.notification.fail.message'
|
||||
](),
|
||||
});
|
||||
console.log(err);
|
||||
}
|
||||
}, [shareInfoService, t]);
|
||||
|
||||
if (isLoading) {
|
||||
// TODO(@eyhn): loading and error UI
|
||||
return (
|
||||
<>
|
||||
<Skeleton height={100} />
|
||||
<Skeleton height={40} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.content}>
|
||||
<div className={styles.titleContainerStyle}>
|
||||
{isSharedPage
|
||||
? t['com.affine.share-menu.option.link.readonly.description']()
|
||||
: t['com.affine.share-menu.option.link.no-access.description']()}
|
||||
</div>
|
||||
<div className={styles.columnContainerStyle}>
|
||||
<div className={styles.rowContainerStyle}>
|
||||
<div className={styles.labelStyle}>
|
||||
{t['com.affine.share-menu.option.link.label']()}
|
||||
</div>
|
||||
<Menu
|
||||
contentOptions={{
|
||||
align: 'end',
|
||||
}}
|
||||
items={
|
||||
<>
|
||||
<MenuItem prefixIcon={<LockIcon />} onSelect={onDisablePublic}>
|
||||
<div className={styles.publicItemRowStyle}>
|
||||
<div>
|
||||
{t['com.affine.share-menu.option.link.no-access']()}
|
||||
</div>
|
||||
{!isSharedPage && (
|
||||
<DoneIcon className={styles.DoneIconStyle} />
|
||||
)}
|
||||
</div>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
prefixIcon={<ViewIcon />}
|
||||
onSelect={onClickAnyoneReadOnlyShare}
|
||||
data-testid="share-link-menu-enable-share"
|
||||
>
|
||||
<div className={styles.publicItemRowStyle}>
|
||||
<div>
|
||||
{t['com.affine.share-menu.option.link.readonly']()}
|
||||
</div>
|
||||
{isSharedPage && (
|
||||
<DoneIcon className={styles.DoneIconStyle} />
|
||||
)}
|
||||
</div>
|
||||
</MenuItem>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<MenuTrigger
|
||||
className={styles.menuTriggerStyle}
|
||||
data-testid="share-link-menu-trigger"
|
||||
>
|
||||
{isSharedPage
|
||||
? t['com.affine.share-menu.option.link.readonly']()
|
||||
: t['com.affine.share-menu.option.link.no-access']()}
|
||||
</MenuTrigger>
|
||||
</Menu>
|
||||
</div>
|
||||
<div className={styles.rowContainerStyle}>
|
||||
<div className={styles.labelStyle}>
|
||||
{t['com.affine.share-menu.option.permission.label']()}
|
||||
</div>
|
||||
<Button className={styles.menuTriggerStyle} disabled>
|
||||
{t['com.affine.share-menu.option.permission.can-edit']()}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{isOwner && (
|
||||
<div
|
||||
className={styles.openWorkspaceSettingsStyle}
|
||||
onClick={onOpenWorkspaceSettings}
|
||||
>
|
||||
<CollaborationIcon fontSize={16} />
|
||||
{t['com.affine.share-menu.navigate.workspace']()}
|
||||
</div>
|
||||
)}
|
||||
<CopyLinkButton workspaceId={workspaceId} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const SharePage = (props: ShareMenuProps) => {
|
||||
if (props.workspaceMetadata.flavour === 'local') {
|
||||
return <LocalSharePage {...props} />;
|
||||
} else {
|
||||
return (
|
||||
// TODO(@eyhn): refactor this part
|
||||
<ErrorBoundary fallback={null}>
|
||||
<Suspense>
|
||||
<AFFiNESharePage {...props} />
|
||||
</Suspense>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
}
|
||||
};
|
||||
@@ -6,7 +6,6 @@ import {
|
||||
MenuSub,
|
||||
} from '@affine/component/ui/menu';
|
||||
import { PageHistoryModal } from '@affine/core/components/affine/page-history-modal';
|
||||
import { ShareMenuContent } from '@affine/core/components/affine/share-page-modal/share-menu';
|
||||
import { useBlockSuiteMetaHelper } from '@affine/core/components/hooks/affine/use-block-suite-meta-helper';
|
||||
import { useEnableCloud } from '@affine/core/components/hooks/affine/use-enable-cloud';
|
||||
import { useExportPage } from '@affine/core/components/hooks/affine/use-export-page';
|
||||
@@ -17,6 +16,7 @@ import { useDetailPageHeaderResponsive } from '@affine/core/desktop/pages/worksp
|
||||
import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
|
||||
import { EditorService } from '@affine/core/modules/editor';
|
||||
import { OpenInAppService } from '@affine/core/modules/open-in-app/services';
|
||||
import { ShareMenuContent } from '@affine/core/modules/share-menu';
|
||||
import { WorkbenchService } from '@affine/core/modules/workbench';
|
||||
import { ViewService } from '@affine/core/modules/workbench/services/view';
|
||||
import { WorkspaceService } from '@affine/core/modules/workspace';
|
||||
|
||||
Reference in New Issue
Block a user