Merge pull request #2663 from XiaoMi/feature/2662(radio)

feat(radio): feat: add autoWidth api (#2662)
XiaoMi · Nov 16, 2023 · be7fc59 · be7fc59
2 parents b587be1 + 9a46f8e
commit be7fc59
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 0 deletions.
diff --git a/.changeset/proud-tools-buy.md b/.changeset/proud-tools-buy.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/radio": minor
+---
+
+feat: add autoWidth api
diff --git a/.changeset/thin-ladybugs-joke.md b/.changeset/thin-ladybugs-joke.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+Radio feat: add autoWidth api
diff --git a/packages/ui/radio/src/RadioGroup.tsx b/packages/ui/radio/src/RadioGroup.tsx
@@ -22,6 +22,7 @@ export const RadioGroup = forwardRef<HTMLDivElement | null, RadioGroupProps>(
       data,
       type = RadioGroupTypeEnum.DEFAULT,
       placement = RadioGroupPlacementEnum.HORIZONTAL,
+      autoWidth = false,
       ...rest
     },
     ref
@@ -63,6 +64,7 @@ export const RadioGroup = forwardRef<HTMLDivElement | null, RadioGroupProps>(
       prefixCls,
       className,
       `${prefixCls}--placement-${placement}`,
+      autoWidth && type === RadioGroupTypeEnum.BUTTON && `${prefixCls}--auto-width`,
       `${prefixCls}--type-${type}`,
       hasData && `${prefixCls}--data-wrap`
     )
@@ -90,6 +92,11 @@ export interface RadioGroupProps extends HiBaseHTMLFieldProps<'div'>, UseRadioGr
    * 设置水平或垂直展示
    */
   placement?: RadioGroupPlacementEnum
+  /**
+   * 宽度是否自适应
+   * @default false
+   */
+  autoWidth?: boolean
 }
 
 if (__DEV__) {

diff --git a/packages/ui/radio/src/styles/radio.scss b/packages/ui/radio/src/styles/radio.scss
@@ -175,6 +175,15 @@ $label-class: '#{$prefix}__label' !default;
       align-items: center;
     }
 
+    &.#{$prefix}-group--auto-width {
+      display: flex;
+
+      .#{$prefix}--type-button {
+        flex: 1;
+        justify-content: center;
+      }
+    }
+
     .#{$prefix}--type-button {
       &::after {
         content: '';

diff --git a/packages/ui/radio/stories/auto-width.stories.tsx b/packages/ui/radio/stories/auto-width.stories.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import Radio from '../src'
+
+/**
+ * @title 宽度自适应
+ * @desc 仅支持横向按钮组
+ */
+export const AutoWidth = () => {
+  const RadioGroup = Radio.Group
+
+  const [data] = React.useState([
+    {
+      id: 0,
+      title: '手机类',
+    },
+    {
+      id: 1,
+      title: '电脑类',
+    },
+    {
+      id: 2,
+      title: '生活类',
+    },
+    {
+      id: 3,
+      title: '其它',
+    },
+    {
+      id: 4,
+      title: '禁用未选',
+      disabled: true,
+    },
+  ])
+
+  return (
+    <>
+      <h1>AutoWidth</h1>
+      <div className="radio-auto-width__wrap">
+        <div>
+          <RadioGroup
+            defaultValue={0}
+            type={'button'}
+            data={data}
+            autoWidth={true}
+            onChange={(value) => {
+              console.log('onChange', value)
+            }}
+          />
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/radio/stories/index.stories.tsx b/packages/ui/radio/stories/index.stories.tsx
@@ -8,6 +8,7 @@ export * from './group.stories'
 export * from './placement.stories'
 export * from './children.stories'
 export * from './button.stories'
+export * from './auto-width.stories'
 
 export default {
   title: 'Data Input/Radio',