Local modifications to ClusterLabs/Anvil by Alteeve
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

81 lines
1.9 KiB

import {
forwardRef,
useCallback,
useImperativeHandle,
useMemo,
useState,
} from 'react';
import MessageBox, { Message, MessageBoxProps } from './MessageBox';
type Messages = {
[messageKey: string]: Message | undefined;
};
type MessageGroupOptionalProps = {
defaultMessageType?: MessageBoxProps['type'];
};
type MessageGroupProps = MessageGroupOptionalProps;
type MessageGroupForwardedRefContent = {
setMessage?: (key: string, message?: Message) => void;
};
const MESSAGE_GROUP_DEFAULT_PROPS: Required<MessageGroupOptionalProps> = {
defaultMessageType: 'info',
};
const MessageGroup = forwardRef<
MessageGroupForwardedRefContent,
MessageGroupProps
>(
(
{ defaultMessageType = MESSAGE_GROUP_DEFAULT_PROPS.defaultMessageType },
ref,
) => {
const [messages, setMessages] = useState<Messages>({});
const setMessage = useCallback((key: string, message?: Message) => {
setMessages((previous) => {
const result = { ...previous };
result[key] = message;
return result;
});
}, []);
const messageElements = useMemo(
() =>
Object.entries(messages).map(([messageKey, message]) => {
let messageElement;
if (message) {
const { children: messageChildren, type = defaultMessageType } =
message;
messageElement = (
<MessageBox key={`message-${messageKey}`} type={type}>
{messageChildren}
</MessageBox>
);
}
return messageElement;
}),
[defaultMessageType, messages],
);
useImperativeHandle(ref, () => ({ setMessage }), [setMessage]);
return <>{messageElements}</>;
},
);
MessageGroup.defaultProps = MESSAGE_GROUP_DEFAULT_PROPS;
MessageGroup.displayName = 'MessageGroup';
export type { MessageGroupForwardedRefContent };
export default MessageGroup;