-
Notifications
You must be signed in to change notification settings - Fork 692
/
ColorPickerDialogHeader.tsx
52 lines (46 loc) · 1.46 KB
/
ColorPickerDialogHeader.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
import _ from 'lodash';
import React from 'react';
import {StyleSheet} from 'react-native';
import View from '../view';
import Button from '../button';
import Assets from '../../assets';
import {Colors} from '../../style';
import {ColorPickerDialogProps} from './ColorPickerDialog';
import {BORDER_RADIUS} from './ColorPickerPresenter';
type HeaderProps = Pick<ColorPickerDialogProps, 'doneButtonColor' | 'accessibilityLabels' | 'testID'> & {
valid: boolean;
onDismiss: () => void;
onDonePressed: () => void;
};
const Header = (props: HeaderProps) => {
const {onDismiss, accessibilityLabels, testID, doneButtonColor, valid, onDonePressed} = props;
return (
<View row spread bg-$backgroundDefault paddingH-20 style={styles.header}>
<Button
link
iconSource={Assets.icons.x}
iconStyle={{tintColor: Colors.$iconDefault}}
onPress={onDismiss}
accessibilityLabel={_.get(accessibilityLabels, 'dismissButton')}
testID={`${testID}.dialog.cancel`}
/>
<Button
color={doneButtonColor}
disabled={!valid}
link
iconSource={Assets.icons.check}
onPress={onDonePressed}
accessibilityLabel={_.get(accessibilityLabels, 'doneButton')}
testID={`${testID}.dialog.done`}
/>
</View>
);
};
export default Header;
const styles = StyleSheet.create({
header: {
height: 56,
borderTopLeftRadius: BORDER_RADIUS,
borderTopRightRadius: BORDER_RADIUS
}
});