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.
		
		
		
		
		
			
		
			
				
					63 lines
				
				1.4 KiB
			
		
		
			
		
	
	
					63 lines
				
				1.4 KiB
			| 
											3 years ago
										 | // @flow | ||
|  | import directionalProperty from '../helpers/directionalProperty' | ||
|  | 
 | ||
|  | import type { Styles } from '../types/style' | ||
|  | 
 | ||
|  | const positionMap = ['absolute', 'fixed', 'relative', 'static', 'sticky'] | ||
|  | 
 | ||
|  | /** | ||
|  |  * 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. | ||
|  |  * @example | ||
|  |  * // Styles as object usage | ||
|  |  * const styles = { | ||
|  |  *   ...position('12px', '24px', '36px', '48px') | ||
|  |  * } | ||
|  |  * | ||
|  |  * // styled-components usage | ||
|  |  * const div = styled.div` | ||
|  |  *   ${position('12px', '24px', '36px', '48px')} | ||
|  |  * ` | ||
|  |  * | ||
|  |  * // CSS as JS Output | ||
|  |  * | ||
|  |  * div { | ||
|  |  *   'top': '12px', | ||
|  |  *   'right': '24px', | ||
|  |  *   'bottom': '36px', | ||
|  |  *   'left': '48px' | ||
|  |  * } | ||
|  |  * | ||
|  |  * // Styles as object usage | ||
|  |  * const styles = { | ||
|  |  *   ...position('absolute', '12px', '24px', '36px', '48px') | ||
|  |  * } | ||
|  |  * | ||
|  |  * // styled-components usage | ||
|  |  * const div = styled.div` | ||
|  |  *   ${position('absolute', '12px', '24px', '36px', '48px')} | ||
|  |  * ` | ||
|  |  * | ||
|  |  * // CSS as JS Output | ||
|  |  * | ||
|  |  * div { | ||
|  |  *   'position': 'absolute', | ||
|  |  *   'top': '12px', | ||
|  |  *   'right': '24px', | ||
|  |  *   'bottom': '36px', | ||
|  |  *   'left': '48px' | ||
|  |  * } | ||
|  |  */ | ||
|  | export default function position( | ||
|  |   firstValue?: string | number | null, | ||
|  |   ...values: Array<?string | ?number> | ||
|  | ): Styles { | ||
|  |   if (positionMap.indexOf(firstValue) >= 0 && firstValue) { | ||
|  |     return { | ||
|  |       ...directionalProperty('', ...values), | ||
|  |       position: firstValue, | ||
|  |     } | ||
|  |   } else { | ||
|  |     return directionalProperty('', firstValue, ...values) | ||
|  |   } | ||
|  | } |