feat: new component Segmented (#6697)

* feat: new component Segmented * feat: update css vars * feat: update rc-segmented to support a11y * test: update test cases * test: update snapshot * test: update snapshot * feat: update types * chore: update pnpm lock yaml * docs: update version flag * docs: update segmented docs * docs: update segmented docs * feat: add css-var prefix
ant-design · Aug 7, 2024 · ff66628 · ff66628
1 parent 045c330
commit ff66628
Show file tree

Hide file tree

Showing 12 changed files with 1,659 additions and 1 deletion.
diff --git a/config/components.ts b/config/components.ts
@@ -27,6 +27,7 @@ export const components = {
     '/components/infinite-scroll',
     '/components/list',
     '/components/page-indicator',
+    '/components/segmented',
     '/components/steps',
     '/components/swiper',
     '/components/tag',

diff --git a/package.json b/package.json
@@ -67,6 +67,7 @@
     "deepmerge": "^4.3.1",
     "nano-memoize": "^3.0.16",
     "rc-field-form": "^1.34.2",
+    "rc-segmented": "~2.4.1",
     "rc-util": "^5.38.1",
     "react-fast-compare": "^3.2.2",
     "react-is": "^18.2.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/segmented/demos/demo1.tsx b/src/components/segmented/demos/demo1.tsx
@@ -0,0 +1,174 @@
+import React, { useState } from 'react'
+import { Avatar, Button, Segmented } from 'antd-mobile'
+import { AppOutline, UnorderedListOutline } from 'antd-mobile-icons'
+import { DemoBlock } from 'demos'
+
+const defaultOptions = ['Daily', 'Weekly', 'Monthly']
+
+export default () => {
+  const [value, setValue] = useState<string | number>('Map')
+
+  const [options, setOptions] = useState(defaultOptions)
+  const [moreLoaded, setMoreLoaded] = useState(false)
+
+  const handleLoadOptions = () => {
+    setOptions([...defaultOptions, 'Quarterly', 'Yearly'])
+    setMoreLoaded(true)
+  }
+
+  return (
+    <>
+      <DemoBlock title='基础用法'>
+        <Segmented options={['Daily', 'Weekly', 'Monthly', 'Yearly']} />
+      </DemoBlock>
+
+      <DemoBlock title='`block` 属性使其适合父元素宽度'>
+        <Segmented block options={[123, 456, 'long-long-long']} />
+      </DemoBlock>
+
+      <DemoBlock title='受控的 Segmented'>
+        <Segmented
+          options={['Map', 'Transit', 'Satellite']}
+          value={value}
+          onChange={setValue}
+        />
+      </DemoBlock>
+
+      <DemoBlock title='禁用状态 1'>
+        <Segmented
+          options={[
+            'Daily',
+            { label: 'Weekly', value: 'Weekly', disabled: true },
+            'Monthly',
+            { label: 'Yearly', value: 'Yearly', disabled: true },
+          ]}
+        />
+      </DemoBlock>
+
+      <DemoBlock title='禁用状态 2'>
+        <Segmented options={['Map', 'Transit', 'Satellite']} disabled />
+      </DemoBlock>
+
+      <DemoBlock title='动态数据'>
+        <Segmented options={options} />
+        <Button
+          style={{ marginTop: 10 }}
+          size='mini'
+          disabled={moreLoaded}
+          onClick={handleLoadOptions}
+        >
+          Load more options
+        </Button>
+      </DemoBlock>
+
+      <DemoBlock title='设置图标'>
+        <Segmented
+          options={[
+            {
+              label: 'List',
+              value: 'List',
+              icon: <UnorderedListOutline />,
+            },
+            {
+              label: 'Kanban',
+              value: 'Kanban',
+              icon: <AppOutline />,
+            },
+          ]}
+        />
+      </DemoBlock>
+
+      <DemoBlock title='只设置图标'>
+        <Segmented
+          options={[
+            {
+              value: 'List',
+              icon: <UnorderedListOutline />,
+            },
+            {
+              value: 'Kanban',
+              icon: <AppOutline />,
+            },
+          ]}
+        />
+      </DemoBlock>
+
+      <DemoBlock title='自定义渲染 1'>
+        <Segmented
+          options={[
+            {
+              label: (
+                <div style={{ padding: 4 }}>
+                  <Avatar src='https://joeschmoe.io/api/v1/random' />
+                  <div>User 1</div>
+                </div>
+              ),
+              value: 'user1',
+            },
+            {
+              label: (
+                <div style={{ padding: 4 }}>
+                  <Avatar src='https://joeschmoe.io/api/v1/random' />
+                  <div>User 2</div>
+                </div>
+              ),
+              value: 'user2',
+            },
+            {
+              label: (
+                <div style={{ padding: 4 }}>
+                  <Avatar src='https://joeschmoe.io/api/v1/random' />
+                  <div>User 3</div>
+                </div>
+              ),
+              value: 'user3',
+            },
+          ]}
+        />
+      </DemoBlock>
+
+      <DemoBlock title='自定义渲染 2'>
+        <Segmented
+          options={[
+            {
+              label: (
+                <div style={{ padding: 4 }}>
+                  <div>Spring</div>
+                  <div>Jan-Mar</div>
+                </div>
+              ),
+              value: 'spring',
+            },
+            {
+              label: (
+                <div style={{ padding: 4 }}>
+                  <div>Summer</div>
+                  <div>Apr-Jun</div>
+                </div>
+              ),
+              value: 'summer',
+            },
+            {
+              label: (
+                <div style={{ padding: 4 }}>
+                  <div>Autumn</div>
+                  <div>Jul-Sept</div>
+                </div>
+              ),
+              value: 'autumn',
+            },
+            {
+              label: (
+                <div style={{ padding: 4 }}>
+                  <div>Winter</div>
+                  <div>Oct-Dec</div>
+                </div>
+              ),
+              value: 'winter',
+            },
+          ]}
+        />
+      </DemoBlock>
+    </>
+  )
+}
diff --git a/src/components/segmented/index.en.md b/src/components/segmented/index.en.md
@@ -0,0 +1,47 @@
+# Segmented
+
+This component is available since `[email protected]`.
+
+## When To Use
+
+- When displaying multiple options and user can select a single option;
+- When switching the selected option, the content of the associated area changes.
+
+## Demos
+
+<code src="./demos/demo1.tsx"></code>
+
+## Segmented
+
+### Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| block | Option to fit width to its parent\'s width | boolean | false |
+| defaultValue | Default selected value | string \| number |  |
+| disabled | Disable all segments | boolean | false |
+| onChange | The callback function that is triggered when the state changes | function(value: string \| number) |  |
+| options | Set children optional | string\[] \| number\[] \| SegmentedItemType\[] | [] |
+| value | Currently selected value | string \| number |  |
+
+### SegmentedItemType
+
+| Property  | Description                      | Type             | Default |
+| --------- | -------------------------------- | ---------------- | ------- |
+| label     | Display text for Segmented item  | ReactNode        | -       |
+| value     | Value for Segmented item         | string \| number | -       |
+| icon      | Display icon for Segmented item  | ReactNode        | -       |
+| disabled  | Disabled state of segmented item | boolean          | false   |
+| className | The additional css class         | string           | -       |
+
+### CSS Variables
+
+| Name | Description | Default |
+| --- | --- | --- |
+| Name | Description | Default |
+| ------------------- | ---------------------- | ----------------------- |
+| --segmented-background | Background color | `var(--adm-color-fill-content)` |
+| --segmented-item-color | Text color of segment item | `var(--adm-color-text-secondary)` |
+| --segmented-item-selected-background | Background color of selected segment | `var(--adm-color-background)` |
+| --segmented-item-selected-color | Text color of selected segment item | `var(--adm-color-text)` |
+| --segmented-item-disabled-color | Text color of disabled segment item | `var(--adm-color-weak)` |
diff --git a/src/components/segmented/index.ts b/src/components/segmented/index.ts
@@ -0,0 +1,6 @@
+import './segmented.less'
+import { Segmented } from './segmented'
+
+export type { SegmentedProps, SegmentedValue } from './segmented'
+
+export default Segmented
diff --git a/src/components/segmented/index.zh.md b/src/components/segmented/index.zh.md
@@ -0,0 +1,45 @@
+# Segmented 分段控制器
+
+分段控制器。自 `[email protected]` 版本开始提供该组件。
+
+## 何时使用
+
+- 用于展示多个选项并允许用户选择其中单个选项；
+- 当切换选中选项时，关联区域的内容会发生变化。
+
+## 示例
+
+<code src="./demos/demo1.tsx"></code>
+
+## Segmented
+
+### 属性
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| block | 将宽度调整为父元素宽度的选项 | boolean | false |
+| defaultValue | 默认选中的值 | string \| number |  |
+| disabled | 是否禁用 | boolean | false |
+| onChange | 选项变化时的回调函数 | function(value: string \| number) |  |
+| options | 数据化配置选项内容 | string\[] \| number\[] \| SegmentedItemType\[] | [] |
+| value | 当前选中的值 | string \| number |  |
+
+### SegmentedItemType
+
+| 属性      | 描述             | 类型             | 默认值 |
+| --------- | ---------------- | ---------------- | ------ |
+| label     | 分段项的显示文本 | ReactNode        | -      |
+| value     | 分段项的值       | string \| number | -      |
+| icon      | 分段项的显示图标 | ReactNode        | -      |
+| disabled  | 分段项的禁用状态 | boolean          | false  |
+| className | 自定义类名       | string           | -      |
+
+### CSS 变量
+
+| 属性 | 说明 | 默认值 |
+| --- | --- | --- |
+| --segmented-background | 背景色 | `var(--adm-color-fill-content)` |
+| --segmented-item-color | 分段项的文本颜色 | `var(--adm-color-text-secondary)` |
+| --segmented-item-selected-background | 被选中分段的背景色 | `var(--adm-color-background)` |
+| --segmented-item-selected-color | 被选中分段项的文本颜色 | `var(--adm-color-text)` |
+| --segmented-item-disabled-color | 禁用分段项的文本颜色 | `var(--adm-color-weak)` |