@limetech/lime-elements
Version:
95 lines (94 loc) • 3.25 kB
JavaScript
import React from 'react';
import { capitalize } from 'lodash-es';
import { getHelpComponent } from '../help';
/**
* A widget is a concept in react-jsonschema-form (rjsf).
* It represents a HTML tag for the user to enter data, eg. input, select, etc.
*
* We use the widget adapter exclusively so we can use lime-elements instead of the
* default input/select/checkbox/etc fields that rjsf provides.
*
* Please read the docs for more info.
* Link: https://react-jsonschema-form.readthedocs.io/
*/
export class LimeElementsWidgetAdapter extends React.Component {
constructor(props) {
super(props);
this.props = props;
this.state = {
modified: false,
};
this.handleChange = (event) => {
this.props.events.change(event.nativeEvent);
};
this.handleBlur = this.handleBlur.bind(this);
}
hasValue() {
const value = this.getValue();
if (!value) {
return false;
}
if (Array.isArray(value)) {
return value.length > 0;
}
if (value instanceof Date) {
return true;
}
if (typeof value === 'object') {
return Object.entries(value).length > 0;
}
return true;
}
handleBlur() {
this.setState({ modified: true });
}
getLabel() {
const { schema, label } = this.props.widgetProps;
return label || schema.title;
}
isInvalid() {
const { modified } = this.state;
const { rawErrors } = this.props.widgetProps;
return (!!rawErrors && (modified || this.hasValue() || !this.isRequired()));
}
isRequired() {
const { required, schema } = this.props.widgetProps;
return required || schema.minItems > 0;
}
getHelperText() {
const { rawErrors, schema } = this.props.widgetProps;
if (!this.isInvalid()) {
return schema.description;
}
if (rawErrors) {
return capitalize(rawErrors[0]);
}
return schema.description;
}
getValue() {
const { value } = this.props;
const { value: widgetValue } = this.props.widgetProps;
// Use widgetValue unless its overriden in widget
return value || widgetValue;
}
render() {
const { name, extraProps } = this.props;
const disabled = this.isDisabled();
const value = this.getValue();
const readonly = this.isReadOnly();
return React.createElement(React.Fragment, {}, React.createElement(name, Object.assign(Object.assign({ value: value, label: this.getLabel(), disabled: disabled, readonly: readonly, required: this.isRequired(), invalid: this.isInvalid(), 'helper-text': this.getHelperText() }, extraProps), { onChange: this.handleChange, onBlur: this.handleBlur })), getHelpComponent(this.props.widgetProps.schema));
}
isDisabled() {
var _a, _b;
const widgetProps = this.props.widgetProps;
const options = widgetProps.schema.lime;
return (widgetProps.disabled ||
(options === null || options === void 0 ? void 0 : options.disabled) ||
((_b = (_a = options === null || options === void 0 ? void 0 : options.component) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.disabled));
}
isReadOnly() {
const widgetProps = this.props.widgetProps;
return widgetProps.readonly;
}
}
//# sourceMappingURL=widget-adapter.js.map