as-multiviews.js

import {Tab} from './as-tab.js';
import {ErrorCode} from '../exception/exceptionDesc.js';

/**
 * @ignore
 */
const logModule = 'as-multiviews';

/**
 * @description MultiView component that extends the Tab component, allowing for multiple views within a tabbed interface.
 * This class focuses on the specific properties of the MultiView component.
 * Since it inherits from Accessor_A, all basic properties (e.g., height, width) are available but documented in the Accessor_A part.
 * @class TComponents.MultiView
 * @extends TComponents.Tab
 * @param {HTMLElement} parent - The parent HTML element to which the component will be attached.
 * @param {TComponents.TabProps} props - Properties to initialize the component.
 * @memberof TComponents
 * @example
 * const multiview = new TComponents.Tab(document.body, {
 *   position: 'absolute',
 *   width: 200,
 *   height: 200,
 *   zIndex: 1000,
 *   views: [
 *     {
 *       name: 'Multiview 1',
 *       icon: '',
 *       content: `view_${API.generateUUID()}`,
 *       children: [],
 *     },
 *    {
 *       name: 'Multiview 2',
 *       icon: '',
 *       content: `view_${API.generateUUID()}`,
 *       children: [],
 *     },
 *   ],
 *   activeViewIndex: 0,
 * });
 *
 * // Render the component.
 * await multiview.render();
 */
export class MultiView extends Tab {
  constructor(parent, props) {
    super(parent, props);

    /**
     * @instance
     * @private
     * @type {TComponents.TabProps}
     * */
    this._props;
  }

  /**
   * @description Returns the default properties of the tab component.
   * @member TComponents.MultiView#defaultProps
   * @method
   * @protected
   * @returns {TComponents.TabProps} Default properties.
   */
  defaultProps() {
    const parentProps = super.defaultProps();
    delete parentProps.tabPosition;
    // Disable view icons for MultiView
    parentProps['useViewIcon'] = false;

    // make sure we have an array
    var views = parentProps.views || [];

    // remove the `icon` prop from each view object
    for (var i = 0; i < views.length; i++) {
      views[i].icon = '';
    }

    parentProps.views = views;

    // Disable view icon for MultiView
    parentProps['useViewIcon'] = false;
    parentProps['expandHeightToParentBottom'] = false;

    return parentProps;
  }

  /**
   * @description Generates the markup for the MultiView component.
   * @member TComponents.MultiView#markup
   * @method
   * @returns {string} The HTML markup string.
   */
  markup() {
    return /*html*/ `<div class="tc-multiview"></div>`;
  }

  /**
   * @description Renders the MultiView component, setting up necessary event listeners and styles.
   * @member TComponents.MultiView#onRender
   * @method
   * @throws {Error} Throws an error if rendering fails.
   * @returns {void}
   */
  onRender() {
    try {
      this.removeAllEventListeners();

      this.tabContainer.onchange = this._cbOnChange.bind(this);
      this.tabContainer.position = this._props.tabPosition;
      this.tabContainer.attachToElement(this.find('.tc-multiview'));

      this.find('.fp-components-tabcontainer-tabbar').style.display = 'none';
      this.find('.fp-components-tabcontainer').style.cssText = `
        background-color: ${this._props.backgroundColor};
        border: ${this._props.border};
        border-radius: ${this._props.borderRadius}px;
        box-sizing: border-box;
      `;
      this.container.classList.add('is-container');

      this._setActiveView();
      this._addTips();
    } catch (e) {
      // Runtime errors: write specific content to the log, throw error code
      Logger.e(
        logModule,
        ErrorCode.FailedToRunOnRender,
        `Error happens on onRender of MultiView component ${this.compId}.`,
        e,
      );
      throw new Error(ErrorCode.FailedToRunOnRender, {cause: e});
    }
  }
}

/**
 * @description Add css properties to the component
 * @alias loadCssClassFromString
 * @member TComponents.MultiView.loadCssClassFromString
 * @method
 * @static
 * @param {string} css - The css string to be loaded into style tag
 * @returns {void}
 * @example
 * TComponents.MultiView.loadCssClassFromString(`
 *   .tc-multiview {
 *     position: absolute;
 *     height: 100%;
 *   }`
 * );
 */
MultiView.loadCssClassFromString(`
.tc-multiview {
  position: absolute;
  height: 100%;
  width: 100%;
  min-width: 0px;
  min-height: 0px;
  padding: 0px;
  margin: 0px;
}

.tc-multiview .fp-components-tabcontainer-disabled,
.tc-multiview .fp-components-tabcontainer {
  position: absolute;
  height: 100%;
  width: 100%;
  min-width: 0px;
  min-height: 0px;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

.tc-multiview .fp-components-tabcontainer .fp-components-tabcontainer-content {
  position: relative;
}

`);