generateSinglePicker.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  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 RCPicker from '../../vc-picker';
  16. import enUS from '../locale/en_US';
  17. import { getPlaceholder, transPlacement2DropdownAlign } from '../util';
  18. import { useLocaleReceiver } from '../../locale-provider/LocaleReceiver';
  19. import { getTimeProps, Components } from '.';
  20. import { computed, defineComponent, ref } from 'vue';
  21. import useConfigInject from '../../config-provider/hooks/useConfigInject';
  22. import classNames from '../../_util/classNames';
  23. import { commonProps, datePickerProps } from './props';
  24. import devWarning from '../../vc-util/devWarning';
  25. import { FormItemInputContext, useInjectFormItemContext } from '../../form/FormItemContext';
  26. import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
  27. import { useCompactItemContext } from '../../space/Compact';
  28. //CSSINJS
  29. import useStyle from '../style';
  30. export default function generateSinglePicker(generateConfig, extraProps) {
  31. function getPicker(picker, displayName) {
  32. const comProps = _extends(_extends(_extends({}, commonProps()), datePickerProps()), extraProps);
  33. return defineComponent({
  34. compatConfig: {
  35. MODE: 3
  36. },
  37. name: displayName,
  38. inheritAttrs: false,
  39. props: comProps,
  40. slots: Object,
  41. setup(_props, _ref) {
  42. let {
  43. slots,
  44. expose,
  45. attrs,
  46. emit
  47. } = _ref;
  48. // 兼容 vue 3.2.7
  49. const props = _props;
  50. const formItemContext = useInjectFormItemContext();
  51. const formItemInputContext = FormItemInputContext.useInject();
  52. // =================== Warning =====================
  53. if (process.env.NODE_ENV !== 'production') {
  54. devWarning(picker !== 'quarter', displayName || 'DatePicker', `DatePicker.${displayName} is legacy usage. Please use DatePicker[picker='${picker}'] directly.`);
  55. devWarning(!props.dropdownClassName, displayName || 'DatePicker', '`dropdownClassName` is deprecated. Please use `popupClassName` instead.');
  56. devWarning(!(props.monthCellContentRender || slots.monthCellContentRender), displayName || 'DatePicker', '`monthCellContentRender` is deprecated. Please use `monthCellRender"` instead.');
  57. devWarning(!attrs.getCalendarContainer, displayName || 'DatePicker', '`getCalendarContainer` is deprecated. Please use `getPopupContainer"` instead.');
  58. }
  59. const {
  60. prefixCls,
  61. direction,
  62. getPopupContainer,
  63. size,
  64. rootPrefixCls,
  65. disabled
  66. } = useConfigInject('picker', props);
  67. const {
  68. compactSize,
  69. compactItemClassnames
  70. } = useCompactItemContext(prefixCls, direction);
  71. const mergedSize = computed(() => compactSize.value || size.value);
  72. // style
  73. const [wrapSSR, hashId] = useStyle(prefixCls);
  74. const pickerRef = ref();
  75. expose({
  76. focus: () => {
  77. var _a;
  78. (_a = pickerRef.value) === null || _a === void 0 ? void 0 : _a.focus();
  79. },
  80. blur: () => {
  81. var _a;
  82. (_a = pickerRef.value) === null || _a === void 0 ? void 0 : _a.blur();
  83. }
  84. });
  85. const maybeToString = date => {
  86. return props.valueFormat ? generateConfig.toString(date, props.valueFormat) : date;
  87. };
  88. const onChange = (date, dateString) => {
  89. const value = maybeToString(date);
  90. emit('update:value', value);
  91. emit('change', value, dateString);
  92. formItemContext.onFieldChange();
  93. };
  94. const onOpenChange = open => {
  95. emit('update:open', open);
  96. emit('openChange', open);
  97. };
  98. const onFocus = e => {
  99. emit('focus', e);
  100. };
  101. const onBlur = e => {
  102. emit('blur', e);
  103. formItemContext.onFieldBlur();
  104. };
  105. const onPanelChange = (date, mode) => {
  106. const value = maybeToString(date);
  107. emit('panelChange', value, mode);
  108. };
  109. const onOk = date => {
  110. const value = maybeToString(date);
  111. emit('ok', value);
  112. };
  113. const [contextLocale] = useLocaleReceiver('DatePicker', enUS);
  114. const value = computed(() => {
  115. if (props.value) {
  116. return props.valueFormat ? generateConfig.toDate(props.value, props.valueFormat) : props.value;
  117. }
  118. return props.value === '' ? undefined : props.value;
  119. });
  120. const defaultValue = computed(() => {
  121. if (props.defaultValue) {
  122. return props.valueFormat ? generateConfig.toDate(props.defaultValue, props.valueFormat) : props.defaultValue;
  123. }
  124. return props.defaultValue === '' ? undefined : props.defaultValue;
  125. });
  126. const defaultPickerValue = computed(() => {
  127. if (props.defaultPickerValue) {
  128. return props.valueFormat ? generateConfig.toDate(props.defaultPickerValue, props.valueFormat) : props.defaultPickerValue;
  129. }
  130. return props.defaultPickerValue === '' ? undefined : props.defaultPickerValue;
  131. });
  132. return () => {
  133. var _a, _b, _c, _d, _e, _f;
  134. const locale = _extends(_extends({}, contextLocale.value), props.locale);
  135. const p = _extends(_extends({}, props), attrs);
  136. const {
  137. bordered = true,
  138. placeholder,
  139. suffixIcon = (_a = slots.suffixIcon) === null || _a === void 0 ? void 0 : _a.call(slots),
  140. showToday = true,
  141. transitionName,
  142. allowClear = true,
  143. dateRender = slots.dateRender,
  144. renderExtraFooter = slots.renderExtraFooter,
  145. monthCellRender = slots.monthCellRender || props.monthCellContentRender || slots.monthCellContentRender,
  146. clearIcon = (_b = slots.clearIcon) === null || _b === void 0 ? void 0 : _b.call(slots),
  147. id = formItemContext.id.value
  148. } = p,
  149. restProps = __rest(p, ["bordered", "placeholder", "suffixIcon", "showToday", "transitionName", "allowClear", "dateRender", "renderExtraFooter", "monthCellRender", "clearIcon", "id"]);
  150. const showTime = p.showTime === '' ? true : p.showTime;
  151. const {
  152. format
  153. } = p;
  154. let additionalOverrideProps = {};
  155. if (picker) {
  156. additionalOverrideProps.picker = picker;
  157. }
  158. const mergedPicker = picker || p.picker || 'date';
  159. additionalOverrideProps = _extends(_extends(_extends({}, additionalOverrideProps), showTime ? getTimeProps(_extends({
  160. format,
  161. picker: mergedPicker
  162. }, typeof showTime === 'object' ? showTime : {})) : {}), mergedPicker === 'time' ? getTimeProps(_extends(_extends({
  163. format
  164. }, restProps), {
  165. picker: mergedPicker
  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(RCPicker, _objectSpread(_objectSpread(_objectSpread({
  170. "monthCellRender": monthCellRender,
  171. "dateRender": dateRender,
  172. "renderExtraFooter": renderExtraFooter,
  173. "ref": pickerRef,
  174. "placeholder": getPlaceholder(locale, mergedPicker, placeholder),
  175. "suffixIcon": suffixNode,
  176. "dropdownAlign": transPlacement2DropdownAlign(direction.value, props.placement),
  177. "clearIcon": clearIcon || _createVNode(CloseCircleFilled, null, null),
  178. "allowClear": allowClear,
  179. "transitionName": transitionName || `${rootPrefixCls.value}-slide-up`
  180. }, restProps), additionalOverrideProps), {}, {
  181. "id": id,
  182. "picker": mergedPicker,
  183. "value": value.value,
  184. "defaultValue": defaultValue.value,
  185. "defaultPickerValue": defaultPickerValue.value,
  186. "showToday": showToday,
  187. "locale": locale.lang,
  188. "class": classNames({
  189. [`${pre}-${mergedSize.value}`]: mergedSize.value,
  190. [`${pre}-borderless`]: !bordered
  191. }, getStatusClassNames(pre, getMergedStatus(formItemInputContext.status, props.status), formItemInputContext.hasFeedback), attrs.class, hashId.value, compactItemClassnames.value),
  192. "disabled": disabled.value,
  193. "prefixCls": pre,
  194. "getPopupContainer": attrs.getCalendarContainer || getPopupContainer.value,
  195. "generateConfig": generateConfig,
  196. "prevIcon": ((_c = slots.prevIcon) === null || _c === void 0 ? void 0 : _c.call(slots)) || _createVNode("span", {
  197. "class": `${pre}-prev-icon`
  198. }, null),
  199. "nextIcon": ((_d = slots.nextIcon) === null || _d === void 0 ? void 0 : _d.call(slots)) || _createVNode("span", {
  200. "class": `${pre}-next-icon`
  201. }, null),
  202. "superPrevIcon": ((_e = slots.superPrevIcon) === null || _e === void 0 ? void 0 : _e.call(slots)) || _createVNode("span", {
  203. "class": `${pre}-super-prev-icon`
  204. }, null),
  205. "superNextIcon": ((_f = slots.superNextIcon) === null || _f === void 0 ? void 0 : _f.call(slots)) || _createVNode("span", {
  206. "class": `${pre}-super-next-icon`
  207. }, null),
  208. "components": Components,
  209. "direction": direction.value,
  210. "dropdownClassName": classNames(hashId.value, props.popupClassName, props.dropdownClassName),
  211. "onChange": onChange,
  212. "onOpenChange": onOpenChange,
  213. "onFocus": onFocus,
  214. "onBlur": onBlur,
  215. "onPanelChange": onPanelChange,
  216. "onOk": onOk
  217. }), null));
  218. };
  219. }
  220. });
  221. }
  222. const DatePicker = getPicker(undefined, 'ADatePicker');
  223. const WeekPicker = getPicker('week', 'AWeekPicker');
  224. const MonthPicker = getPicker('month', 'AMonthPicker');
  225. const YearPicker = getPicker('year', 'AYearPicker');
  226. const TimePicker = getPicker('time', 'TimePicker'); // 给独立组件 TimePicker 使用,此处名称不用更改
  227. const QuarterPicker = getPicker('quarter', 'AQuarterPicker');
  228. return {
  229. DatePicker,
  230. WeekPicker,
  231. MonthPicker,
  232. YearPicker,
  233. TimePicker,
  234. QuarterPicker
  235. };
  236. }