generateRangePicker.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _extends from "@babel/runtime/helpers/esm/extends";
  3. import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
  4. var __rest = this && this.__rest || function (s, e) {
  5. var t = {};
  6. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  7. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  8. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  9. }
  10. return t;
  11. };
  12. import CalendarOutlined from "@ant-design/icons-vue/es/icons/CalendarOutlined";
  13. import ClockCircleOutlined from "@ant-design/icons-vue/es/icons/ClockCircleOutlined";
  14. import CloseCircleFilled from "@ant-design/icons-vue/es/icons/CloseCircleFilled";
  15. import SwapRightOutlined from "@ant-design/icons-vue/es/icons/SwapRightOutlined";
  16. import { RangePicker as VCRangePicker } from '../../vc-picker';
  17. import enUS from '../locale/en_US';
  18. import { useLocaleReceiver } from '../../locale-provider/LocaleReceiver';
  19. import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util';
  20. import { getTimeProps, Components } from '.';
  21. import { computed, defineComponent, ref } from 'vue';
  22. import useConfigInject from '../../config-provider/hooks/useConfigInject';
  23. import classNames from '../../_util/classNames';
  24. import { commonProps, rangePickerProps } from './props';
  25. import { FormItemInputContext, useInjectFormItemContext } from '../../form/FormItemContext';
  26. import omit from '../../_util/omit';
  27. import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
  28. //CSSINJS
  29. import useStyle from '../style';
  30. import { useCompactItemContext } from '../../space/Compact';
  31. import devWarning from '../../vc-util/devWarning';
  32. export default function generateRangePicker(generateConfig, extraProps) {
  33. const RangePicker = defineComponent({
  34. compatConfig: {
  35. MODE: 3
  36. },
  37. name: 'ARangePicker',
  38. inheritAttrs: false,
  39. props: _extends(_extends(_extends({}, commonProps()), rangePickerProps()), extraProps),
  40. slots: Object,
  41. setup(_props, _ref) {
  42. let {
  43. expose,
  44. slots,
  45. attrs,
  46. emit
  47. } = _ref;
  48. const props = _props;
  49. const formItemContext = useInjectFormItemContext();
  50. const formItemInputContext = FormItemInputContext.useInject();
  51. // =================== Warning =====================
  52. if (process.env.NODE_ENV !== 'production') {
  53. devWarning(!props.dropdownClassName, 'RangePicker', '`dropdownClassName` is deprecated. Please use `popupClassName` instead.');
  54. devWarning(!attrs.getCalendarContainer, 'DatePicker', '`getCalendarContainer` is deprecated. Please use `getPopupContainer"` instead.');
  55. }
  56. const {
  57. prefixCls,
  58. direction,
  59. getPopupContainer,
  60. size,
  61. rootPrefixCls,
  62. disabled
  63. } = useConfigInject('picker', props);
  64. const {
  65. compactSize,
  66. compactItemClassnames
  67. } = useCompactItemContext(prefixCls, direction);
  68. const mergedSize = computed(() => compactSize.value || size.value);
  69. // style
  70. const [wrapSSR, hashId] = useStyle(prefixCls);
  71. const pickerRef = ref();
  72. expose({
  73. focus: () => {
  74. var _a;
  75. (_a = pickerRef.value) === null || _a === void 0 ? void 0 : _a.focus();
  76. },
  77. blur: () => {
  78. var _a;
  79. (_a = pickerRef.value) === null || _a === void 0 ? void 0 : _a.blur();
  80. }
  81. });
  82. const maybeToStrings = dates => {
  83. return props.valueFormat ? generateConfig.toString(dates, props.valueFormat) : dates;
  84. };
  85. const onChange = (dates, dateStrings) => {
  86. const values = maybeToStrings(dates);
  87. emit('update:value', values);
  88. emit('change', values, dateStrings);
  89. formItemContext.onFieldChange();
  90. };
  91. const onOpenChange = open => {
  92. emit('update:open', open);
  93. emit('openChange', open);
  94. };
  95. const onFocus = e => {
  96. emit('focus', e);
  97. };
  98. const onBlur = e => {
  99. emit('blur', e);
  100. formItemContext.onFieldBlur();
  101. };
  102. const onPanelChange = (dates, modes) => {
  103. const values = maybeToStrings(dates);
  104. emit('panelChange', values, modes);
  105. };
  106. const onOk = dates => {
  107. const value = maybeToStrings(dates);
  108. emit('ok', value);
  109. };
  110. const onCalendarChange = (dates, dateStrings, info) => {
  111. const values = maybeToStrings(dates);
  112. emit('calendarChange', values, dateStrings, info);
  113. };
  114. const [contextLocale] = useLocaleReceiver('DatePicker', enUS);
  115. const value = computed(() => {
  116. if (props.value) {
  117. return props.valueFormat ? generateConfig.toDate(props.value, props.valueFormat) : props.value;
  118. }
  119. return props.value;
  120. });
  121. const defaultValue = computed(() => {
  122. if (props.defaultValue) {
  123. return props.valueFormat ? generateConfig.toDate(props.defaultValue, props.valueFormat) : props.defaultValue;
  124. }
  125. return props.defaultValue;
  126. });
  127. const defaultPickerValue = computed(() => {
  128. if (props.defaultPickerValue) {
  129. return props.valueFormat ? generateConfig.toDate(props.defaultPickerValue, props.valueFormat) : props.defaultPickerValue;
  130. }
  131. return props.defaultPickerValue;
  132. });
  133. return () => {
  134. var _a, _b, _c, _d, _e, _f, _g;
  135. const locale = _extends(_extends({}, contextLocale.value), props.locale);
  136. const p = _extends(_extends({}, props), attrs);
  137. const {
  138. prefixCls: customizePrefixCls,
  139. bordered = true,
  140. placeholder,
  141. suffixIcon = (_a = slots.suffixIcon) === null || _a === void 0 ? void 0 : _a.call(slots),
  142. picker = 'date',
  143. transitionName,
  144. allowClear = true,
  145. dateRender = slots.dateRender,
  146. renderExtraFooter = slots.renderExtraFooter,
  147. separator = (_b = slots.separator) === null || _b === void 0 ? void 0 : _b.call(slots),
  148. clearIcon = (_c = slots.clearIcon) === null || _c === void 0 ? void 0 : _c.call(slots),
  149. id = formItemContext.id.value
  150. } = p,
  151. restProps = __rest(p, ["prefixCls", "bordered", "placeholder", "suffixIcon", "picker", "transitionName", "allowClear", "dateRender", "renderExtraFooter", "separator", "clearIcon", "id"]);
  152. delete restProps['onUpdate:value'];
  153. delete restProps['onUpdate:open'];
  154. const {
  155. format,
  156. showTime
  157. } = p;
  158. let additionalOverrideProps = {};
  159. additionalOverrideProps = _extends(_extends(_extends({}, additionalOverrideProps), showTime ? getTimeProps(_extends({
  160. format,
  161. picker
  162. }, showTime)) : {}), picker === 'time' ? getTimeProps(_extends(_extends({
  163. format
  164. }, omit(restProps, ['disabledTime'])), {
  165. picker
  166. })) : {});
  167. const pre = prefixCls.value;
  168. const suffixNode = _createVNode(_Fragment, null, [suffixIcon || (picker === 'time' ? _createVNode(ClockCircleOutlined, null, null) : _createVNode(CalendarOutlined, null, null)), formItemInputContext.hasFeedback && formItemInputContext.feedbackIcon]);
  169. return wrapSSR(_createVNode(VCRangePicker, _objectSpread(_objectSpread(_objectSpread({
  170. "dateRender": dateRender,
  171. "renderExtraFooter": renderExtraFooter,
  172. "separator": separator || _createVNode("span", {
  173. "aria-label": "to",
  174. "class": `${pre}-separator`
  175. }, [_createVNode(SwapRightOutlined, null, null)]),
  176. "ref": pickerRef,
  177. "dropdownAlign": transPlacement2DropdownAlign(direction.value, props.placement),
  178. "placeholder": getRangePlaceholder(locale, picker, placeholder),
  179. "suffixIcon": suffixNode,
  180. "clearIcon": clearIcon || _createVNode(CloseCircleFilled, null, null),
  181. "allowClear": allowClear,
  182. "transitionName": transitionName || `${rootPrefixCls.value}-slide-up`
  183. }, restProps), additionalOverrideProps), {}, {
  184. "disabled": disabled.value,
  185. "id": id,
  186. "value": value.value,
  187. "defaultValue": defaultValue.value,
  188. "defaultPickerValue": defaultPickerValue.value,
  189. "picker": picker,
  190. "class": classNames({
  191. [`${pre}-${mergedSize.value}`]: mergedSize.value,
  192. [`${pre}-borderless`]: !bordered
  193. }, getStatusClassNames(pre, getMergedStatus(formItemInputContext.status, props.status), formItemInputContext.hasFeedback), attrs.class, hashId.value, compactItemClassnames.value),
  194. "locale": locale.lang,
  195. "prefixCls": pre,
  196. "getPopupContainer": attrs.getCalendarContainer || getPopupContainer.value,
  197. "generateConfig": generateConfig,
  198. "prevIcon": ((_d = slots.prevIcon) === null || _d === void 0 ? void 0 : _d.call(slots)) || _createVNode("span", {
  199. "class": `${pre}-prev-icon`
  200. }, null),
  201. "nextIcon": ((_e = slots.nextIcon) === null || _e === void 0 ? void 0 : _e.call(slots)) || _createVNode("span", {
  202. "class": `${pre}-next-icon`
  203. }, null),
  204. "superPrevIcon": ((_f = slots.superPrevIcon) === null || _f === void 0 ? void 0 : _f.call(slots)) || _createVNode("span", {
  205. "class": `${pre}-super-prev-icon`
  206. }, null),
  207. "superNextIcon": ((_g = slots.superNextIcon) === null || _g === void 0 ? void 0 : _g.call(slots)) || _createVNode("span", {
  208. "class": `${pre}-super-next-icon`
  209. }, null),
  210. "components": Components,
  211. "direction": direction.value,
  212. "dropdownClassName": classNames(hashId.value, props.popupClassName, props.dropdownClassName),
  213. "onChange": onChange,
  214. "onOpenChange": onOpenChange,
  215. "onFocus": onFocus,
  216. "onBlur": onBlur,
  217. "onPanelChange": onPanelChange,
  218. "onOk": onOk,
  219. "onCalendarChange": onCalendarChange
  220. }), null));
  221. };
  222. }
  223. });
  224. return RangePicker;
  225. }