|
|
@ -36,33 +36,37 @@ const MessageGroup = forwardRef< |
|
|
|
}, |
|
|
|
}, |
|
|
|
ref, |
|
|
|
ref, |
|
|
|
) => { |
|
|
|
) => { |
|
|
|
const { keys: messageKeys, init: initialMessages } = useMemo( |
|
|
|
const { keys: messageKeys } = useMemo( |
|
|
|
() => |
|
|
|
() => |
|
|
|
Array.from({ length: count }).reduce<{ |
|
|
|
Array.from({ length: count }).reduce<{ |
|
|
|
keys: string[]; |
|
|
|
keys: string[]; |
|
|
|
init: undefined[]; |
|
|
|
|
|
|
|
}>( |
|
|
|
}>( |
|
|
|
(previous) => { |
|
|
|
(previous) => { |
|
|
|
const { keys, init } = previous; |
|
|
|
const { keys } = previous; |
|
|
|
|
|
|
|
|
|
|
|
keys.push(uuidv4()); |
|
|
|
keys.push(uuidv4()); |
|
|
|
init.push(undefined); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return previous; |
|
|
|
return previous; |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ keys: [], init: [] }, |
|
|
|
{ keys: [] }, |
|
|
|
), |
|
|
|
), |
|
|
|
[count], |
|
|
|
[count], |
|
|
|
); |
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
const [messages, setMessages] = |
|
|
|
const [messages, setMessages] = useState<Array<Message | undefined>>([]); |
|
|
|
useState<Array<Message | undefined>>(initialMessages); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const setMessage = useCallback((index: number, message?: Message) => { |
|
|
|
const setMessage = useCallback((index: number, message?: Message) => { |
|
|
|
setMessages((previous) => { |
|
|
|
setMessages((previous) => { |
|
|
|
previous.splice(index, 1, message); |
|
|
|
const result = [...previous]; |
|
|
|
|
|
|
|
const diff = index + 1 - result.length; |
|
|
|
|
|
|
|
|
|
|
|
return [...previous]; |
|
|
|
if (diff > 0) { |
|
|
|
|
|
|
|
result.push(...Array.from({ length: diff }, () => undefined)); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
result.splice(index, 1, message); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return result; |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, []); |
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|