diff --git a/package.json b/package.json index 744ac2da..1728a519 100644 --- a/package.json +++ b/package.json @@ -45,8 +45,8 @@ }, "dependencies": { "classnames": "2.x", - "@rc-component/select": "~1.0.0", - "@rc-component/tree": "~1.0.0", + "@rc-component/select": "~1.0.2", + "@rc-component/tree": "~1.0.1", "@rc-component/util": "^1.2.1" }, "devDependencies": { diff --git a/src/OptionList.tsx b/src/OptionList.tsx index 587cfc35..be4d9dfe 100644 --- a/src/OptionList.tsx +++ b/src/OptionList.tsx @@ -50,6 +50,8 @@ const OptionList: React.ForwardRefRenderFunction = (_, leftMaxCount, leafCountOnly, valueEntities, + classNames: treeClassNames, + styles, } = React.useContext(TreeSelectContext); const { @@ -342,6 +344,8 @@ const OptionList: React.ForwardRefRenderFunction = (_, )} ((props, ref) treeTitleRender, onPopupScroll, + + classNames: treeSelectClassNames, + styles, ...restProps } = props; @@ -623,6 +626,8 @@ const TreeSelect = React.forwardRef((props, ref) leafCountOnly: mergedShowCheckedStrategy === 'SHOW_CHILD' && !treeCheckStrictly && !!treeCheckable, valueEntities, + classNames: treeSelectClassNames, + styles, }; }, [ virtual, @@ -642,6 +647,8 @@ const TreeSelect = React.forwardRef((props, ref) treeCheckStrictly, treeCheckable, valueEntities, + treeSelectClassNames, + styles, ]); // ======================= Legacy Context ======================= @@ -693,6 +700,16 @@ const TreeSelect = React.forwardRef((props, ref) >> MISC id={mergedId} prefixCls={prefixCls} diff --git a/src/TreeSelectContext.ts b/src/TreeSelectContext.ts index 722bdbd5..baf9cd84 100644 --- a/src/TreeSelectContext.ts +++ b/src/TreeSelectContext.ts @@ -3,6 +3,7 @@ import type { ExpandAction } from '@rc-component/tree/lib/Tree'; import type { DataNode, FieldNames, Key } from './interface'; import type useDataEntities from './hooks/useDataEntities'; +export type SemanticName = 'item' | 'itemTitle' | 'input' | 'prefix' | 'suffix'; export interface TreeSelectContextProps { virtual?: boolean; popupMatchSelectWidth?: boolean | number; @@ -21,6 +22,8 @@ export interface TreeSelectContextProps { /** When `true`, only take leaf node as count, or take all as count with `maxCount` limitation */ leafCountOnly: boolean; valueEntities: ReturnType['valueEntities']; + styles?: Partial>; + classNames?: Partial>; } const TreeSelectContext = React.createContext(null as any); diff --git a/tests/Select.spec.tsx b/tests/Select.spec.tsx index d466870c..2d8ad430 100644 --- a/tests/Select.spec.tsx +++ b/tests/Select.spec.tsx @@ -638,4 +638,71 @@ describe('TreeSelect.basic', () => { const { container } = render(); expect(treeSelectRef.current.nativeElement).toBe(container.querySelector('.rc-tree-select')); }); + + it('support classNames and styles', () => { + const treeData = [ + { + value: 'parent 1', + title: 'parent 1', + children: [ + { + value: 'parent 1-0', + title: 'parent 1-0', + children: [ + { + value: 'leaf1', + title: 'my leaf', + }, + { + value: 'leaf2', + title: 'your leaf', + }, + ], + }, + ], + }, + ]; + const customClassNames = { + prefix: 'test-prefix', + input: 'test-input', + suffix: 'test-suffix', + item: 'test-item', + itemTitle: 'test-item-title', + }; + const customStyles = { + prefix: { color: 'green' }, + input: { color: 'blue' }, + suffix: { color: 'yellow' }, + item: { color: 'black' }, + itemTitle: { color: 'purple' }, + }; + const { container } = render( +
icon
} + placeholder="Please select" + treeDefaultExpandAll + treeData={treeData} + />, + ); + const prefix = container.querySelector('.rc-tree-select-prefix'); + const input = container.querySelector('.rc-tree-select-selection-search-input'); + const suffix = container.querySelector('.rc-tree-select-arrow'); + const itemTitle = container.querySelector('.rc-tree-select-tree-title'); + const item = container.querySelector(`.${customClassNames.item}`); + expect(prefix).toHaveClass(customClassNames.prefix); + expect(input).toHaveClass(customClassNames.input); + expect(suffix).toHaveClass(customClassNames.suffix); + expect(itemTitle).toHaveClass(customClassNames.itemTitle); + + expect(prefix).toHaveStyle(customStyles.prefix); + expect(input).toHaveStyle(customStyles.input); + expect(suffix).toHaveStyle(customStyles.suffix); + expect(itemTitle).toHaveStyle(customStyles.itemTitle); + expect(item).toHaveStyle(customStyles.item); + }); });