frontend/src/components/widget/Labels/Labels.js
/**
   * @method render
   * @summary ToDo: Describe the method
   * @todo Write the documentation
   */
@method render
@summary ToDo: Describe the method
@todo Write the documentation
@method render @summary ToDo : Describe the method @todo Write the documentation
render() {
    const { focused, suggestion, cursor } = this.state;
    const { className, selected, tabIndex, readonly } = this.props;
    const suggestions = this.state.suggestions.filter(this.unusedSuggestions());
    const labels = selected
      .sort((a, b) => a.caption.localeCompare(b.caption))
      .map((item) => (
        <Label
          key={item.key}
          label={item}
          readonly={readonly}
          onClick={this.handleLabelClick}
          onRemove={this.handleLabelRemove}
        />
      ));
    labels.splice(
      cursor % (selected.length + 1),
      0,
      <span
        key="input"
        className="labels-input"
        ref={(ref) => {
          this.input = ref;
        }}
        contentEditable
        onKeyUp={this.handleKeyUp}
        onKeyDown={this.handleKeyDown}
        tabIndex={tabIndex}
      />
    );
    return (
      <TetherComponent
        attachment="top left"
        targetAttachment="bottom left"
        constraints={[
          {
            to: 'scrollParent',
          },
          {
            to: 'window',
            pin: ['bottom'],
          },
        ]}
      >
        <span
          ref={(ref) => {
            this.wrapper = ref;
          }}
          className={`${className} labels`}
          onClick={this.handleClick}
          onFocus={this.handleFocus}
          onBlur={this.handleBlur}
        >
          <span className="labels-wrap">{labels}</span>
        </span>
        {focused && (
          <SelectionDropdown
            options={suggestions}
            empty="There are no labels available"
            selected={suggestion}
            width={this.wrapper.offsetWidth}
            onChange={this.handleTemporarySelection}
            onSelect={this.handleSuggestionAdd}
            onCancel={this.handleCancel}
          />
        )}
      </TetherComponent>
    );
  }
render ( ) { const { focused , suggestion , cursor } = this . state ; const { className , selected , tabIndex , readonly } = this . props ; const suggestions = this . state . suggestions . filter ( this . unusedSuggestions ( ) ) ; const labels = selected . sort ( ( a , b ) => a . caption . localeCompare ( b . caption ) ) . map ( ( item ) => ( < Label key = { item . key } label = { item } readonly = { readonly } onClick = { this . handleLabelClick } onRemove = { this . handleLabelRemove } / > ) ) ; labels . splice ( cursor % ( selected . length + 1 ) , 0 , < span key = "input" className = "labels-input" ref = { ( ref ) => { this . input = ref ; } } contentEditable onKeyUp = { this . handleKeyUp } onKeyDown = { this . handleKeyDown } tabIndex = { tabIndex } / > ) ; return ( < TetherComponent attachment = "top left" targetAttachment = "bottom left" constraints = { [ { to : 'scrollParent' , } , { to : 'window' , pin : [ 'bottom' ] , } , ] } > < span ref = { ( ref ) => { this . wrapper = ref ; } } className = { ` ${ className } ` } onClick = { this . handleClick } onFocus = { this . handleFocus } onBlur = { this . handleBlur } > < span className = "labels-wrap" > { labels } < / span > < / span > { focused && ( < SelectionDropdown options = { suggestions } empty = "There are no labels available" selected = { suggestion } width = { this . wrapper . offsetWidth } onChange = { this . handleTemporarySelection } onSelect = { this . handleSuggestionAdd } onCancel = { this . handleCancel } / > ) } < / TetherComponent > ) ; }
@method render
 @summary ToDo: Describe the method
 @todo Write the documentation
@method render @summary ToDo : Describe the method @todo Write the documentation