|
| 1 | +/* eslint-disable */ |
| 2 | + |
| 3 | +// The MIT License (MIT) |
| 4 | +// |
| 5 | +// Copyright © 2016 Masoud Ghorbani <[email protected]> |
| 6 | +// |
| 7 | +// Permission is hereby granted, free of charge, to any person obtaining a copy of |
| 8 | +// this software and associated documentation files (the “Software”), to deal in |
| 9 | +// the Software without restriction, including without limitation the rights to |
| 10 | +// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of |
| 11 | +// the Software, and to permit persons to whom the Software is furnished to do so, |
| 12 | +// subject to the following conditions: |
| 13 | +// |
| 14 | +// The above copyright notice and this permission notice shall be included in all |
| 15 | +// copies or substantial portions of the Software. |
| 16 | +// |
| 17 | +// THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
| 18 | +// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS |
| 19 | +// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR |
| 20 | +// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER |
| 21 | +// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN |
| 22 | +// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
| 23 | + |
| 24 | +import React, { Component, PropTypes } from 'react' |
| 25 | +import TextField from 'material-ui/TextField' |
| 26 | + |
| 27 | +export default class Email extends Component { |
| 28 | + static propTypes = { |
| 29 | + className: React.PropTypes.string.isRequired, |
| 30 | + domains: React.PropTypes.arrayOf(PropTypes.string), |
| 31 | + } |
| 32 | + |
| 33 | + static defaultProps = { |
| 34 | + domains: ['yahoo.com', 'hotmail.com', 'gmail.com', 'me.com', 'aol.com', 'mac.com', 'live.com', 'googlemail.com', 'msn.com', 'hotmail.com', 'yahoo.com', 'facebook.com', 'verizon.net', 'outlook.com', 'icloud.com'], // Include important mail services |
| 35 | + } |
| 36 | + |
| 37 | + constructor(props) { |
| 38 | + super(props) |
| 39 | + this.state = { |
| 40 | + class: props.className, |
| 41 | + value: '', |
| 42 | + domains: props.domains, |
| 43 | + suggestion: '', |
| 44 | + } |
| 45 | + |
| 46 | + this.handleChange = this.handleChange.bind(this) |
| 47 | + this.getSuggest = this.getSuggest.bind(this) |
| 48 | + } |
| 49 | + |
| 50 | + getSuggest(event) { |
| 51 | + const protectedKeyCodes = [9, 17, 18, 35, 36, 37, 38, 39, 40, 45]; |
| 52 | + if (protectedKeyCodes.indexOf(event.keyCode) >= 0) { |
| 53 | + return; |
| 54 | + } |
| 55 | + |
| 56 | + if (event.keyCode === 8) { |
| 57 | + this.setState({ value: event.target.value.replace(this.state.suggestion, '') }) |
| 58 | + } else if (typeof this.state.suggestion === 'undefined' || this.state.suggestion.length < 1) { |
| 59 | + return false; |
| 60 | + } else { |
| 61 | + const startPos = this.state.value.indexOf(this.state.suggestion) |
| 62 | + const endPos = startPos + this.state.suggestion.length |
| 63 | + this.textHandler.setSelectionRange(startPos, endPos) |
| 64 | + } |
| 65 | + } |
| 66 | + |
| 67 | + handleChange(event) { |
| 68 | + // Catch value of the input box by every change |
| 69 | + const emailAddress = event.target.value |
| 70 | + const suggest = this.suggest(emailAddress) |
| 71 | + |
| 72 | + if (typeof suggest === 'undefined' || suggest.length < 1) { |
| 73 | + // Set value and suggestion state by every change |
| 74 | + this.setState({ value: emailAddress, suggestion: suggest }) |
| 75 | + } else { |
| 76 | + // Update value state plus suggested text |
| 77 | + this.setState({ value: emailAddress + suggest, suggestion: suggest }) |
| 78 | + } |
| 79 | + } |
| 80 | + |
| 81 | + suggest(string) { |
| 82 | + // Shim indexOf |
| 83 | + // Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf#Polyfill |
| 84 | + if (!Array.prototype.indexOf) { |
| 85 | + this.doIndexOf(); |
| 86 | + } |
| 87 | + |
| 88 | + const str_arr = string.split('@') |
| 89 | + if (str_arr.length > 1) { |
| 90 | + string = str_arr.pop() |
| 91 | + if (!string.length) { |
| 92 | + return; |
| 93 | + } |
| 94 | + } else { |
| 95 | + return; |
| 96 | + } |
| 97 | + |
| 98 | + const match = this.state.domains.filter((domain) => { |
| 99 | + return domain.indexOf(string) === 0; |
| 100 | + }).shift() || ''; |
| 101 | + |
| 102 | + return match.replace(string, ''); |
| 103 | + } |
| 104 | + doIndexOf() { |
| 105 | + Array.prototype.indexOf = function (searchElement, fromIndex) { |
| 106 | + if (this === undefined || this === null) { |
| 107 | + throw new TypeError('"this" is null or not defined'); |
| 108 | + } |
| 109 | + |
| 110 | + const length = this.length >>> 0; // Hack to convert object.length to a UInt32 |
| 111 | + fromIndex = +fromIndex || 0; |
| 112 | + |
| 113 | + if (Math.abs(fromIndex) === Infinity) { |
| 114 | + fromIndex = 0; |
| 115 | + } |
| 116 | + |
| 117 | + if (fromIndex < 0) { |
| 118 | + fromIndex += length; |
| 119 | + if (fromIndex < 0) { |
| 120 | + fromIndex = 0; |
| 121 | + } |
| 122 | + } |
| 123 | + |
| 124 | + for (; fromIndex < length; fromIndex++) { |
| 125 | + if (this[fromIndex] === searchElement) { |
| 126 | + return fromIndex; |
| 127 | + } |
| 128 | + } |
| 129 | + |
| 130 | + return -1; |
| 131 | + } |
| 132 | + } |
| 133 | + |
| 134 | + // https://github.com/callemall/material-ui/issues/705 |
| 135 | + render() { |
| 136 | + return ( |
| 137 | + <div className="eac-wrapper"> |
| 138 | + <TextField |
| 139 | + floatingLabelText="Email address" |
| 140 | + id="email" |
| 141 | + type="text" |
| 142 | + className={this.state.class} |
| 143 | + value={this.state.value} |
| 144 | + onChange={this.handleChange} |
| 145 | + onKeyUp={this.getSuggest} |
| 146 | + ref={textField => { |
| 147 | + if (textField) { |
| 148 | + this.textHandler = textField.input |
| 149 | + } |
| 150 | + }} |
| 151 | + /> |
| 152 | + </div> |
| 153 | + ) |
| 154 | + } |
| 155 | +} |
0 commit comments