Skip to content

Instantly share code, notes, and snippets.

@sarimarton
Last active August 31, 2021 04:00
Show Gist options
  • Save sarimarton/ac3a5d978541e640a89c02bf7a10ae99 to your computer and use it in GitHub Desktop.
Save sarimarton/ac3a5d978541e640a89c02bf7a10ae99 to your computer and use it in GitHub Desktop.
Time Field
Time Field
Hour Focused
Hour Focused Init*
update -> Hour Focused Init
digit typed -> Hour Focused Typed
Hour Focused Typed
digit typed -> Minute Focused Init
Minute Focused
Minute Focused Init*
digit typed -> Minute Focused Typed
Minute Focused Typed
digit typed -> Meridiem Focused
Meridiem Switch
switch -> Meridiem Focused
Meridiem Focused
a or p typed -> Meridiem Focused
function selectElement(element) {
var sel = window.getSelection();
sel.removeAllRanges();
var range = document.createRange();
range.selectNodeContents(element);
sel.addRange(range);
}
function toValue(context) {
const ctx = Object.assign({}, context)
// This is the only possible invalid state which the user can create
// when enters 0 on the second digit in the 12-format. We can't avoid this as
// - we must allow to enter 0 as the second digit
// - we must reset the first digit to 0 too when
if (ctx.format === '12' && ctx.hour === 0) {
return ''
}
if (ctx.format === '12' && ctx.meridiem === 'am' && ctx.hour === 12) {
ctx.hour -= 12
}
if (ctx.format === '12' && ctx.meridiem === 'pm' && ctx.hour < 12) {
ctx.hour += 12
}
return `${String(ctx.hour).padStart(2, '0')}:${String(ctx.minute).padStart(2, '0')}`
}
function fromValue(value, format) {
let hour24 = +value.substr(0, 2)
let minute = +value.substr(3, 2)
let meridiem = hour24 < 12 ? 'am' : 'pm'
let hour12 = hour24 === 0 ? 12 : (hour24 > 12 ? hour24 - 12 : hour24)
let hour = format === '12' ? hour12 : hour24
return { hour24, minute, meridiem, hour12, hour, format }
}
let context = Object.assign({},
{ format: '12', focus: 0 },
fromValue('13:15', '12')
)
function render(model) {
let currentState = model.active_states[0].name;
let focusGroup = [0, 0, 1, 1, 2][context.focus]
var sel = focusGroup === 0 ? '.hour' : focusGroup === 1 ? '.minute' : '.meridiem'
setTimeout(() => {
console.log(sel);
//selectElement(document.querySelector(sel))
})
let handleEvent = (event) => {
console.log(event)
if (event.type === 'keydown') {
if (context.focus < 4 && !/\d/.test(event.key)) return;
if (context.focus === 0) {
context.focus = 1
model.emit('update')
return;
}
if (context.focus === 0) {
model.emit('update')
return;
}
if (context.focus === 0) {
model.emit('update')
return;
}
if (context.focus === 0) {
model.emit('update')
return;
}
if (context.focus === 4) {
if (event.key === 'p') context.meridiem = 'pm'
if (event.key === 'a') context.meridiem = 'am'
model.emit('update')
return
}
}
if (event.type === 'click') {
context.meridiem = { am: 'pm', pm: 'am' }[context.meridiem]
model.emit('update')
}
}
return (
<pre onKeyDown={handleEvent}>
<span
className="hour"
tabIndex={0}
onFocus={() => {}}
onKeyDown={(event) => {}}
>
{String(context.hour).padStart(2, '0')}
</span>
:
<span
className="minute"
tabIndex={0}
tabIndex={0}
onFocus={() => {}}
onKeyDown={(event) => {}}
>
{String(context.minute).padStart(2, '0')}
</span>
{context.format === '12' && <>
{' '}
<span
tabIndex={0}
onFocus={() => {}}
onKeyDown={(event) => {}}
onClick={() => {}}
>
{context.meridiem.toUpperCase()}
</span>
</>}
<br /><br />
---------
<br /><br />
currentState: {model.active_states[0].name}<br /><br />
Sel: {sel}<br /><br />
Value: {toValue(context)}<br /><br />
Context: {JSON.stringify(context, null, 2)}
</pre>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment