1import React from 'react'
2import * as Kb from '../common-adapters'
3import * as Styles from '../styles'
4import * as Types from '../constants/types/whats-new'
5import * as Tabs from '../constants/tabs'
6import {VersionProps} from './versions'
7
8type Props = {
9  onBack: () => void
10  onNavigate: (props: {
11    fromKey?: string
12    path: Array<{props?: {}; selected: string}>
13    replace?: boolean
14  }) => void
15  onNavigateExternal: (url: string) => void
16  onSwitchTab: (tab: Tabs.AppTab) => void
17  seenVersions: {[key: string]: boolean}
18  currentVersion: Types.CurrentVersion
19  lastVersion: Types.LastVersion
20  lastLastVersion: Types.LastLastVersion
21  noVersion: string
22  Current?: React.ComponentType<VersionProps>
23  Last?: React.ComponentType<VersionProps>
24  LastLast?: React.ComponentType<VersionProps>
25}
26
27// Need to switch the order of the scroll view on mobile and desktop so that contentBackground will fill the entire view
28const Wrapper = ({children}: {children: React.ReactNode}) => (
29  <Kb.Box2
30    direction="vertical"
31    alignItems="flex-start"
32    alignSelf="flex-start"
33    fullHeight={true}
34    style={!Styles.isMobile && styles.popupContainer}
35  >
36    <Kb.Box2
37      direction="vertical"
38      alignItems="flex-start"
39      alignSelf="flex-start"
40      fullHeight={true}
41      fullWidth={!Styles.isMobile}
42      style={styles.contentBackground}
43    >
44      {Styles.isMobile ? (
45        <Kb.ScrollView style={styles.scrollView}>
46          <Kb.Box2
47            direction="vertical"
48            alignItems="flex-start"
49            alignSelf="flex-start"
50            style={styles.scrollViewInner}
51          >
52            {children}
53          </Kb.Box2>
54        </Kb.ScrollView>
55      ) : (
56        <Kb.ScrollView style={styles.scrollView}>{children}</Kb.ScrollView>
57      )}
58    </Kb.Box2>
59  </Kb.Box2>
60)
61
62class WhatsNew extends React.PureComponent<Props> {
63  static navigationOptions = {}
64  componentWillUnmount() {
65    this.props.onBack()
66  }
67
68  render() {
69    const {
70      currentVersion,
71      lastVersion,
72      lastLastVersion,
73      noVersion,
74      Current,
75      Last,
76      LastLast,
77      seenVersions,
78      onNavigate,
79      onNavigateExternal,
80      onSwitchTab,
81    } = this.props
82    return (
83      <Wrapper>
84        {Current && (
85          <Current
86            seen={seenVersions[currentVersion]}
87            onNavigate={onNavigate}
88            onNavigateExternal={onNavigateExternal}
89            onSwitchTab={onSwitchTab}
90          />
91        )}
92        {lastVersion && lastVersion !== noVersion && Last && (
93          <Last
94            seen={seenVersions[lastVersion]}
95            onNavigate={onNavigate}
96            onNavigateExternal={onNavigateExternal}
97            onSwitchTab={onSwitchTab}
98          />
99        )}
100        {lastLastVersion && lastLastVersion !== noVersion && LastLast && (
101          <LastLast
102            seen={seenVersions[lastLastVersion]}
103            onNavigate={onNavigate}
104            onNavigateExternal={onNavigateExternal}
105            onSwitchTab={onSwitchTab}
106          />
107        )}
108      </Wrapper>
109    )
110  }
111}
112
113const modalWidth = 288
114const modalHeight = 500
115const styles = Styles.styleSheetCreate(() => ({
116  contentBackground: Styles.platformStyles({
117    common: {
118      backgroundColor: Styles.globalColors.blueGrey,
119      ...Styles.globalStyles.rounded,
120    },
121    isElectron: {
122      // Align menu edge with icon on desktop
123      marginRight: Styles.globalMargins.xtiny,
124    },
125  }),
126  popupContainer: Styles.platformStyles({
127    isElectron: {
128      height: modalHeight,
129      maxHeight: modalHeight,
130      maxWidth: modalWidth,
131      width: modalWidth,
132    },
133  }),
134  scrollView: Styles.platformStyles({
135    common: {
136      width: '100%',
137    },
138    isElectron: {
139      ...Styles.padding(Styles.globalMargins.tiny),
140    },
141  }),
142  scrollViewInner: Styles.platformStyles({
143    isMobile: {
144      marginBottom: Styles.globalMargins.small,
145      marginLeft: Styles.globalMargins.small,
146      marginRight: Styles.globalMargins.small,
147      marginTop: Styles.globalMargins.small,
148    },
149  }),
150  versionTitle: {
151    color: Styles.globalColors.black_50,
152    marginBottom: Styles.globalMargins.tiny,
153    marginTop: Styles.globalMargins.xsmall,
154  },
155}))
156
157export default WhatsNew
158