Form

View Source

Copy

Edit

render(() => {
  const [value, setValue] = React.useState({ name: "Dave's Band Tag Team" })
  return (
    <Form
      initialPayload={value}
      onSubmit={(payload, complete) => {
        setTimeout(() => {
          setValue(payload)
          complete()
        }, 1600)
      }}
    >
      {({ editButtonProps, getFieldProps }) => (
        <StackView
          minWidth={64}
          padding={2}
          spacing={1}
          backgroundColor="primary-light"
        >
          <StackView axis="horizontal" alignment="center" spacing={1}>
            <Input.Inline fontSize={0} light {...getFieldProps('name')} />
            <Button size="xs" theme="light" {...editButtonProps} />
            <Icon name="split" size="md" color="light-6" />
            <Icon name="tag" size="md" color="light-6" />
          </StackView>
        </StackView>
      )}
    </Form>
  )
})

render(() => {
  const [value, setValue] = React.useState({ name: "Dave's Band Tag Team" })
  return (
    <Form
      initialPayload={value}
      onSubmit={(payload, complete) => {
        setTimeout(() => {
          setValue(payload)
          complete()
        }, 1600)
      }}
    >
      {({ editButtonProps, getFieldProps }) => (
        <StackView
          minWidth={64}
          padding={2}
          spacing={1}
          backgroundColor="primary-light"
        >
          <StackView axis="horizontal" alignment="center" spacing={1}>
            <Input.Inline fontSize={0} light {...getFieldProps('name')} />
            <Button size="xs" theme="light" {...editButtonProps} />
            <Icon name="split" size="md" color="light-6" />
            <Icon name="tag" size="md" color="light-6" />
          </StackView>
        </StackView>
      )}
    </Form>
  )
})

Length:

BPM:

Meter:

Select an item

Copy

Edit

render(() => {
  const [state, setState] = React.useState({
    name: 'Chris Tomlin',
    minutes: 8,
    seconds: 0,
    bpm: 65,
    meter: '4/4',
  })
  return (
    <Form
      initialPayload={state}
      onSubmit={(payload, complete) => {
        setTimeout(() => {
          setState(payload)
          complete()
        }, 1600)
      }}
    >
      {({ editButtonProps, getFieldProps, isEditing, isSubmitting }) => (
        <StackView
          padding={2}
          spacing={1}
          backgroundColor="backgroundSecondary"
        >
          <StackView axis="horizontal" alignment="center" marginBottom={1}>
            <Button
              size="xs"
              theme="primary"
              variant="outline"
              order={1}
              marginLeft={1}
              {...editButtonProps}
            />
            <Input.Inline fontSize={0} order={0} {...getFieldProps('name')} />
          </StackView>
          <StackView axis="horizontal" alignment="center" spacing={2}>
            <StackView axis="horizontal" alignment="center">
              <Input.InputLabel
                controls="minutes"
                fontSize={1}
                color="foregroundSecondary"
                marginRight={1}
              >
                Length:
              </Input.InputLabel>
              <NumberField
                id="minutes"
                as={Input.Inline}
                min={0}
                max={59}
                pad={1}
                fontSize={1}
                lineHeight={4}
                {...getFieldProps('minutes', (value) => value)}
              />
              <Text fontSize={1} marginHorizontal={0.5}>
                :
              </Text>
              <NumberField
                as={Input.Inline}
                min={0}
                max={59}
                pad={2}
                fontSize={1}
                lineHeight={4}
                {...getFieldProps('seconds', (value) => value)}
              />
            </StackView>
            <StackView axis="horizontal" alignment="center" spacing={1}>
              <Input.InputLabel
                controls="bpm"
                fontSize={1}
                color="foregroundSecondary"
              >
                BPM:
              </Input.InputLabel>
              <NumberField
                id="bpm"
                as={Input.Inline}
                min={0}
                pad={1}
                fontSize={1}
                lineHeight={4}
                {...getFieldProps('bpm', (value) => value)}
              />
            </StackView>
            <StackView axis="horizontal" alignment="center" spacing={1}>
              <Input.InputLabel
                controls="meter"
                fontSize={1}
                color="foregroundSecondary"
              >
                Meter:
              </Input.InputLabel>
              <Select.Inline
                id="meter"
                fontSize={1}
                {...getFieldProps('meter', (event) => event.value)}
              >
                <Select.Option value="none">None</Select.Option>
                <Select.Option value="2/2">2/2</Select.Option>
                <Select.Option value="2/4">2/4</Select.Option>
                <Select.Option value="3/4">3/4</Select.Option>
                <Select.Option value="4/4">4/4</Select.Option>
              </Select.Inline>
            </StackView>
          </StackView>
        </StackView>
      )}
    </Form>
  )
})

render(() => {
  const [state, setState] = React.useState({
    name: 'Chris Tomlin',
    minutes: 8,
    seconds: 0,
    bpm: 65,
    meter: '4/4',
  })
  return (
    <Form
      initialPayload={state}
      onSubmit={(payload, complete) => {
        setTimeout(() => {
          setState(payload)
          complete()
        }, 1600)
      }}
    >
      {({ editButtonProps, getFieldProps, isEditing, isSubmitting }) => (
        <StackView
          padding={2}
          spacing={1}
          backgroundColor="backgroundSecondary"
        >
          <StackView axis="horizontal" alignment="center" marginBottom={1}>
            <Button
              size="xs"
              theme="primary"
              variant="outline"
              order={1}
              marginLeft={1}
              {...editButtonProps}
            />
            <Input.Inline fontSize={0} order={0} {...getFieldProps('name')} />
          </StackView>
          <StackView axis="horizontal" alignment="center" spacing={2}>
            <StackView axis="horizontal" alignment="center">
              <Input.InputLabel
                controls="minutes"
                fontSize={1}
                color="foregroundSecondary"
                marginRight={1}
              >
                Length:
              </Input.InputLabel>
              <NumberField
                id="minutes"
                as={Input.Inline}
                min={0}
                max={59}
                pad={1}
                fontSize={1}
                lineHeight={4}
                {...getFieldProps('minutes', (value) => value)}
              />
              <Text fontSize={1} marginHorizontal={0.5}>
                :
              </Text>
              <NumberField
                as={Input.Inline}
                min={0}
                max={59}
                pad={2}
                fontSize={1}
                lineHeight={4}
                {...getFieldProps('seconds', (value) => value)}
              />
            </StackView>
            <StackView axis="horizontal" alignment="center" spacing={1}>
              <Input.InputLabel
                controls="bpm"
                fontSize={1}
                color="foregroundSecondary"
              >
                BPM:
              </Input.InputLabel>
              <NumberField
                id="bpm"
                as={Input.Inline}
                min={0}
                pad={1}
                fontSize={1}
                lineHeight={4}
                {...getFieldProps('bpm', (value) => value)}
              />
            </StackView>
            <StackView axis="horizontal" alignment="center" spacing={1}>
              <Input.InputLabel
                controls="meter"
                fontSize={1}
                color="foregroundSecondary"
              >
                Meter:
              </Input.InputLabel>
              <Select.Inline
                id="meter"
                fontSize={1}
                {...getFieldProps('meter', (event) => event.value)}
              >
                <Select.Option value="none">None</Select.Option>
                <Select.Option value="2/2">2/2</Select.Option>
                <Select.Option value="2/4">2/4</Select.Option>
                <Select.Option value="3/4">3/4</Select.Option>
                <Select.Option value="4/4">4/4</Select.Option>
              </Select.Inline>
            </StackView>
          </StackView>
        </StackView>
      )}
    </Form>
  )
})

Props

initialPayloadObject

The initial data to seed the form with. Used to determine previous state when a cancel action occurs as well as if the form should submit or not. This can be passed new data (like updating from onSubmit). Use a simple data structure to avoid false positives when the previous and initial payload are compared to determine calling onSubmit.

onSubmit(payload: Object<any>, complete: () => void) => void

Called whenever a submit action occurs (enter key / form blur) and the form has a different internal payload compared to the initialPayload.

payload

The newly edited payload that should be submitted.

complete

Call whenever the form is done completing to re-enable the form.

children

(props: {
  isEditing: boolean,
  isSubmitting: boolean,
  editButtonProps: Object,
  getFieldProps: (id: any) => Object,
}) => React.Node

isEditing

Toggled by trigger or focusing/blurring a field.

isSubmitting

True when a submit action occurs either from the enter key or blurring the form with different data from initialPayload.

editButtonProps

Provides the proper props and callbacks to toggle editing mode and show a spinner when submitting. Must be passed to a Button component.

getFieldProps

Accepts an id as the first argument that maps to the respective field key in initialPayload. It also receives a getChangeValue function as the second argument used to resolve the value when dealing with non traditional events like Select or NumberField.

Props

PreviousFieldSet NextInput