DRAFT DateTimePicker Interactors

[wKich]

PoC API of Date/Time pickers

const DatePicker = /* HTML of FieldForm */.extend('datepicker')
  .filters({ disabled, readonly, valid })
  .actions({
    setDate({ year?: number, month?: number, day?: number })
    setYear(year: number)
    setMonth(month: number)
    setDay(day: number)
    clear() // Only possible if datepicker is allow to do it, throw an error overwise
    setToday() // The same as 'clear'
    setValue(value: string) // The same. 
  })

const TimePicker = /* HTML of FieldForm */.extend('timepicker')
  .filters({ disabled, readonly, valid, format /* 12/24 hours */ })
  .actions({
    setTime({ hour?: number, minute?: number, second?: number }, format?: 'am' | 'pm')
    setHour(hour: number, format?: 'am' | 'pm')
    setMinute(minute: number)
    setSecond(second: number)
    clear() // Only possible if datepicker is allow to do it, throw an error overwise
    setNow() // The same as 'clear'
    setValue(value: string) // The same
  })

I think the all set methods have to throw an error if date is beyond min/max date
And if Datepicker is disabled or is readonly

In some cases, datepicker might be configured to allow select only the year or month or day or any combination of these
So in that case I think we have to throw an error if a user is trying to set something that's not allowed

Progress:

• DatePicker interactor
  • Calendar Interactor
  • Calendar with date utils
  • Calendar tests
  • DatePicker variants
    • Modal
    • Inline
    • Static
    • Views combinations (month/month+year/year)
    • KeyboardDatePicker
  • DatePicker with date utils
  • DatePicker tests (done only for simple variant)
• TimePicker Interactor
  • Clock Interactor
• DateTimePicker Interactor

[cowboyd]

Heavy lift here 💪🏻 💪🏻

keep it up!

[wKich]

@cowboyd @elrickvm, the calendar ready to review. There are some issues and questions. I described them in the comments, please, take a look.

[jnicklas]

perform should really allow you to return a value out of it, I added an issue for this on bigtest: thefrontside/bigtest#914

[cowboyd]

@wKich As I was talking this over with @jnicklas it occured to me that while we can make heroic hacks to make this work in a locale-indepent way, the fact of the matter is that locale (and specifically date, time and month formatting) are a key abstraction to the component.

If we think of it that way, then there really is no one true "DatePicker" component, but instead an abstraction λlocale → DatePicker(locale) that can generate hundreds of potential datepicker components.

Perhaps the simplest thing that could possibly work would be to introduce this same abstraction of the DatePicker component into the DatePicker interactor so that it can also generate hundreds of potential datepicker interactors. In other words, λlocale → Interactor(locale)

We could do this in practice by providing not a DatePicker interator, but a createDatePicker() function that accepted formatting functions and returned a DatePicker.

import { createDatePickerInteractor } from 'material-ui-interactors';

const DatePicker = createDatePicker({
  get(formattedDate: string): Date {
    //parse date
  },
  set(date: Date): void {
  }
});

The interface doesn't need to look exactly like this, but you get the idea.

We are going to have to fight the demon named "locale" head on at some point, and this will be an incremental step in that direction. What do you think?

[wKich]

@cowboyd, I think it would be enough to pass date-io utils into the createDatePicker function. We can get a format from the data attribute and we have a value. And then we just need to use parse(value: string, format: string): TDate | null; from utils to get a date. But the problem is that the value can't have full information about the exact date. For example, the first example from the official demo https://material-ui-pickers.dev/demo/datepicker, has April 9th as a value, but lacks a year, so potentially it could be any year.

Datepicker - @material-ui/pickers component

Datepicker usage examples and API of @material-ui/pickers

[cowboyd]

For example, the first example from the official demo https://material-ui-pickers.dev/demo/datepicker, has April 9th as a value, but lacks a year, so potentially it could be any year.

Hmm, this is interesting if we look at it from a type perspective, there are two different data types here Day, and Date I think we need to somehow fix what is the data type of the thing you're working with.

Datepicker - @material-ui/pickers component

Datepicker usage examples and API of @material-ui/pickers

[wKich]

React-admin uses the DatePicker with the native variation and they don't expose format attribute

[cowboyd]

React-admin uses the DatePicker with the native variation and they don't expose format attribute

@wKich Can we make it work if we force users to choose the format before getting the interactor?

[wKich]

Oh, the format exists only for readonly, non-keyboard datepickers. I need to test the keyboard variant, but it seems should work

[cowboyd]

Since all the of the steps in this test use the same render, maybe should make the individual actions children of the single parent that does the renderComponent() ?

[cowboyd]

Since all the tests in this file use the same locator, I would assign it once at the top:

const calendar = Calendar("18 August 2014");

and then use the assertion form for things like filters:

assertion(calendar.has({ title: "August 2014" }));