Skip to content

Commit 1d77450

Browse files
tangjinzhoutangjinzhou
committed
refactor: datepicker type
1 parent 80918cb commit 1d77450

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+173
-144
lines changed

‎components/date-picker/generatePicker/generateRangePicker.tsx

+29-14
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,14 @@ import type { CommonProps, RangePickerProps } from './props';
1515
import { commonProps, rangePickerProps } from './props';
1616
import type { PanelMode, RangeValue } from '../../vc-picker/interface';
1717
import type { RangePickerSharedProps } from '../../vc-picker/RangePicker';
18-
import devWarning from '../../vc-util/devWarning';
1918
import { FormItemInputContext, useInjectFormItemContext } from '../../form/FormItemContext';
2019
import omit from '../../_util/omit';
2120
import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
2221

2322
//CSSINJS
2423
import useStyle from '../style';
24+
import { useCompactItemContext } from '../../space/Compact';
25+
import devWarning from '../../vc-util/devWarning';
2526

2627
export default function generateRangePicker<DateType, ExtraProps = {}>(
2728
generateConfig: GenerateConfig<DateType>,
@@ -52,19 +53,27 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
5253
const props = _props as unknown as CommonProps<DateType> & RangePickerProps<DateType>;
5354
const formItemContext = useInjectFormItemContext();
5455
const formItemInputContext = FormItemInputContext.useInject();
55-
devWarning(
56-
!attrs.getCalendarContainer,
57-
'DatePicker',
58-
'`getCalendarContainer` is deprecated. Please use `getPopupContainer"` instead.',
59-
);
60-
const { prefixCls, direction, getPopupContainer, size, rootPrefixCls } = useConfigInject(
61-
'picker',
62-
props,
63-
);
6456

57+
// =================== Warning =====================
58+
if (process.env.NODE_ENV !== 'production') {
59+
devWarning(
60+
!props.dropdownClassName,
61+
'RangePicker',
62+
'`dropdownClassName` is deprecated. Please use `popupClassName` instead.',
63+
);
64+
devWarning(
65+
!attrs.getCalendarContainer,
66+
'DatePicker',
67+
'`getCalendarContainer` is deprecated. Please use `getPopupContainer"` instead.',
68+
);
69+
}
70+
71+
const { prefixCls, direction, getPopupContainer, size, rootPrefixCls, disabled } =
72+
useConfigInject('picker', props);
73+
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
74+
const mergedSize = computed(() => compactSize.value || size.value);
6575
// style
6676
const [wrapSSR, hashId] = useStyle(prefixCls);
67-
6877
const pickerRef = ref();
6978
expose({
7079
focus: () => {
@@ -186,21 +195,22 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
186195
}
187196
ref={pickerRef}
188197
dropdownAlign={transPlacement2DropdownAlign(direction.value, props.placement)}
189-
placeholder={getRangePlaceholder(picker, locale, placeholder as [string, string])}
198+
placeholder={getRangePlaceholder(locale, picker, placeholder as [string, string])}
190199
suffixIcon={suffixNode}
191200
clearIcon={clearIcon || <CloseCircleFilled />}
192201
allowClear={allowClear}
193202
transitionName={transitionName || `${rootPrefixCls.value}-slide-up`}
194203
{...restProps}
195204
{...additionalOverrideProps}
205+
disabled={disabled.value}
196206
id={id}
197207
value={value.value}
198208
defaultValue={defaultValue.value}
199209
defaultPickerValue={defaultPickerValue.value}
200210
picker={picker}
201211
class={classNames(
202212
{
203-
[`${pre}-${size.value}`]: size.value,
213+
[`${pre}-${mergedSize.value}`]: mergedSize.value,
204214
[`${pre}-borderless`]: !bordered,
205215
},
206216
getStatusClassNames(
@@ -210,6 +220,7 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
210220
),
211221
attrs.class,
212222
hashId.value,
223+
compactItemClassnames.value,
213224
)}
214225
locale={locale!.lang}
215226
prefixCls={pre}
@@ -221,7 +232,11 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
221232
superNextIcon={slots.superNextIcon?.() || <span class={`${pre}-super-next-icon`} />}
222233
components={Components}
223234
direction={direction.value}
224-
dropdownClassName={classNames(hashId.value)}
235+
dropdownClassName={classNames(
236+
hashId.value,
237+
props.popupClassName,
238+
props.dropdownClassName,
239+
)}
225240
onChange={onChange}
226241
onOpenChange={onOpenChange}
227242
onFocus={onFocus}

‎components/date-picker/generatePicker/generateSinglePicker.tsx

+38-17
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { commonProps, datePickerProps } from './props';
1717
import devWarning from '../../vc-util/devWarning';
1818
import { FormItemInputContext, useInjectFormItemContext } from '../../form/FormItemContext';
1919
import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
20+
import { useCompactItemContext } from '../../space/Compact';
2021

2122
//CSSINJS
2223
import useStyle from '../style';
@@ -55,22 +56,36 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
5556
ExtraProps;
5657
const formItemContext = useInjectFormItemContext();
5758
const formItemInputContext = FormItemInputContext.useInject();
58-
devWarning(
59-
!(props.monthCellContentRender || slots.monthCellContentRender),
60-
'DatePicker',
61-
'`monthCellContentRender` is deprecated. Please use `monthCellRender"` instead.',
62-
);
59+
// =================== Warning =====================
60+
if (process.env.NODE_ENV !== 'production') {
61+
devWarning(
62+
picker !== 'quarter',
63+
displayName || 'DatePicker',
64+
`DatePicker.${displayName} is legacy usage. Please use DatePicker[picker='${picker}'] directly.`,
65+
);
6366

64-
devWarning(
65-
!attrs.getCalendarContainer,
66-
'DatePicker',
67-
'`getCalendarContainer` is deprecated. Please use `getPopupContainer"` instead.',
68-
);
69-
const { prefixCls, direction, getPopupContainer, size, rootPrefixCls } = useConfigInject(
70-
'picker',
71-
props,
72-
);
67+
devWarning(
68+
!props.dropdownClassName,
69+
displayName || 'DatePicker',
70+
'`dropdownClassName` is deprecated. Please use `popupClassName` instead.',
71+
);
72+
devWarning(
73+
!(props.monthCellContentRender || slots.monthCellContentRender),
74+
displayName || 'DatePicker',
75+
'`monthCellContentRender` is deprecated. Please use `monthCellRender"` instead.',
76+
);
7377

78+
devWarning(
79+
!attrs.getCalendarContainer,
80+
displayName || 'DatePicker',
81+
'`getCalendarContainer` is deprecated. Please use `getPopupContainer"` instead.',
82+
);
83+
}
84+
85+
const { prefixCls, direction, getPopupContainer, size, rootPrefixCls, disabled } =
86+
useConfigInject('picker', props);
87+
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
88+
const mergedSize = computed(() => compactSize.value || size.value);
7489
// style
7590
const [wrapSSR, hashId] = useStyle(prefixCls);
7691

@@ -198,7 +213,7 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
198213
dateRender={dateRender}
199214
renderExtraFooter={renderExtraFooter}
200215
ref={pickerRef}
201-
placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
216+
placeholder={getPlaceholder(locale, mergedPicker, placeholder)}
202217
suffixIcon={suffixNode}
203218
dropdownAlign={transPlacement2DropdownAlign(direction.value, props.placement)}
204219
clearIcon={clearIcon || <CloseCircleFilled />}
@@ -215,7 +230,7 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
215230
locale={locale!.lang}
216231
class={classNames(
217232
{
218-
[`${pre}-${size.value}`]: size.value,
233+
[`${pre}-${mergedSize.value}`]: mergedSize.value,
219234
[`${pre}-borderless`]: !bordered,
220235
},
221236
getStatusClassNames(
@@ -225,7 +240,9 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
225240
),
226241
attrs.class,
227242
hashId.value,
243+
compactItemClassnames.value,
228244
)}
245+
disabled={disabled.value}
229246
prefixCls={pre}
230247
getPopupContainer={attrs.getCalendarContainer || getPopupContainer.value}
231248
generateConfig={generateConfig}
@@ -235,7 +252,11 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
235252
superNextIcon={slots.superNextIcon?.() || <span class={`${pre}-super-next-icon`} />}
236253
components={Components}
237254
direction={direction.value}
238-
dropdownClassName={classNames(hashId.value)}
255+
dropdownClassName={classNames(
256+
hashId.value,
257+
props.popupClassName,
258+
props.dropdownClassName,
259+
)}
239260
onChange={onChange}
240261
onOpenChange={onOpenChange}
241262
onFocus={onFocus}

0 commit comments

Comments
 (0)