Skip to content

Commit 8ef983a

Browse files
authored
feat: support classNames and styles (#638)
* draft * save
1 parent f0d4350 commit 8ef983a

File tree

5 files changed

+93
-2
lines changed

5 files changed

+93
-2
lines changed

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@
4545
},
4646
"dependencies": {
4747
"classnames": "2.x",
48-
"@rc-component/select": "~1.0.0",
49-
"@rc-component/tree": "~1.0.0",
48+
"@rc-component/select": "~1.0.2",
49+
"@rc-component/tree": "~1.0.1",
5050
"@rc-component/util": "^1.2.1"
5151
},
5252
"devDependencies": {

src/OptionList.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
5050
leftMaxCount,
5151
leafCountOnly,
5252
valueEntities,
53+
classNames: treeClassNames,
54+
styles,
5355
} = React.useContext(TreeSelectContext);
5456

5557
const {
@@ -342,6 +344,8 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
342344
)}
343345
<UnstableContext.Provider value={{ nodeDisabled }}>
344346
<Tree
347+
classNames={treeClassNames}
348+
styles={styles}
345349
ref={treeRef}
346350
focusable={false}
347351
prefixCls={`${prefixCls}-tree`}

src/TreeSelect.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,9 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
174174
treeTitleRender,
175175

176176
onPopupScroll,
177+
178+
classNames: treeSelectClassNames,
179+
styles,
177180
...restProps
178181
} = props;
179182

@@ -623,6 +626,8 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
623626
leafCountOnly:
624627
mergedShowCheckedStrategy === 'SHOW_CHILD' && !treeCheckStrictly && !!treeCheckable,
625628
valueEntities,
629+
classNames: treeSelectClassNames,
630+
styles,
626631
};
627632
}, [
628633
virtual,
@@ -642,6 +647,8 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
642647
treeCheckStrictly,
643648
treeCheckable,
644649
valueEntities,
650+
treeSelectClassNames,
651+
styles,
645652
]);
646653

647654
// ======================= Legacy Context =======================
@@ -693,6 +700,16 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
693700
<BaseSelect
694701
ref={ref}
695702
{...restProps}
703+
classNames={{
704+
prefix: treeSelectClassNames?.prefix,
705+
suffix: treeSelectClassNames?.suffix,
706+
input: treeSelectClassNames?.input,
707+
}}
708+
styles={{
709+
prefix: styles?.prefix,
710+
suffix: styles?.suffix,
711+
input: styles?.input,
712+
}}
696713
// >>> MISC
697714
id={mergedId}
698715
prefixCls={prefixCls}

src/TreeSelectContext.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { ExpandAction } from '@rc-component/tree/lib/Tree';
33
import type { DataNode, FieldNames, Key } from './interface';
44
import type useDataEntities from './hooks/useDataEntities';
55

6+
export type SemanticName = 'item' | 'itemTitle' | 'input' | 'prefix' | 'suffix';
67
export interface TreeSelectContextProps {
78
virtual?: boolean;
89
popupMatchSelectWidth?: boolean | number;
@@ -21,6 +22,8 @@ export interface TreeSelectContextProps {
2122
/** When `true`, only take leaf node as count, or take all as count with `maxCount` limitation */
2223
leafCountOnly: boolean;
2324
valueEntities: ReturnType<typeof useDataEntities>['valueEntities'];
25+
styles?: Partial<Record<SemanticName, React.CSSProperties>>;
26+
classNames?: Partial<Record<SemanticName, string>>;
2427
}
2528

2629
const TreeSelectContext = React.createContext<TreeSelectContextProps>(null as any);

tests/Select.spec.tsx

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -638,4 +638,71 @@ describe('TreeSelect.basic', () => {
638638
const { container } = render(<TreeSelect ref={treeSelectRef} />);
639639
expect(treeSelectRef.current.nativeElement).toBe(container.querySelector('.rc-tree-select'));
640640
});
641+
642+
it('support classNames and styles', () => {
643+
const treeData = [
644+
{
645+
value: 'parent 1',
646+
title: 'parent 1',
647+
children: [
648+
{
649+
value: 'parent 1-0',
650+
title: 'parent 1-0',
651+
children: [
652+
{
653+
value: 'leaf1',
654+
title: 'my leaf',
655+
},
656+
{
657+
value: 'leaf2',
658+
title: 'your leaf',
659+
},
660+
],
661+
},
662+
],
663+
},
664+
];
665+
const customClassNames = {
666+
prefix: 'test-prefix',
667+
input: 'test-input',
668+
suffix: 'test-suffix',
669+
item: 'test-item',
670+
itemTitle: 'test-item-title',
671+
};
672+
const customStyles = {
673+
prefix: { color: 'green' },
674+
input: { color: 'blue' },
675+
suffix: { color: 'yellow' },
676+
item: { color: 'black' },
677+
itemTitle: { color: 'purple' },
678+
};
679+
const { container } = render(
680+
<TreeSelect
681+
classNames={customClassNames}
682+
styles={customStyles}
683+
showSearch
684+
prefix="Prefix"
685+
open
686+
suffixIcon={() => <div>icon</div>}
687+
placeholder="Please select"
688+
treeDefaultExpandAll
689+
treeData={treeData}
690+
/>,
691+
);
692+
const prefix = container.querySelector('.rc-tree-select-prefix');
693+
const input = container.querySelector('.rc-tree-select-selection-search-input');
694+
const suffix = container.querySelector('.rc-tree-select-arrow');
695+
const itemTitle = container.querySelector('.rc-tree-select-tree-title');
696+
const item = container.querySelector(`.${customClassNames.item}`);
697+
expect(prefix).toHaveClass(customClassNames.prefix);
698+
expect(input).toHaveClass(customClassNames.input);
699+
expect(suffix).toHaveClass(customClassNames.suffix);
700+
expect(itemTitle).toHaveClass(customClassNames.itemTitle);
701+
702+
expect(prefix).toHaveStyle(customStyles.prefix);
703+
expect(input).toHaveStyle(customStyles.input);
704+
expect(suffix).toHaveStyle(customStyles.suffix);
705+
expect(itemTitle).toHaveStyle(customStyles.itemTitle);
706+
expect(item).toHaveStyle(customStyles.item);
707+
});
641708
});

0 commit comments

Comments
 (0)