radekmie / react-timepicker Goto Github PK

Can this picker (both in bubbles and top value) be locale specific as some locales e.g., Arabic [‘ar’], have different representation of numerals.
E.g. parseInt('12').toLocaleString('ar')
=>"١٢"

Circles are not visible because the "r" css property isn't handled
http://stackoverflow.com/questions/14255631/style-svg-circle-with-css

using prop formatNumber, the numbers in the balls are represented the same as in the value at the top.
E.g., In the balls the numbers gets displayed the same e.g. '03' instead of '3'. For values '03' is ok but for the balls '3' should be applied.
Can represenation of numerals in value on top be different from what is displayed in balls(without '0').

Hi, nice work on this TimePicker.

You're importing Timepicker as default in your example but there's no default export in your component file.

I suggest to export Timepicker as default or correct the import in the example.
Btw you can also show the css import to demonstrate a full working example :

import { Timepicker } from 'react-timepicker';
import 'react-timepicker/timepicker.css';

This does not happen when run locally. But when deployed to other enevironments to be tested, the picker
immediately closes on selecting hour. Do you have any suggestions what results in this behaviour?

Steps to reproduce:
Chrome

1. Set militaryTime = False
2. Open the time picker (should open in 12 hr mode)
3. Click on 12.

-->Throws an error: "Cannot set property 0 of undefined " in the console

In the provided example html, this will recreate the bug

 ReactDOM.render(React.createElement(Timepicker, {
                    militaryTime: false,
                    hours:   new Date().getHours(),
                    minutes: new Date().getMinutes()
                }), root);

Two warning:

Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs
console.warn node_modules/react/lib/lowPriorityWarning.js:40

Warning: Accessing createClass via the main React package is deprecated, and will be removed in React v16.0. Use a plain JavaScript class instead. If you're not yet ready to migrate, create-react-class v15.* is available on npm as a temporary, drop-in replacement. For more info see https://fb.me/react-create-class

Any plans to catch up with this?

hey! cool stuff :)
i've upgraded React to v16 and it doesn't seem to work with it.

here's the relevant stack trace:

timepicker.js:1 Uncaught ReferenceError: positions is not defined
    at b.calculatePositionsHours (timepicker.js:1)
    at new b (timepicker.js:1)

if you'd add the source files to the repo (not just the minified) i'd be happy to take a look.

I wrapped the Timepicker in the following class:

import React, { Component } from 'react';
import Timepicker from 'react-timepicker';
import 'react-timepicker/timepicker.css';

class AwesomeTimePicker extends Component {
    constructor(props) {
        super(props);

        var time = this.props.defaultValue ? this.props.defaultValue.split(':') : [0, 0];

        this.state = {
            hours: parseInt(time[0]),
            minutes: parseInt(time[1])
        }
    }

    componentWillReceiveProps(nextProps) {
        var time = nextProps.defaultValue ? nextProps.defaultValue.split(':') : [0, 0];
        this.setState({
            hours: parseInt(time[0]),
            minutes: parseInt(time[1])
        });
    }

    onChangeTimePicker(hours, minutes) {
        if (hours && (hours === undefined || hours === null)) {
            hours = 0;
        }

        if (minutes && (minutes === undefined || minutes === null)) {
            hours = 0;
        }

        this.props.handleValue(this.props.name, hours + ":" + minutes);
    }

    render() {
        console.log(this.state.hours, this.state.minutes);
        const newProps = {
            hours: this.state.hours,
            minutes: this.state.minutes,
            onChange: this.onChangeTimePicker.bind(this),
            radius: 110
        }
        return (
            <Timepicker radius={110} hours={this.state.hours} minutes={this.state.minutes} onChange={this.onChangeTimePicker.bind(this)} />
        );
    }
}

export default AwesomeTimePicker;

But when the hours or minutes properties change the timepicker does not update the values.

I've been debuging and I found that the componentWillReceiveProps method don't receive the updated values when my render method call it.