ted/recogito-client-core
ted
/
recogito-client-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simplified to function component

This commit is contained in:
Rainer Simon 2020-12-20 16:29:20 +01:00
parent 4e712cadbf
commit f186ff8109
1 changed files with 34 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/editor/widgets/comment/PurposeDropdown.jsx
View File

@ -1,20 +1,37 @@
import React, { Component } from 'preact/compat'; import React from 'preact/compat';
import Select from 'react-select'; import Select from 'react-select';
export const purposes = [{'value': 'assessing', 'label': 'Assessing'}, {'value': 'bookmarking', 'label': 'Bookmarking'}, {'value': 'classifying', 'label': 'Classifying'}, {'value': 'commenting', 'label': 'Commenting'}, {'value': 'describing', 'label': 'Describing'},{'value': 'editing', 'label': 'Editing'}, {'value': 'highlighting', 'label': 'Highlighting'},{'value': 'identifying', 'label': 'Identifying'},{'value': 'linking', 'label': 'Linking'},{'value': 'moderating', 'label': 'Moderating'},{'value': 'questioning', 'label': 'Questioning'},{'value': 'replying', 'label': 'Replying'}] export const purposes = [
{'value': 'assessing', 'label': 'Assessing'},
{'value': 'bookmarking', 'label': 'Bookmarking'},
{'value': 'classifying', 'label': 'Classifying'},
{'value': 'commenting', 'label': 'Commenting'},
{'value': 'describing', 'label': 'Describing'},
{'value': 'editing', 'label': 'Editing'},
{'value': 'highlighting', 'label': 'Highlighting'},
{'value': 'identifying', 'label': 'Identifying'},
{'value': 'linking', 'label': 'Linking'},
{'value': 'moderating', 'label': 'Moderating'},
{'value': 'questioning', 'label': 'Questioning'},
{'value': 'replying', 'label': 'Replying'}
]
export default class PurposeDropdown extends Component { const PurposeDropdown = props => {
render() {
const selectedOption = this.props.content ? {'value': this.props.content, 'label': this.props.content.charAt(0).toUpperCase() + this.props.content.slice(1) } : undefined; const selectedOption = this.props.content ?
return ( { 'value': this.props.content, 'label': this.props.content.charAt(0).toUpperCase() + this.props.content.slice(1) } : undefined;
<div class="r6o-purposedropdown">
<Select return (
value={selectedOption} <div class="r6o-purposedropdown">
onChange={this.props.onChange} <Select
options={purposes} value={selectedOption}
isDisabled={!this.props.editable} onChange={this.props.onChange}
/> options={purposes}
</div> isDisabled={!this.props.editable}
); />
} </div>
} );
}
export default PurposeDropdown;