151 lines
3.5 KiB
TypeScript
151 lines
3.5 KiB
TypeScript
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 { inviteLinksCreate, inviteLinksSetParams } from '../../actions/inviteLinks';
|
|
import { themes } from '../../constants/colors';
|
|
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 '../../utils/log';
|
|
import styles from './styles';
|
|
|
|
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
|
|
}
|
|
]
|
|
};
|
|
|
|
interface IInviteUsersEditViewProps extends IBaseScreen<ChatsStackParamList, 'InviteUsersEditView'> {
|
|
days: number;
|
|
maxUses: number;
|
|
}
|
|
|
|
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;
|
|
logEvent(events.IU_EDIT_CREATE_LINK);
|
|
dispatch(inviteLinksCreate(this.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])}
|
|
/>
|
|
);
|
|
};
|
|
|
|
render() {
|
|
const { theme } = this.props;
|
|
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} theme={theme} />
|
|
</View>
|
|
</List.Container>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state: IApplicationState) => ({
|
|
days: state.inviteLinks.days,
|
|
maxUses: state.inviteLinks.maxUses
|
|
});
|
|
|
|
export default connect(mapStateToProps)(withTheme(InviteUsersEditView));
|