kit

Split action

Built revision v17.10.0

React
Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

On Calendar

Split action

A draft invoice's actions
Source
module Menu = KitReact.Menu

@react.component
let make = () =>
  <details>
    <summary> {React.string("A draft invoice's actions")} </summary>
    <KitReact.Roles.ActionGroup
      lead=SplitAction(KitReact.Roles.SplitAction.role({
        action: PrimaryAction,
        id: "role-split-action-send",
        label: "More ways to send",
        variants: [
          {
            items: [
              Menu.Item({name: "Send and mark as paid"}),
              Menu.Item({name: "Schedule sending…"}),
            ],
          },
        ],
        children: React.string("Send invoice"),
      }))
      secondary=[
        SplitAction(KitReact.Roles.SplitAction.role({
          action: SecondaryAction,
          id: "role-split-action-save",
          label: "More ways to save",
          variants: [
            {
              items: [
                Menu.Item({name: "Save as a template"}),
                Menu.Item({name: "Save a copy as a new draft"}),
              ],
            },
          ],
          children: React.string("Save as draft"),
        })),
      ]
    />
  </details>

Split action, submitting

An invoice being sent
Source
module Menu = KitReact.Menu

@react.component
let make = () =>
  <details>
    <summary> {React.string("An invoice being sent")} </summary>
    <KitReact.Roles.ActionGroup
      lead=SplitAction(KitReact.Roles.SplitAction.role({
        action: PrimaryAction,
        id: "role-split-action-sending",
        label: "More ways to send",
        variants: [
          {
            items: [
              Menu.Item({name: "Send and mark as paid"}),
              Menu.Item({name: "Schedule sending…"}),
            ],
          },
        ],
        state: Submitting,
        children: React.string("Send invoice"),
      }))
    />
  </details>