@douyinfe/semi-ui
Version:
A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.
270 lines (269 loc) • 10 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _noop2 = _interopRequireDefault(require("lodash/noop"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _dateFns = require("date-fns");
var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
var _constants = require("@douyinfe/semi-foundation/lib/cjs/timePicker/constants");
var _index = _interopRequireDefault(require("../scrollList/index"));
var _scrollItem = _interopRequireDefault(require("../scrollList/scrollItem"));
var _ComboxFoundation = _interopRequireWildcard(require("@douyinfe/semi-foundation/lib/cjs/timePicker/ComboxFoundation"));
var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && {}.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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
class Combobox extends _baseComponent.default {
constructor(props) {
super(props);
this.cacheRefCurrent = (key, current) => {
if (key && typeof key === 'string') {
this.adapter.setCache(key, current);
}
};
this.reselect = () => {
const currentKeys = ['ampm', 'hour', 'minute', 'second'];
currentKeys.forEach(key => {
const current = this.adapter.getCache(key);
if (current && current.scrollToIndex) {
current.scrollToIndex();
}
});
};
this.onItemChange = _ref => {
let {
type,
value,
disabled
} = _ref;
let {
onChange,
use12Hours,
isAM,
format,
timeStampValue
} = this.props;
const transformValue = this.foundation.getDisplayDateFromTimeStamp(timeStampValue);
// TODO: foundation
if (type === 'hour') {
if (use12Hours) {
if (isAM) {
transformValue.setHours(Number(value) % 12);
} else {
transformValue.setHours(Number(value) % 12 + 12);
}
} else {
transformValue.setHours(Number(value));
}
} else if (type === 'minute') {
transformValue.setMinutes(Number(value));
} else if (type === 'ampm') {
const ampm = value.toUpperCase();
if (use12Hours) {
if (ampm === 'PM') {
isAM = false;
transformValue.getHours() < 12 && transformValue.setHours(transformValue.getHours() % 12 + 12);
}
if (ampm === 'AM') {
isAM = true;
transformValue.getHours() >= 12 && transformValue.setHours(transformValue.getHours() - 12);
}
}
} else {
transformValue.setSeconds(Number(value));
}
onChange && onChange({
isAM,
value: (0, _dateFns.format)(transformValue, format && format.replace(/(\s+)A/g, '$1a')),
timeStampValue: Number(transformValue)
});
};
this.onEnterSelectPanel = range => {
const {
onCurrentSelectPanelChange
} = this.props;
onCurrentSelectPanelChange(range);
};
this.getDisplayDateFromTimeStamp = timeStampValue => this.foundation.getDisplayDateFromTimeStamp(timeStampValue);
this.foundation = new _ComboxFoundation.default(this.adapter);
this.state = Object.assign({}, this.foundation.initData());
}
componentDidUpdate(prevProps, prevState) {
if (prevProps.timeStampValue !== this.props.timeStampValue || prevProps.format !== this.props.format) {
this.setState(Object.assign({}, this.foundation.initData()));
}
}
componentWillUnmount() {
// this.foundation.destroy();
}
componentDidMount() {
// this.foundation.init();
}
renderHourSelect(hour, locale) {
const {
prefixCls,
disabledHours,
use12Hours,
scrollItemProps
} = this.props;
const {
showHour,
hourOptions
} = this.state;
if (!showHour) {
return null;
}
const disabledOptions = disabledHours();
let hourOptionsAdj, hourAdj;
if (use12Hours) {
hourOptionsAdj = [12].concat(hourOptions.filter(h => h < 12 && h > 0));
hourAdj = hour % 12 || 12;
} else {
hourOptionsAdj = hourOptions;
hourAdj = hour;
}
const transformHour = value => value + locale.hour;
const className = `${prefixCls}-list-hour`;
return /*#__PURE__*/_react.default.createElement(_scrollItem.default, Object.assign({
ref: current => this.cacheRefCurrent('hour', current),
mode: 'normal',
transform: transformHour,
className: className,
list: hourOptionsAdj.map(option => (0, _ComboxFoundation.formatOption)(option, disabledOptions)),
selectedIndex: hourOptionsAdj.indexOf(hourAdj),
type: "hour",
onSelect: this.onItemChange
}, scrollItemProps));
}
renderMinuteSelect(minute, locale) {
const {
prefixCls,
disabledMinutes,
timeStampValue,
scrollItemProps
} = this.props;
const {
showMinute,
minuteOptions
} = this.state;
if (!showMinute) {
return null;
}
const value = new Date(timeStampValue);
const disabledOptions = disabledMinutes && disabledMinutes(value.getHours());
const className = `${prefixCls}-list-minute`;
const transformMinute = min => min + locale.minute;
return /*#__PURE__*/_react.default.createElement(_scrollItem.default, Object.assign({
ref: current => this.cacheRefCurrent('minute', current),
mode: 'normal',
transform: transformMinute,
list: minuteOptions.map(option => (0, _ComboxFoundation.formatOption)(option, disabledOptions)),
selectedIndex: minuteOptions.indexOf(minute),
type: "minute",
onSelect: this.onItemChange,
className: className
}, scrollItemProps));
}
renderSecondSelect(second, locale) {
const {
prefixCls,
disabledSeconds,
timeStampValue,
scrollItemProps
} = this.props;
const {
showSecond,
secondOptions
} = this.state;
if (!showSecond) {
return null;
}
const value = new Date(timeStampValue);
const disabledOptions = disabledSeconds && disabledSeconds(value.getHours(), value.getMinutes());
const className = `${prefixCls}-list-second`;
const transformSecond = sec => String(sec) + locale.second;
return /*#__PURE__*/_react.default.createElement(_scrollItem.default, Object.assign({
ref: current => this.cacheRefCurrent('second', current),
mode: 'normal',
transform: transformSecond,
list: secondOptions.map(option => (0, _ComboxFoundation.formatOption)(option, disabledOptions)),
selectedIndex: secondOptions.indexOf(second),
className: className,
type: "second",
onSelect: this.onItemChange
}, scrollItemProps));
}
renderAMPMSelect(locale, localeCode) {
const {
prefixCls,
use12Hours,
isAM,
scrollItemProps
} = this.props;
if (!use12Hours) {
return null;
}
const AMPMOptions = [{
value: 'AM',
text: locale.AM || '上午'
}, {
value: 'PM',
text: locale.PM || '下午'
}];
const selected = isAM ? 0 : 1;
const className = `${prefixCls}-list-ampm`;
return /*#__PURE__*/_react.default.createElement(_scrollItem.default, Object.assign({
ref: current => this.cacheRefCurrent('ampm', current),
mode: 'normal',
className: className,
list: AMPMOptions,
selectedIndex: selected,
type: "ampm",
onSelect: this.onItemChange
}, scrollItemProps));
}
render() {
const {
timeStampValue,
panelHeader,
panelFooter
} = this.props;
const value = this.getDisplayDateFromTimeStamp(timeStampValue);
return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
componentName: "TimePicker"
}, (locale, localeCode) => (/*#__PURE__*/_react.default.createElement(_index.default, {
header: panelHeader,
footer: panelFooter,
"x-semi-header-alias": "panelHeader",
"x-semi-footer-alias": "panelFooter"
}, this.renderAMPMSelect(locale, localeCode), this.renderHourSelect(value.getHours(), locale), this.renderMinuteSelect(value.getMinutes(), locale), this.renderSecondSelect(value.getSeconds(), locale))));
}
}
Combobox.propTypes = {
format: _propTypes.default.string,
defaultOpenValue: _propTypes.default.object,
prefixCls: _propTypes.default.string,
onChange: _propTypes.default.func,
showHour: _propTypes.default.bool,
showMinute: _propTypes.default.bool,
showSecond: _propTypes.default.bool,
disabledHours: _propTypes.default.func,
disabledMinutes: _propTypes.default.func,
disabledSeconds: _propTypes.default.func,
hideDisabledOptions: _propTypes.default.bool,
onCurrentSelectPanelChange: _propTypes.default.func,
use12Hours: _propTypes.default.bool,
isAM: _propTypes.default.bool,
timeStampValue: _propTypes.default.any,
scrollItemProps: _propTypes.default.object
};
Combobox.defaultProps = {
disabledHours: _noop2.default,
disabledMinutes: _noop2.default,
disabledSeconds: _noop2.default,
format: _constants.strings.DEFAULT_FORMAT
};
var _default = exports.default = Combobox;