@textback/notification-widget/src/widget/components/index.js

TODO: Give a short introduction of your project. Let this section explain the objectives or the motivation behind this project.

// const merge = require('lodash/merge');
import merge from 'lodash/merge';
import text from '../utils/text.js';
import getLocale from '../utils/getLocale.js';

export default class Component {
    constructor(props = {}) {

        if (Object.prototype.hasOwnProperty.call(props, 'parentElement')) this.element = props.parentElement;
        if (!Object.prototype.hasOwnProperty.call(props, 'parentElement')) this.element = props.element || document.createElement(this.constructor.tagName);

        const dataset = JSON.parse(JSON.stringify(this.element.dataset || {}));
        const data = merge(JSON.parse(this.element.getAttribute('data')), dataset);

        this.set(this.defaults, props, {data});
    }

    render() {
        this.element.innerHTML = this.template;
    }

    text(string) {
        return text(string, this.lang);
    }

    get template() {
        return this.content;
    }

    get lang() {
        return this.element.getAttribute('lang') || getLocale();
    }

    set lang(value) {
        if (!value) return;

        this.element.setAttribute('lang', value);
    }

    set() {
        merge(this, ...arguments);
        this.render();
    }

    get defaults() {
        return {};
    }

    static get tagName() {
        return 'div';
    }
};