Skip to content

Commit

Permalink
fix(CascaderSelect): The value of the menuProps attribute is passed b…
Browse files Browse the repository at this point in the history 
…y props
  • Loading branch information
@zyliang96
泊淞 authored and zyliang96 committed Dec 5, 2024
1 parent c1dd9d8 commit 438d47a
Show file tree
Hide file tree
Showing 9 changed files with 187 additions and 67 deletions.
56 changes: 28 additions & 28 deletions components/cascader-select/__docs__/index.en-us.md
View file

Large diffs are not rendered by default.

56 changes: 28 additions & 28 deletions components/cascader-select/__docs__/index.md
View file

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions components/cascader-select/__tests__/index-spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -558,4 +558,12 @@ describe('CascaderSelect', () => {
cy.get('.next-tag').invoke('text').should('eq', '西安');
cy.get('.next-select-trigger-search input').should('have.text', '');
});

it('should support The value of the menuProps attribute is passed by props, close #3852', () => {
cy.mount(
<CascaderSelect dataSource={ChinaArea} menuProps={{ itemClassName: 'test-list-cls' }} />
);
cy.get('.next-select').click();
cy.get('.next-menu-item').first().should('have.class', 'test-list-cls');
});
});
4 changes: 2 additions & 2 deletions components/cascader-select/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,8 +244,8 @@ export interface CascaderSelectProps
*/
treeCheckable?: boolean;
/**
* 透传到 Cascader 的属性对象
* @en props object passed to Cascader
* 透传到 Cascader 的属性对象；focusedKey、onItemFocus、className、style、focusable、isSelectIconRight 传入无效，其中 onBlur 在 filter 下传入无效
* @en props object passed to Cascader：The parameters focusedKey, onItemFocus, className, style, focusable, and isSelectIconRight are invalid. Additionally, onBlur is invalid when passed under the filter
*/
menuProps?: Omit<CascaderProps, 'onSelect' | 'onChange'>;
/**
Expand Down
4 changes: 2 additions & 2 deletions components/cascader/__docs__/index.en-us.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
```typescript
export type CascaderDataItem = {
value: string;
label?: string;
label?: React.ReactNode;
disabled?: boolean;
checkboxDisabled?: boolean;
children?: Array<CascaderDataItem>;
Expand All @@ -64,7 +64,7 @@ export type CascaderDataItemWithPosInfo = CascaderDataItem & {
* 位置信息
*/
pos: string;
_source: CascaderDataItem;
_source?: CascaderDataItem;
};
```

Expand Down
6 changes: 4 additions & 2 deletions components/cascader/__docs__/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@

### Cascader

Cascader 支持属性透传给 Menu，但会忽略 onSelect、value、onChange、defaultValue、focusedKey、onItemFocus、focusable、isSelectIconRight、onBlur 等和 Cascader 同名的属性

| 参数 | 说明 | 类型 | 默认值 | 是否必填 | 支持版本 |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | -------- | -------- |
| dataSource | 数据源 | Array\<CascaderDataItem> | [] | | - |
Expand Down Expand Up @@ -47,7 +49,7 @@
```typescript
export type CascaderDataItem = {
value: string;
label?: string;
label?: React.ReactNode;
disabled?: boolean;
checkboxDisabled?: boolean;
children?: Array<CascaderDataItem>;
Expand All @@ -64,7 +66,7 @@ export type CascaderDataItemWithPosInfo = CascaderDataItem & {
* 位置信息
*/
pos: string;
_source: CascaderDataItem;
_source?: CascaderDataItem;
};
```

Expand Down
61 changes: 61 additions & 0 deletions components/cascader/__tests__/index-spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import React, {
import cloneDeep from 'lodash.clonedeep';
import type { SinonSpy } from 'cypress/types/sinon';
import Cascader, { type CascaderDataItem, type CascaderProps } from '../index';
import ConfigProvider from '../../config-provider';
import '../style';

function freeze(dataSource: NonNullable<CascaderProps['dataSource']>) {
Expand Down Expand Up @@ -739,4 +740,64 @@ describe('Cascader', () => {
'rgb(255, 255, 255)'
);
});

// Fix https://github.com/alibaba-fusion/next/issues/3852
it('The Cascader component enforces isSelectIconRight to be false to prevent potential style conflicts that may arise when isSelectIconRight is set to true', () => {
const dataSource = [
{
value: '2973',
label: '陕西',
children: [
{
value: '2974',
label: '西安',
children: [
{ value: '2975', label: '西安市' },
{ value: '2976', label: '高陵县' },
],
},
{
value: '2980',
label: '铜川',
children: [
{ value: '2981', label: '铜川市' },
{ value: '2982', label: '宜君县' },
],
},
],
},
{
value: '3371',
label: '新疆',
children: [
{
value: '3430',
label: '巴音郭楞蒙古自治州',
children: [
{ value: '3431', label: '库尔勒市' },
{ value: '3432', label: '和静县' },
],
},
],
},
];
cy.mount(
<ConfigProvider
defaultPropsConfig={{
Menu: {
isSelectIconRight: true,
},
}}
>
<Cascader dataSource={dataSource} />
</ConfigProvider>
);
findItem(0, 0)
.click({ force: true })
.then(() => {
findItem(0, 0)
.find('.next-menu-icon-selected')
.should('not.have.class', 'next-menu-icon-right');
});
});
});
41 changes: 37 additions & 4 deletions components/cascader/cascader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { polyfill } from 'react-lifecycles-compat';
import cloneDeep from 'lodash.clonedeep';
import cx from 'classnames';
import Menu, { type ItemProps, type CheckboxItemProps } from '../menu';
import Menu, { type ItemProps, type CheckboxItemProps, type MenuProps } from '../menu';
import { func, obj, dom } from '../util';
import CascaderMenu from './menu';
import CascaderMenuItem from './item';
Expand All @@ -25,9 +25,11 @@ import type {
P2n,
V2n,
} from './types';
import { Menu as ViewMenu } from '../menu/view/menu';
import ConfigProvider from '../config-provider';

const { bindCtx } = func;
const { pickOthers } = obj;
const { pickOthers, pickProps } = obj;
const { addClass, removeClass, setStyle, getStyle } = dom;

// 数据打平
Expand Down Expand Up @@ -109,6 +111,27 @@ const normalizeValue = <T,>(value: T): NormalizeValueReturns<T> => {
return [] as NormalizeValueReturns<T>;
};

const getFormatMenuProps = (others: Record<string, unknown>) => {
const targetProps = pickProps(ViewMenu.propTypes, others);
const targetMenuProps = pickOthers(
{
value: false,
onChange: false,
defaultValue: false,
focusedKey: false,
onItemFocus: false,
focusable: false,
onBlur: false,
...ConfigProvider.propTypes,
},
targetProps
);
return {
...targetMenuProps,
isSelectIconRight: false,
} as MenuProps;
};

/**
* Cascader
*/
Expand Down Expand Up @@ -631,11 +654,13 @@ class Cascader extends Component<CascaderProps, CascaderState> {
listClassName,
listStyle,
itemRender,
...others
} = this.props;
const { value, expandedValue, focusedValue } = this.state;

return (
<CascaderMenu
{...getFormatMenuProps(others)}
key={level}
prefix={prefix}
useVirtual={useVirtual}
Expand Down Expand Up @@ -771,10 +796,18 @@ class Cascader extends Component<CascaderProps, CascaderState> {
}

renderFilteredList() {
const { prefix, filteredListStyle, filteredPaths, focusable = false } = this.props;
const {
prefix,
filteredListStyle,
filteredPaths,
focusable = false,
...others
} = this.props;
const { focusedValue } = this.state;

return (
<Menu
{...getFormatMenuProps(others)}
// 如果不设置为false， CascaderSelect 开启 showSearch后，弹窗展开时，光标无法到input上去，也无法输入.
// TODO: set focusable=true in 2.x
focusable={focusable}
Expand All @@ -801,7 +834,7 @@ class Cascader extends Component<CascaderProps, CascaderState> {
searchValue,
} = this.props;
// FIXME 这样做风险比较大，propTypes 如果不全，就会出现一些 div 接收不了的参数传导到 div
const others = pickOthers(Cascader.propTypes, this.props);
const others = pickOthers({ ...Cascader.propTypes, ...ViewMenu.propTypes }, this.props);
const { value } = this.state;

if (rtl) {
Expand Down
18 changes: 17 additions & 1 deletion components/cascader/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,10 +99,26 @@ export interface CascaderMenuProps extends CommonProps, MenuProps {

/**
* @api Cascader
* @remarks
* Cascader 支持除 onSelect、value、onChange、defaultValue、focusedKey、onItemFocus、focusable、isSelectIconRight、onBlur 等和 Cascader 同名的属性透传给 Menu
* -
* Cascader supports passing through properties with the same names to Menu, such as onSelect, value, onChange, defaultValue, focusedKey, onItemFocus, focusable, isSelectIconRight, onBlur, etc.
*/
export interface CascaderProps
extends Omit<HTMLAttributesWeak, 'onChange' | 'onSelect' | 'defaultValue'>,
CommonProps {
CommonProps,
Omit<
MenuProps,
| 'value'
| 'onChange'
| 'onSelect'
| 'defaultValue'
| 'focusedKey'
| 'onItemFocus'
| 'focusable'
| 'isSelectIconRight'
| 'onBlur'
> {
/**
* 数据源
* @en data source
Expand Down

0 comments on commit 438d47a

Please sign in to comment.