You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					67 lines
				
				1.6 KiB
			
		
		
			
		
	
	
					67 lines
				
				1.6 KiB
			| 
											3 years ago
										 | // @flow | ||
|  | import PolishedError from '../internalHelpers/_errors' | ||
|  | 
 | ||
|  | import type { Styles } from '../types/style' | ||
|  | 
 | ||
|  | /** | ||
|  |  * Shorthand for easily setting the animation property. Allows either multiple arrays with animations | ||
|  |  * or a single animation spread over the arguments. | ||
|  |  * @example | ||
|  |  * // Styles as object usage | ||
|  |  * const styles = { | ||
|  |  *   ...animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s']) | ||
|  |  * } | ||
|  |  * | ||
|  |  * // styled-components usage | ||
|  |  * const div = styled.div` | ||
|  |  *   ${animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])} | ||
|  |  * ` | ||
|  |  * | ||
|  |  * // CSS as JS Output | ||
|  |  * | ||
|  |  * div { | ||
|  |  *   'animation': 'rotate 1s ease-in-out, colorchange 2s' | ||
|  |  * } | ||
|  |  * @example | ||
|  |  * // Styles as object usage | ||
|  |  * const styles = { | ||
|  |  *   ...animation('rotate', '1s', 'ease-in-out') | ||
|  |  * } | ||
|  |  * | ||
|  |  * // styled-components usage | ||
|  |  * const div = styled.div` | ||
|  |  *   ${animation('rotate', '1s', 'ease-in-out')} | ||
|  |  * ` | ||
|  |  * | ||
|  |  * // CSS as JS Output | ||
|  |  * | ||
|  |  * div { | ||
|  |  *   'animation': 'rotate 1s ease-in-out' | ||
|  |  * } | ||
|  |  */ | ||
|  | export default function animation( | ||
|  |   ...args: Array<Array<string | number> | string | number> | ||
|  | ): Styles { | ||
|  |   // Allow single or multiple animations passed | ||
|  |   const multiMode = Array.isArray(args[0]) | ||
|  |   if (!multiMode && args.length > 8) { | ||
|  |     throw new PolishedError(64) | ||
|  |   } | ||
|  |   const code = args | ||
|  |     .map(arg => { | ||
|  |       if ((multiMode && !Array.isArray(arg)) || (!multiMode && Array.isArray(arg))) { | ||
|  |         throw new PolishedError(65) | ||
|  |       } | ||
|  |       if (Array.isArray(arg) && arg.length > 8) { | ||
|  |         throw new PolishedError(66) | ||
|  |       } | ||
|  | 
 | ||
|  |       return Array.isArray(arg) ? arg.join(' ') : arg | ||
|  |     }) | ||
|  |     .join(', ') | ||
|  | 
 | ||
|  |   return { | ||
|  |     animation: code, | ||
|  |   } | ||
|  | } |