react-material-time-picker/dist/view/index.js

TimePicker is a user interface component that allows the user to easily select a specific time. It provides an analog clock interface that is easy to use and intuitive. TimePicker can be easily integrated into other user interface components, making it a

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = App;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = require("react");
var _Timepicker = _interopRequireDefault(require("../components/timepicker/Timepicker.js"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function App() {
  const [show, setShow] = (0, _react.useState)(false);
  const [theme, setTheme] = (0, _react.useState)("light");
  const defaultTime = "2355";
  const [time, setTime] = (0, _react.useState)(defaultTime);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Selected Time: ", time.slice(0, 2), ":", time.slice(2)), /*#__PURE__*/React.createElement("button", {
    onClick: () => setShow(true)
  }, "Pick a time"), /*#__PURE__*/React.createElement("p", null, "Theme is: ", theme), /*#__PURE__*/React.createElement("button", {
    onClick: () => setTheme(theme === "dark" ? "light" : "dark")
  }, "Change to ", theme === "dark" ? "light" : "dark"), /*#__PURE__*/React.createElement(_Timepicker.default, {
    theme: theme,
    clockWidth: 300,
    onChange: value => setTime(value),
    show: show,
    defaultValue: defaultTime,
    hide: () => setShow(false),
    zIndex: 1002,
    style: {
      top: "5px",
      width: "350px"
    },
    buttons: [{
      label: "Cancel",
      onClick: () => setShow(false)
    }, {
      label: "Save",
      onClick: () => {
        setShow(false);
      }
    }]
  }));
}