Form

View Source

render(() => {
  const [value, setValue] = React.useState({ name: "Dave's Band Tag Team" })
  return (
    <ThemeProvider theme={{ icons }}>
      <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="services.split" size="md" color="light-6" />
              <Icon name="services.tag" size="md" color="light-6" />
            </StackView>
          </StackView>
        )}
      </Form>
    </ThemeProvider>
  )
})

render(() => {
  const [value, setValue] = React.useState({ name: "Dave's Band Tag Team" })
  return (
    <ThemeProvider theme={{ icons }}>
      <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="services.split" size="md" color="light-6" />
              <Icon name="services.tag" size="md" color="light-6" />
            </StackView>
          </StackView>
        )}
      </Form>
    </ThemeProvider>
  )
})

Length:

BPM:

Meter:

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

children

(props: {
  editButtonProps: ComponentProps<typeof Button>
  getFieldProps: (
    id: keyof Payload,
    getChangeValue?: (event: ChangeEvent<HTMLInputElement>) => any
  ) => Record<string, any>
  isEditing: boolean
  isSubmitting: boolean
  payload: Payload
}) => ReactNode

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.

initialPayloadPayload

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: Payload, 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.

Props

PreviousFieldSet NextInput