UNPKG

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