Skip to content

Commit

Permalink
Merge pull request #270 from testshallpass/consolidate-components
Browse files Browse the repository at this point in the history 
consolidate imageview, TextView and CancelButton; rename constants to…
  • Loading branch information
@testshallpass
testshallpass authored Dec 24, 2021
2 parents 4bbb4de + 27dfbbd commit 3a9ced6
Show file tree
Hide file tree
Showing 18 changed files with 133 additions and 369 deletions.
31 changes: 0 additions & 31 deletions CancelButton.js
View file

This file was deleted.

127 changes: 69 additions & 58 deletions DropdownAlert.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import {
Animated,
StatusBar,
PanResponder,
Image,
Text,
} from 'react-native';
import PropTypes from 'prop-types';
import {
Expand All @@ -18,10 +20,7 @@ import {
HEIGHT,
getDefaultStatusBarStyle,
getDefaultStatusBarBackgroundColor,
} from './constants';
import TextView from './TextView';
import ImageView from './imageview';
import CancelButton from './CancelButton';
} from './Utils';
import Queue from './Queue';

export default class DropdownAlert extends Component {
Expand Down Expand Up @@ -129,7 +128,6 @@ export default class DropdownAlert extends Component {
panResponderEnabled: true,
wrapperStyle: null,
containerStyle: {
padding: 16,
flexDirection: 'row',
backgroundColor: '#202020',
},
Expand All @@ -152,24 +150,24 @@ export default class DropdownAlert extends Component {
backgroundColor: 'transparent',
},
imageStyle: {
padding: 8,
width: DEFAULT_IMAGE_DIMENSIONS,
height: DEFAULT_IMAGE_DIMENSIONS,
alignSelf: 'center',
},
cancelBtnImageStyle: {
padding: 8,
width: DEFAULT_IMAGE_DIMENSIONS,
height: DEFAULT_IMAGE_DIMENSIONS,
},
cancelBtnStyle: {
alignSelf: 'center',
},
defaultContainer: {
padding: 8,
flexDirection: 'row',
padding: 8,
},
defaultTextContainer: {
flex: 1,
padding: 8,
paddingHorizontal: 8,
},
translucent: false,
activeStatusBarStyle: 'light-content',
Expand Down Expand Up @@ -231,7 +229,7 @@ export default class DropdownAlert extends Component {
this._onDonePan(event, gestureState),
});
};
_onShouldStartPan = (event, gestureState) => {
_onShouldStartPan = () => {
return this.props.panResponderEnabled;
};
_onShouldMovePan = (event, gestureState) => {
Expand All @@ -254,7 +252,7 @@ export default class DropdownAlert extends Component {
this.closeAction(ACTION.pan);
}
};
getStringValue(value) {
getStringValue = (value) => {
try {
if (typeof value !== 'string') {
if (Array.isArray(value)) {
Expand All @@ -269,7 +267,7 @@ export default class DropdownAlert extends Component {
} catch (error) {
return error.toString();
}
}
};
alertWithType = async (
type = '',
title = '',
Expand Down Expand Up @@ -426,7 +424,7 @@ export default class DropdownAlert extends Component {
const end = this.getEndDelta(height, endDelta);
return [start, end];
};
getStyleForType(type) {
getStyleForType = (type) => {
const {defaultContainer} = this.props;
switch (type) {
case TYPE.info:
Expand Down Expand Up @@ -455,8 +453,8 @@ export default class DropdownAlert extends Component {
StyleSheet.flatten(this.props.containerStyle),
];
}
}
getSourceForType(type) {
};
getSourceForType = (type) => {
switch (type) {
case TYPE.info:
return this.props.infoImageSrc;
Expand All @@ -469,8 +467,8 @@ export default class DropdownAlert extends Component {
default:
return this.props.imageSrc;
}
}
getBackgroundColorForType(type) {
};
getBackgroundColorForType = (type) => {
switch (type) {
case TYPE.info:
return this.props.infoColor;
Expand All @@ -483,8 +481,8 @@ export default class DropdownAlert extends Component {
default:
return this.props.containerStyle.backgroundColor;
}
}
_onLayoutEvent(event) {
};
_onLayoutEvent = (event) => {
const {height} = event.nativeEvent.layout;
if (height > this.state.height) {
const {startDelta, endDelta} = this.props;
Expand All @@ -494,63 +492,75 @@ export default class DropdownAlert extends Component {
this.setState({height});
}
}
}
_renderImage(source) {
if (this.props.renderImage) {
return this.props.renderImage(this.props, this.alertData);
};
_renderImage = (source, imageStyle) => {
const {renderImage} = this.props;
if (renderImage) {
return renderImage(this.props, this.alertData);
}
return (
<ImageView
style={StyleSheet.flatten(this.props.imageStyle)}
source={source}
/>
);
}
_renderTitle() {
if (!source) {
return null;
}
let style = imageStyle;
if (!style.width) {
style.width = DEFAULT_IMAGE_DIMENSIONS;
}
if (!style.height) {
style.height = DEFAULT_IMAGE_DIMENSIONS;
}
const isRemote = typeof source === 'string';
const src = isRemote ? {uri: source} : source;
return <Image style={style} source={src} />;
};
_renderTitle = () => {
if (this.props.renderTitle) {
return this.props.renderTitle(this.props, this.alertData);
}
const {titleTextProps, titleStyle, titleNumOfLines} = this.props;
return (
<TextView
<Text
{...titleTextProps}
style={StyleSheet.flatten(titleStyle)}
numberOfLines={titleNumOfLines}
text={this.alertData.title}
/>
style={titleStyle}
numberOfLines={titleNumOfLines}>
{this.alertData.title}
</Text>
);
}
_renderMessage() {
};
_renderMessage = () => {
if (this.props.renderMessage) {
return this.props.renderMessage(this.props, this.alertData);
}
const {messageTextProps, messageStyle, messageNumOfLines} = this.props;
return (
<TextView
<Text
{...messageTextProps}
style={StyleSheet.flatten(messageStyle)}
numberOfLines={messageNumOfLines}
text={this.alertData.message}
/>
style={messageStyle}
numberOfLines={messageNumOfLines}>
{this.alertData.message}
</Text>
);
}
_renderCancel(show = false) {
};
_renderCancel = (show = false) => {
if (!show) {
return null;
}
if (this.props.renderCancel) {
return this.props.renderCancel(this.props, this.alertData);
} else {
const {cancelBtnImageSrc, cancelBtnImageStyle} = this.props;
return (
<CancelButton
imageStyle={cancelBtnImageStyle}
imageSrc={cancelBtnImageSrc}
onPress={() => this.closeAction(ACTION.cancel)}
/>
);
const {
renderCancel,
cancelBtnStyle,
cancelBtnImageSrc,
cancelBtnImageStyle,
} = this.props;
if (renderCancel) {
return renderCancel(this.props, this.alertData);
}
}
return (
<TouchableOpacity
style={cancelBtnStyle}
onPress={() => this.closeAction(ACTION.cancel)}>
{this._renderImage(cancelBtnImageSrc, cancelBtnImageStyle)}
</TouchableOpacity>
);
};
render() {
const {isOpen} = this.state;
if (!isOpen) {
Expand All @@ -571,6 +581,7 @@ export default class DropdownAlert extends Component {
translucent,
updateStatusBar,
showCancel,
imageStyle,
} = this.props;
const {animationValue, topValue, height} = this.state;
const {type, payload} = this.alertData;
Expand Down Expand Up @@ -632,7 +643,7 @@ export default class DropdownAlert extends Component {
accessible={accessible}>
<View style={style}>
<ContentView style={StyleSheet.flatten(contentContainerStyle)}>
{this._renderImage(imageSrc)}
{this._renderImage(imageSrc, imageStyle)}
<View style={StyleSheet.flatten(defaultTextContainer)}>
{this._renderTitle()}
{this._renderMessage()}
Expand Down
30 changes: 25 additions & 5 deletions Example/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {useRef, useState} from 'react';
import React, {useRef, useState, useEffect} from 'react';
import {StyleSheet, SafeAreaView, Text, View} from 'react-native';
import {
PURPLE_COLOR,
Expand All @@ -12,7 +12,23 @@ import DropdownAlert from 'react-native-dropdownalert';

const App = () => {
const [queueSize, setQueueSize] = useState(0);
let dropDownAlertRef = useRef(null);
let dropDownAlertRef = useRef();

useEffect(() => {
_fetchData();
}, []);

const _fetchData = async () => {
try {
dropDownAlertRef.alertWithType('info', 'Info', 'Start fetch data');
const response = await fetch('https://httpbin.org/uuid');
const {uuid} = await response.json();
dropDownAlertRef.alertWithType('success', 'Success', uuid);
throw 'Error fetch data'; // example thrown error
} catch (error) {
dropDownAlertRef.alertWithType('error', 'Error', error);
}
};

const _onProgrammaticClose = () => {
dropDownAlertRef.closeAction();
Expand Down Expand Up @@ -72,24 +88,28 @@ const App = () => {
};

const _onClose = data => {
console.log(data);
_log(data);
_updateQueueSize();
};

const _onCancel = data => {
console.log(data);
_log(data);
_updateQueueSize();
};

const _onTap = data => {
console.log(data);
_log(data);
_updateQueueSize();
};

const _updateQueueSize = () => {
setQueueSize(dropDownAlertRef.getQueueSize());
};

const _log = data => {
console.log(data);
};

return (
<View style={styles.container}>
<SafeAreaView>
Expand Down
15 changes: 8 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@
[![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)
[![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)
[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge)](https://raw.github.com/testshallpass/react-native-dropdownalert/master/LICENSE)
[![Build Status](https://travis-ci.org/testshallpass/react-native-dropdownalert.svg?branch=master)](https://travis-ci.org/testshallpass/react-native-dropdownalert)
[![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)
[![codecov](https://codecov.io/gh/testshallpass/react-native-dropdownalert/branch/master/graph/badge.svg)](https://codecov.io/gh/testshallpass/react-native-dropdownalert)

| info | warn | error | success |
| :--------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------: |
Expand Down Expand Up @@ -53,20 +51,23 @@ const App = () => {
_fetchData();
}, []);

_fetchData = async () => {
const _fetchData = async () => {
try {
// alertWithType parameters: type, title, message, payload, interval.
// payload object that includes a source property overrides the image source prop. (optional: object)
// interval takes precedence over the closeInterval prop. (optional: number)
dropDownAlertRef.alertWithType('info', 'Info', 'Start fetch data.');
await fetch('https://httpbin.org/get');
dropDownAlertRef.alertWithType('success', 'Success', 'End fetch data');
dropDownAlertRef.alertWithType('info', 'Info', 'Start fetch data');
const response = await fetch('https://httpbin.org/uuid');
const {uuid} = await response.json();
dropDownAlertRef.alertWithType('success', 'Success', uuid);
throw 'Error fetch data'; // example error
} catch (error) {
dropDownAlertRef.alertWithType('error', 'Error', error);
}
};

// To ensures that it overlaps other UI components place it as the last component in the document tree.
// To ensures that it overlaps other UI components
// place it as the last component in the document tree.
return (
<View>
<DropdownAlert
Expand Down
Loading

0 comments on commit 3a9ced6

Please sign in to comment.