Skip to content

Instantly share code, notes, and snippets.

@TheMcMurder
Last active May 7, 2020 15:14
Show Gist options
  • Save TheMcMurder/12e903e581f79dede1e9e0e3f3247773 to your computer and use it in GitHub Desktop.
Save TheMcMurder/12e903e581f79dede1e9e0e3f3247773 to your computer and use it in GitHub Desktop.
Generated by XState Viz: https://xstate.js.org/viz
const alwaysClasses = 'px-4 rounded'
const primaryAlways = `text-white`
const secondaryAlways = `bg-transparent border`
const buttonMachine = Machine(
{
id: 'button',
initial: 'active',
on: {
CHOOSE_BTN_TYPE: {
actions: ['choose_btn_type'],
},
},
context: {
buttonType: 'primary',
currentClasses: null,
classes: {
primary: `${alwaysClasses} ${primaryAlways} bg-blue-400 hover:bg-blue-500`,
secondary: `${alwaysClasses} ${secondaryAlways} hover:bg-blue-400 text-blue-400 hover:text-white border-blue-400 hover:border-transparent`,
loading: `${alwaysClasses} ${primaryAlways} bg-blue-100`,
disabled: {
primary: `${alwaysClasses} ${primaryAlways} bg-blue-100`,
secondary: `${alwaysClasses} ${secondaryAlways} border-blue-100 text-blue-100`,
},
},
},
states: {
active: {
on: {
DISABLE: {
target: 'disabled',
actions: 'change_classes',
},
LOADING: {
target: 'loading',
actions: 'change_classes',
},
},
},
loading: {
on: {
DISABLE: {
target: 'disabled',
actions: 'change_classes',
},
ACTIVATE: {
target: 'active',
actions: 'change_classes',
},
},
},
disabled: {
on: {
ACTIVATE: {
target: 'active',
actions: 'change_classes',
},
LOADING: {
target: 'loading',
actions: 'change_classes',
},
},
},
},
},
{
actions: {
change_classes: assign({
currentClasses: function(context, event) {
const variant = context.buttonType
const eventKey = event.type
if (eventKey === 'LOADING') {
return context.classes['loading']
} else if (eventKey === 'DISABLE') {
return context.classes.disabled[variant]
} else if (eventKey === 'ACTIVATE') {
return context.classes[variant]
}
},
}),
choose_btn_type: assign({
currentClasses: (context, event) => {
const buttonType = event.buttonType
return context.classes[buttonType] || context.classes['primary']
},
buttonType: (context, event) => {
const buttonType = event.buttonType
if (buttonType === 'primary' || buttonType === 'secondary') {
return buttonType
} else {
return 'primary'
}
},
}),
},
}
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment