semantic-ui-react#TextArea JavaScript Examples
The following examples show how to use
semantic-ui-react#TextArea.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: SynonymsForm.js From vch-mri with MIT License | 6 votes |
|
render() {
return (
<Grid textAlign='center' verticalAlign='middle'>
<Grid.Column style={{ maxWidth: 600 }}>
<Segment inverted color='blue'>
<Header as='h2' color='white' textAlign='center'>
Synonyms
</Header>
<p> Add words to the synonym dictionary! Synonym declarations must be formatted according to the PostgreSQL
thesaurus dictionary configuration file. In other words, each synonym must be declared in one line,
and must be formatted like this: </p>
<p> sample word(s) : indexed word(s) </p>
<Form inverted color='blue' loading={this.state.loading} onSubmit={this.handleSubmit}>
<Form.Field
fluid
control={TextArea}
rows='20'
name='fileContents'
value={this.state.fileContents}
onChange={this.handleChange}
/>
<Form.Button color='black' content='Submit'/>
</Form>
</Segment>
</Grid.Column>
</Grid>
)
}
Example #2
| Source File: App.js From ReactCookbook-source with MIT License | 5 votes |
|
function App() {
const [author, setAuthor] = useState('')
const [text, setText] = useState('')
const [messages, setMessages] = useState([])
return (
<div className="App">
<Form>
<Form.Field>
<label htmlFor="author">Author</label>
<Input
value={author}
id="author"
onChange={(evt) => setAuthor(evt.target.value)}
/>
</Form.Field>
<Form.Field>
<label htmlFor="text">Message</label>
<TextArea
value={text}
id="text"
onChange={(evt) => setText(evt.target.value)}
/>
</Form.Field>
<Button
basic
onClick={() => {
setMessages((m) => [
{
icon: 'pencil',
date: new Date().toString(),
summary: author,
extraText: text,
},
...m,
])
setAuthor('')
setText('')
}}
>
Post
</Button>
</Form>
<Feed events={messages} />
</div>
)
}
Example #3
| Source File: BookingForm.js From vch-mri with MIT License | 4 votes |
|
render() {
return (
<Segment inverted color='blue'>
<Header as='h2' color='white' textAlign='center'>
Submit An MRI Booking
</Header>
<Form inverted color='blue' onSubmit={this.handleSubmit}>
<Form.Field
fluid
control={Input}
name='reqCIO'
label='reqCIO'
value={this.state.reqCIO}
onChange={this.handleChange}
/>
<DateInput
name="DOB"
value={this.state.DOB}
dateFormat="YYYY-MM-DD"
label="Date of Birth (YYYY-MM-DD)"
iconPosition="left"
onChange={this.handleSelectChange}
/>
<Form.Group inline widths="equal">
<Form.Field
fluid
control={Input}
name='height'
label='Height'
value={this.state.height}
onChange={this.handleChange}
/>
<Form.Dropdown
fluid
selection
name='inchcm'
label='Height Unit'
options={[
{ key: 'CM', text: 'Centimeters', value: 'CM' },
{ key: 'IN', text: 'Inches', value: 'IN' },
]}
onChange={this.handleSelectChange}
/>
<Form.Field
fluid
control={Input}
name='weight'
label='Weight'
value={this.state.weight}
onChange={this.handleChange}
/>
<Form.Dropdown
fluid
selection
name='kglbs'
label='Weight Unit'
options={[
{ key: 'KG', text: 'Kilograms', value: 'KG' },
{ key: 'LBS', text: 'Pounds', value: 'LBS' },
]}
onChange={this.handleSelectChange}
/>
</Form.Group>
<Form.Dropdown
fluid
selection
name='radiologistPriority'
label='Radiologist Priority'
options={priorityOptions}
onChange={this.handleSelectChange}
/>
<Form.Field
fluid
control={TextArea}
name='reasonForExam'
label='Reason for Exam'
value={this.state.reasonForExam}
placeholder='Please provide more details'
rows='6'
onChange={this.handleChange}
/>
<Form.Field
fluid
control={Input}
name='examRequested'
label='Exam Requested'
value={this.state.examRequested}
onChange={this.handleChange}
/>
<Form.Button fluid color='white' content='Submit'
disabled={!this.state.reqCIO || !this.state.DOB || !this.state.height || !this.state.inchcm
|| !this.state.weight || !this.state.kglbs || !this.state.radiologistPriority
|| !this.state.reasonForExam || !this.state.examRequested}>Submit</Form.Button>
</Form>
</Segment>
)
}
Example #4
| Source File: AddRuleForm.js From vch-mri with MIT License | 4 votes |
|
render() {
return (
<Modal
as={Form}
onSubmit={this.handleSubmit}
style={{ maxWidth: 500 }}
onClose={() => this.setState(initialState)}
onOpen={() => this.setState({open: true})}
open={this.state.open}
trigger={
<Button
floated='right'
icon
labelPosition='left'
primary
size='small'
>
<Icon name='add circle' /> Add Rule
</Button>
}
>
<Header as='h2' color='blue' textAlign='center'>
Add a new MRI Rule
</Header>
<Modal.Content>
<Form.Field
fluid
control={Input}
name='body_part'
label='Body Part'
value={this.state.body_part}
onChange={this.handleChange}
/>
<Form.Field
fluid
control={TextArea}
name='info'
label='Information'
value={this.state.info}
onChange={this.handleChange}
/>
<Form.Dropdown
fluid
selection
name='contrast'
label='Contrast'
options={[
{ key: 'e', text: '', value: '' },
{ key: 't', text: 'true', value: 't' },
{ key: 'f', text: 'false', value: 'f' },
]}
onChange={this.handleSelectChange}
/>
<Form.Dropdown
fluid
selection
name='priority'
label='Priority'
options={[
{ key: 'e', text: '', value: '' },
{ key: 'P1', text: 'P1', value: 'P1' },
{ key: 'P2', text: 'P2', value: 'P2' },
{ key: 'P3', text: 'P3', value: 'P3' },
{ key: 'P4', text: 'P4', value: 'P4' },
{ key: 'P5', text: 'P5', value: 'P5' },
{ key: 'Unidentified', text: 'Unidentified', value: 'Unidentified' },
]}
onChange={this.handleSelectChange}
/>
</Modal.Content>
<Modal.Actions>
<Button
color='black'
content='Cancel'
onClick={() => this.setState(initialState)}
/>
<Button
type='submit'
content="Add Rule"
color='blue'
disabled={!this.state.body_part || !this.state.info
|| !this.state.contrast || !this.state.priority}
/>
</Modal.Actions>
</Modal>
)
}
Example #5
| Source File: ModifyRuleForm.js From vch-mri with MIT License | 4 votes |
|
render() {
return (
<Modal
as={Form}
onSubmit={this.handleSubmit}
style={{ maxWidth: 500 }}
onClose={() => this.setState({open: false})}
onOpen={() => this.setState({open: true})}
open={this.state.open}
trigger={
<Button
icon size='tiny'
labelPosition='left'
>
<Icon name='edit' />
Modify
</Button>
}
>
<Header as='h2' color='blue' textAlign='center'>
Modify an Existing MRI Rule
</Header>
<Modal.Content>
<Form.Field
fluid
control={Input}
name='body_part'
label='Body Part'
value={this.state.body_part}
onChange={this.handleChange}
/>
<Form.Field
fluid
control={TextArea}
name='info'
label='Information'
value={this.state.info}
onChange={this.handleChange}
/>
<Form.Dropdown
fluid
selection
name='contrast'
label='Contrast'
value={this.state.contrast}
options={[
{ key: 'e', text: '', value: '' },
{ key: 't', text: 'true', value: 't' },
{ key: 'f', text: 'false', value: 'f' },
]}
onChange={this.handleSelectChange}
/>
<Form.Dropdown
fluid
selection
name='priority'
label='Priority'
value={this.state.priority}
options={[
{ key: 'e', text: '', value: '' },
{ key: 'P1', text: 'P1', value: 'P1' },
{ key: 'P2', text: 'P2', value: 'P2' },
{ key: 'P3', text: 'P3', value: 'P3' },
{ key: 'P4', text: 'P4', value: 'P4' },
{ key: 'P5', text: 'P5', value: 'P5' },
{ key: 'Unidentified', text: 'Unidentified', value: 'Unidentified' },
]}
onChange={this.handleSelectChange}
/>
</Modal.Content>
<Modal.Actions>
<Button
color='black'
content='Cancel'
onClick={() => this.setState({open: false})}
/>
<Button
type='submit'
content="Modify Rule"
color='blue'
disabled={!this.state.body_part || !this.state.info
|| !this.state.contrast || !this.state.priority}
/>
</Modal.Actions>
</Modal>
)
}
Example #6
| Source File: FormField.js From nextfeathers with Apache License 2.0 | 4 votes |
|
FormField = (props) => {
// console.log("PROPS", props);
const handleChange = (event, { name, value }) => {
if (props.updateInput) {
props.updateInput(name, value);
}
};
const handleRadioClick = (event) => {
const name = event.target.name;
const value = props.value === "Y" ? "N" : "Y";
props.updateInput(name, value);
};
const handleAddition = (event, { value, name }) => {
if (props.handleAddition) {
props.handleAddition(value, name);
}
};
const handleSearchChange = (event, search) => {
// console.log("DOSEARCH", search);
if (props.handleSearchChange) {
props.handleSearchChange(search.searchQuery);
}
};
const handleFocus = () => {
if (props.handleFocus) {
props.handleFocus();
}
};
const handleBlur = () => {
if (props.handleBlur) {
props.handleBlur();
}
};
const handleDropdownChange = (event, data) => {
const name = data.name;
const value = data.value;
props.updateInput(name, value);
};
const handleEditorChange = (value) => {
const name = props.name;
const valueget = value;
props.updateInput(name, valueget);
};
const handleUpload = (url) => {
if (props.autoGenerateFeatureImage) {
props.autoGenerateFeatureImage(url);
}
};
return (
<Form.Field>
<label>{props.label}</label>
{props.type === "text" && (
<Input
name={props.name}
value={props.value}
style={{ maxWidth: "100%" }}
onChange={handleChange}
onFocus={handleFocus}
onBlur={handleBlur}
/>
)}
{props.type === "textarea" && (
<TextArea
name={props.name}
value={props.value}
style={{ maxWidth: "100%", innerHeight: "300%" }}
onChange={handleChange}
/>
)}
{props.type === "radio" && (
<Radio
toggle
name={props.name}
checked={props.value === "Y"}
onClick={handleRadioClick}
/>
)}
{props.type === "dropdown" && (
<Dropdown
placeholder={props.placeholder || "Please choose"}
name={props.name}
selection
options={props.options}
onChange={handleChange}
/>
)}
{props.type === "dropdownMulti" && (
<Dropdown
placeholder={props.placeholder || "Please choose"}
name={props.name}
selection
search
options={props.options}
multiple
value={props.value ? props.value : []}
allowAdditions
onChange={handleDropdownChange}
onSearchChange={handleSearchChange}
onAddItem={handleAddition}
/>
)}
{props.type === "editor" && (
<RichTextEditor
key={props.postKey}
value={props.value}
onChange={handleEditorChange}
onUpload={handleUpload}
/>
)}
</Form.Field>
);
}
