feat(SelectCard): support icon for option

yuntijs · Aug 12, 2024 · a6b83ee · a6b83ee
1 parent 23f3a49
commit a6b83ee
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 14 deletions.
diff --git a/src/SelectCard/demos/SelectWithImg.tsx b/src/SelectCard/demos/SelectWithImg.tsx
@@ -1,3 +1,4 @@
+import { AntDesignOutlined } from '@ant-design/icons';
 import { Flex, Segmented, SelectCard, SelectCardProps } from '@yuntijs/ui';
 import { useState } from 'react';
 
@@ -30,7 +31,12 @@ const SelectWithImgDemo = () => {
             img: 'https://avatars.githubusercontent.com/u/148947838',
             value: 'yunti-ui',
           },
-          { label: 'test', description: 'test desc', value: 'test' },
+          {
+            label: 'icon',
+            icon: <AntDesignOutlined />,
+            iconStyle: { backgroundColor: '#1677ff' },
+            value: 'icon',
+          },
         ]}
         size={size}
       />

diff --git a/src/SelectCard/index.md b/src/SelectCard/index.md
@@ -12,7 +12,7 @@ A card display select, support multiple select and `optionRender`.
 
 <code src="./demos/index.tsx"></code>
 
-### Select with img
+### Select with img or icon
 
 <code src="./demos/SelectWithImg.tsx"></code>
 

diff --git a/src/SelectCard/index.tsx b/src/SelectCard/index.tsx
@@ -11,12 +11,13 @@ const { Text, Paragraph } = Typography;
 type RawValue = string | number;
 type Value = RawValue | RawValue[];
 export interface SelectCardOption {
-  className?: string;
   value: RawValue;
-  img?: string;
+  img?: React.ReactNode;
+  icon?: React.ReactNode;
+  iconStyle?: React.CSSProperties;
   label?: React.ReactNode;
   description?: React.ReactNode;
-  [name: string]: any;
+  style?: React.CSSProperties;
 }
 
 export interface SelectCardProps
@@ -35,9 +36,11 @@ export interface SelectCardProps
   ) => React.ReactNode;
   classNames?: {
     card?: string;
+    icon?: string;
   };
   styles?: {
     card?: React.CSSProperties;
+    icon?: React.CSSProperties;
   };
 }
 
@@ -55,7 +58,7 @@ export const SelectCard = React.forwardRef<HTMLDivElement, SelectCardProps>((pro
     optionRender,
     ...otherProps
   } = props;
-  const isImg = useMemo(() => options.some(o => !!o.img), [options]);
+  const isImg = useMemo(() => options.some(o => !!o.img || !!o.icon), [options]);
   const { cx, styles } = useStyles({ disabled, size });
   const { imgHeight } = useMemo(() => getNumberBySize(size), [size]);
 
@@ -107,19 +110,23 @@ export const SelectCard = React.forwardRef<HTMLDivElement, SelectCardProps>((pro
       const Option = (
         <Flex
           align={isImg ? 'center' : 'flex-start'}
-          className={cx(
-            styles.option,
-            selected && styles.optionSelected,
-            classNames?.card,
-            o.className
-          )}
+          className={cx(styles.option, selected && styles.optionSelected, classNames?.card)}
           gap="small"
           key={o.value}
           onClick={() => onSelect(o.value)}
-          style={stylesFromProps?.card}
+          style={{ ...stylesFromProps?.card, ...o.style }}
           vertical
         >
-          {isImg && <Avatar shape="square" size={imgHeight} src={o.img} />}
+          {isImg && (
+            <Avatar
+              className={classNames?.icon}
+              icon={o.icon}
+              shape="square"
+              size={imgHeight}
+              src={o.img}
+              style={{ ...stylesFromProps?.icon, ...o.iconStyle }}
+            />
+          )}
           {o.label && (
             <Text ellipsis strong>
               {o.label}
@@ -137,6 +144,7 @@ export const SelectCard = React.forwardRef<HTMLDivElement, SelectCardProps>((pro
     },
     [
       classNames?.card,
+      classNames?.icon,
       cx,
       imgHeight,
       isImg,
@@ -148,6 +156,7 @@ export const SelectCard = React.forwardRef<HTMLDivElement, SelectCardProps>((pro
       styles.option,
       styles.optionSelected,
       stylesFromProps?.card,
+      stylesFromProps?.icon,
     ]
   );