borderWidth.js.flow 799 B

123456789101112131415161718192021222324252627282930
  1. // @flow
  2. import directionalProperty from '../helpers/directionalProperty'
  3. import type { Styles } from '../types/style'
  4. /**
  5. * Shorthand that accepts up to four values, including null to skip a value, and maps them to their respective directions.
  6. * @example
  7. * // Styles as object usage
  8. * const styles = {
  9. * ...borderWidth('12px', '24px', '36px', '48px')
  10. * }
  11. *
  12. * // styled-components usage
  13. * const div = styled.div`
  14. * ${borderWidth('12px', '24px', '36px', '48px')}
  15. * `
  16. *
  17. * // CSS as JS Output
  18. *
  19. * div {
  20. * 'borderTopWidth': '12px',
  21. * 'borderRightWidth': '24px',
  22. * 'borderBottomWidth': '36px',
  23. * 'borderLeftWidth': '48px'
  24. * }
  25. */
  26. export default function borderWidth(...values: Array<?string | ?number>): Styles {
  27. return directionalProperty('borderWidth', ...values)
  28. }