Hi and couple of questions - suggestions

[FedeLacabaratz]

Hi mash-a, first of all thanks for making this Google Calendar-like TimePicker available for React. There are a couple of things I would like to point out for you to either fix (if it is an actual malfunction), or maybe tell me where I went wrong on implementing them. I hope you can help me work things out.

1st - I'm trying to implement the 'noneOption' within my options but it won't take it or it won't work. I tried by making it equal to 'true' (boolean option), 'no option' (string option) and '{value: 9999, label: 'no option', isDisabled: false, allData: null}' (object option) without any success.

2nd - For some reason when I place the component when a selection is made inside the list, the dropdown won't close and I have to click outside to trigger the setting of the value. Meaning that I have to do an extra click to make a selection. Is there any option that I can use or workaround trough CSS to make it work like it does in the jQuery TimePicker? (whenever you click an option, this option gets set and the dropdown automatically closes up).

3rd - If I type a wrong value, the first time it gets set to 'null' because it doesn't comply with the right format or value for hours and minutes (i.e. if I type 7689). This is perfect so far, but if I write another bad example on top then the wrong value, it stays put and I can't event set it to 'null' from my clear button (I made a clear button that sets the input value to 'null' whenever I need to). The only way to change this incorrect value and make it work again is by clicking the dropdown and select a valid option or type a valid value. I would really appreciate if my wrong value is set to 'null' every time, or at least if it can be set to 'null' from my button.

4th - Whenever I write a wrong value a 'Invalid time.' message is written. What I would need is to be able to pass a custom message as a 'string' if possible instead of having a fixed up hardcoded message, is this posible?

I will leave a copy of the component I've created to use with this TimePicker for you to take a look a my code and also a the implementation on my main component so you can see how do I handle values.

Thanks once again and I look forward to hearing from you.

`
//This would be my InputTimePicker made from your TimePicker
import React from 'react'
import PropTypes from 'prop-types'
import { TimePicker } from "@mash-a/timepicker-react";
import '../../styles/styles.scss'

const InputTimePicker = ({
id,
className,
name,
value,
onChange,
timeInterval,
timeFormat = 'H:i',
enableSelect = false,
noneOption,
showOn,
}) => {

const options = {
    step: timeInterval,
    timeFormat: timeFormat,
    enableSelect: enableSelect,
    showOn: showOn,
    noneOption: noneOption
}

return (
    <div className={className}>
        <TimePicker
            id={id}
            name={name}
            value={value}
            onChange={onChange}
            options={options}
        />
    </div>
)

}
export default React.memo(InputTimePicker)

InputTimePicker.propTypes = {
disableTextInput: PropTypes.bool,
id: PropTypes.any,
className: PropTypes.string,
name: PropTypes.any,
value: PropTypes.string,
onChange: PropTypes.func,
options: PropTypes.object,
enableSelect: PropTypes.bool,
showOn: PropTypes.array
}

//This would be my implementation of this InputTimePicker on my main component (part of the main component of course)

const [newSchedulerTimeStartFrom, setNewSchedulerTimeStartFrom] = useState(null)

const handleTimeInputChange = (newTime) => {
if (!!newTime && newTime.includes(':')) {
setNewSchedulerTimeStartFrom({
value: !!newTime && Number(newTime.replace(':', '')),
label: String(newTime),
isDisabled: false,
allData: null
})
} else {
setNewSchedulerTimeStartFrom(null)
}
}

<InputTimePicker
id="newSchedulerTimeStartFrom"
name="newSchedulerTimeStartFrom"
className="formInputTimePicker"
value={!!newSchedulerTimeStartFrom || (!!newSchedulerTimeStartFrom && newSchedulerTimeStartFrom[0] !== undefined) ? newSchedulerTimeStartFrom.label : null}
onChange={handleTimeInputChange}
timeInterval={timeInterval}
showOn={['click', 'focus', 'blur']}
noneOption={{value: 9999, label: 'no option', isDisabled: false, allData: null}}
/>
<ButtonCustom
className="formContainer__formInputSelectCloseButton2"
tabIndex="-1"
events={{ onClick: () => setNewSchedulerTimeStartFrom(null) }}
>


`

[mash-a]

Hi @FedeLacabaratz! Thanks for bringing this to my attention. I'm looking into what you've outlined. In the meantime, if you have any ideas, feel free to make a PR as well!