borderRadius.js.flow 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. // @flow
  2. import capitalizeString from '../internalHelpers/_capitalizeString'
  3. import PolishedError from '../internalHelpers/_errors'
  4. import type { Styles } from '../types/style'
  5. /**
  6. * Shorthand that accepts a value for side and a value for radius and applies the radius value to both corners of the side.
  7. * @example
  8. * // Styles as object usage
  9. * const styles = {
  10. * ...borderRadius('top', '5px')
  11. * }
  12. *
  13. * // styled-components usage
  14. * const div = styled.div`
  15. * ${borderRadius('top', '5px')}
  16. * `
  17. *
  18. * // CSS as JS Output
  19. *
  20. * div {
  21. * 'borderTopRightRadius': '5px',
  22. * 'borderTopLeftRadius': '5px',
  23. * }
  24. */
  25. export default function borderRadius(side: string, radius: string | number): Styles {
  26. const uppercaseSide = capitalizeString(side)
  27. if (!radius && radius !== 0) {
  28. throw new PolishedError(62)
  29. }
  30. if (uppercaseSide === 'Top' || uppercaseSide === 'Bottom') {
  31. return {
  32. [`border${uppercaseSide}RightRadius`]: radius,
  33. [`border${uppercaseSide}LeftRadius`]: radius,
  34. }
  35. }
  36. if (uppercaseSide === 'Left' || uppercaseSide === 'Right') {
  37. return {
  38. [`borderTop${uppercaseSide}Radius`]: radius,
  39. [`borderBottom${uppercaseSide}Radius`]: radius,
  40. }
  41. }
  42. throw new PolishedError(63)
  43. }