Uploaded image for project: 'stripes-components'
  1. stripes-components
  2. STCOM-325

Use formField() with <Datepicker>

    XMLWordPrintable

    Details

    • Type: Story
    • Status: Closed (View Workflow)
    • Priority: P3
    • Resolution: Done
    • Affects Version/s: None
    • Fix Version/s: 5.4.0
    • Labels:
      None
    • Template:
    • Sprint:
      stripes-force 88, stripes-force 89, stripes-force 90, stripes-force 91, stripes-force 92, stripes-force 93, stripes-force 94
    • Story Points:
      8
    • Development Team:
      Stripes Force
    • Front End Estimate:
      Large < 10 days

      Description

      Purpose

      The <Datepicker> has slightly different behavior based on whether it's being used with Redux Form / React Final Form or not. We want to make that behavior consistent.

      Redux Form / React Final Form pass input and meta props when used like: <Field component={Datepicker}>

      The formField() higher-order component (previously known as reduxFormField()) splits those off into more conventional props.

      This will require breaking changes.

      Goals

      • No input or meta props (with the help of formField()).
      • Datepicker has the same behavior whether or not Redux Form / React Final Form are being used.
      • No warnings being thrown by moment.
      • Remove getDerivedStateFromProps hook.
      • Simplify, or perhaps even remove, the constructor.
      • 100% test coverage for <Datepicker>, <Calendar>, and <DayButton>.

      Props

      Based on previous spikes on this component, these are the proposed new prop changes. During the work to make this happen, these are subject to change as needed.

      The additions destructuring the meta object: dirty, warning, etc. might not be needed, but are included here for consistency with other form field components.

      Prop Type Change
      autoFocus bool no change
      backendDateStandard string REMOVE, dateFormat should handle this need
      date object REMOVE, value should handle this need
      dateFormat string no change, but might need to also accept func type
      dirty bool ADD
      disabled bool no change
      error node ADD
      exclude func no change
      hideOnChoose bool no change
      id string no change
      input object REMOVE, use formField() HOC
      inputRef object no change
      label node no change
      loading bool ADD
      locale string no change
      meta object REMOVE, use formField() HOC
      name string ADD
      onBlur func ADD
      onChange func no change
      onFocus func ADD
      onSetDate func REMOVE, onChange() should handle this need
      readOnly bool no change
      required bool no change
      screenReaderMessage string no change
      showCalendar bool no change
      tether object no change
      timeZone string no change
      useFocus bool no change
      valid bool ADD
      value string
      warning node ADD

      Tests

        TestRail: Results

          Attachments

            Issue Links

              Activity

                People

                Assignee:
                JohnC John Coburn
                Reporter:
                JohnC John Coburn
                Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                  Dates

                  Created:
                  Updated:
                  Resolved:

                    TestRail: Runs

                      TestRail: Cases