This repository has been archived by the owner on Mar 4, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 55
/
Grid.tsx
79 lines (69 loc) · 2.35 KB
/
Grid.tsx
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import { Accessibility } from '@fluentui/accessibility'
import * as customPropTypes from '@fluentui/react-proptypes'
import * as PropTypes from 'prop-types'
import * as React from 'react'
import {
UIComponent,
childrenExist,
RenderResultConfig,
UIComponentProps,
ChildrenComponentProps,
commonPropTypes,
ContentComponentProps,
rtlTextContainer,
} from '../../utils'
import { WithAsProp, withSafeTypeForAs } from '../../types'
export interface GridProps extends UIComponentProps, ChildrenComponentProps, ContentComponentProps {
/**
* Accessibility behavior if overridden by the user.
* @available gridBehavior, gridHorizontalBehavior
* */
accessibility?: Accessibility
/** The columns of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line. */
columns?: string | number
/** The rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line. */
rows?: string | number
}
class Grid extends UIComponent<WithAsProp<GridProps>> {
static displayName = 'Grid'
static className = 'ui-grid'
static propTypes = {
...commonPropTypes.createCommon({
content: false,
}),
columns: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
content: customPropTypes.every([
customPropTypes.disallow(['children']),
PropTypes.oneOfType([
PropTypes.arrayOf(customPropTypes.nodeContent),
customPropTypes.nodeContent,
]),
]),
rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
}
static defaultProps: WithAsProp<GridProps> = {
as: 'div',
}
renderComponent({
accessibility,
ElementType,
classes,
unhandledProps,
}: RenderResultConfig<any>): React.ReactNode {
const { children, content } = this.props
return (
<ElementType
className={classes.root}
{...rtlTextContainer.getAttributes({ forElements: [children, content] })}
{...accessibility.attributes.root}
{...unhandledProps}
>
{childrenExist(children) ? children : content}
</ElementType>
)
}
}
/**
* A Grid is a layout component that harmonizes negative space, by controlling both the row and column alignment.
*/
export default withSafeTypeForAs<typeof Grid, GridProps>(Grid)