How to use react-jsonschema-form - 10 common examples

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,