Skip to content

Commit 2fd161c

Browse files
zombieJzombieJ
committed
test: fix test case
1 parent f9cafcb commit 2fd161c

File tree

3 files changed

+124
-88
lines changed

3 files changed

+124
-88
lines changed

‎src/PickerPanel/context.ts‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@ import * as React from 'react';
22
import type { PanelMode, SharedPanelProps } from '../interface';
33
import type { FilledPanelClassNames, FilledPanelStyles } from '../hooks/useSemantic';
44

5+
export interface SharedPanelContextProps {
6+
classNames: FilledPanelClassNames;
7+
styles: FilledPanelStyles;
8+
}
9+
10+
export const SharedPanelContext = React.createContext<SharedPanelContextProps>(null!);
11+
512
export interface PanelContextProps<DateType extends object = any>
613
extends Pick<
714
SharedPanelProps<DateType>,
@@ -32,9 +39,6 @@ export interface PanelContextProps<DateType extends object = any>
3239

3340
// Shared
3441
now: DateType;
35-
36-
classNames: FilledPanelClassNames;
37-
styles: FilledPanelStyles;
3842
}
3943

4044
/** Used for each single Panel. e.g. DatePanel */
@@ -51,9 +55,11 @@ export function useInfo<DateType extends object = any>(
5155
props: SharedPanelProps<DateType>,
5256
panelType: PanelMode,
5357
): [sharedProps: PanelContextProps<DateType>, now: DateType] {
58+
// TODO: this is not good to get from each props.
59+
// Should move to `SharedPanelContext` instead.
5460
const {
5561
prefixCls,
56-
// generateConfig,
62+
generateConfig,
5763
locale,
5864
disabledDate,
5965
minDate,
@@ -74,7 +80,7 @@ export function useInfo<DateType extends object = any>(
7480
} = props;
7581

7682
// ======================= Context ========================
77-
const { classNames, styles, generateConfig } = usePanelContext();
83+
const { classNames, styles } = React.useContext(SharedPanelContext);
7884

7985
// ========================= MISC =========================
8086
const now = generateConfig.getNow();

‎src/PickerPanel/index.tsx‎

Lines changed: 47 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import type {
1111
Locale,
1212
OnPanelChange,
1313
PanelMode,
14+
PanelSemanticName,
1415
PickerMode,
1516
SharedPanelProps,
1617
SharedTimeProps,
@@ -19,7 +20,7 @@ import PickerContext from '../PickerInput/context';
1920
import useCellRender from '../PickerInput/hooks/useCellRender';
2021
import { isSame } from '../utils/dateUtil';
2122
import { pickProps, toArray } from '../utils/miscUtil';
22-
import { PickerHackContext } from './context';
23+
import { PickerHackContext, SharedPanelContext } from './context';
2324
import DatePanel from './DatePanel';
2425
import DateTimePanel from './DateTimePanel';
2526
import DecadePanel from './DecadePanel';
@@ -127,7 +128,6 @@ export interface SinglePickerPanelProps<DateType extends object = any>
127128
onChange?: (date: DateType) => void;
128129
}
129130

130-
type PanelSemanticName = 'popupBody' | 'popupContent' | 'popupItem';
131131
export type PickerPanelProps<DateType extends object = any> = BasePickerPanelProps<DateType> & {
132132
/** multiple selection. Not support time or datetime picker */
133133
multiple?: boolean;
@@ -378,15 +378,21 @@ function PickerPanel<DateType extends object = any>(
378378
DatePanel) as typeof DatePanel;
379379

380380
// ======================== Context =========================
381+
const sharedPanelContext = React.useMemo(
382+
() => ({
383+
classNames: pickerClassNames?.popup ?? panelClassNames ?? {},
384+
styles: pickerStyles?.popup ?? panelStyles ?? {},
385+
}),
386+
[pickerClassNames, panelClassNames, pickerStyles, panelStyles],
387+
);
388+
381389
const parentHackContext = React.useContext(PickerHackContext);
382390
const pickerPanelContext = React.useMemo(
383391
() => ({
384392
...parentHackContext,
385393
hideHeader,
386-
classNames: pickerClassNames ?? panelClassNames ?? {},
387-
styles: pickerStyles ?? panelStyles ?? {},
388394
}),
389-
[parentHackContext, hideHeader, pickerClassNames, panelClassNames, pickerStyles, panelStyles],
395+
[parentHackContext, hideHeader],
390396
);
391397

392398
// ======================== Warnings ========================
@@ -420,40 +426,42 @@ function PickerPanel<DateType extends object = any>(
420426
]);
421427

422428
return (
423-
<PickerHackContext.Provider value={pickerPanelContext}>
424-
<div
425-
ref={rootRef}
426-
tabIndex={tabIndex}
427-
className={classNames(panelCls, {
428-
[`${panelCls}-rtl`]: direction === 'rtl',
429-
})}
430-
>
431-
<PanelComponent
432-
{...panelProps}
433-
// Time
434-
showTime={mergedShowTime}
435-
// MISC
436-
prefixCls={mergedPrefixCls}
437-
locale={filledLocale}
438-
generateConfig={generateConfig}
439-
// Mode
440-
onModeChange={triggerModeChange}
441-
// Value
442-
pickerValue={mergedPickerValue}
443-
onPickerValueChange={(nextPickerValue) => {
444-
setPickerValue(nextPickerValue, true);
445-
}}
446-
value={mergedValue[0]}
447-
onSelect={onPanelValueSelect}
448-
values={mergedValue}
449-
// Render
450-
cellRender={onInternalCellRender}
451-
// Hover
452-
hoverRangeValue={hoverRangeDate}
453-
hoverValue={hoverValue}
454-
/>
455-
</div>
456-
</PickerHackContext.Provider>
429+
<SharedPanelContext.Provider value={sharedPanelContext}>
430+
<PickerHackContext.Provider value={pickerPanelContext}>
431+
<div
432+
ref={rootRef}
433+
tabIndex={tabIndex}
434+
className={classNames(panelCls, {
435+
[`${panelCls}-rtl`]: direction === 'rtl',
436+
})}
437+
>
438+
<PanelComponent
439+
{...panelProps}
440+
// Time
441+
showTime={mergedShowTime}
442+
// MISC
443+
prefixCls={mergedPrefixCls}
444+
locale={filledLocale}
445+
generateConfig={generateConfig}
446+
// Mode
447+
onModeChange={triggerModeChange}
448+
// Value
449+
pickerValue={mergedPickerValue}
450+
onPickerValueChange={(nextPickerValue) => {
451+
setPickerValue(nextPickerValue, true);
452+
}}
453+
value={mergedValue[0]}
454+
onSelect={onPanelValueSelect}
455+
values={mergedValue}
456+
// Render
457+
cellRender={onInternalCellRender}
458+
// Hover
459+
hoverRangeValue={hoverRangeDate}
460+
hoverValue={hoverValue}
461+
/>
462+
</div>
463+
</PickerHackContext.Provider>
464+
</SharedPanelContext.Provider>
457465
);
458466
}
459467

‎tests/picker.spec.tsx‎

Lines changed: 66 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1351,42 +1351,53 @@ describe('Picker.Basic', () => {
13511351
});
13521352

13531353
it('support classNames and styles', () => {
1354-
const customClassNames = {
1355-
popup: 'custom-popup',
1356-
popupBody: 'custom-body',
1357-
popupContent: 'custom-content',
1358-
popupItem: 'custom-item',
1354+
const popupClassNames = {
1355+
root: 'custom-popup',
1356+
body: 'custom-body',
1357+
content: 'custom-content',
1358+
item: 'custom-item',
13591359
};
1360-
const customStyles = {
1361-
popup: { color: 'red' },
1362-
popupBody: { color: 'green' },
1363-
popupContent: { color: 'blue' },
1364-
popupItem: { color: 'yellow' },
1360+
const popupStyles = {
1361+
root: { color: 'red' },
1362+
body: { color: 'green' },
1363+
content: { color: 'blue' },
1364+
item: { color: 'yellow' },
13651365
};
1366-
render(<DayPicker classNames={customClassNames} styles={customStyles} open />);
1366+
render(
1367+
<DayPicker
1368+
classNames={{
1369+
popup: popupClassNames,
1370+
}}
1371+
styles={{
1372+
popup: popupStyles,
1373+
}}
1374+
open
1375+
/>,
1376+
);
13671377

1368-
expect(document.querySelector('.rc-picker-dropdown')).toHaveClass(customClassNames.popup);
1369-
expect(document.querySelector('.rc-picker-dropdown')).toHaveStyle(customStyles.popup);
1378+
expect(document.querySelector('.rc-picker-dropdown')).toHaveClass(popupClassNames.root);
1379+
expect(document.querySelector('.rc-picker-dropdown')).toHaveStyle(popupStyles.root);
13701380
const content = document.querySelector('.rc-picker-content');
13711381
const body = document.querySelector('.rc-picker-body');
13721382
const item = document.querySelector('.rc-picker-cell');
1373-
expect(content).toHaveClass(customClassNames.popupContent);
1374-
expect(content).toHaveStyle(customStyles.popupContent);
1375-
expect(body).toHaveClass(customClassNames.popupBody);
1376-
expect(body).toHaveStyle(customStyles.popupBody);
1377-
expect(item).toHaveClass(customClassNames.popupItem);
1378-
expect(item).toHaveStyle(customStyles.popupItem);
1383+
expect(content).toHaveClass(popupClassNames.content);
1384+
expect(content).toHaveStyle(popupStyles.content);
1385+
expect(body).toHaveClass(popupClassNames.body);
1386+
expect(body).toHaveStyle(popupStyles.body);
1387+
expect(item).toHaveClass(popupClassNames.item);
1388+
expect(item).toHaveStyle(popupStyles.item);
13791389
});
1390+
13801391
it('support classNames and styles for panel', () => {
13811392
const customClassNames = {
1382-
popupBody: 'custom-body',
1383-
popupContent: 'custom-content',
1384-
popupItem: 'custom-item',
1393+
body: 'custom-body',
1394+
content: 'custom-content',
1395+
item: 'custom-item',
13851396
};
13861397
const customStyles = {
1387-
popupBody: { color: 'green' },
1388-
popupContent: { color: 'blue' },
1389-
popupItem: { color: 'yellow' },
1398+
body: { color: 'green' },
1399+
content: { color: 'blue' },
1400+
item: { color: 'yellow' },
13901401
};
13911402
render(
13921403
<PickerPanel
@@ -1399,33 +1410,43 @@ describe('Picker.Basic', () => {
13991410
const content = document.querySelector('.rc-picker-content');
14001411
const body = document.querySelector('.rc-picker-body');
14011412
const item = document.querySelector('.rc-picker-cell');
1402-
expect(content).toHaveClass(customClassNames.popupContent);
1403-
expect(content).toHaveStyle(customStyles.popupContent);
1404-
expect(body).toHaveClass(customClassNames.popupBody);
1405-
expect(body).toHaveStyle(customStyles.popupBody);
1406-
expect(item).toHaveClass(customClassNames.popupItem);
1407-
expect(item).toHaveStyle(customStyles.popupItem);
1413+
expect(content).toHaveClass(customClassNames.content);
1414+
expect(content).toHaveStyle(customStyles.content);
1415+
expect(body).toHaveClass(customClassNames.body);
1416+
expect(body).toHaveStyle(customStyles.body);
1417+
expect(item).toHaveClass(customClassNames.item);
1418+
expect(item).toHaveStyle(customStyles.item);
14081419
});
1420+
14091421
it('classNames and styles should support time panel', async () => {
14101422
const testClassNames = {
14111423
input: 'test-input',
14121424
prefix: 'test-prefix',
14131425
suffix: 'test-suffix',
1414-
popupContent: 'custom-content',
1415-
popupItem: 'custom-item',
14161426
};
1427+
const testPopupClassNames = {
1428+
content: 'test-popup-content',
1429+
item: 'test-popup-item',
1430+
};
1431+
14171432
const testStyles = {
14181433
input: { color: 'red' },
14191434
prefix: { color: 'green' },
14201435
suffix: { color: 'blue' },
1421-
popupContent: { color: 'blue' },
1422-
popupItem: { color: 'yellow' },
14231436
};
1437+
const testPopupStyles = {
1438+
content: { color: 'blue' },
1439+
item: { color: 'yellow' },
1440+
};
1441+
14241442
const defaultValue = moment('2019-11-28 01:02:03');
14251443
const { container } = render(
14261444
<Picker
1427-
classNames={testClassNames}
1428-
styles={testStyles}
1445+
classNames={{ ...testClassNames, popup: testPopupClassNames }}
1446+
styles={{
1447+
...testStyles,
1448+
popup: testPopupStyles,
1449+
}}
14291450
prefix="prefix"
14301451
suffixIcon="suffix"
14311452
defaultValue={defaultValue}
@@ -1437,7 +1458,7 @@ describe('Picker.Basic', () => {
14371458
generateConfig={momentGenerateConfig}
14381459
/>,
14391460
);
1440-
const input = container.querySelectorAll('.rc-picker-input')[0];
1461+
const input = container.querySelectorAll('.rc-picker-input input')[0];
14411462
const prefix = container.querySelector('.rc-picker-prefix');
14421463
const suffix = container.querySelector('.rc-picker-suffix');
14431464
expect(input).toHaveClass(testClassNames.input);
@@ -1448,20 +1469,21 @@ describe('Picker.Basic', () => {
14481469
expect(suffix).toHaveStyle(testStyles.suffix);
14491470
const { container: panel } = render(
14501471
<PickerPanel
1451-
classNames={testClassNames}
1452-
styles={testStyles}
1472+
classNames={testPopupClassNames}
1473+
styles={testPopupStyles}
14531474
picker="time"
14541475
locale={enUS}
14551476
generateConfig={momentGenerateConfig}
14561477
/>,
14571478
);
14581479
const content = panel.querySelector('.rc-picker-content');
14591480
const item = panel.querySelector('.rc-picker-time-panel-cell');
1460-
expect(content).toHaveClass(testClassNames.popupContent);
1461-
expect(content).toHaveStyle(testStyles.popupContent);
1462-
expect(item).toHaveClass(testClassNames.popupItem);
1463-
expect(item).toHaveStyle(testStyles.popupItem);
1481+
expect(content).toHaveClass(testPopupClassNames.content);
1482+
expect(content).toHaveStyle(testPopupStyles.content);
1483+
expect(item).toHaveClass(testPopupClassNames.item);
1484+
expect(item).toHaveStyle(testPopupStyles.item);
14641485
});
1486+
14651487
it('showTime config should have format', () => {
14661488
render(
14671489
<DayPicker

0 commit comments

Comments
 (0)