All files / lib/TimePicker/TimeSelector index.js

65.79% Statements 25/38
42.5% Branches 17/40
72.73% Functions 8/11
69.44% Lines 25/36
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143                      104x 38x         1x 1x   1x     1x 1x                 1x       1x   1x       7x 7x   7x 6x 6x 1x         1x                               127x   127x       4x           4x                           4x                   89x                                         89x                       89x      
import React from 'react';
import PropTypes from 'prop-types';
 
class TimeSelector extends React.Component {
  
  state = {
    value: this.props.value,
    isEditing: false
  };
  
  componentDidUpdate = (prevProps, prevState) => {
    if (prevState.value !== this.props.value && !this.state.isEditing) {
      this.setState({ value: this.props.value });
    }
  };
  
  handleOnChange = e => {
    const { unit, militaryTime } = this.props;
    let newValue = e.currentTarget.value;
    
    Iif (/[a-zA-Z]/.test(e.currentTarget.value)) {
      e.stopPropagation();
      return false;
    } else Eif (unit === 'h') {
      newValue =
      militaryTime
      ? (parseInt(newValue, 10) > 23 ? 23 : parseInt(newValue, 10)) || ''
      : (parseInt(newValue, 10) > 12 ? 12 : parseInt(newValue, 10)) || '';
    } else if (unit === 'm') {
      newValue =
      parseInt(newValue, 10) > 59 ? 59 : parseInt(newValue, 10) || '';
    }
    
    this.setState({ value: newValue, isEditing: true });
  };
  
  submitChange = e => {
    const { onKeyDown, unit } = this.props;
    
    this.setState({ isEditing: false }, onKeyDown(unit, e));
  };
  
  handleKey = e => {
    let newValue = e.currentTarget.value;
    const { onKeyDown, unit } = this.props;
    
    if (e.keyCode === 38 || e.keyCode === 40) {
      this.setState({ isEditing: false }, onKeyDown(unit, e));
      e.stopPropagation();
    } else Iif (e.keyCode === 65 && unit === 'pre') {
      if (newValue.includes('A')) return;
      
      this.setState({ isEditing: false }, onKeyDown(unit, e));
      e.stopPropagation();
    } else Iif (e.keyCode === 80 && unit === 'pre') {
      if (newValue.includes('P')) return;
      
      this.setState({ isEditing: false }, onKeyDown(unit, e));
      e.stopPropagation();
    }
  };
  
  render() {
    const {
      inputRef,
      onDownClick,
      onUpClick,
      onWheel,
      type,
      unit
    } = this.props;
    
    return (
      <div>
        <i
          className="icon icon-arrow-up_24"
          onClick={() => this.setState({ isEditing: false }, onUpClick)}
          onKeyUp={() => {}}
          tabIndex={-1}
          role="button"
        />
        <input
          onWheel={e => onWheel(unit, e)}
          type={type}
          minLength={2}
          maxLength={2}
          onClick={e => e.currentTarget.focus()}
          ref={inputRef}
          onChange={this.handleOnChange}
          tabIndex={0}
          value={this.state.value}
          onBlur={this.submitChange}
          onKeyUp={this.handleKey}
        />
        <i
          className="icon icon-arrow-down_24"
          onClick={() => this.setState({ isEditing: false }, onDownClick)}
          onKeyUp={() => {}}
          role="button"
          tabIndex={-1}
        />
      </div>
    );
  }
}
 
TimeSelector.propTypes = {
  /** @prop Ref attribute for TimeSelector input element | null */
  inputRef: PropTypes.func,
  /** @prop Choose to use military time | false */
  militaryTime: PropTypes.bool,
  /** @prop Callback function invoked when user presses down | null  */
  onDownClick: PropTypes.func,
  /** @prop Callback function invoked when user presses a key | null  */
  onKeyDown: PropTypes.func,
  /** @prop Callback function invoked when user releases a click | null  */
  onUpClick: PropTypes.func,
  /** @prop Callback function invoked when user wheels the mouse | null */
  onWheel: PropTypes.func,
  /** @prop Set the type for the Input element | 'text' */
  type: PropTypes.string,
  /** @prop Set the unit of time | '' */
  unit: PropTypes.string,
  /** @prop Set the value of the Input element | '' */
  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
};
 
TimeSelector.defaultProps = {
  inputRef: null,
  militaryTime: false,
  onDownClick: null,
  onKeyDown: null,
  onUpClick: null,
  onWheel: null,
  type: 'text',
  unit: '',
  value: '',
};
 
TimeSelector.displayName = 'TimeSelector';
 
export default TimeSelector;