import React from "react";
import moment from "moment";
import { TimePicker } from "@tencent/tea-component";

export default () => {
  return (
    <>
      <section>
        <TimePicker
          defaultValue={moment("23:30:00", "HH:mm:ss")}
          onChange={value => console.log(value.format("HH:mm:ss"))}
          onOpenChange={open => console.log(open ? "open" : "close")}
        />
      </section>
      <section>
        <TimePicker disabled defaultValue={moment("23:30:00", "HH:mm:ss")} />
      </section>
      <section>
        <TimePicker
          format="HH:mm:ss.SSS"
          defaultValue={moment("23:30:00:300", "HH:mm:ss.SSS")}
          onChange={value => console.log(value.format("HH:mm:ss.SSS"))}
        />
      </section>
      <section>
        <TimePicker
          format="HH:mm"
          defaultValue={moment("18:30", "HH:mm")}
          hourStep={2}
          minuteStep={10}
          onChange={value => console.log(value.format("HH:mm"))}
          onOpenChange={open => console.log(open ? "open" : "close")}
        />
      </section>
    </>
  );
};