Last active
July 24, 2018 22:16
-
-
Save georgecrawford/5e12ae27b8b604aefa72313d5c716af5 to your computer and use it in GitHub Desktop.
Team Create Form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Team Create Form | |
Inactive | |
focus -> Active | |
Active | |
reset -> Inactive | |
Empty | |
type -> Completed | |
blur -> Inactive | |
Completed | |
submit -> Submitted | |
Submitted |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
window.GeorgeHelper = { | |
getHeaderElements: () => { | |
const style = ` | |
wired-card, wired-input { | |
padding: 10px; | |
font-family: inherit; | |
} | |
#wrapper { | |
font-family: 'Gloria Hallelujah', sans-serif; | |
} | |
`; | |
return [React.createElement("style", { | |
dangerouslySetInnerHTML: { | |
__html: style | |
} | |
}), React.createElement("link", { | |
href: "https://fonts.googleapis.com/css?family=Gloria+Hallelujah", | |
rel: "stylesheet" | |
})]; | |
}, | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const loadScript = url => { | |
return new Promise(res => { | |
const script = document.createElement('script'); | |
script.src = url; | |
script.onload = res; | |
document.head.appendChild(script); | |
}); | |
}; | |
const scripts = [ | |
'https://unpkg.com/wired-elements@latest/dist/wired-elements.bundled.min.js', | |
'https://rawgit.com/georgecrawford/5e12ae27b8b604aefa72313d5c716af5/raw/SketchSystems_helper.js' | |
]; | |
const loadScripts = cb => { | |
window.SCRIPT_LOAD_STATUS = 'loading'; | |
return Promise.all(scripts.map(loadScript)).then(() => { | |
window.SCRIPT_LOAD_STATUS = 'loaded'; | |
}); | |
}; | |
const render = model => { | |
console.warn(model.active_states[0].name); | |
if (!window.SCRIPT_LOAD_STATUS) { | |
loadScripts().then(() => model.emit('reset')); | |
return; | |
} else if (window.SCRIPT_LOAD_STATUS !== 'loaded') { | |
return; | |
} | |
if (!window.GeorgeHelper) { | |
alert('window.GeorgeHelper not loaded!'); | |
return; | |
} | |
const current_state_name = model.active_states[0].name; | |
const children = window.GeorgeHelper.getHeaderElements(); | |
const events = { | |
focus: 'onFocus', | |
blur: 'onBlur', | |
type: 'onKeyUp', | |
submit: 'onClick', | |
reset: 'onClick' | |
}; | |
const getEvents = types => { | |
return types.reduce((acc, type) => { | |
return Object.assign(acc, { | |
[events[type]]: () => model.emit(type) | |
}); | |
}, {}); | |
}; | |
switch (current_state_name) { | |
case 'Inactive': | |
children.push(createPrompt()); | |
children.push(createInput(getEvents(['focus', 'blur', 'type']))); | |
break; | |
case 'Empty': | |
children.push(createPrompt()); | |
children.push( | |
createInput( | |
Object.assign(getEvents(['focus', 'blur', 'type']), { | |
focussed: true | |
}) | |
) | |
); | |
break; | |
case 'Completed': | |
children.push(createPrompt()); | |
children.push( | |
createInput( | |
Object.assign(getEvents(['focus', 'blur', 'type']), { | |
focussed: true, | |
value: "George's team!" | |
}) | |
) | |
); | |
children.push(createSubmit(getEvents(['submit']))); | |
children.push(createCancel(getEvents(['reset']))); | |
break; | |
case 'Submitted': | |
children.push(createSuccess({team: "George's team!"})); | |
children.push(createLink(getEvents(['reset']))); | |
break; | |
} | |
return ( | |
<wired-card id="wrapper" elevation={3}> | |
{children} | |
</wired-card> | |
); | |
}; | |
const createPrompt = () => { | |
return <div>Create a team</div>; | |
}; | |
const createSuccess = ({team}) => { | |
return ( | |
<div> | |
Thanks! You created the <span style={{fontWeight: 'bold'}}>{team}</span>{' '} | |
team | |
</div> | |
); | |
}; | |
const createInput = ({onFocus, onBlur, onKeyUp, focussed, value = ''}) => { | |
const style = {backgroundColor: focussed && 'pink'}; | |
return ( | |
<wired-input | |
elevation={3} | |
onFocus={onFocus} | |
onBlur={onBlur} | |
onKeyUp={onKeyUp} | |
style={style} | |
value={value} | |
placeholder={'my team name'} | |
> | |
create | |
</wired-input> | |
); | |
}; | |
const createSubmit = ({onClick}) => { | |
return ( | |
<wired-button elevation={3} onClick={onClick}> | |
create | |
</wired-button> | |
); | |
}; | |
const createCancel = ({onClick}) => { | |
return <wired-button onClick={onClick}>cancel</wired-button>; | |
}; | |
const createLink = ({onClick}) => { | |
return <a onClick={onClick}>Create another team</a>; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment