alert - OneScript

alert(options) shows a system alert. Tapping any button runs that button's action first, then calls onDismiss.

import { Button, Modifier, Text, TextField, useState } from "onescript/views"

function FileRow() {
  const [deleting, setDeleting] = useState(false)
  const [renaming, setRenaming] = useState(false)
  const [name, setName] = useState("notes.txt")

  return (
    <Text modifier={Modifier
      .alert({
        title: "Delete this file?",
        message: "This can't be undone.",
        isPresented: deleting,
        onDismiss: () => setDeleting(false),
        actions: [
          <Button
            role="destructive"
            action={() => remove()}
          >
            Delete
          </Button>,
          <Button
            role="cancel"
            action={() => {}}
          >
            Cancel
          </Button>,
        ],
      })
      .alert({
        title: "Rename",
        isPresented: renaming,
        onDismiss: () => setRenaming(false),
        actions: [
          <TextField
            value={name}
            onChange={setName}
            prompt="File name"
          />,
          <Button action={() => rename(name)}>Save</Button>,
          <Button
            role="cancel"
            action={() => {}}
          >
            Cancel
          </Button>,
        ],
      })}>
      {name}
    </Text>
  )
}

Option	Type	Description
`title`	`string`	The title.
`message`	`string`	Optional. Text below the title.
`isPresented`	`boolean`	Whether the alert is shown.
`onDismiss`	`() => void`	Called when the alert closes; set `isPresented` to `false` here.
`actions`	`ViewChild`	Buttons and text fields. Without buttons, the system shows an OK button.

actions only accepts Button with a plain text label and TextField, and they can't have a modifier.
Use role to mark buttons: "cancel" is the cancel button, and "destructive" is shown in red.