<commit_before>import React from 'react'
import PropTypes from 'prop-types'
import { compose, mapProps, withHandlers, setDisplayName } from 'recompose'
import { coalesce, validations } from 'utils'
import Card from 'components/Card'

const productValidations = {
  name: validations.string,
  quantity: validations.number,
  unit: validations.string,
  price: validations.number,
}

const enhancer = compose(
  mapProps(({ name, quantity, unit, price, ...props }) => ({
    ...props,
    name: coalesce(name, ''),
    quantity: coalesce(quantity, ''),
    unit: coalesce(unit, ''),
    price: coalesce(price, ''),
  })),
  withHandlers({
    onUpdate: ({ onUpdate }) => (field, { target: { value } }) => {
      onUpdate({
        [field]: productValidations[field](value),
      })
    },
    onSubmit: ({ onSubmit }) => (event) => {
      event.preventDefault()
      onSubmit()
    },
    onKeyDown: ({ onCancel }) => (event) => {
      if (event.key === 'Escape') {
        onCancel()
      }
    },
  }),
  setDisplayName('EditableProduct'),
)

const EditableProduct = enhancer(({
  name, quantity, unit, price, onKeyDown, onUpdate, onSubmit, onCancel,
}) => (
  <Card className="text-center h-100">
    <form onSubmit={onSubmit}>
      <div className="form-group">
        <input
          type="text"
          value={name}
          onKeyDown={onKeyDown}
          onChange={(event) => onUpdate('name', event)}
          className="form-control"
          placeholder="Nombre"
          autoFocus
        />
      </div>
      <div className="form-group">
        <input
          type="number"
          value={quantity}
          onKeyDown={onKeyDown}
          onChange={(event) => onUpdate('quantity', event)}
          className="form-control"
          placeholder="Cantidad"
        />
      </div>
      <div className="form-group">
        <input
          type="text"
          value={unit}
          onKeyDown={onKeyDown}
          onChange={(event) => onUpdate('unit', event)}
          className="form-control"
          placeholder="Unidad"
        />
      </div>
      <div className="form-group">
        <div className="input-group">
          <span className="input-group-addon">$</span>
          <input
            type="text"
            value={price}
            onKeyDown={onKeyDown}
            onChange={(event) => onUpdate('price', event)}
            className="form-control"
            placeholder="Precio"
          />
        </div>
      </div>
      <div className="btn-group">
        <button type="button" className="btn btn-secondary" onClick={onCancel}>Cancelar</button>
        <button type="submit" className="btn btn-primary">Guardar</button>
      </div>
    </form>
  </Card>
))

EditableProduct.propTypes = {
  name: PropTypes.string,
  quantity: PropTypes.number,
  unit: PropTypes.string,
  price: PropTypes.number,
  onUpdate: PropTypes.func.isRequired,
  onSubmit: PropTypes.func.isRequired,
  onCancel: PropTypes.func.isRequired,
}

export default EditableProduct<commit_msg>product: updated input group with new classes defined on the new bs beta<commit_after>import React from 'react'
import PropTypes from 'prop-types'
import { compose, mapProps, withHandlers, setDisplayName } from 'recompose'
import { coalesce, validations } from 'utils'
import Card from 'components/Card'

const productValidations = {
  name: validations.string,
  quantity: validations.number,
  unit: validations.string,
  price: validations.number,
}

const enhancer = compose(
  mapProps(({ name, quantity, unit, price, ...props }) => ({
    ...props,
    name: coalesce(name, ''),
    quantity: coalesce(quantity, ''),
    unit: coalesce(unit, ''),
    price: coalesce(price, ''),
  })),
  withHandlers({
    onUpdate: ({ onUpdate }) => (field, { target: { value } }) => {
      onUpdate({
        [field]: productValidations[field](value),
      })
    },
    onSubmit: ({ onSubmit }) => (event) => {
      event.preventDefault()
      onSubmit()
    },
    onKeyDown: ({ onCancel }) => (event) => {
      if (event.key === 'Escape') {
        onCancel()
      }
    },
  }),
  setDisplayName('EditableProduct'),
)

const EditableProduct = enhancer(({
  name, quantity, unit, price, onKeyDown, onUpdate, onSubmit, onCancel,
}) => (
  <Card className="text-center h-100">
    <form onSubmit={onSubmit}>
      <div className="form-group">
        <input
          type="text"
          value={name}
          onKeyDown={onKeyDown}
          onChange={(event) => onUpdate('name', event)}
          className="form-control"
          placeholder="Nombre"
          autoFocus
        />
      </div>
      <div className="form-group">
        <input
          type="number"
          value={quantity}
          onKeyDown={onKeyDown}
          onChange={(event) => onUpdate('quantity', event)}
          className="form-control"
          placeholder="Cantidad"
        />
      </div>
      <div className="form-group">
        <input
          type="text"
          value={unit}
          onKeyDown={onKeyDown}
          onChange={(event) => onUpdate('unit', event)}
          className="form-control"
          placeholder="Unidad"
        />
      </div>
      <div className="form-group">
        <div className="input-group">
          <div className="input-group-prepend">
            <span className="input-group-text">$</span>
          </div>
          <input
            type="text"
            value={price}
            onKeyDown={onKeyDown}
            onChange={(event) => onUpdate('price', event)}
            className="form-control"
            placeholder="Precio"
          />
        </div>
      </div>
      <div className="btn-group">
        <button type="button" className="btn btn-secondary" onClick={onCancel}>Cancelar</button>
        <button type="submit" className="btn btn-primary">Guardar</button>
      </div>
    </form>
  </Card>
))

EditableProduct.propTypes = {
  name: PropTypes.string,
  quantity: PropTypes.number,
  unit: PropTypes.string,
  price: PropTypes.number,
  onUpdate: PropTypes.func.isRequired,
  onSubmit: PropTypes.func.isRequired,
  onCancel: PropTypes.func.isRequired,
}

export default EditableProduct
{'fraction_non_alphanumeric': 0.15075133301017934, 'fraction_numerical': 0.0009694619486185168, 'mean_word_length': 2.47557551937114, 'pattern_counts': {'":': 0, '<': 57, '<?xml version=': 0, '>': 81, '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': '3304129', 'n_tokens_mistral': 1824, 'n_tokens_neox': 1816, 'n_words': 366}