Merge branch 'develop' into migrate-auto-translate-view-hooks
This commit is contained in:
commit
2e158fc050
|
@ -105,11 +105,7 @@ const ChatsStackNavigator = () => {
|
|||
/>
|
||||
<ChatsStack.Screen name='SelectedUsersView' component={SelectedUsersView} />
|
||||
<ChatsStack.Screen name='InviteUsersView' component={InviteUsersView} />
|
||||
<ChatsStack.Screen
|
||||
name='InviteUsersEditView'
|
||||
component={InviteUsersEditView}
|
||||
options={InviteUsersEditView.navigationOptions}
|
||||
/>
|
||||
<ChatsStack.Screen name='InviteUsersEditView' component={InviteUsersEditView} />
|
||||
<ChatsStack.Screen name='MessagesView' component={MessagesView} />
|
||||
<ChatsStack.Screen name='AutoTranslateView' component={AutoTranslateView} />
|
||||
<ChatsStack.Screen name='DirectoryView' component={DirectoryView} options={DirectoryView.navigationOptions} />
|
||||
|
|
|
@ -142,11 +142,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
|
|||
component={AddExistingChannelView}
|
||||
options={AddExistingChannelView.navigationOptions}
|
||||
/>
|
||||
<ModalStack.Screen
|
||||
name='InviteUsersEditView'
|
||||
component={InviteUsersEditView}
|
||||
options={InviteUsersEditView.navigationOptions}
|
||||
/>
|
||||
<ModalStack.Screen name='InviteUsersEditView' component={InviteUsersEditView} />
|
||||
<ModalStack.Screen name='MessagesView' component={MessagesView} />
|
||||
<ModalStack.Screen name='AutoTranslateView' component={AutoTranslateView} />
|
||||
<ModalStack.Screen
|
||||
|
|
|
@ -0,0 +1,92 @@
|
|||
import React from 'react';
|
||||
import { TextInputProps } from 'react-native';
|
||||
import RNPickerSelect from 'react-native-picker-select';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
import { inviteLinksSetParams } from '../../actions/inviteLinks';
|
||||
import { useTheme } from '../../theme';
|
||||
import { useAppSelector } from '../../lib/hooks';
|
||||
import I18n from '../../i18n';
|
||||
import styles from './styles';
|
||||
import { events, logEvent } from '../../lib/methods/helpers/log';
|
||||
|
||||
const OPTIONS = {
|
||||
days: [
|
||||
{
|
||||
label: '1',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '7',
|
||||
value: 7
|
||||
},
|
||||
{
|
||||
label: '15',
|
||||
value: 15
|
||||
},
|
||||
{
|
||||
label: '30',
|
||||
value: 30
|
||||
}
|
||||
],
|
||||
maxUses: [
|
||||
{
|
||||
label: '1',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '5',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
label: '10',
|
||||
value: 10
|
||||
},
|
||||
{
|
||||
label: '25',
|
||||
value: 25
|
||||
},
|
||||
{
|
||||
label: '50',
|
||||
value: 50
|
||||
},
|
||||
{
|
||||
label: '100',
|
||||
value: 100
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const Picker = ({ param, first }: { param: 'days' | 'maxUses'; first: string }): JSX.Element => {
|
||||
const { colors } = useTheme();
|
||||
const inviteLinkParam = useAppSelector(state => state.inviteLinks[param]);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const onValueChangePicker = (value: number) => {
|
||||
logEvent(events.IU_EDIT_SET_LINK_PARAM);
|
||||
const params = {
|
||||
[param]: value
|
||||
};
|
||||
dispatch(inviteLinksSetParams(params));
|
||||
};
|
||||
|
||||
const textInputStyle: TextInputProps = { style: { ...styles.pickerText, color: colors.actionTintColor } };
|
||||
const firstEl = [
|
||||
{
|
||||
label: I18n.t(first),
|
||||
value: 0
|
||||
}
|
||||
];
|
||||
return (
|
||||
<RNPickerSelect
|
||||
style={{ viewContainer: styles.viewContainer }}
|
||||
value={inviteLinkParam}
|
||||
textInputProps={textInputStyle}
|
||||
useNativeAndroidPickerStyle={false}
|
||||
onValueChange={value => onValueChangePicker(value)}
|
||||
items={firstEl.concat(OPTIONS[param])}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default Picker;
|
|
@ -1,149 +1,54 @@
|
|||
import { StackNavigationOptions } from '@react-navigation/stack';
|
||||
import React from 'react';
|
||||
import { TextInputProps, View } from 'react-native';
|
||||
import RNPickerSelect from 'react-native-picker-select';
|
||||
import { connect } from 'react-redux';
|
||||
import { StackNavigationProp } from '@react-navigation/stack';
|
||||
import React, { useLayoutEffect } from 'react';
|
||||
import { View } from 'react-native';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
|
||||
|
||||
import { inviteLinksCreate, inviteLinksSetParams } from '../../actions/inviteLinks';
|
||||
import { themes } from '../../lib/constants';
|
||||
import { inviteLinksCreate } from '../../actions/inviteLinks';
|
||||
import Button from '../../containers/Button';
|
||||
import * as List from '../../containers/List';
|
||||
import SafeAreaView from '../../containers/SafeAreaView';
|
||||
import StatusBar from '../../containers/StatusBar';
|
||||
import { IApplicationState, IBaseScreen } from '../../definitions';
|
||||
import I18n from '../../i18n';
|
||||
import { ChatsStackParamList } from '../../stacks/types';
|
||||
import { withTheme } from '../../theme';
|
||||
import { events, logEvent } from '../../lib/methods/helpers/log';
|
||||
import styles from './styles';
|
||||
import Picker from './Picker';
|
||||
|
||||
const OPTIONS = {
|
||||
days: [
|
||||
{
|
||||
label: '1',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '7',
|
||||
value: 7
|
||||
},
|
||||
{
|
||||
label: '15',
|
||||
value: 15
|
||||
},
|
||||
{
|
||||
label: '30',
|
||||
value: 30
|
||||
}
|
||||
],
|
||||
maxUses: [
|
||||
{
|
||||
label: '1',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '5',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
label: '10',
|
||||
value: 10
|
||||
},
|
||||
{
|
||||
label: '25',
|
||||
value: 25
|
||||
},
|
||||
{
|
||||
label: '50',
|
||||
value: 50
|
||||
},
|
||||
{
|
||||
label: '100',
|
||||
value: 100
|
||||
}
|
||||
]
|
||||
};
|
||||
const InviteUsersEditView = () => {
|
||||
const navigation = useNavigation<StackNavigationProp<ChatsStackParamList, 'InviteUsersEditView'>>();
|
||||
const { rid } = useRoute<RouteProp<ChatsStackParamList, 'InviteUsersEditView'>>().params;
|
||||
const dispatch = useDispatch();
|
||||
|
||||
interface IInviteUsersEditViewProps extends IBaseScreen<ChatsStackParamList, 'InviteUsersEditView'> {
|
||||
days: number;
|
||||
maxUses: number;
|
||||
}
|
||||
useLayoutEffect(() => {
|
||||
navigation.setOptions({
|
||||
title: I18n.t('Invite_users')
|
||||
});
|
||||
}, [navigation]);
|
||||
|
||||
class InviteUsersEditView extends React.Component<IInviteUsersEditViewProps, any> {
|
||||
static navigationOptions = (): StackNavigationOptions => ({
|
||||
title: I18n.t('Invite_users')
|
||||
});
|
||||
|
||||
private rid: string;
|
||||
|
||||
constructor(props: IInviteUsersEditViewProps) {
|
||||
super(props);
|
||||
this.rid = props.route.params?.rid;
|
||||
}
|
||||
|
||||
onValueChangePicker = (key: string, value: number) => {
|
||||
const { dispatch } = this.props;
|
||||
logEvent(events.IU_EDIT_SET_LINK_PARAM);
|
||||
const params = {
|
||||
[key]: value
|
||||
};
|
||||
dispatch(inviteLinksSetParams(params));
|
||||
};
|
||||
|
||||
createInviteLink = () => {
|
||||
const { dispatch, navigation } = this.props;
|
||||
const createInviteLink = () => {
|
||||
logEvent(events.IU_EDIT_CREATE_LINK);
|
||||
dispatch(inviteLinksCreate(this.rid));
|
||||
dispatch(inviteLinksCreate(rid));
|
||||
navigation.pop();
|
||||
};
|
||||
|
||||
renderPicker = (key: 'days' | 'maxUses', first: string) => {
|
||||
const { props } = this;
|
||||
const { theme } = props;
|
||||
const textInputStyle: TextInputProps = { style: { ...styles.pickerText, color: themes[theme].actionTintColor } };
|
||||
const firstEl = [
|
||||
{
|
||||
label: I18n.t(first),
|
||||
value: 0
|
||||
}
|
||||
];
|
||||
return (
|
||||
<RNPickerSelect
|
||||
style={{ viewContainer: styles.viewContainer }}
|
||||
value={props[key]}
|
||||
textInputProps={textInputStyle}
|
||||
useNativeAndroidPickerStyle={false}
|
||||
placeholder={{}}
|
||||
onValueChange={value => this.onValueChangePicker(key, value)}
|
||||
items={firstEl.concat(OPTIONS[key])}
|
||||
/>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<SafeAreaView>
|
||||
<List.Container>
|
||||
<StatusBar />
|
||||
<List.Section>
|
||||
<List.Separator />
|
||||
<List.Item title='Expiration_Days' right={() => <Picker param={'days'} first={'Never'} />} />
|
||||
<List.Separator />
|
||||
<List.Item title='Max_number_of_uses' right={() => <Picker param='maxUses' first='No_limit' />} />
|
||||
<List.Separator />
|
||||
</List.Section>
|
||||
<View style={styles.innerContainer}>
|
||||
<Button title={I18n.t('Generate_New_Link')} type='primary' onPress={createInviteLink} />
|
||||
</View>
|
||||
</List.Container>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SafeAreaView>
|
||||
<List.Container>
|
||||
<StatusBar />
|
||||
<List.Section>
|
||||
<List.Separator />
|
||||
<List.Item title='Expiration_Days' right={() => this.renderPicker('days', 'Never')} />
|
||||
<List.Separator />
|
||||
<List.Item title='Max_number_of_uses' right={() => this.renderPicker('maxUses', 'No_limit')} />
|
||||
<List.Separator />
|
||||
</List.Section>
|
||||
<View style={styles.innerContainer}>
|
||||
<Button title={I18n.t('Generate_New_Link')} type='primary' onPress={this.createInviteLink} />
|
||||
</View>
|
||||
</List.Container>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: IApplicationState) => ({
|
||||
days: state.inviteLinks.days,
|
||||
maxUses: state.inviteLinks.maxUses
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(withTheme(InviteUsersEditView));
|
||||
export default InviteUsersEditView;
|
||||
|
|
Loading…
Reference in New Issue