-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[IMPROVE] Redesign create room flow (#4381)
Co-authored-by: Diego Mello <[email protected]>
- Loading branch information
1 parent
cbc6892
commit 9cbffff
Showing
54 changed files
with
1,532 additions
and
1,167 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
__tests__/containers/Chip/__snapshots__/Chip.stories.storyshot
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`Storyshots Chip Chip Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"alignItems\\":\\"flex-start\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"style\\":[{\\"paddingHorizontal\\":8,\\"marginRight\\":8,\\"borderRadius\\":2,\\"justifyContent\\":\\"center\\",\\"maxWidth\\":192},{\\"backgroundColor\\":\\"#efeff4\\"},null],\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginRight\\":8,\\"maxWidth\\":120}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Rocket.Cat\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":16,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}"`; | ||
|
|
||
| exports[`Storyshots Chip Chip With Short Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"alignItems\\":\\"flex-start\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"style\\":[{\\"paddingHorizontal\\":8,\\"marginRight\\":8,\\"borderRadius\\":2,\\"justifyContent\\":\\"center\\",\\"maxWidth\\":192},{\\"backgroundColor\\":\\"#efeff4\\"},null],\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginRight\\":8,\\"maxWidth\\":120}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Short\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":16,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}"`; | ||
|
|
||
| exports[`Storyshots Chip Chip Without Avatar 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"alignItems\\":\\"flex-start\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"style\\":[{\\"paddingHorizontal\\":8,\\"marginRight\\":8,\\"borderRadius\\":2,\\"justifyContent\\":\\"center\\",\\"maxWidth\\":192},{\\"backgroundColor\\":\\"#efeff4\\"},null],\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginRight\\":8,\\"maxWidth\\":120}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Without Avatar\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":16,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}"`; | ||
|
|
||
| exports[`Storyshots Chip Chip Without Avatar And Icon 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"alignItems\\":\\"flex-start\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":true},\\"focusable\\":true,\\"style\\":[{\\"paddingHorizontal\\":8,\\"marginRight\\":8,\\"borderRadius\\":2,\\"justifyContent\\":\\"center\\",\\"maxWidth\\":192},{\\"backgroundColor\\":\\"#efeff4\\"},null],\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginRight\\":8,\\"maxWidth\\":120}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Without Avatar and Icon\\"]}]}]}]}]}"`; | ||
|
|
||
| exports[`Storyshots Chip Chip Without Icon 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"alignItems\\":\\"flex-start\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":true},\\"focusable\\":true,\\"style\\":[{\\"paddingHorizontal\\":8,\\"marginRight\\":8,\\"borderRadius\\":2,\\"justifyContent\\":\\"center\\",\\"maxWidth\\":192},{\\"backgroundColor\\":\\"#efeff4\\"},null],\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginRight\\":8,\\"maxWidth\\":120}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Without Icon\\"]}]}]}]}]}"`; |
3 changes: 3 additions & 0 deletions
3
__tests__/views/CreateChannelView/RoomSettings/__snapshots__/SwitchItem.stories.storyshot
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`Storyshots SwitchItem Switch 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"alignItems\\":\\"flex-start\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"minHeight\\":54,\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"space-between\\",\\"flexDirection\\":\\"row\\",\\"maxHeight\\":80,\\"marginBottom\\":12},{\\"backgroundColor\\":\\"#ffffff\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"marginRight\\":8}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Welcome to Rocket.Chat\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"testID\\":\\"create-channel-switch-id-hint\\",\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"Only authorized users can write new messages\\"]}]},{\\"type\\":\\"RCTSwitch\\",\\"props\\":{\\"testID\\":\\"create-channel-switch-id\\",\\"disabled\\":false,\\"onTintColor\\":\\"#2de0a5\\",\\"style\\":{\\"height\\":31,\\"width\\":51},\\"tintColor\\":\\"#f5455c\\",\\"value\\":false,\\"accessibilityRole\\":\\"switch\\"},\\"children\\":null}]}]}"`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import React from 'react'; | ||
| import { StyleSheet, View } from 'react-native'; | ||
|
|
||
| import Chip, { IChip } from './index'; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| flex: 1, | ||
| alignItems: 'flex-start', | ||
| padding: 16 | ||
| } | ||
| }); | ||
|
|
||
| export default { | ||
| title: 'Chip' | ||
| }; | ||
|
|
||
| const ChipWrapped = ({ avatar, text, onPress, testID, style }: IChip) => ( | ||
| <View style={styles.container}> | ||
| <Chip avatar={avatar} text={text} onPress={onPress} testID={testID} style={style} /> | ||
| </View> | ||
| ); | ||
|
|
||
| export const ChipText = () => <ChipWrapped avatar='rocket.cat' text={'Rocket.Cat'} onPress={() => {}} />; | ||
|
|
||
| export const ChipWithShortText = () => <ChipWrapped avatar='rocket.cat' text={'Short'} onPress={() => {}} />; | ||
|
|
||
| export const ChipWithoutAvatar = () => <ChipWrapped text={'Without Avatar'} onPress={() => {}} />; | ||
|
|
||
| export const ChipWithoutIcon = () => <ChipWrapped avatar='rocket.cat' text='Without Icon' />; | ||
|
|
||
| export const ChipWithoutAvatarAndIcon = () => <ChipWrapped text='Without Avatar and Icon' />; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import React from 'react'; | ||
| import { fireEvent, render } from '@testing-library/react-native'; | ||
| import { Provider } from 'react-redux'; | ||
|
|
||
| import Chip, { IChip } from '.'; | ||
| import { ISelectedUser } from '../../reducers/selectedUsers'; | ||
| import { mockedStore as store } from '../../reducers/mockedStore'; | ||
|
|
||
| const onPressMock = jest.fn((item: any) => item); | ||
|
|
||
| const testChip = { | ||
| testID: 'test-chip-id', | ||
| item: { fname: 'rocket.chat', name: 'rocket.chat' } as ISelectedUser, | ||
| onPress: onPressMock | ||
| }; | ||
|
|
||
| const Render = ({ testID, text, avatar, onPress }: IChip) => ( | ||
| <Provider store={store}> | ||
| <Chip testID={testID} text={text} onPress={onPress} avatar={avatar} /> | ||
| </Provider> | ||
| ); | ||
|
|
||
| describe('Chips', () => { | ||
| it('should render the Chip component', () => { | ||
| const { findByTestId } = render( | ||
| <Render | ||
| text={testChip.item.fname} | ||
| avatar={testChip.item.name} | ||
| testID={testChip.testID} | ||
| onPress={() => testChip.onPress(testChip.item)} | ||
| /> | ||
| ); | ||
|
|
||
| expect(findByTestId(testChip.testID)).toBeTruthy(); | ||
| }); | ||
| it("should not call onPress if it's not passed", async () => { | ||
| const { findByTestId } = render(<Render text={testChip.item.fname} avatar={testChip.item.name} testID={testChip.testID} />); | ||
|
|
||
| const component = await findByTestId(testChip.testID); | ||
| fireEvent.press(component); | ||
| expect(onPressMock).not.toHaveBeenCalled(); | ||
| }); | ||
| it('should tap Chip and return item', async () => { | ||
| const { findByTestId } = render( | ||
| <Render | ||
| text={testChip.item.fname} | ||
| avatar={testChip.item.name} | ||
| testID={testChip.testID} | ||
| onPress={() => testChip.onPress(testChip.item)} | ||
| /> | ||
| ); | ||
|
|
||
| const component = await findByTestId(testChip.testID); | ||
| fireEvent.press(component); | ||
| expect(onPressMock).toHaveBeenCalled(); | ||
| expect(onPressMock).toHaveReturnedWith(testChip.item); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import React from 'react'; | ||
| import { Pressable, StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native'; | ||
|
|
||
| import { useTheme } from '../../theme'; | ||
| import { CustomIcon } from '../CustomIcon'; | ||
| import sharedStyles from '../../views/Styles'; | ||
| import Avatar from '../Avatar'; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| pressable: { | ||
| paddingHorizontal: 8, | ||
| marginRight: 8, | ||
| borderRadius: 2, | ||
| justifyContent: 'center', | ||
| maxWidth: 192 | ||
| }, | ||
| container: { | ||
| flexDirection: 'row', | ||
| alignItems: 'center' | ||
| }, | ||
| avatar: { | ||
| marginRight: 8, | ||
| marginVertical: 8 | ||
| }, | ||
| textContainer: { | ||
| marginRight: 8, | ||
| maxWidth: 120 | ||
| }, | ||
| name: { | ||
| fontSize: 16, | ||
| ...sharedStyles.textMedium | ||
| } | ||
| }); | ||
|
|
||
| export interface IChip { | ||
| avatar?: string; | ||
| text: string; | ||
| onPress?: Function; | ||
| testID?: string; | ||
| style?: StyleProp<ViewStyle>; | ||
| } | ||
|
|
||
| const Chip = ({ avatar, text, onPress, testID, style }: IChip) => { | ||
| const { colors } = useTheme(); | ||
|
|
||
| return ( | ||
| <Pressable | ||
| testID={testID} | ||
| style={({ pressed }) => [ | ||
| styles.pressable, | ||
| { | ||
| backgroundColor: pressed ? colors.bannerBackground : colors.auxiliaryBackground | ||
| }, | ||
| style | ||
| ]} | ||
| disabled={!onPress} | ||
| onPress={() => onPress?.()} | ||
| android_ripple={{ | ||
| color: colors.bannerBackground | ||
| }} | ||
| > | ||
| <View style={styles.container}> | ||
| {avatar ? <Avatar text={avatar} size={28} style={styles.avatar} /> : null} | ||
| <View style={styles.textContainer}> | ||
| <Text style={[styles.name, { color: colors.bodyText }]} numberOfLines={1}> | ||
| {text} | ||
| </Text> | ||
| </View> | ||
| {onPress ? <CustomIcon name='close' size={16} color={colors.auxiliaryTintColor} /> : null} | ||
| </View> | ||
| </Pressable> | ||
| ); | ||
| }; | ||
|
|
||
| export default Chip; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import React from 'react'; | ||
| import { Control, Controller } from 'react-hook-form'; | ||
|
|
||
| import { FormTextInput, IRCTextInputProps } from './FormTextInput'; | ||
|
|
||
| interface IControlledFormTextInputProps extends IRCTextInputProps { | ||
| control: Control<any>; | ||
| name: string; | ||
| } | ||
|
|
||
| export const ControlledFormTextInput = ({ control, name, ...props }: IControlledFormTextInputProps) => ( | ||
| <Controller | ||
| control={control} | ||
| name={name} | ||
| render={({ field: { onChange, value } }) => <FormTextInput onChangeText={onChange} value={value} {...props} />} | ||
| /> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| export * from './TextInput'; | ||
| export * from './FormTextInput'; | ||
| export * from './ControlledFormTextInput'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.