How to use uniforms - 10 common examples

render() {
      return (
        <div>
          
          {this.props.children}
        </div>
      );
    }
  }

  const error1 = { details: [{ name: 'a' }, { name: 'i' }] };
  const error2 = { details: [{ name: 'b' }] };
  const model = { a: { b: { c: 'example' } } };
  const onChange = jest.fn();
  const randomId = randomIds();
  const state = {
    changed: false,
    changedMap: {},
    submitting: false,
    label: true,
    disabled: false,
    placeholder: true,
    showInlineError: true,
  };

  const schema = new SimpleSchemaBridge({
    getDefinition(name) {
      // Simulate SimpleSchema.
      name = name.replace(/\d+/g, '$');

      return {

allowedValues,
  checkboxes,
  disabled,
  fieldType,
  id,
  inputRef,
  label,
  name,
  onChange,
  placeholder,
  required,
  transform,
  value,
  ...props
}) => (
  <div>
    {label &amp;&amp; <label>{label}</label>}

    {/* TODO: Better handling of these props. */}
    {checkboxes || fieldType === Array
      ? renderCheckboxes({
          allowedValues,
          disabled,
          id,
          name,
          onChange,
          transform,
          value,
          fieldType,
        })
      : renderSelect({
          allowedValues,</div>

type="submit"
  />
);
SubmitField.contextTypes = BaseField.contextTypes;

// This field is a kind of a shortcut for few fields. You can also access all
// field props here, like value or onChange for some extra logic.
const Composite = () => (
  <section>
    
    
    
  </section>
);

const CompositeField = connectField(Composite);

export default function ExamplesSubmitField() {
  return (
     alert(JSON.stringify(model, null, 2))}
    &gt;
      
      <hr>
      
      <br>
      
    
  );
}

const handleChange = (e, onChange, max, min) => {
  const { value, type } = e.target

  // Prevent numbers lower than the minimum
  if (type === 'number' && value < min) {
    return
  }

  onChange(value.substr(0, max))
}

Text.defaultProps = { type: 'text' }

export default connectField(Text)

const Auto = parent => class extends AutoForm.Auto(parent) {
    static Auto = Auto;
    onChange (key, value) {
      // starting date should not be later than ending date
      if (key === 'when.endingDate' && value < this.getModel().when.startingDate) {
        super.onChange('when.startingDate', value)
      } else if (key === 'when.startingDate' && value > this.getModel().when.endingDate) {
        super.onChange('when.endingDate', value)
      }
      // pass on all changes to super
      super.onChange(key, value)
    }
}

import SimpleSchema from 'simpl-schema';
import createSchemaBridge from 'uniforms/createSchemaBridge';
import filterDOMProps from 'uniforms/filterDOMProps';

import SimpleSchema2Bridge from './SimpleSchema2Bridge';

// Register bridge.
createSchemaBridge.register(SimpleSchema2Bridge);

// Register custom property.
SimpleSchema.extendOptions(['uniforms']);

// There's no possibility to retrieve them at runtime
filterDOMProps.register(
  'allowedValues',
  'autoValue',
  'blackbox',
  'custom',
  'decimal',
  'defaultValue',
  'exclusiveMax',
  'exclusiveMin',
  'label',
  'max',
  'maxCount',
  'min',
  'minCount',
  'optional',
  'regEx',
  'trim',

// Register custom property.
SimpleSchema.extendOptions({
  uniforms: Match.Optional(
    Match.OneOf(
      String,
      Function,
      Match.ObjectIncluding({
        component: Match.Optional(Match.OneOf(String, Function))
      })
    )
  )
});

// There's no possibility to retrieve them at runtime
filterDOMProps.register(
  'allowedValues',
  'autoValue',
  'blackbox',
  'custom',
  'decimal',
  'defaultValue',
  'exclusiveMax',
  'exclusiveMin',
  'label',
  'max',
  'maxCount',
  'min',
  'minCount',
  'optional',
  'regEx',
  'trim',

const SwapField = (
  { children, fieldA, fieldB },
  { uniforms: { model, onChange } }
) => (
  <span style="{{">
    {cloneElement(Children.only(children), {
      onClick() {
        const valueA = get(model, fieldA);
        const valueB = get(model, fieldB);
        onChange(fieldA, valueB);
        onChange(fieldB, valueA);
      }
    })}
  </span>
);
SwapField.contextTypes = BaseField.contextTypes;
// Usage.
export default function ExampleSwapField() {
  return (
    <section>
       alert(JSON.stringify(model, null, 2))}
      &gt;
        
        
          
        
        
        
      </section>

import React, { Children } from 'react';
import BaseField from 'uniforms/BaseField';
import nothing from 'uniforms/nothing';

import {
  AutoForm,
  SubmitField,
  TextField
} from '../../../website/components/universal';
import schema from './DisplayIfFieldSchema';

// We have to ensure that there's only one child, because returning an array
// from a component is prohibited.
const DisplayIf = ({ children, condition }, { uniforms }) =>
  condition(uniforms) ? Children.only(children) : nothing;
DisplayIf.contextTypes = BaseField.contextTypes;

export default function ExamplesDisplayIfField() {
  return (
     alert(JSON.stringify(model, null, 2))}
    >
      

       context.model.fieldA}>
        <section>
          

           context.model.fieldB}&gt;
            <span>Well done!</span>
          </section>

// uniforms-unstyled.
const SubmitField = (
  props,
  {
    uniforms: {
      error,
      state: { disabled, submitting, validating }
    }
  }
) => (
  <input type="submit" disabled="{!!(error">
);
SubmitField.contextTypes = BaseField.contextTypes;

// This field is a kind of a shortcut for few fields. You can also access all
// field props here, like value or onChange for some extra logic.
const Composite = () =&gt; (
  <section>
    
    
    
  </section>
);

const CompositeField = connectField(Composite);

export default function ExamplesSubmitField() {
  return (