-
-
Notifications
You must be signed in to change notification settings - Fork 209
/
position.js
61 lines (57 loc) · 1.52 KB
/
position.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
// @flow
import directionalProperty from '../helpers/directionalProperty'
const positionMap = ['absolute', 'fixed', 'relative', 'static', 'sticky']
/**
* The position shorthand accepts up to five values, including null to skip a value, and uses the directional-property mixin to map them to their respective directions. The first calue 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'
* }
*/
function position(positionKeyword: string|null, ...values: Array<?string>) {
if (positionMap.indexOf(positionKeyword) >= 0) {
return {
position: positionKeyword,
...directionalProperty('', ...values),
}
} else {
const firstValue = positionKeyword // in this case position is actually the first value
return directionalProperty('', firstValue, ...values)
}
}
export default position