Source: visual-cell/src/text-cell.js

/**
 * This file declares a class that represents a Text element in a  table.
 * @module VisualCell
 */

import {
    selectElement,
    makeElement,
    getSmartComputedStyle,
    generateGetterSetters
} from 'muze-utils';
import SimpleCell from './simple-cell';
import { TEXT } from './enums/cell-type';
import { PROPS } from './props';
import { DEFAULT_CONFIG } from './enums/defaults';
import { CLASSPREFIX, TOP, BOTTOM, LEFT, RIGHT, HEADER, WIDTH, TEXT_CELL } from './enums/constants';
import './text-cell.scss';

/**
* Computes the Logical Space for the text
*
* @param {Object} context Required to get the needed parameters to compute text space
* @return {Object} Logical space taken up by text
* @memberof TextCell
*/
const computeTextSpace = (context) => {
    const { labelManager } = context.dependencies();
    const space = labelManager.getOriSize(context.source());
    const {
       margin,
        show
   } = context.config();

    labelManager.setStyle(context._computedStyle);
    if (show) {
        return {
            width: space.width + margin.left + margin.right + context._minTickDiff.width,
            height: space.height + margin.top + margin.bottom + context._minTickDiff.height
        };
    } return {
        width: 0,
        height: 0
    };
};

/**
 * Represents a table haeder.
 *
 * @class Text
 */
class TextCell extends SimpleCell {

    /**
     * Creates an instance of Text.
     * @param {Object} config The input configuration.
     * @param {string} dependencies Dependencies for the class(labelManager)
     * @memberof Text
     */
    constructor (config, dependencies) {
        super(config);

        this._dependencies = dependencies;
        this._className = this._config.className ||
                    (this._config.type === HEADER ? `${CLASSPREFIX}-${HEADER}-cell` : `${CLASSPREFIX}-${TEXT}-cell`);
        this._computedStyle = getSmartComputedStyle(selectElement('body'), this._className);
        this._dependencies.labelManager.setStyle(this._computedStyle);
        this._minTickDiff = this._dependencies.labelManager.getOriSize('WW');

        generateGetterSetters(this, PROPS[TEXT]);
    }

    /**
     * return the type pf SimpleCell cell.
     *
     * @readonly
     * @memberof TextCell
     */
    get type () {
        return TEXT;
    }

    /**
     * This method return the value contained by this SimpleCell.
     *
     * @return {string} The text value contained by this cell.
     * @memberof TextCell
     */
    valueOf () {
        return this.source();
    }

    /**
     * This method is used to return a unique identifier for
     * the Text cell.
     *
     * @return {string} The unique identifier for the Text.
     * @memberof TextCell
     */
    get id () {
        return this._id;
    }

    /**
     * Returns the dependencies of the instance
     *
     * @return {Object} Dependencies needed by the class
     * @memberof TextCell
     */
    dependencies () {
        return this._dependencies;
    }

    /**
     * This method is used to obtain a serialized representation of this instance.
     *
     * @return {Object} Object with serilizable props.
     * @memberof TextCell
     */
    serialize () {
        return {
            text: this.source(),
            type: TEXT
        };
    }

    /**
     * return the default configuration for the text cell
     *
     * @static
     * @return {Object} Default configuration of the cell
     * @memberof TextCell
     */
    static defaultConfig () {
        return DEFAULT_CONFIG;
    }

    /**
     * This method return the space taken up
     * by the text with the style applied.
     *
     * @return {Object} width and height taken up by the text.
     * @memberof Text
     */
    getLogicalSpace () {
        if (!this.logicalSpace()) {
            this.logicalSpace(computeTextSpace(this));
        }
        return this.logicalSpace();
    }

    /**
     * This method is used to set the available space.
     *
     * @param {number} width The available width.
     * @param {number} height The available height.
     * @return {Instance} Returns current Instance
     * @memberof TextCell
     */
    setAvailableSpace (width, height) {
        this.availWidth(width);
        this.availHeight(height);
        this.logicalSpace(null);
        return this;
    }

    /**
     * This method is used to render the Text cell inside
     * the provided mount point.
     *
     * @param {HTMLElement} mount The mount point for this cell.
     * @return {Instance} Returns current Instance
     * @memberof Text
     */
    render (mount) {
        const availWidth = this.availWidth();
        const {
            margin,
            show,
            verticalAlign,
            textAlign
        } = this.config();

        this.mount(mount);
        if (show) {
            const container = selectElement(mount);
            const elem = makeElement(container, 'div', [this.id], `${CLASSPREFIX}-${TEXT_CELL}`);

            container.style('vertical-align', verticalAlign);
            elem.classed(this._className, true);
            // apply style on the returned element
            elem.style(WIDTH, availWidth ? `${availWidth}px` : '100%');
            [TOP, BOTTOM, LEFT, RIGHT].forEach((type) => {
                elem.style(`padding-${type}`, `${margin[type]}px`);
            });
            elem.style('text-align', textAlign);
            elem.style('display', 'inline');
            // set the text as the innerHTML
            elem.html(this.source());
        }
        return this;
    }

    /**
     * Disposes the cell
     *
     * @return {Instance} Returns current Instance
     * @memberof TextCell
     */
    remove () {
        this.mount() && this.mount().remove();
        return this;
    }
 }

export default TextCell;