Skip to content

Commit df8d996

Browse files
shifeng1993shifeng1993
committed
Merge branch 'feat-v4' into feat-v4-refactor-checkbox
2 parents 4dc0f13 + 2f04932 commit df8d996

Some content is hidden

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

125 files changed

+3919
-2687
lines changed

‎components/button/button.tsx

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import useStyle from './style';
1919
import type { ButtonType } from './buttonTypes';
2020
import type { VNode, Ref } from 'vue';
2121
import { GroupSizeContext } from './button-group';
22+
import { useCompactItemContext } from '../space/Compact';
2223

2324
type Loading = boolean | number;
2425

@@ -49,6 +50,7 @@ export default defineComponent({
4950
const hasTwoCNChar = ref(false);
5051

5152
const autoInsertSpace = computed(() => autoInsertSpaceInButton.value !== false);
53+
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
5254

5355
// =============== Update Loading ===============
5456
const loadingOrDelay = computed(() =>
@@ -79,22 +81,25 @@ export default defineComponent({
7981
const pre = prefixCls.value;
8082

8183
const sizeClassNameMap = { large: 'lg', small: 'sm', middle: undefined };
82-
const sizeFullname = groupSize?.value || size.value;
84+
const sizeFullname = compactSize.value || groupSize?.value || size.value;
8385
const sizeCls = sizeFullname ? sizeClassNameMap[sizeFullname] || '' : '';
8486

85-
return {
86-
[hashId.value]: true,
87-
[`${pre}`]: true,
88-
[`${pre}-${shape}`]: shape !== 'default' && shape,
89-
[`${pre}-${type}`]: type,
90-
[`${pre}-${sizeCls}`]: sizeCls,
91-
[`${pre}-loading`]: innerLoading.value,
92-
[`${pre}-background-ghost`]: ghost && !isUnBorderedButtonType(type),
93-
[`${pre}-two-chinese-chars`]: hasTwoCNChar.value && autoInsertSpace.value,
94-
[`${pre}-block`]: block,
95-
[`${pre}-dangerous`]: !!danger,
96-
[`${pre}-rtl`]: direction.value === 'rtl',
97-
};
87+
return [
88+
compactItemClassnames.value,
89+
{
90+
[hashId.value]: true,
91+
[`${pre}`]: true,
92+
[`${pre}-${shape}`]: shape !== 'default' && shape,
93+
[`${pre}-${type}`]: type,
94+
[`${pre}-${sizeCls}`]: sizeCls,
95+
[`${pre}-loading`]: innerLoading.value,
96+
[`${pre}-background-ghost`]: ghost && !isUnBorderedButtonType(type),
97+
[`${pre}-two-chinese-chars`]: hasTwoCNChar.value && autoInsertSpace.value,
98+
[`${pre}-block`]: block,
99+
[`${pre}-dangerous`]: !!danger,
100+
[`${pre}-rtl`]: direction.value === 'rtl',
101+
},
102+
];
98103
});
99104

100105
const fixTwoCNChar = () => {
@@ -209,7 +214,11 @@ export default defineComponent({
209214
);
210215

211216
if (!isUnBorderedButtonType(type)) {
212-
buttonNode = <Wave ref="wave" disabled={!!innerLoading.value}>{buttonNode}</Wave>;
217+
buttonNode = (
218+
<Wave ref="wave" disabled={!!innerLoading.value}>
219+
{buttonNode}
220+
</Wave>
221+
);
213222
}
214223

215224
return wrapSSR(buttonNode);

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

Lines changed: 38 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,15 @@ 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

22+
//CSSINJS
23+
import useStyle from '../style';
24+
import { useCompactItemContext } from '../../space/Compact';
25+
import devWarning from '../../vc-util/devWarning';
26+
2327
export default function generateRangePicker<DateType, ExtraProps = {}>(
2428
generateConfig: GenerateConfig<DateType>,
2529
extraProps: ExtraProps,
@@ -49,15 +53,27 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
4953
const props = _props as unknown as CommonProps<DateType> & RangePickerProps<DateType>;
5054
const formItemContext = useInjectFormItemContext();
5155
const formItemInputContext = FormItemInputContext.useInject();
52-
devWarning(
53-
!attrs.getCalendarContainer,
54-
'DatePicker',
55-
'`getCalendarContainer` is deprecated. Please use `getPopupContainer"` instead.',
56-
);
57-
const { prefixCls, direction, getPopupContainer, size, rootPrefixCls } = useConfigInject(
58-
'picker',
59-
props,
60-
);
56+
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);
75+
// style
76+
const [wrapSSR, hashId] = useStyle(prefixCls);
6177
const pickerRef = ref();
6278
expose({
6379
focus: () => {
@@ -166,7 +182,7 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
166182
{formItemInputContext.hasFeedback && formItemInputContext.feedbackIcon}
167183
</>
168184
);
169-
return (
185+
return wrapSSR(
170186
<VCRangePicker
171187
dateRender={dateRender}
172188
renderExtraFooter={renderExtraFooter}
@@ -179,21 +195,22 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
179195
}
180196
ref={pickerRef}
181197
dropdownAlign={transPlacement2DropdownAlign(direction.value, props.placement)}
182-
placeholder={getRangePlaceholder(picker, locale, placeholder as [string, string])}
198+
placeholder={getRangePlaceholder(locale, picker, placeholder as [string, string])}
183199
suffixIcon={suffixNode}
184200
clearIcon={clearIcon || <CloseCircleFilled />}
185201
allowClear={allowClear}
186202
transitionName={transitionName || `${rootPrefixCls.value}-slide-up`}
187203
{...restProps}
188204
{...additionalOverrideProps}
205+
disabled={disabled.value}
189206
id={id}
190207
value={value.value}
191208
defaultValue={defaultValue.value}
192209
defaultPickerValue={defaultPickerValue.value}
193210
picker={picker}
194211
class={classNames(
195212
{
196-
[`${pre}-${size.value}`]: size.value,
213+
[`${pre}-${mergedSize.value}`]: mergedSize.value,
197214
[`${pre}-borderless`]: !bordered,
198215
},
199216
getStatusClassNames(
@@ -202,6 +219,8 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
202219
formItemInputContext.hasFeedback,
203220
),
204221
attrs.class,
222+
hashId.value,
223+
compactItemClassnames.value,
205224
)}
206225
locale={locale!.lang}
207226
prefixCls={pre}
@@ -213,14 +232,19 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
213232
superNextIcon={slots.superNextIcon?.() || <span class={`${pre}-super-next-icon`} />}
214233
components={Components}
215234
direction={direction.value}
235+
dropdownClassName={classNames(
236+
hashId.value,
237+
props.popupClassName,
238+
props.dropdownClassName,
239+
)}
216240
onChange={onChange}
217241
onOpenChange={onOpenChange}
218242
onFocus={onFocus}
219243
onBlur={onBlur}
220244
onPanelChange={onPanelChange}
221245
onOk={onOk}
222246
onCalendarChange={onCalendarChange}
223-
/>
247+
/>,
224248
);
225249
};
226250
},

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

Lines changed: 49 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ 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';
21+
22+
//CSSINJS
23+
import useStyle from '../style';
2024

2125
export default function generateSinglePicker<DateType, ExtraProps = {}>(
2226
generateConfig: GenerateConfig<DateType>,
@@ -52,21 +56,39 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
5256
ExtraProps;
5357
const formItemContext = useInjectFormItemContext();
5458
const formItemInputContext = FormItemInputContext.useInject();
55-
devWarning(
56-
!(props.monthCellContentRender || slots.monthCellContentRender),
57-
'DatePicker',
58-
'`monthCellContentRender` is deprecated. Please use `monthCellRender"` instead.',
59-
);
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+
);
66+
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+
);
77+
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);
89+
// style
90+
const [wrapSSR, hashId] = useStyle(prefixCls);
6091

61-
devWarning(
62-
!attrs.getCalendarContainer,
63-
'DatePicker',
64-
'`getCalendarContainer` is deprecated. Please use `getPopupContainer"` instead.',
65-
);
66-
const { prefixCls, direction, getPopupContainer, size, rootPrefixCls } = useConfigInject(
67-
'picker',
68-
props,
69-
);
7092
const pickerRef = ref();
7193
expose({
7294
focus: () => {
@@ -156,7 +178,7 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
156178
id = formItemContext.id.value,
157179
...restProps
158180
} = p;
159-
const showTime = p.showTime === '' ? true : p.showTime;
181+
const showTime = (p as any).showTime === '' ? true : p.showTime;
160182
const { format } = p as any;
161183

162184
let additionalOverrideProps: any = {};
@@ -185,13 +207,13 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
185207
{formItemInputContext.hasFeedback && formItemInputContext.feedbackIcon}
186208
</>
187209
);
188-
return (
210+
return wrapSSR(
189211
<RCPicker
190212
monthCellRender={monthCellRender}
191213
dateRender={dateRender}
192214
renderExtraFooter={renderExtraFooter}
193215
ref={pickerRef}
194-
placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
216+
placeholder={getPlaceholder(locale, mergedPicker, placeholder)}
195217
suffixIcon={suffixNode}
196218
dropdownAlign={transPlacement2DropdownAlign(direction.value, props.placement)}
197219
clearIcon={clearIcon || <CloseCircleFilled />}
@@ -208,7 +230,7 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
208230
locale={locale!.lang}
209231
class={classNames(
210232
{
211-
[`${pre}-${size.value}`]: size.value,
233+
[`${pre}-${mergedSize.value}`]: mergedSize.value,
212234
[`${pre}-borderless`]: !bordered,
213235
},
214236
getStatusClassNames(
@@ -217,7 +239,10 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
217239
formItemInputContext.hasFeedback,
218240
),
219241
attrs.class,
242+
hashId.value,
243+
compactItemClassnames.value,
220244
)}
245+
disabled={disabled.value}
221246
prefixCls={pre}
222247
getPopupContainer={attrs.getCalendarContainer || getPopupContainer.value}
223248
generateConfig={generateConfig}
@@ -227,13 +252,18 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
227252
superNextIcon={slots.superNextIcon?.() || <span class={`${pre}-super-next-icon`} />}
228253
components={Components}
229254
direction={direction.value}
255+
dropdownClassName={classNames(
256+
hashId.value,
257+
props.popupClassName,
258+
props.dropdownClassName,
259+
)}
230260
onChange={onChange}
231261
onOpenChange={onOpenChange}
232262
onFocus={onFocus}
233263
onBlur={onBlur}
234264
onPanelChange={onPanelChange}
235265
onOk={onOk}
236-
/>
266+
/>,
237267
);
238268
};
239269
},

0 commit comments

Comments
 (0)