Creating Custom Select Widget

[alaksandarjesus]

This is not an issue. I was searching for this, so thought it would be good if added here.

create a file SelectWidget.jsx in src/editor/widgets/select

Import the widget in src/editor/widgets/index.js

    import React from "preact/compat";
    import { useState } from "preact/hooks";


    const SelectWidget = props => { 
    // All comments
    const all = props.annotation ?  props.annotation.bodies.filter(body => (body.purpose === props.purpose)) : [];
        
    const lastAnnotation = all && all.length?all[all.length - 1]:null;

    const parentAll = props.annotation && props.parent? props.annotation.bodies.filter(body => (body.purpose === props.parent)) : [];
    
    const lastParentAnnotation = parentAll && parentAll.length?parentAll[parentAll.length - 1]:null;

    
    const onChange = (event) => {

            props.onAppendBody({value:event.target.value, purpose:props.purpose, creator:props.creator});
        }

        const isSelected = (option) =>{
            if(lastAnnotation){
                return lastAnnotation.value === option?'selected':'';
            }
            if(props.defaultValue){
                return props.defaultValue === option?'selected':'';;
            }
            return '';
        }

        const getOptionTags = options =>{
            if(!props.parent){
                return options.map( option => {
                    return <option value={option} selected={isSelected(option)}>{option}</option>
                })
            }else if(lastParentAnnotation){
                const subcategoryOptions = options[lastParentAnnotation.value];
                return subcategoryOptions.map( option => {
                    return <option value={option} selected={isSelected(option)}>{option}</option>
                })
            }
            return null;
        }
        

        return(
            <div className="r6o-widget r6o-select">
                <select onChange={onChange}>
                    <option value="">{props.label}</option>
                    {getOptionTags(props.options)}
                </select>
            </div>
        )

    }

    export default SelectWidget;

And in init use

        var anno = Annotorious.init({
            image: "hallstatt",
            locale: "auto",
            widgets: [
            { widget: "SELECT", options: [ "Animal", "Building", "Waterbody"], label:"Independent, but has child dropdown", purpose:"category", defaultValue:"", creator:{name:"Alaksandar Jesus Gene"} },
                { widget: "SELECT", options: { "Animal":["Lion","Tiger"], "Building":["Villa","Apartment"], "Waterbody":["Lake", "River"]}, label:"Options are Dependent to parent dropdown", purpose:"subcategory", parent:"category", defaultValue:"", creator:{name:"Alaksandar Jesus Gene"} },
            { widget: "SELECT", options: [ "High", "Low", "Severe"], label:"Independent Dropdown", purpose:"severity", defaultValue:"", creator:{name:"Alaksandar Jesus Gene"} },
            
            ]
        });
        `

This will produce three dropdowns depending on the purpose and parent.

Thanks for such a great work.

[rsimon]

Hey, this is fantastic - many thanks for this! I think I might reformat that and add it as a guide to the website if that's ok with you.(Giving proper credit & linking to your GitHub account, of course. Do let me know if you want any specific kind of attribution mentioned on the guide page.)

[alaksandarjesus]

Hi

The work done from your side is really big. I just coded what I require. Please feel free to make any changes. I will be happy, if you give credit. Thank you.