@vs-form/vs-number-format/dist/es/index.js

Formatted Number Component for vs-form

import { Component, createElement } from 'react';
import { enums, toInteger, toNumber, set, BaseInput, isNull, isNumber, registerComponent } from '@vs-form/vs-form';
import NumberFormat from 'react-number-format';

class VsNumberFormat extends Component {
    constructor(props) {
        super(props);
        this.changeValue = (dataProps) => (evt) => {
            const value = evt.target.value;
            const schemaValue = value === '' ? null : this.comp.data.dataType === enums.DataType.integer ? toInteger(value) : toNumber(value);
            dataProps.updateValue(value, schemaValue);
        };
        this.initProps = () => {
            set(this.comp.props, 'InputProps.inputComponent', this.NumberFormatCustom);
        };
        this.NumberFormatCustom = (p) => {
            const { inputRef, onChange, ...other } = p;
            if (this.comp.numberFormatProps) {
                return (createElement(NumberFormat, Object.assign({}, other, this.comp.numberFormatProps, { getInputRef: p.inputRef, onValueChange: (values) => {
                        onChange({
                            target: {
                                value: values.value
                            }
                        });
                    } })));
            }
            else {
                return null;
            }
        };
        this.initProps();
    }
    get comp() { return this.props.comp; }
    render() {
        return createElement(BaseInput, Object.assign({ value: this.getValue, onChange: this.changeValue }, this.props));
    }
    getValue(dataProps) {
        const numValue = isNull(dataProps.state.value) ? '' : this.comp.data.dataType === enums.DataType.integer ? toInteger(dataProps.state.value) : toNumber(dataProps.state.value);
        return isNumber(numValue) ? dataProps.state.value : '';
    }
}

const register = () => registerComponent(enums.Component.numberformat, VsNumberFormat);

export { VsNumberFormat, register };