mapcomplete/UI/BigComponents/ShareButton.ts

import BaseUIElement from "../BaseUIElement"

export default class ShareButton extends BaseUIElement {
    private _embedded: BaseUIElement
    private _shareData: () => { text: string; title: string; url: string }

    constructor(
        embedded: BaseUIElement,
        generateShareData: () => {
            text: string
            title: string
            url: string
        }
    ) {
        super()
        this._embedded = embedded
        this._shareData = generateShareData
        this.SetClass("share-button")
    }

    protected InnerConstructElement(): HTMLElement {
        const e = document.createElement("button")
        e.type = "button"
        e.appendChild(this._embedded.ConstructElement())

        e.addEventListener("click", () => {
            if (navigator.share) {
                navigator
                    .share(this._shareData())
                    .then(() => {
                        console.log("Thanks for sharing!")
                    })
                    .catch((err) => {
                        console.log(`Couldn't share because of`, err.message)
                    })
            } else {
                console.log("web share not supported")
            }
        })

        return e
    }
}