function renderOptions(props) {
return DataTypes.map((t) => {
if (checkVersion(t, props)) {
return <Option key={t} value={t}>{t}</Option>
} else {
return null;
}
}).filter((t => t !== null))
}
render() {
let typeDropdown = (
<Dropdown
value={this.state.type}
onChange={(type) => this.setState({ type: type })}>
{DataTypes.map((t) => <Option key={t} value={t}>{t}</Option>)}
</Dropdown>
);
return (
<Modal
type={Modal.Types.INFO}
icon='ellipses'
iconSize={30}
title='Add a new column'
subtitle='Store another type of data in this class.'
disabled={!this.valid()}
confirmText='Add column'
cancelText={'Never mind, don\u2019t.'}
onCancel={this.props.onCancel}
onConfirm={() => {
this.props.onConfirm(this.state.type, this.state.name, this.state.target);
}}>
<Field
label={
<Label
text='What type of data do you want to store?' />
}
input={typeDropdown} />
{this.state.type === 'Pointer' || this.state.type === 'Relation' ?
<Field
label={<Label text='Target class' />}
input={this.renderClassDropdown()} /> : null}
<Field
label={<Label text='What should we call it?' description={'Don\u2019t use any special characters, and start your name with a letter.'} />}
input={<TextInput placeholder='Give it a good name...' value={this.state.name} onChange={(name) => this.setState({ name })} />}/>
</Modal>
);
}