feat: Cascader support expandIcon API (#2528)

content/input/cascader/index-en-US.md

@@ -1835,6 +1835,7 @@ function Demo() {
 | dropdownClassName  | ClassName property for the drop-down menu                                                                                                                                                                                                     | string | - | - |
 | dropdownMargin | Popup layer calculates the size of the safe area when the current direction overflows, used in scenes covered by fixed elements, more detail refer to [issue#549](https://github.com/DouyinFE/semi-design/issues/549), same as Tooltip margin | object\|number | - | 2.25.0 |
 | dropdownStyle | Inline style of drop-down menu                                                                                                                                                                                                                | object  | - | -  |
+| expandIcon | customize expand icon | ReactNode | - | 2.68.0 |
 | emptyContent | Content displayed when the search has no result                                                                                                                                                                                               | ReactNode | `No result`  | - |
 | filterLeafOnly | Whether the search results only show the path of leaf nodes                                                                                                                                                                                   | boolean  | true | 1.26.0  |
 | filterRender | Used to render filtered options                                                                                                                                                                                                               | (props: FilterRenderProps) => ReactNode; | - | 2.28.0 |

content/input/cascader/index.md

@@ -1817,6 +1817,7 @@ function Demo() {
 | dropdownMargin       | 下拉菜单计算溢出时的增加的冗余值，详见[issue#549](https://github.com/DouyinFE/semi-design/issues/549)，作用同 Tooltip margin                                               | object\|number                                                                            | -                              | 2.25.0 |
 | dropdownClassName    | 下拉菜单的 className 属性                                                                                                                                  | string                                                                                    | -                              | -      |
 | dropdownStyle        | 下拉菜单的样式                                                                                                                                             | object                                                                                    | -                              | -      |
+| expandIcon | 自定义展开 icon | ReactNode | - | 2.68.0 |
 | emptyContent         | 当搜索无结果时展示的内容                                                                                                                                        | ReactNode                                                                                 | `暂无数据`                     | -      |
 | filterLeafOnly       | 搜索结果是否只展示叶子结点路径                                                                                                                                     | boolean                                                                                   | true                           | 1.26.0 |
 | filterRender         | 自定义渲染筛选后的选项                                                                                                                                         | (props: FilterRenderProps) => ReactNode;                                                  | -                              | 2.28.0 |

packages/semi-ui/cascader/_story/cascader.stories.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useEffect, useRef, useMemo } from 'react';
 import CustomTrigger from './CustomTrigger';
-import { IconChevronDown, IconClose, IconGift } from '@douyinfe/semi-icons';
+import { IconChevronDown, IconClose, IconGift, IconTreeTriangleRight  } from '@douyinfe/semi-icons';
 import { Button, Typography, Toast, Cascader, Checkbox, Input, Tag, TagInput } from '../../index';
 
 const { Text } = Typography;
@@ -2428,3 +2428,18 @@ export const EmptyContent = () => {
     <br />
   </>)
 }
+
+export const CustomExpandIcon = () => {
+  const expandIcon = <IconTreeTriangleRight style={{ color: 'var(--semi-color-text-1)'}} />
+  return (
+    <>
+      <Cascader
+        expandIcon={expandIcon}
+        style={{ width: 400 }}
+        treeData={treeData2}
+        placeholder="custom expandIcon"
+        filterTreeNode
+      />
+    </>
+  );
+}

packages/semi-ui/cascader/index.tsx

@@ -57,6 +57,7 @@ export interface CascaderProps extends BasicCascaderProps {
     'aria-label'?: React.AriaAttributes['aria-label'];
     arrowIcon?: ReactNode;
     clearIcon?: ReactNode;
+    expandIcon?: ReactNode;
     defaultValue?: Value;
     dropdownStyle?: CSSProperties;
     dropdownMargin?: PopoverProps['margin'];
@@ -703,7 +704,8 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             showNext,
             multiple,
             filterRender,
-            virtualizeInSearch
+            virtualizeInSearch,
+            expandIcon
         } = this.props;
         const searchable = Boolean(filterTreeNode) && isSearching;
         const popoverCls = cls(dropdownClassName, `${prefixcls}-popover`);
@@ -732,6 +734,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                     halfCheckedKeys={halfCheckedKeys}
                     filterRender={filterRender}
                     virtualize={virtualizeInSearch}
+                    expandIcon={expandIcon}
                 />
                 {bottomSlot}
             </div>

packages/semi-ui/cascader/item.tsx

@@ -77,7 +77,8 @@ export interface CascaderItemProps {
     checkedKeys: Set<string>;
     halfCheckedKeys: Set<string>;
     filterRender?: (props: FilterRenderProps) => ReactNode;
-    virtualize?: Virtualize
+    virtualize?: Virtualize;
+    expandIcon?: ReactNode;
 }
 
 const prefixcls = cssClasses.PREFIX_OPTION;
@@ -98,7 +99,8 @@ export default class Item extends PureComponent<CascaderItemProps> {
         onItemCheckboxClick: PropTypes.func,
         separator: PropTypes.string,
         keyword: PropTypes.string,
-        virtualize: PropTypes.object
+        virtualize: PropTypes.object,
+        expandIcon: PropTypes.node,
     };
 
     static defaultProps = {
@@ -165,6 +167,10 @@ export default class Item extends PureComponent<CascaderItemProps> {
         };
         switch (type) {
             case 'child':
+                const { expandIcon } = this.props;
+                if (expandIcon) {
+                    return expandIcon;
+                }
                 return (<IconChevronRight className={finalCls(`${prefixcls}-icon ${prefixcls}-icon-expand`)} />);
             case 'tick':
                 return (<IconTick className={finalCls(`${prefixcls}-icon ${prefixcls}-icon-active`)} />);