Added controlled vocab dropdown to standard tag widget
This commit is contained in:
Rainer Simon
parent
e6e33158ab
commit
1c2a66f5fd
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useState, useEffect, useRef } from 'react'
|
||||
import { useCombobox } from 'downshift'
|
||||
|
||||
const RelationAutocomplete = props => {
|
||||
const Autocomplete = props => {
|
||||
|
||||
const element = useRef();
|
||||
|
||||
|
|
@ -33,7 +33,7 @@ const RelationAutocomplete = props => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div ref={element}>
|
||||
<div ref={element} className="r6o-autocomplete">
|
||||
<div {...getComboboxProps()}>
|
||||
<input
|
||||
{...getInputProps({ onKeyDown })}
|
||||
|
|
@ -58,4 +58,4 @@ const RelationAutocomplete = props => {
|
|||
|
||||
}
|
||||
|
||||
export default RelationAutocomplete;
|
||||
export default Autocomplete;
|
||||
|
|
@ -3,6 +3,7 @@ import { useState } from 'preact/hooks';
|
|||
import { CSSTransition } from 'react-transition-group';
|
||||
import { CloseIcon } from '../../../Icons';
|
||||
import i18n from '../../../i18n';
|
||||
import Autocomplete from '../Autocomplete';
|
||||
|
||||
/** The basic freetext tag control from original Recogito **/
|
||||
const TagWidget = props => {
|
||||
|
|
@ -34,9 +35,9 @@ const TagWidget = props => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="tags">
|
||||
<div className="r6o-widget tag">
|
||||
{ tagBodies.length > 0 &&
|
||||
<ul>
|
||||
<ul className="r6o-taglist">
|
||||
{ tagBodies.map(tag =>
|
||||
<li key={tag.value} onClick={toggle(tag.value)}>
|
||||
<span className="label">{tag.value}</span>
|
||||
|
|
@ -56,12 +57,12 @@ const TagWidget = props => {
|
|||
}
|
||||
|
||||
{ !props.readOnly &&
|
||||
<input
|
||||
type="text"
|
||||
value={newTag}
|
||||
onChange={evt => setNewTag(evt.target.value)}
|
||||
onKeyDown={onKeyDown}
|
||||
placeholder={i18n.t('Add tag...')} />
|
||||
<Autocomplete
|
||||
content={newTag}
|
||||
placeholder={i18n.t('Add tag...')}
|
||||
onChange={setNewTag}
|
||||
onKeyDown={onKeyDown}
|
||||
vocabulary={props.vocabulary || []} />
|
||||
}
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { Component } from 'preact/compat';
|
||||
import { TrashIcon, CheckIcon } from '../../Icons';
|
||||
import RelationAutocomplete from './RelationAutocomplete';
|
||||
import Autocomplete from '../../editor/widgets/Autocomplete';
|
||||
|
||||
/**
|
||||
* Shorthand to get the label (= first tag body value) from the
|
||||
|
|
@ -101,7 +101,7 @@ export default class RelationEditor extends Component {
|
|||
return(
|
||||
<div className="r6o-relation-editor" ref={this.element}>
|
||||
<div className="input-wrapper">
|
||||
<RelationAutocomplete
|
||||
<Autocomplete
|
||||
content={this.state.content}
|
||||
placeholder="Tag..."
|
||||
onChange={this.onChange}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@import "widgets/autocomplete";
|
||||
@import "widgets/textentry";
|
||||
@import "widgets/comment/comment";
|
||||
@import "widgets/tag/tag";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
.r6o-autocomplete {
|
||||
display:inline;
|
||||
position:relative;
|
||||
|
||||
div[role=combobox] {
|
||||
display:inline;
|
||||
}
|
||||
|
||||
input {
|
||||
outline:none;
|
||||
border:none;
|
||||
width:80px;
|
||||
height:100%;
|
||||
line-height:14px;
|
||||
white-space:pre;
|
||||
box-sizing:border-box;
|
||||
background-color:transparent;
|
||||
font-size:14px;
|
||||
color:$standard-type;
|
||||
}
|
||||
|
||||
ul {
|
||||
position:absolute;
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style-type:none;
|
||||
background-color:#fff;
|
||||
min-width:100%;
|
||||
border-radius:3px;
|
||||
border:1px solid #d6d7d9;
|
||||
box-sizing:border-box;
|
||||
box-shadow:0 0 20px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
ul:empty {
|
||||
display:none;
|
||||
}
|
||||
|
||||
li {
|
||||
box-sizing:border-box;
|
||||
padding:2px 12px;
|
||||
width:100%;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -2,81 +2,97 @@
|
|||
display:none;
|
||||
}
|
||||
|
||||
.tags {
|
||||
.r6o-widget.tag {
|
||||
background-color:$blueish-white;
|
||||
border-bottom:1px solid $lightgrey-border;
|
||||
padding:1px 3px;
|
||||
display:flex;
|
||||
|
||||
ul, li {
|
||||
padding:0;
|
||||
ul {
|
||||
margin:0;
|
||||
display:inline;
|
||||
padding:0;
|
||||
list-style-type:none;
|
||||
}
|
||||
|
||||
li {
|
||||
display:inline-block;
|
||||
margin:1px 1px 1px 0;
|
||||
padding:0;
|
||||
vertical-align:middle;
|
||||
overflow:hidden;
|
||||
font-size:12px;
|
||||
background-color:#fff;
|
||||
border:1px solid $lightgrey-border-darker;
|
||||
cursor:pointer;
|
||||
position:relative;
|
||||
line-height:180%;
|
||||
@include noselect();
|
||||
@include rounded-corners(2px);
|
||||
@include box-shadow(0, 0, 4px, 0.1);
|
||||
ul.r6o-taglist {
|
||||
flex:1;
|
||||
white-space:nowrap;
|
||||
|
||||
.label {
|
||||
padding:2px 8px;
|
||||
li {
|
||||
margin:0;
|
||||
display:inline-block;
|
||||
}
|
||||
margin:1px 1px 1px 0;
|
||||
padding:0;
|
||||
vertical-align:middle;
|
||||
overflow:hidden;
|
||||
font-size:12px;
|
||||
background-color:#fff;
|
||||
border:1px solid $lightgrey-border-darker;
|
||||
cursor:pointer;
|
||||
position:relative;
|
||||
line-height:180%;
|
||||
@include noselect();
|
||||
@include rounded-corners(2px);
|
||||
@include box-shadow(0, 0, 4px, 0.1);
|
||||
|
||||
.delete-wrapper {
|
||||
display:inline-block;
|
||||
padding:2px 0;
|
||||
color:#fff;
|
||||
width:0;
|
||||
height:100%;
|
||||
background-color:$ocean;
|
||||
@include rounded-corners-right(2px);
|
||||
.label {
|
||||
padding:2px 8px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.delete {
|
||||
padding:2px 6px;
|
||||
.delete-wrapper {
|
||||
display:inline-block;
|
||||
padding:2px 0;
|
||||
color:#fff;
|
||||
width:0;
|
||||
height:100%;
|
||||
background-color:$ocean;
|
||||
@include rounded-corners-right(2px);
|
||||
|
||||
.delete {
|
||||
padding:2px 6px;
|
||||
|
||||
.icon {
|
||||
height:11px;
|
||||
padding-bottom:1px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height:11px;
|
||||
padding-bottom:1px;
|
||||
}
|
||||
|
||||
|
||||
svg {
|
||||
vertical-align:text-top;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align:text-top;
|
||||
.delete-enter-active {
|
||||
width:24px;
|
||||
transition:width 200ms;
|
||||
}
|
||||
|
||||
.delete-enter-done {
|
||||
width:24px;
|
||||
}
|
||||
|
||||
.delete-exit {
|
||||
width:24px;
|
||||
}
|
||||
|
||||
.delete-exit-active {
|
||||
width:0;
|
||||
transition:width 200ms;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.delete-enter-active {
|
||||
width:24px;
|
||||
transition:width 200ms;
|
||||
}
|
||||
}
|
||||
|
||||
.delete-enter-done {
|
||||
width:24px;
|
||||
}
|
||||
.r6o-autocomplete {
|
||||
flex:2;
|
||||
|
||||
.delete-exit {
|
||||
width:24px;
|
||||
li {
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
.delete-exit-active {
|
||||
width:0;
|
||||
transition:width 200ms;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
|
|||
|
|
@ -24,50 +24,7 @@
|
|||
font-size:14px;
|
||||
background-color:$blueish-white;
|
||||
cursor:text;
|
||||
@include rounded-corners-left(3px);
|
||||
|
||||
div[role=combobox] {
|
||||
height:34px;
|
||||
}
|
||||
|
||||
input {
|
||||
outline:none;
|
||||
border:none;
|
||||
width:80px;
|
||||
height:100%;
|
||||
line-height:14px;
|
||||
white-space:pre;
|
||||
box-sizing:border-box;
|
||||
background-color:transparent;
|
||||
font-size:14px;
|
||||
color:$standard-type;
|
||||
}
|
||||
|
||||
ul {
|
||||
position:relative;
|
||||
left:-6px;
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style-type:none;
|
||||
background-color:#fff;
|
||||
min-width:100%;
|
||||
border-radius:3px;
|
||||
border:1px solid #d6d7d9;
|
||||
box-sizing:border-box;
|
||||
box-shadow:0 0 20px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
ul:empty {
|
||||
display:none;
|
||||
}
|
||||
|
||||
li {
|
||||
box-sizing:border-box;
|
||||
padding:2px 12px;
|
||||
width:100%;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
@include rounded-corners-left(3px);
|
||||
}
|
||||
|
||||
.buttons {
|
||||
|
|
|
|||
Loading…
Reference in New Issue