]> git.wincent.com - hextrapolate.git/blob - src/Field.react.js
31a0c9b77b90e9ba4d5341eba31d71f0dbbdd58d
[hextrapolate.git] / 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 = event => {
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) {
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 }