lost-sia/dist/Toolbar/ToolbarItems/ImageToolItems/ImageLabelInput.js

Single Image Annotation Tool

import{jsxs as s,jsx as o}from"react/jsx-runtime";import{useState as C}from"react";import{CDropdown as w,CDropdownToggle as L,CDropdownMenu as v,CFormInput as x,CDropdownDivider as y,CDropdownItem as d}from"@coreui/react";import{FontAwesomeIcon as D}from"@fortawesome/react-fontawesome";import{faTag as T}from"@fortawesome/free-solid-svg-icons";import F from"./TagLabel.js";const B=({isDisabled:c,isVisible:m,selectedLabelsIds:t,possibleLabels:n,isMultilabel:p=!1,onLabelSelect:u})=>{const[i,f]=C(""),a=n.filter(e=>e.name.toLowerCase().includes(i.toLowerCase())),g=e=>{let r=[];if(p){r=[...t];const l=t.indexOf(e.id);l!==-1?r.splice(l,1):r.push(e.id)}else r=[e.id];u(r)},h=()=>n.filter(r=>t.includes(r.id));return s(w,{visible:m,autoClose:!1,children:[o(L,{variant:"outline",caret:!1,color:c?"secondary":"primary",style:{paddingTop:0,paddingBottom:0},as:"div",children:t.length===0?o("div",{style:{marginTop:6},children:o(D,{icon:T,size:"lg"})}):h().map(r=>o(F,{name:r.name,color:r.color,size:25,triangleSize:17,style:{marginLeft:1,marginTop:5}},r.name))}),s(v,{children:[o("div",{className:"px-3 py-2",children:o(x,{placeholder:"Filter label...",value:i,onChange:e=>f(e.target.value),autoFocus:!0})}),o(y,{}),a.length>0?a.map(e=>o(d,{onClick:()=>g(e),children:e.name},e.id)):o(d,{disabled:!0,children:"No results"})]})]})};export{B as default};