Drilldown – Code

Common Examples

import { Button, Dialog, DrillDown, Flex } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <Dialog>
      <Dialog.Header>Dialog Header</Dialog.Header>
      <Dialog.Content>This is the dialog body content.</Dialog.Content>
      <Dialog.Footer>
        <Flex gap="3" justifyContent="flex-end">
          <Dialog.CancelButton>Cancel</Dialog.CancelButton>
          <Button appearance="primary">Continue</Button>
        </Flex>
      </Dialog.Footer>
      <DrillDown index={0}>
        <DrillDown.Header>DrillDown Index 0</DrillDown.Header>
        <DrillDown.Content>This is the drilldown body content.</DrillDown.Content>
        <DrillDown.Footer>
          <Flex gap="3" justifyContent="flex-end">
            <DrillDown.PrevButton>Cancel</DrillDown.PrevButton>
            <DrillDown.NextButton appearance="primary">
              Continue
            </DrillDown.NextButton>
          </Flex>
        </DrillDown.Footer>
      </DrillDown>
    </Dialog>
  );
}

Use as children of `Dialog`, `Drawer`, or `Page.Panel`

Any number of DrillDown components can be added as children of the Dialog, Drawer, or Page.Panel component. When a DrillDown is visible, it will cover the entire contents of the Dialog or Drawer.

<Dialog>
  <Dialog.Header>{...}</Dialog.Header>
  <Dialog.Content>{...}</Dialog.Content>
  <Dialog.Footer>{...}</Dialog.Footer>

  <DrillDown index={0}>{...}</DrillDown>
  <DrillDown index={1}>{...}</DrillDown>
  <DrillDown index={2}>{...}</DrillDown>
  <DrillDown index={3}>{...}</DrillDown>
</Dialog>

<Drawer>
  <Drawer.Header>{...}</Drawer.Header>
  <Drawer.Content>{...}</Drawer.Content>
  <Drawer.Footer>{...}</Drawer.Footer>

  <DrillDown index={0}>{...}</DrillDown>
  <DrillDown index={1}>{...}</DrillDown>
  <DrillDown index={2}>{...}</DrillDown>
  <DrillDown index={3}>{...}</DrillDown>
</Drawer>

Each DrillDown requires a unique indexDrillDown sibling components are identified by their index prop. Numbers used for the index prop are zero-based, and calling next or clicking the DrillDown.NextButton will display the next index in numerical order.

Uncontrolled usage

import { Drawer, Drilldown } from "@servicetitan/anvil2";

function ExampleComponent() {
  const [isOpen, setIsOpen] = useState(true);

  return (
    <Drawer open={isOpen} onClose={() => setIsOpen(false)}>
      <Drawer.Header>Drawer Header</Drawer.Header>
      <Drawer.Content>This is the drawer body content.</Drawer.Content>
      <Drawer.Footer>
        <Flex gap="3" justifyContent="flex-end">
          <Drawer.CancelButton>Cancel</Drawer.CancelButton>
          <DrillDown.NextButton appearance="primary">Continue</DrillDown.NextButton>
        </Flex>
      </Drawer.Footer>

      <DrillDown index={0} onClose={() => setIsOpen(false)}>
        <DrillDown.Header>DrillDown Index 0</DrillDown.Header>
        <DrillDown.Content>This is the drilldown body content.</DrillDown.Content>
        <DrillDown.Footer>
          <Flex gap="3" justifyContent="flex-end">
            <DrillDown.PrevButton>Cancel</DrillDown.PrevButton>
            <DrillDown.NextButton appearance="primary">
              Continue
            </DrillDown.NextButton>
          </Flex>
        </DrillDown.Footer>
      </DrillDown>
    </Drawer>
  );
}

Using `DrillDown.NextButton` and `DrillDown.PrevButton`

The DrillDown can be used with uncontrolled state by using the DrillDown.NextButton to move forward to each DrillDown index in ascending numerical order. The DrillDown.PrevButton will similarly move backward in descending numerical order, and will close the DrillDown if the current visible DrillDown is index 0.

Controlled usage

import { Drawer, Drilldown } from "@servicetitan/anvil2";

function ExampleComponent() {
  const { drillDownProps, back, next } = useDrillDown();
  const [isOpen, setIsOpen] = useState(true);

  return (
    <Drawer {...drillDownProps} open={isOpen} onClose={() => setIsOpen(false)}>
      <Drawer.Header>Drawer Header</Drawer.Header>
      <Drawer.Content>This is the drawer body content.</Drawer.Content>
      <Drawer.Footer>
        <Flex gap="3" justifyContent="flex-end">
          <Drawer.CancelButton>Cancel</Drawer.CancelButton>
          <Button appearance="primary" onClick={next}>Continue</Button>
        </Flex>
      </Drawer.Footer>

      <DrillDown index={0} onClose={() => setIsOpen(false)}>
        <DrillDown.Header>DrillDown Index 0</DrillDown.Header>
        <DrillDown.Content>This is the drilldown body content.</DrillDown.Content>
        <DrillDown.Footer>
          <Flex gap="3" justifyContent="flex-end">
            <Button onClick={back}>Cancel</Button>
            <Button appearance="primary" onClick={next}>
              Continue
            </Button>
          </Flex>
        </DrillDown.Footer>
      </DrillDown>
    </Drawer>
  );
}

Using the `useDrillDown` hook

The useDrillDown hook returns a next and back function to allow for programmatically navigating between DrillDown components in numerical index order. (The hook also returns a setIndex function to allow navigating to arbitrary index values.)To allow this hook to work, the drillDownProps return value also needs to be spread onto the parent component.

import { Drawer, Drilldown } from "@servicetitan/anvil2";

function ExampleComponent() {
  const { drillDownProps, back, next } = useDrillDown();
  const [isOpen, setIsOpen] = useState(true);

  return (
    <Drawer {...drillDownProps} open={isOpen} onClose={() => setIsOpen(false)}>
      {...}
    </Drawer>
  );
}

Closing from within a `DrillDown`

By default, the DrillDown.Header does not display a close button. To display a close button in the DrillDown.Header, add an onClose handler to the DrillDown.

<DrillDown index={0} onClose={() => setOpen(false)}>
  <DrillDown.Header>DrillDown Index 0</DrillDown.Header>
  <DrillDown.Content>This is the drilldown body content.</DrillDown.Content>
  <DrillDown.Footer>
    <Flex gap="3" justifyContent="flex-end">
      <DrillDown.PrevButton>Cancel</DrillDown.PrevButton>
      <DrillDown.NextButton appearance="primary">
        Continue
      </DrillDown.NextButton>
    </Flex>
  </DrillDown.Footer>
</DrillDown>

<DrillDown index={0} onClose={() => setOpen(false)}>
  <DrillDown.Header>DrillDown Index 0</DrillDown.Header>
  <DrillDown.Content>This is the drilldown body content.</DrillDown.Content>
  <DrillDown.Footer>
    <Flex gap="3" justifyContent="flex-end">
      <DrillDown.PrevButton>Cancel</DrillDown.PrevButton>
      <DrillDown.NextButton appearance="primary">
        Continue
      </DrillDown.NextButton>
    </Flex>
  </DrillDown.Footer>
</DrillDown>

`DrillDown` Props

In addition to the props listed below, the DrillDown component can accept any valid HTML div props.

index

number

required

The index of the DrillDown screen in the navigation sequence. This index is zero-based.

onClose

() => void

Called when the close button in the header is clicked. The close button is only displayed in the DrillDown.Header if there is an onClose provided.

<DrillDown.Header>DrillDown Header</DrillDown.Header>

`DrillDown.Header` Props

In addition to the props listed below, the DrillDown.Header component can accept any valid HTMLheader props.

"h1" | "h2" | "h3" | "h4" | "h5" | "h6"

default:"h1"

Customizes the heading level of the DrillDown.Header

<DrillDown.Content>DrillDown content</DrillDown.Content>

`DrillDown.Content` Props

The DrillDown.Content component can accept any valid HTML div props.

<DrillDown.Footer>
  <Flex gap="3" justifyContent="flex-end">
    <Button onClick={back}>Back</Button>
    <Button appearance="primary" onClick={next}>
      Continue
    </Button>
  </Flex>
</DrillDown.Footer>

The DrillDown.Footer component can accept any valid HTML footer props.

<DrillDown.NextButton appearance="primary">
  Continue
</DrillDown.NextButton>

`DrillDown.NextButton` Props

The DrillDown.NextButton component can accept the same props as the Button component. This button takes the user to the next DrillDown index (e.g. if the index 1 DrillDown is visible, it will move to index 2).

<DrillDown.PrevButton>
  Back
</DrillDown.PrevButton>

`DrillDown.PrevButton` Props

The DrillDown.PrevButton component can accept the same props as the Button component. This button takes the user to the previous DrillDown. If there is no previous DrillDown, it will close the DrillDown.

const { drillDownProps, setIndex, back, next } = useDrillDown();

`useDrillDown` hook

The useDrillDown hook returns four values:

drillDownProps

object

This object is required to be spread on the parent component (Drawer, Dialog) for the DrillDown to work in a controlled manner using the useDrillDown hook.

() => void

Calling this function takes the user to the next DrillDown index (e.g. if the index 1 DrillDown is visible, it will move to index 2).

back

() => void

Calling this function takes the user to the previous DrillDown. If there is no previous DrillDown, it will close the DrillDown.

setIndex

(index: number | undefined) => void

Calling this function takes the user to the DrillDown index that is passed into the function. If setIndex is called with undefined, it will close the DrillDown.

​Common Examples

​Use as children of Dialog, Drawer, or Page.Panel

​Uncontrolled usage

​Using DrillDown.NextButton and DrillDown.PrevButton

​Controlled usage

​Using the useDrillDown hook

​Closing from within a DrillDown

​DrillDown Props

​DrillDown.Header Props

​DrillDown.Content Props

​DrillDown.Footer Props

​DrillDown.NextButton Props

​DrillDown.PrevButton Props

​useDrillDown hook

Common Examples

Use as children of `Dialog`, `Drawer`, or `Page.Panel`

Uncontrolled usage

Using `DrillDown.NextButton` and `DrillDown.PrevButton`

Controlled usage

Using the `useDrillDown` hook

Closing from within a `DrillDown`

`DrillDown` Props

`DrillDown.Header` Props

`DrillDown.Content` Props

`DrillDown.Footer` Props

`DrillDown.NextButton` Props

`DrillDown.PrevButton` Props

`useDrillDown` hook