Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 12:28:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: refactor pendant history

Browse Source
This commit is contained in:
qishaoxuan
2022-07-27 23:00:20 +08:00
parent 4c35337dbb
commit 56a9e2ead5
4 changed files with 65 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx
View File

@@ -1,10 +1,12 @@
import React, { ReactNode, useRef } from 'react';
import { getLatestPropertyValue } from '../utils';
import React, { ReactNode, useRef, useEffect, useState } from 'react';
import { getPendantHistory } from '../utils';
import {
getRecastItemValue,
RecastMetaProperty,
useRecastBlock,
useRecastBlockMeta,
RecastBlockValue,
RecastPropertyId,
} from '../../recast-block';
import { AsyncBlock } from '../../editor';
import { Popover, PopperHandler, styled } from '@toeverything/components/ui';
@@ -14,27 +16,60 @@ import { UpdatePendantPanel } from '../pendant-operation-panel';
export const PendantHistoryPanel = ({
block,
endElement,
onClose,
}: {
block: AsyncBlock;
endElement?: ReactNode;
onClose?: () => void;
}) => {
const popoverHandlerRef = useRef<{ [key: string]: PopperHandler }>({});
const groupBlock = useRecastBlock();
const { getProperties } = useRecastBlockMeta();
const { getProperty } = useRecastBlockMeta();
const { getAllValue } = getRecastItemValue(block);
const recastBlock = useRecastBlock();
const latestPropertyValues = getLatestPropertyValue({
recastBlockId: recastBlock.id,
blockId: block.id,
});
const blockValues = getAllValue();
const [history, setHistory] = useState<RecastBlockValue[]>([]);
const popoverHandlerRef = useRef<{ [key: string]: PopperHandler }>({});
const history = latestPropertyValues
.filter(latest => !blockValues.find(v => v && v.id === latest.value.id))
.map(v => v.value);
useEffect(() => {
const init = async () => {
const currentBlockValues = getAllValue();
const allProperties = getProperties();
const missProperties = allProperties.filter(
property => !currentBlockValues.find(v => v.id === property.id)
);
const pendantHistory = getPendantHistory({
recastBlockId: recastBlock.id,
});
const historyMap = missProperties.reduce<{
[key: RecastPropertyId]: string;
}>((history, property) => {
if (pendantHistory[property.id]) {
history[property.id] = pendantHistory[property.id];
}
return history;
}, {});
const blockHistory = await Promise.all(
Object.entries(historyMap).map(
async ([propertyId, blockId]) => {
const latestValueBlock = (
await groupBlock.children()
).find((block: AsyncBlock) => block.id === blockId);
return getRecastItemValue(latestValueBlock).getValue(
propertyId as RecastPropertyId
);
}
)
);
setHistory(blockHistory);
};
init();
}, [getAllValue, getProperties, groupBlock, recastBlock]);
return (
<StyledPendantHistoryPanel>
@@ -57,11 +92,13 @@ export const PendantHistoryPanel = ({
popoverHandlerRef.current[
item.id
].setVisible(false);
onClose?.();
}}
onCancel={() => {
popoverHandlerRef.current[
item.id
].setVisible(false);
onClose?.();
}}
titleEditable={false}
/>
@@ -85,6 +122,7 @@ export const PendantHistoryPanel = ({
</StyledPendantHistoryPanel>
);
};
const StyledPendantHistoryPanel = styled('div')`
display: flex;
flex-wrap: wrap;

3
libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx
View File

@@ -36,6 +36,9 @@ export const PendantPopover: FC<
trigger="click"
/>
}
onClose={() => {
popoverHandlerRef.current?.setVisible(false);
}}
/>
}
offset={[0, 0]}

6
libs/components/editor-core/src/block-pendant/use-pendant.ts
View File

@@ -1,4 +1,4 @@
import { removePropertyValueRecord, setLatestPropertyValue } from './utils';
import { removePropertyValueRecord, setPendantHistory } from './utils';
import { AsyncBlock } from '../editor';
import {
getRecastItemValue,
@@ -19,10 +19,10 @@ export const usePendant = (block: AsyncBlock) => {
value: newValue,
};
await setValue(nv);
setLatestPropertyValue({
setPendantHistory({
recastBlockId: recastBlock.id,
blockId: block.id,
value: nv,
propertyId: property.id,
});
};

40
libs/components/editor-core/src/block-pendant/utils.ts
View File

@@ -9,15 +9,12 @@ import { PendantConfig, PendantTypes } from './types';
type Props = {
recastBlockId: string;
blockId: string;
value: RecastBlockValue;
propertyId: RecastPropertyId;
};
type StorageMap = {
[recastBlockId: string]: {
[propertyId: RecastPropertyId]: {
blockId: string;
value: RecastBlockValue;
};
[propertyId: RecastPropertyId]: string;
};
};
@@ -30,10 +27,10 @@ const ensureLocalStorage = () => {
}
};
export const setLatestPropertyValue = ({
export const setPendantHistory = ({
recastBlockId,
blockId,
value,
propertyId,
}: Props) => {
ensureLocalStorage();
const data: StorageMap = JSON.parse(
@@ -44,43 +41,22 @@ export const setLatestPropertyValue = ({
data[recastBlockId] = {};
}
const propertyValueRecord = data[recastBlockId];
const propertyId = value.id;
propertyValueRecord[propertyId] = {
blockId: blockId,
value,
};
propertyValueRecord[propertyId] = blockId;
localStorage.setItem(LOCAL_STORAGE_NAME, JSON.stringify(data));
};
export const getLatestPropertyValue = ({
export const getPendantHistory = ({
recastBlockId,
}: {
recastBlockId: string;
blockId: string;
}): Array<{
blockId: string;
value: RecastBlockValue;
propertyId: RecastPropertyId;
}> => {
}) => {
ensureLocalStorage();
const data: StorageMap = JSON.parse(
localStorage.getItem(LOCAL_STORAGE_NAME) as string
);
if (!data[recastBlockId]) {
return [];
}
const returnData = [];
for (const propertyId in data[recastBlockId]) {
returnData.push({
propertyId: propertyId as RecastPropertyId,
...data[recastBlockId][propertyId as RecastPropertyId],
});
}
return returnData;
return data[recastBlockId] ?? {};
};
export const removePropertyValueRecord = ({