react-native-alert-input - npm Package Compare versions

Comparing version 1.0.6 to 1.1.0

package.json

 {
   "name": "react-native-alert-input",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "A simple react native component , both android and ios AlertIos",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/index.js

 import React from 'react';
-import {StyleSheet,View,Text,ScrollView,TextInput} from 'react-native';
+import {
+  StyleSheet,
+  View,
+  Text,
+  TextInput,
+  Dimensions,
+  Keyboard,
+  Animated,
+  TouchableOpacity,
+} from 'react-native';
 
-export default class extends React.Component{
-  static defaultProps={
-    show:false,
-    title:'',
-    onCancel:()=>{},
-    onSubmit:(text)=>{},
-    cancelText:'cancel',
-    submitText:'submit',
-    cancelStyle:{},
-    submitStyle:{},
-    style:{},
-    inputStyle:{},
-    placeholder:'',
-    num:1,
-    content:[]
+const windowHeight = Dimensions.get('window').height;
+
+
+export class Test extends React.Component {
+  static defaultProps = {
+    show: false,
+    title: '',
+    onCancel: () => {},
+    onSubmit: text => {},
+    cancelText: 'cancel',
+    submitText: 'submit',
+    cancelStyle: {},
+    submitStyle: {},
+    style: {},
+    inputStyle: {},
+    placeholder: '',
+    colors: {},
+    num: 1,
+    content: [],
   };
-  constructor(props){
+  constructor(props) {
     super(props);
-    this.state={content:[]};
-    this.cancelF=()=>this.props.onCancel();
+    this.state = {
+      content: [],
+      keyboardHeight: new Animated.Value(windowHeight),
+    };
+    this.cancelF = () => this.props.onCancel();
   }
-  render(){
-    const content=this.state.content;
-    const myContent=[];
-    const num=this.props.num;
-    if(!this.props.content||this.props.content.length!==num) {
-      for (let i = 0; i < num; i++)
+  componentWillMount() {
+    this.keyboardDidShowListener = Keyboard.addListener(
+      'keyboardDidShow',
+      e => {
+        Animated.timing(this.state.keyboardHeight, {
+          toValue: windowHeight - e.endCoordinates.height,
+          duration: 150,
+          useNativeDriver: false,
+        }).start();
+      },
+    );
+    this.keyboardDidHideListener = Keyboard.addListener(
+      'keyboardDidHide',
+      () => {
+        Animated.timing(this.state.keyboardHeight, {
+          toValue: windowHeight,
+          duration: 150,
+          useNativeDriver: false,
+        }).start();
+      },
+    );
+  }
+  componentWillUnmount() {
+    this.keyboardDidShowListener.remove();
+    this.keyboardDidHideListener.remove();
+  }
+  render() {
+    const content = this.state.content;
+    const myContent = [];
+    const num = this.props.num;
+    if (!this.props.content || this.props.content.length !== num) {
+      for (let i = 0; i < num; i++) {
         myContent.push(
           <TextInput
-						key={'input_'+i}
-            style={[styles.input, this.props.inputStyle]}
-            autoFocus={i===0?true:false}
-            onChangeText={(text) => {
+            key={'input_' + i}
+            style={[
+              styles.input,
+              {
+                backgroundColor: this.props.colors.background,
+                color: this.props.colors.text,
+                borderColor: this.props.colors.border,
+              },
+              this.props.inputStyle,
+            ]}
+            defaultValue={content[i] || ''}
+            placeholderTextColor={this.props.colors.placeholder}
+            autoFocus={i === 0}
+            onChangeText={text => {
               content[i] = text;
@@ -42,76 +94,128 @@ this.setState({content: content});
             underlineColorAndroid={'transparent'}
-          />
+          />,
         );
+      }
+    } else {
+      for (let i = 0; i < num; i++) {
+        myContent.push(this.props.content[i]);
+      }
     }
-    else
-      for(let i=0;i<num;i++)
-        myContent.push(this.props.content[i]);
-    return(
-      this.props.show?
-        <ScrollView style={styles.masker} keyboardDismissMode={'on-drag'}>
-          <View style={[styles.container,this.props.style]}>
-            {this.props.title?(typeof this.props.title==='string'?<Text style={styles.title}>{this.props.title}</Text>:this.props.title):null}
-            {myContent}
-            <View style={styles.btn_container}>
-              <Text style={[styles.btn,this.props.cancelStyle]} onPress={this.cancelF}>{this.props.cancelText}</Text>
-              <Text style={[styles.btn,this.props.submitStyle]} onPress={()=>this.props.onSubmit(num===1?this.state.content[0]:this.state.content)}>{this.props.submitText}</Text>
-            </View>
+    return this.props.show ? (
+      <Animated.View
+        style={[
+          styles.animated_container,
+          {height: this.state.keyboardHeight},
+        ]}>
+        <TouchableOpacity
+          activeOpacity={1}
+          style={styles.masker}
+          onPress={this.cancelF}
+        />
+        <View
+          style={[
+            styles.container,
+            {backgroundColor: this.props.colors.card},
+            this.props.style,
+          ]}>
+          {this.props.title ? (
+            typeof this.props.title === 'string' ? (
+              <Text style={styles.title}>{this.props.title}</Text>
+            ) : (
+              this.props.title
+            )
+          ) : null}
+          {myContent}
+          <View
+            style={[
+              styles.btn_container,
+              {borderColor: this.props.colors.border},
+              this.props.btnsStyle,
+            ]}>
+            <Text
+              style={[
+                styles.btn,
+                {color: this.props.colors.text},
+                this.props.cancelStyle,
+              ]}
+              onPress={this.cancelF}>
+              {this.props.cancelText}
+            </Text>
+            <Text
+              style={[
+                styles.btn,
+                {color: this.props.colors.text},
+                this.props.submitStyle,
+              ]}
+              onPress={() => {
+                this.setState({content: []});
+                this.props.onSubmit(
+                  num === 1 ? this.state.content[0] : this.state.content,
+                );
+              }}>
+              {this.props.submitText}
+            </Text>
           </View>
-        </ScrollView>:null
-    );
+        </View>
+      </Animated.View>
+    ) : null;
   }
 }
 
-const styles=StyleSheet.create({
-  masker:{
-    flex:1,
-    position:'absolute',
-    top:0,
-    left:0,
-    right:0,
-    bottom:0,
-    backgroundColor:'rgba(0,0,0,.6)',
-    zIndex:100
+const styles = StyleSheet.create({
+  masker: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0,0,0,.6)',
   },
-  container:{
-		alignSelf:'center',
-    width:'75%',
-    marginTop:150,
-    backgroundColor:'#fff',
-    borderRadius:10,
-    overflow:'hidden'
+  animated_container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 100,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
-  title:{
-    textAlign:'center',
-    paddingTop:13,
-    paddingHorizontal:6,
-    fontSize:15,
-    color:'#666',
-    fontWeight:'bold',
-    lineHeight:20,
-    marginBottom:10
+  container: {
+    width: '75%',
+    backgroundColor: '#fff',
+    borderRadius: 10,
+    overflow: 'hidden',
   },
-  input:{
-		paddingVertical:0,
-    paddingHorizontal:8,
-    height:34,
-    backgroundColor:'#eee',
-    marginVertical:10,
-    borderTopWidth:.5,
-    borderBottomWidth:.5,
-    borderColor:'#ccc',
-    fontSize:15
+  title: {
+    textAlign: 'center',
+    paddingTop: 13,
+    paddingHorizontal: 6,
+    fontSize: 15,
+    color: '#888',
+    fontWeight: 'bold',
+    lineHeight: 20,
+    marginBottom: 10,
   },
-  btn_container:{
-    flexDirection:'row',
-    borderTopWidth:.5,
-    borderColor:'#ddd',
-    marginTop:10
+  input: {
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+    backgroundColor: '#eee',
+    marginVertical: 10,
+    borderTopWidth: 0.5,
+    borderBottomWidth: 0.5,
+    borderColor: '#ccc',
+    fontSize: 15,
   },
-  btn:{
-    width:'50%',
-    textAlign:'center',
-    fontWeight:'bold',
-    paddingVertical:12
-  }
+  btn_container: {
+    flexDirection: 'row',
+    borderTopWidth: 0.5,
+    borderColor: '#ddd',
+    marginTop: 10,
+  },
+  btn: {
+    width: '50%',
+    textAlign: 'center',
+    fontWeight: 'bold',
+    paddingVertical: 12,
+  },
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

42886

increased by6.01%

Lines of code

216

increased by89.47%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes