Skip to content

Feature/panel default expand keys #547

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
+27 −6
Open

Feature/panel default expand keys #547

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f28a6fb
feat: Cascader.Panel support default expand cells
lihongxiangfrontend Jul 10, 2024
18dd680
fix: 修复Panel 单测报错
lihongxiangfrontend Jul 10, 2024
ae7f322
refactor: panel demo support defaultActiveValueCells
lihongxiangfrontend Jul 11, 2024
23e8b4f
fix: remove redundance dependency
lihongxiangfrontend Jul 11, 2024
9d60e08
test: 补齐 Panel multiple with defaultActiveValueCells test suites
lihongxiangfrontend Jul 11, 2024
8f75363
refactor: panel demo add a button for setDefaultActiveValueCells
lihongxiangfrontend Jul 11, 2024
8895a35
refactor: Panel 默认展开属性重命名 & 移除在effect中使用 defaultActiveKey
lihongxiangfrontend Oct 25, 2024
a29a6e4
fix: 删除defaultActiveKey多余声明
lihongxiangfrontend Nov 19, 2024
173d4de
fix: 删除重复声明
lihongxiangfrontend Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ export default () => {
setValue2(nextValue);
}}
disabled={disabled}
defaultActiveKey={['bj', 'haidian']}
/>

<Cascader.Panel options={addressOptions} disabled={disabled} direction="rtl" />
Expand Down
2 changes: 2 additions & 0 deletions src/Cascader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,7 @@ export interface CascaderProps<
value: GetValueType<OptionType, ValueField, Multiple>,
selectOptions: OptionType[],
) => void;
defaultActiveKey?: React.Key[];
}

export type SingleValueType = (string | number)[];
Expand All @@ -175,6 +176,7 @@ export type InternalCascaderProps = Omit<CascaderProps, 'onChange' | 'value' | '
value: InternalValueType,
selectOptions: BaseOptionType[] | BaseOptionType[][],
) => void;
defaultActiveKey?: React.Key[];
};

export type CascaderRef = Omit<BaseSelectRef, 'scrollTo'>;
Expand Down
5 changes: 3 additions & 2 deletions src/OptionList/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export type RawOptionListProps = Pick<
| 'direction'
| 'open'
| 'disabled'
>;
> & { defaultActiveKey?: React.Key[]; };

const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((props, ref) => {
const {
Expand All @@ -41,6 +41,7 @@ const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((
direction,
open,
disabled,
defaultActiveKey,
} = props;

const containerRef = React.useRef<HTMLDivElement>(null);
Expand Down Expand Up @@ -105,7 +106,7 @@ const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((
const halfCheckedSet = React.useMemo(() => new Set(toPathKeys(halfValues)), [halfValues]);

// ====================== Accessibility =======================
const [activeValueCells, setActiveValueCells] = useActive(multiple, open);
const [activeValueCells, setActiveValueCells] = useActive(multiple, open, defaultActiveKey);

// =========================== Path ===========================
const onPathOpen = (nextValueCells: React.Key[]) => {
Expand Down
3 changes: 2 additions & 1 deletion src/OptionList/useActive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@ import CascaderContext from '../context';
const useActive = (
multiple?: boolean,
open?: boolean,
defaultActiveKey?: React.Key[],
): [React.Key[], (activeValueCells: React.Key[]) => void] => {
const { values } = React.useContext(CascaderContext);

const firstValueCells = values[0];

// Record current dropdown active options
// This also control the open status
const [activeValueCells, setActiveValueCells] = React.useState<React.Key[]>([]);
const [activeValueCells, setActiveValueCells] = React.useState<React.Key[]>(defaultActiveKey ?? []);

React.useEffect(
() => {
Expand Down
5 changes: 4 additions & 1 deletion src/Panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@ export type PickType =
| 'style'
| 'direction'
| 'notFoundContent'
| 'disabled';
| 'disabled'
| 'defaultActiveKey';

export type PanelProps<
OptionType extends DefaultOptionType = DefaultOptionType,
Expand Down Expand Up @@ -70,6 +71,7 @@ export default function Panel<
direction,
notFoundContent = 'Not Found',
disabled,
defaultActiveKey,
} = props as Pick<InternalCascaderProps, PickType>;

// ======================== Multiple ========================
Expand Down Expand Up @@ -203,6 +205,7 @@ export default function Panel<
open
direction={direction}
disabled={disabled}
defaultActiveKey={defaultActiveKey}
/>
)}
</div>
Expand Down
13 changes: 13 additions & 0 deletions tests/Panel.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,19 @@ describe('Cascader.Panel', () => {
expect(onChange).toHaveBeenCalledWith([['bamboo', 'little']], expect.anything());
});

it('multiple with defaultActiveKey', () => {
const onChange = jest.fn();
const { container } = render(
<Cascader.Panel
checkable
options={options}
onChange={onChange}
defaultActiveKey={['bamboo', 'little']}
/>,
);
expect(container.querySelectorAll('.rc-cascader-menu')).toHaveLength(2);
});

it('rtl', () => {
const { container } = render(<Cascader.Panel options={options} direction="rtl" />);

Expand Down
4 changes: 2 additions & 2 deletions tests/selector.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ import Cascader from '../src';
import { addressOptions } from './demoOptions';

// Mock `useActive` hook
jest.mock('../src/OptionList/useActive', () => (multiple: boolean, open: boolean) => {
jest.mock('../src/OptionList/useActive', () => (multiple: boolean, open: boolean, defaultActiveKey: React.Key[]) => {
// Pass to origin hooks
const originHook = jest.requireActual('../src/OptionList/useActive').default;
const [activeValueCells, setActiveValueCells] = originHook(multiple, open);
const [activeValueCells, setActiveValueCells] = originHook(multiple, open, defaultActiveKey);
Comment on lines +8 to +11
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

需要为 selector.spec.tsx 添加 defaultActiveKey 相关的测试用例

经过验证，当前 selector.spec.tsx 中虽然更新了 mock 函数以支持 defaultActiveKey 参数，但缺少对该功能的具体测试。Panel.spec.tsx 中已有相关测试，但范围有限。

建议在 selector.spec.tsx 中添加以下测试场景：

  • defaultActiveKey 的默认值处理
  • 设置 defaultActiveKey 时的选择器初始状态
  • defaultActiveKey 与 value 属性同时存在时的优先级验证
  • 多选模式下 defaultActiveKey 的行为测试
🔗 Analysis chain

代码更改看起来没有问题，但建议增加测试用例

mock 函数的更新正确地支持了新增的 defaultActiveKey 参数，并且保持了与原始 hook 的一致性。

建议添加以下测试场景：

  • defaultActiveKey 的默认行为
  • 传入无效的 defaultActiveKey 时的处理
  • defaultActiveKey 与已有 value 属性的交互
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 检查是否有相关的测试用例
rg -l "defaultActiveKey.*test|it.*defaultActiveKey" tests/

Length of output: 81

Script:

#!/bin/bash
# Check the content of Panel.spec.tsx to see existing defaultActiveKey tests
rg "defaultActiveKey.*test|it.*defaultActiveKey" -A 5 tests/Panel.spec.tsx

# Check selector.spec.tsx for any existing test cases
cat tests/selector.spec.tsx

Length of output: 4770


(global as any).activeValueCells = activeValueCells;

Expand Down
Loading