Time Field

SketchSystems.spec

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
    

SketchSystems_prototype.js

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>
  )
}