All files / src/viewcontrols NewView.tsx

34.48% Statements 10/29
0% Branches 0/8
14.29% Functions 1/7
30.77% Lines 8/26
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121        1x                       1x 1x                                         1x                                       1x             1x                           1x                                                                                 1x
/**
 * @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>
        )
    }
}