Docplanner Mobile UI

Edit page

Icon

A simple component to represent any kind of steps or categories

Properties

name

string

required

Name of the icon

color

string | undefined

#627282

Color

size

"xs" | "sm" | "md" | "lg" | "xxs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | undefined

Size based on 4px scale

offset

"left" | "right" | "top" | "bottom" | undefined

Offset to better align the icon to content

onPress

(() => void) | undefined

onPress callback

isDisabled

boolean | undefined

Whether the press behavior is disabled.(it works only when onPress prop is defined)

CustomIcon

ComponentClass<{}, any> | FunctionComponent<{}> | undefined

Custom icon component, that you can get from https://oblador.github.io/react-native-vector-icons/.

All icons















































































































































































































































































































































































































































































































































() => {
  const [alertVisible, toggleAlert] = useState(false)
  const timeout = useRef(null)
  const handleCopy = icon => () => {
    timeout.current && clearTimeout(timeout.current)
    toggleAlert(false)
    navigator.clipboard.writeText(icon).then(() => toggleAlert(true))
  }
  useEffect(() => {
    if (alertVisible) {
      timeout.current = setTimeout(() => toggleAlert(false), 3000)
    }
    return () => {
      timeout.current && clearTimeout(timeout.current)
    }
  }, [alertVisible])
  const icons = getIconNames()
  return (
    <View>
      <Row
        style={{
          height: 100,
        }}
      >
        {alertVisible && (
          <Row>
            <DpIcon
              name={DpIcons.ActionCheckFilled}
              color={palette.turquoiseDark}
              size="md"
            />
            <Roboto color="turquoiseDark"> Icon name copied!</Roboto>
          </Row>
        )}
      </Row>
      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
        {icons.map(icon => (
          <DpIcon
            key={icon}
            onPress={handleCopy(icon)}
            name={icon}
            size="md"
          />
        ))}
      </View>
    </View>
  )
}

() => {
  const [alertVisible, toggleAlert] = useState(false)
  const timeout = useRef(null)
  const handleCopy = icon => () => {
    timeout.current && clearTimeout(timeout.current)
    toggleAlert(false)
    navigator.clipboard.writeText(icon).then(() => toggleAlert(true))
  }
  useEffect(() => {
    if (alertVisible) {
      timeout.current = setTimeout(() => toggleAlert(false), 3000)
    }
    return () => {
      timeout.current && clearTimeout(timeout.current)
    }
  }, [alertVisible])
  const icons = getIconNames()
  return (
    <View>
      <Row
        style={{
          height: 100,
        }}
      >
        {alertVisible && (
          <Row>
            <DpIcon
              name={DpIcons.ActionCheckFilled}
              color={palette.turquoiseDark}
              size="md"
            />
            <Roboto color="turquoiseDark"> Icon name copied!</Roboto>
          </Row>
        )}
      </Row>
      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
        {icons.map(icon => (
          <DpIcon
            key={icon}
            onPress={handleCopy(icon)}
            name={icon}
            size="md"
          />
        ))}
      </View>
    </View>
  )
}

Basic usage



<Row>
  <DpIcon name={DpIcons.LogosDocplanner} />
</Row>

<Row>
  <DpIcon name={DpIcons.LogosDocplanner} />
</Row>

Colors



<Row>
  <DpIcon color={palette.gray600} name={DpIcons.LogosDocplanner} />
  <DpIcon color={palette.blue} name={DpIcons.LogosDocplanner} />
  <DpIcon color={palette.turquoise} name={DpIcons.LogosDocplanner} />
  <DpIcon color={palette.purple} name={DpIcons.LogosDocplanner} />
  <DpIcon color={palette.yellow} name={DpIcons.LogosDocplanner} />
  <DpIcon color={palette.red} name={DpIcons.LogosDocplanner} />
</Row>

<Row>
  <DpIcon color={palette.gray600} name={DpIcons.LogosDocplanner} />
  <DpIcon color={palette.blue} name={DpIcons.LogosDocplanner} />
  <DpIcon color={palette.turquoise} name={DpIcons.LogosDocplanner} />
  <DpIcon color={palette.purple} name={DpIcons.LogosDocplanner} />
  <DpIcon color={palette.yellow} name={DpIcons.LogosDocplanner} />
  <DpIcon color={palette.red} name={DpIcons.LogosDocplanner} />
</Row>

Regular icon sizes



<Row>
  <DpIcon size="xs" name={DpIcons.LogosDocplanner} />
  <DpIcon size="md" name={DpIcons.LogosDocplanner} />
  <DpIcon size="lg" name={DpIcons.LogosDocplanner} />
  <DpIcon size="xl" name={DpIcons.LogosDocplanner} />
  <DpIcon size="2xl" name={DpIcons.LogosDocplanner} />
  <DpIcon size="3xl" name={DpIcons.LogosDocplanner} />
  <DpIcon size="4xl" name={DpIcons.LogosDocplanner} />
  <DpIcon size="5xl" name={DpIcons.LogosDocplanner} />
</Row>

<Row>
  <DpIcon size="xs" name={DpIcons.LogosDocplanner} />
  <DpIcon size="md" name={DpIcons.LogosDocplanner} />
  <DpIcon size="lg" name={DpIcons.LogosDocplanner} />
  <DpIcon size="xl" name={DpIcons.LogosDocplanner} />
  <DpIcon size="2xl" name={DpIcons.LogosDocplanner} />
  <DpIcon size="3xl" name={DpIcons.LogosDocplanner} />
  <DpIcon size="4xl" name={DpIcons.LogosDocplanner} />
  <DpIcon size="5xl" name={DpIcons.LogosDocplanner} />
</Row>

Clickable icon sizes

Please note extra bit of padding around the icon to make the clickable area bigger.



<Row>
  <DpIcon onPress={() => {}} size="xs" name={DpIcons.LogosDocplanner} />
  <DpIcon onPress={() => {}} size="md" name={DpIcons.LogosDocplanner} />
  <DpIcon onPress={() => {}} size="lg" name={DpIcons.LogosDocplanner} />
  <DpIcon onPress={() => {}} size="xl" name={DpIcons.LogosDocplanner} />
  <DpIcon onPress={() => {}} size="2xl" name={DpIcons.LogosDocplanner} />
  <DpIcon onPress={() => {}} size="3xl" name={DpIcons.LogosDocplanner} />
  <DpIcon onPress={() => {}} size="4xl" name={DpIcons.LogosDocplanner} />
  <DpIcon onPress={() => {}} size="5xl" name={DpIcons.LogosDocplanner} />
</Row>

<Row>
  <DpIcon onPress={() => {}} size="xs" name={DpIcons.LogosDocplanner} />
  <DpIcon onPress={() => {}} size="md" name={DpIcons.LogosDocplanner} />
  <DpIcon onPress={() => {}} size="lg" name={DpIcons.LogosDocplanner} />
  <DpIcon onPress={() => {}} size="xl" name={DpIcons.LogosDocplanner} />
  <DpIcon onPress={() => {}} size="2xl" name={DpIcons.LogosDocplanner} />
  <DpIcon onPress={() => {}} size="3xl" name={DpIcons.LogosDocplanner} />
  <DpIcon onPress={() => {}} size="4xl" name={DpIcons.LogosDocplanner} />
  <DpIcon onPress={() => {}} size="5xl" name={DpIcons.LogosDocplanner} />
</Row>

Clickable icon disabled



<Row>
  <DpIcon
    onPress={() => {}}
    size="xl"
    name={DpIcons.LogosDocplanner}
    isDisabled={true}
  />
</Row>

<Row>
  <DpIcon
    onPress={() => {}}
    size="xl"
    name={DpIcons.LogosDocplanner}
    isDisabled={true}
  />
</Row>

Offset

Having an extra bit of padding in a clickable icon sometimes makes it difficult to align it properly. For this reason, we added offset prop that neutralizes this padding with a negative margin.

Problem



First item

Second item

<View>
  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
    <DpIcon onPress={() => {}} size="sm" name={DpIcons.ActionClose} />
    <Roboto>First item</Roboto>
  </View>
  <DpDivider />
  <View
    style={{
      flexDirection: 'row',
      alignItems: 'center',
      paddingVertical: 12,
    }}
  >
    <Roboto>Second item</Roboto>
  </View>
</View>

<View>
  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
    <DpIcon onPress={() => {}} size="sm" name={DpIcons.ActionClose} />
    <Roboto>First item</Roboto>
  </View>
  <DpDivider />
  <View
    style={{
      flexDirection: 'row',
      alignItems: 'center',
      paddingVertical: 12,
    }}
  >
    <Roboto>Second item</Roboto>
  </View>
</View>

Solution

Adding offset to <DpIcon />



First item

Second item

<View>
  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
    <DpIcon
      onPress={() => {}}
      offset="left"
      size="sm"
      name={DpIcons.ActionClose}
    />
    <Roboto>First item</Roboto>
  </View>
  <DpDivider />
  <View
    style={{
      flexDirection: 'row',
      alignItems: 'center',
      paddingVertical: 12,
    }}
  >
    <Roboto>Second item</Roboto>
  </View>
</View>

<View>
  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
    <DpIcon
      onPress={() => {}}
      offset="left"
      size="sm"
      name={DpIcons.ActionClose}
    />
    <Roboto>First item</Roboto>
  </View>
  <DpDivider />
  <View
    style={{
      flexDirection: 'row',
      alignItems: 'center',
      paddingVertical: 12,
    }}
  >
    <Roboto>Second item</Roboto>
  </View>
</View>

Docplanner Mobile UI

Icon

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

Properties