A hybrid panel system for React & Backbone
This commit is contained in:
parent
624adca360
commit
ebeb6a7a6d
14 changed files with 474 additions and 157 deletions
|
@ -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;
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue