feat: support classNames and styles (#638)

* draft

* save

Author: thinkasany

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": {

src/OptionList.tsx

@@ -50,6 +50,8 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     leftMaxCount,
     leafCountOnly,
     valueEntities,
+    classNames: treeClassNames,
+    styles,
   } = React.useContext(TreeSelectContext);
 
   const {
@@ -342,6 +344,8 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
       )}
       <UnstableContext.Provider value={{ nodeDisabled }}>
         <Tree
+          classNames={treeClassNames}
+          styles={styles}
           ref={treeRef}
           focusable={false}
           prefixCls={`${prefixCls}-tree`}

src/TreeSelect.tsx

@@ -174,6 +174,9 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
     treeTitleRender,
 
     onPopupScroll,
+
+    classNames: treeSelectClassNames,
+    styles,
     ...restProps
   } = props;
 
@@ -623,6 +626,8 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
       leafCountOnly:
         mergedShowCheckedStrategy === 'SHOW_CHILD' && !treeCheckStrictly && !!treeCheckable,
       valueEntities,
+      classNames: treeSelectClassNames,
+      styles,
     };
   }, [
     virtual,
@@ -642,6 +647,8 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
     treeCheckStrictly,
     treeCheckable,
     valueEntities,
+    treeSelectClassNames,
+    styles,
   ]);
 
   // ======================= Legacy Context =======================
@@ -693,6 +700,16 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
         <BaseSelect
           ref={ref}
           {...restProps}
+          classNames={{
+            prefix: treeSelectClassNames?.prefix,
+            suffix: treeSelectClassNames?.suffix,
+            input: treeSelectClassNames?.input,
+          }}
+          styles={{
+            prefix: styles?.prefix,
+            suffix: styles?.suffix,
+            input: styles?.input,
+          }}
           // >>> MISC
           id={mergedId}
           prefixCls={prefixCls}

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<typeof useDataEntities>['valueEntities'];
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
+  classNames?: Partial<Record<SemanticName, string>>;
 }
 
 const TreeSelectContext = React.createContext<TreeSelectContextProps>(null as any);

tests/Select.spec.tsx

@@ -638,4 +638,71 @@ describe('TreeSelect.basic', () => {
     const { container } = render(<TreeSelect ref={treeSelectRef} />);
     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(
+      <TreeSelect
+        classNames={customClassNames}
+        styles={customStyles}
+        showSearch
+        prefix="Prefix"
+        open
+        suffixIcon={() => <div>icon</div>}
+        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);
+  });
 });