From 52850cbcccc625c71e198fd7ec07780544f35e27 Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Fri, 30 Oct 2020 10:59:44 -0300 Subject: [PATCH] [IMPROVEMENT] List Component (#2506) * List.Item * section * Start removing theme as prop * Remove StatusBar theme prop * SafeAreaView theme prop * Minor fixes * List.Container * Add translateTitle and translateSubtitle props * Storybook * Show action indicator * Header * Info * Theme stories * FlatList * DisplayName * Fix settings * FlatList tweaks * ThemeView * Screen Lock Config * DefaultBrowserView * PickerView and User Prefs * Notification Prefs * StatusView * Auto Translate * InviteUsersEdit * Visitor * Minor fixes * Remove Separator * Remove iteminfo * Font scale * Legal * Jitsi and e2e * Block * search, star, etc * auto translate and notifications * RoomInfo * Refactor RoomActions * lint * Remove DisclosureIndicator * padding horizontal 12 * Detox * Tests * Address review comments * Fix vertical scroll Co-authored-by: Djorkaeff Alexandre --- __mocks__/expo-keep-awake.js | 8 +- .../__snapshots__/Storyshots.test.js.snap | 34209 +++++++++++++++- app/containers/ActionSheet/ActionSheet.js | 8 +- app/containers/DisclosureIndicator.js | 37 - app/containers/FormContainer.js | 4 +- app/containers/ItemInfo.js | 29 - app/containers/List/ListContainer.js | 30 + app/containers/List/ListHeader.js | 40 + app/containers/List/ListIcon.js | 34 + app/containers/List/ListInfo.js | 40 + app/containers/List/ListItem.js | 137 + app/containers/List/ListSection.js | 28 + .../{Separator.js => List/ListSeparator.js} | 11 +- app/containers/List/constants.js | 2 + app/containers/List/index.js | 8 + app/containers/List/styles.js | 7 + app/containers/ListItem.js | 102 - app/containers/ReactionsModal.js | 2 +- app/containers/SafeAreaView.js | 3 +- app/containers/StatusBar.js | 3 +- app/containers/UIKit/Divider.js | 8 +- app/containers/UIKit/MultiSelect/Items.js | 5 +- app/containers/UIKit/Overflow.js | 4 +- app/containers/message/RepliedThread.js | 9 +- app/containers/message/styles.js | 6 + app/ee/omnichannel/views/QueueListView.js | 4 +- app/i18n/locales/de.js | 12 +- app/i18n/locales/en.js | 12 +- app/i18n/locales/es-ES.js | 10 +- app/i18n/locales/fr.js | 8 +- app/i18n/locales/it.js | 10 +- app/i18n/locales/ja.js | 9 +- app/i18n/locales/nl.js | 10 +- app/i18n/locales/pt-BR.js | 8 +- app/i18n/locales/ru.js | 9 +- app/i18n/locales/zh-CN.js | 10 +- app/i18n/locales/zh-TW.js | 10 +- app/index.js | 28 +- app/share.js | 28 +- app/views/AdminPanelView/index.js | 9 +- app/views/AuthLoadingView.js | 2 +- app/views/AuthenticationWebView.js | 2 +- app/views/AutoTranslateView/index.js | 95 +- app/views/CreateChannelView.js | 4 +- app/views/CreateDiscussionView/index.js | 4 +- app/views/DefaultBrowserView.js | 67 +- app/views/DirectoryView/index.js | 3 +- app/views/E2EEnterYourPasswordView.js | 4 +- app/views/E2EHowItWorksView.js | 1 - app/views/E2ESaveYourPasswordView.js | 4 +- app/views/InviteUsersEditView/index.js | 47 +- app/views/InviteUsersEditView/styles.js | 30 +- app/views/InviteUsersView/index.js | 4 +- app/views/InviteUsersView/styles.js | 3 +- app/views/LanguageView/index.js | 34 +- app/views/LegalView.js | 93 +- app/views/LivechatEditView.js | 2 +- app/views/MessagesView/index.js | 3 +- app/views/NewMessageView.js | 7 +- app/views/NewServerView/ServerInput/index.js | 4 +- app/views/NotificationPreferencesView/Info.js | 29 - .../SectionSeparator.js | 23 - .../SectionTitle.js | 29 - .../NotificationPreferencesView/index.js | 217 +- .../NotificationPreferencesView/styles.js | 31 - app/views/PickerView.js | 36 +- app/views/ProfileView/index.js | 4 +- app/views/ReadReceiptView/index.js | 4 +- app/views/RoomActionsView/index.js | 827 +- app/views/RoomActionsView/styles.js | 42 +- app/views/RoomInfoEditView/index.js | 3 +- app/views/RoomInfoView/index.js | 3 +- app/views/RoomMembersView/index.js | 4 +- app/views/RoomView/index.js | 3 +- app/views/RoomsListView/index.js | 4 +- app/views/ScreenLockConfigView.js | 116 +- app/views/SearchMessagesView/index.js | 4 +- app/views/SelectServerView.js | 4 +- app/views/SelectedUsersView.js | 6 +- app/views/SetUsernameView.js | 4 +- app/views/SettingsView/index.js | 317 +- app/views/SettingsView/styles.js | 13 - app/views/ShareListView/index.js | 5 +- app/views/ShareView/index.js | 1 - app/views/SidebarView/index.js | 2 +- app/views/StatusView.js | 31 +- app/views/Styles.js | 5 - app/views/ThemeView.js | 98 +- app/views/ThreadMessagesView/index.js | 4 +- .../UserNotificationPreferencesView/Info.js | 29 - .../SectionSeparator.js | 23 - .../SectionTitle.js | 29 - .../UserNotificationPreferencesView/index.js | 113 +- .../UserNotificationPreferencesView/styles.js | 31 - app/views/UserPreferencesView/index.js | 51 +- app/views/VisitorNavigationView.js | 49 +- e2e/tests/assorted/06-status.spec.js | 2 +- e2e/tests/room/04-roominfo.spec.js | 2 +- storybook/index.js | 2 +- storybook/stories/List.js | 196 + storybook/stories/RoomItem.js | 2 +- storybook/stories/index.js | 1 + storybook/utils.js | 1 + 103 files changed, 35860 insertions(+), 1904 deletions(-) delete mode 100644 app/containers/DisclosureIndicator.js delete mode 100644 app/containers/ItemInfo.js create mode 100644 app/containers/List/ListContainer.js create mode 100644 app/containers/List/ListHeader.js create mode 100644 app/containers/List/ListIcon.js create mode 100644 app/containers/List/ListInfo.js create mode 100644 app/containers/List/ListItem.js create mode 100644 app/containers/List/ListSection.js rename app/containers/{Separator.js => List/ListSeparator.js} (58%) create mode 100644 app/containers/List/constants.js create mode 100644 app/containers/List/index.js create mode 100644 app/containers/List/styles.js delete mode 100644 app/containers/ListItem.js delete mode 100644 app/views/NotificationPreferencesView/Info.js delete mode 100644 app/views/NotificationPreferencesView/SectionSeparator.js delete mode 100644 app/views/NotificationPreferencesView/SectionTitle.js delete mode 100644 app/views/NotificationPreferencesView/styles.js delete mode 100644 app/views/SettingsView/styles.js delete mode 100644 app/views/UserNotificationPreferencesView/Info.js delete mode 100644 app/views/UserNotificationPreferencesView/SectionSeparator.js delete mode 100644 app/views/UserNotificationPreferencesView/SectionTitle.js delete mode 100644 app/views/UserNotificationPreferencesView/styles.js create mode 100644 storybook/stories/List.js create mode 100644 storybook/utils.js diff --git a/__mocks__/expo-keep-awake.js b/__mocks__/expo-keep-awake.js index 947b94723..4df99a606 100644 --- a/__mocks__/expo-keep-awake.js +++ b/__mocks__/expo-keep-awake.js @@ -1,4 +1,4 @@ -export default { - activateKeepAwake: () => '', - deactivateKeepAwake: () => '' -}; +const activateKeepAwake = () => ''; +const deactivateKeepAwake = () => ''; + +export { activateKeepAwake, deactivateKeepAwake }; diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index 299d099a4..c27e4dce0 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -628,7 +628,59 @@ exports[`Storyshots Avatar list Avatar 1`] = ` undefined, ] } - /> + > + + + + + + `; +exports[`Storyshots List header 1`] = ` + + + + + Chats + + + + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries + + + + +`; + +exports[`Storyshots List icon 1`] = ` + + + + +  + + + + +`; + +exports[`Storyshots List pressable 1`] = ` + + + + View + + View + + + +`; + +exports[`Storyshots List separator 1`] = ` + + + + + +`; + +exports[`Storyshots List title and subtitle 1`] = ` + + + + + + + + Chats + + + + + + + + + + Chats + + + All + + + + + + + + + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries + + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries + + + + + + + +`; + +exports[`Storyshots List with FlatList 1`] = ` + + + + + + + + + + + + 0 + + + + + + + + + + + + 1 + + + + + + + + + + + + 2 + + + + + + + + + + + + 3 + + + + + + + + + + + + 4 + + + + + + + + + + + + 5 + + + + + + + + + + + + 6 + + + + + + + + + + + + 7 + + + + + + + + + + + + 8 + + + + + + + + + + + + 9 + + + + + + + + + + + + + +`; + +exports[`Storyshots List with bigger font 1`] = ` + + + + + + + Chats + + + + View + + View + + + + Chats + + + + + + + Chats + + + + View + + View + + + + Chats + + + + + + +`; + +exports[`Storyshots List with black theme 1`] = ` + + + + + + + Chats + + + + View + + View + + + + Chats + + + + + + + Chats + + + + View + + View + + + + Chats + + + + + + +`; + +exports[`Storyshots List with custom color 1`] = ` + + + + + + + + Chats + + + + + + + +`; + +exports[`Storyshots List with dark theme 1`] = ` + + + + + + + Chats + + + + View + + View + + + + Chats + + + + + + + Chats + + + + View + + View + + + + Chats + + + + + + +`; + +exports[`Storyshots List with icon 1`] = ` + + + + + + + + +  + + + + + + Icon Left + + + + + + + + + + Icon Right + + + + + +  + + + + + + + + + + + +  + + + + + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries + + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries + + + + + +  + + + + + + + + + + + Show Action Indicator + + + + + +  + + + + + + + + +`; + +exports[`Storyshots List with section and info 1`] = ` + + + + + + + + + + Section Item + + + + + + + + + + Section Item + + + + + + + + + + + + + Section Item + + + + + + + + + + Section Item + + + + + + + + + + Chats + + + + + + + + Section Item + + + + + + + + + + Section Item + + + + + + + + Chats + + + + + + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries + + + + + + + + Section Item + + + + + + + + + + Section Item + + + + + + + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries + + + + + + +`; + +exports[`Storyshots List with small font 1`] = ` + + + + + + + Chats + + + + View + + View + + + + Chats + + + + + + + Chats + + + + View + + View + + + + Chats + + + + + + +`; + exports[`Storyshots Markdown list Markdown 1`] = ` + > + + + + + + + + + First Header + + + + + + + Second Header + + + + + + + + + Content from cell 1 + + + + + + + Content from cell 2 + + + + + + + + + Content in the first column + + + + + + + Content in the second column + + + + + + + + + Click to see full table + + + `; @@ -4229,6 +8400,236 @@ exports[`Storyshots Message list message 1`] = ` > Simple + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Message + + + + + + + + Long message + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + Grouped messages + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + ... + + + + + + + + + + + + + + + + + + + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + 10:00 AM + + + + + + Different user + + + + + + + + + + + + + + + + + This is the third message + + + + + + + + + + + + + + + + + This is the second message + + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + This is the first message + + + + + + + + Without header + + + + + + + + + Message + + + + + + + + With alias + + + + + + + + + + + + + + + + Diego Mello + + @ + diego.mello + + + + + 10:00 AM + + + + + + Message + + + + + + + + + + + + + + + + + + + + + + + + Diego Mello + + @ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + 10:00 AM + + + + + + Message + + + + + + + + Edited + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Message + + + + + + + + Encrypted + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + + Message + + + + + +  + + + + + + + + + + + + + + + + + + + + Message Encrypted without Header + + + + + +  + + + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + + Message Encrypted with Reactions + + + + + +  + + + + + + + + + 😂 + + + 1 + + + + + + + + + + 1 + + + + + + + 🤔 + + + 1 + + + + + + +  + + + + + + + + + + + + + + +  + + + Thread with emoji🙂 😂 + + + +  + + + + + + + + + + + + + + + Thread reply encrypted + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + + Temp message encrypted + + + + + +  + + + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + + Message Edited encrypted + + + + + +  + + + + + + + + + + > + + + + + + + + + diego.mello + + 10:00 AM + + +  + + + + +  + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + + Read Receipt encrypted with Header + + + + + +  + + + + + + +  + + + + + + + + + + + + + + + + Read Receipt encrypted without Header + + + + + +  + + + + + + +  + + + + + Block Quote + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + + + Testing block quote + + + + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + + + Testing block quote + + + + + + + Testing block quote + + + + + + + + Lists + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + • + + + + + + Dogs + + + + + + ◦ + + + + + + cats + + + + + + + + ◦ + + + + + + cats + + + + + + + + + + + + Numerated lists + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + 1. + + + + + + Dogs + + + + + + + + 2. + + + + + + Cats + + + + + + + + + + Numerated lists in separated messages + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + 1. + + + + + + Dogs + + + + + + + + + + + + + + + + + + + + 2. + + + + + + Cats + + + + + + + + + + Static avatar + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Message + + + + + + + + Full name + + + + + + + + + + + + + + + + Diego Mello + + + + 10:00 AM + + + + + + Message + + + + + + + + Mentions + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + rocket.cat + + + + + + diego.mello + + + + + + all + + + + + + here + + + + + + #general + + + + + + + + Emojis + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + 👊🤙👏 + + + + + + + + Single Emoji + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + 👏 + + + + + + + + Custom Emojis + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + + + + + + + + + + + + + + + + + + + + Single Custom Emojis + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + + + + + + + + Normal Emoji + Custom Emojis + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + 🤙 + + + + + + + + + + + Four emoji + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + 🤙 + + + + + + 🤙🤙 + + + + + + + + Time format + + + + + + + + + + + + + + + + diego.mello + + + + 10 November 2017 + + + + + + Testing + + + + + + + + Reactions + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Reactions + + + + + + + + 😂 + + + 3 + + + + + + + + + + 13 + + + + + + + 🤔 + + + 1 + + + + + + +  + + + + + + + + + Multiple reactions + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Multiple Reactions + + + + + + + + + + + 1 + + + + + + + + + + 1 + + + + + + + + + + 1 + + + + + + + ❤️ + + + 1 + + + + + + + 🐶 + + + 1 + + + + + + + 😀 + + + 1 + + + + + + + 😬 + + + 1 + + + + + + + 😁 + + + 1 + + + + + + +  + + + + + + + + + Intercalated users + + + + + + + + + + + + + + + + rocket.cat + + + + 10:00 AM + + + + + + Fourth message + + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Third message + + + + + + + + + + + + + + + + + + + + + + + + rocket.cat + + + + 10:00 AM + + + + + + Second message + + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + First message + + + + + + + + Date and Unread separators + + + + + + + + + + + + + + + + rocket.cat + + + + 10:00 AM + + + + + + Fourth message + + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Third message + + + + + + + + + + + + + + + + + Second message + + + + + + + + + + + + + + + + + + + + + + + + rocket.cat + + + + 10:00 AM + + + + + + Second message + + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + First message + + + + + + + + With image + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + + + + + + + This is a description + + + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + + + + + + + This is a description + + + + + + + + + + + + With video + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + +  + + + + + This is a description + + + + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + +  + + + + + + + With audio + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + + + + 00:00 + + + + + This is a description + + + + + + + + + + + + + + + + + + + First message + + + + + + + + + + + + + + + + + + + + + 00:00 + + + + + This is a description + + + + + + + + + + + + + + + + + + + + 00:00 + + + + + + + + + + + + + + + + + + + + 00:00 + + + + + + + Message with reply + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + I'm fine! + + + + + + + + I'm a very long long title and I'll break + + + 10:00 AM + + + + + How are you? + + + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + I'm fine! + + + + + + + + rocket.cat + + + 10:00 AM + + + + + How are you? + + + + + + + + + + + + Message with read receipt + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + I'm fine! + + + + + + + + + + + + + + + + + I'm fine! + + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + I'm fine! + + + + + +  + + + + + + + + + + + + + + I'm fine! + + + + + +  + + + + + Message with thread + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + How are you? + + + + + + +  + + + 1 reply + + + + Nov 10 + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + How are you? + + + + + + +  + + + +999 replies + + + + Nov 10 + + + + + + + + + + + + +  + + + How are you? + + + +  + + + + + + + + + + + + + + + I'm fine! + + + + + + + + + + + + +  + + + Thread with emoji🙂 😂 + + + +  + + + + + + + + + + + + + + + I'm fine! + + + + + + + + + + + + +  + + + Markdown: link block code + + + +  + + + + + + + + + + + + + + + I'm fine! + + + + + + + + + + + + +  + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + +  + + + + + + + + + + + + + + + I'm fine! + + + + + + + + + + + + +  + + + How are you? + + + +  + + + + + + + + + + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + + + + + +  + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + +  + + + + + + + + + + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + + + + + +  + + + Thread with attachment + + + +  + + + + + + + + + + + + + + + Sent an attachment + + + + + + + Sequential thread messages following thread button + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + How are you? + + + + + + +  + + + 1 reply + + + + Nov 10 + + + + + + + + + + + + + + + + + + + + + + I'm fine! + + + + + + + + + + + + + + + + + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + + + + + + + + + + + + + + + Sent an attachment + + + + + + + Sequential thread messages following thread reply + + + + + +  + + + How are you? + + + +  + + + + + + + + + + + + + + + I'm fine! + + + + + + + + + + + + + + + + + + + + + + Cool! + + + + + + + + + + + + + + + + + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + + + + + + + + + + + + + + + Sent an attachment + + + + + + + Discussion + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + Started a discussion: + + + This is a discussion + + + + +  + + + No messages yet + + + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + Started a discussion: + + + This is a discussion + + + + +  + + + 1 message + + + + Nov 10 + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + Started a discussion: + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + +  + + + 10 messages + + + + Nov 10 + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + Started a discussion: + + + This is a discussion + + + + +  + + + +999 messages + + + + Nov 10 + + + + + + + URL + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + + + + Rocket.Chat - Free, Open Source, Enterprise Team Chat + + + Rocket.Chat is the leading open source team chat software solution. Free, unlimited and completely customizable with on-premises and SaaS cloud hosting. + + + + + + + Google + + + Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for. + + + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Message + + + + + + + + + + Google + + + Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for. + + + + + + + + + + + + + + + + + + Google + + + Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for. + + + + + + + + Custom fields + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Message + + + + + + + + rocket.cat + + + 10:00 AM + + + + + Custom fields + + + + + + Field 1 + + + Value 1 + + + + + Field 2 + + + Value 2 + + + + + Field 3 + + + Value 3 + + + + + Field 4 + + + Value 4 + + + + + Field 5 + + + Value 5 + + + + + + + + + + Two short custom fields + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Message + + + + + + + + rocket.cat + + + 10:00 AM + + + + + Custom fields + + + + + + Field 1 + + + Value 1 + + + + + Field 2 + + + Value 2 + + + + + + + + + + rocket.cat + + + 10:00 AM + + + + + Custom fields 2 + + + + + + Field 1 + + + Value 1 + + + + + Field 2 + + + Value 2 + + + + + + + + + + Broadcast + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Broadcasted message + + + + + + +  + + + Reply + + + + + + + + Archived + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + This message is inside an archived room + + + + + + + + + > + + + + + + + + + diego.mello + + 10:00 AM + + +  + + + + + diego.mello + + 10:00 AM + + +  + + Temp + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Temp message + + + + + + + + Editing + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Message being edited + + + + + + + + Removed + + + + + + + + + + + + + + Message removed + + + + + + Joined + + + + + + + + + + + + + + Has joined the channel + + + + + + Room name changed + + + + + + + + + + + + + + Room name changed to: New name by diego.mello + + + + + + Message pinned + + + + + + + + + + + + + + Message pinned + + + + + + Has left the channel + + + + + + + + + + + + + + Has left the channel + + + + + + User removed + + + + + + + + + + + + + + User rocket.cat removed by diego.mello + + + + + + User added + + + + + + + + + + + + + + User rocket.cat added by diego.mello + + + + + + User muted + + + + + + + + + + + + + + User rocket.cat muted by diego.mello + + + + + + User unmuted + + + + + + + + + + + + + + User rocket.cat unmuted by diego.mello + + + + + + Role added + + + + + + + + + + + + + + rocket.cat was set admin by diego.mello + + + + + + Role removed + + + + + + + + + + + + + + rocket.cat is no longer admin by diego.mello + + + + + + Changed description + + + + + + + + + + + + + + Room description changed to: new description by diego.mello + + + + + + Changed announcement + + + + + + + + + + + + + + Room announcement changed to: new announcement by diego.mello + + + + + + Changed topic + + + + + + + + + + + + + + Room topic changed to: new topic by diego.mello + + + + + + Changed type + + + + + + + + + + + + + + Room type changed to: public by diego.mello + + + + + + Custom style + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Message + + + + + + + + Markdown emphasis + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Italic with single + + + underscore + + + or double + + + underscores + + + . Bold with single + + + asterisk + + + or double + + + asterisks + + + . Strikethrough with single + + + Strikethrough + + + or double + + + Strikethrough + + + + + + + + Markdown headers + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + H1 + + + + + H2 + + + + + H3 + + + + + H4 + + + + + H5 + + + + + H6 + + + + + + + + Markdown links + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Support + + + + Google + + + + + + + + I\`m an inline-style link + + + + + + + + https://google.com + + + + + + + + + Markdown image + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + + + + + + Markdown code + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + Inline + + + code + + + has + + + back-ticks around + + + it. + + + + Code block + + + + + + + + Markdown quote + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + + + Quote + + + + + + + + + + Markdown table + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + + + + + + First Header + + + + + + + Second Header + + + + + + + + + Content from cell 1 + + + + + + + Content from cell 2 + + + + + + + + + Content in the first column + + + + + + + Content in the second column + + + + + + + + + Click to see full table + + + + + + + + `; diff --git a/app/containers/ActionSheet/ActionSheet.js b/app/containers/ActionSheet/ActionSheet.js index f7c009368..81b3496ae 100644 --- a/app/containers/ActionSheet/ActionSheet.js +++ b/app/containers/ActionSheet/ActionSheet.js @@ -27,7 +27,7 @@ import { Button } from './Button'; import { themes } from '../../constants/colors'; import styles, { ITEM_HEIGHT } from './styles'; import { isTablet, isIOS } from '../../utils/deviceInfo'; -import Separator from '../Separator'; +import * as List from '../List'; import I18n from '../../i18n'; import { useOrientation, useDimensions } from '../../dimensions'; @@ -142,8 +142,6 @@ const ActionSheet = React.memo(forwardRef(({ children, theme }, ref) => { ) : null)); - const renderSeparator = useCallback(() => ); - const renderItem = useCallback(({ item }) => ); const animatedPosition = React.useRef(new Value(0)); @@ -191,8 +189,8 @@ const ActionSheet = React.memo(forwardRef(({ children, theme }, ref) => { keyExtractor={item => item.title} style={{ backgroundColor: themes[theme].focusedBackground }} contentContainerStyle={styles.content} - ItemSeparatorComponent={renderSeparator} - ListHeaderComponent={renderSeparator} + ItemSeparatorComponent={List.Separator} + ListHeaderComponent={List.Separator} ListFooterComponent={renderFooter} getItemLayout={getItemLayout} removeClippedSubviews={isIOS} diff --git a/app/containers/DisclosureIndicator.js b/app/containers/DisclosureIndicator.js deleted file mode 100644 index e33dbe816..000000000 --- a/app/containers/DisclosureIndicator.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import { View, StyleSheet } from 'react-native'; -import PropTypes from 'prop-types'; - -import { themes } from '../constants/colors'; -import { CustomIcon } from '../lib/Icons'; - -const styles = StyleSheet.create({ - disclosureContainer: { - marginLeft: 6, - marginRight: 9, - alignItems: 'center', - justifyContent: 'center' - } -}); - -export const DisclosureImage = React.memo(({ theme }) => ( - -)); -DisclosureImage.propTypes = { - theme: PropTypes.string -}; - -const DisclosureIndicator = React.memo(({ theme }) => ( - - - -)); -DisclosureIndicator.propTypes = { - theme: PropTypes.string -}; - -export default DisclosureIndicator; diff --git a/app/containers/FormContainer.js b/app/containers/FormContainer.js index 46a550546..ac58502c7 100644 --- a/app/containers/FormContainer.js +++ b/app/containers/FormContainer.js @@ -31,14 +31,14 @@ const FormContainer = ({ contentContainerStyle={sharedStyles.container} keyboardVerticalOffset={128} > - + - + {children} diff --git a/app/containers/ItemInfo.js b/app/containers/ItemInfo.js deleted file mode 100644 index c7d541e64..000000000 --- a/app/containers/ItemInfo.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import { View, Text, StyleSheet } from 'react-native'; -import PropTypes from 'prop-types'; - -import sharedStyles from '../views/Styles'; -import { themes } from '../constants/colors'; - -const styles = StyleSheet.create({ - infoContainer: { - padding: 15 - }, - infoText: { - fontSize: 14, - ...sharedStyles.textRegular - } -}); - -const ItemInfo = React.memo(({ info, theme }) => ( - - {info} - -)); - -ItemInfo.propTypes = { - info: PropTypes.string, - theme: PropTypes.string -}; - -export default ItemInfo; diff --git a/app/containers/List/ListContainer.js b/app/containers/List/ListContainer.js new file mode 100644 index 000000000..f1be3705a --- /dev/null +++ b/app/containers/List/ListContainer.js @@ -0,0 +1,30 @@ +import React from 'react'; +import { ScrollView, StyleSheet } from 'react-native'; +import PropTypes from 'prop-types'; +import { withTheme } from '../../theme'; +import scrollPersistTaps from '../../utils/scrollPersistTaps'; + +const styles = StyleSheet.create({ + container: { + paddingVertical: 16 + } +}); + +const ListContainer = React.memo(({ children, ...props }) => ( + + {children} + +)); + +ListContainer.propTypes = { + children: PropTypes.array.isRequired +}; + +ListContainer.displayName = 'List.Container'; + +export default withTheme(ListContainer); diff --git a/app/containers/List/ListHeader.js b/app/containers/List/ListHeader.js new file mode 100644 index 000000000..1166e25bd --- /dev/null +++ b/app/containers/List/ListHeader.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { View, Text, StyleSheet } from 'react-native'; +import PropTypes from 'prop-types'; + +import sharedStyles from '../../views/Styles'; +import { themes } from '../../constants/colors'; +import I18n from '../../i18n'; +import { withTheme } from '../../theme'; +import { PADDING_HORIZONTAL } from './constants'; + +const styles = StyleSheet.create({ + container: { + paddingBottom: 12, + paddingHorizontal: PADDING_HORIZONTAL + }, + title: { + fontSize: 16, + ...sharedStyles.textRegular + } +}); + +const ListHeader = React.memo(({ title, theme, translateTitle }) => ( + + {translateTitle ? I18n.t(title) : title} + +)); + +ListHeader.propTypes = { + title: PropTypes.string, + theme: PropTypes.string, + translateTitle: PropTypes.bool +}; + +ListHeader.defaultProps = { + translateTitle: true +}; + +ListHeader.displayName = 'List.Header'; + +export default withTheme(ListHeader); diff --git a/app/containers/List/ListIcon.js b/app/containers/List/ListIcon.js new file mode 100644 index 000000000..1a1b3164c --- /dev/null +++ b/app/containers/List/ListIcon.js @@ -0,0 +1,34 @@ +import React from 'react'; +import { View, StyleSheet } from 'react-native'; +import PropTypes from 'prop-types'; + +import { themes } from '../../constants/colors'; +import { CustomIcon } from '../../lib/Icons'; +import { withTheme } from '../../theme'; + +const styles = StyleSheet.create({ + icon: { + alignItems: 'center', + justifyContent: 'center' + } +}); + +const ListIcon = React.memo(({ theme, name, color }) => ( + + + +)); + +ListIcon.propTypes = { + theme: PropTypes.string, + name: PropTypes.string, + color: PropTypes.string +}; + +ListIcon.displayName = 'List.Icon'; + +export default withTheme(ListIcon); diff --git a/app/containers/List/ListInfo.js b/app/containers/List/ListInfo.js new file mode 100644 index 000000000..e0cb9eae7 --- /dev/null +++ b/app/containers/List/ListInfo.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { View, Text, StyleSheet } from 'react-native'; +import PropTypes from 'prop-types'; + +import sharedStyles from '../../views/Styles'; +import { themes } from '../../constants/colors'; +import { withTheme } from '../../theme'; +import { PADDING_HORIZONTAL } from './constants'; +import I18n from '../../i18n'; + +const styles = StyleSheet.create({ + container: { + paddingTop: 8, + paddingHorizontal: PADDING_HORIZONTAL + }, + text: { + fontSize: 14, + ...sharedStyles.textRegular + } +}); + +const ListInfo = React.memo(({ info, translateInfo, theme }) => ( + + {translateInfo ? I18n.t(info) : info} + +)); + +ListInfo.propTypes = { + info: PropTypes.string, + theme: PropTypes.string, + translateInfo: PropTypes.bool +}; + +ListInfo.defaultProps = { + translateInfo: true +}; + +ListInfo.displayName = 'List.Info'; + +export default withTheme(ListInfo); diff --git a/app/containers/List/ListItem.js b/app/containers/List/ListItem.js new file mode 100644 index 000000000..0dcf2a6d7 --- /dev/null +++ b/app/containers/List/ListItem.js @@ -0,0 +1,137 @@ +import React from 'react'; +import { View, Text, StyleSheet } from 'react-native'; +import PropTypes from 'prop-types'; + +import Touch from '../../utils/touch'; +import { themes } from '../../constants/colors'; +import sharedStyles from '../../views/Styles'; +import { withTheme } from '../../theme'; +import I18n from '../../i18n'; +import { Icon } from '.'; +import { BASE_HEIGHT, PADDING_HORIZONTAL } from './constants'; +import { withDimensions } from '../../dimensions'; + +const styles = StyleSheet.create({ + container: { + flex: 1, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + paddingHorizontal: PADDING_HORIZONTAL + }, + leftContainer: { + paddingRight: PADDING_HORIZONTAL + }, + rightContainer: { + paddingLeft: PADDING_HORIZONTAL + }, + disabled: { + opacity: 0.3 + }, + textContainer: { + flex: 1, + justifyContent: 'center' + }, + title: { + fontSize: 16, + ...sharedStyles.textRegular + }, + subtitle: { + fontSize: 14, + ...sharedStyles.textRegular + } +}); + +const Content = React.memo(({ + title, subtitle, disabled, testID, left, right, color, theme, translateTitle, translateSubtitle, showActionIndicator, fontScale +}) => ( + + {left + ? ( + + {left()} + + ) + : null} + + {translateTitle ? I18n.t(title) : title} + {subtitle + ? {translateSubtitle ? I18n.t(subtitle) : subtitle} + : null + } + + {right || showActionIndicator + ? ( + + {right ? right() : null} + {showActionIndicator ? : null} + + ) + : null} + +)); + +const Button = React.memo(({ + onPress, ...props +}) => ( + onPress(props.title)} + style={{ backgroundColor: themes[props.theme].backgroundColor }} + enabled={!props.disabled} + theme={props.theme} + > + + +)); + +const ListItem = React.memo(({ ...props }) => { + if (props.onPress) { + return