editableField.js

import $ from 'jquery';
import CONFIG from '../configs';
import transText from './transText';

/**
 * Editable Field Utility
 * @description
 * Custom utility that is implementing an editable fields.
 * @class EditableField
 * @param options - Instance options
 */
class EditableField {
    constructor ({selector, name, type, editLabel, cancelLabel, submitLabel, required, allowSpecial, onEdit, onSubmit, onError}) {
        if (!selector) {
            console.error('You must provide a valid selector');
            return;
        }

        this.name = name || '';
        this.type = type || 'text';
        this.editLabel = editLabel || transText('Edit');
        this.cancelLabel = cancelLabel || transText('Cancel');
        this.submitLabel = submitLabel || transText('Submit');
        this.required = required;
        this.onEdit = onEdit;
        this.onSubmit = onSubmit;
        this.onError = onError;
        this.selector = selector;
        this.allowSpecial = allowSpecial === false ? allowSpecial : true;
        this.$element = $(this.selector);
        this.value = this.$element.text();

        this._init();
    }

    _init () {
        // Append editBtn to that instance element
        this.$element.append(this._buildEditBtn());
        this._addEventListeners();
    }

    _buildEditor () {
        let input;

        if (this.type === 'textarea') {
            this.nodeName = 'textarea';
            input = `<textarea name="${this.name}">${this.value}</textarea>`;
        } else {
            this.nodeName = 'input';
            input = `<input type="${this.type}" name="${this.name}" value="${this.value}">`;
        }

        return `${input}
                <span class="actionBtn btn btn-primary btn-xs editableField__submit">${this.submitLabel}</span>
                <span class="actionBtn btn btn-default btn-xs editableField__cancel">${this.cancelLabel}</span>`;
    }

    _buildEditBtn () {
        return `<span class="actionBtn editableField__edit">${this.editLabel}</span>`;
    }

    _addEventListeners () {
        const self = this;

        $(document).on('click', this.selector + ' .actionBtn', function () {
            const $actionBtn = $(this);

            if ($actionBtn.hasClass('editableField__edit')) {
                self._edit();
            }

            else if ($actionBtn.hasClass('editableField__submit')) {
                self._submit();
            }

            else if ($actionBtn.hasClass('editableField__cancel')) {
                self._cancel();
            }
        });
    }

    _edit () {
        this.$element.html(this._buildEditor());
        typeof this.onEdit === 'function' && this.onEdit();
    }

    _submit () {
        if (this.required && this.$element.find(this.nodeName).val().trim() === '') {
            typeof this.onError === 'function' && this.onError('required');
        }

        else if (this.type === 'email' && !this.$element.find('input').val().trim().match(/.+@.+\..+/i)) {
            typeof this.onError === 'function' && this.onError('email');
        }

        else if (!this.allowSpecial && this._hasSpecialChar(this.$element.find('input').val())) {
            typeof this.onError === 'function' && this.onError('special');
        }

        // Valid
        else {
            this.oldValue = this.value;
            this.value = this.$element.find(this.nodeName).val().trim();
            this.$element.html(this.value + this._buildEditBtn());

            typeof this.onSubmit === 'function' && this.onSubmit(this.value, this.oldValue);
        }
    }

    _cancel () {
        this.$element.html(this.value + this._buildEditBtn());
        typeof this.onCancel === 'function' && this.onCancel();
    }

    /*
     * Has Special Char
     * @description
     * Check if the giving string has special character or not.
     * @param {string} str - Given string
     */
    _hasSpecialChar (str) {
        return CONFIG.specialCharRegex.test(str);
    }
}

export default EditableField;