creaturesinunitards / mithril-timepicker

mithril-timepicker

Pick a time! But only if you're using Mithril, and only for flexbox-capable browsers.

Demo

mithril-timepicker at flems.io

Installation

via npm:

$> npm install mithril-timepicker

You'll want to bring in either src/style.sass or src/style.css, depending on your workflow.

Usage

const TimePicker = require('mithril-timepicker')

// make a reference to an object with {h, m}
const myTime = { 
    h: mySpecialDate.getHours(), 
    m: mySpecialDate.getMinutes() 
}

m(TimePicker, {
    time: myTime, // time passed in MUST be a reference, not a literal
    onchange: ({h, m}) => {
        mySpecialDate.setHours(h, m, 0, 0)
    })     
})

// if you want to wipe the slate clean
TimePicker.reset(myTime)

API

attrs to pass to the component instance:

ATTRIBUTE	TYPE	Required?	DESCRIPTION
time	Object reference	YES	{h, m} e.g. { h: 23, m: 59 }. Hour is always 0-23
tfh	Boolean	no	24-hour time, defaults to false
increment	Int	no	5- or 15- minute options per hour, defaults to 5
onchange	Function	no	Handler. Receives { h, m } as its argument

Theming

You can change the appearance easily by editing either style.css or style.sass, whichever fits your workflow. If you're using SASS, you can make a few quick UI changes based on variables at the top of the document.

mithril-timepicker's Issues

Improve UX with some animation?

The transitions are a little disorientating. The first one is good, since it grows up to its size. But upon clicking a time, the numbers suddenly change and there's little indication of what happened.

A possible fix might be sliding in the new numbers from right to left. A sort of checkmark indication would be nice too after selecting a full time.

Here's a great resource that better shows what I mean.

npm vulnerabilities

Danger!

According to npm:

 Moderate: Denial of Service
 Package: js-yaml
 Patched in: >=3.13.0
 Dependency of: mithril-timepicker
 Path: mithril-timepicker > css-loader > cssnano > postcss-svgo > svgo > js-yaml
 More info: https://npmjs.com/advisories/788

 High: Code Injection
 Package: js-yaml
 Patched in: >=3.13.1
 Dependency of: mithril-timepicker
 Path: mithril-timepicker > css-loader > cssnano > postcss-svgo > svgo > js-yaml
 More info: https://npmjs.com/advisories/813

found 2 vulnerabilities (1 moderate, 1 high) in 924 scanned packages
  2 vulnerabilities require manual review. See the full report for details.

Is there an easy solution?