import React from 'react';
import InlineEdit from 'react-edit-inline';
import Ansible from '../../utils/Ansible';

var NameEdit = React.createClass({
  propTypes: {
    name: React.PropTypes.string,
    id: React.PropTypes.string
  },
  dataChange(data) {
    Ansible.sendMessage('custom_names', {
      id: this.props.id,
      name: data.name
    });
  },
  render() {
    return (
      <div>
        <InlineEdit
          className="static"
          activeClassName="editing"
          text={this.props.name}
          change={this.dataChange}
          paramName="name"
          style = {{
            backgroundColor: 'white',
            minWidth: 150,
            display: 'inline-block',
            margin: 0,
            padding: 0,
            fontSize:15
          }}
        />
      </div>
    );
  }
});

export default NameEdit;

@@ -245,24 +245,105 @@
 nge(data) %7B%0A
+    var x = new RegExp(%22%5E%5BA-Za-z%5D%5BA-Za-z0-9%5D+$%22);%0A    if (x.test(data.name)) %7B%0A  
     Ansible.
@@ -374,24 +374,26 @@
 s', %7B%0A      
+ 
+ 
 id: this.pro
@@ -399,16 +399,18 @@
 ops.id,%0A
+  
       na
@@ -427,20 +427,28 @@
 ame%0A    
+  
 %7D);%0A
+    %7D%0A
   %7D,%0A  r

Check new peripheral names against regex