@sms-frontend/components
Version:
SMS Design React UI Library.
191 lines (190 loc) • 9.26 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React, { useContext, useCallback } from 'react';
import { padStart } from '../_util/pad';
import { getColumnsFromFormat } from './util';
import cs from '../_util/classNames';
import { ConfigContext } from '../ConfigProvider';
import { dayjs, getNow, getDayjsValue } from '../_util/dayjs';
import Button from '../Button';
import TimeColumn from './time-column';
var AMPM = ['am', 'pm'];
function isUse12Hours(props) {
return props.use12Hours || getColumnsFromFormat(props.format).use12Hours;
}
function TimePicker(props) {
var _a = props.format, format = _a === void 0 ? 'HH:mm:ss' : _a, onSelect = props.onSelect, popupVisible = props.popupVisible, _b = props.step, step = _b === void 0 ? {} : _b, disabledHours = props.disabledHours, disabledMinutes = props.disabledMinutes, disabledSeconds = props.disabledSeconds, hideDisabledOptions = props.hideDisabledOptions, onConfirmValue = props.onConfirmValue, isRangePicker = props.isRangePicker, confirmBtnDisabled = props.confirmBtnDisabled, propsValueShow = props.valueShow, setValueShow = props.setValueShow, extra = props.extra, disableConfirm = props.disableConfirm, hideFooter = props.hideFooter, _c = props.showNowBtn, showNowBtn = _c === void 0 ? true : _c, scrollSticky = props.scrollSticky;
var _d = useContext(ConfigContext), getPrefixCls = _d.getPrefixCls, locale = _d.locale;
var prefixCls = getPrefixCls('timepicker');
var valueShow = getDayjsValue(propsValueShow, format);
var ampm = valueShow && valueShow.hour() >= 12 ? 'pm' : 'am';
var use12Hours = isUse12Hours(props);
var getShowList = useCallback(function (type) {
var stepHour = step.hour || 1;
var stepMinute = step.minute || 1;
var stepSecond = step.second || 1;
var list = [];
if (type === 'hour') {
for (var i = 0; i < (use12Hours ? 12 : 24); i += stepHour) {
list.push(i);
}
if (use12Hours) {
list[0] = 12;
}
}
if (type === 'minute') {
for (var i = 0; i < 60; i += stepMinute) {
list.push(i);
}
}
if (type === 'second') {
for (var i = 0; i < 60; i += stepSecond) {
list.push(i);
}
}
return list;
}, [step.hour, step.minute, step.second, use12Hours]);
var HOURS = getShowList('hour');
var MINUTES = getShowList('minute');
var SECONDS = getShowList('second');
var selectedHour = valueShow && valueShow.hour();
selectedHour = use12Hours ? (selectedHour > 12 ? selectedHour - 12 : selectedHour) : selectedHour;
if (use12Hours && selectedHour === 0 && ampm === 'am') {
selectedHour += 12;
}
var selectedMinute = valueShow && valueShow.minute();
var selectedSecond = valueShow && valueShow.second();
function onHandleSelect(selectedValue, unit) {
var isUpperCase = getColumnsFromFormat(format).list.indexOf('A') !== -1;
var _valueShow = valueShow || dayjs('00:00:00', 'HH:mm:ss');
var hour = _valueShow.hour();
var minute = _valueShow.minute();
var second = _valueShow.second();
var selectedAmpm = isUpperCase ? ampm.toUpperCase() : ampm;
var valueFormat = 'HH:mm:ss';
var newValue;
if (use12Hours) {
if (isUpperCase) {
valueFormat = valueFormat + " A";
}
else {
valueFormat = valueFormat + " a";
}
}
if (use12Hours) {
hour = hour > 12 ? hour - 12 : hour;
}
if (unit === 'hour') {
newValue = dayjs(selectedValue + ":" + minute + ":" + second + " " + selectedAmpm, valueFormat, 'en');
}
if (unit === 'minute') {
newValue = dayjs(hour + ":" + selectedValue + ":" + second + " " + selectedAmpm, valueFormat, 'en');
}
if (unit === 'second') {
newValue = dayjs(hour + ":" + minute + ":" + selectedValue + " " + selectedAmpm, valueFormat, 'en');
}
if (unit === 'ampm') {
newValue = dayjs(hour + ":" + minute + ":" + second + " " + (isUpperCase ? selectedValue.toUpperCase() : selectedValue), valueFormat, 'en');
}
newValue = dayjs(newValue, valueFormat).locale(dayjs.locale());
onSelect && onSelect(newValue.format(format), newValue);
if (!isRangePicker) {
setValueShow && setValueShow(newValue);
if (disableConfirm) {
onConfirmValue(newValue);
}
}
}
function onConfirmTime() {
if (valueShow) {
onConfirmValue(valueShow);
}
}
function onSelectNow() {
var now = getNow();
onSelect && onSelect(now.format(format), now);
if (disableConfirm) {
onConfirmValue(now);
}
else {
setValueShow && setValueShow(now);
}
}
var baseTimeColumnProps = {
prefixCls: prefixCls,
onHandleSelect: onHandleSelect,
popupVisible: popupVisible,
scrollSticky: scrollSticky,
};
function renderHours() {
var hours = hideDisabledOptions && typeof disabledHours === 'function'
? HOURS.filter(function (h) { return disabledHours().indexOf(h) === -1; })
: HOURS;
var list = hours.map(function (h) { return ({
label: padStart("" + h, 2, '0'),
value: h,
selected: selectedHour !== undefined && selectedHour === h,
disabled: typeof disabledHours === 'function' && disabledHours().indexOf(h) !== -1,
}); });
return React.createElement(TimeColumn, __assign({}, baseTimeColumnProps, { list: list, value: selectedHour, unit: "hour" }));
}
function renderMinutes() {
var minutes = hideDisabledOptions && typeof disabledMinutes === 'function'
? MINUTES.filter(function (h) { return disabledMinutes(selectedHour).indexOf(h) === -1; })
: MINUTES;
var list = minutes.map(function (m) { return ({
label: padStart("" + m, 2, '0'),
value: m,
selected: selectedHour !== undefined && selectedMinute === m,
disabled: typeof disabledMinutes === 'function' && disabledMinutes(selectedHour).indexOf(m) !== -1,
}); });
return React.createElement(TimeColumn, __assign({}, baseTimeColumnProps, { list: list, value: selectedMinute, unit: "minute" }));
}
function renderSeconds() {
var seconds = hideDisabledOptions && typeof disabledSeconds === 'function'
? SECONDS.filter(function (h) { return disabledSeconds(selectedHour, selectedMinute).indexOf(h) === -1; })
: SECONDS;
var list = seconds.map(function (s) { return ({
label: padStart("" + s, 2, '0'),
value: s,
selected: selectedHour !== undefined && selectedSecond === s,
disabled: typeof disabledSeconds === 'function' &&
disabledSeconds(selectedHour, selectedMinute).indexOf(s) !== -1,
}); });
return React.createElement(TimeColumn, __assign({}, baseTimeColumnProps, { list: list, value: selectedSecond, unit: "second" }));
}
function renderAmPm() {
var isUpperCase = getColumnsFromFormat(format).list.indexOf('A') !== -1;
var list = AMPM.map(function (a) { return ({
label: isUpperCase ? a.toUpperCase() : a,
value: a,
selected: ampm === a,
}); });
return React.createElement(TimeColumn, __assign({}, baseTimeColumnProps, { list: list, value: ampm, unit: "ampm" }));
}
var list = getColumnsFromFormat(format).list;
var classNames = cs(prefixCls);
var _hideFooter = hideFooter ||
(disableConfirm && isRangePicker) ||
(!isRangePicker && disableConfirm && !showNowBtn);
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: classNames },
(list.indexOf('H') !== -1 || list.indexOf('h') !== -1) && renderHours(),
list.indexOf('m') !== -1 && renderMinutes(),
list.indexOf('s') !== -1 && renderSeconds(),
use12Hours && renderAmPm()),
extra && React.createElement("div", { className: prefixCls + "-footer-extra-wrapper" }, extra),
!_hideFooter && (React.createElement("div", { className: prefixCls + "-footer-btn-wrapper" },
!isRangePicker && showNowBtn ? (React.createElement(Button, { size: "mini", onClick: onSelectNow }, locale.TimePicker.now)) : (React.createElement("div", null)),
!disableConfirm && (React.createElement(Button, { type: "primary", size: "mini", onClick: onConfirmTime, disabled: confirmBtnDisabled || !valueShow }, locale.TimePicker.ok))))));
}
export default TimePicker;