/**
* @module ViewControls
*
*/ /** */
import * as React from 'react'
import { Content } from 'sn-client-js'
import {
CheckboxGroup,
DatePicker,
DropDownList,
Number,
RadioButtonGroup,
ShortText,
TagsInput
} from '../fieldcontrols'
import { Row, Button, Col } from 'react-materialize'
import { styles } from './NewViewStyles'
/**
* Interface for NewView properties
*/
interface INewViewProps {
content: Content,
type,
schema,
history,
onSubmit: Function
}
/**
* View Control for adding a Content, works with a single Content and based on the ReactControlMapper
*
* Usage:
* ```html
* <NewView type={ContentTypes.Task} content={content} schema={schema} history={history} onSubmit={createSubmitClick} />
* ```
*/
export class NewView extends React.Component<INewViewProps, { content }> {
/**
* constructor
* @param {object} props
*/
constructor(props: any) {
super(props);
/**
* @type {object}
* @property {any} content empty base Content
*/
this.state = {
content: this.props.content
};
this.handleInputChange = this.handleInputChange.bind(this);
this.handleCancel = this.handleCancel.bind(this);
}
/**
* handle cancle button click
*/
handleCancel() {
this.props.history.goBack()
}
/**
* handle change event on an input
* @param {SytheticEvent} event
*/
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.props.content[name] = value;
this.setState({
content: this.props.content
});
}
/**
* render
* @return {ReactElement} markup
*/
render() {
const fieldSettings = this.props.schema.FieldMappings;
const that = this;
const onChangeEvent = this.handleInputChange;
return (
<Row>
<form style={styles.container} onSubmit={(e) => {
e.preventDefault();
this.props.onSubmit(this.props.content.Path, this.props.type, this.state.content.GetFields())
this.props.history.goBack()
}
}>
<h4>Create new {this.props.schema.Schema.DisplayName}</h4>
{
fieldSettings.map(function (e, i) {
return (<Col
s={12}
m={fieldSettings[i].ControlType.name === 'RichTextEditor' ? 12 : 6}
l={fieldSettings[i].ControlType.name === 'RichTextEditor' ? 12 : 6}
key={fieldSettings[i].ClientSettings.name}>
{
React.createElement(
fieldSettings[i].ControlType,
{
...fieldSettings[i].ClientSettings,
'onChange': onChangeEvent,
'data-actionName': 'new'
})
}
</Col>)
})
}
<Col s={12} m={12} l={12} style={styles.buttonContainer}>
<Button waves='light' type='submit'>Submit</Button>
<Button waves='light' onClick={this.handleCancel}>Cancel</Button>
</Col >
</form>
</Row>
)
}
} |