From 56a9e2ead56dd7148ae617737296fcb014c2f280 Mon Sep 17 00:00:00 2001 From: qishaoxuan Date: Wed, 27 Jul 2022 23:00:20 +0800 Subject: [PATCH] refactor: refactor pendant history --- .../PendantHistoryPanel.tsx | 64 +++++++++++++++---- .../pendant-popover/PendantPopover.tsx | 3 + .../src/block-pendant/use-pendant.ts | 6 +- .../editor-core/src/block-pendant/utils.ts | 40 +++--------- 4 files changed, 65 insertions(+), 48 deletions(-) diff --git a/libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx b/libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx index f0e188d9a3..ce47f80e27 100644 --- a/libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx +++ b/libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx @@ -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([]); + 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 ( @@ -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 = ({ ); }; + const StyledPendantHistoryPanel = styled('div')` display: flex; flex-wrap: wrap; diff --git a/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx b/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx index 13a0ccbfb6..cdc06c07d9 100644 --- a/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx +++ b/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx @@ -36,6 +36,9 @@ export const PendantPopover: FC< trigger="click" /> } + onClose={() => { + popoverHandlerRef.current?.setVisible(false); + }} /> } offset={[0, 0]} diff --git a/libs/components/editor-core/src/block-pendant/use-pendant.ts b/libs/components/editor-core/src/block-pendant/use-pendant.ts index e936d2532e..55c8aa054e 100644 --- a/libs/components/editor-core/src/block-pendant/use-pendant.ts +++ b/libs/components/editor-core/src/block-pendant/use-pendant.ts @@ -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, }); }; diff --git a/libs/components/editor-core/src/block-pendant/utils.ts b/libs/components/editor-core/src/block-pendant/utils.ts index d66e4a69f0..33b59fdc50 100644 --- a/libs/components/editor-core/src/block-pendant/utils.ts +++ b/libs/components/editor-core/src/block-pendant/utils.ts @@ -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 = ({