generateSinglePicker.js 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. "use client";
  2. var __rest = this && this.__rest || function (s, e) {
  3. var t = {};
  4. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  5. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  6. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  7. }
  8. return t;
  9. };
  10. import * as React from 'react';
  11. import { forwardRef, useContext, useImperativeHandle } from 'react';
  12. import CalendarOutlined from "@ant-design/icons/es/icons/CalendarOutlined";
  13. import ClockCircleOutlined from "@ant-design/icons/es/icons/ClockCircleOutlined";
  14. import cls from 'classnames';
  15. import RCPicker from 'rc-picker';
  16. import ContextIsolator from '../../_util/ContextIsolator';
  17. import { useZIndex } from '../../_util/hooks/useZIndex';
  18. import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
  19. import { devUseWarning } from '../../_util/warning';
  20. import { ConfigContext } from '../../config-provider';
  21. import DisabledContext from '../../config-provider/DisabledContext';
  22. import useCSSVarCls from '../../config-provider/hooks/useCSSVarCls';
  23. import useSize from '../../config-provider/hooks/useSize';
  24. import { FormItemInputContext } from '../../form/context';
  25. import useVariant from '../../form/hooks/useVariants';
  26. import { useLocale } from '../../locale';
  27. import { useCompactItemContext } from '../../space/Compact';
  28. import enUS from '../locale/en_US';
  29. import useStyle from '../style';
  30. import { getPlaceholder, useIcons } from '../util';
  31. import { MONTH, MONTHPICKER, QUARTER, QUARTERPICKER, TIME, TIMEPICKER, WEEK, WEEKPICKER, YEAR, YEARPICKER } from './constant';
  32. import useComponents from './useComponents';
  33. import useMergedPickerSemantic from '../hooks/useMergedPickerSemantic';
  34. const generatePicker = generateConfig => {
  35. const getPicker = (picker, displayName) => {
  36. const consumerName = displayName === TIMEPICKER ? 'timePicker' : 'datePicker';
  37. const Picker = /*#__PURE__*/forwardRef((props, ref) => {
  38. var _a;
  39. const {
  40. prefixCls: customizePrefixCls,
  41. getPopupContainer: customizeGetPopupContainer,
  42. components,
  43. style,
  44. className,
  45. rootClassName,
  46. size: customizeSize,
  47. bordered,
  48. placement,
  49. placeholder,
  50. popupStyle,
  51. popupClassName,
  52. dropdownClassName,
  53. disabled: customDisabled,
  54. status: customStatus,
  55. variant: customVariant,
  56. onCalendarChange,
  57. styles,
  58. classNames
  59. } = props,
  60. restProps = __rest(props, ["prefixCls", "getPopupContainer", "components", "style", "className", "rootClassName", "size", "bordered", "placement", "placeholder", "popupStyle", "popupClassName", "dropdownClassName", "disabled", "status", "variant", "onCalendarChange", "styles", "classNames"]);
  61. const {
  62. getPrefixCls,
  63. direction,
  64. getPopupContainer,
  65. // Consume different styles according to different names
  66. [consumerName]: consumerStyle
  67. } = useContext(ConfigContext);
  68. const prefixCls = getPrefixCls('picker', customizePrefixCls);
  69. const {
  70. compactSize,
  71. compactItemClassnames
  72. } = useCompactItemContext(prefixCls, direction);
  73. const innerRef = React.useRef(null);
  74. const [variant, enableVariantCls] = useVariant('datePicker', customVariant, bordered);
  75. const rootCls = useCSSVarCls(prefixCls);
  76. const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
  77. useImperativeHandle(ref, () => innerRef.current);
  78. const additionalProps = {
  79. showToday: true
  80. };
  81. const mergedPicker = picker || props.picker;
  82. const rootPrefixCls = getPrefixCls();
  83. // ==================== Legacy =====================
  84. const {
  85. onSelect,
  86. multiple
  87. } = restProps;
  88. const hasLegacyOnSelect = onSelect && picker === 'time' && !multiple;
  89. const onInternalCalendarChange = (date, dateStr, info) => {
  90. onCalendarChange === null || onCalendarChange === void 0 ? void 0 : onCalendarChange(date, dateStr, info);
  91. if (hasLegacyOnSelect) {
  92. onSelect(date);
  93. }
  94. };
  95. // =================== Warning =====================
  96. if (process.env.NODE_ENV !== 'production') {
  97. const warning = devUseWarning(displayName || 'DatePicker');
  98. process.env.NODE_ENV !== "production" ? warning(picker !== 'quarter', 'deprecated', `DatePicker.${displayName} is legacy usage. Please use DatePicker[picker='${picker}'] directly.`) : void 0;
  99. // ==================== Deprecated =====================
  100. const deprecatedProps = {
  101. dropdownClassName: 'classNames.popup.root',
  102. popupClassName: 'classNames.popup.root',
  103. popupStyle: 'styles.popup.root',
  104. bordered: 'variant',
  105. onSelect: 'onCalendarChange'
  106. };
  107. Object.entries(deprecatedProps).forEach(([oldProp, newProp]) => {
  108. warning.deprecated(!(oldProp in props), oldProp, newProp);
  109. });
  110. }
  111. const [mergedClassNames, mergedStyles] = useMergedPickerSemantic(consumerName, classNames, styles, popupClassName || dropdownClassName, popupStyle);
  112. // ===================== Icon =====================
  113. const [mergedAllowClear, removeIcon] = useIcons(props, prefixCls);
  114. // ================== components ==================
  115. const mergedComponents = useComponents(components);
  116. // ===================== Size =====================
  117. const mergedSize = useSize(ctx => {
  118. var _a;
  119. return (_a = customizeSize !== null && customizeSize !== void 0 ? customizeSize : compactSize) !== null && _a !== void 0 ? _a : ctx;
  120. });
  121. // ===================== Disabled =====================
  122. const disabled = React.useContext(DisabledContext);
  123. const mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
  124. // ===================== FormItemInput =====================
  125. const formItemContext = useContext(FormItemInputContext);
  126. const {
  127. hasFeedback,
  128. status: contextStatus,
  129. feedbackIcon
  130. } = formItemContext;
  131. const suffixNode = /*#__PURE__*/React.createElement(React.Fragment, null, mergedPicker === 'time' ? /*#__PURE__*/React.createElement(ClockCircleOutlined, null) : /*#__PURE__*/React.createElement(CalendarOutlined, null), hasFeedback && feedbackIcon);
  132. const [contextLocale] = useLocale('DatePicker', enUS);
  133. const locale = Object.assign(Object.assign({}, contextLocale), props.locale);
  134. // ============================ zIndex ============================
  135. const [zIndex] = useZIndex('DatePicker', (_a = mergedStyles.popup.root) === null || _a === void 0 ? void 0 : _a.zIndex);
  136. return wrapCSSVar(/*#__PURE__*/React.createElement(ContextIsolator, {
  137. space: true
  138. }, /*#__PURE__*/React.createElement(RCPicker, Object.assign({
  139. ref: innerRef,
  140. placeholder: getPlaceholder(locale, mergedPicker, placeholder),
  141. suffixIcon: suffixNode,
  142. placement: placement,
  143. prevIcon: /*#__PURE__*/React.createElement("span", {
  144. className: `${prefixCls}-prev-icon`
  145. }),
  146. nextIcon: /*#__PURE__*/React.createElement("span", {
  147. className: `${prefixCls}-next-icon`
  148. }),
  149. superPrevIcon: /*#__PURE__*/React.createElement("span", {
  150. className: `${prefixCls}-super-prev-icon`
  151. }),
  152. superNextIcon: /*#__PURE__*/React.createElement("span", {
  153. className: `${prefixCls}-super-next-icon`
  154. }),
  155. transitionName: `${rootPrefixCls}-slide-up`,
  156. picker: picker,
  157. onCalendarChange: onInternalCalendarChange
  158. }, additionalProps, restProps, {
  159. locale: locale.lang,
  160. className: cls({
  161. [`${prefixCls}-${mergedSize}`]: mergedSize,
  162. [`${prefixCls}-${variant}`]: enableVariantCls
  163. }, getStatusClassNames(prefixCls, getMergedStatus(contextStatus, customStatus), hasFeedback), hashId, compactItemClassnames, consumerStyle === null || consumerStyle === void 0 ? void 0 : consumerStyle.className, className, cssVarCls, rootCls, rootClassName, mergedClassNames.root),
  164. style: Object.assign(Object.assign(Object.assign({}, consumerStyle === null || consumerStyle === void 0 ? void 0 : consumerStyle.style), style), mergedStyles.root),
  165. prefixCls: prefixCls,
  166. getPopupContainer: customizeGetPopupContainer || getPopupContainer,
  167. generateConfig: generateConfig,
  168. components: mergedComponents,
  169. direction: direction,
  170. disabled: mergedDisabled,
  171. classNames: {
  172. popup: cls(hashId, cssVarCls, rootCls, rootClassName, mergedClassNames.popup.root)
  173. },
  174. styles: {
  175. popup: Object.assign(Object.assign({}, mergedStyles.popup.root), {
  176. zIndex
  177. })
  178. },
  179. allowClear: mergedAllowClear,
  180. removeIcon: removeIcon
  181. }))));
  182. });
  183. if (process.env.NODE_ENV !== 'production' && displayName) {
  184. Picker.displayName = displayName;
  185. }
  186. return Picker;
  187. };
  188. const DatePicker = getPicker();
  189. const WeekPicker = getPicker(WEEK, WEEKPICKER);
  190. const MonthPicker = getPicker(MONTH, MONTHPICKER);
  191. const YearPicker = getPicker(YEAR, YEARPICKER);
  192. const QuarterPicker = getPicker(QUARTER, QUARTERPICKER);
  193. const TimePicker = getPicker(TIME, TIMEPICKER);
  194. return {
  195. DatePicker,
  196. WeekPicker,
  197. MonthPicker,
  198. YearPicker,
  199. TimePicker,
  200. QuarterPicker
  201. };
  202. };
  203. export default generatePicker;