@cosva-lab/form-builder/inputsTypes/Input.js

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import React from 'react';
import compose from 'recompose/compose';
import clsx from 'clsx';
import { observer } from 'mobx-react';
import { toJS } from 'mobx';
import withStyles from '@material-ui/core/styles/withStyles';
import TextField from '@material-ui/core/TextField';
import FormControl from '@material-ui/core/FormControl';
import createStyles from '@material-ui/core/styles/createStyles';
import isEmpty from 'lodash/isEmpty';
import isEqual from 'lodash/isEqual';
import assign from 'lodash/assign';
import { Animation } from '../FieldTranslate';
import { TransformLabel } from '../utils/TransformLabel';
import { RenderErrorsDefault } from '../RenderErrorsDefault';
const styles = (theme) => createStyles({
    root: Object.assign(Object.assign({}, theme.mixins.gutters()), { paddingTop: theme.spacing(2), paddingBottom: theme.spacing(2) }),
    formControl: {},
    widthNormal: { width: '100%' },
    InputLabelProps: {
        overflow: 'hidden',
        whiteSpace: 'nowrap',
        textOverflow: 'ellipsis',
    },
    formHelperTextPropsRoot: {
        wordBreak: 'break-word',
    },
});
let InputComponent = class InputComponent extends React.Component {
    constructor(props) {
        super(props);
        this.callbacks = [];
        this.errors = [];
        this.animation = true;
        this.getProps = (props) => (Object.assign({}, props.fieldProxy));
        this.getLastProps = () => this.getProps(this.props);
        this.state = { type: props.type };
    }
    UNSAFE_componentWillUpdate(newProps) {
        const { errors } = this.getProps(newProps);
        if (!isEqual(toJS(errors), this.errors)) {
            this.animation = true;
        }
    }
    componentDidUpdate() {
        this.callbacks.forEach(callback => callback());
        this.callbacks = [];
        this.errors = toJS(this.props.fieldProxy.errors || []);
    }
    render() {
        const { classes, changeField, fieldProxy } = this.props;
        const { ns, label, name, disabled, fullWidth = true, errors, autoComplete, InputProps, textFieldProps, value, renderErrors: RenderErrors, } = fieldProxy;
        const { type } = this.state;
        return (React.createElement(FormControl, Object.assign({}, { fullWidth }, { className: classes.formControl, variant: "outlined" }),
            React.createElement(TextField, Object.assign({ label: React.createElement(TransformLabel, Object.assign({}, { label, ns, name })), inputRef: element => (fieldProxy.inputRef = element), error: !isEmpty(errors), FormHelperTextProps: {
                    component: ({ children, className }) => {
                        const child = (React.createElement("div", { className: className }, children));
                        if (this.animation && !isEmpty(errors)) {
                            this.animation = false;
                            return React.createElement(Animation, null, child);
                        }
                        return child;
                    },
                    style: {},
                    classes: { root: classes.formHelperTextPropsRoot },
                }, helperText: errors &&
                    ((RenderErrors && (React.createElement(RenderErrors, Object.assign({}, { errors, fieldProxy })))) || React.createElement(RenderErrorsDefault, Object.assign({}, { errors, fieldProxy }))), InputProps: typeof InputProps === 'function'
                    ? InputProps({
                        type,
                        fieldProxy,
                        changeType: (type, callback) => {
                            if (type !== this.state.type)
                                this.setState({ type }, callback);
                        },
                    })
                    : InputProps, InputLabelProps: {
                    shrink: type === 'date' ? true : undefined,
                    classes: {
                        root: clsx(classes.InputLabelProps, classes.widthNormal),
                    },
                }, onChange: e => {
                    const { onChange } = fieldProxy;
                    const callback = (onChange || changeField)(assign(e, { fieldProxy }));
                    typeof callback === 'function' &&
                        this.callbacks.push(callback);
                }, onBlur: () => {
                    const { fieldProxy } = this.props;
                    fieldProxy && fieldProxy.markAsTouched();
                } }, Object.assign(Object.assign({}, textFieldProps), { name,
                type,
                value,
                disabled,
                autoComplete })))));
    }
};
InputComponent = __decorate([
    observer
], InputComponent);
export const Input = compose(withStyles(styles, { name: 'Input' }))(InputComponent);
export default Input;
//# sourceMappingURL=Input.js.map