function Caret()

in src/Caret.tsx [63:110]

• 38 lines of code
• 2 McCabe index (conditional complexity)

function Caret(props: CaretProps) {
  const theme = React.useContext(ThemeContext)
  const propsWithTheme = {...props, theme: props.theme ?? theme}
  const {bg} = getBg(propsWithTheme)
  const {borderColor} = getBorderColor(propsWithTheme)
  const {borderWidth} = getBorderWidth(propsWithTheme)
  const {size = 8, location = 'bottom'} = props
  const [edge, align] = getEdgeAlign(location)
  const perp = perpendicularEdge[edge]

  // note: these arrays represent points in the form [x, y]
  const a = [-size, 0]
  const b = [0, size]
  const c = [size, 0]

  // spaces are optional in path `d` attribute, and points are
  // represented in the form `x,y` -- which is what the arrays above
  // become when stringified!
  const triangle = `M${a}L${b}L${c}L${a}Z`
  const line = `M${a}L${b}L${c}`

  const transform = {
    top: `translate(${[size, size * 2]}) rotate(180)`,
    right: `translate(${[0, size]}) rotate(-90)`,
    bottom: `translate(${[size, 0]})`,
    left: `translate(${[size * 2, size]}) rotate(90)`
  }[edge]

  return (
    <svg
      width={size * 2}
      height={size * 2}
      style={{
        pointerEvents: 'none',
        position: 'absolute',
        ...getPosition(edge, align, size),
        // if align is set (top|right|bottom|left),
        // then we don't need an offset margin
        [`margin${perp}`]: align ? null : -size
      }}
    >
      <g transform={transform}>
        <path d={triangle} fill={bg} />
        <path d={line} fill="none" stroke={borderColor} strokeWidth={borderWidth} />
      </g>
    </svg>
  )
}