Skip to content

Instantly share code, notes, and snippets.

@okonet
Created August 13, 2020 15:34
Show Gist options
  • Save okonet/5a3302aad6d0d8109ee96ec16b7171c5 to your computer and use it in GitHub Desktop.
Save okonet/5a3302aad6d0d8109ee96ec16b7171c5 to your computer and use it in GitHub Desktop.
DynamicDateRangePicker
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
function render(model){
let current_state_name = model.active_states[0].name;
return <h1>The current state is: {current_state_name}</h1>
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment