DynamicDateRangePicker

SketchSystems.spec

DynamicDateRangePicker
  DateRangeNotSet
    click -> CustomRange
  CustomRange
    fixedStart -> FixedStart
    prevPeriod -> PreviousPeriod
    nextPeriod -> NextPeriod
    currentPeriod -> CurrentPeriod
    # See https://sketch.systems/okonet/sketch/64ddad32ec5753cdab12da7d4eb53a48
    DateRangePicker&
  FixedStart
    SelectStartDate
      # Only if start date is selected
      apply -> DateRangeSet
      cancel -> DateRangeNotSet
      hover -> StartDateHighlighted
      # It be triggered after the MaskedInput is complete
      typing -> StartDateValid?
   
    StartDateValid?
      valid -> SelectStartDate
      invalid -> StartDateInvalid
    StartDateInvalid
      typing -> StartDateValid?
      click -> SelectStartDate
    StartDateHighlighted
      click -> SelectStartDate
  CurrentPeriod
    apply -> DateRangeSet
    cancel -> DateRangeNotSet 
      
  PreviousPeriod
    apply -> DateRangeSet
    cancel -> DateRangeNotSet
  NextPeriod
    apply -> DateRangeSet
    cancel -> DateRangeNotSet  

  DateRangeSet
  

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  return <h1>The current state is: {current_state_name}</h1>
}