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
// @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,
|
|
}
|
|
}
|