From 81bb89da6c57f2dfc5fdeb5a8a8535cafcd41e3c Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Fri, 30 Oct 2020 13:15:58 -0300 Subject: [PATCH] [IMPROVEMENT] Support badge number on header buttons (#2566) * Beginning header buttons refactor * Add HeaderButtons * item with title * Refactor * Remove lib * Refactor * Update snapshot * Refactor * Update tests * Lint --- .../__snapshots__/Storyshots.test.js.snap | 3789 ++++++++++++++++- app/constants/colors.js | 1 + app/containers/Header/index.js | 3 +- app/containers/HeaderButton.js | 107 - app/containers/HeaderButton/Common.js | 84 + .../HeaderButton/HeaderButtonContainer.js | 36 + .../HeaderButton/HeaderButtonItem.js | 58 + .../HeaderButton/HeaderButtonItemBadge.js | 26 + app/containers/HeaderButton/index.js | 4 + app/ee/omnichannel/views/QueueListView.js | 4 +- app/presentation/RoomItem/RoomItem.js | 4 + app/presentation/RoomItem/index.js | 1 + app/presentation/UnreadBadge.js | 73 - .../UnreadBadge/getUnreadStyle.js | 23 + .../UnreadBadge/getUnreadStyle.test.js | 76 + app/presentation/UnreadBadge/index.js | 95 + app/views/AdminPanelView/index.js | 4 +- app/views/AttachmentView.js | 6 +- app/views/AuthenticationWebView.js | 4 +- app/views/CreateChannelView.js | 8 +- app/views/CreateDiscussionView/index.js | 10 +- app/views/DirectoryView/index.js | 4 +- app/views/E2EEnterYourPasswordView.js | 4 +- app/views/E2EHowItWorksView.js | 4 +- app/views/E2ESaveYourPasswordView.js | 4 +- app/views/LoginView.js | 4 +- app/views/ModalBlockView.js | 14 +- app/views/NewMessageView.js | 4 +- app/views/NewServerView/index.js | 4 +- app/views/ProfileView/index.js | 6 +- app/views/ReadReceiptView/index.js | 4 +- app/views/RegisterView.js | 4 +- app/views/RoomActionsView/index.js | 4 +- app/views/RoomInfoView/index.js | 11 +- app/views/RoomMembersView/index.js | 8 +- app/views/RoomView/Header/RightButtons.js | 20 +- app/views/RoomsListView/index.js | 31 +- app/views/SearchMessagesView/index.js | 4 +- app/views/SelectedUsersView.js | 8 +- app/views/SettingsView/index.js | 6 +- app/views/ShareListView/Header/Header.ios.js | 4 +- app/views/ShareListView/index.js | 16 +- app/views/ShareView/index.js | 14 +- app/views/StatusView.js | 10 +- app/views/ThreadMessagesView/index.js | 4 +- app/views/WithoutServersView.js | 4 +- package.json | 1 - ...eact-navigation-header-buttons+3.0.5.patch | 12 - storybook/stories/HeaderButtons.js | 162 + storybook/stories/RoomItem.js | 5 +- storybook/stories/UnreadBadge.js | 78 + storybook/stories/index.js | 2 + yarn.lock | 9 +- 53 files changed, 4553 insertions(+), 332 deletions(-) delete mode 100644 app/containers/HeaderButton.js create mode 100644 app/containers/HeaderButton/Common.js create mode 100644 app/containers/HeaderButton/HeaderButtonContainer.js create mode 100644 app/containers/HeaderButton/HeaderButtonItem.js create mode 100644 app/containers/HeaderButton/HeaderButtonItemBadge.js create mode 100644 app/containers/HeaderButton/index.js delete mode 100644 app/presentation/UnreadBadge.js create mode 100644 app/presentation/UnreadBadge/getUnreadStyle.js create mode 100644 app/presentation/UnreadBadge/getUnreadStyle.test.js create mode 100644 app/presentation/UnreadBadge/index.js delete mode 100644 patches/react-navigation-header-buttons+3.0.5.patch create mode 100644 storybook/stories/HeaderButtons.js create mode 100644 storybook/stories/UnreadBadge.js diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index d5231909a..46237d3a7 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -1038,6 +1038,2508 @@ exports[`Storyshots Avatar list Avatar 1`] = ` `; +exports[`Storyshots Header Buttons badge 1`] = ` + + + + + +  + + + + 1 + + + + + +  + + + + 1 + + + + + +  + + + + 1 + + + + + + + +`; + +exports[`Storyshots Header Buttons common 1`] = ` +Array [ + + + + + +  + + + + + + , + + + + + +  + + + + + + , + + + + + + Cancel + + + + + + , + + + + + + +  + + + + + , + + + + + + +  + + + + + , + + + + + + +  + + + + + , + + + + + + +  + + + + + , +] +`; + +exports[`Storyshots Header Buttons icons 1`] = ` +Array [ + + + + + +  + + + + + + + +  + + + + + , + + + + + +  + + + + +  + + + + + + + +  + + + + +  + + + + + , +] +`; + +exports[`Storyshots Header Buttons themes 1`] = ` +Array [ + + + + + +  + + + + + + + + Threads + + + + +  + + + + + , + + + + + +  + + + + + + + + Threads + + + + +  + + + + + , + + + + + +  + + + + + + + + Threads + + + + +  + + + + + , +] +`; + +exports[`Storyshots Header Buttons title 1`] = ` +Array [ + + + + + + threads + + + + + + + + threads + + + + + , + + + + + + threads + + + + + search + + + + + + + + threads + + + + + search + + + + + , +] +`; + exports[`Storyshots List header 1`] = ` `; + +exports[`Storyshots Unread Badge all 1`] = ` + + + + 9 + + + + + +99 + + + + + 9 + + + + + +999 + + + + + 9 + + + + + 9 + + + + + 9 + + + +`; + +exports[`Storyshots Unread Badge different mention types 1`] = ` + + + + 1 + + + + + 1 + + + + + 1 + + + + + 1 + + + + + 1 + + + + + 1 + + + + + 1 + + + +`; + +exports[`Storyshots Unread Badge normal 1`] = ` + + + + 9 + + + + + +999 + + + +`; + +exports[`Storyshots Unread Badge small 1`] = ` + + + + 9 + + + + + +99 + + + +`; + +exports[`Storyshots Unread Badge themes 1`] = ` +Array [ + + + + 1 + + + + + 1 + + + + + 1 + + + + + 1 + + + , + + + + 1 + + + + + 1 + + + + + 1 + + + + + 1 + + + , + + + + 1 + + + + + 1 + + + + + 1 + + + + + 1 + + + , +] +`; diff --git a/app/constants/colors.js b/app/constants/colors.js index a6b3314f8..0e6e78438 100644 --- a/app/constants/colors.js +++ b/app/constants/colors.js @@ -12,6 +12,7 @@ export const SWITCH_TRACK_COLOR = { const mentions = { unreadBackground: '#6C727A', + tunreadBackground: '#1d74f5', mentionMeColor: '#DB0C27', mentionMeBackground: '#F5455C', mentionGroupColor: '#E26D0E', diff --git a/app/containers/Header/index.js b/app/containers/Header/index.js index 2137a71ad..95ba8c7a2 100644 --- a/app/containers/Header/index.js +++ b/app/containers/Header/index.js @@ -5,6 +5,7 @@ import { View, StyleSheet } from 'react-native'; import { themes } from '../../constants/colors'; import { themedHeader } from '../../utils/navigation'; import { isIOS, isTablet } from '../../utils/deviceInfo'; +import { withTheme } from '../../theme'; // Get from https://github.com/react-navigation/react-navigation/blob/master/packages/stack/src/views/Header/HeaderSegment.tsx#L69 export const headerHeight = isIOS ? 44 : 56; @@ -53,4 +54,4 @@ Header.propTypes = { headerRight: PropTypes.element }; -export default Header; +export default withTheme(Header); diff --git a/app/containers/HeaderButton.js b/app/containers/HeaderButton.js deleted file mode 100644 index 4dc72f8cc..000000000 --- a/app/containers/HeaderButton.js +++ /dev/null @@ -1,107 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { HeaderButtons, HeaderButton, Item } from 'react-navigation-header-buttons'; - -import { CustomIcon } from '../lib/Icons'; -import { isIOS } from '../utils/deviceInfo'; -import { themes } from '../constants/colors'; -import I18n from '../i18n'; -import { withTheme } from '../theme'; - -export const headerIconSize = 23; - -const CustomHeaderButton = React.memo(withTheme(({ theme, ...props }) => ( - -))); - -export const CustomHeaderButtons = React.memo(props => ( - -)); - -export const DrawerButton = React.memo(({ navigation, testID, ...otherProps }) => ( - - - -)); - -export const CloseModalButton = React.memo(({ - navigation, testID, onPress = () => navigation.pop(), ...props -}) => ( - - - -)); - -export const CancelModalButton = React.memo(({ onPress, testID }) => ( - - {isIOS - ? - : - } - -)); - -export const MoreButton = React.memo(({ onPress, testID }) => ( - - - -)); - -export const SaveButton = React.memo(({ onPress, testID, ...props }) => ( - - - -)); - -export const PreferencesButton = React.memo(({ onPress, testID, ...props }) => ( - - - -)); - -export const LegalButton = React.memo(({ navigation, testID }) => ( - navigation.navigate('LegalView')} testID={testID} /> -)); - -CustomHeaderButton.propTypes = { - theme: PropTypes.string -}; -DrawerButton.propTypes = { - navigation: PropTypes.object.isRequired, - testID: PropTypes.string.isRequired -}; -CloseModalButton.propTypes = { - navigation: PropTypes.object.isRequired, - testID: PropTypes.string.isRequired, - onPress: PropTypes.func -}; -CancelModalButton.propTypes = { - onPress: PropTypes.func.isRequired, - testID: PropTypes.string.isRequired -}; -MoreButton.propTypes = { - onPress: PropTypes.func.isRequired, - testID: PropTypes.string.isRequired -}; -SaveButton.propTypes = { - onPress: PropTypes.func.isRequired, - testID: PropTypes.string.isRequired -}; -PreferencesButton.propTypes = { - onPress: PropTypes.func.isRequired, - testID: PropTypes.string.isRequired -}; -LegalButton.propTypes = { - navigation: PropTypes.object.isRequired, - testID: PropTypes.string.isRequired -}; - -export { Item }; diff --git a/app/containers/HeaderButton/Common.js b/app/containers/HeaderButton/Common.js new file mode 100644 index 000000000..a1d55bd4e --- /dev/null +++ b/app/containers/HeaderButton/Common.js @@ -0,0 +1,84 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { isIOS } from '../../utils/deviceInfo'; +import I18n from '../../i18n'; +import Container from './HeaderButtonContainer'; +import Item from './HeaderButtonItem'; + +// Left +export const Drawer = React.memo(({ navigation, testID, ...props }) => ( + + navigation.toggleDrawer()} testID={testID} {...props} /> + +)); + +export const CloseModal = React.memo(({ + navigation, testID, onPress = () => navigation.pop(), ...props +}) => ( + + + +)); + +export const CancelModal = React.memo(({ onPress, testID }) => ( + + {isIOS + ? + : + } + +)); + +// Right +export const More = React.memo(({ onPress, testID }) => ( + + + +)); + +export const Download = React.memo(({ onPress, testID, ...props }) => ( + + + +)); + +export const Preferences = React.memo(({ onPress, testID, ...props }) => ( + + + +)); + +export const Legal = React.memo(({ navigation, testID }) => ( + navigation.navigate('LegalView')} testID={testID} /> +)); + +Drawer.propTypes = { + navigation: PropTypes.object.isRequired, + testID: PropTypes.string.isRequired +}; +CloseModal.propTypes = { + navigation: PropTypes.object.isRequired, + testID: PropTypes.string.isRequired, + onPress: PropTypes.func +}; +CancelModal.propTypes = { + onPress: PropTypes.func.isRequired, + testID: PropTypes.string.isRequired +}; +More.propTypes = { + onPress: PropTypes.func.isRequired, + testID: PropTypes.string.isRequired +}; +Download.propTypes = { + onPress: PropTypes.func.isRequired, + testID: PropTypes.string.isRequired +}; +Preferences.propTypes = { + onPress: PropTypes.func.isRequired, + testID: PropTypes.string.isRequired +}; +Legal.propTypes = { + navigation: PropTypes.object.isRequired, + testID: PropTypes.string.isRequired +}; diff --git a/app/containers/HeaderButton/HeaderButtonContainer.js b/app/containers/HeaderButton/HeaderButtonContainer.js new file mode 100644 index 000000000..1521faa95 --- /dev/null +++ b/app/containers/HeaderButton/HeaderButtonContainer.js @@ -0,0 +1,36 @@ +import React from 'react'; +import { View, StyleSheet } from 'react-native'; +import PropTypes from 'prop-types'; + +const styles = StyleSheet.create({ + container: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center' + }, + left: { + marginLeft: 5 + }, + right: { + marginRight: 5 + } +}); + +const Container = ({ children, left }) => ( + + {children} + +); + +Container.propTypes = { + children: PropTypes.arrayOf(PropTypes.element), + left: PropTypes.bool +}; + +Container.defaultProps = { + left: false +}; + +Container.displayName = 'HeaderButton.Container'; + +export default Container; diff --git a/app/containers/HeaderButton/HeaderButtonItem.js b/app/containers/HeaderButton/HeaderButtonItem.js new file mode 100644 index 000000000..5e9bb8631 --- /dev/null +++ b/app/containers/HeaderButton/HeaderButtonItem.js @@ -0,0 +1,58 @@ +import React from 'react'; +import { Text, StyleSheet, Platform } from 'react-native'; +import PropTypes from 'prop-types'; +import Touchable from 'react-native-platform-touchable'; + +import { CustomIcon } from '../../lib/Icons'; +import { withTheme } from '../../theme'; +import { themes } from '../../constants/colors'; +import sharedStyles from '../../views/Styles'; + +export const BUTTON_HIT_SLOP = { + top: 5, right: 5, bottom: 5, left: 5 +}; + +const styles = StyleSheet.create({ + container: { + marginHorizontal: 6 + }, + title: { + ...Platform.select({ + android: { + fontSize: 14 + }, + default: { + fontSize: 17 + } + }), + ...sharedStyles.textRegular + } +}); + +const Item = ({ + title, iconName, onPress, testID, theme, badge +}) => ( + + <> + { + iconName + ? + : {title} + } + {badge ? badge() : null} + + +); + +Item.propTypes = { + onPress: PropTypes.func.isRequired, + title: PropTypes.string, + iconName: PropTypes.string, + testID: PropTypes.string, + theme: PropTypes.string, + badge: PropTypes.func +}; + +Item.displayName = 'HeaderButton.Item'; + +export default withTheme(Item); diff --git a/app/containers/HeaderButton/HeaderButtonItemBadge.js b/app/containers/HeaderButton/HeaderButtonItemBadge.js new file mode 100644 index 000000000..9a760b828 --- /dev/null +++ b/app/containers/HeaderButton/HeaderButtonItemBadge.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { StyleSheet } from 'react-native'; + +import UnreadBadge from '../../presentation/UnreadBadge'; + +const styles = StyleSheet.create({ + badgeContainer: { + padding: 2, + position: 'absolute', + right: -3, + top: -3, + borderRadius: 10, + alignItems: 'center', + justifyContent: 'center' + } +}); + +export const Badge = ({ ...props }) => ( + +); + +export default Badge; diff --git a/app/containers/HeaderButton/index.js b/app/containers/HeaderButton/index.js new file mode 100644 index 000000000..d1d66baaf --- /dev/null +++ b/app/containers/HeaderButton/index.js @@ -0,0 +1,4 @@ +export { default as Container } from './HeaderButtonContainer'; +export { default as Item } from './HeaderButtonItem'; +export { default as Badge } from './HeaderButtonItemBadge'; +export * from './Common'; diff --git a/app/ee/omnichannel/views/QueueListView.js b/app/ee/omnichannel/views/QueueListView.js index d365db6cb..34a307699 100644 --- a/app/ee/omnichannel/views/QueueListView.js +++ b/app/ee/omnichannel/views/QueueListView.js @@ -15,7 +15,7 @@ import SafeAreaView from '../../../containers/SafeAreaView'; import { themes } from '../../../constants/colors'; import StatusBar from '../../../containers/StatusBar'; import { goRoom } from '../../../utils/goRoom'; -import { CloseModalButton } from '../../../containers/HeaderButton'; +import * as HeaderButton from '../../../containers/HeaderButton'; import RocketChat from '../../../lib/rocketchat'; import { logEvent, events } from '../../../utils/log'; import { getInquiryQueueSelector } from '../selectors/inquiry'; @@ -34,7 +34,7 @@ class QueueListView extends React.Component { title: I18n.t('Queued_chats') }; if (isMasterDetail) { - options.headerLeft = () => ; + options.headerLeft = () => ; } return options; } diff --git a/app/presentation/RoomItem/RoomItem.js b/app/presentation/RoomItem/RoomItem.js index da595d883..a704e3f5b 100644 --- a/app/presentation/RoomItem/RoomItem.js +++ b/app/presentation/RoomItem/RoomItem.js @@ -37,6 +37,7 @@ const RoomItem = ({ alert, hideUnreadStatus, unread, + tunread, userMentions, groupMentions, roomUpdatedAt, @@ -112,6 +113,7 @@ const RoomItem = ({ /> { - if (!unread || unread <= 0) { - return; - } - if (unread >= 1000) { - unread = '999+'; - } - - let backgroundColor = themes[theme].unreadBackground; - const color = themes[theme].buttonText; - if (userMentions > 0) { - backgroundColor = themes[theme].mentionMeBackground; - } else if (groupMentions > 0) { - backgroundColor = themes[theme].mentionGroupBackground; - } - - return ( - - {unread} - - - ); -}); - -UnreadBadge.propTypes = { - theme: PropTypes.string, - unread: PropTypes.number, - userMentions: PropTypes.number, - groupMentions: PropTypes.number, - style: PropTypes.object -}; - -export default UnreadBadge; diff --git a/app/presentation/UnreadBadge/getUnreadStyle.js b/app/presentation/UnreadBadge/getUnreadStyle.js new file mode 100644 index 000000000..a8786fdcd --- /dev/null +++ b/app/presentation/UnreadBadge/getUnreadStyle.js @@ -0,0 +1,23 @@ +import { themes } from '../../constants/colors'; + +export const getUnreadStyle = ({ + unread, userMentions, groupMentions, theme, tunread, tunreadUser, tunreadGroup +}) => { + if ((!unread || unread <= 0) && (!tunread?.length)) { + return {}; + } + + let backgroundColor = themes[theme].unreadBackground; + const color = themes[theme].buttonText; + if (userMentions > 0 || tunreadUser?.length) { + backgroundColor = themes[theme].mentionMeColor; + } else if (groupMentions > 0 || tunreadGroup?.length) { + backgroundColor = themes[theme].mentionGroupColor; + } else if (tunread?.length > 0) { + backgroundColor = themes[theme].tunreadBackground; + } + + return { + backgroundColor, color + }; +}; diff --git a/app/presentation/UnreadBadge/getUnreadStyle.test.js b/app/presentation/UnreadBadge/getUnreadStyle.test.js new file mode 100644 index 000000000..b639fb6ac --- /dev/null +++ b/app/presentation/UnreadBadge/getUnreadStyle.test.js @@ -0,0 +1,76 @@ +/* eslint-disable no-undef */ +import { themes } from '../../constants/colors'; +import { getUnreadStyle } from './getUnreadStyle'; + +const testsForTheme = (theme) => { + const getUnreadStyleUtil = ({ ...props }) => getUnreadStyle({ theme, ...props }); + + test('render unread', () => { + expect(getUnreadStyleUtil({ + unread: 1 + })).toEqual({ + backgroundColor: themes[theme].unreadBackground, + color: themes[theme].buttonText + }); + }); + + test('render thread unread', () => { + expect(getUnreadStyleUtil({ + tunread: [1] + })).toEqual({ + backgroundColor: themes[theme].tunreadBackground, + color: themes[theme].buttonText + }); + }); + + test('render user mention', () => { + expect(getUnreadStyleUtil({ + unread: 1, + userMentions: 1 + })).toEqual({ + backgroundColor: themes[theme].mentionMeColor, + color: themes[theme].buttonText + }); + }); + + test('render group mention', () => { + expect(getUnreadStyleUtil({ + unread: 1, + groupMentions: 1 + })).toEqual({ + backgroundColor: themes[theme].mentionGroupColor, + color: themes[theme].buttonText + }); + }); + + test('mentions priority', () => { + expect(getUnreadStyleUtil({ + unread: 1, + userMentions: 1, + groupMentions: 1, + tunread: [1] + })).toEqual({ + backgroundColor: themes[theme].mentionMeColor, + color: themes[theme].buttonText + }); + expect(getUnreadStyleUtil({ + unread: 1, + groupMentions: 1, + tunread: [1] + })).toEqual({ + backgroundColor: themes[theme].mentionGroupColor, + color: themes[theme].buttonText + }); + expect(getUnreadStyleUtil({ + unread: 1, + tunread: [1] + })).toEqual({ + backgroundColor: themes[theme].tunreadBackground, + color: themes[theme].buttonText + }); + }); +}; + +describe('getUnreadStyle light theme', () => testsForTheme('light')); +describe('getUnreadStyle dark theme', () => testsForTheme('dark')); +describe('getUnreadStyle black theme', () => testsForTheme('black')); diff --git a/app/presentation/UnreadBadge/index.js b/app/presentation/UnreadBadge/index.js new file mode 100644 index 000000000..291fc45ff --- /dev/null +++ b/app/presentation/UnreadBadge/index.js @@ -0,0 +1,95 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { View, Text, StyleSheet } from 'react-native'; + +import sharedStyles from '../../views/Styles'; +import { getUnreadStyle } from './getUnreadStyle'; +import { withTheme } from '../../theme'; + +const styles = StyleSheet.create({ + unreadNumberContainerNormal: { + height: 21, + paddingVertical: 3, + paddingHorizontal: 5, + borderRadius: 10.5, + alignItems: 'center', + justifyContent: 'center', + marginLeft: 10 + }, + unreadNumberContainerSmall: { + borderRadius: 10.5, + alignItems: 'center', + justifyContent: 'center' + }, + unreadText: { + // overflow: 'hidden', + fontSize: 13, + ...sharedStyles.textSemibold, + fontWeight: '600' + }, + textSmall: { + fontSize: 10 + } +}); + +const UnreadBadge = React.memo(({ + theme, unread, userMentions, groupMentions, style, tunread, tunreadUser, tunreadGroup, small +}) => { + if ((!unread || unread <= 0) && (!tunread?.length)) { + return; + } + const { backgroundColor, color } = getUnreadStyle({ + theme, unread, userMentions, groupMentions, tunread, tunreadUser, tunreadGroup + }); + + if (!backgroundColor) { + return null; + } + let text = unread || tunread?.length; + if (small && text >= 100) { + text = '+99'; + } + if (!small && text >= 1000) { + text = '+999'; + } + text = text.toString(); + + let minWidth = 21; + if (small) { + minWidth = 11 + text.length * 5; + } + + return ( + + {text} + + + ); +}); + +UnreadBadge.propTypes = { + theme: PropTypes.string, + unread: PropTypes.number, + userMentions: PropTypes.number, + groupMentions: PropTypes.number, + style: PropTypes.object, + tunread: PropTypes.array, + tunreadUser: PropTypes.array, + tunreadGroup: PropTypes.array, + small: PropTypes.bool +}; + +export default withTheme(UnreadBadge); diff --git a/app/views/AdminPanelView/index.js b/app/views/AdminPanelView/index.js index 814c8c76e..bb790df43 100644 --- a/app/views/AdminPanelView/index.js +++ b/app/views/AdminPanelView/index.js @@ -5,14 +5,14 @@ import { connect } from 'react-redux'; import I18n from '../../i18n'; import StatusBar from '../../containers/StatusBar'; -import { DrawerButton } from '../../containers/HeaderButton'; +import * as HeaderButton from '../../containers/HeaderButton'; import { withTheme } from '../../theme'; import { getUserSelector } from '../../selectors/login'; import SafeAreaView from '../../containers/SafeAreaView'; class AdminPanelView extends React.Component { static navigationOptions = ({ navigation, isMasterDetail }) => ({ - headerLeft: isMasterDetail ? undefined : () => , + headerLeft: isMasterDetail ? undefined : () => , title: I18n.t('Admin_Panel') }) diff --git a/app/views/AttachmentView.js b/app/views/AttachmentView.js index 770c30c21..701e49ed7 100644 --- a/app/views/AttachmentView.js +++ b/app/views/AttachmentView.js @@ -17,7 +17,7 @@ import { ImageViewer } from '../presentation/ImageViewer'; import { themes } from '../constants/colors'; import { formatAttachmentUrl } from '../lib/utils'; import RCActivityIndicator from '../containers/ActivityIndicator'; -import { SaveButton, CloseModalButton } from '../containers/HeaderButton'; +import * as HeaderButton from '../containers/HeaderButton'; import { isAndroid } from '../utils/deviceInfo'; import { getUserSelector } from '../selectors/login'; import { withDimensions } from '../dimensions'; @@ -81,10 +81,10 @@ class AttachmentView extends React.Component { } const options = { title, - headerLeft: () => , + headerLeft: () => , headerRight: () => ( Allow_Save_Media_to_Gallery - ? + ? : null ), headerBackground: () => , diff --git a/app/views/AuthenticationWebView.js b/app/views/AuthenticationWebView.js index 1b51b64ba..e3f22ac75 100644 --- a/app/views/AuthenticationWebView.js +++ b/app/views/AuthenticationWebView.js @@ -10,7 +10,7 @@ import StatusBar from '../containers/StatusBar'; import ActivityIndicator from '../containers/ActivityIndicator'; import { withTheme } from '../theme'; import debounce from '../utils/debounce'; -import { CloseModalButton } from '../containers/HeaderButton'; +import * as HeaderButton from '../containers/HeaderButton'; const userAgent = isIOS ? 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1' @@ -185,7 +185,7 @@ const mapStateToProps = state => ({ AuthenticationWebView.navigationOptions = ({ route, navigation }) => { const { authType } = route.params; return { - headerLeft: () => , + headerLeft: () => , title: ['saml', 'cas', 'iframe'].includes(authType) ? 'SSO' : 'OAuth' }; }; diff --git a/app/views/CreateChannelView.js b/app/views/CreateChannelView.js index 8d03d21e5..9afbc4e59 100644 --- a/app/views/CreateChannelView.js +++ b/app/views/CreateChannelView.js @@ -15,7 +15,7 @@ import KeyboardView from '../presentation/KeyboardView'; import scrollPersistTaps from '../utils/scrollPersistTaps'; import I18n from '../i18n'; import UserItem from '../presentation/UserItem'; -import { CustomHeaderButtons, Item } from '../containers/HeaderButton'; +import * as HeaderButton from '../containers/HeaderButton'; import StatusBar from '../containers/StatusBar'; import { SWITCH_TRACK_COLOR, themes } from '../constants/colors'; import { withTheme } from '../theme'; @@ -143,9 +143,9 @@ class CreateChannelView extends React.Component { const { navigation } = this.props; navigation.setOptions({ headerRight: () => channelName.trim().length > 0 && ( - - - + + + ) }); } diff --git a/app/views/CreateDiscussionView/index.js b/app/views/CreateDiscussionView/index.js index c489b7481..ebad1fa67 100644 --- a/app/views/CreateDiscussionView/index.js +++ b/app/views/CreateDiscussionView/index.js @@ -8,7 +8,7 @@ import Loading from '../../containers/Loading'; import KeyboardView from '../../presentation/KeyboardView'; import scrollPersistTaps from '../../utils/scrollPersistTaps'; import I18n from '../../i18n'; -import { CustomHeaderButtons, Item, CloseModalButton } from '../../containers/HeaderButton'; +import * as HeaderButton from '../../containers/HeaderButton'; import StatusBar from '../../containers/StatusBar'; import { themes } from '../../constants/colors'; import { withTheme } from '../../theme'; @@ -96,13 +96,13 @@ class CreateChannelView extends React.Component { headerRight: ( this.valid() ? () => ( - - - + + + ) : null ), - headerLeft: showCloseModal ? () => : undefined + headerLeft: showCloseModal ? () => : undefined }); } diff --git a/app/views/DirectoryView/index.js b/app/views/DirectoryView/index.js index 9b89c8225..18d9c6cd9 100644 --- a/app/views/DirectoryView/index.js +++ b/app/views/DirectoryView/index.js @@ -14,7 +14,7 @@ import SearchBox from '../../containers/SearchBox'; import { CustomIcon } from '../../lib/Icons'; import StatusBar from '../../containers/StatusBar'; import ActivityIndicator from '../../containers/ActivityIndicator'; -import { CloseModalButton } from '../../containers/HeaderButton'; +import * as HeaderButton from '../../containers/HeaderButton'; import debounce from '../../utils/debounce'; import log, { logEvent, events } from '../../utils/log'; import Options from './Options'; @@ -31,7 +31,7 @@ class DirectoryView extends React.Component { title: I18n.t('Directory') }; if (isMasterDetail) { - options.headerLeft = () => ; + options.headerLeft = () => ; } return options; } diff --git a/app/views/E2EEnterYourPasswordView.js b/app/views/E2EEnterYourPasswordView.js index 538289ba1..c753a6208 100644 --- a/app/views/E2EEnterYourPasswordView.js +++ b/app/views/E2EEnterYourPasswordView.js @@ -10,7 +10,7 @@ import Button from '../containers/Button'; import { themes } from '../constants/colors'; import TextInput from '../containers/TextInput'; import SafeAreaView from '../containers/SafeAreaView'; -import { CloseModalButton } from '../containers/HeaderButton'; +import * as HeaderButton from '../containers/HeaderButton'; import { encryptionDecodeKey as encryptionDecodeKeyAction } from '../actions/encryption'; import scrollPersistTaps from '../utils/scrollPersistTaps'; import KeyboardView from '../presentation/KeyboardView'; @@ -29,7 +29,7 @@ const styles = StyleSheet.create({ }); class E2EEnterYourPasswordView extends React.Component { static navigationOptions = ({ navigation }) => ({ - headerLeft: () => , + headerLeft: () => , title: I18n.t('Enter_Your_E2E_Password') }) diff --git a/app/views/E2EHowItWorksView.js b/app/views/E2EHowItWorksView.js index dcaf5f736..f72b9c6dd 100644 --- a/app/views/E2EHowItWorksView.js +++ b/app/views/E2EHowItWorksView.js @@ -4,7 +4,7 @@ import { StyleSheet } from 'react-native'; import SafeAreaView from '../containers/SafeAreaView'; import { themes } from '../constants/colors'; -import { CloseModalButton } from '../containers/HeaderButton'; +import * as HeaderButton from '../containers/HeaderButton'; import Markdown from '../containers/markdown'; import { withTheme } from '../theme'; import I18n from '../i18n'; @@ -26,7 +26,7 @@ class E2EHowItWorksView extends React.Component { const showCloseModal = route.params?.showCloseModal; return { title: I18n.t('How_It_Works'), - headerLeft: showCloseModal ? () => : undefined + headerLeft: showCloseModal ? () => : undefined }; } diff --git a/app/views/E2ESaveYourPasswordView.js b/app/views/E2ESaveYourPasswordView.js index 9c6b2dca3..5a645baa3 100644 --- a/app/views/E2ESaveYourPasswordView.js +++ b/app/views/E2ESaveYourPasswordView.js @@ -11,7 +11,7 @@ import { import { encryptionSetBanner as encryptionSetBannerAction } from '../actions/encryption'; import { E2E_RANDOM_PASSWORD_KEY } from '../lib/encryption/constants'; -import { CloseModalButton } from '../containers/HeaderButton'; +import * as HeaderButton from '../containers/HeaderButton'; import scrollPersistTaps from '../utils/scrollPersistTaps'; import SafeAreaView from '../containers/SafeAreaView'; import UserPreferences from '../lib/userPreferences'; @@ -61,7 +61,7 @@ const styles = StyleSheet.create({ class E2ESaveYourPasswordView extends React.Component { static navigationOptions = ({ navigation }) => ({ - headerLeft: () => , + headerLeft: () => , title: I18n.t('Save_Your_E2E_Password') }) diff --git a/app/views/LoginView.js b/app/views/LoginView.js index f96adbeef..bdffd103b 100644 --- a/app/views/LoginView.js +++ b/app/views/LoginView.js @@ -9,7 +9,7 @@ import equal from 'deep-equal'; import sharedStyles from './Styles'; import Button from '../containers/Button'; import I18n from '../i18n'; -import { LegalButton } from '../containers/HeaderButton'; +import * as HeaderButton from '../containers/HeaderButton'; import { themes } from '../constants/colors'; import { withTheme } from '../theme'; import FormContainer, { FormContainerInner } from '../containers/FormContainer'; @@ -51,7 +51,7 @@ const styles = StyleSheet.create({ class LoginView extends React.Component { static navigationOptions = ({ route, navigation }) => ({ title: route.params?.title ?? 'Rocket.Chat', - headerRight: () => + headerRight: () => }) static propTypes = { diff --git a/app/views/ModalBlockView.js b/app/views/ModalBlockView.js index e88d30885..2d72fa339 100644 --- a/app/views/ModalBlockView.js +++ b/app/views/ModalBlockView.js @@ -8,7 +8,7 @@ import { KeyboardAwareScrollView } from '@codler/react-native-keyboard-aware-scr import { withTheme } from '../theme'; import EventEmitter from '../utils/events'; import { themes } from '../constants/colors'; -import { CustomHeaderButtons, Item } from '../containers/HeaderButton'; +import * as HeaderButton from '../containers/HeaderButton'; import { modalBlockWithContext } from '../containers/UIKit/MessageBlock'; import RocketChat from '../lib/rocketchat'; import ActivityIndicator from '../containers/ActivityIndicator'; @@ -128,24 +128,24 @@ class ModalBlockView extends React.Component { navigation.setOptions({ title: textParser([title]), headerLeft: close ? () => ( - - + - + ) : null, headerRight: submit ? () => ( - - + - + ) : null }); } diff --git a/app/views/NewMessageView.js b/app/views/NewMessageView.js index c012cd406..a47150069 100644 --- a/app/views/NewMessageView.js +++ b/app/views/NewMessageView.js @@ -17,7 +17,7 @@ import I18n from '../i18n'; import log, { logEvent, events } from '../utils/log'; import SearchBox from '../containers/SearchBox'; import { CustomIcon } from '../lib/Icons'; -import { CloseModalButton } from '../containers/HeaderButton'; +import * as HeaderButton from '../containers/HeaderButton'; import StatusBar from '../containers/StatusBar'; import { themes } from '../constants/colors'; import { withTheme } from '../theme'; @@ -51,7 +51,7 @@ const styles = StyleSheet.create({ class NewMessageView extends React.Component { static navigationOptions = ({ navigation }) => ({ - headerLeft: () => , + headerLeft: () => , title: I18n.t('New_Message') }) diff --git a/app/views/NewServerView/index.js b/app/views/NewServerView/index.js index 5d5e47044..9548e0082 100644 --- a/app/views/NewServerView/index.js +++ b/app/views/NewServerView/index.js @@ -26,7 +26,7 @@ import log, { logEvent, events } from '../../utils/log'; import { animateNextTransition } from '../../utils/layoutAnimation'; import { withTheme } from '../../theme'; import { setBasicAuth, BASIC_AUTH_KEY } from '../../utils/fetch'; -import { CloseModalButton } from '../../containers/HeaderButton'; +import * as HeaderButton from '../../containers/HeaderButton'; import { showConfirmationAlert } from '../../utils/info'; import database from '../../lib/database'; import ServerInput from './ServerInput'; @@ -111,7 +111,7 @@ class NewServerView extends React.Component { const { adding, navigation } = this.props; if (adding) { navigation.setOptions({ - headerLeft: () => + headerLeft: () => }); } } diff --git a/app/views/ProfileView/index.js b/app/views/ProfileView/index.js index 95555c4ee..62280bb12 100644 --- a/app/views/ProfileView/index.js +++ b/app/views/ProfileView/index.js @@ -24,7 +24,7 @@ import Button from '../../containers/Button'; import Avatar from '../../containers/Avatar'; import { setUser as setUserAction } from '../../actions/login'; import { CustomIcon } from '../../lib/Icons'; -import { DrawerButton, PreferencesButton } from '../../containers/HeaderButton'; +import * as HeaderButton from '../../containers/HeaderButton'; import StatusBar from '../../containers/StatusBar'; import { themes } from '../../constants/colors'; import { withTheme } from '../../theme'; @@ -37,10 +37,10 @@ class ProfileView extends React.Component { title: I18n.t('Profile') }; if (!isMasterDetail) { - options.headerLeft = () => ; + options.headerLeft = () => ; } options.headerRight = () => ( - navigation.navigate('UserPreferencesView')} testID='preferences-view-open' /> + navigation.navigate('UserPreferencesView')} testID='preferences-view-open' /> ); return options; } diff --git a/app/views/ReadReceiptView/index.js b/app/views/ReadReceiptView/index.js index ba704dea3..b7456c77a 100644 --- a/app/views/ReadReceiptView/index.js +++ b/app/views/ReadReceiptView/index.js @@ -8,7 +8,7 @@ import { connect } from 'react-redux'; import Avatar from '../../containers/Avatar'; import styles from './styles'; import ActivityIndicator from '../../containers/ActivityIndicator'; -import { CloseModalButton } from '../../containers/HeaderButton'; +import * as HeaderButton from '../../containers/HeaderButton'; import I18n from '../../i18n'; import RocketChat from '../../lib/rocketchat'; import StatusBar from '../../containers/StatusBar'; @@ -22,7 +22,7 @@ class ReadReceiptView extends React.Component { title: I18n.t('Read_Receipt') }; if (isMasterDetail) { - options.headerLeft = () => ; + options.headerLeft = () => ; } return options; } diff --git a/app/views/RegisterView.js b/app/views/RegisterView.js index 23711a7cd..750944fed 100644 --- a/app/views/RegisterView.js +++ b/app/views/RegisterView.js @@ -10,7 +10,7 @@ import log, { logEvent, events } from '../utils/log'; import sharedStyles from './Styles'; import Button from '../containers/Button'; import I18n from '../i18n'; -import { LegalButton } from '../containers/HeaderButton'; +import * as HeaderButton from '../containers/HeaderButton'; import { themes } from '../constants/colors'; import { withTheme } from '../theme'; import FormContainer, { FormContainerInner } from '../containers/FormContainer'; @@ -54,7 +54,7 @@ const styles = StyleSheet.create({ class RegisterView extends React.Component { static navigationOptions = ({ route, navigation }) => ({ title: route.params?.title ?? 'Rocket.Chat', - headerRight: () => + headerRight: () => }); static propTypes = { diff --git a/app/views/RoomActionsView/index.js b/app/views/RoomActionsView/index.js index ba007818d..ec23485dc 100644 --- a/app/views/RoomActionsView/index.js +++ b/app/views/RoomActionsView/index.js @@ -21,7 +21,7 @@ import I18n from '../../i18n'; import StatusBar from '../../containers/StatusBar'; import { themes, SWITCH_TRACK_COLOR } from '../../constants/colors'; import { withTheme } from '../../theme'; -import { CloseModalButton } from '../../containers/HeaderButton'; +import * as HeaderButton from '../../containers/HeaderButton'; import Markdown from '../../containers/markdown'; import { showConfirmationAlert, showErrorAlert } from '../../utils/info'; import SafeAreaView from '../../containers/SafeAreaView'; @@ -36,7 +36,7 @@ class RoomActionsView extends React.Component { title: I18n.t('Actions') }; if (isMasterDetail) { - options.headerLeft = () => ; + options.headerLeft = () => ; } return options; } diff --git a/app/views/RoomInfoView/index.js b/app/views/RoomInfoView/index.js index 8b257ce7b..35e5be5e5 100644 --- a/app/views/RoomInfoView/index.js +++ b/app/views/RoomInfoView/index.js @@ -15,7 +15,7 @@ import sharedStyles from '../Styles'; import RocketChat from '../../lib/rocketchat'; import RoomTypeIcon from '../../containers/RoomTypeIcon'; import I18n from '../../i18n'; -import { CustomHeaderButtons, CloseModalButton } from '../../containers/HeaderButton'; +import * as HeaderButton from '../../containers/HeaderButton'; import StatusBar from '../../containers/StatusBar'; import log, { logEvent, events } from '../../utils/log'; import { themes } from '../../constants/colors'; @@ -26,7 +26,6 @@ import EventEmitter from '../../utils/events'; import Livechat from './Livechat'; import Channel from './Channel'; -import Item from './Item'; import Direct from './Direct'; import SafeAreaView from '../../containers/SafeAreaView'; import { goRoom } from '../../utils/goRoom'; @@ -104,12 +103,12 @@ class RoomInfoView extends React.Component { const rid = route.params?.rid; const showCloseModal = route.params?.showCloseModal; navigation.setOptions({ - headerLeft: showCloseModal ? () => : undefined, + headerLeft: showCloseModal ? () => : undefined, title: t === 'd' ? I18n.t('User_Info') : I18n.t('Room_Info'), headerRight: showEdit ? () => ( - - + { const isLivechat = t === 'l'; @@ -118,7 +117,7 @@ class RoomInfoView extends React.Component { }} testID='room-info-view-edit-button' /> - + ) : null }); diff --git a/app/views/RoomMembersView/index.js b/app/views/RoomMembersView/index.js index 340a4e795..a4110a945 100644 --- a/app/views/RoomMembersView/index.js +++ b/app/views/RoomMembersView/index.js @@ -15,7 +15,7 @@ import log from '../../utils/log'; import I18n from '../../i18n'; import SearchBox from '../../containers/SearchBox'; import protectedFunction from '../../lib/methods/helpers/protectedFunction'; -import { CustomHeaderButtons, Item } from '../../containers/HeaderButton'; +import * as HeaderButton from '../../containers/HeaderButton'; import StatusBar from '../../containers/StatusBar'; import ActivityIndicator from '../../containers/ActivityIndicator'; import { withTheme } from '../../theme'; @@ -97,9 +97,9 @@ class RoomMembersView extends React.Component { navigation.setOptions({ title: I18n.t('Members'), headerRight: () => ( - - - + + + ) }); } diff --git a/app/views/RoomView/Header/RightButtons.js b/app/views/RoomView/Header/RightButtons.js index b554b41cc..ba28a5729 100644 --- a/app/views/RoomView/Header/RightButtons.js +++ b/app/views/RoomView/Header/RightButtons.js @@ -2,11 +2,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; -import { CustomHeaderButtons, Item } from '../../../containers/HeaderButton'; +import * as HeaderButton from '../../../containers/HeaderButton'; import database from '../../../lib/database'; import { getUserSelector } from '../../../selectors/login'; import { logEvent, events } from '../../../utils/log'; + class RightButtonsContainer extends React.PureComponent { static propTypes = { userId: PropTypes.string, @@ -99,33 +100,30 @@ class RightButtonsContainer extends React.PureComponent { } if (tmid) { return ( - - + - + ); } return ( - + {threadsEnabled ? ( - ) : null} - - + ); } } diff --git a/app/views/RoomsListView/index.js b/app/views/RoomsListView/index.js index 6a1e5b07f..8404ce67d 100644 --- a/app/views/RoomsListView/index.js +++ b/app/views/RoomsListView/index.js @@ -33,11 +33,7 @@ import { appStart as appStartAction, ROOT_BACKGROUND } from '../../actions/app'; import debounce from '../../utils/debounce'; import { isIOS, isTablet } from '../../utils/deviceInfo'; import RoomsListHeaderView from './Header'; -import { - DrawerButton, - CustomHeaderButtons, - Item -} from '../../containers/HeaderButton'; +import * as HeaderButton from '../../containers/HeaderButton'; import StatusBar from '../../containers/StatusBar'; import ActivityIndicator from '../../containers/ActivityIndicator'; import ListHeader from './ListHeader'; @@ -346,15 +342,14 @@ class RoomsListView extends React.Component { return { headerTitleAlign: 'left', headerLeft: () => (searching ? ( - - + - + ) : ( - (searching ? null : ( - - + - - - + )) }; } @@ -883,7 +875,7 @@ class RoomsListView extends React.Component { }; renderHeader = () => { - const { isMasterDetail, theme } = this.props; + const { isMasterDetail } = this.props; if (!isMasterDetail) { return null; @@ -892,7 +884,6 @@ class RoomsListView extends React.Component { const options = this.getHeader(); return (
); diff --git a/app/views/SearchMessagesView/index.js b/app/views/SearchMessagesView/index.js index 37dfc8b11..4f6d896e0 100644 --- a/app/views/SearchMessagesView/index.js +++ b/app/views/SearchMessagesView/index.js @@ -20,7 +20,7 @@ import { themes } from '../../constants/colors'; import { withTheme } from '../../theme'; import { getUserSelector } from '../../selectors/login'; import SafeAreaView from '../../containers/SafeAreaView'; -import { CloseModalButton } from '../../containers/HeaderButton'; +import * as HeaderButton from '../../containers/HeaderButton'; import database from '../../lib/database'; import { sanitizeLikeString } from '../../lib/database/utils'; @@ -31,7 +31,7 @@ class SearchMessagesView extends React.Component { }; const showCloseModal = route.params?.showCloseModal; if (showCloseModal) { - options.headerLeft = () => ; + options.headerLeft = () => ; } return options; } diff --git a/app/views/SelectedUsersView.js b/app/views/SelectedUsersView.js index a6624f268..d9c84c18c 100644 --- a/app/views/SelectedUsersView.js +++ b/app/views/SelectedUsersView.js @@ -14,7 +14,7 @@ import I18n from '../i18n'; import log, { logEvent, events } from '../utils/log'; import SearchBox from '../containers/SearchBox'; import sharedStyles from './Styles'; -import { Item, CustomHeaderButtons } from '../containers/HeaderButton'; +import * as HeaderButton from '../containers/HeaderButton'; import StatusBar from '../containers/StatusBar'; import { themes } from '../constants/colors'; import { animateNextTransition } from '../utils/layoutAnimation'; @@ -119,9 +119,9 @@ class SelectedUsersView extends React.Component { title, headerRight: () => ( (!maxUsers || showButton) && ( - - - + + + ) ) }; diff --git a/app/views/SettingsView/index.js b/app/views/SettingsView/index.js index c8adee4e5..32b11c485 100644 --- a/app/views/SettingsView/index.js +++ b/app/views/SettingsView/index.js @@ -12,7 +12,7 @@ import { logout as logoutAction } from '../../actions/login'; import { selectServerRequest as selectServerRequestAction } from '../../actions/server'; import { toggleCrashReport as toggleCrashReportAction, toggleAnalyticsEvents as toggleAnalyticsEventsAction } from '../../actions/crashReport'; import { SWITCH_TRACK_COLOR, themes } from '../../constants/colors'; -import { DrawerButton, CloseModalButton } from '../../containers/HeaderButton'; +import * as HeaderButton from '../../containers/HeaderButton'; import StatusBar from '../../containers/StatusBar'; import * as List from '../../containers/List'; import I18n from '../../i18n'; @@ -42,9 +42,9 @@ import { getUserSelector } from '../../selectors/login'; class SettingsView extends React.Component { static navigationOptions = ({ navigation, isMasterDetail }) => ({ headerLeft: () => (isMasterDetail ? ( - + ) : ( - + )), title: I18n.t('Settings') }); diff --git a/app/views/ShareListView/Header/Header.ios.js b/app/views/ShareListView/Header/Header.ios.js index e32617a10..afbe15663 100644 --- a/app/views/ShareListView/Header/Header.ios.js +++ b/app/views/ShareListView/Header/Header.ios.js @@ -4,7 +4,7 @@ import { Keyboard, View, StyleSheet } from 'react-native'; import ShareExtension from 'rn-extensions-share'; import SearchBox from '../../../containers/SearchBox'; -import { CancelModalButton } from '../../../containers/HeaderButton'; +import * as HeaderButton from '../../../containers/HeaderButton'; import { themes } from '../../../constants/colors'; import sharedStyles from '../../Styles'; @@ -52,7 +52,7 @@ const Header = React.memo(({ { !searching ? ( - diff --git a/app/views/ShareListView/index.js b/app/views/ShareListView/index.js index 0e43042f8..2544d43b8 100644 --- a/app/views/ShareListView/index.js +++ b/app/views/ShareListView/index.js @@ -15,7 +15,7 @@ import { isIOS, isAndroid } from '../../utils/deviceInfo'; import I18n from '../../i18n'; import DirectoryItem, { ROW_HEIGHT } from '../../presentation/DirectoryItem'; import ServerItem from '../../presentation/ServerItem'; -import { CancelModalButton, CustomHeaderButtons, Item } from '../../containers/HeaderButton'; +import * as HeaderButton from '../../containers/HeaderButton'; import ShareListHeader from './Header'; import ActivityIndicator from '../../containers/ActivityIndicator'; @@ -157,12 +157,12 @@ class ShareListView extends React.Component { navigation.setOptions({ headerLeft: () => (searching ? ( - - - + + + ) : ( - @@ -172,9 +172,9 @@ class ShareListView extends React.Component { searching ? null : ( - - - + + + ) ) }); diff --git a/app/views/ShareView/index.js b/app/views/ShareView/index.js index 6b41ef24f..9e8c710eb 100644 --- a/app/views/ShareView/index.js +++ b/app/views/ShareView/index.js @@ -9,11 +9,7 @@ import { themes } from '../../constants/colors'; import I18n from '../../i18n'; import styles from './styles'; import Loading from '../../containers/Loading'; -import { - Item, - CloseModalButton, - CustomHeaderButtons -} from '../../containers/HeaderButton'; +import * as HeaderButton from '../../containers/HeaderButton'; import { isBlocked } from '../../utils/room'; import { isReadOnly } from '../../utils/isReadOnly'; import { withTheme } from '../../theme'; @@ -75,18 +71,18 @@ class ShareView extends Component { // if is share extension show default back button if (!this.isShareExtension) { - options.headerLeft = () => ; + options.headerLeft = () => ; } if (!attachments.length && !readOnly) { options.headerRight = () => ( - - + - + ); } diff --git a/app/views/StatusView.js b/app/views/StatusView.js index e5191df0f..8783da13e 100644 --- a/app/views/StatusView.js +++ b/app/views/StatusView.js @@ -15,7 +15,7 @@ import log, { logEvent, events } from '../utils/log'; import { LISTENER } from '../containers/Toast'; import { withTheme } from '../theme'; import { getUserSelector } from '../selectors/login'; -import { CustomHeaderButtons, Item, CancelModalButton } from '../containers/HeaderButton'; +import * as HeaderButton from '../containers/HeaderButton'; import store from '../lib/createStore'; import { setUser } from '../actions/login'; import SafeAreaView from '../containers/SafeAreaView'; @@ -73,15 +73,15 @@ class StatusView extends React.Component { const { navigation, isMasterDetail } = this.props; navigation.setOptions({ title: I18n.t('Edit_Status'), - headerLeft: isMasterDetail ? undefined : () => , + headerLeft: isMasterDetail ? undefined : () => , headerRight: () => ( - - + - + ) }); } diff --git a/app/views/ThreadMessagesView/index.js b/app/views/ThreadMessagesView/index.js index 112461586..71c2aeee3 100644 --- a/app/views/ThreadMessagesView/index.js +++ b/app/views/ThreadMessagesView/index.js @@ -24,7 +24,7 @@ import { themes } from '../../constants/colors'; import { withTheme } from '../../theme'; import { getUserSelector } from '../../selectors/login'; import SafeAreaView from '../../containers/SafeAreaView'; -import { CloseModalButton } from '../../containers/HeaderButton'; +import * as HeaderButton from '../../containers/HeaderButton'; const Separator = React.memo(({ theme }) => ); Separator.propTypes = { @@ -39,7 +39,7 @@ class ThreadMessagesView extends React.Component { title: I18n.t('Threads') }; if (isMasterDetail) { - options.headerLeft = () => ; + options.headerLeft = () => ; } return options; } diff --git a/app/views/WithoutServersView.js b/app/views/WithoutServersView.js index 136359df1..7cda42602 100644 --- a/app/views/WithoutServersView.js +++ b/app/views/WithoutServersView.js @@ -5,7 +5,7 @@ import { import PropTypes from 'prop-types'; import ShareExtension from 'rn-extensions-share'; -import { CancelModalButton } from '../containers/HeaderButton'; +import * as HeaderButton from '../containers/HeaderButton'; import sharedStyles from './Styles'; import I18n from '../i18n'; import { themes } from '../constants/colors'; @@ -33,7 +33,7 @@ class WithoutServerView extends React.Component { static navigationOptions = () => ({ title: 'Rocket.Chat', headerLeft: () => ( - diff --git a/package.json b/package.json index fc6425918..179259e8f 100644 --- a/package.json +++ b/package.json @@ -109,7 +109,6 @@ "react-native-unimodules": "0.10.1", "react-native-vector-icons": "7.0.0", "react-native-webview": "10.3.2", - "react-navigation-header-buttons": "3.0.5", "react-redux": "7.2.0", "reactotron-react-native": "5.0.0", "redux": "4.0.5", diff --git a/patches/react-navigation-header-buttons+3.0.5.patch b/patches/react-navigation-header-buttons+3.0.5.patch deleted file mode 100644 index 3b47953e8..000000000 --- a/patches/react-navigation-header-buttons+3.0.5.patch +++ /dev/null @@ -1,12 +0,0 @@ -diff --git a/node_modules/react-navigation-header-buttons/src/HeaderButtons.js b/node_modules/react-navigation-header-buttons/src/HeaderButtons.js -index 70ff376..01fba5e 100644 ---- a/node_modules/react-navigation-header-buttons/src/HeaderButtons.js -+++ b/node_modules/react-navigation-header-buttons/src/HeaderButtons.js -@@ -144,6 +144,6 @@ const styles = StyleSheet.create({ - }), - }, - button: { -- marginHorizontal: 11, -+ marginHorizontal: 6 - }, - }); diff --git a/storybook/stories/HeaderButtons.js b/storybook/stories/HeaderButtons.js new file mode 100644 index 000000000..0d2243c78 --- /dev/null +++ b/storybook/stories/HeaderButtons.js @@ -0,0 +1,162 @@ +/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions, react/prop-types */ +import React from 'react'; +import { storiesOf } from '@storybook/react-native'; +import { View } from 'react-native'; + +import * as HeaderButton from '../../app/containers/HeaderButton'; +import Header from '../../app/containers/Header'; +import { ThemeContext } from '../../app/theme'; + +const stories = storiesOf('Header Buttons', module); + +const HeaderExample = ({ left, right }) => ( +
} + headerRight={right} + /> +); + +stories.add('title', () => ( + <> + ( + + + + )} + right={() => ( + + + + )} + /> + ( + + + + + )} + right={() => ( + + + + + )} + /> + +)); + +stories.add('icons', () => ( + <> + ( + + + + )} + right={() => ( + + + + )} + /> + ( + + + + + )} + right={() => ( + + + + + )} + /> + +)); + +stories.add('badge', () => ( + <> + ( + + } /> + } /> + } /> + + )} + /> + +)); + +const ThemeStory = ({ theme }) => ( + + ( + + + + )} + right={() => ( + + + } /> + + )} + /> + +); + +stories.add('themes', () => ( + <> + + + + +)); + +stories.add('common', () => ( + <> + ( + + )} + /> + ( + + )} + /> + ( + + )} + /> + ( + + )} + /> + ( + + )} + /> + ( + + )} + /> + ( + + )} + /> + +)); diff --git a/storybook/stories/RoomItem.js b/storybook/stories/RoomItem.js index a4d221526..a4cf156ec 100644 --- a/storybook/stories/RoomItem.js +++ b/storybook/stories/RoomItem.js @@ -73,10 +73,9 @@ export default ({ theme }) => { - - - + + ( + + {children} + +); + +stories.add('all', () => ( + + + + + + + + + +)); + +stories.add('small', () => ( + + + + +)); + +stories.add('normal', () => ( + + + + +)); + +stories.add('different mention types', () => ( + + + + + + + + + +)); + +const ThemeStory = ({ theme }) => ( + + + + + + + + +); + +stories.add('themes', () => ( + <> + + + + +)); diff --git a/storybook/stories/index.js b/storybook/stories/index.js index 915944f88..d9de68803 100644 --- a/storybook/stories/index.js +++ b/storybook/stories/index.js @@ -10,6 +10,8 @@ import Message from './Message'; import UiKitMessage from './UiKitMessage'; import UiKitModal from './UiKitModal'; import Markdown from './Markdown'; +import './HeaderButtons'; +import './UnreadBadge'; import Avatar from './Avatar'; // import RoomViewHeader from './RoomViewHeader'; diff --git a/yarn.lock b/yarn.lock index 199afe57f..e2b1a4886 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12891,7 +12891,7 @@ react-native-picker-select@7.0.0: dependencies: lodash.isequal "^4.5.0" -react-native-platform-touchable@1.1.1, react-native-platform-touchable@^1.1.1: +react-native-platform-touchable@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/react-native-platform-touchable/-/react-native-platform-touchable-1.1.1.tgz#fde4acc65eea585d28b164d0c3716a42129a68e4" integrity sha1-/eSsxl7qWF0osWTQw3FqQhKaaOQ= @@ -13068,13 +13068,6 @@ react-native@^0.63.1: use-subscription "^1.0.0" whatwg-fetch "^3.0.0" -react-navigation-header-buttons@3.0.5: - version "3.0.5" - resolved "https://registry.yarnpkg.com/react-navigation-header-buttons/-/react-navigation-header-buttons-3.0.5.tgz#5b8c0fc32bc59382f02015e4b2f19a135b99dca4" - integrity sha512-b1AsL9k6Klp72CnAq4IF0xgw94FClBIsUr/pGUKa1PI+mStdF0AYZzi9qtYgqQNDIOpqxQ2xYUM9azL2VmPUeQ== - dependencies: - react-native-platform-touchable "^1.1.1" - react-popper-tooltip@^2.8.3: version "2.11.1" resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-2.11.1.tgz#3c4bdfd8bc10d1c2b9a162e859bab8958f5b2644"