diff --git a/src/components/cascader-view/cascader-view.tsx b/src/components/cascader-view/cascader-view.tsx index 206f782ecc..dbbbd8d751 100644 --- a/src/components/cascader-view/cascader-view.tsx +++ b/src/components/cascader-view/cascader-view.tsx @@ -1,20 +1,18 @@ -import React, { useState, useEffect, useMemo } from 'react' -import type { FC, ReactNode } from 'react' +import { useUpdateEffect } from 'ahooks' import classNames from 'classnames' -import Tabs from '../tabs' -import CheckList, { CheckListValue } from '../check-list' +import type { FC, ReactNode } from 'react' +import React, { useEffect, useMemo, useState } from 'react' +import type { BaseOptionType, FieldNamesType } from '../../hooks' +import { useFieldNames } from '../../hooks' import { NativeProps, withNativeProps } from '../../utils/native-props' -import { mergeProps } from '../../utils/with-default-props' import { usePropsValue } from '../../utils/use-props-value' -import { useCascaderValueExtend } from './use-cascader-value-extend' +import { mergeProps } from '../../utils/with-default-props' +import CheckList, { CheckListValue } from '../check-list' import { useConfig } from '../config-provider' -import { optionSkeleton } from './option-skeleton' import Skeleton from '../skeleton' -import { useUpdateEffect } from 'ahooks' -import { useFieldNames } from '../../hooks' -import type { FieldNamesType, BaseOptionType } from '../../hooks' - -const classPrefix = `adm-cascader-view` +import Tabs from '../tabs' +import { optionSkeleton } from './option-skeleton' +import { useCascaderValueExtend } from './use-cascader-value-extend' export type CascaderValue = CheckListValue @@ -40,6 +38,7 @@ export type CascaderViewProps = { activeIcon?: ReactNode loading?: boolean fieldNames?: FieldNamesType + prefixCls?: string } & NativeProps<'--height'> const defaultProps = { @@ -49,7 +48,8 @@ const defaultProps = { export const CascaderView: FC = p => { const props = mergeProps(defaultProps, p) - const { locale } = useConfig() + const { locale, getPrefixCls } = useConfig() + const prefixCls = getPrefixCls('cascader-view', props.prefixCls) const [labelName, valueName, childrenName, disabledName] = useFieldNames( props.fieldNames ) @@ -123,7 +123,7 @@ export const CascaderView: FC = p => { return withNativeProps( props, -
+
{ @@ -131,7 +131,7 @@ export const CascaderView: FC = p => { setTabActiveIndex(activeIndex) }} stretch={false} - className={`${classPrefix}-tabs`} + className={`${prefixCls}-tabs`} > {levels.map((level, index) => { const selected = level.selected @@ -139,33 +139,33 @@ export const CascaderView: FC = p => { +
{selected ? selected[labelName] : typeof placeholder === 'function' - ? placeholder(index) - : placeholder} + ? placeholder(index) + : placeholder}
} forceRender > -
+
{whetherLoading(level.options) ? ( -
+
@@ -184,8 +184,8 @@ export const CascaderView: FC = p => { value={option[valueName]} key={option[valueName]} disabled={option[disabledName]} - className={classNames(`${classPrefix}-item`, { - [`${classPrefix}-item-active`]: active, + className={classNames(`${prefixCls}-item`, { + [`${prefixCls}-item-active`]: active, })} > {option[labelName]} diff --git a/src/components/cascader-view/tests/cascader-view.test.tsx b/src/components/cascader-view/tests/cascader-view.test.tsx index a86d1cfe74..6ab27bc123 100644 --- a/src/components/cascader-view/tests/cascader-view.test.tsx +++ b/src/components/cascader-view/tests/cascader-view.test.tsx @@ -2,6 +2,7 @@ import React from 'react' import { fireEvent, render, testA11y } from 'testing' import CascaderView from '../' import { options, sameValueOptions } from '../../cascader/demos/data' +import ConfigProvider from '../../config-provider' const classPrefix = `adm-cascader-view` @@ -137,4 +138,36 @@ describe('CascaderView', () => { expect(baseElement.querySelector('.adm-skeleton')).toBeInTheDocument() }) + + test('should apply prefixCls from ConfigProvider', () => { + render( + + { + if (i === 2) return '区/县' + return '请选择' + }} + /> + + ) + expect(document.querySelector('.config-prefix-cascader-view')).toBeTruthy() + }) + + test('should prioritize component prefixCls over ConfigProvider', () => { + render( + + { + if (i === 2) return '区/县' + return '请选择' + }} + prefixCls='component-prefix' + /> + + ) + expect(document.querySelector('.component-prefix')).toBeTruthy() + expect(document.querySelector('.config-prefix-cascader-view')).toBeFalsy() + }) }) diff --git a/src/components/cascader/cascader.tsx b/src/components/cascader/cascader.tsx index 6024e31174..af8590f57a 100644 --- a/src/components/cascader/cascader.tsx +++ b/src/components/cascader/cascader.tsx @@ -1,26 +1,23 @@ import React, { - useState, - useEffect, ReactNode, forwardRef, + useEffect, useImperativeHandle, + useState, } from 'react' -import Popup, { PopupProps } from '../popup' -import { +import type { FieldNamesType } from '../../hooks' +import { useFieldNames } from '../../hooks' +import { NativeProps, withNativeProps } from '../../utils/native-props' +import { usePropsValue } from '../../utils/use-props-value' +import { mergeProps } from '../../utils/with-default-props' +import CascaderView, { + CascaderOption, CascaderValue, CascaderValueExtend, - CascaderOption, } from '../cascader-view' -import { mergeProps } from '../../utils/with-default-props' -import { NativeProps, withNativeProps } from '../../utils/native-props' -import { usePropsValue } from '../../utils/use-props-value' -import CascaderView from '../cascader-view' -import { useConfig } from '../config-provider' import { useCascaderValueExtend } from '../cascader-view/use-cascader-value-extend' -import { useFieldNames } from '../../hooks' -import type { FieldNamesType } from '../../hooks' - -const classPrefix = `adm-cascader` +import { useConfig } from '../config-provider' +import Popup, { PopupProps } from '../popup' export type CascaderActions = { open: () => void @@ -50,6 +47,7 @@ export type CascaderProps = { onTabsChange?: (index: number) => void activeIcon?: ReactNode fieldNames?: FieldNamesType + prefixCls?: string } & Pick< PopupProps, | 'getContainer' @@ -69,7 +67,7 @@ const defaultProps = { } export const Cascader = forwardRef((p, ref) => { - const { locale } = useConfig() + const { locale, getPrefixCls } = useConfig() const props = mergeProps( defaultProps, { @@ -79,6 +77,7 @@ export const Cascader = forwardRef((p, ref) => { }, p ) + const prefixCls = getPrefixCls('cascader', props.prefixCls) const [visible, setVisible] = usePropsValue({ value: props.visible, @@ -127,10 +126,10 @@ export const Cascader = forwardRef((p, ref) => { const cascaderElement = withNativeProps( props, -
-
+
+ -
+
{ setInnerValue(val) diff --git a/src/components/cascader/tests/cascader.test.tsx b/src/components/cascader/tests/cascader.test.tsx index d51ce8f8d1..e1c7ad08b3 100644 --- a/src/components/cascader/tests/cascader.test.tsx +++ b/src/components/cascader/tests/cascader.test.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react' import { fireEvent, render, testA11y, waitFor } from 'testing' import Cascader from '../' +import ConfigProvider from '../../config-provider' import { options } from '../demos/data' describe('Cascader', () => { @@ -78,4 +79,23 @@ describe('Cascader', () => { expect(fn.mock.calls[0][0]).toEqual(['浙江', '杭州', '西湖区']) }) }) + + test('should apply prefixCls from ConfigProvider', () => { + render( + + + + ) + expect(document.querySelector('.config-prefix-cascader')).toBeTruthy() + }) + + test('should prioritize component prefixCls over ConfigProvider', () => { + render( + + + + ) + expect(document.querySelector('.component-prefix')).toBeTruthy() + expect(document.querySelector('.config-prefix-cascader')).toBeFalsy() + }) })