-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.tsx
132 lines (119 loc) · 4.24 KB
/
index.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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
import React from 'react';
import { GestureResponderEvent, StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
import { getColor } from '../../styles/colors';
import { createIcon, styleReferenceBreaker } from '../../helpers';
import { Text } from '../Text';
import { Button } from '../Button';
import { defaultText } from '../../constants/defaultText';
import CloseIcon from '@carbon/icons/es/close/20';
import WarningFilledIcon from '@carbon/icons/es/warning--filled/20';
import CheckmarkFilledIcon from '@carbon/icons/es/checkmark--filled/20';
import { Loading } from '../Loading';
export type FileUploaderItemProps = {
/** Name of the file */
name: string;
/** Status of the file upload (default is edit) */
status?: 'uploading' | 'edit' | 'complete';
/** Error text to show when invalid */
errorTitle?: string;
/** Error details to show when invalid */
errorDetails?: string;
/** Callback when the remove button is pressed. Will not show remove icon if not set or if type is not edit/undefined or invalid=true. */
onDelete?: (event: GestureResponderEvent) => void;
/** Indicate if file is invalid */
invalid?: boolean;
/** Text to use for delete file button (accessibility). Defaults to ENGLISH "Delete" */
deleteFileButtonText?: string;
/** Style to set on the item */
style?: StyleProp<ViewStyle>;
/** Direct props to set on the React Native component (including iOS and Android specific props). Most use cases should not need this. */
componentProps?: ViewProps;
};
export class FileUploaderItem extends React.Component<FileUploaderItemProps> {
private get styles() {
return StyleSheet.create({
wrapper: {
backgroundColor: getColor('layer01'),
},
mainWrapper: {
flexDirection: 'row',
minHeight: 48,
},
text: {
padding: 13,
paddingRight: 16,
paddingLeft: 16,
flex: 1,
},
indicator: {
paddingLeft: 13,
paddingTop: 14,
height: 48,
width: 48,
},
loadingIndicator: {
marginTop: 4,
marginLeft: 3,
},
errorWrapper: {
borderTopColor: getColor('borderSubtle01'),
borderTopWidth: 1,
padding: 16,
paddingTop: 15,
paddingBottom: 15,
},
errorTitle: {
color: getColor('supportError'),
},
});
}
private get visualIndicator(): React.ReactNode {
const { status, invalid } = this.props;
if (invalid) {
return <View style={this.styles.indicator}>{createIcon(WarningFilledIcon, 20, 20, getColor('supportError'))}</View>;
} else if (status === 'uploading') {
return (
<View style={this.styles.indicator}>
<Loading style={this.styles.loadingIndicator} type="small" />
</View>
);
} else if (status === 'complete') {
return <View style={this.styles.indicator}>{createIcon(CheckmarkFilledIcon, 20, 20, getColor('supportInfo'))}</View>;
}
return null;
}
private get deleteItem(): React.ReactNode {
const { status, invalid, onDelete, deleteFileButtonText } = this.props;
if (typeof onDelete === 'function') {
if (invalid || !status || status === 'edit') {
return <Button kind="ghost" overrideColor={getColor('iconPrimary')} text={deleteFileButtonText || defaultText.deleteFile} iconOnlyMode={true} icon={CloseIcon} onPress={onDelete} />;
}
}
return null;
}
private get errorArea(): React.ReactNode {
const { errorDetails, errorTitle, invalid } = this.props;
if (invalid && (errorDetails || errorTitle)) {
return (
<View style={this.styles.errorWrapper}>
{!!errorTitle && <Text style={this.styles.errorTitle} text={errorTitle} />}
{!!errorDetails && <Text text={errorDetails} />}
</View>
);
}
return null;
}
render(): React.ReactNode {
const { componentProps, style, name } = this.props;
return (
<View style={styleReferenceBreaker(this.styles.wrapper, style)} {...(componentProps || {})}>
<View style={this.styles.mainWrapper}>
<Text style={this.styles.text} text={name} breakMode="middle" />
{this.visualIndicator}
{this.deleteItem}
</View>
{this.errorArea}
</View>
);
}
}