A hybrid panel system for React & Backbone

This commit is contained in:
Josh Perez 2022-12-14 13:41:04 -05:00 committed by GitHub
parent 624adca360
commit ebeb6a7a6d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 474 additions and 157 deletions

View file

@ -3,15 +3,19 @@
import React from 'react';
import { connect } from 'react-redux';
import { mapDispatchToProps } from '../actions';
import { ConversationView } from '../../components/conversation/ConversationView';
import type { StateType } from '../reducer';
import type { CompositionAreaPropsType } from './CompositionArea';
import { SmartCompositionArea } from './CompositionArea';
import type { OwnProps as ConversationHeaderPropsType } from './ConversationHeader';
import { SmartConversationHeader } from './ConversationHeader';
import type { StateType } from '../reducer';
import type { TimelinePropsType } from './Timeline';
import * as log from '../../logging/log';
import { ConversationView } from '../../components/conversation/ConversationView';
import { PanelType } from '../../types/Panels';
import { SmartChatColorPicker } from './ChatColorPicker';
import { SmartCompositionArea } from './CompositionArea';
import { SmartConversationHeader } from './ConversationHeader';
import { SmartTimeline } from './Timeline';
import { getTopPanelRenderableByReact } from '../selectors/conversations';
import { mapDispatchToProps } from '../actions';
export type PropsType = {
conversationId: string;
@ -31,7 +35,7 @@ export type PropsType = {
timelineProps: TimelinePropsType;
};
const mapStateToProps = (_state: StateType, props: PropsType) => {
const mapStateToProps = (state: StateType, props: PropsType) => {
const {
compositionAreaProps,
conversationHeaderProps,
@ -39,6 +43,8 @@ const mapStateToProps = (_state: StateType, props: PropsType) => {
timelineProps,
} = props;
const topPanel = getTopPanelRenderableByReact(state);
return {
conversationId,
renderCompositionArea: () => (
@ -48,6 +54,24 @@ const mapStateToProps = (_state: StateType, props: PropsType) => {
<SmartConversationHeader {...conversationHeaderProps} />
),
renderTimeline: () => <SmartTimeline {...timelineProps} />,
renderPanel: () => {
if (!topPanel) {
return;
}
if (topPanel.type === PanelType.ChatColorEditor) {
return (
<div className="panel">
<SmartChatColorPicker conversationId={conversationId} />
</div>
);
}
const unknownPanelType: never = topPanel.type;
log.warn(`renderPanel: Got unexpected panel type ${unknownPanelType}`);
return undefined;
},
};
};