src/Field.react.js

   1 /**
   2  * Copyright 2015-present Greg Hurrell. All rights reserved.
   3  * Licensed under the terms of the MIT license.
   4  *
   5  * @flow
   6  */
   7
   8 'use strict';
   9
  10 import React from 'react';
  11 import convert from './convert';
  12
  13 export type Value = {
  14   base: number;
  15   value: string;
  16 };
  17 export const ValuePropType = React.PropTypes.shape({
  18   base: React.PropTypes.number,
  19   value: React.PropTypes.string,
  20 });
  21
  22 const DIGITS = '0123456789abcdef';
  23
  24 /**
  25  * Convert from `value` to `base`.
  26  */
  27 function fromValue(value: ?Value, base: number): string {
  28   if (value === null) {
  29     return '';
  30   } else if (value.base === base) {
  31     return value.value;
  32   }
  33   return convert(value.value, value.base, base);
  34 }
  35
  36 export default class Field extends React.Component {
  37   static propTypes = {
  38     base: React.PropTypes.number,
  39     onValueChange: React.PropTypes.func.required,
  40     value: ValuePropType,
  41   };
  42   static defaultProps = {
  43     base: 10,
  44   };
  45
  46   constructor(props) {
  47     super(props);
  48     if (props.base < 2 || props.base > DIGITS.length) {
  49       throw new Error(
  50         `base prop must be between 2..${DIGITS.length}`
  51       );
  52     }
  53   }
  54
  55   _isValid(value: string): boolean {
  56     const validator = new RegExp(
  57       `^[${DIGITS.slice(0, this.props.base)}]*$`
  58     );
  59     return validator.test(value.trim().toLowerCase());
  60   }
  61
  62   _onChange = event => {
  63     const value = event.currentTarget.value;
  64     if (this._isValid(value)) {
  65       this.props.onValueChange({
  66         base: this.props.base,
  67         value,
  68       });
  69     }
  70   }
  71
  72   _onCopy = () => {
  73     const input = React.findDOMNode(this._input);
  74     input.select();
  75
  76     try {
  77       // May throw a SecurityError.
  78       document.execCommand('copy');
  79     } catch(error) { // eslint-disable-line no-empty
  80       // Swallow.
  81     }
  82   }
  83
  84   _copyLink = () => {
  85     // Would check `document.queryCommandSupported('copy')` here, but that
  86     // doesn't work; see:
  87     // - https://code.google.com/p/chromium/issues/detail?id=476508
  88     // - https://github.com/w3c/clipboard-apis/issues/4
  89     return <span className="hextrapolate-copy" onClick={this._onCopy}>copy</span>;
  90   }
  91
  92   render() {
  93     return (
  94       <span>
  95         <input
  96           className="hextrapolate-input"
  97           onChange={this._onChange}
  98           ref={ref => this._input = ref}
  99           type="text"
 100           value={fromValue(this.props.value, this.props.base)}
 101         />
 102         {this._copyLink()}
 103       </span>
 104     );
 105   }
 106 }