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
|
import * as React from 'react'
import { View, Text, TextStyle, ViewStyle } from 'react-native'
const ROOT: ViewStyle = { backgroundColor: '#eee' }
const TITLE: TextStyle = { fontWeight: '600', color: '#3d3d3d' }
const TITLE_WRAPPER: ViewStyle = {}
const USE_CASE_WRAPPER: ViewStyle = {
position: 'absolute',
top: 0,
left: 0,
right: 0,
borderTopColor: '#e6e6e6',
borderTopWidth: 1,
flexDirection: 'row',
}
const USE_CASE: TextStyle = {
fontSize: 10,
color: '#666',
paddingHorizontal: 4,
paddingBottom: 2,
}
const USAGE: TextStyle = { color: '#666', fontSize: 10, paddingTop: 0 }
const HEADER: ViewStyle = {
paddingTop: 20,
paddingBottom: 10,
paddingHorizontal: 10,
borderBottomColor: '#e6e6e6',
borderBottomWidth: 1,
}
const COMPONENT: ViewStyle = { backgroundColor: '#fff' }
export interface UseCaseProps {
/** The title. */
text: string
/** When should we be using this? */
usage?: string
/** The component use case. */
children: React.ReactNode
/** A style override. Rarely used. */
style?: ViewStyle
/** Don't use any padding because it's important to see the spacing. */
noPad?: boolean
/** Don't use background color because it's important to see the color. */
noBackground?: boolean
}
export function UseCase(props: UseCaseProps) {
const style: ViewStyle = {
...COMPONENT,
...{ padding: props.noPad ? 0 : 10 },
...{
backgroundColor: props.noBackground
? 'rgba(0,0,0,0)'
: COMPONENT.backgroundColor,
},
...props.style,
}
return (
<View style={ROOT}>
<View style={HEADER}>
<View style={USE_CASE_WRAPPER}>
<Text style={USE_CASE}>Use Case</Text>
</View>
<View style={TITLE_WRAPPER}>
<Text style={TITLE}>{props.text}</Text>
</View>
{props.usage ? <Text style={USAGE}>{props.usage}</Text> : null}
</View>
<View style={style}>{props.children}</View>
</View>
)
}
|
