render()

in frontend/src/js/components/workspace/CreateWorkspaceModal.tsx [44:108]

• 61 lines of code
• 2 McCabe index (conditional complexity)

    render() {
        const tagExplain = 'Tags are used to quickly indicate if a document is in a workspace you follow';

        return (
            <form className='form' onSubmit={this.onSubmit}>
                <h2>New Workspace</h2>
                <div className='form__row'>
                    <label className='form__label' htmlFor='#name'>
                        Name
                    </label>

                    <input
                        name='name'
                        className='form__field'
                        type='text'
                        autoFocus
                        placeholder='Name'
                        autoComplete="off"
                        onChange={this.handleChange}
                        value={this.state.name}/>
                </div>

                <div className='form__row'>
                    <WorkspacePublicInfoIcon />
                    <Checkbox
                        selected={this.state.isPublic}
                        onClick={(e) => this.setState({isPublic: !this.state.isPublic})}
                    >
                        Public
                    </Checkbox>
                </div>

                <div className='form__row'>
                    <label className='form__label' htmlFor='#tagColor'>
                        Tag Colour
                        <InfoIcon className='info-icon' data-tip={tagExplain} data-effect='solid'/>
                    </label>
                    <Select
                        name='tagColor'
                        value={this.state.tagColor}
                        className='form__select'
                        options={[
                            { value: 'grey', label: 'Grey'},
                            { value: 'red', label: 'Red'},
                            { value: 'green', label: 'Green'},
                            { value: 'blue', label: 'Blue'},
                            { value: 'orange', label: 'Orange'},
                            { value: 'purple', label: 'Purple'}
                        ]}
                        valueComponent={ColorTagValue}
                        optionComponent={ColorTagOption}
                        onChange={(o: ValueType<{ value: string, label: string }, false>) => this.setState({tagColor: o})}
                        clearable={false}
                        searchable={false}
                    />
                </div>
                {this.state.isPublic ? <WorkspacePublicMessage /> : false}
                <button
                    className='btn'
                    type='submit'
                    disabled={!this.state.name}>Create</button>
                <ReactTooltip insecure={false} html={false}/>
            </form>
        );
    }