OuterBorder (for React Native)

OuterBorder.coffee

{Component, Device} = require "modx"

hexToRgb = require "hex-rgb"

type = Component "OuterBorder"

type.defineProps
  style: Style
  child: Element
  width: Number.withDefault 1 / Device.scale
  color: String.withDefault "#000"
  opacity: Number.withDefault 1
  radius: Number

type.defineReactions

  _borderColor: ->
    rgb = hexToRgb(unwrap @props.color).join ","
    opacity = unwrap @props.opacity
    "rgba(#{rgb}, #{opacity})"

  _borderRadius: ->
    width = unwrap @props.width
    radius = unwrap @props.radius
    radius + width

type.render ->

  style =
    borderColor: @_borderColor
    borderRadius: @_borderRadius
    borderWidth: @props.width

  return View
    style: [@props.style, style]
    children: @props.child

module.exports = type.build()

unwrap = (x) ->
  if isType x, AnimatedValue
  then x.get()
  else x

Global dependencies:

• isType
• AnimatedValue
• Style, Element
• View