choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
274 lines (237 loc) • 8.7 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import React, { Component } from 'react';
import moment, { isMoment } from 'moment';
import classNames from 'classnames';
import omit from 'lodash/omit';
import isFunction from 'lodash/isFunction';
import Button from '../button';
import Icon from '../icon';
import Input from '../input';
import warning from '../_util/warning';
import MonthCalendar from '../rc-components/calendar/MonthCalendar';
import RcDatePicker from '../rc-components/calendar/Picker';
import { Size } from '../_util/enum';
import ConfigContext from '../config-provider/ConfigContext';
export default function createPicker(TheCalendar) {
var _a;
return _a = /*#__PURE__*/function (_Component) {
_inherits(CalenderWrapper, _Component);
var _super = _createSuper(CalenderWrapper);
function CalenderWrapper(props, context) {
var _this;
_classCallCheck(this, CalenderWrapper);
_this = _super.call(this, props, context);
_this.renderFooter = function () {
var renderExtraFooter = _this.props.renderExtraFooter;
var prefixCls = _this.getPrefixCls();
return renderExtraFooter ? /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-footer-extra")
}, renderExtraFooter.apply(void 0, arguments)) : null;
};
_this.clearSelection = function (e) {
e.preventDefault();
e.stopPropagation();
_this.handleChange(null);
};
_this.onPickerIconClick = function (e) {
e.preventDefault();
e.stopPropagation();
var disabled = _this.props.disabled;
if (disabled) {
return;
}
var focused = _this.state.focused;
_this.picker.setOpen(!focused);
};
_this.handleChange = function (_value) {
var props = _this.props;
var processV = props.processValue;
var value = isFunction(processV) ? processV(_value) : _value;
if (!('value' in props)) {
_this.setState({
value: value,
showDate: value
});
}
props.onChange(value, value && value.format(props.format) || '');
};
_this.handleCalendarChange = function (value) {
_this.setState({
showDate: value
});
};
_this.handleOpenChange = function (status) {
var onOpenChange = _this.props.onOpenChange;
var focused = _this.state.focused;
if (status !== focused) {
_this.setState({
focused: status
});
}
if (onOpenChange) {
onOpenChange(status);
}
};
_this.saveInput = function (node) {
_this.input = node;
};
_this.savePicker = function (node) {
_this.picker = node;
};
var value = props.value || props.defaultValue;
if (value && !isMoment(value)) {
throw new Error('The value/defaultValue of DatePicker or MonthPicker must be a moment object');
}
_this.state = {
value: value,
showDate: value,
focused: false
};
return _this;
}
_createClass(CalenderWrapper, [{
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
if ('value' in nextProps) {
this.setState({
value: nextProps.value,
showDate: nextProps.value
});
}
}
}, {
key: "focus",
value: function focus() {
this.input.focus();
}
}, {
key: "blur",
value: function blur() {
this.input.blur();
}
}, {
key: "getPrefixCls",
value: function getPrefixCls() {
var prefixCls = this.props.prefixCls;
var getPrefixCls = this.context.getPrefixCls;
return getPrefixCls('calendar', prefixCls);
}
}, {
key: "render",
value: function render() {
var _classNames,
_this2 = this;
var _this$state = this.state,
value = _this$state.value,
showDate = _this$state.showDate,
focused = _this$state.focused;
var props = omit(this.props, ['onChange']);
var label = props.label,
disabled = props.disabled,
pickerInputClass = props.pickerInputClass,
locale = props.locale,
localeCode = props.localeCode;
var prefixCls = this.getPrefixCls();
var placeholder = 'placeholder' in props ? props.placeholder : locale.lang.placeholder;
var disabledTime = props.showTime ? props.disabledTime : null;
var calendarClassName = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-time"), props.showTime), _defineProperty(_classNames, "".concat(prefixCls, "-month"), MonthCalendar === TheCalendar), _classNames));
if (value && localeCode) {
value.locale(localeCode);
}
var pickerProps = {};
var calendarProps = {};
if (props.showTime) {
calendarProps = {
onSelect: this.handleChange
};
} else {
pickerProps = {
onChange: this.handleChange
};
}
if ('mode' in props) {
calendarProps.mode = props.mode;
}
warning(!('onOK' in props), 'It should be `DatePicker[onOk]` or `MonthPicker[onOk]`, instead of `onOK`!');
var calendar = /*#__PURE__*/React.createElement(TheCalendar, _extends({}, calendarProps, {
disabledDate: props.disabledDate,
disabledTime: disabledTime,
locale: locale.lang,
timePicker: props.timePicker,
defaultValue: props.defaultPickerValue || moment(),
dateInputPlaceholder: placeholder,
prefixCls: prefixCls,
className: calendarClassName,
onOk: props.onOk,
dateRender: props.dateRender,
format: props.format,
showToday: props.showToday,
monthCellContentRender: props.monthCellContentRender,
renderFooter: this.renderFooter,
onPanelChange: props.onPanelChange,
onChange: this.handleCalendarChange,
value: showDate
}));
var clearIcon = !props.disabled && props.allowClear && value ? /*#__PURE__*/React.createElement(Button, {
className: "".concat(prefixCls, "-picker-clear"),
onClick: this.clearSelection,
shape: "circle",
icon: "close",
size: Size.small
}) : null;
var suffix = /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-picker-icon-wrapper"),
onClick: this.onPickerIconClick
}, clearIcon, /*#__PURE__*/React.createElement(Icon, {
type: "date_range",
className: "".concat(prefixCls, "-picker-icon")
}));
var inputProps = {
label: label,
disabled: disabled,
placeholder: placeholder,
suffix: suffix,
focused: focused
};
var input = function input(_ref) {
var inputValue = _ref.value;
return /*#__PURE__*/React.createElement(Input, _extends({}, inputProps, {
ref: _this2.saveInput,
value: inputValue && inputValue.format(props.format) || '',
className: pickerInputClass,
readOnly: true
}));
};
return /*#__PURE__*/React.createElement("span", {
id: props.id,
className: classNames(props.className, props.pickerClass),
style: props.style,
onFocus: props.onFocus,
onBlur: props.onBlur
}, /*#__PURE__*/React.createElement(RcDatePicker, _extends({}, props, pickerProps, {
onOpenChange: this.handleOpenChange,
calendar: calendar,
value: value,
prefixCls: "".concat(prefixCls, "-picker-container"),
style: props.popupStyle,
ref: this.savePicker
}), input));
}
}], [{
key: "contextType",
get: function get() {
return ConfigContext;
}
}]);
return CalenderWrapper;
}(Component), _a.displayName = 'CalenderWrapper', _a.defaultProps = {
allowClear: true,
showToday: true
}, _a;
}
//# sourceMappingURL=createPicker.js.map