@tomino/dynamic-form-semantic-ui/dist/mjs/semantic/input_view.js

Semantic UI form renderer based on dynamic form generation

import * as React from 'react';
import { observer } from 'mobx-react';
import { Form, Input } from 'semantic-ui-react';
import { ErrorLabel } from './error_view';
import { processControl, getValue } from '../helpers';
import { DynamicComponent } from '../wrapper';
const inputProps = [
    'fluid',
    'focus',
    'icon',
    'iconPosition',
    'inverted',
    'label',
    'labelPosition',
    'loading',
    'onChange',
    'size',
    'transparent',
    'placeholder',
    'value'
];
const InputComponent = props => {
    const { source, disabled, error, handleChange, owner, context, value } = processControl(props);
    const schema = owner.getSchema(source);
    const inputLabel = getValue(props, context, 'inputLabel');
    return (React.createElement(DynamicComponent, Object.assign({}, props, { control: Input, controlProps: inputProps, name: source, disabled: disabled, error: !!error, type: schema.type === 'integer' || schema.type === 'number' ? 'number' : 'text', label: inputLabel || undefined, onChange: handleChange, showError: true, value: value || '' })));
};
InputComponent.displayName = 'Input';
export const InputView = {
    Component: observer(InputComponent),
    toString: (_owner, props, context) => getValue(props, context)
};
export class FormInputComponent extends React.Component {
    constructor() {
        super(...arguments);
        this.handleInputChange = e => {
            this.props.owner.setValue(this.props.name, e.currentTarget.value);
        };
    }
    render() {
        const { owner, name, label } = this.props;
        return (React.createElement(Form.Field, null,
            React.createElement("label", null, label),
            React.createElement(Input, { name: name, error: !!owner.getError(name), value: owner.getValue(name), onChange: this.handleInputChange, disabled: this.props.readOnly }),
            React.createElement(ErrorLabel, { error: owner.getError(name) })));
    }
}
export const FormInput = observer(FormInputComponent);
//# sourceMappingURL=input_view.js.map