import React from 'react';
import ReactDOM from 'react-dom';
import TimePicker2 from '..';
import dayjs from 'dayjs';

interface IState {
  value: any;
}

interface IProps {
  onChange: (value: any) => void;
}

class ControlledTimePicker2 extends React.Component<IProps, IState> {
  onSelect = value => {
    this.setState({ value });
    this.props.onChange(value);
  };

  state = {
    value: dayjs('12:00:00', 'HH:mm:ss', true),
  };

  render() {
    return <TimePicker2 value={this.state.value} onChange={this.onSelect} />;
  }
}

ReactDOM.render(
  <ControlledTimePicker2
    onChange={val => console.log(val.format('HH:mm:ss'))}
  />,
  document.getElementById('time-picker2-demo-3'),
);