StatefulButton update function for Toggle

Technical Support WebViewer
, ,
1

Hi, I am trying to build a StatefulButton to show/hide annotation. I have followed this documentation

Here is my code snippet

const [toggle, setToggle] = useState(true);
.
.
instance.setHeaderItems(header => {
                header.push({
                    type: "statefulButton",
                    initialState: "Show",
                    states: {
                        Show: {
                            img: SHOW_ANNOTATIONS_ICON,
                            onClick: (update: any, activeState: any) => {
                                setToggle(!toggle);
                                let AllAnnotations = instance.annotManager.getAnnotationsList();
                                instance.annotManager.showAnnotations(AllAnnotations);
                                console.info("show", activeState);
                                update();
                            },
                        },
                        Hide: {
                            img: HIDE_ANNOTATIONS_ICON,
                            onClick: (update: any, activeState: any) => {
                                setToggle(!toggle);
                                let AllAnnotations = instance.annotManager.getAnnotationsList();
                                instance.annotManager.hideAnnotations(AllAnnotations);
                                console.info("hide", activeState);
                                update();
                            },
                        }
                    },
                    mount: (update: any) => {
                        const isToggledState = (toggle: any) => {
                            console.info("toggle", toggle);
                            if(toggle == true){
                                return 'Hide';
                            }
                            else if(toggle == false){
                                return 'Show';
                            }
                        }
                        instance.docViewer.on('click', (toggle: any) => {
                            update(isToggledState(toggle));
                          });
                      },
                      unmount: () => {
                        instance.docViewer.off();
                      },
                    dataElement: 'showAnnotationButton'
                });
            });

The activeState is Returning the svg icon img. And mount is never called. I tried using ‘click’ event handler for updating toggle state. Can you please suggest how to use the update function here to change between the two states?

Thanks

2

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

3

Hello,
I check this code, you can just use onClick decide the buttonStatus, rather using mount.
Here is the code snippet you can reference:

instance.setHeaderItems(header => {
        header.push({
            type: "statefulButton",
            initialState: "Show",
            states: {
                Show: {
                    img: SHOW_ANNOTATIONS_ICON,
                    onClick: (update) => {
                      let AllAnnotations = instance.annotManager.getAnnotationsList();
                      instance.annotManager.showAnnotations(AllAnnotations);
                      update('Hide') 
                    },
                },
                Hide: {
                  img: HIDE_ANNOTATIONS_ICON,
                  onClick: (update) => {
                    let AllAnnotations = instance.annotManager.getAnnotationsList();
                    instance.annotManager.showAnnotations(AllAnnotations);
                    update('Show') 
                  }
                }
            },
            dataElement: 'showAnnotationButton'
        });
      });

Let me know if you need more help