@jnoodle/rc-picker
Version:
React date & time picker
499 lines (413 loc) • 16.2 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var React = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
var _useMergedState5 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
var _PickerPanel = _interopRequireDefault(require("./PickerPanel"));
var _PickerTrigger = _interopRequireDefault(require("./PickerTrigger"));
var _dateUtil = require("./utils/dateUtil");
var _miscUtil = _interopRequireWildcard(require("./utils/miscUtil"));
var _PanelContext = _interopRequireDefault(require("./PanelContext"));
var _uiUtil = require("./utils/uiUtil");
var _usePickerInput3 = _interopRequireDefault(require("./hooks/usePickerInput"));
var _useTextValueMapping3 = _interopRequireDefault(require("./hooks/useTextValueMapping"));
var _useValueTexts3 = _interopRequireDefault(require("./hooks/useValueTexts"));
var _useHoverValue3 = _interopRequireDefault(require("./hooks/useHoverValue"));
/**
* Removed:
* - getCalendarContainer: use `getPopupContainer` instead
* - onOk
*
* New Feature:
* - picker
* - allowEmpty
* - selectable
*
* Tips: Should add faq about `datetime` mode with `defaultValue`
*/
function InnerPicker(props) {
var _classNames2;
var _props$prefixCls = props.prefixCls,
prefixCls = _props$prefixCls === void 0 ? 'rc-picker' : _props$prefixCls,
id = props.id,
tabIndex = props.tabIndex,
style = props.style,
className = props.className,
dropdownClassName = props.dropdownClassName,
dropdownAlign = props.dropdownAlign,
popupStyle = props.popupStyle,
transitionName = props.transitionName,
generateConfig = props.generateConfig,
locale = props.locale,
inputReadOnly = props.inputReadOnly,
allowClear = props.allowClear,
autoFocus = props.autoFocus,
showTime = props.showTime,
_props$picker = props.picker,
picker = _props$picker === void 0 ? 'date' : _props$picker,
format = props.format,
use12Hours = props.use12Hours,
value = props.value,
defaultValue = props.defaultValue,
open = props.open,
defaultOpen = props.defaultOpen,
defaultOpenValue = props.defaultOpenValue,
suffixIcon = props.suffixIcon,
clearIcon = props.clearIcon,
disabled = props.disabled,
disabledDate = props.disabledDate,
placeholder = props.placeholder,
getPopupContainer = props.getPopupContainer,
pickerRef = props.pickerRef,
panelRender = props.panelRender,
onChange = props.onChange,
onOpenChange = props.onOpenChange,
onFocus = props.onFocus,
onBlur = props.onBlur,
onMouseDown = props.onMouseDown,
onMouseUp = props.onMouseUp,
onMouseEnter = props.onMouseEnter,
onMouseLeave = props.onMouseLeave,
onContextMenu = props.onContextMenu,
onClick = props.onClick,
direction = props.direction,
_props$autoComplete = props.autoComplete,
autoComplete = _props$autoComplete === void 0 ? 'off' : _props$autoComplete;
var inputRef = React.useRef(null);
var needConfirmButton = picker === 'date' && !!showTime || picker === 'time'; // ============================= State =============================
var formatList = (0, _miscUtil.toArray)((0, _uiUtil.getDefaultFormat)(format, picker, showTime, use12Hours)); // Panel ref
var panelDivRef = React.useRef(null);
var inputDivRef = React.useRef(null); // Real value
var _useMergedState = (0, _useMergedState5.default)(null, {
value: value,
defaultValue: defaultValue
}),
_useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
mergedValue = _useMergedState2[0],
setInnerValue = _useMergedState2[1]; // Selected value
var _React$useState = React.useState(mergedValue),
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
selectedValue = _React$useState2[0],
setSelectedValue = _React$useState2[1]; // Operation ref
var operationRef = React.useRef(null); // Open
var _useMergedState3 = (0, _useMergedState5.default)(false, {
value: open,
defaultValue: defaultOpen,
postState: function postState(postOpen) {
return disabled ? false : postOpen;
},
onChange: function onChange(newOpen) {
if (onOpenChange) {
onOpenChange(newOpen);
}
if (!newOpen && operationRef.current && operationRef.current.onClose) {
operationRef.current.onClose();
}
}
}),
_useMergedState4 = (0, _slicedToArray2.default)(_useMergedState3, 2),
mergedOpen = _useMergedState4[0],
triggerInnerOpen = _useMergedState4[1]; // ============================= Text ==============================
var _useValueTexts = (0, _useValueTexts3.default)(selectedValue, {
formatList: formatList,
generateConfig: generateConfig,
locale: locale
}),
_useValueTexts2 = (0, _slicedToArray2.default)(_useValueTexts, 2),
valueTexts = _useValueTexts2[0],
firstValueText = _useValueTexts2[1];
var _useTextValueMapping = (0, _useTextValueMapping3.default)({
valueTexts: valueTexts,
onTextChange: function onTextChange(newText) {
var inputDate = generateConfig.locale.parse(locale.locale, newText, formatList);
if (inputDate && (!disabledDate || !disabledDate(inputDate))) {
setSelectedValue(inputDate);
}
}
}),
_useTextValueMapping2 = (0, _slicedToArray2.default)(_useTextValueMapping, 3),
text = _useTextValueMapping2[0],
triggerTextChange = _useTextValueMapping2[1],
resetText = _useTextValueMapping2[2]; // ============================ Trigger ============================
var triggerChange = function triggerChange(newValue) {
setSelectedValue(newValue);
setInnerValue(newValue);
if (onChange && !(0, _dateUtil.isEqual)(generateConfig, mergedValue, newValue)) {
onChange(newValue, newValue ? generateConfig.locale.format(locale.locale, newValue, formatList[0]) : '');
}
};
var triggerOpen = function triggerOpen(newOpen) {
if ((disabled || inputReadOnly) && newOpen) {
return;
}
triggerInnerOpen(newOpen);
};
var forwardKeyDown = function forwardKeyDown(e) {
if (mergedOpen && operationRef.current && operationRef.current.onKeyDown) {
// Let popup panel handle keyboard
return operationRef.current.onKeyDown(e);
}
/* istanbul ignore next */
/* eslint-disable no-lone-blocks */
{
(0, _warning.default)(false, 'Picker not correct forward KeyDown operation. Please help to fire issue about this.');
return false;
}
};
var onInternalMouseUp = function onInternalMouseUp() {
if (onMouseUp) {
onMouseUp.apply(void 0, arguments);
}
if (inputRef.current) {
inputRef.current.focus();
triggerOpen(true);
}
}; // ============================= Input =============================
var _usePickerInput = (0, _usePickerInput3.default)({
blurToCancel: needConfirmButton,
open: mergedOpen,
value: text,
triggerOpen: triggerOpen,
forwardKeyDown: forwardKeyDown,
isClickOutside: function isClickOutside(target) {
return !(0, _uiUtil.elementsContains)([panelDivRef.current, inputDivRef.current], target);
},
onSubmit: function onSubmit() {
if (disabledDate && disabledDate(selectedValue)) {
return false;
}
triggerChange(selectedValue);
triggerOpen(false);
resetText();
return true;
},
onCancel: function onCancel() {
triggerOpen(false);
setSelectedValue(mergedValue);
resetText();
},
onFocus: onFocus,
onBlur: onBlur
}),
_usePickerInput2 = (0, _slicedToArray2.default)(_usePickerInput, 2),
inputProps = _usePickerInput2[0],
_usePickerInput2$ = _usePickerInput2[1],
focused = _usePickerInput2$.focused,
typing = _usePickerInput2$.typing; // ============================= Sync ==============================
// Close should sync back with text value
React.useEffect(function () {
if (!mergedOpen) {
setSelectedValue(mergedValue);
if (!valueTexts.length || valueTexts[0] === '') {
triggerTextChange('');
} else if (firstValueText !== text) {
resetText();
}
}
}, [mergedOpen, valueTexts]); // Change picker should sync back with text value
React.useEffect(function () {
if (!mergedOpen) {
resetText();
}
}, [picker]); // Sync innerValue with control mode
React.useEffect(function () {
// Sync select value
setSelectedValue(mergedValue);
}, [mergedValue]); // ============================ Private ============================
if (pickerRef) {
pickerRef.current = {
focus: function focus() {
if (inputRef.current) {
inputRef.current.focus();
}
},
blur: function blur() {
if (inputRef.current) {
inputRef.current.blur();
}
},
setValue: function setValue(val) {
triggerChange(val);
},
getValue: function getValue() {
return selectedValue;
}
};
} // ============================= Panel =============================
var panelProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
className: undefined,
style: undefined,
pickerValue: undefined,
onPickerValueChange: undefined
});
var panelNode = React.createElement(_PickerPanel.default, Object.assign({}, panelProps, {
generateConfig: generateConfig,
className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-panel-focused"), !typing)),
value: selectedValue,
locale: locale,
tabIndex: -1,
onChange: setSelectedValue,
direction: direction
}));
if (panelRender) {
panelNode = panelRender(panelNode);
}
var panel = React.createElement("div", {
className: "".concat(prefixCls, "-panel-container"),
onMouseDown: function onMouseDown(e) {
e.preventDefault();
}
}, panelNode);
var suffixNode;
if (suffixIcon) {
suffixNode = React.createElement("span", {
className: "".concat(prefixCls, "-suffix")
}, suffixIcon);
}
var clearNode;
if (allowClear && mergedValue && !disabled) {
clearNode = React.createElement("span", {
onMouseDown: function onMouseDown(e) {
e.preventDefault();
e.stopPropagation();
},
onMouseUp: function onMouseUp(e) {
e.preventDefault();
e.stopPropagation();
triggerChange(null);
triggerOpen(false);
},
className: "".concat(prefixCls, "-clear")
}, clearIcon || React.createElement("span", {
className: "".concat(prefixCls, "-clear-btn")
}));
} // ============================ Warning ============================
if (process.env.NODE_ENV !== 'production') {
(0, _warning.default)(!defaultOpenValue, '`defaultOpenValue` may confuse user for the current value status. Please use `defaultValue` instead.');
} // ============================ Return =============================
var onContextSelect = function onContextSelect(date, type) {
if (type === 'submit' || type !== 'key' && !needConfirmButton) {
// triggerChange will also update selected values
triggerChange(date);
triggerOpen(false);
}
};
var popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
var _useHoverValue = (0, _useHoverValue3.default)(text, {
formatList: formatList,
generateConfig: generateConfig,
locale: locale
}),
_useHoverValue2 = (0, _slicedToArray2.default)(_useHoverValue, 3),
hoverValue = _useHoverValue2[0],
onEnter = _useHoverValue2[1],
onLeave = _useHoverValue2[2];
return React.createElement(_PanelContext.default.Provider, {
value: {
operationRef: operationRef,
hideHeader: picker === 'time',
panelRef: panelDivRef,
onSelect: onContextSelect,
open: mergedOpen,
defaultOpenValue: defaultOpenValue,
onDateMouseEnter: onEnter,
onDateMouseLeave: onLeave
}
}, React.createElement(_PickerTrigger.default, {
visible: mergedOpen,
popupElement: panel,
popupStyle: popupStyle,
prefixCls: prefixCls,
dropdownClassName: dropdownClassName,
dropdownAlign: dropdownAlign,
getPopupContainer: getPopupContainer,
transitionName: transitionName,
popupPlacement: popupPlacement,
direction: direction
}, React.createElement("div", {
className: (0, _classnames.default)(prefixCls, className, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-focused"), focused), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _classNames2)),
style: style,
onMouseDown: onMouseDown,
onMouseUp: onInternalMouseUp,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
onContextMenu: onContextMenu,
onClick: onClick
}, React.createElement("div", {
className: (0, _classnames.default)("".concat(prefixCls, "-input"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-input-placeholder"), !!hoverValue)),
ref: inputDivRef
}, React.createElement("input", Object.assign({
id: id,
tabIndex: tabIndex,
disabled: disabled,
readOnly: inputReadOnly || !typing,
value: hoverValue || text,
onChange: function onChange(e) {
triggerTextChange(e.target.value);
},
autoFocus: autoFocus,
placeholder: placeholder,
ref: inputRef,
title: text
}, inputProps, {
size: (0, _uiUtil.getInputSize)(picker, formatList[0])
}, (0, _miscUtil.default)(props), {
autoComplete: autoComplete
})), suffixNode, clearNode))));
} // Wrap with class component to enable pass generic with instance method
var Picker = /*#__PURE__*/function (_React$Component) {
(0, _inherits2.default)(Picker, _React$Component);
var _super = (0, _createSuper2.default)(Picker);
function Picker() {
var _this;
(0, _classCallCheck2.default)(this, Picker);
_this = _super.apply(this, arguments);
_this.pickerRef = React.createRef();
_this.focus = function () {
if (_this.pickerRef.current) {
_this.pickerRef.current.focus();
}
};
_this.blur = function () {
if (_this.pickerRef.current) {
_this.pickerRef.current.blur();
}
};
_this.setValue = function (val) {
if (_this.pickerRef.current) {
_this.pickerRef.current.setValue(val);
}
};
_this.getValue = function () {
if (_this.pickerRef.current) {
return _this.pickerRef.current.getValue();
}
return null;
};
return _this;
}
(0, _createClass2.default)(Picker, [{
key: "render",
value: function render() {
return React.createElement(InnerPicker, Object.assign({}, this.props, {
pickerRef: this.pickerRef
}));
}
}]);
return Picker;
}(React.Component);
var _default = Picker;
exports.default = _default;