<commit_before>import { h, Component } from 'preact';
import { AtomDesignInputField, VaultDesignInputField } from '@jsfoobar/design-patterns';
import InputField from '@jsfoobar/input-field';
import CardNumberMasking from './js/components/card-number-masking';

const renderCardNumber = (MaskingComponent) => {
  class CardNumber extends Component {
    constructor(props) {
      super(props);

      this.state = {
        value: '',
        mask: props.placeholder
      };

      this.onKeyUpHandler = this.onKeyUpHandler.bind(this);
    }

    onKeyUpHandler = e => {
      const inputState = CardNumber.maskingOnKeyUp(e, this.props);

      if (inputState && (inputState.value || inputState.mask)) {
        this.setState({
          value: inputState.value,
          mask: inputState.mask
        });
      }
    }

    render(props) {
      const { label, ...propsForInput } = props; // eslint-disable-line no-unused-vars

      propsForInput.maxLength = props.placeholder.length;
      propsForInput.mask = this.state.mask;
      propsForInput.value = this.state.value;

      return (
        <VaultDesignInputField label={label}>
          <InputField {...propsForInput} onKeyUp={this.onKeyUpHandler} value={this.state.value} />
          <MaskingComponent {...propsForInput} />
        </VaultDesignInputField>
      )
    }
  };

  CardNumber.maskingOnKeyUp = MaskingComponent.maskingOnKeyUp;

  return CardNumber;
}

const CardNumber = renderCardNumber(CardNumberMasking);

const App = () => (
  <CardNumber label="Card Number" class="masked" type="tel" name="card-number" id="cardNumber" placeholder="XXXX XXXX XXXX XXXX" required="required" />
);

export default App;<commit_msg>initial commit<commit_after>import { h, Component } from 'preact';
import { VaultDesignInputField } from '@jsfoobar/design-patterns';
import InputField from '@jsfoobar/input-field';
import CardNumberMasking from './js/components/card-number-masking';

const renderCardNumber = (MaskingComponent) => {
	class CardNumber extends Component {
		onKeyUpHandler = e => {
			const inputState = CardNumber.maskingOnKeyUp(e, this.props);

			if (inputState && (inputState.value || inputState.mask)) {
				this.setState({
					value: inputState.value,
					mask: inputState.mask
				});
			}
		}

		constructor(props) {
			super(props);

			this.state = {
				value: '',
				mask: props.placeholder
			};

			this.onKeyUpHandler = this.onKeyUpHandler.bind(this);
		}

		render(props) {
			const { label, ...propsForInput } = props; // eslint-disable-line no-unused-vars

			propsForInput.maxLength = props.placeholder.length;
			propsForInput.mask = this.state.mask;
			propsForInput.value = this.state.value;

			return (
				<VaultDesignInputField label={label}>
					<InputField {...propsForInput} onKeyUp={this.onKeyUpHandler} value={this.state.value} />
					<MaskingComponent {...propsForInput} />
				</VaultDesignInputField>
			);
		}
	}

	CardNumber.maskingOnKeyUp = MaskingComponent.maskingOnKeyUp;

	return CardNumber;
};

const CardNumber = renderCardNumber(CardNumberMasking);

const App = () => (
	<CardNumber
		label="Card Number"
		class="masked"
		type="tel"
		name="card-number"
		id="cardNumber"
		placeholder="XXXX XXXX XXXX XXXX"
		required="required"
	/>
);

export default App;
{'fraction_non_alphanumeric': 0.13028919330289193, 'fraction_numerical': 0.0, 'mean_word_length': 3.4525745257452574, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2167526', 'n_tokens_mistral': 1107, 'n_tokens_neox': 1012, 'n_words': 189}