Skip to content

Commit

Permalink
feat(Editor): support copy the component states
Browse files Browse the repository at this point in the history
  • Loading branch information
MrWindlike committed Sep 1, 2023
1 parent 9729c55 commit bdda135
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 1 deletion.
36 changes: 35 additions & 1 deletion packages/editor/src/components/StructureTree/ComponentNode.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
MenuItem,
MenuList,
IconButton,
useToast,
} from '@chakra-ui/react';
import { isEqual, xor } from 'lodash';
import { ComponentItemView } from './ComponentItemView';
Expand All @@ -21,6 +22,7 @@ import { RootId } from '../../constants';
import { RelationshipModal } from '../RelationshipModal';
import { ExplorerMenuTabs } from '../../constants/enum';
import { ExtractModuleModal } from '../ExtractModuleModal';
import { copyToClipboard } from '../../utils/copy';

const IndextWidth = 24;

Expand Down Expand Up @@ -51,7 +53,8 @@ const ComponentNodeImpl = (props: Props) => {
onDragEnd,
prefix,
} = props;
const { registry, eventBus, appModelManager, editorStore } = services;
const toast = useToast();
const { registry, eventBus, appModelManager, editorStore, stateManager } = services;
const [isShowRelationshipModal, setIsShowRelationshipModal] = useState(false);
const [isShowExtractModuleModal, setIsShowExtractModuleModal] = useState(false);
const slots = Object.keys(registry.getComponentByType(component.type).spec.slots);
Expand Down Expand Up @@ -103,6 +106,34 @@ const ComponentNodeImpl = (props: Props) => {
},
[component.id, editorStore]
);
const onClickCopyState = useCallback(
(e: React.MouseEvent) => {
e.stopPropagation();

const componentState = stateManager.store[component.id];

if (componentState) {
const success = copyToClipboard(JSON.stringify(componentState, null, 2));

if (success) {
toast({
title: 'Copy state to clipboard successfully.',
status: 'success',
position: 'top',
duration: 1500,
});
} else {
toast({
title: 'Copy state to clipboard failed.',
status: 'warning',
position: 'top',
duration: 1500,
});
}
}
},
[component.id, stateManager, toast]
);
const onClickExtractToModule = useCallback((e: React.MouseEvent) => {
e.stopPropagation();
setIsShowExtractModuleModal(true);
Expand Down Expand Up @@ -189,6 +220,9 @@ const ComponentNodeImpl = (props: Props) => {
<MenuItem icon={<ViewIcon />} onClick={onClickShowState}>
Show State
</MenuItem>
<MenuItem icon={<CopyIcon />} onClick={onClickCopyState}>
Copy State
</MenuItem>
<MenuItem icon={<ViewIcon />} onClick={onClickExtractToModule}>
Extract to Module
</MenuItem>
Expand Down
16 changes: 16 additions & 0 deletions packages/editor/src/utils/copy.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
export function copyToClipboard(text: string) {
const textarea = document.createElement('textarea');

textarea.textContent = text;
textarea.style.position = 'fixed';
document.body.appendChild(textarea);
textarea.select();

try {
return document.execCommand('copy');
} catch (ex) {
return false;
} finally {
document.body.removeChild(textarea);
}
}

0 comments on commit bdda135

Please sign in to comment.