151 lines
3.4 KiB
JavaScript
151 lines
3.4 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { View } from 'react-native';
|
|
import { connect } from 'react-redux';
|
|
import RNPickerSelect from 'react-native-picker-select';
|
|
|
|
import {
|
|
inviteLinksSetParams as inviteLinksSetParamsAction,
|
|
inviteLinksCreate as inviteLinksCreateAction
|
|
} from '../../actions/inviteLinks';
|
|
import * as List from '../../containers/List';
|
|
import styles from './styles';
|
|
import Button from '../../containers/Button';
|
|
import I18n from '../../i18n';
|
|
import StatusBar from '../../containers/StatusBar';
|
|
import { themes } from '../../constants/colors';
|
|
import { withTheme } from '../../theme';
|
|
import SafeAreaView from '../../containers/SafeAreaView';
|
|
import { logEvent, events } from '../../utils/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
|
|
}]
|
|
};
|
|
|
|
class InviteUsersView extends React.Component {
|
|
static navigationOptions = () => ({
|
|
title: I18n.t('Invite_users')
|
|
})
|
|
|
|
static propTypes = {
|
|
navigation: PropTypes.object,
|
|
route: PropTypes.object,
|
|
theme: PropTypes.string,
|
|
createInviteLink: PropTypes.func,
|
|
inviteLinksSetParams: PropTypes.func
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.rid = props.route.params?.rid;
|
|
}
|
|
|
|
onValueChangePicker = (key, value) => {
|
|
logEvent(events.IU_EDIT_SET_LINK_PARAM);
|
|
const { inviteLinksSetParams } = this.props;
|
|
const params = {
|
|
[key]: value
|
|
};
|
|
inviteLinksSetParams(params);
|
|
}
|
|
|
|
createInviteLink = () => {
|
|
logEvent(events.IU_EDIT_CREATE_LINK);
|
|
const { createInviteLink, navigation } = this.props;
|
|
createInviteLink(this.rid);
|
|
navigation.pop();
|
|
}
|
|
|
|
renderPicker = (key, first) => {
|
|
const { props } = this;
|
|
const { theme } = props;
|
|
const firstEl = [{
|
|
label: I18n.t(first), value: 0
|
|
}];
|
|
return (
|
|
<RNPickerSelect
|
|
style={{ viewContainer: styles.viewContainer }}
|
|
value={props[key]}
|
|
textInputProps={{ style: { ...styles.pickerText, color: themes[theme].actionTintColor } }}
|
|
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 => ({
|
|
days: state.inviteLinks.days,
|
|
maxUses: state.inviteLinks.maxUses
|
|
});
|
|
|
|
const mapDispatchToProps = dispatch => ({
|
|
inviteLinksSetParams: params => dispatch(inviteLinksSetParamsAction(params)),
|
|
createInviteLink: rid => dispatch(inviteLinksCreateAction(rid))
|
|
});
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(withTheme(InviteUsersView));
|