/**
* @module ViewControls
*
*/ /** */
import * as React from 'react'
import { Content, ContentTypes } from 'sn-client-js'
import { Row, Button, Col } from 'react-materialize'
import { styles } from './EditViewStyles'
/**
* Interface for EditView properties
*/
interface IEditViewProps {
content,
schema,
history,
repository,
onSubmit: Function
}
/**
* View Control for editing a Content, works with a single Content and based on the ReactControlMapper
*
* Usage:
* ```html
* <EditView content={selectedContent} schema={schema} history={history} onSubmit={editSubmitClick} repository={repository} />
* ```
*/
export class EditView extends React.Component<IEditViewProps, { content, schema, saveableContent }> {
/**
* constructor
* @param {object} props
*/
constructor(props: any) {
super(props);
/**
* @type {object}
* @property {any} content selected Content
* @property {any} schema schema object of the selected Content's Content Type
* @property {any} saveableContent Content to store only the used fields. Will be used at saving.
*/
this.state = {
content: this.props.content,
schema: this.props.schema,
saveableContent: Content.Create(ContentTypes.Task, {
Id: this.props.content.Id
}, this.props.repository)
};
this.handleInputChange = this.handleInputChange.bind(this);
}
/**
* 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.state.saveableContent[name] = value;
this.setState({
content: this.props.content
});
}
/**
* eturns a value of an input
* @param {string} name name of the input
* @return {any} value of the input or null
*/
getFieldValue(name) {
if (this.props.content[name]) {
return this.props.content[name]
}
else {
return null
}
}
/**
* render
* @return {ReactElement} markup
*/
render() {
const fieldSettings = this.props.schema.FieldMappings;
const that = this;
return (
<Row>
<form style={styles.container} onSubmit={
(e) => {
e.preventDefault();
this.props.onSubmit(this.props.content.Id, this.props.content.Type, this.state.saveableContent.GetFields())
this.props.history.goBack()
}
}>
<h4>Edit {this.props.content.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,
'data-actionName': 'edit',
'data-fieldValue': that.getFieldValue(fieldSettings[i].ClientSettings.name),
onChange: that.handleInputChange
})
}
</Col>)
})
}
<Col s={12} m={12} l={12} style={styles.buttonContainer}>
<Button waves='light'>Submit</Button>
<Button waves='light'>Cancel</Button>
</Col >
</form>
</Row >
)
}
}
|