skyquake/plugins/logging/src/denyEventsEditGroup.jsx

   1 /*
   2  *
   3  *   Copyright 2016 RIFT.IO Inc
   4  *
   5  *   Licensed under the Apache License, Version 2.0 (the "License");
   6  *   you may not use this file except in compliance with the License.
   7  *   You may obtain a copy of the License at
   8  *
   9  *       http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  *   Unless required by applicable law or agreed to in writing, software
  12  *   distributed under the License is distributed on an "AS IS" BASIS,
  13  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  *   See the License for the specific language governing permissions and
  15  *   limitations under the License.
  16  *
  17  */
  18 import React from 'react';
  19
  20 import LoggingStore from './loggingStore.js';
  21
  22 class DenyEvent extends React.Component {
  23
  24   constructor(props) {
  25     super(props);
  26     this.state = {
  27       eventID: props.eventID
  28     };
  29   }
  30
  31   componentWillReceiveProps(props) {
  32     this.setState({
  33       eventID: props.eventID
  34     });
  35   }
  36
  37   handleEventIdChange = (e) => {
  38     //console.log("DenyEvent.handleEventIdChange called. value=", e.target.value);
  39     // TODO: Save only if value is valid
  40
  41     this.setState({
  42       eventID: e.target.value
  43     });
  44   }
  45
  46   isEventIdValid(eventID) {
  47     // Return true if null, empty string or a number, else return false
  48     if (!eventID || eventID.length == 0) {
  49       return true;
  50     } else {
  51       return (isNaN(+eventID)) ? false : true;
  52     }
  53   }
  54
  55   render() {
  56     const {className, onSave, onRemove, warnInvalidEventID, inputPattern,
  57       ...props} = this.props;
  58     let textBoxClassNames = "textBox";
  59     if (warnInvalidEventID && !this.isEventIdValid(this.state.eventID)) {
  60       //console.log("eventID is not valid: ", this.state.eventID);
  61       textBoxClassNames += " invalidValue";
  62     }
  63     return (
  64       <div className={className} >
  65         <input className={textBoxClassNames} type="text"
  66         value={this.state.eventID}
  67         pattern={inputPattern}
  68         onBlur={onSave}
  69         onChange={this.handleEventIdChange.bind(this)}
  70         placeholder="Event ID"
  71         />
  72         <div className="removeButton"
  73           onClick={onRemove}>
  74           <span className="oi" data-glyph="minus"
  75           title="Remove event id" aria-hidden="true"></span>
  76         </div>
  77       </div>
  78     );
  79   }
  80 }
  81 DenyEvent.defaultProps = {
  82   eventID: "",
  83   warnInvalidEventID: true,
  84   inputPattern: "^\\d*$"
  85 }
  86
  87
  88 export default class DenyEventsEditGroup extends React.Component {
  89
  90   handleUpdateEvent = (index) => {
  91     let enforceEventIdRules = this.props.enforceEventIdRules;
  92     return function(e) {
  93       if (e.target.value && e.target.value.trim().length > 0) {
  94         if (enforceEventIdRules) {
  95           console.log("attempting to set eventID[] to ", e.target.value)
  96           let value = +e.target.value;
  97           // long form:
  98           //let value = parseInt(e.target.value, 10);
  99           if (!isNaN(value)) {
 100             LoggingStore.updateDenyEvent(index, value);
 101           } else {
 102             // Error. Show input error on screen
 103           }
 104         } else {
 105           LoggingStore.updateDenyEvent(index, e.target.value);
 106         }
 107
 108
 109       } else if (!e.target.value || e.target.value.trim().length == 0) {
 110         LoggingStore.updateDenyEvent(index, null);
 111       }
 112     }
 113   }
 114
 115   handleRemoveEvent(index) {
 116     return function(e) {
 117       //console.log("handleRemoveEvent called for eventID: ", eventID);
 118       LoggingStore.removeDenyEvent(index);
 119     }
 120   }
 121
 122   render() {
 123     let self = this;
 124     const {className, eventIDs, warnInvalidEventID, ...props} = this.props;
 125     let newRow = null;
 126
 127     return (
 128       <div className={className}>
 129         {
 130           eventIDs.map(function(eventID, index) {
 131             return (<DenyEvent className="eventEditRow"
 132               key={index}
 133               eventID={eventID}
 134               index={index}
 135               onRemove={self.handleRemoveEvent(index)}
 136               onSave={self.handleUpdateEvent(index)}
 137               warnInvalidEventID={warnInvalidEventID}
 138               />);
 139           })
 140         }
 141       </div>
 142     );
 143   }
 144 }
 145 DenyEventsEditGroup.defaultProps = {
 146   eventIDs: [],
 147   enforceEventIdRules: false,
 148   warnInvalidEventID: false
 149 }