Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'react-jsonschema-form' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
name,
required,
disabled,
readonly,
autofocus,
registry,
onBlur,
onFocus,
} = this.props;
const title = schema.title || name;
let items = this.props.formData;
const { ArrayFieldTemplate, definitions, fields } = registry;
const { TitleField } = fields;
const itemSchemas = schema.items.map(item => retrieveSchema(item, definitions));
const additionalSchema = allowAdditionalItems(schema)
? retrieveSchema(schema.additionalItems, definitions)
: null;
const { addable = true } = getUiOptions(uiSchema);
const canAdd = addable && additionalSchema;
if (!items || items.length < itemSchemas.length) {
// to make sure at least all fixed items are generated
items = items || [];
items = items.concat(new Array(itemSchemas.length - items.length));
}
// These are the props passed into the render function
const arrayProps = {
canAdd,
className: 'field field-array field-array-fixed-items',
disabled,
idSchema,
items: items.map((item, index) => {
function load() {
switch (form.data.schema.type) {
case 'string':
// If the widget is not collaborative, we also have to update it !
const { widget = 'text' } = getUiOptions(props.uiSchema);
const isSupported = isAvailableWidget(widget);
if (!isSupported) {
this.setState({ form, isObject: false });
} else {
this.setState({ form, isObject: false, isCollab: true });
}
break;
case 'object':
// We save all non-collaborative keys
const nonCollabKeys = [];
const properties = form.data.schema.properties;
Object.keys(properties).forEach(key => {
if (properties[key].type !== 'string') {
nonCollabKeys.push(key);
} else if (props.uiSchema[key]) {
// If the widget is not collaborative, we also have to update it ! Also if it is an enum
}
// deep check on sorted keys
if (!deepEquals(newKeys.sort(), oldKeys.sort())) {
return true;
}
return false;
}
class ObjectField extends Component {
nullValue = false;
static defaultProps = {
uiSchema: {},
errorSchema: {},
idSchema: {},
registry: getDefaultRegistry(),
required: false,
disabled: false,
readonly: false,
};
constructor(props) {
super(props);
this.state = {...this.getStateFromProps(props)};
this.nullValue = props.formData === null || (this.isFieldEmpty() && !props.required);
}
componentWillReceiveProps(nextProps) {
const state = this.getStateFromProps(nextProps);
const {formData} = nextProps;
if (formData && objectKeysHaveChanged(formData, this.state)) {
function buildOptions(schema, uiWidget) {
// Note: uiWidget can be undefined, a string or an object; we only deal with
// the inline option when we're provided a definition object.
return {
inline: isObject(uiWidget) &&
isObject(uiWidget.options) &&
uiWidget.options.inline,
enumOptions: optionsList(Object.assign({
enumNames: ['true', 'false'],
enum: [true, false]
}, {enumNames: schema.enumNames}))
};
}
const { type, items } = schema;
if (value === '') {
return undefined;
} else if (type === 'array' && items && nums.has(items.type)) {
return value.map(asNumber);
} else if (type === 'boolean') {
return value === 'true';
} else if (type === 'number') {
return asNumber(value);
}
// If type is undefined, but an enum is present, try and infer the type from
// the enum values
if (schema.enum) {
if (schema.enum.every((x: any) => guessType(x) === 'number')) {
return asNumber(value);
} else if (schema.enum.every((x: any) => guessType(x) === 'boolean')) {
return value === 'true';
}
}
return value;
};
const { type, items } = schema;
if (value === '') {
return undefined;
} else if (type === 'array' && items && nums.has(items.type)) {
return value.map(asNumber);
} else if (type === 'boolean') {
return value === 'true';
} else if (type === 'number') {
return asNumber(value);
}
// If type is undefined, but an enum is present, try and infer the type from
// the enum values
if (schema.enum) {
if (schema.enum.every((x: any) => guessType(x) === 'number')) {
return asNumber(value);
} else if (schema.enum.every((x: any) => guessType(x) === 'boolean')) {
return value === 'true';
}
}
return value;
};
const processValue = (schema: any, value: any) => {
// "enum" is a reserved word, so only "type" and "items" can be destructured
const { type, items } = schema;
if (value === '') {
return undefined;
} else if (type === 'array' && items && nums.has(items.type)) {
return value.map(asNumber);
} else if (type === 'boolean') {
return value === 'true';
} else if (type === 'number') {
return asNumber(value);
}
// If type is undefined, but an enum is present, try and infer the type from
// the enum values
if (schema.enum) {
if (schema.enum.every((x: any) => guessType(x) === 'number')) {
return asNumber(value);
} else if (schema.enum.every((x: any) => guessType(x) === 'boolean')) {
return value === 'true';
}
}
return value;
};
function objectKeysHaveChanged(formData, state) {
// for performance, first check for lengths
const newKeys = Object.keys(formData);
const oldKeys = Object.keys(state);
if (newKeys.length < oldKeys.length) {
return true;
}
// deep check on sorted keys
if (!deepEquals(newKeys.sort(), oldKeys.sort())) {
return true;
}
return false;
}
uiSchema,
errorSchema,
idSchema,
name,
required,
disabled,
readonly,
autofocus,
} = this.props;
const title = schema.title || name;
let {items} = this.state;
const {definitions, fields} = this.props.registry;
const {TitleField} = fields;
const itemSchemas = schema.items.map(item =>
retrieveSchema(item, definitions));
const additionalSchema = allowAdditionalItems(schema) ?
retrieveSchema(schema.additionalItems, definitions) : null;
if (!items || items.length < itemSchemas.length) {
// to make sure at least all fixed items are generated
items = items || [];
items = items.concat(new Array(itemSchemas.length - items.length));
}
return (
<fieldset>
{schema.description ?</fieldset>
idSchema,
name,
required,
disabled,
readonly,
autofocus,
registry,
onBlur,
onFocus,
} = this.props;
const title = schema.title || name;
let items = this.props.formData;
const { ArrayFieldTemplate, definitions, fields } = registry;
const { TitleField } = fields;
const itemSchemas = schema.items.map(item => retrieveSchema(item, definitions));
const additionalSchema = allowAdditionalItems(schema)
? retrieveSchema(schema.additionalItems, definitions)
: null;
const { addable = true } = getUiOptions(uiSchema);
const canAdd = addable && additionalSchema;
if (!items || items.length < itemSchemas.length) {
// to make sure at least all fixed items are generated
items = items || [];
items = items.concat(new Array(itemSchemas.length - items.length));
}
// These are the props passed into the render function
const arrayProps = {
canAdd,
className: 'field field-array field-array-fixed-items',
disabled,
idSchema,