Skip to content

Commit 3a9ced6

Browse files
testshallpasstestshallpass
authored
Merge pull request #270 from testshallpass/consolidate-components
consolidate imageview, TextView and CancelButton; rename constants to…
2 parents 4bbb4de + 27dfbbd commit 3a9ced6

18 files changed

+133
-369
lines changed

‎CancelButton.js‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎DropdownAlert.js‎

Lines changed: 69 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import {
77
Animated,
88
StatusBar,
99
PanResponder,
10+
Image,
11+
Text,
1012
} from 'react-native';
1113
import PropTypes from 'prop-types';
1214
import {
@@ -18,10 +20,7 @@ import {
1820
HEIGHT,
1921
getDefaultStatusBarStyle,
2022
getDefaultStatusBarBackgroundColor,
21-
} from './constants';
22-
import TextView from './TextView';
23-
import ImageView from './imageview';
24-
import CancelButton from './CancelButton';
23+
} from './Utils';
2524
import Queue from './Queue';
2625

2726
export default class DropdownAlert extends Component {
@@ -129,7 +128,6 @@ export default class DropdownAlert extends Component {
129128
panResponderEnabled: true,
130129
wrapperStyle: null,
131130
containerStyle: {
132-
padding: 16,
133131
flexDirection: 'row',
134132
backgroundColor: '#202020',
135133
},
@@ -152,24 +150,24 @@ export default class DropdownAlert extends Component {
152150
backgroundColor: 'transparent',
153151
},
154152
imageStyle: {
155-
padding: 8,
156153
width: DEFAULT_IMAGE_DIMENSIONS,
157154
height: DEFAULT_IMAGE_DIMENSIONS,
158155
alignSelf: 'center',
159156
},
160157
cancelBtnImageStyle: {
161-
padding: 8,
162158
width: DEFAULT_IMAGE_DIMENSIONS,
163159
height: DEFAULT_IMAGE_DIMENSIONS,
160+
},
161+
cancelBtnStyle: {
164162
alignSelf: 'center',
165163
},
166164
defaultContainer: {
167-
padding: 8,
168165
flexDirection: 'row',
166+
padding: 8,
169167
},
170168
defaultTextContainer: {
171169
flex: 1,
172-
padding: 8,
170+
paddingHorizontal: 8,
173171
},
174172
translucent: false,
175173
activeStatusBarStyle: 'light-content',
@@ -231,7 +229,7 @@ export default class DropdownAlert extends Component {
231229
this._onDonePan(event, gestureState),
232230
});
233231
};
234-
_onShouldStartPan = (event, gestureState) => {
232+
_onShouldStartPan = () => {
235233
return this.props.panResponderEnabled;
236234
};
237235
_onShouldMovePan = (event, gestureState) => {
@@ -254,7 +252,7 @@ export default class DropdownAlert extends Component {
254252
this.closeAction(ACTION.pan);
255253
}
256254
};
257-
getStringValue(value) {
255+
getStringValue = (value) => {
258256
try {
259257
if (typeof value !== 'string') {
260258
if (Array.isArray(value)) {
@@ -269,7 +267,7 @@ export default class DropdownAlert extends Component {
269267
} catch (error) {
270268
return error.toString();
271269
}
272-
}
270+
};
273271
alertWithType = async (
274272
type = '',
275273
title = '',
@@ -426,7 +424,7 @@ export default class DropdownAlert extends Component {
426424
const end = this.getEndDelta(height, endDelta);
427425
return [start, end];
428426
};
429-
getStyleForType(type) {
427+
getStyleForType = (type) => {
430428
const {defaultContainer} = this.props;
431429
switch (type) {
432430
case TYPE.info:
@@ -455,8 +453,8 @@ export default class DropdownAlert extends Component {
455453
StyleSheet.flatten(this.props.containerStyle),
456454
];
457455
}
458-
}
459-
getSourceForType(type) {
456+
};
457+
getSourceForType = (type) => {
460458
switch (type) {
461459
case TYPE.info:
462460
return this.props.infoImageSrc;
@@ -469,8 +467,8 @@ export default class DropdownAlert extends Component {
469467
default:
470468
return this.props.imageSrc;
471469
}
472-
}
473-
getBackgroundColorForType(type) {
470+
};
471+
getBackgroundColorForType = (type) => {
474472
switch (type) {
475473
case TYPE.info:
476474
return this.props.infoColor;
@@ -483,8 +481,8 @@ export default class DropdownAlert extends Component {
483481
default:
484482
return this.props.containerStyle.backgroundColor;
485483
}
486-
}
487-
_onLayoutEvent(event) {
484+
};
485+
_onLayoutEvent = (event) => {
488486
const {height} = event.nativeEvent.layout;
489487
if (height > this.state.height) {
490488
const {startDelta, endDelta} = this.props;
@@ -494,63 +492,75 @@ export default class DropdownAlert extends Component {
494492
this.setState({height});
495493
}
496494
}
497-
}
498-
_renderImage(source) {
499-
if (this.props.renderImage) {
500-
return this.props.renderImage(this.props, this.alertData);
495+
};
496+
_renderImage = (source, imageStyle) => {
497+
const {renderImage} = this.props;
498+
if (renderImage) {
499+
return renderImage(this.props, this.alertData);
501500
}
502-
return (
503-
<ImageView
504-
style={StyleSheet.flatten(this.props.imageStyle)}
505-
source={source}
506-
/>
507-
);
508-
}
509-
_renderTitle() {
501+
if (!source) {
502+
return null;
503+
}
504+
let style = imageStyle;
505+
if (!style.width) {
506+
style.width = DEFAULT_IMAGE_DIMENSIONS;
507+
}
508+
if (!style.height) {
509+
style.height = DEFAULT_IMAGE_DIMENSIONS;
510+
}
511+
const isRemote = typeof source === 'string';
512+
const src = isRemote ? {uri: source} : source;
513+
return <Image style={style} source={src} />;
514+
};
515+
_renderTitle = () => {
510516
if (this.props.renderTitle) {
511517
return this.props.renderTitle(this.props, this.alertData);
512518
}
513519
const {titleTextProps, titleStyle, titleNumOfLines} = this.props;
514520
return (
515-
<TextView
521+
<Text
516522
{...titleTextProps}
517-
style={StyleSheet.flatten(titleStyle)}
518-
numberOfLines={titleNumOfLines}
519-
text={this.alertData.title}
520-
/>
523+
style={titleStyle}
524+
numberOfLines={titleNumOfLines}>
525+
{this.alertData.title}
526+
</Text>
521527
);
522-
}
523-
_renderMessage() {
528+
};
529+
_renderMessage = () => {
524530
if (this.props.renderMessage) {
525531
return this.props.renderMessage(this.props, this.alertData);
526532
}
527533
const {messageTextProps, messageStyle, messageNumOfLines} = this.props;
528534
return (
529-
<TextView
535+
<Text
530536
{...messageTextProps}
531-
style={StyleSheet.flatten(messageStyle)}
532-
numberOfLines={messageNumOfLines}
533-
text={this.alertData.message}
534-
/>
537+
style={messageStyle}
538+
numberOfLines={messageNumOfLines}>
539+
{this.alertData.message}
540+
</Text>
535541
);
536-
}
537-
_renderCancel(show = false) {
542+
};
543+
_renderCancel = (show = false) => {
538544
if (!show) {
539545
return null;
540546
}
541-
if (this.props.renderCancel) {
542-
return this.props.renderCancel(this.props, this.alertData);
543-
} else {
544-
const {cancelBtnImageSrc, cancelBtnImageStyle} = this.props;
545-
return (
546-
<CancelButton
547-
imageStyle={cancelBtnImageStyle}
548-
imageSrc={cancelBtnImageSrc}
549-
onPress={() => this.closeAction(ACTION.cancel)}
550-
/>
551-
);
547+
const {
548+
renderCancel,
549+
cancelBtnStyle,
550+
cancelBtnImageSrc,
551+
cancelBtnImageStyle,
552+
} = this.props;
553+
if (renderCancel) {
554+
return renderCancel(this.props, this.alertData);
552555
}
553-
}
556+
return (
557+
<TouchableOpacity
558+
style={cancelBtnStyle}
559+
onPress={() => this.closeAction(ACTION.cancel)}>
560+
{this._renderImage(cancelBtnImageSrc, cancelBtnImageStyle)}
561+
</TouchableOpacity>
562+
);
563+
};
554564
render() {
555565
const {isOpen} = this.state;
556566
if (!isOpen) {
@@ -571,6 +581,7 @@ export default class DropdownAlert extends Component {
571581
translucent,
572582
updateStatusBar,
573583
showCancel,
584+
imageStyle,
574585
} = this.props;
575586
const {animationValue, topValue, height} = this.state;
576587
const {type, payload} = this.alertData;
@@ -632,7 +643,7 @@ export default class DropdownAlert extends Component {
632643
accessible={accessible}>
633644
<View style={style}>
634645
<ContentView style={StyleSheet.flatten(contentContainerStyle)}>
635-
{this._renderImage(imageSrc)}
646+
{this._renderImage(imageSrc, imageStyle)}
636647
<View style={StyleSheet.flatten(defaultTextContainer)}>
637648
{this._renderTitle()}
638649
{this._renderMessage()}

‎Example/App.js‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {useRef, useState} from 'react';
1+
import React, {useRef, useState, useEffect} from 'react';
22
import {StyleSheet, SafeAreaView, Text, View} from 'react-native';
33
import {
44
PURPLE_COLOR,
@@ -12,7 +12,23 @@ import DropdownAlert from 'react-native-dropdownalert';
1212

1313
const App = () => {
1414
const [queueSize, setQueueSize] = useState(0);
15-
let dropDownAlertRef = useRef(null);
15+
let dropDownAlertRef = useRef();
16+
17+
useEffect(() => {
18+
_fetchData();
19+
}, []);
20+
21+
const _fetchData = async () => {
22+
try {
23+
dropDownAlertRef.alertWithType('info', 'Info', 'Start fetch data');
24+
const response = await fetch('https://httpbin.org/uuid');
25+
const {uuid} = await response.json();
26+
dropDownAlertRef.alertWithType('success', 'Success', uuid);
27+
throw 'Error fetch data'; // example thrown error
28+
} catch (error) {
29+
dropDownAlertRef.alertWithType('error', 'Error', error);
30+
}
31+
};
1632

1733
const _onProgrammaticClose = () => {
1834
dropDownAlertRef.closeAction();
@@ -72,24 +88,28 @@ const App = () => {
7288
};
7389

7490
const _onClose = data => {
75-
console.log(data);
91+
_log(data);
7692
_updateQueueSize();
7793
};
7894

7995
const _onCancel = data => {
80-
console.log(data);
96+
_log(data);
8197
_updateQueueSize();
8298
};
8399

84100
const _onTap = data => {
85-
console.log(data);
101+
_log(data);
86102
_updateQueueSize();
87103
};
88104

89105
const _updateQueueSize = () => {
90106
setQueueSize(dropDownAlertRef.getQueueSize());
91107
};
92108

109+
const _log = data => {
110+
console.log(data);
111+
};
112+
93113
return (
94114
<View style={styles.container}>
95115
<SafeAreaView>

‎README.md‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@
44
[![npm version](https://img.shields.io/npm/v/react-native-dropdownalert.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/react-native-dropdownalert)
55
[![npm version](https://img.shields.io/npm/dm/react-native-dropdownalert.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/react-native-dropdownalert)
66
[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge)](https://raw.github.com/testshallpass/react-native-dropdownalert/master/LICENSE)
7-
[![Build Status](https://travis-ci.org/testshallpass/react-native-dropdownalert.svg?branch=master)](https://travis-ci.org/testshallpass/react-native-dropdownalert)
87
[![CI](https://github.com/testshallpass/react-native-dropdownalert/actions/workflows/ci.yml/badge.svg)](https://github.com/testshallpass/react-native-dropdownalert/actions/workflows/ci.yml)
9-
[![codecov](https://codecov.io/gh/testshallpass/react-native-dropdownalert/branch/master/graph/badge.svg)](https://codecov.io/gh/testshallpass/react-native-dropdownalert)
108

119
| info | warn | error | success |
1210
| :--------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------: |
@@ -53,20 +51,23 @@ const App = () => {
5351
_fetchData();
5452
}, []);
5553

56-
_fetchData = async () => {
54+
const _fetchData = async () => {
5755
try {
5856
// alertWithType parameters: type, title, message, payload, interval.
5957
// payload object that includes a source property overrides the image source prop. (optional: object)
6058
// interval takes precedence over the closeInterval prop. (optional: number)
61-
dropDownAlertRef.alertWithType('info', 'Info', 'Start fetch data.');
62-
await fetch('https://httpbin.org/get');
63-
dropDownAlertRef.alertWithType('success', 'Success', 'End fetch data');
59+
dropDownAlertRef.alertWithType('info', 'Info', 'Start fetch data');
60+
const response = await fetch('https://httpbin.org/uuid');
61+
const {uuid} = await response.json();
62+
dropDownAlertRef.alertWithType('success', 'Success', uuid);
63+
throw 'Error fetch data'; // example error
6464
} catch (error) {
6565
dropDownAlertRef.alertWithType('error', 'Error', error);
6666
}
6767
};
6868

69-
// To ensures that it overlaps other UI components place it as the last component in the document tree.
69+
// To ensures that it overlaps other UI components
70+
// place it as the last component in the document tree.
7071
return (
7172
<View>
7273
<DropdownAlert

0 commit comments

Comments
 (0)