Window

Windows are overlays with headers, footers, and special appearance. They provide a familiar dialog-like experience for displaying forms, messages, or complex content.

<div>
  <Button
    onClick={(e, { store }) => {
      store.set(m.contact.visible, true)
    }}
  >
    Open Window
  </Button>
  <Window
    title="Contact"
    visible={m.contact.visible}
    center
    modal
    draggable
    closeOnEscape
  >
    <div>
      <LabelsLeftLayout>
        <TextField value={m.contact.name} label="Name" />
        <TextField value={m.contact.email} label="Email" />
        <TextArea value={m.contact.message} label="Message" rows={5} />
        <DateField value={m.contact.date} label="Date" />
      </LabelsLeftLayout>
    </div>
    <div
      putInto="footer"
      style={{ display: "flex", gap: "8px", justifyContent: "flex-end" }}
    >
      <Button mod="primary">Submit</Button>
      <Button dismiss>Cancel</Button>
    </div>
  </Window>
</div>

interface PageModel {
  contact: {
    visible: boolean;
    name: string;
    email: string;
    message: string;
    date: string;
  };
}

const m = createModel<PageModel>();

import { createModel } from "cx/data";
import { LabelsLeftLayout } from "cx/ui";
import { Button, Window, TextField, TextArea, DateField } from "cx/widgets";

Use putInto="footer" or putInto="header" to place content in the window footer or header. Add the dismiss prop to buttons that should close the window.

Programmatic Windows

Windows can also be opened programmatically using Widget.create and the open method. This approach creates an independent window with its own store:

<Button
  onClick={() => {
    let window = Widget.create(
      <Window title="Programmatic Window" center modal>
        <div>
          <p>This window was opened programmatically.</p>
        </div>
        <div
          putInto="footer"
          style={{ display: "flex", justifyContent: "flex-end" }}
        >
          <Button dismiss>Close</Button>
        </div>
      </Window>,
    )
    window.open(new Store())
  }}
>
  Open Programmatic Window
</Button>

Hot Module Replacement (HMR)

Programmatic windows have issues with HMR during development - changes to the window content won’t reflect until you close and reopen the window. Use createHotPromiseWindowFactory or createHotPromiseWindowFactoryWithProps to solve this:

import { createHotPromiseWindowFactoryWithProps, Window, Button } from "cx/widgets";

const openUserDialog = createHotPromiseWindowFactoryWithProps(
  module,
  (userId: string) => (resolve, reject) => {
    let result = null;
    return Window.create({
      title: `User ${userId}`,
      onDestroy: () => resolve(result),
      children: (
        <div>
          <p>Edit user details here...</p>
          <Button onClick={() => { result = "saved"; }} dismiss>
            Save
          </Button>
        </div>
      ),
    });
  }
);

// Usage
const result = await openUserDialog("123");

The factory returns a Promise that resolves when the window is closed, making it easy to get results back from dialog windows.

Configuration