Generated by XState Viz: https://xstate.js.org/viz

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  const isFilledStaticDateRange = (
    range
) => {
    const [datefrom, dateTo] = range

    return !!datefrom && !!dateTo
}
  const dateRange = [undefined, undefined]
  const fetchMachine = Machine(
        {
            id: 'root-datepicker',
            context: { dateRange }, // [ undef, undef]
            initial: 'closed',
            states: {
                closed: {
                    on: {
                        OPEN: [
                            {
                                target: 'rangeSelection.rangeSelected',
                                cond: context =>
                                    isFilledStaticDateRange(context.dateRange),
                            },
                            {
                                target: 'rangeSelection.startDateEmpty',
                                cond: context =>
                                    !isFilledStaticDateRange(context.dateRange),
                            },
                        ],
                    },
                },
                rangeSelection: {
                    //initial: 'closed',
                    on: {
                        SHOW_PREVIEW: 'rangePreview',
                        CANCEL: {
                            target: 'closed',
                            actions: ['cancel'],
                        },
                        APPLY: {
                            target: 'closed',
                            cond: context =>
                                isFilledStaticDateRange(context.dateRange),
                            actions: context => onChange(context.dateRange),
                        },
                    },
                    states: {
                        /*closed: {
                            on: {
                                OPEN: [
                                    {
                                        target: 'rangeSelected',
                                        cond: context =>
                                            isFilledStaticDateRange(
                                                context.dateRange,
                                            ),
                                    },
                                    {
                                        target: 'startDateEmpty',
                                    },
                                ],
                            },
                        },*/
                        startDateEmpty: {
                            on: {
                                SET_DATE: [
                                    {
                                        target: 'startDateError',
                                        cond: (context, event) => false, // TODO: function for date validation
                                    },
                                    {
                                        target: 'startDateSelected',
                                        actions: assign({
                                            dateRange: (context, event) => [
                                                new Date('10/10/2000'), //event.date,
                                                undefined,
                                            ],
                                        }),
                                    },
                                ],
                            },
                        },
                        // start date input focus should move back to start date empty state
                        // |10/10/2000   |__________
                        startDateSelected: {
                            // alternative naming: endDateEmpty
                            on: {
                                SET_DATE: [
                                    {
                                        // not possible
                                        // when start date input is focused,
                                        target: 'startDateError',
                                        cond: (context, event) => false, // TODO: function for date validation
                                    },
                                    {
                                        target: 'endDateError',
                                        cond: (context, event) => false, // TODO: function for date validation
                                    },
                                    {
                                        target: 'rangeSelected',
                                        actions: assign({
                                            dateRange: (context, event) => [
                                                context.dateRange[0],
                                                new Date('10/10/2001'), //event.date,
                                            ],
                                        }),
                                    },
                                ],
                            },
                        },
                        // both dates are selected
                        rangeSelected: {
                            on: {
                                SET_DATE: [
                                    {
                                        target: 'startDateError',
                                        cond: (context, event) => false, // TODO: function for date validation
                                    },
                                    {
                                        target: 'endDateError',
                                        cond: (context, event) => false, // TODO: function for date validation
                                    },
                                    {
                                        // is it possible to stay in the same state
                                        // but with different date range ?
                                        target: 'rangeSelected',
                                        cond: (context, event) => false,
                                    },
                                    {
                                        target: 'startDateSelected',
                                        actions: assign({
                                            dateRange: (context, event) => [
                                                event.date,
                                                undefined,
                                            ],
                                        }),
                                    },
                                ],
                            },
                        },
                        startDateError: {
                            on: {
                                SET_DATE: [
                                    {
                                        target: 'startDateSelected',
                                        cond: (context, event) => false, // is event end date is not specified
                                        //actions: {}
                                    },
                                    {
                                        target: 'startDateError',
                                    },
                                ],
                            },
                        },
                        endDateError: {
                            on: {
                                SET_DATE: [
                                    {
                                        target: 'startDateSelected',
                                        cond: (context, event) => false, // is event end date is not specified
                                        //actions: {}
                                    },
                                    {
                                        target: 'rangeSelected',
                                        cond: (context, event) => false, // is event start and end date specified
                                        //actions: {}
                                    },
                                    {
                                        target: 'endDateError',
                                    },
                                ],
                            },
                        },
                        hist: { type: 'history' },
                    },
                },
                rangePreview: {
                    on: {
                        SET_RANGE: {
                            target: 'rangeSelection.rangeSelected',
                            actions: assign({
                                dateRange: (context, event) => event.range,
                            }),
                        },
                        HIDE_PREVIEW: {
                            target: 'rangeSelection.hist',
                        },
                    },
                },
            },
        },
        {
            actions: {
                cancel: assign({
                    dateRange: () => [...dateRange],
                }),
            },
        },
    )