transitions.js.flow 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. // @flow
  2. import type { Styles } from '../types/style'
  3. import PolishedError from '../internalHelpers/_errors'
  4. /**
  5. * Accepts any number of transition values as parameters for creating a single transition statement. You may also pass an array of properties as the first parameter that you would like to apply the same transition values to (second parameter).
  6. * @example
  7. * // Styles as object usage
  8. * const styles = {
  9. * ...transitions('opacity 1.0s ease-in 0s', 'width 2.0s ease-in 2s'),
  10. * ...transitions(['color', 'background-color'], '2.0s ease-in 2s')
  11. * }
  12. *
  13. * // styled-components usage
  14. * const div = styled.div`
  15. * ${transitions('opacity 1.0s ease-in 0s', 'width 2.0s ease-in 2s')};
  16. * ${transitions(['color', 'background-color'], '2.0s ease-in 2s'),};
  17. * `
  18. *
  19. * // CSS as JS Output
  20. *
  21. * div {
  22. * 'transition': 'opacity 1.0s ease-in 0s, width 2.0s ease-in 2s'
  23. * 'transition': 'color 2.0s ease-in 2s, background-color 2.0s ease-in 2s',
  24. * }
  25. */
  26. export default function transitions(...properties: Array<string | Array<string>>): Styles {
  27. if (Array.isArray(properties[0]) && properties.length === 2) {
  28. const value = properties[1]
  29. if (typeof value !== 'string') {
  30. throw new PolishedError(61)
  31. }
  32. const transitionsString = properties[0]
  33. .map((property: string): string => `${property} ${value}`)
  34. .join(', ')
  35. return {
  36. transition: transitionsString,
  37. }
  38. } else {
  39. return {
  40. transition: properties.join(', '),
  41. }
  42. }
  43. }