<commit_before>import {Buttons} from './buttons'
import {Form} from './form/form'
import {Widget} from './widget'
import PropTypes from 'prop-types'
import React from 'react'
import _ from 'lodash'

export const NumberButtons = ({input, options, label, placeholder, tooltip, suffix, errorMessage, onChange}) =>
    <Widget
        layout='horizontal'
        spacing='compact'
        label={label}
        tooltip={tooltip}>
        <Buttons
            options={options}
            spacing='none'
            selected={Number(input.value)}
            onChange={value => {
                input.set(value)
                onChange && onChange(value)
            }}
        />
        <Form.Input
            input={input}
            type='number'
            suffix={suffix}
            placeholder={placeholder}
            onChange={element => {
                const value = parseFloat(element.target.value)
                if (_.isFinite(value)) {
                    input.set(value)
                    onChange && onChange(value)
                }
            }}
            errorMessage={errorMessage}
        />
    </Widget>

NumberButtons.propTypes = {
    input: PropTypes.object.isRequired,
    options: PropTypes.array.isRequired,
    errorMessage: PropTypes.any,
    label: PropTypes.any,
    onChange: PropTypes.func,
    placeholder: PropTypes.any,
    suffix: PropTypes.any,
    tooltip: PropTypes.any
}<commit_msg>Added onChange listener.<commit_after>import {Buttons} from './buttons'
import {Form} from './form/form'
import {Widget} from './widget'
import PropTypes from 'prop-types'
import React from 'react'
import _ from 'lodash'

export const NumberButtons = ({input, options, label, placeholder, tooltip, suffix, errorMessage, onChange}) =>
    <Widget
        layout='horizontal'
        spacing='compact'
        label={label}
        tooltip={tooltip}>
        <Buttons
            options={options}
            spacing='none'
            selected={Number(input.value)}
            onChange={value => {
                input.set(value)
                onChange && onChange(value)
            }}
        />
        <Form.Input
            input={input}
            type='number'
            suffix={suffix}
            placeholder={placeholder}
            onChange={element => {
                const value = parseFloat(element.target.value)
                if (_.isFinite(value)) {
                    input.set(value)
                    onChange && onChange(value)
                }
            }}
            errorMessage={errorMessage}
        />
    </Widget>

NumberButtons.propTypes = {
    input: PropTypes.object.isRequired,
    options: PropTypes.array.isRequired,
    errorMessage: PropTypes.any,
    label: PropTypes.any,
    placeholder: PropTypes.any,
    suffix: PropTypes.any,
    tooltip: PropTypes.any,
    onChange: PropTypes.func
}
{'fraction_non_alphanumeric': 0.11334488734835356, 'fraction_numerical': 0.0, 'mean_word_length': 1.8917835671342684, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 17, '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': '6599401', 'n_tokens_mistral': 735, 'n_tokens_neox': 748, 'n_words': 162}