semantic-ui-react#Input JavaScript Examples

render(){
        return(
            <Layout>
                <Link route={`/campaigns/${this.props.address}/requests`}>
                    <a>Back</a>
                </Link>

                <h3>Create a New Request</h3>
                <Form onSubmit={this.onSubmit} error={!!this.state.errorMessage}>
                    <Form.Field>
                        <label>Description</label>
                        <Input
                            value={this.state.description}
                            onChange={event=>this.setState({ description : event.target.value})}
                        />
                    </Form.Field>
                    <Form.Field>
                        <label>Value in ether</label>
                        <Input
                            value={this.state.value}
                            onChange={event=>this.setState({ value : event.target.value})}
                        />
                    </Form.Field>
                    <Form.Field>
                        <label>Recipient</label>
                        <Input 
                            value={this.state.recipient}
                            onChange={event=>this.setState({ recipient : event.target.value})}
                        />
                    </Form.Field>
                    <Message error header="Oops!" content={this.state.errorMessage}/>
                    <Button primary loading={this.state.loading}>Create!</Button>
                </Form>
            </Layout>
        );
    }

export default function ContactForm() {
  const name = useFormInput("");
  const email = useFormInput("");
  // eslint-disable-next-line no-unused-vars
  const [state, dispatch] = useContext(ContactContext);

  const onSubmit = () => {
    dispatch({
      type: "ADD_CONTACT",
      payload: { id: _.uniqueId(10), name: name.value, email: email.value }
    })
    // Reset Form
    name.onReset();
    email.onReset();
  };

  return (
    <Segment basic>
      <Form onSubmit={onSubmit}>
        <Form.Group widths="3">
          <Form.Field width={6}>
            <Input placeholder="Enter Name" {...name} required />
          </Form.Field>
          <Form.Field width={6}>
            <Input placeholder="Enter Email" {...email} type="email" required />
          </Form.Field>
          <Form.Field width={4}>
            <Button fluid primary>
              New Contact
            </Button>
          </Form.Field>
        </Form.Group>
      </Form>
    </Segment>
  );
}

render() {
    let data;
    if (this.state.items === '') {
      data = <p></p>;
    } 
    else {
      data = customerDataTable(this.state.items);
    }  

    return (
      <div>
        <Input
          action={{
            icon: "search",
            onClick: () => this.handleClick()
          }}
          defaultValue={this.state.phonenumber}
          onChange={this.handleInputChange}
          placeholder="+447123456789"
        />
        {data}
      </div>
    );
  }

Search = ({ search, setSearch, isDarkMode }) => {
  const handleSearch = (e) => {
    setSearch(e.target.value);
  };

  return (
    <div className="search-card">
      <Input
        className={isDarkMode ? 'dark-mode-input' : ''}
        fluid
        size="large"
        type="text"
        value={search}
        onChange={handleSearch}
        placeholder="Search for contact name or profile link"
        icon={{ name: 'search', color: 'teal' }}
        iconPosition="left"
        action={
          search !== '' && {
            color: 'teal',
            icon: 'close',
            onClick: () => setSearch(''),
          }
        }
      />
    </div>
  );
}

SignForm = () => {
   return <Form>
    <Form.Field>
      <Input icon='user' iconPosition='left' placeholder='From Account' />
    </Form.Field>
    <Form.Field>
      <Input icon='user' iconPosition='left' placeholder='To Account' />
    </Form.Field>
    <Form.Field>
      <Input icon='money bill alternate' iconPosition='left' placeholder='Amount in microAlgos' />
    </Form.Field>
    <Form.Field>
      <Input icon='sticky note outline' iconPosition='left' placeholder='Enter Note' />
    </Form.Field>

    <Button primary={true} type='submit'>Submit</Button>
  </Form>
}

render(){
        return(
            <Form onSubmit={this.onSubmit} error={!!this.state.errorMessage}>
                <Form.Field>
                    <label>Amount to Contribute</label>
                    <Input 
                        label="ether" 
                        labelPosition="right" 
                        value={this.state.value}
                        onChange = {event => this.setState ( { value : event.target.value })}
                    />
                </Form.Field>
                
                <Message error header="Oops!" content={this.state.errorMessage} />

                <Button loading={this.state.loading} primary>Contribute!</Button>
            </Form>
        );
    }

render(){
        return (
            <Layout>
                <h3>Create a Campaign</h3>
                <Grid>
                    <Grid.Column width={6}>
                        <Form onSubmit={this.onSubmit} error={!!this.state.errorMessage}>
                            <Form.Field>
                                <label>Minimum Contribution</label>
                                <Input 
                                    label="wei" 
                                    labelPosition="right"
                                    value={this.state.minimumContribution}
                                    onChange = {event => this.setState ( { minimumContribution : event.target.value })}
                                />
                            </Form.Field>

                            <Message error header="Oops!" content={this.state.errorMessage} />

                            <Button loading={this.state.loading} primary>Create!</Button>
                        </Form>
                    </Grid.Column>
                </Grid>
            </Layout>
        );
    }

Search = () => {
  const search = useAppSelector(getSearch)
  const dispatch = useAppDispatch()
  const [searchText, setSearchText] = useState(search)

  const dispatchSetSearch = value => {
    dispatch(setSearch(value))
  }

  const debouncedDispatchSetSearch = useMemo(
    () => debounce(dispatchSetSearch, 200),
    []
  )

  const handleChange = ({ target: { value } }) => {
    setSearchText(value)
    debouncedDispatchSetSearch(value)
  }

  return (
    <div className="search-search">
      <Input icon placeholder="Search">
        <input value={searchText} onChange={handleChange.bind(this)} />
        <Icon name="search" />
      </Input>
    </div>
  )
}

render() {
        return (
            <Input
                action={{
                    color: 'blue',
                    labelPosition: 'right',
                    icon: 'search',
                    content: 'Search',
                    onClick: () => this.handleSearchClick()
                }}
                fluid
                icon='search'
                iconPosition='left'
                placeholder='Search result by reqCIO...'
                name='id'
                loading={this.props.loading}
                value={this.state.id}
                onChange={this.handleChange}
            />
        )
    }

render() {
    const {
      className: parentClass,
      onKeyPressHandler: parentKeyPressHandler,
      onSearchHandler,
      onPasteHandler,
      onChangeHandler,
      placeholder,
      ref,
      responsiveAutofocus,
      ...rest
    } = this.props;
    const { currentValue } = this.state;
    return (
      <Input
        action={{
          icon: 'search',
          onClick: () => onSearchHandler(currentValue),
        }}
        onChange={(event, { value }) => {
          this.setState({ currentValue: value });
          onChangeHandler && onChangeHandler(value);
        }}
        value={currentValue}
        onKeyPress={parentKeyPressHandler || this.onKeyPressHandler}
        onPaste={onPasteHandler || this.onPasteHandler}
        fluid
        size="big"
        placeholder={placeholder}
        className={`${parentClass} ils-searchbar`}
        ref={this.inputRef}
        {...rest}
      />
    );
  }

/**
   * render - return all the home page objects to be rendered.
   */
  render() {
    const { userInput } = this.state;

    return (
      <Grid celled className='search-grid'>

        <Grid.Row className='matches-grid-row'>
          <Grid.Column width={16}>

            <Card className='chatbot-container'>
              <Card.Content className='dialog-header'>
                <Card.Header>Document Search ChatBot</Card.Header>
              </Card.Content>
              <Card.Content>
                {this.getListItems()}
              </Card.Content>
              <Input
                icon='compose'
                iconPosition='left'
                value={userInput}
                placeholder='Enter response......'
                onKeyPress={this.handleKeyPress.bind(this)}
                onChange={this.handleOnChange.bind(this)}
              />
            </Card>

          </Grid.Column>
        </Grid.Row>

      </Grid>
    );
  }

render() {
    const { clientId } = this.props;
    document.title = `${clientId} - VideoCall`;
    return (
      <div className="container main-window">
        <div>

        </div>
        <div className='callAction_btn'>
          <Input placeholder='Who are you looking for'
          value={ this.state.friendID}
          onChange={event => this.setState({friendID: event.target.value})}
          />

          <div>
            <Button
              basic color='green'
              className="btn-action fa fa-video-camera"
              onClick={this.callWithVideo(true)}
            >
              Call
              <span className="btn_span"></span>
              <Icon name='microphone' />
              <Icon name='camera' />
            </Button>

          </div>
        </div>
      </div>
    );
  }

function LocationDataURLViewChild({ __id, locationUrl }) {
  const { updateLocationACL } = useLocationACLSubscribe(__id, locationUrl);
  const aclStatus = useRecoilValue(locationACLStatusState(__id));
  const isLoading = aclStatus === 'loading';

  const refInput = useRef(null);

  useEffect(() => {
    updateLocationACL();
  }, []);

  const onClick = useCallback(() => {
    refInput.current.select();
    document.execCommand('copy');
  }, []);

  return (
    <Form.Field disabled={isLoading}>
      <label>This location is set as `{aclStatus}`</label>
      <Input
        fluid
        disabled={aclStatus === 'private'}
        ref={refInput}
        value={locationUrl}
        action={{
          color: 'teal',
          icon: 'copy',
          labelPosition: 'right',
          content: 'Copy',
          onClick: onClick,
        }}
      />
    </Form.Field>
  );
}

render() {
    const { buttonText, cancelText, content, header, isLoading } = this.props;
    const { open, value, showPopup } = this.state;
    return (
      <Modal
        size="small"
        trigger={
          <Button
            primary
            fluid
            content={buttonText}
            onClick={this.show}
            loading={isLoading}
            disabled={isLoading}
          />
        }
        open={open}
        onClose={this.hide}
      >
        <Header content={header} />
        <Modal.Content>
          <p>{content}</p>
          <Form onSubmit={this.cancel}>
            <Input
              focus
              fluid
              placeholder="Enter a reason..."
              onChange={this.handleOnChange}
              ref={this.updateInputRef}
              value={value}
            />
          </Form>
          <Popup
            context={this.inputRef}
            content="Please specify a reason."
            position="bottom left"
            open={showPopup}
          />
        </Modal.Content>
        <Modal.Actions>
          <Button secondary onClick={this.hide}>
            Back
          </Button>
          <Button color="red" onClick={this.cancel}>
            <Icon name="remove" /> {cancelText}
          </Button>
        </Modal.Actions>
      </Modal>
    );
  }

render() {
    const { disabled, documentDetails, relationType, relations } = this.props;
    const { isLoading, note } = this.state;
    return (
      <RelationModal
        disabled={disabled}
        triggerButtonContent="Add relation"
        modalHeader="Create new relation"
        isLoading={isLoading}
        relationType={relationType}
        referrerRecord={documentDetails}
        extraRelationField={{
          field: {
            note: note,
          },
          options: {
            isValid: !_isEmpty(note),
          },
        }}
      >
        <Modal.Content>
          <Container textAlign="left">
            Select a document to create a new relation.
            <Form>
              <Form.Group>
                <Container className="spaced">
                  <RelationSelector
                    existingRelations={relations.other}
                    mode="single"
                    optionsQuery={documentApi.list}
                    resultRenderer={this.selectResultRender}
                    referrerRecordPid={documentDetails.metadata.pid}
                  />
                </Container>
              </Form.Group>
              Note describing the relation
              <br /> <br />
              <Form.Field required inline key="note">
                <label>Note</label>
                <Input
                  name="note"
                  onChange={(e, { value }) => this.setState({ note: value })}
                />
              </Form.Field>
            </Form>
          </Container>
          <Container textAlign="center">
            <Divider horizontal> Summary </Divider>
            <RelationSummary
              currentReferrer={documentDetails}
              renderSelections={() => <SingleSelection />}
              relationDescription={
                <>
                  <Icon name="arrows alternate horizontal" />
                  <br />
                  is (a) <Label color="blue">{note || '...'} </Label> of
                </>
              }
            />
          </Container>
        </Modal.Content>
      </RelationModal>
    );
  }

render() {
    const { disabled, recordDetails, relationType, relations } = this.props;
    const { isLoading, volume } = this.state;
    return (
      <RelationModal
        disabled={disabled}
        modalHeader="Attach document to a serial"
        triggerButtonContent="Add to a serial"
        isLoading={isLoading}
        relationType={relationType}
        referrerRecord={recordDetails}
        extraRelationField={{ field: { volume: volume } }}
      >
        <Modal.Content>
          <Container textAlign="left">
            Select the serial to attach this document to it.
            <Form>
              <Form.Group>
                <Container className="spaced">
                  <RelationSelector
                    mode="single"
                    existingRelations={relations.serial || {}}
                    optionsQuery={seriesApi.serials}
                    resultRenderer={this.selectResultRender}
                    referrerRecordPid={recordDetails.metadata.pid}
                  />
                </Container>
              </Form.Group>
              Provide volume index (optional)
              <br /> <br />
              <Form.Field inline key="volume">
                <label>Volume index</label>
                <Input
                  name="volume"
                  type="number"
                  onChange={(e, { value }) => this.setState({ volume: value })}
                />
              </Form.Field>
            </Form>
          </Container>
          <Container textAlign="center">
            <Divider horizontal> Summary </Divider>
            <RelationSummary
              currentReferrer={recordDetails}
              renderSelections={() => <SingleSelection />}
              relationDescription={
                <>
                  <Icon size="large" name="arrow right" />
                  <br />
                  is{' '}
                  <Label color="blue">
                    volume {volume && <Label.Detail>{volume}</Label.Detail>}{' '}
                  </Label>{' '}
                  of
                </>
              }
            />
          </Container>
        </Modal.Content>
      </RelationModal>
    );
  }

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>
  )
}

export default function ContactForm() {
  // eslint-disable-next-line no-unused-vars
  const [state, dispatch] = useContext(ContactContext);

  let defaultName = "";
  let defaultEmail = "";
  let doCreate = true;

  if (state.selectedId) {
    const defaultContact = state.contacts.filter(
      (item) => item.id === state.selectedId
    );
    defaultName = defaultContact[0].name;
    defaultEmail = defaultContact[0].email;
    doCreate = false;
  }

  let name = useFormInput(defaultName);
  let email = useFormInput(defaultEmail);

  useEffect(() => {
    name._setVal(defaultName);
    email._setVal(defaultEmail);
  }, [state.selectedId]);

  // eslint-disable-next-line no-unused-vars
  const { _setVal: setN, ...validName } = name;
  // eslint-disable-next-line no-unused-vars
  const { _setVal: setE, ...validEmail } = email;

  const onSubmit = () => {
    let actionType = "ADD_CONTACT";
    if (!doCreate) {
      actionType = "UPDATE_CONTACT";
    }
    const id = state.selectedId ? state.selectedId : _.uniqueId(10);
    dispatch({
      type: actionType,
      payload: { id, name: name.value, email: email.value },
    });
    // Reset Form
    name.onReset();
    email.onReset();
  };

  return (
    <Segment basic>
      <Form onSubmit={onSubmit}>
        <Form.Group widths="3">
          <Form.Field width={6}>
            <Input placeholder="Enter Name" {...validName} required />
          </Form.Field>
          <Form.Field width={6}>
            <Input
              placeholder="Enter Email"
              {...validEmail}
              type="email"
              required
            />
          </Form.Field>
          <Form.Field width={4}>
            <Button fluid primary>
              {state.selectedId ? "Update Contact" : "New Contact"}
            </Button>
          </Form.Field>
        </Form.Group>
      </Form>
    </Segment>
  );
}

render() {
    const { disabled, documentDetails, relationType, relations } = this.props;
    const { isLoading, volume } = this.state;
    return (
      <RelationModal
        disabled={disabled}
        modalHeader="Attach document to a multipart monograph"
        triggerButtonContent="Attach multipart"
        isLoading={isLoading}
        relationType={relationType}
        referrerRecord={documentDetails}
        extraRelationField={{ field: { volume: volume } }}
      >
        <Modal.Content>
          <Container textAlign="left">
            Select a multipart monograph to attach this document to it.
            <Form>
              <Form.Group>
                <Container className="spaced">
                  <RelationSelector
                    mode="single"
                    existingRelations={relations.multipart_monograph}
                    optionsQuery={seriesApi.multipartMonographs}
                    resultRenderer={this.selectResultRender}
                    referrerRecordPid={documentDetails.metadata.pid}
                  />
                </Container>
              </Form.Group>
              Provide volume index (optional)
              <br />
              <br />
              <Form.Field inline key="volume">
                <label>Volume index</label>
                <Input
                  name="volume"
                  onChange={(e, { value }) => this.setState({ volume: value })}
                />
              </Form.Field>
            </Form>
          </Container>
          <Container textAlign="center">
            <Divider horizontal> Summary </Divider>
            <RelationSummary
              currentReferrer={documentDetails}
              renderSelections={() => <SingleSelection />}
              relationDescription={
                <>
                  <Icon size="large" name="arrow right" />
                  <br />
                  is{' '}
                  <Label color="blue">
                    volume {volume && <Label.Detail>{volume}</Label.Detail>}{' '}
                  </Label>{' '}
                  of
                </>
              }
            />
          </Container>
        </Modal.Content>
      </RelationModal>
    );
  }

render() {
    const { disabled, seriesDetails, relationType, relations } = this.props;
    const { isLoading, note } = this.state;
    const fetchOptionsQuery =
      seriesDetails.metadata.mode_of_issuance === 'SERIAL'
        ? seriesApi.serials
        : seriesApi.multipartMonographs;
    return (
      <RelationModal
        disabled={disabled}
        triggerButtonContent="Add relation"
        modalHeader="Create new relation"
        isLoading={isLoading}
        relationType={relationType}
        referrerRecord={seriesDetails}
        extraRelationField={{
          field: {
            note: note,
          },
          options: {
            isValid: !_isEmpty(note),
          },
        }}
      >
        <Modal.Content>
          <Container textAlign="left">
            Select a series to create a new relation.
            <Form>
              <Form.Group>
                <Container className="spaced">
                  <RelationSelector
                    existingRelations={relations.other}
                    mode="single"
                    optionsQuery={fetchOptionsQuery}
                    resultRenderer={this.selectResultRender}
                    referrerRecordPid={seriesDetails.metadata.pid}
                  />
                </Container>
              </Form.Group>
              Note describing the relation
              <br /> <br />
              <Form.Field required inline key="note">
                <label>Note</label>
                <Input
                  name="note"
                  onChange={(e, { value }) => this.setState({ note: value })}
                />
              </Form.Field>
            </Form>
          </Container>
          <Container textAlign="center">
            <Divider horizontal> Summary </Divider>
            <RelationSummary
              currentReferrer={seriesDetails}
              renderSelections={() => <SingleSelection />}
              relationDescription={
                <>
                  <Icon name="arrows alternate horizontal" />
                  <br />
                  is (a) <Label color="blue">{note || '...'} </Label> of
                </>
              }
            />
          </Container>
        </Modal.Content>
      </RelationModal>
    );
  }

EmailInput = styled(Input)`
  width: 100%;
`

render() {
    const filteredCheckboxes = this.getFilteredOptionsIndexes().map(index => {
      return (
        <Grid.Column>
          <Checkbox
            checked={this.isIndexSelected(index)}
            label={this.getCheckboxLabel(index)}
            value={this.isIndexSelected(index)}
            onChange={this.toggleChecked(index)}
          />
        </Grid.Column>
      )
    })

    return (
      <div className="filter-modal">
        <Modal
          onClose={this.toggleModal(false)}
          onOpen={this.toggleModal(true)}
          open={this.state.open}
          trigger={this.props.trigger}
        >
          <Modal.Header>Filter by {this.getDisplayableName()}</Modal.Header>
          <Modal.Content className="filter-modal-content" scrolling>
            <Input
              size="small"
              icon="search"
              className="filter-modal-content-search"
              value={this.state.searchQuery}
              onChange={this.handleSearchQuery.bind(this)}
              placeholder={`Search ${this.props.name}`}
            />
            <div className="filter-modal-content-filters">
              <Grid stackable columns={3}>
                {filteredCheckboxes}
              </Grid>
            </div>
          </Modal.Content>
          <Modal.Actions>
            <Button
              content="Done"
              labelPosition="right"
              icon="checkmark"
              onClick={this.toggleModal(false)}
              color="orange"
            />
          </Modal.Actions>
        </Modal>
      </div>
    )
  }

function App() {
  const [value, setValue] = useState("");

  const handleClick = () => {
    if(value!== ""){
      axios.post("https://sentiment-analysis-ashutosh.herokuapp.com//sentiment", {"sentence": value})
      .then((response) => {
        console.log(response);
        document.getElementsByClassName("sentiment-text")[0].innerText = response["data"]["sentiment"];
      })
      .catch((err) => {
        console.log(err);
        document.getElementsByClassName("sentiment-text")[0].innerText = "Error"
      });
    }
  }

  const handleValueChange = (e) => {
    setValue(e.target.value);
  }

  return (
    <div style={{height:"100vh", width:"100vw", alignItems:"center", justifyContent:"center", textAlign:"center", backgroundImage: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)", display:"table-cell", verticalAlign: "middle", horizontalAlign:"middle"}}>
        <Input transparent onChange={handleValueChange} action={{color: 'teal', onClick: () => handleClick(), content: "GET SENTIMENT"}} placeholder='Write...' style={{border:"1px solid #fff", padding:"10px", borderRadius: "5px"}} />
        <p className="sentiment-text" style={{marginTop: "20px", color: "white"}}>No Sentiment</p>
    </div>
  );
}

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 Word Weight
                    </Button>
                }
            >
                <Header as='h2' color='blue' textAlign='center'>
                    Add a new Word Weight
                </Header>
                <Modal.Content>
                    <Form.Field
                        fluid
                        control={Input}
                        name='word'
                        label='Medical Word'
                        value={this.state.word}
                        onChange={this.handleChange}
                    />
                    <Form.Dropdown
                        fluid
                        selection
                        name='weight'
                        label='Word Weight'
                        options={[
                            { key: 'e', text: '', value: '' },
                            { key: 'A', text: 'A', value: 'A' },
                            { key: 'B', text: 'B', value: 'B' },
                            { key: 'C', text: 'C', value: 'C' },
                            { key: 'D', text: 'D', value: 'D' },
                        ]}
                        onChange={this.handleSelectChange}
                    />
                </Modal.Content>
                <Modal.Actions>
                    <Button
                        color='black'
                        content='Cancel'
                        onClick={() => this.setState(initialState)}
                    />
                    <Button
                        type='submit'
                        content="Add Word Weight"
                        color='blue'
                        disabled={!this.state.word || !this.state.weight}
                    />
                </Modal.Actions>
            </Modal>
        )
    }

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 Synonym
                </Header>
                <Modal.Content>
                    <Form.Field
                        fluid
                        control={Input}
                        name='word'
                        label='Word / Phrase'
                        value={this.state.word}
                        onChange={this.handleChange}
                    />
                    <Form.Field
                        fluid
                        control={Input}
                        name='synonym'
                        label='Assigned Synonyms'
                        placeholder='Input your synonym here and press Enter to add it!'
                        value={this.state.synonym}
                        onChange={this.handleChange}
                        onKeyPress={e => {if (e.key === 'Enter') e.preventDefault();}}
                        onKeyUp={this.addSynonymTag}
                    />
                    <Container>
                        {this.state.synonyms.map((syn, index) =>
                            <Label as='a' color='blue'>
                                {syn}
                                <Icon name='delete' link onClick={() => {this.removeSynonymTag(index);}}/>
                            </Label>
                        )}
                    </Container>
                </Modal.Content>
                <Modal.Actions>
                    <Button
                        color='black'
                        content='Cancel'
                        onClick={() => this.setState({open: false})}
                    />
                    <Button
                        type='submit'
                        content="Modify Synonym"
                        color='blue'
                        disabled={!this.state.word || this.state.synonyms.length === 0}
                    />
                </Modal.Actions>
            </Modal>
        )
    }

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 Synonym
                    </Button>
                }
            >
                <Header as='h2' color='blue' textAlign='center'>
                    Add a new Synonym Relation
                </Header>
                <Modal.Content>
                    <Form.Field
                        fluid
                        control={Input}
                        name='word'
                        label='Word / Phrase'
                        value={this.state.word}
                        onChange={this.handleChange}
                    />
                    <Form.Field
                        // action={{
                        //     color: 'blue',
                        //     labelPosition: 'right',
                        //     icon: 'add',
                        //     content: 'Add',
                        //     onClick: () => this.addSynonymTag()
                        // }}
                        fluid
                        control={Input}
                        name='synonym'
                        label='Assigned Synonyms'
                        placeholder='Input your synonym here and press Enter to add it!'
                        value={this.state.synonym}
                        onChange={this.handleChange}
                        onKeyPress={e => {if (e.key === 'Enter') e.preventDefault();}}
                        onKeyUp={this.addSynonymTag}
                    />
                    <Container>
                        {this.state.synonyms.map((syn, index) =>
                            <Label as='a' color='blue'>
                                {syn}
                                <Icon name='delete' link onClick={() => {this.removeSynonymTag(index);}}/>
                            </Label>
                        )}
                    </Container>
                </Modal.Content>
                <Modal.Actions>
                    <Button
                        color='black'
                        content='Cancel'
                        onClick={() => this.setState(initialState)}
                    />
                    <Button
                        type='submit'
                        content="Add Synonym"
                        color='blue'
                        disabled={!this.state.word || this.state.synonym.length === 0}
                    />
                </Modal.Actions>
            </Modal>
        )
    }

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 Word
                    </Button>
                }
            >
                <Header as='h2' color='blue' textAlign='center'>
                    Add a word into the Spellcheck Dictionary
                </Header>
                <Modal.Content>
                    <Form.Field
                        fluid
                        control={Input}
                        name='word'
                        label='Word'
                        value={this.state.word}
                        onChange={this.handleChange}
                    />
                </Modal.Content>
                <Modal.Actions>
                    <Button
                        color='black'
                        content='Cancel'
                        onClick={() => this.setState(initialState)}
                    />
                    <Button
                        type='submit'
                        content="Add Word"
                        color='blue'
                        disabled={!this.state.word}
                    />
                </Modal.Actions>
            </Modal>
        )
    }

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 Exam
                    </Button>
                }
            >
                <Header as='h2' color='blue' textAlign='center'>
                    Add a Specialty Exam for Result Tags
                </Header>
                <Modal.Content>
                    <Form.Field
                        fluid
                        control={Input}
                        name='exam'
                        label='Specialty Exam'
                        value={this.state.exam}
                        onChange={this.handleChange}
                    />
                </Modal.Content>
                <Modal.Actions>
                    <Button
                        color='black'
                        content='Cancel'
                        onClick={() => this.setState(initialState)}
                    />
                    <Button
                        type='submit'
                        content="Add Specialty Exam"
                        color='blue'
                        disabled={!this.state.exam}
                    />
                </Modal.Actions>
            </Modal>
        )
    }

render() {
    let filteredCheckboxes = this.getFilteredOptionsIndexes().map(index => {
      return (
        <tr>
          <td>
            <Checkbox
              checked={this.isIndexSelected(index)}
              label={this.getCheckboxLabel(index)}
              value={this.isIndexSelected(index)}
              onChange={this.toggleChecked(index)}
            />
          </td>
        </tr>
      )
    })

    const max_options_displayed = Math.max(
      this.getOptionIndexes(true).length,
      this.DEFAULT_OPTIONS_DISPLAYED
    )
    const num_options_displayed = Math.min(
      max_options_displayed,
      filteredCheckboxes.length
    )
    filteredCheckboxes = filteredCheckboxes.slice(0, num_options_displayed)
    const displayModalOption =
      this.getAllOptions().length > num_options_displayed

    return (
      <div className="filter-filter">
        <div className="filter-topic">
          <u>{this.getDisplayableName()}</u>
        </div>
        <div className="filter-search">
          <Input
            size="mini"
            icon="search"
            value={this.state.searchQuery}
            placeholder={`Search ${this.props.name}`}
            onChange={this.handleSearchQuery.bind(this)}
          />
        </div>
        <div className="filter-boxes">
          <center>
            <div className="filter-boxes-container">
              <table>
                <tbody>{filteredCheckboxes}</tbody>
              </table>
            </div>
          </center>
        </div>
        <div style={displayModalOption ? {} : { display: "none" }}>
          <FilterModal
            name={this.props.name}
            choices={this.props.choices}
            sortBy={this.props.sortBy}
            order={this.props.order}
            trigger={<div className="filter-view-more">View all</div>}
          />
        </div>
        <div style={this.props.showDivider ? {} : { display: "none" }}>
          <center>
            <Divider className="filter-divider" />
          </center>
        </div>
      </div>
    )
  }