generateRangePicker.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  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 SwapRightOutlined from "@ant-design/icons/es/icons/SwapRightOutlined";
  15. import cls from 'classnames';
  16. import { RangePicker as RCRangePicker } from 'rc-picker';
  17. import ContextIsolator from '../../_util/ContextIsolator';
  18. import { useZIndex } from '../../_util/hooks/useZIndex';
  19. import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
  20. import { devUseWarning } from '../../_util/warning';
  21. import { ConfigContext } from '../../config-provider';
  22. import DisabledContext from '../../config-provider/DisabledContext';
  23. import useCSSVarCls from '../../config-provider/hooks/useCSSVarCls';
  24. import useSize from '../../config-provider/hooks/useSize';
  25. import { FormItemInputContext } from '../../form/context';
  26. import useVariant from '../../form/hooks/useVariants';
  27. import { useLocale } from '../../locale';
  28. import { useCompactItemContext } from '../../space/Compact';
  29. import enUS from '../locale/en_US';
  30. import useStyle from '../style';
  31. import { getRangePlaceholder, useIcons } from '../util';
  32. import { TIME } from './constant';
  33. import useComponents from './useComponents';
  34. import useMergedPickerSemantic from '../hooks/useMergedPickerSemantic';
  35. const generateRangePicker = generateConfig => {
  36. const RangePicker = /*#__PURE__*/forwardRef((props, ref) => {
  37. var _a;
  38. const {
  39. prefixCls: customizePrefixCls,
  40. getPopupContainer: customGetPopupContainer,
  41. components,
  42. className,
  43. style,
  44. placement,
  45. size: customizeSize,
  46. disabled: customDisabled,
  47. bordered = true,
  48. placeholder,
  49. popupStyle,
  50. popupClassName,
  51. dropdownClassName,
  52. status: customStatus,
  53. rootClassName,
  54. variant: customVariant,
  55. picker,
  56. styles,
  57. classNames
  58. } = props,
  59. restProps = __rest(props, ["prefixCls", "getPopupContainer", "components", "className", "style", "placement", "size", "disabled", "bordered", "placeholder", "popupStyle", "popupClassName", "dropdownClassName", "status", "rootClassName", "variant", "picker", "styles", "classNames"]);
  60. const pickerType = picker === TIME ? 'timePicker' : 'datePicker';
  61. const innerRef = React.useRef(null);
  62. const {
  63. getPrefixCls,
  64. direction,
  65. getPopupContainer,
  66. rangePicker
  67. } = useContext(ConfigContext);
  68. const prefixCls = getPrefixCls('picker', customizePrefixCls);
  69. const {
  70. compactSize,
  71. compactItemClassnames
  72. } = useCompactItemContext(prefixCls, direction);
  73. const rootPrefixCls = getPrefixCls();
  74. const [variant, enableVariantCls] = useVariant('rangePicker', customVariant, bordered);
  75. const rootCls = useCSSVarCls(prefixCls);
  76. const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
  77. // =================== Warning =====================
  78. if (process.env.NODE_ENV !== 'production') {
  79. const warning = devUseWarning('DatePicker.RangePicker');
  80. // ==================== Deprecated =====================
  81. const deprecatedProps = {
  82. dropdownClassName: 'classNames.popup.root',
  83. popupClassName: 'classNames.popup.root',
  84. popupStyle: 'styles.popup.root',
  85. bordered: 'variant',
  86. onSelect: 'onCalendarChange'
  87. };
  88. Object.entries(deprecatedProps).forEach(([oldProp, newProp]) => {
  89. warning.deprecated(!(oldProp in props), oldProp, newProp);
  90. });
  91. }
  92. const [mergedClassNames, mergedStyles] = useMergedPickerSemantic(pickerType, classNames, styles, popupClassName || dropdownClassName, popupStyle);
  93. // ===================== Icon =====================
  94. const [mergedAllowClear] = useIcons(props, prefixCls);
  95. // ================== components ==================
  96. const mergedComponents = useComponents(components);
  97. // ===================== Size =====================
  98. const mergedSize = useSize(ctx => {
  99. var _a;
  100. return (_a = customizeSize !== null && customizeSize !== void 0 ? customizeSize : compactSize) !== null && _a !== void 0 ? _a : ctx;
  101. });
  102. // ===================== Disabled =====================
  103. const disabled = React.useContext(DisabledContext);
  104. const mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
  105. // ===================== FormItemInput =====================
  106. const formItemContext = useContext(FormItemInputContext);
  107. const {
  108. hasFeedback,
  109. status: contextStatus,
  110. feedbackIcon
  111. } = formItemContext;
  112. const suffixNode = /*#__PURE__*/React.createElement(React.Fragment, null, picker === TIME ? /*#__PURE__*/React.createElement(ClockCircleOutlined, null) : /*#__PURE__*/React.createElement(CalendarOutlined, null), hasFeedback && feedbackIcon);
  113. useImperativeHandle(ref, () => innerRef.current);
  114. const [contextLocale] = useLocale('Calendar', enUS);
  115. const locale = Object.assign(Object.assign({}, contextLocale), props.locale);
  116. // ============================ zIndex ============================
  117. const [zIndex] = useZIndex('DatePicker', (_a = mergedStyles.popup.root) === null || _a === void 0 ? void 0 : _a.zIndex);
  118. return wrapCSSVar(/*#__PURE__*/React.createElement(ContextIsolator, {
  119. space: true
  120. }, /*#__PURE__*/React.createElement(RCRangePicker, Object.assign({
  121. separator: /*#__PURE__*/React.createElement("span", {
  122. "aria-label": "to",
  123. className: `${prefixCls}-separator`
  124. }, /*#__PURE__*/React.createElement(SwapRightOutlined, null)),
  125. disabled: mergedDisabled,
  126. ref: innerRef,
  127. placement: placement,
  128. placeholder: getRangePlaceholder(locale, picker, placeholder),
  129. suffixIcon: suffixNode,
  130. prevIcon: /*#__PURE__*/React.createElement("span", {
  131. className: `${prefixCls}-prev-icon`
  132. }),
  133. nextIcon: /*#__PURE__*/React.createElement("span", {
  134. className: `${prefixCls}-next-icon`
  135. }),
  136. superPrevIcon: /*#__PURE__*/React.createElement("span", {
  137. className: `${prefixCls}-super-prev-icon`
  138. }),
  139. superNextIcon: /*#__PURE__*/React.createElement("span", {
  140. className: `${prefixCls}-super-next-icon`
  141. }),
  142. transitionName: `${rootPrefixCls}-slide-up`,
  143. picker: picker
  144. }, restProps, {
  145. className: cls({
  146. [`${prefixCls}-${mergedSize}`]: mergedSize,
  147. [`${prefixCls}-${variant}`]: enableVariantCls
  148. }, getStatusClassNames(prefixCls, getMergedStatus(contextStatus, customStatus), hasFeedback), hashId, compactItemClassnames, className, rangePicker === null || rangePicker === void 0 ? void 0 : rangePicker.className, cssVarCls, rootCls, rootClassName, mergedClassNames.root),
  149. style: Object.assign(Object.assign(Object.assign({}, rangePicker === null || rangePicker === void 0 ? void 0 : rangePicker.style), style), mergedStyles.root),
  150. locale: locale.lang,
  151. prefixCls: prefixCls,
  152. getPopupContainer: customGetPopupContainer || getPopupContainer,
  153. generateConfig: generateConfig,
  154. components: mergedComponents,
  155. direction: direction,
  156. classNames: {
  157. popup: cls(hashId, cssVarCls, rootCls, rootClassName, mergedClassNames.popup.root)
  158. },
  159. styles: {
  160. popup: Object.assign(Object.assign({}, mergedStyles.popup.root), {
  161. zIndex
  162. })
  163. },
  164. allowClear: mergedAllowClear
  165. }))));
  166. });
  167. if (process.env.NODE_ENV !== 'production') {
  168. RangePicker.displayName = 'RangePicker';
  169. }
  170. return RangePicker;
  171. };
  172. export default generateRangePicker;