Message

We have already encountered the Message component several times. We will highlight some features here and show further possible uses in later chapters.

Let's create a simple mockup application which we will need later on:

src/demo/apps/mockup/index.js

import { Application, Message } from "@codecoupler/cc-ui";
export default class extends Application {
  static defaults = {
    "@codecoupler": {
      panel: {
        panelSize: "250 120",
        headerTitle: "Mockup"
      }
    }
  };
  async start() {
    await this.stage.load(Message, {
      text: `ID of the Application:\n${this.id}`
    });
  }
}

We load the new application in our root.js file (just by replacing the previous one):

src/root.js

import { Component, Flexbox } from "@codecoupler/cc-ui";
import LoadingComponents from "./demo/components/loading-components";
import TestApp from "./demo/apps/mockup";
export default class extends Component {
  async start() {
    await this.stage.load(Flexbox, {
      root: {
        type: "column",
        content: [
          { type: "stage", id: "top", class: "card-header" },
          { type: "stage", id: "$", grow: true }
        ]
      }
    });
    await this.getStage("top").load(LoadingComponents);
    await this.stage.load(TestApp);
  }
}

All options are reactive. This means that changes are always shown. We have already used the first option text several times. The option will use the style white-space: pre-line, so all newlines will be shown in the result.

The most important part of the a message component is that all other HTML will be sanitized before inserted into the DOM.

The other two are style and class, which goes without saying what these do.

We will now set these options and change them after a second:

src/demo/apps/mockup/index.js

import { Application, Message } from "@codecoupler/cc-ui";
export default class extends Application {
  static defaults = {
    "@codecoupler": {
      panel: {
        panelSize: "250 120",
        headerTitle: "Mockup"
      }
    }
  };
  async start() {
    let centeredMessage = await this.stage.load(Message, {
      text: `ID of the Application:\n${this.id}`,
      style: { color: "#fff", textDecoration: "underline" },
      class: `bg-secondary`
    });
    setTimeout(() => {
      centeredMessage.options = {
        text: `<b>ID of the Application</b>:\n${this.id}`,
        style: { color: "#000", textDecoration: "" },
        class: `bg-white`
      };
    }, 1000);
  }
}

Why we Reset textDecoration?

First we set the value of style to { color: "#fff", textDecoration: "underline" }. If we would now try to set the new value { color: "#000" } it would be merged with the current value and result in { color: "#000", textDecoration: "underline" }. As this is not what we want we will reset the textDecoration with { color: "#000", textDecoration: "" }.

The component have some more features:

The position of the text must not be centered. You can set the values of the alignH and alignV to start, end or center to choose how to align horizontally and vertically. alignH will respect the ltr/rtl direction.

With the option align you can choose how the text flow is aligned. It can be right, left or center.

And last but not least an instance of a message component provides a public setter text with which you can quickly change your text. Therefore the following statements do the same:

messageInstance.options = {
  text: "A new Message!"
}

messageInstance.text = "A new Message!";