Messages

SVAR provides an extended messaging system for interaction between a user and an application. There are two main types of messages: Notices and Modal boxes. Depending on the type of a message, you can either display some short notifications or show modal boxes that require some user's activity.

Notice boxes

A notice message box appears on a button click in the top right corner of the window. It can be colored according to the type of a notice and contain a text message.

Exploring types of notices

All in all, there are 5 types of notice messages available:

• default (white background)
• "info" (blue background)
• "warning" (orange background)
• "success" (green background)
• "danger" (red background)

Type	Image
default (type:"")
info (type:"info")
warning (type:"warning")
success (type:"success")
danger (type:"danger")

Creating a notice

To create a notice, make use of the showNotice() helper function. To get access to the helper in React, use the useContext hook and the provided context from "@svar-ui/react-core":

import { Button } from "@svar-ui/react-core";
import { useContext } from "react";
import { context } from "@svar-ui/react-core";

function MyComponent() {
  // getting the helper
  const { showNotice } = useContext(context["wx-helpers"]);

  return (
    <Button onClick={() => showNotice({
      type: "info",
      expire: 6000,
      text: "Some info"
    })}>
      Show Info
    </Button>
  );
}

The showNotice() function takes the following parameters:

• text - (string) obligatory, the text to show in a notice. In case of a very long text, a word wrap is applied
• type - (string) optional, the type of a notice: an empty value for the default notice box, "info", "warning", "success", "danger" (see details). You can skip this property during initialization. Then a notice message will simply have a white background.
• expire - (number) optional, the expire interval for a message in milliseconds, 5000 by default, -1 for not hiding the message

Related sample: Messages

Hiding a notice

By default, a notice disappears under the following conditions:

• on clicking the Close button
• in 5000 milliseconds after appearing

You can adjust the expire interval with the help of the expire parameter:

import { Button } from "@svar-ui/react-core";
import { useContext } from "react";
import { context } from "@svar-ui/react-core";

function MyComponent() {
  const { showNotice } = useContext(context["wx-helpers"]);

  return (
    <Button onClick={() => showNotice({
      type: "success",
      expire: 10000,
      text: "Your data is correct"
    })}>
      OK
    </Button>
  );
}

You can also cancel the expire period by setting the expire: -1 property. In this case a notice will disappear only on a Close button click.

Related sample: Messages

Modal boxes

Modal boxes have a more complex structure than notices. They may have a title, contain some text and several buttons, depending to the box's type. Modal boxes add a grey overlay over the user interface, which disappears only when a user clicks a button in the box or the box is hidden by a call of a function.

Exploring types of modal boxes

There are 4 types of modal boxes:

• alert - an alert box with one button, used to draw a user's attention
• confirm - a confirmation box with two buttons to accept or to decline a further action
• prompt - a modal message box with two buttons (submit and cancel) and an input to get some info from a user before proceeding
• dialog - a modal message box with any number of buttons and a textarea to enter a user's text

Related sample: Messages

Creating Alert and Confirm boxes

To create an alert or a confirm box, you should use the showModal() helper function. To get access to the helper in React, use useContext from "react" and the context exported by "@svar-ui/react-core":

import { Button } from "@svar-ui/react-core";
import { useContext } from "react";
import { context } from "@svar-ui/react-core";

function ConfirmExample() {
  const { showModal } = useContext(context["wx-helpers"]);

  function confirm() {
    showModal({
      title: "Confirm",
      message: "Will we do it ?"
    });
  }

  return <Button onClick={confirm}>Show Confirm</Button>;
}

The showModal() function accepts:

• title - the text of the header
• message - the text of the modal box body
• buttons - an array of buttons for a modal box
• onConfirm - a function which is called on click of the OK button
• onCancel - a function which is called on click of the Cancel button (for the confirm box)

Note: in this documentation we preserve the component prop names (for example onConfirm and onCancel) to match the original public API. DOM event handlers such as onclick are converted to React's onClick. Ensure your code uses the correct prop names expected by the library.

The callback of the event can take an object with the following parameter:

• button (string) - (optional) the value is set to "cancel" if the event fires on the button click.

In case the onConfirm or onCancel event fires on pressing ENTER or ESC, the callback function takes no parameters. If the event fires on the button click, the callback of the onConfirm or onCancel event can take an object with the following parameter:

• button (string) - (optional) the value is set to "cancel" (for onCancel) or "ok" (for onConfirm)

The showModal() method returns a promise:

• for the Confirm box the promise resolves if a user clicks OK. The promise rejects if a user clicks Cancel

import { Button } from "@svar-ui/react-core";
import { useContext } from "react";
import { context } from "@svar-ui/react-core";

function ConfirmExample() {
  const { showModal } = useContext(context["wx-helpers"]);

  function confirm() {
    showModal({
      title: "Confirm",
      message: "Will we do it ?"
    }).then(() => {
      // resolved (OK)
    }).catch(() => {
      // rejected (Cancel)
    });
  }

  return <Button onClick={confirm}>Show Confirm</Button>;
}

• for an Alert box the promise resolves when a user clicks the button

import { Button } from "@svar-ui/react-core";
import { useContext } from "react";
import { context } from "@svar-ui/react-core";

function AlertExample() {
  const { showModal } = useContext(context["wx-helpers"]);

  function alert() {
    showModal({
      message: "Something happens",
      buttons: ["ok"],
    }).then(() => {
      // user clicked ok
    });
  }

  return <Button onClick={alert}>Show Alert</Button>;
}

Related sample: Messages

Creating Prompt and Dialog boxes

To create a prompt or a dialog modal box in React, wrap the Modal component into the Portal component (both provided by the library). The Modal component includes several logical parts: header, body and buttons. Portal allows taking a widget outside the strict structure of the React application and put it wherever you need in the application.

Prompt

To initialize a Prompt modal box, wrap the Modal component into the Portal one and specify the following properties:

• title - the text of the header
• onConfirm - a function which is called on click of the OK button
• onCancel - a function which is called on click of the Cancel button

The body of the Prompt box should contain an input implemented with the help of the Text control. Use controlled component patterns (value + onChange) if you need to capture user input.

import { Modal, Text, Portal } from "@svar-ui/react-core";

function PromptExample() {
  function handleAction() {
    // your logic
  }

  return (
    <div>
      <Portal>
        <Modal title="Subscribe" onCancel={handleAction} onConfirm={handleAction}>
          <Text select={true} focus={true} value="Enter your email" />
        </Modal>
      </Portal>
    </div>
  );
}

Related sample: Messages

Dialog

To initialize a Dialog modal box, you should:

• wrap the Modal component into the Portal one
• use the Textarea control to implement a textarea in the body part
• specify the footer render-prop, where you can place your buttons presented by the Button control

import { Modal, Textarea, Button, Portal } from "@svar-ui/react-core";

function Footer({ onClick }) {
  return (
    <div style={{ marginTop: 20 }}>
      <Button onClick={onClick}>Yes</Button>
      <Button onClick={onClick}>No</Button>
      <Button onClick={onClick}>Maybe</Button>
    </div>
  );
}

function DialogExample() {
  function click() {
    // your logic
  }

  return (
    <div>
      <Portal>
        <Modal footer={<Footer onClick={click} />}>
          Your feedback
          <Textarea placeholder="Leave your comment" />
        </Modal>
      </Portal>
    </div>
  );
}

Related sample: Messages

Hiding modal boxes

All modal boxes are closed on a button click.

To hide a prompt, you can specify a function and set its name as a value of either the onConfirm or onCancel property.

To hide a dialog you can specify a hiding function and set its name as a value of the onClick prop of the corresponding Button control.

Example shows usage of useState for toggling modal visibility and a footer render-prop for dialog buttons:

import { useState } from "react";
import { Modal, Text, Textarea, Button } from "@svar-ui/react-core";

function Demo() {
  const [custom1, setCustom1] = useState(false);
  const [custom2, setCustom2] = useState(false);

  function hideAll() {
    setCustom1(false);
    setCustom2(false);
  }

  const Footer = () => {
    return (
      <div style={{ marginTop: 20 }}>
        <Button onClick={hideAll}>Yes</Button>
        <Button onClick={hideAll}>No</Button>
        <Button onClick={hideAll}>Maybe</Button>
      </div>
    );
  };

  return (
    <div className="demo-box">
      <Button type="primary" onClick={() => setCustom1(true)}>
        Show Prompt
      </Button>

      {custom1 && (
        <Modal title="Custom Prompt" onConfirm={hideAll} onCancel={hideAll}>
          <Text select={true} focus={true} value="Some" />
        </Modal>
      )}

      <Button onClick={() => setCustom2(v => !v)}>
        Show Dialog
      </Button>

      {custom2 && (
        <Modal footer={<Footer />}>
          Some text here
          <Textarea placeholder="Some text" />
        </Modal>
      )}
    </div>
  );
}

Related sample: Messages

Keyboard navigation in modal boxes

Modal boxes block keyboard events of a page. Only the following keys are available:

• "Enter" for accepting an action and for moving to the next line in the textarea of a Dialog box
• "Escape" for rejecting an action

Localizing modal boxes

You can localize the text of the OK and Cancel buttons of a modal box. For this you need to:

• include the Locale component on a page with a modal box and import the necessary locale package on a page.

import { Modal, Locale } from "@svar-ui/react-core";
import { de } from "@svar-ui/core-locales";

• wrap the modal box you want to localize in the <Locale> tag and use the words property to set the necessary locale:

function LocalizedPrompt({ hideAll }) {
  return (
    <Locale words={de}>
      <Modal title="Custom Prompt" ok={hideAll} cancel={hideAll}>
        <Text select={true} focus={true} value="Some" />
      </Modal>
    </Locale>
  );
}