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.
		
		
		
		
		
			
		
			
				
					74 lines
				
				1.8 KiB
			
		
		
			
		
	
	
					74 lines
				
				1.8 KiB
			| 
								 
											3 years ago
										 
									 | 
							
								"use strict";
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								exports.__esModule = true;
							 | 
						||
| 
								 | 
							
								exports["default"] = animation;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var _errors = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("../internalHelpers/_errors"));
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/**
							 | 
						||
| 
								 | 
							
								 * 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'
							 | 
						||
| 
								 | 
							
								 * }
							 | 
						||
| 
								 | 
							
								 */
							 | 
						||
| 
								 | 
							
								function animation() {
							 | 
						||
| 
								 | 
							
								  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
							 | 
						||
| 
								 | 
							
								    args[_key] = arguments[_key];
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  // Allow single or multiple animations passed
							 | 
						||
| 
								 | 
							
								  var multiMode = Array.isArray(args[0]);
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  if (!multiMode && args.length > 8) {
							 | 
						||
| 
								 | 
							
								    throw new _errors["default"](64);
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  var code = args.map(function (arg) {
							 | 
						||
| 
								 | 
							
								    if (multiMode && !Array.isArray(arg) || !multiMode && Array.isArray(arg)) {
							 | 
						||
| 
								 | 
							
								      throw new _errors["default"](65);
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    if (Array.isArray(arg) && arg.length > 8) {
							 | 
						||
| 
								 | 
							
								      throw new _errors["default"](66);
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    return Array.isArray(arg) ? arg.join(' ') : arg;
							 | 
						||
| 
								 | 
							
								  }).join(', ');
							 | 
						||
| 
								 | 
							
								  return {
							 | 
						||
| 
								 | 
							
								    animation: code
							 | 
						||
| 
								 | 
							
								  };
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								module.exports = exports.default;
							 |