@alifd/meet-react
Version:
Fusion Mobile React UI System Component
74 lines (73 loc) • 4.01 kB
JavaScript
;
exports.__esModule = true;
exports.default = CalendarTimePicker;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _dayjs = _interopRequireDefault(require("dayjs"));
var _meetReactComponentOne = require("@alifd/meet-react-component-one");
var _view = _interopRequireDefault(require("../view"));
var _icon = _interopRequireDefault(require("../icon"));
var _timePicker = require("../time-picker");
var _utils = require("../utils");
var _date = require("../utils/date");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function CalendarTimePicker(props) {
var _classNames, _classNames2;
var _props$prefix = props.prefix,
prefix = _props$prefix === void 0 ? 'mt-' : _props$prefix,
value = props.value,
_props$format = props.format,
format = _props$format === void 0 ? 'HH:mm:ss' : _props$format,
label = props.label,
onPickerToggle = props.onPickerToggle,
onChange = props.onChange;
var _useState = (0, _react.useState)(false),
showPicker = _useState[0],
setShowPicker = _useState[1];
var _useState2 = (0, _react.useState)((0, _date.isValidDate)(value) ? value : new Date()),
curTime = _useState2[0],
setTime = _useState2[1];
var clsPrefix = prefix + "calendar-tp";
(0, _react.useEffect)(function () {
if ((0, _date.isValidDate)(value)) {
setTime(value);
}
}, [value]);
return /*#__PURE__*/(0, _react.createElement)(_react.Fragment, null, showPicker ? /*#__PURE__*/(0, _react.createElement)(_timePicker.EmbedPicker, {
className: clsPrefix + "-picker",
format: format,
value: curTime,
onChange: function handlePickerChange(date) {
var d = (0, _dayjs.default)(date);
var h = d.hour();
var m = d.minute();
var s = d.second();
var newDate = (0, _dayjs.default)(curTime).hour(h).minute(m).second(s);
if ((0, _utils.isFunction)(onChange)) {
onChange(newDate.toDate());
}
}
}) : null, /*#__PURE__*/(0, _react.createElement)(_view.default, {
className: "" + clsPrefix
}, /*#__PURE__*/(0, _react.createElement)(_view.default, {
className: clsPrefix + "-row"
}, /*#__PURE__*/(0, _react.createElement)(_meetReactComponentOne.Text, {
className: clsPrefix + "-label"
}, label), /*#__PURE__*/(0, _react.createElement)(_view.default, {
className: (0, _classnames.default)(clsPrefix + "-wrapper", (_classNames = {}, _classNames[clsPrefix + "-wrapper--active"] = showPicker, _classNames)),
onClick: function handleTimeClick() {
var nextState = !showPicker;
if ((0, _utils.isFunction)(onPickerToggle)) {
onPickerToggle(nextState);
}
setShowPicker(nextState);
}
}, /*#__PURE__*/(0, _react.createElement)(_meetReactComponentOne.Text, {
className: clsPrefix + "-time"
}, (0, _dayjs.default)(curTime).format(format)), /*#__PURE__*/(0, _react.createElement)(_icon.default, {
className: (0, _classnames.default)(clsPrefix + "-arrow", (_classNames2 = {}, _classNames2[clsPrefix + "-arrow--active"] = showPicker, _classNames2)),
name: "arrow-down"
})))));
}