Initial commit

Author: jwohlfert23

index.js

@@ -0,0 +1,194 @@
+import React, {PropTypes, Component} from 'react'
+import {
+  View,
+  Text,
+  TextInput,
+  StyleSheet,
+  TouchableOpacity,
+  Dimensions,
+  TouchableWithoutFeedback
+} from 'react-native'
+import Icon from 'react-native-vector-icons/Ionicons'
+import colors from "../../constants/colors"
+import _ from 'lodash'
+class EmailInput extends Component {
+  constructor(props) {
+    super(props);
+    let {height, width} = Dimensions.get('window');
+
+    this.state = {
+      text: "",
+      inputWidth: 200
+    };
+
+    this.wrapperWidth = width;
+    this.parseEmails = this.parseEmails.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.pop = this.pop.bind(this);
+    this.calculateWidth = this.calculateWidth.bind(this);
+    this.focus = this.focus.bind(this);
+  }
+  measureWrapper() {
+    if (!this.refs.wrapper)
+      return;
+    this.refs.wrapper.measure((ox, oy, w, h, px, py) => {
+      this.wrapperWidth = w;
+    });
+  }
+  calculateWidth() {
+
+    setTimeout(() => {
+      if (!this.refs['tag' + (this.props.value.length - 1)])
+        return;
+      this.refs['tag' + (this.props.value.length - 1)].measure((ox, oy, w, h, px, py) => {
+
+        let endPosOfTag = w + ox;
+        let margin = 3;
+        let spaceLeft = this.wrapperWidth - endPosOfTag - margin;
+        if (spaceLeft < 100) {
+          this.setState({inputWidth: this.wrapperWidth});
+        } else {
+          this.setState({inputWidth: spaceLeft})
+        }
+      });
+    }, 0);
+  }
+  componentDidMount() {
+    this.calculateWidth();
+  }
+  componentWillReceiveProps() {
+    this.calculateWidth();
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.value.length != this.props.value.length || !prevProps.value) {
+      this.calculateWidth();
+    }
+  }
+  onChange(event) {
+    if (!event || !event.nativeEvent)
+      return;
+    let text = event.nativeEvent.text;
+    this.setState({text: text});
+    let lastTyped = text.charAt(text.length - 1);
+
+    let parseWhen = [",", " ", ";"];
+
+    if (parseWhen.indexOf(lastTyped) > -1)
+      this.parseEmails();
+    }
+
+  parseEmails() {
+    let {text} = this.state;
+    let {value} = this.props;
+    let regex = this.props.regex || /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi;
+    let results = text.match(regex);
+
+    if (results && results.length > 0) {
+      this.setState({text: ""});
+      this.props.onChange(value.concat(results));
+    }
+
+  }
+  onKeyPress(event) {
+    if (this.state.text == "" && event.nativeEvent && event.nativeEvent.key == "Backspace") {
+      this.pop();
+    }
+  }
+  focus() {
+    if (this.refs.emailInput)
+      this.refs.emailInput.focus();
+    }
+  pop() {
+    let emails = _.clone(this.props.value);
+    emails.pop();
+    this.props.onChange(emails);
+    this.focus();
+  }
+  removeIndex(index) {
+    let emails = _.clone(this.props.value);
+    emails.splice(index, 1);
+    this.props.onChange(emails);
+    this.focus();
+
+  }
+  render() {
+    let {text} = this.state;
+    let {value} = this.props;
+
+    let width = text.length < 4
+      ? 100
+      : null;
+
+    return <TouchableWithoutFeedback onPress={() => this.refs.emailInput.focus()} onLayout={this.measureWrapper.bind(this)} style={{
+      flex: 1
+    }}>
+      <View style={styles.wrapper} ref="wrapper" onLayout={this.measureWrapper.bind(this)}>
+        {value.map((email, index) => {
+          return <TouchableOpacity ref={"tag" + index} style={styles.tag} onPress={this.removeIndex.bind(this, index)}>
+            <Text style={styles.tagText}>{email}&nbsp;&nbsp;
+              <Icon name="md-close"/></Text>
+          </TouchableOpacity>
+        })}
+
+        <View style={{
+          width: this.state.inputWidth
+        }}>
+          <TextInput ref="emailInput" blurOnSubmit={false} onKeyPress={this.onKeyPress.bind(this)} value={this.state.text} style={[
+            styles.textInput, {
+              width: width
+            }
+          ]} underlineColorAndroid="rgba(0,0,0,0)" onChange={this.onChange.bind(this)} onSubmitEditing={this.parseEmails}/>
+        </View>
+      </View>
+    </TouchableWithoutFeedback>
+  }
+}
+
+EmailInput.PropTypes = {
+  regex: React.PropTypes.object,
+  onChange: React.PropTypes.func,
+  value: React.PropTypes.array.isRequired
+}
+export default EmailInput;
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'flex-start',
+    marginTop: 3,
+    marginBottom: 8
+  },
+  spacer: {
+    flexWrap: 'wrap',
+    height: 24,
+    width: 0,
+    backgroundColor: "red"
+  },
+  textInput: {
+    color: colors.defaultTextColor,
+    height: 24,
+    fontSize: 16,
+    flex: .6,
+    padding: 0,
+    marginTop: 6,
+    flexWrap: 'wrap'
+  },
+  tag: {
+    padding: 0,
+    justifyContent: 'center',
+    backgroundColor: colors.lightGray,
+    marginTop: 5,
+    marginRight: 3,
+    flexWrap: 'wrap',
+    padding: 8,
+    height: 24,
+    borderRadius: 2
+  },
+  tagText: {
+    color: "#777",
+    padding: 0,
+    margin: 0
+  }
+})

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "react-native-tag-input",
+  "version": "0.3.0",
+  "description": "A tag input component for react-native",
+  "main": "index.js",
+  "author": "Jack Wohlfert (https://github.com/jwohlfert23)",
+  "keywords": [
+    "react-component",
+    "react-native",
+    "ios",
+    "ui",
+    "email input",
+    "tag input",
+    "emails"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "start": "node_modules/react-native/packager/packager.sh"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:jwohlfert23/react-native-tag-input.git"
+  },
+  "devDependencies": {
+    "react": "^15.0.2",
+    "react-native": "^0.26.2",
+    "lodash": "^3.2.0"
+  }
+}