position.js.flow 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. // @flow
  2. import directionalProperty from '../helpers/directionalProperty'
  3. import type { Styles } from '../types/style'
  4. const positionMap = ['absolute', 'fixed', 'relative', 'static', 'sticky']
  5. /**
  6. * Shorthand accepts up to five values, including null to skip a value, and maps them to their respective directions. The first value can optionally be a position keyword.
  7. * @example
  8. * // Styles as object usage
  9. * const styles = {
  10. * ...position('12px', '24px', '36px', '48px')
  11. * }
  12. *
  13. * // styled-components usage
  14. * const div = styled.div`
  15. * ${position('12px', '24px', '36px', '48px')}
  16. * `
  17. *
  18. * // CSS as JS Output
  19. *
  20. * div {
  21. * 'top': '12px',
  22. * 'right': '24px',
  23. * 'bottom': '36px',
  24. * 'left': '48px'
  25. * }
  26. *
  27. * // Styles as object usage
  28. * const styles = {
  29. * ...position('absolute', '12px', '24px', '36px', '48px')
  30. * }
  31. *
  32. * // styled-components usage
  33. * const div = styled.div`
  34. * ${position('absolute', '12px', '24px', '36px', '48px')}
  35. * `
  36. *
  37. * // CSS as JS Output
  38. *
  39. * div {
  40. * 'position': 'absolute',
  41. * 'top': '12px',
  42. * 'right': '24px',
  43. * 'bottom': '36px',
  44. * 'left': '48px'
  45. * }
  46. */
  47. export default function position(
  48. firstValue?: string | number | null,
  49. ...values: Array<?string | ?number>
  50. ): Styles {
  51. if (positionMap.indexOf(firstValue) >= 0 && firstValue) {
  52. return {
  53. ...directionalProperty('', ...values),
  54. position: firstValue,
  55. }
  56. } else {
  57. return directionalProperty('', firstValue, ...values)
  58. }
  59. }