-
Notifications
You must be signed in to change notification settings - Fork 46
/
FlexRow.js
62 lines (52 loc) · 1.3 KB
/
FlexRow.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
62
import React from 'react'
import PropTypes from 'prop-types'
import getClass from './classNames'
import createProps from './createProps'
import { ViewportSizeType } from './types'
const rowKeys = [
'start',
'center',
'end',
'top',
'middle',
'bottom',
'around',
'between',
]
const propTypes = {
reverse: PropTypes.bool,
start: ViewportSizeType,
center: ViewportSizeType,
end: ViewportSizeType,
top: ViewportSizeType,
middle: ViewportSizeType,
bottom: ViewportSizeType,
around: ViewportSizeType,
between: ViewportSizeType,
className: PropTypes.string,
tagName: PropTypes.string,
children: PropTypes.node,
}
function getRowClassNames(props) {
const modificators = [props.className, getClass('row')]
for (let i = 0; i < rowKeys.length; ++i) {
const key = rowKeys[i]
const value = props[key]
if (value) {
modificators.push(getClass(`${key}-${value}`))
}
}
if (props.reverse) {
modificators.push(getClass('reverse'))
}
return modificators
}
export function getRowProps(props) {
const rowPropsCreated = createProps(propTypes, props, getRowClassNames(props))
return rowPropsCreated;
}
const FlexRow = (props) => {
return React.createElement(props.tagName || 'div', getRowProps(props))
}
FlexRow.propTypes = propTypes
export default FlexRow;