feat: (Selector) add description prop to SelectorOption

ant-design · Jan 7, 2022 · 91d3c7f · 91d3c7f
1 parent dbc1183
commit 91d3c7f
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 20 deletions.
diff --git a/src/components/selector/demos/demo1.tsx b/src/components/selector/demos/demo1.tsx
@@ -93,6 +93,25 @@ export default () => {
         <RadioMode />
       </DemoBlock>
 
+      <DemoBlock title='选项带描述'>
+        <Selector
+          columns={2}
+          options={[
+            {
+              label: '选项一',
+              description: '描述信息',
+              value: '1',
+            },
+            {
+              label: '选项二',
+              description: '描述信息',
+              value: '2',
+            },
+          ]}
+          defaultValue={['1']}
+        />
+      </DemoBlock>
+
       <DemoBlock title='自定义样式（通过 style）'>
         <Selector
           style={{ '--checked-color': '#ffe2e5' }}

diff --git a/src/components/selector/index.en.md b/src/components/selector/index.en.md
@@ -10,23 +10,24 @@ type SelectorValue = string | number
 
 ## Selector
 
-| Name         | Description                             | Type                                                                    | Default |
-| ------------ | --------------------------------------- | ----------------------------------------------------------------------- | ------- |
-| value        | Selected value                          | `SelectorValue[]`                                                       | -       |
-| defaultValue | Selected value by default               | `SelectorValue[]`                                                       | `[]`    |
-| columns      | Number of the displayed columns         | `number`                                                                | -       |
-| options      | Optional selector                       | `SelectorOption[]`                                                      | -       |
-| multiple     | Whether to allow multiple selections    | `boolean`                                                               | `false` |
-| disabled     | Whether to disable selecting | `boolean`                                                               | `false` |
-| onChange     | Triggered when the value is changed     | `(value: SelectorValue[], extend: { items: SelectorOption[] }) => void` | -       |
+| Name         | Description                          | Type                                                                    | Default |
+| ------------ | ------------------------------------ | ----------------------------------------------------------------------- | ------- |
+| value        | Selected value                       | `SelectorValue[]`                                                       | -       |
+| defaultValue | Selected value by default            | `SelectorValue[]`                                                       | `[]`    |
+| columns      | Number of the displayed columns      | `number`                                                                | -       |
+| options      | Optional selector                    | `SelectorOption[]`                                                      | -       |
+| multiple     | Whether to allow multiple selections | `boolean`                                                               | `false` |
+| disabled     | Whether to disable selecting         | `boolean`                                                               | `false` |
+| onChange     | Triggered when the value is changed  | `(value: SelectorValue[], extend: { items: SelectorOption[] }) => void` | -       |
 
 ## SelectorOption
 
-| Name     | Description         | Type            | Default |
-| -------- | ------------------- | --------------- | ------- |
-| label    | Label text          | `string`        | -       |
-| value    | Value of the option | `SelectorValue` | -       |
-| disabled | Whether disabled    | `boolean`       | `false` |
+| Name        | Description         | Type            | Default |
+| ----------- | ------------------- | --------------- | ------- |
+| label       | Label text          | `ReactNode`     | -       |
+| description | Description text    | `ReactNode`     | -       |
+| value       | Value of the option | `SelectorValue` | -       |
+| disabled    | Whether disabled    | `boolean`       | `false` |
 
 ## Generics
 

diff --git a/src/components/selector/index.zh.md b/src/components/selector/index.zh.md
@@ -22,11 +22,12 @@ type SelectorValue = string | number
 
 ## SelectorOption
 
-| 属性     | 说明     | 类型            | 默认值  |
-| -------- | -------- | --------------- | ------- |
-| label    | 文字     | `string`        | -       |
-| value    | 选项的值 | `SelectorValue` | -       |
-| disabled | 是否禁用 | `boolean`       | `false` |
+| 属性        | 说明     | 类型            | 默认值  |
+| ----------- | -------- | --------------- | ------- |
+| label       | 文字     | `ReactNode`     | -       |
+| description | 描述     | `ReactNode`     | -       |
+| value       | 选项的值 | `SelectorValue` | -       |
+| disabled    | 是否禁用 | `boolean`       | `false` |
 
 ## 泛型
 

diff --git a/src/components/selector/selector.less b/src/components/selector/selector.less
@@ -9,7 +9,7 @@
   line-height: 1.4;
 
   &-item {
-    padding: 8px;
+    padding: 8px 16px;
     position: relative;
     background-color: #f5f5f5;
     border-radius: 2px;
@@ -21,6 +21,11 @@
     overflow: hidden;
     vertical-align: top;
 
+    &-description {
+      font-size: 13px;
+      color: var(--adm-color-weak);
+    }
+
     &-active,
     &-multiple-active {
       color: var(--adm-color-primary);

diff --git a/src/components/selector/selector.tsx b/src/components/selector/selector.tsx
@@ -14,6 +14,7 @@ type SelectorValue = string | number
 
 export interface SelectorOption<V> {
   label: ReactNode
+  description?: ReactNode
   value: V
   disabled?: boolean
 }
@@ -77,6 +78,11 @@ export const Selector = <V extends SelectorValue>(p: SelectorProps<V>) => {
         }}
       >
         {option.label}
+        {option.description && (
+          <div className={`${classPrefix}-item-description`}>
+            {option.description}
+          </div>
+        )}
         {active && (
           <div className={`${classPrefix}-check-mark-wrapper`}>
             <CheckMark />