React

by Abdul Ahmad

HTML

<div id="app"></div>

SCSS

body {
  // background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

.input {
  padding: 10px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
  font-family: arial;
  font-size: 16px;
  
  &:hover {
    border: 1px solid #aaa;
  }
  
  &:focus {
    border: 1px solid teal;
  }
}

.input__credit-card {
  resize: none;
  height: 19px;
  white-space: nowrap;
  overflow: auto;
}

.card-input-segment {}

React

class InputSegment extends React.Component {
	render() {
  	return (
    	<div className='card-input-segment'>
    	  {this.props.text}
    	</div>
    );
  }
}

class CreditCardInput extends React.Component {
	state = {
  	cardNumber: '',
  };
  
  onChange = (e) => {
  	let { value } = e.target;
    console.log('value', value);
    value = value.replace('\n', '');
    this.setState({ cardNumber: value });
  }
  
  renderCardSegments() {
  	const { cardNumber } = this.state;
    const chunks = cardNumber.match(/[\s\S]{1,4}/g) || [];
    
    return chunks.map((c, i) => {
    	return <InputSegment key={c + i} text={c} />;
    });
  }

	render() {
  	return (
    	<textarea
    	  onChange={this.onChange}
    	  // value={this.state.cardNumber}
    	  rows='1'
    	  className='input input__credit-card'
    	>
    	  { this.renderCardSegments() }
    	</textarea>
    )
  }
}

class TodoApp extends React.Component {  
  render() {
    return (
      <div>
        <CreditCardInput />
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))