Skip to content

v2.0.0 - Major Overhaul

Compare
Choose a tag to compare
@Dan503 Dan503 released this 09 Nov 13:31
· 36 commits to master since this release

I completely rebuilt the plugin from the ground up to have more easily shared code with other time-input-polyfills I'm planning on making.

It also has robust automated testing built into it now for quality assurance.

Breaking changes in v2.0.0

onChange replaced with setValue

In v1 you updated the value using an onChange event. This was really clunky though.

// v1 syntax

const [value, setValue] = useState()

// ...

<TimeInput value={value} onChange={({ value }) => {
    doStuff(value)
    setValue(value)
}} />

In v2, the syntax has been simplified down to this:

// v2 syntax

const [value, setValue] = useState()

useEffect(()=>{
    doStuff(value)
}, [value])

// ...

<TimeInput value={value} setValue={setValue} />

Note: It is still possible to use onChange, however this is just an extension of the native <input type="time"> onChange event now. It is not compatible with v1 and it does not provide a consistent value between polyfilled and non-polyfilled browsers.

Warning: events like onChange and onKeyUp fire before the state in the polyfill has settled. This means that event.target.currentValue will not return the expected value in the polyfill version. It was out of scope to adjust the timing on every possible event to fire after the state has settled.

polyfillSource value has changed location

In version 1, you would import the polyfill utils from here:

@time-input-polyfill/react/dist/timePolyfillUtils.js.

That doesn't exist anymore, you need to import from here instead now:

@time-input-polyfill/utils/npm/time-input-polyfill-utils.min.js