Docplanner Mobile UI

Edit page

Introduction

⚙️ – Core

🧬 – Organisms

Toast

A DpToast component, supports Android, IOS, Web, Windows

Properties

string | undefined

Autogenerated id

onClose

(() => void) | undefined

Trigger when toast is closed

onAction

(() => void) | undefined

On press action button

onPress

((id?: string | undefined) => () => void) | undefined

On press toast

actionText

string | undefined

Text of the action button

message

string | Element

required

Message on toast

placement

"top" | "bottom" | undefined

bottom

Toast position

icon

Icon to show on toast

type

info

🎨 Toast variant

emphasis

"high" | "low" | undefined

high

🎨 Color variant emphasis

duration

number | undefined

3000

Visible duration of toast

style

ViewStyle | undefined

Custom style for the toast container

toastHandler

(() => void) | undefined

Toast setter to be able to have default behavior

Hook Example

You can use hooks to call toasts everywhere, to do so, wrap DpToastContextProvider to your root component (index.js or App.js)

() => {
  const Screen = () => {
    const showToast = useToast()
    const [selectedType, setSelectedType] = useState('info')
    const [selectedEmphasis, setSelectedEmphasis] = useState('high')
    return (
      <View style={{ flexDirection: 'row' }}>
        <Picker
          style={{ marginRight: 10 }}
          onValueChange={(itemValue, itemIndex) =>
            setSelectedEmphasis(itemValue)
          }
        >
          <Picker.Item label="High" value="high" />
          <Picker.Item label="Low" value="low" />
        </Picker>
        <Picker
          style={{ marginRight: 10 }}
          onValueChange={(itemValue, itemIndex) => setSelectedType(itemValue)}
        >
          <Picker.Item label="Info" value={'info'} />
          <Picker.Item label="Success" value={'success'} />
          <Picker.Item label="Warning" value={'warning'} />
          <Picker.Item label="Danger" value={'danger'} />
        </Picker>
        <DpButton
          variant="primary"
          onPress={() => {
            showToast({
              actionText: 'Dismiss',
              icon: DpIcons.ActionLock,
              onAction: () => alert('Action'),
              message: 'Message Toast',
              type: selectedType,
              emphasis: selectedEmphasis,
              style: {
                width: '100%',
              },
            })
          }}
        >
          Open toast
        </DpButton>
      </View>
    )
  }
  const App = () => {
    return (
      <MobileScreen isWhite>
        <DpToastContextProvider placement="bottom" offset={20}>
          <Screen />
        </DpToastContextProvider>
      </MobileScreen>
    )
  }
  return <App />
}

() => {
  const Screen = () => {
    const showToast = useToast()
    const [selectedType, setSelectedType] = useState('info')
    const [selectedEmphasis, setSelectedEmphasis] = useState('high')
    return (
      <View style={{ flexDirection: 'row' }}>
        <Picker
          style={{ marginRight: 10 }}
          onValueChange={(itemValue, itemIndex) =>
            setSelectedEmphasis(itemValue)
          }
        >
          <Picker.Item label="High" value="high" />
          <Picker.Item label="Low" value="low" />
        </Picker>
        <Picker
          style={{ marginRight: 10 }}
          onValueChange={(itemValue, itemIndex) => setSelectedType(itemValue)}
        >
          <Picker.Item label="Info" value={'info'} />
          <Picker.Item label="Success" value={'success'} />
          <Picker.Item label="Warning" value={'warning'} />
          <Picker.Item label="Danger" value={'danger'} />
        </Picker>
        <DpButton
          variant="primary"
          onPress={() => {
            showToast({
              actionText: 'Dismiss',
              icon: DpIcons.ActionLock,
              onAction: () => alert('Action'),
              message: 'Message Toast',
              type: selectedType,
              emphasis: selectedEmphasis,
              style: {
                width: '100%',
              },
            })
          }}
        >
          Open toast
        </DpButton>
      </View>
    )
  }
  const App = () => {
    return (
      <MobileScreen isWhite>
        <DpToastContextProvider placement="bottom" offset={20}>
          <Screen />
        </DpToastContextProvider>
      </MobileScreen>
    )
  }
  return <App />
}

Variants

<View style={{ flexDirection: 'row' }}>
  <View style={{ width: '50%' }}>
    <MobileScreen isWhite>
      <View style={{ alignItems: 'center' }}>
        <DpBaseToast
          type="info"
          message="Info toast"
          icon={DpIcons.ActionLock}
          actionText="Dismiss"
          onAction={() => {}}
          style={{ width: '100%' }}
        />
        <View style={{ marginBottom: 10 }} />
        <DpBaseToast
          type="info"
          message="Info toast"
          icon={DpIcons.ActionLock}
        />
      </View>
    </MobileScreen>
  </View>
  <View style={{ width: '50%' }}>
    <MobileScreen isWhite>
      <View style={{ alignItems: 'center' }}>
        <DpBaseToast
          type="success"
          message="Success toast"
          icon={DpIcons.ActionLock}
          actionText="Dismiss"
          onAction={() => {}}
          style={{ width: '100%' }}
        />
        <View style={{ marginBottom: 10 }} />
        <DpBaseToast
          type="success"
          message="Success toast"
          icon={DpIcons.ActionLock}
        />
      </View>
    </MobileScreen>
  </View>
</View>
<View style={{ marginBottom: 20, flexDirection: 'row' }}>
  <View style={{ width: '50%' }}>
    <MobileScreen isWhite>
      <View style={{ alignItems: 'center' }}>
        <DpBaseToast
          type="warning"
          message="Warning toast"
          icon={DpIcons.ActionLock}
          actionText="Dismiss"
          onAction={() => {}}
          style={{ width: '100%' }}
        />
        <View style={{ marginBottom: 10 }} />
        <DpBaseToast
          type="warning"
          message="Warning toast"
          icon={DpIcons.ActionLock}
        />
      </View>
    </MobileScreen>
  </View>
  <View style={{ width: '50%' }}>
    <MobileScreen isWhite>
      <View style={{ alignItems: 'center' }}>
        <DpBaseToast
          type="danger"
          message="Danger toast"
          icon={DpIcons.ActionLock}
          actionText="Dismiss"
          onAction={() => {}}
          style={{ width: '100%' }}
        />
        <View style={{ marginBottom: 10 }} />
        <DpBaseToast
          type="danger"
          message="Danger toast"
          icon={DpIcons.ActionLock}
        />
      </View>
    </MobileScreen>
  </View>
</View>

<View style={{ flexDirection: 'row' }}>
  <View style={{ width: '50%' }}>
    <MobileScreen isWhite>
      <View style={{ alignItems: 'center' }}>
        <DpBaseToast
          type="info"
          message="Info toast"
          icon={DpIcons.ActionLock}
          actionText="Dismiss"
          onAction={() => {}}
          style={{ width: '100%' }}
        />
        <View style={{ marginBottom: 10 }} />
        <DpBaseToast
          type="info"
          message="Info toast"
          icon={DpIcons.ActionLock}
        />
      </View>
    </MobileScreen>
  </View>
  <View style={{ width: '50%' }}>
    <MobileScreen isWhite>
      <View style={{ alignItems: 'center' }}>
        <DpBaseToast
          type="success"
          message="Success toast"
          icon={DpIcons.ActionLock}
          actionText="Dismiss"
          onAction={() => {}}
          style={{ width: '100%' }}
        />
        <View style={{ marginBottom: 10 }} />
        <DpBaseToast
          type="success"
          message="Success toast"
          icon={DpIcons.ActionLock}
        />
      </View>
    </MobileScreen>
  </View>
</View>
<View style={{ marginBottom: 20, flexDirection: 'row' }}>
  <View style={{ width: '50%' }}>
    <MobileScreen isWhite>
      <View style={{ alignItems: 'center' }}>
        <DpBaseToast
          type="warning"
          message="Warning toast"
          icon={DpIcons.ActionLock}
          actionText="Dismiss"
          onAction={() => {}}
          style={{ width: '100%' }}
        />
        <View style={{ marginBottom: 10 }} />
        <DpBaseToast
          type="warning"
          message="Warning toast"
          icon={DpIcons.ActionLock}
        />
      </View>
    </MobileScreen>
  </View>
  <View style={{ width: '50%' }}>
    <MobileScreen isWhite>
      <View style={{ alignItems: 'center' }}>
        <DpBaseToast
          type="danger"
          message="Danger toast"
          icon={DpIcons.ActionLock}
          actionText="Dismiss"
          onAction={() => {}}
          style={{ width: '100%' }}
        />
        <View style={{ marginBottom: 10 }} />
        <DpBaseToast
          type="danger"
          message="Danger toast"
          icon={DpIcons.ActionLock}
        />
      </View>
    </MobileScreen>
  </View>
</View>

Variations without Enfasis

<View style={{ flexDirection: 'row' }}>
  <View style={{ width: '50%' }}>
    <MobileScreen isWhite>
      <View style={{ alignItems: 'center' }}>
        <DpBaseToast
          type="info"
          emphasis="low"
          message="Info toast"
          icon={DpIcons.ActionLock}
          actionText="Dismiss"
          onAction={() => {}}
          style={{ width: '100%' }}
        />
        <View style={{ marginBottom: 10 }} />
        <DpBaseToast
          type="info"
          emphasis="low"
          message="Info toast"
          icon={DpIcons.ActionLock}
        />
      </View>
    </MobileScreen>
  </View>
  <View style={{ width: '50%' }}>
    <MobileScreen isWhite>
      <View style={{ alignItems: 'center' }}>
        <DpBaseToast
          emphasis="low"
          type="success"
          message="Success toast"
          icon={DpIcons.ActionLock}
          actionText="Dismiss"
          onAction={() => {}}
          style={{ width: '100%' }}
        />
        <View style={{ marginBottom: 10 }} />
        <DpBaseToast
          type="success"
          emphasis="low"
          message="Success toast"
          icon={DpIcons.ActionLock}
        />
      </View>
    </MobileScreen>
  </View>
</View>
<View style={{ marginBottom: 20, flexDirection: 'row' }}>
  <View style={{ width: '50%' }}>
    <MobileScreen isWhite>
      <View style={{ alignItems: 'center' }}>
        <DpBaseToast
          emphasis="low"
          type="warning"
          message="Warning toast"
          icon={DpIcons.ActionLock}
          actionText="Dismiss"
          onAction={() => {}}
          style={{ width: '100%' }}
        />
        <View style={{ marginBottom: 10 }} />
        <DpBaseToast
          emphasis="low"
          type="warning"
          message="Warning toast"
          icon={DpIcons.ActionLock}
        />
      </View>
    </MobileScreen>
  </View>
  <View style={{ width: '50%' }}>
    <MobileScreen isWhite>
      <View style={{ alignItems: 'center' }}>
        <DpBaseToast
          emphasis="low"
          type="danger"
          message="Danger toast"
          icon={DpIcons.ActionLock}
          actionText="Dismiss"
          onAction={() => {}}
          style={{ width: '100%' }}
        />
        <View style={{ marginBottom: 10 }} />
        <DpBaseToast
          type="danger"
          emphasis="low"
          message="Danger toast"
          icon={DpIcons.ActionLock}
        />
      </View>
    </MobileScreen>
  </View>
</View>

<View style={{ flexDirection: 'row' }}>
  <View style={{ width: '50%' }}>
    <MobileScreen isWhite>
      <View style={{ alignItems: 'center' }}>
        <DpBaseToast
          type="info"
          emphasis="low"
          message="Info toast"
          icon={DpIcons.ActionLock}
          actionText="Dismiss"
          onAction={() => {}}
          style={{ width: '100%' }}
        />
        <View style={{ marginBottom: 10 }} />
        <DpBaseToast
          type="info"
          emphasis="low"
          message="Info toast"
          icon={DpIcons.ActionLock}
        />
      </View>
    </MobileScreen>
  </View>
  <View style={{ width: '50%' }}>
    <MobileScreen isWhite>
      <View style={{ alignItems: 'center' }}>
        <DpBaseToast
          emphasis="low"
          type="success"
          message="Success toast"
          icon={DpIcons.ActionLock}
          actionText="Dismiss"
          onAction={() => {}}
          style={{ width: '100%' }}
        />
        <View style={{ marginBottom: 10 }} />
        <DpBaseToast
          type="success"
          emphasis="low"
          message="Success toast"
          icon={DpIcons.ActionLock}
        />
      </View>
    </MobileScreen>
  </View>
</View>
<View style={{ marginBottom: 20, flexDirection: 'row' }}>
  <View style={{ width: '50%' }}>
    <MobileScreen isWhite>
      <View style={{ alignItems: 'center' }}>
        <DpBaseToast
          emphasis="low"
          type="warning"
          message="Warning toast"
          icon={DpIcons.ActionLock}
          actionText="Dismiss"
          onAction={() => {}}
          style={{ width: '100%' }}
        />
        <View style={{ marginBottom: 10 }} />
        <DpBaseToast
          emphasis="low"
          type="warning"
          message="Warning toast"
          icon={DpIcons.ActionLock}
        />
      </View>
    </MobileScreen>
  </View>
  <View style={{ width: '50%' }}>
    <MobileScreen isWhite>
      <View style={{ alignItems: 'center' }}>
        <DpBaseToast
          emphasis="low"
          type="danger"
          message="Danger toast"
          icon={DpIcons.ActionLock}
          actionText="Dismiss"
          onAction={() => {}}
          style={{ width: '100%' }}
        />
        <View style={{ marginBottom: 10 }} />
        <DpBaseToast
          type="danger"
          emphasis="low"
          message="Danger toast"
          icon={DpIcons.ActionLock}
        />
      </View>
    </MobileScreen>
  </View>
</View>

With custom elements

<MobileScreen isWhite>
  <DpBaseToast
    icon={DpIcons.ActionLock}
    message={
      <View>
        <Text style={{ color: 'white' }}>Title</Text>
        <Text style={{ color: 'white' }}>Subtitle</Text>
      </View>
    }
    actionText={<Text style={{ color: 'white' }}>Dismiss</Text>}
    onAction={() => {}}
    style={{ width: '100%' }}
  />
</MobileScreen>

<MobileScreen isWhite>
  <DpBaseToast
    icon={DpIcons.ActionLock}
    message={
      <View>
        <Text style={{ color: 'white' }}>Title</Text>
        <Text style={{ color: 'white' }}>Subtitle</Text>
      </View>
    }
    actionText={<Text style={{ color: 'white' }}>Dismiss</Text>}
    onAction={() => {}}
    style={{ width: '100%' }}
  />
</MobileScreen>

Docplanner Mobile UI

Toast

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

Hook Example

Variants

Variations without Enfasis

With custom elements

Properties