@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
53 lines • 2.34 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const mobx_react_1 = require("mobx-react");
const semantic_ui_react_1 = require("semantic-ui-react");
const error_view_1 = require("./error_view");
const helpers_1 = require("../helpers");
const wrapper_1 = require("../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 } = helpers_1.processControl(props);
const schema = owner.getSchema(source);
const inputLabel = helpers_1.getValue(props, context, 'inputLabel');
return (React.createElement(wrapper_1.DynamicComponent, Object.assign({}, props, { control: semantic_ui_react_1.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';
exports.InputView = {
Component: mobx_react_1.observer(InputComponent),
toString: (_owner, props, context) => helpers_1.getValue(props, context)
};
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(semantic_ui_react_1.Form.Field, null,
React.createElement("label", null, label),
React.createElement(semantic_ui_react_1.Input, { name: name, error: !!owner.getError(name), value: owner.getValue(name), onChange: this.handleInputChange, disabled: this.props.readOnly }),
React.createElement(error_view_1.ErrorLabel, { error: owner.getError(name) })));
}
}
exports.FormInputComponent = FormInputComponent;
exports.FormInput = mobx_react_1.observer(FormInputComponent);
//# sourceMappingURL=input_view.js.map