React

by the94air

HTML

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

React

class Field extends React.Component {
  render() {
    return (
      <div>
        {({ input }) => (
          <AmountInput
            input={input}
            placeholder="app.company.overview.dealtype.form.amount.placeholder"
            disabled={submitting}
            />
        )}
      </div>
    )
  }
}

import React, { useState } from 'react';
import './style.scss';
import { useIntl } from 'react-intl';

const AmountInput = ({ input, disabled = false, placeholder, style = {} }) => {
  const [isInputFocus, setIsInputFocus] = useState(false);
  const intl = useIntl();

  const handleDisplayInputFocus = () => setIsInputFocus(true);
  const handleInputBlur = () => setIsInputFocus(false);

  return (
    <div className="amount-container">
      <input
        {...input}
        style={{ display: `${isInputFocus ? 'block' : `none`}` }}
        ref={(inputRef) => inputRef && inputRef.focus()}
        className="amount-input"
        type="number"
        onBlur={handleInputBlur}
        name="dealAmount"
        />
      <input
        style={{ ...style, display: `${!isInputFocus ? 'block' : `none`}` }}
        onFocus={handleDisplayInputFocus}
        className="amount-input"
        value={
          typeof input.value === 'string' || typeof input.value === 'number'
            ? input.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
          : ''
        }
        disabled={disabled}
        onChange={() => {}}
        placeholder={placeholder ? intl.formatMessage({ id: placeholder }) : ''}
        />
    </div>
  );
};

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