Docplanner Mobile UI

Edit page

Introduction

⚙️ – Core

🧬 – Organisms

ListItem

size

"sm" | "md" | undefined

Size, one of sm, md

renderLeft

ReactNode

Content to be displayed on the left

renderRight

ReactNode

Content to be displayed on the right

children

ReactNode

required

Children

testID

string | undefined

testID

accessibilityLabel

string | undefined

Accessibility label

onPress

(() => void) | undefined

onPress callback

isActive

boolean | undefined

If undefined, renders nothing. If true, renders green dot. If false, renders red dot.

Sizes

<MobileScreen>
  <ListItem renderLeft={<DpIcon name={DpIcons.LogosDocplanner} />}>
    <ListItemTitle>Small</ListItemTitle>
  </ListItem>
  <DpSpacer />
  <ListItem size="md" renderLeft={<DpIcon name={DpIcons.LogosDocplanner} />}>
    <ListItemTitle>Medium</ListItemTitle>
    <ListItemSubtitle>Subtitle</ListItemSubtitle>
  </ListItem>
</MobileScreen>

<MobileScreen>
  <ListItem renderLeft={<DpIcon name={DpIcons.LogosDocplanner} />}>
    <ListItemTitle>Small</ListItemTitle>
  </ListItem>
  <DpSpacer />
  <ListItem size="md" renderLeft={<DpIcon name={DpIcons.LogosDocplanner} />}>
    <ListItemTitle>Medium</ListItemTitle>
    <ListItemSubtitle>Subtitle</ListItemSubtitle>
  </ListItem>
</MobileScreen>

Active and inactive dot

<MobileScreen>
  <ListItem>
    <ListItemTitle>Nothing</ListItemTitle>
  </ListItem>
  <DpSpacer />
  <ListItem isActive>
    <ListItemTitle>Active</ListItemTitle>
  </ListItem>
  <DpSpacer />
  <ListItem isActive={false}>
    <ListItemTitle>Inactive</ListItemTitle>
  </ListItem>
</MobileScreen>

<MobileScreen>
  <ListItem>
    <ListItemTitle>Nothing</ListItemTitle>
  </ListItem>
  <DpSpacer />
  <ListItem isActive>
    <ListItemTitle>Active</ListItemTitle>
  </ListItem>
  <DpSpacer />
  <ListItem isActive={false}>
    <ListItemTitle>Inactive</ListItemTitle>
  </ListItem>
</MobileScreen>

Single press area

You can also make it not interactive by simply removing onPress prop.

<MobileScreen>
  <ListItem onPress={() => {}}>
    <ListItemTitle>Title</ListItemTitle>
  </ListItem>
  <DpSpacer />
  <ListItem
    onPress={() => {}}
    size="md"
    renderLeft={
      <DpCircle size="sm" color="blue" emphasis="low">
        <DpIcon name={DpIcons.ActionClose} />
      </DpCircle>
    }
  >
    <ListItemTitle>Title</ListItemTitle>
  </ListItem>
  <DpSpacer />
  <ListItem
    onPress={() => {}}
    renderLeft={<DpIcon name={DpIcons.LogosDocplanner} />}
  >
    <ListItemTitle>Title</ListItemTitle>
  </ListItem>
  <DpSpacer />
  <ListItem
    onPress={() => {}}
    renderLeft={<DpIcon name={DpIcons.LogosDocplanner} />}
    renderRight={<ListItemRight icon={DpIcons.CaretCaretRight} />}
  >
    <ListItemTitle>Title</ListItemTitle>
  </ListItem>
  <DpSpacer />
  <ListItem
    onPress={() => {}}
    renderLeft={<DpIcon name={DpIcons.LogosDocplanner} />}
    renderRight={
      <ListItemRight label="Additional" icon={DpIcons.CaretCaretRight} />
    }
  >
    <ListItemTitle>Title</ListItemTitle>
  </ListItem>
  <DpSpacer />
  <ListItem
    onPress={() => {}}
    size="md"
    renderLeft={<DpIcon name={DpIcons.LogosDocplanner} />}
    renderRight={<ListItemRight icon={DpIcons.CaretCaretRight} />}
  >
    <ListItemTitle>Title</ListItemTitle>
    <ListItemSubtitle>Subtitle</ListItemSubtitle>
  </ListItem>
  <DpSpacer />
  <ListItem
    onPress={() => {}}
    size="md"
    renderLeft={<DpIcon name={DpIcons.LogosDocplanner} />}
    renderRight={
      <ListItemRight label="Additional" icon={DpIcons.CaretCaretRight} />
    }
  >
    <ListItemTitle>Title</ListItemTitle>
    <ListItemSubtitle>Subtitle</ListItemSubtitle>
  </ListItem>
  <DpSpacer />
  <ListItem
    isActive={false}
    onPress={() => {}}
    size="md"
    renderLeft={<DpIcon name={DpIcons.LogosDocplanner} />}
    renderRight={
      <ListItemRight label="Additional" icon={DpIcons.CaretCaretRight} />
    }
  >
    <ListItemTitle>Title</ListItemTitle>
    <ListItemSubtitle>Subtitle</ListItemSubtitle>
  </ListItem>
</MobileScreen>

<MobileScreen>
  <ListItem onPress={() => {}}>
    <ListItemTitle>Title</ListItemTitle>
  </ListItem>
  <DpSpacer />
  <ListItem
    onPress={() => {}}
    size="md"
    renderLeft={
      <DpCircle size="sm" color="blue" emphasis="low">
        <DpIcon name={DpIcons.ActionClose} />
      </DpCircle>
    }
  >
    <ListItemTitle>Title</ListItemTitle>
  </ListItem>
  <DpSpacer />
  <ListItem
    onPress={() => {}}
    renderLeft={<DpIcon name={DpIcons.LogosDocplanner} />}
  >
    <ListItemTitle>Title</ListItemTitle>
  </ListItem>
  <DpSpacer />
  <ListItem
    onPress={() => {}}
    renderLeft={<DpIcon name={DpIcons.LogosDocplanner} />}
    renderRight={<ListItemRight icon={DpIcons.CaretCaretRight} />}
  >
    <ListItemTitle>Title</ListItemTitle>
  </ListItem>
  <DpSpacer />
  <ListItem
    onPress={() => {}}
    renderLeft={<DpIcon name={DpIcons.LogosDocplanner} />}
    renderRight={
      <ListItemRight label="Additional" icon={DpIcons.CaretCaretRight} />
    }
  >
    <ListItemTitle>Title</ListItemTitle>
  </ListItem>
  <DpSpacer />
  <ListItem
    onPress={() => {}}
    size="md"
    renderLeft={<DpIcon name={DpIcons.LogosDocplanner} />}
    renderRight={<ListItemRight icon={DpIcons.CaretCaretRight} />}
  >
    <ListItemTitle>Title</ListItemTitle>
    <ListItemSubtitle>Subtitle</ListItemSubtitle>
  </ListItem>
  <DpSpacer />
  <ListItem
    onPress={() => {}}
    size="md"
    renderLeft={<DpIcon name={DpIcons.LogosDocplanner} />}
    renderRight={
      <ListItemRight label="Additional" icon={DpIcons.CaretCaretRight} />
    }
  >
    <ListItemTitle>Title</ListItemTitle>
    <ListItemSubtitle>Subtitle</ListItemSubtitle>
  </ListItem>
  <DpSpacer />
  <ListItem
    isActive={false}
    onPress={() => {}}
    size="md"
    renderLeft={<DpIcon name={DpIcons.LogosDocplanner} />}
    renderRight={
      <ListItemRight label="Additional" icon={DpIcons.CaretCaretRight} />
    }
  >
    <ListItemTitle>Title</ListItemTitle>
    <ListItemSubtitle>Subtitle</ListItemSubtitle>
  </ListItem>
</MobileScreen>

Multiple press areas

There are some cases when a list item can perform multiple actions depending which part of it is pressed. In this case you can use a combination of <ListItemLayout /> and <ListItemRight />.

<MobileScreen>
  <ListItemLayout
    renderLeft={
      <TouchableOpacity onPress={() => {}}>
        <ListItemTitle>Press</ListItemTitle>
        <ListItemSubtitle>here</ListItemSubtitle>
      </TouchableOpacity>
    }
    renderRight={
      <ListItemRight
        onPress={() => {}}
        label="or here"
        icon={DpIcons.ActionPlus}
      />
    }
  />
</MobileScreen>

<MobileScreen>
  <ListItemLayout
    renderLeft={
      <TouchableOpacity onPress={() => {}}>
        <ListItemTitle>Press</ListItemTitle>
        <ListItemSubtitle>here</ListItemSubtitle>
      </TouchableOpacity>
    }
    renderRight={
      <ListItemRight
        onPress={() => {}}
        label="or here"
        icon={DpIcons.ActionPlus}
      />
    }
  />
</MobileScreen>

Docplanner Mobile UI

ListItem

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Sizes

Active and inactive dot

Single press area

Multiple press areas

Sizes