qt-public-ui
Version:
新设计规范下业务组件库
449 lines (446 loc) • 18.3 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var React = _interopRequireWildcard(require("react"));
var moment = _interopRequireWildcard(require("moment"));
var _reactLifecyclesCompat = require("react-lifecycles-compat");
var _RangeCalendar = _interopRequireDefault(require("rc-calendar/lib/RangeCalendar"));
var _Picker = _interopRequireDefault(require("rc-calendar/lib/Picker"));
var _classnames = _interopRequireDefault(require("classnames"));
var _lodash = require("lodash");
var _Icon = _interopRequireDefault(require("../../Icon"));
var _tag = _interopRequireDefault(require("../tag"));
var _context = require("../config-provider/context");
var _warning = _interopRequireDefault(require("../_util/warning"));
var _interopDefault = _interopRequireDefault(require("../_util/interopDefault"));
var _utils = require("./utils");
var _InputIcon = _interopRequireDefault(require("./InputIcon"));
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 && {}.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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable */ /* tslint:disable jsx-no-multiline-js */
function getShowDateFromValue(value, mode) {
var _value = (0, _slicedToArray2["default"])(value, 2),
start = _value[0],
end = _value[1];
// value could be an empty array, then we should not reset showDate
if (!start && !end) {
return;
}
if (mode && mode[0] === 'month') {
return [start, end];
}
var newEnd = end && end.isSame(start, 'month') ? end.clone().add(1, 'month') : end;
return [start, newEnd];
}
function pickerValueAdapter(value) {
if (!value) {
return;
}
if (Array.isArray(value)) {
return value;
}
return [value, value.clone().add(1, 'month')];
}
function isEmptyArray(arr) {
if (Array.isArray(arr)) {
return arr.length === 0 || arr.every(function (i) {
return !i;
});
}
return false;
}
function fixLocale(value, localeCode) {
if (!localeCode) {
return;
}
if (!value || value.length === 0) {
return;
}
var _value2 = (0, _slicedToArray2["default"])(value, 2),
start = _value2[0],
end = _value2[1];
if (start) {
start.locale(localeCode);
}
if (end) {
end.locale(localeCode);
}
}
var RangePicker = /*#__PURE__*/function (_React$Component) {
function RangePicker(_props) {
var _this;
(0, _classCallCheck2["default"])(this, RangePicker);
_this = _callSuper(this, RangePicker, [_props]);
_this.picker = void 0;
_this.prefixCls = void 0;
_this.tagPrefixCls = void 0;
_this.savePicker = function (node) {
_this.picker = node;
};
_this.clearSelection = function (e) {
e.preventDefault();
e.stopPropagation();
_this.setState({
value: []
});
_this.handleChange([]);
};
_this.clearHoverValue = function () {
return _this.setState({
hoverValue: []
});
};
_this.handleChange = function (value) {
var _this2 = _this,
props = _this2.props;
if (!('value' in props)) {
_this.setState(function (_ref) {
var showDate = _ref.showDate;
return {
value: value,
showDate: getShowDateFromValue(value) || showDate
};
});
}
if (value[0] && value[1] && value[0].diff(value[1]) > 0) {
value[1] = undefined;
}
var _value4 = (0, _slicedToArray2["default"])(value, 2),
start = _value4[0],
end = _value4[1];
if (typeof props.onChange === 'function') {
props.onChange(value, [(0, _utils.formatDate)(start, props.format), (0, _utils.formatDate)(end, props.format)]);
}
};
_this.handleOpenChange = function (open) {
if (!('open' in _this.props)) {
_this.setState({
open: open
});
}
if (open === false) {
_this.clearHoverValue();
}
var onOpenChange = _this.props.onOpenChange;
if (onOpenChange) {
onOpenChange(open);
}
};
_this.handleShowDateChange = function (showDate) {
return _this.setState({
showDate: showDate
});
};
_this.handleHoverChange = function (hoverValue) {
return _this.setState({
hoverValue: hoverValue
});
};
_this.handleRangeMouseLeave = function () {
if (_this.state.open) {
_this.clearHoverValue();
}
};
_this.handleCalendarInputSelect = function (value) {
var _value5 = (0, _slicedToArray2["default"])(value, 1),
start = _value5[0];
if (!start) {
return;
}
_this.setState(function (_ref2) {
var showDate = _ref2.showDate;
return {
value: value,
showDate: getShowDateFromValue(value) || showDate
};
});
};
_this.handleRangeClick = function (value) {
if (typeof value === 'function') {
value = value();
}
_this.setValue(value, true);
var _this$props = _this.props,
onOk = _this$props.onOk,
onOpenChange = _this$props.onOpenChange;
if (onOk) {
onOk(value);
}
if (onOpenChange) {
onOpenChange(false);
}
};
_this.renderFooter = function () {
var _this$props2 = _this.props,
ranges = _this$props2.ranges,
renderExtraFooter = _this$props2.renderExtraFooter;
var _this3 = _this,
prefixCls = _this3.prefixCls,
tagPrefixCls = _this3.tagPrefixCls;
if (!ranges && !renderExtraFooter) {
return null;
}
var customFooter = renderExtraFooter ? /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-footer-extra"),
key: "extra"
}, renderExtraFooter()) : null;
var operations = ranges && Object.keys(ranges).map(function (range) {
var value = ranges[range];
var hoverValue = typeof value === 'function' ? value.call(_this) : value;
return /*#__PURE__*/React.createElement(_tag["default"], {
key: range,
prefixCls: tagPrefixCls,
color: "blue",
onClick: function onClick() {
return _this.handleRangeClick(value);
},
onMouseEnter: function onMouseEnter() {
return _this.setState({
hoverValue: hoverValue
});
},
onMouseLeave: _this.handleRangeMouseLeave
}, range);
});
var rangeNode = operations && operations.length > 0 ? /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-footer-extra ").concat(prefixCls, "-range-quick-selector"),
key: "range"
}, operations) : null;
return [rangeNode, customFooter];
};
_this.renderRangePicker = function (_ref3) {
var getPrefixCls = _ref3.getPrefixCls;
var _this4 = _this,
state = _this4.state,
props = _this4.props;
var value = state.value,
showDate = state.showDate,
hoverValue = state.hoverValue,
open = state.open;
var customizePrefixCls = props.prefixCls,
customizeTagPrefixCls = props.tagPrefixCls,
popupStyle = props.popupStyle,
style = props.style,
disabledDate = props.disabledDate,
disabledTime = props.disabledTime,
showTime = props.showTime,
showToday = props.showToday,
ranges = props.ranges,
onOk = props.onOk,
locale = props.locale,
localeCode = props.localeCode,
format = props.format,
dateRender = props.dateRender,
onCalendarChange = props.onCalendarChange,
suffixIcon = props.suffixIcon,
separator = props.separator;
var prefixCls = getPrefixCls('calendar', customizePrefixCls);
var tagPrefixCls = getPrefixCls('tag', customizeTagPrefixCls);
// To support old version react.
// Have to add prefixCls on the instance.
// https://github.com/facebook/react/issues/12397
_this.prefixCls = prefixCls;
_this.tagPrefixCls = tagPrefixCls;
fixLocale(value, localeCode);
fixLocale(showDate, localeCode);
(0, _warning["default"])(!('onOK' in props), 'RangePicker', 'It should be `RangePicker[onOk]`, instead of `onOK`!');
var calendarClassName = (0, _classnames["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-time"), showTime), "".concat(prefixCls, "-range-with-ranges"), ranges));
// 需要选择时间时，点击 ok 时才触发 onChange
var pickerChangeHandler = {
onChange: _this.handleChange
};
var calendarProps = {
onOk: _this.handleChange
};
if (props.timePicker) {
pickerChangeHandler.onChange = function (changedValue) {
return _this.handleChange(changedValue);
};
} else {
calendarProps = {};
}
if ('mode' in props) {
calendarProps.mode = props.mode;
}
var startPlaceholder = Array.isArray(props.placeholder) ? props.placeholder[0] : locale.lang.rangePlaceholder[0];
var endPlaceholder = Array.isArray(props.placeholder) ? props.placeholder[1] : locale.lang.rangePlaceholder[1];
var calendar = /*#__PURE__*/React.createElement(_RangeCalendar["default"], (0, _extends2["default"])({}, calendarProps, {
seperator: separator,
onChange: onCalendarChange,
format: format,
prefixCls: prefixCls,
className: calendarClassName,
renderFooter: _this.renderFooter,
timePicker: props.timePicker,
disabledDate: disabledDate,
disabledTime: disabledTime,
dateInputPlaceholder: [startPlaceholder, endPlaceholder],
locale: locale.lang,
onOk: onOk,
dateRender: dateRender,
value: showDate,
onValueChange: _this.handleShowDateChange,
hoverValue: hoverValue,
onHoverChange: _this.handleHoverChange,
onPanelChange: props.onPanelChange,
showToday: showToday,
onInputSelect: _this.handleCalendarInputSelect
}));
// default width for showTime
var pickerStyle = {};
if (props.showTime) {
pickerStyle.width = style && style.width || 350;
}
var _ref4 = value,
_ref5 = (0, _slicedToArray2["default"])(_ref4, 2),
startValue = _ref5[0],
endValue = _ref5[1];
var clearIcon = !props.disabled && props.allowClear && value && (startValue || endValue) ? /*#__PURE__*/React.createElement(_Icon["default"], {
type: "close-circle",
className: "".concat(prefixCls, "-picker-clear"),
onClick: _this.clearSelection,
theme: "filled"
}) : null;
var inputIcon = /*#__PURE__*/React.createElement(_InputIcon["default"], {
suffixIcon: suffixIcon,
prefixCls: prefixCls
});
var input = function input(_ref6) {
var inputValue = _ref6.value;
var _inputValue = (0, _slicedToArray2["default"])(inputValue, 2),
start = _inputValue[0],
end = _inputValue[1];
return /*#__PURE__*/React.createElement("span", {
className: props.pickerInputClass
}, /*#__PURE__*/React.createElement("input", {
disabled: props.disabled,
readOnly: true,
value: (0, _utils.formatDate)(start, props.format),
placeholder: startPlaceholder,
className: "".concat(prefixCls, "-range-picker-input"),
tabIndex: -1
}), /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-range-picker-separator")
}, " ", separator, " "), /*#__PURE__*/React.createElement("input", {
disabled: props.disabled,
readOnly: true,
value: (0, _utils.formatDate)(end, props.format),
placeholder: endPlaceholder,
className: "".concat(prefixCls, "-range-picker-input"),
tabIndex: -1
}), clearIcon, inputIcon);
};
return /*#__PURE__*/React.createElement("span", {
ref: _this.savePicker,
id: typeof props.id === 'number' ? props.id.toString() : props.id,
className: (0, _classnames["default"])(props.className, props.pickerClass),
style: _objectSpread(_objectSpread({}, style), pickerStyle),
tabIndex: props.disabled ? -1 : 0,
onFocus: props.onFocus,
onBlur: props.onBlur,
onMouseEnter: props.onMouseEnter,
onMouseLeave: props.onMouseLeave
}, /*#__PURE__*/React.createElement(_Picker["default"], (0, _extends2["default"])({}, props, pickerChangeHandler, {
calendar: calendar,
value: value,
open: open,
onOpenChange: _this.handleOpenChange,
prefixCls: "".concat(prefixCls, "-picker-container"),
style: popupStyle
}), input));
};
var _value3 = _props.value || _props.defaultValue || [];
var _value6 = (0, _slicedToArray2["default"])(_value3, 2),
_start = _value6[0],
_end = _value6[1];
if (_start && !(0, _interopDefault["default"])(moment).isMoment(_start) || _end && !(0, _interopDefault["default"])(moment).isMoment(_end)) {
throw new Error('The value/defaultValue of RangePicker must be a moment object array after `antd@2.0`, ' + 'see: https://u.ant.design/date-picker-value');
}
var pickerValue = !_value3 || isEmptyArray(_value3) ? _props.defaultPickerValue : _value3;
_this.state = {
value: _value3,
showDate: pickerValueAdapter(pickerValue || (0, _interopDefault["default"])(moment)()),
open: _props.open,
hoverValue: []
};
return _this;
}
(0, _inherits2["default"])(RangePicker, _React$Component);
return (0, _createClass2["default"])(RangePicker, [{
key: "componentDidUpdate",
value: function componentDidUpdate(_, prevState) {
if (!('open' in this.props) && prevState.open && !this.state.open) {
this.focus();
}
}
}, {
key: "setValue",
value: function setValue(value, hidePanel) {
this.handleChange(value);
if ((hidePanel || !this.props.showTime) && !('open' in this.props)) {
this.setState({
open: false
});
}
}
}, {
key: "focus",
value: function focus() {
this.picker.focus();
}
}, {
key: "blur",
value: function blur() {
this.picker.blur();
}
}, {
key: "render",
value: function render() {
return /*#__PURE__*/React.createElement(_context.ConfigConsumer, null, this.renderRangePicker);
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(nextProps, prevState) {
var state = null;
if ('value' in nextProps) {
var value = nextProps.value || [];
state = {
value: value
};
if (!(0, _lodash.isEqualWith)(nextProps.value, prevState.value)) {
state = _objectSpread(_objectSpread({}, state), {}, {
showDate: getShowDateFromValue(value, nextProps.mode) || prevState.showDate
});
}
}
if ('open' in nextProps && prevState.open !== nextProps.open) {
state = _objectSpread(_objectSpread({}, state), {}, {
open: nextProps.open
});
}
return state;
}
}]);
}(React.Component);
RangePicker.defaultProps = {
allowClear: true,
showToday: false,
separator: '~'
};
(0, _reactLifecyclesCompat.polyfill)(RangePicker);
var _default = exports["default"] = RangePicker;