Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Segmented value type support generics #47091

Merged
merged 7 commits into from
Jan 27, 2024
Merged

feat: Segmented value type support generics #47091

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a5b0916
feat: Segmented value type support generics
madocto Jan 22, 2024
9d99f88
fix: type
madocto Jan 22, 2024
916d63e
docs: update demo
madocto Jan 22, 2024
6f95cd6
test: update snapshots
madocto Jan 22, 2024
9ceb44a
Update components/segmented/demo/basic.tsx
afc163 Jan 26, 2024
0aeedc3
Revert "test: update snapshots"
madocto Jan 26, 2024
5549f8b
Merge branch 'feature' into feat-segmented-value-type
madocto Jan 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
26 changes: 20 additions & 6 deletions components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,9 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1`
/>
<div
class="ant-segmented-item-label"
title="Monthly"
title="2021"
>
Monthly
2021
</div>
</label>
<label
Expand All @@ -59,9 +59,9 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1`
/>
<div
class="ant-segmented-item-label"
title="Quarterly"
title="2022"
>
Quarterly
2022
</div>
</label>
<label
Expand All @@ -73,9 +73,23 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1`
/>
<div
class="ant-segmented-item-label"
title="Yearly"
title="true"
>
Yearly
true
</div>
</label>
<label
class="ant-segmented-item"
>
<input
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="false"
>
false
</div>
</label>
</div>
Expand Down
26 changes: 20 additions & 6 deletions components/segmented/__tests__/__snapshots__/demo.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,9 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = `
/>
<div
class="ant-segmented-item-label"
title="Monthly"
title="2021"
>
Monthly
2021
</div>
</label>
<label
Expand All @@ -59,9 +59,9 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = `
/>
<div
class="ant-segmented-item-label"
title="Quarterly"
title="2022"
>
Quarterly
2022
</div>
</label>
<label
Expand All @@ -73,9 +73,23 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = `
/>
<div
class="ant-segmented-item-label"
title="Yearly"
title="true"
>
Yearly
true
</div>
</label>
<label
class="ant-segmented-item"
>
<input
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="false"
>
false
</div>
</label>
</div>
Expand Down
7 changes: 6 additions & 1 deletion components/segmented/demo/basic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,12 @@ import React from 'react';
import { Segmented } from 'antd';

const Demo: React.FC = () => (
<Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
<Segmented<string | number | boolean>
options={['Daily', 'Weekly', 2021, 2022, true, false]}
onChange={(value) => {
console.log(value);
}}
/>
afc163 marked this conversation as resolved.
Show resolved Hide resolved
);

export default Demo;
27 changes: 19 additions & 8 deletions components/segmented/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import classNames from 'classnames';
import type {
SegmentedLabeledOption as RcSegmentedLabeledOption,
SegmentedProps as RCSegmentedProps,
SegmentedValue as RcSegmentedValue,
SegmentedRawOption,
} from 'rc-segmented';
import RcSegmented from 'rc-segmented';
Expand All @@ -13,11 +14,13 @@ import useStyle from './style';

export type { SegmentedValue } from 'rc-segmented';

interface SegmentedLabeledOptionWithoutIcon extends RcSegmentedLabeledOption {
interface SegmentedLabeledOptionWithoutIcon<ValueType = RcSegmentedValue>
extends RcSegmentedLabeledOption<ValueType> {
label: RcSegmentedLabeledOption['label'];
}

interface SegmentedLabeledOptionWithIcon extends Omit<RcSegmentedLabeledOption, 'label'> {
interface SegmentedLabeledOptionWithIcon<ValueType = RcSegmentedValue>
extends Omit<RcSegmentedLabeledOption<ValueType>, 'label'> {
label?: RcSegmentedLabeledOption['label'];
/** Set icon for Segmented item */
icon: React.ReactNode;
Expand All @@ -29,20 +32,23 @@ function isSegmentedLabeledOptionWithIcon(
return typeof option === 'object' && !!(option as SegmentedLabeledOptionWithIcon)?.icon;
}

export type SegmentedLabeledOption =
| SegmentedLabeledOptionWithIcon
| SegmentedLabeledOptionWithoutIcon;
export type SegmentedLabeledOption<ValueType = RcSegmentedValue> =
| SegmentedLabeledOptionWithIcon<ValueType>
| SegmentedLabeledOptionWithoutIcon<ValueType>;

export interface SegmentedProps extends Omit<RCSegmentedProps, 'size' | 'options'> {
export type SegmentedOptions<T = SegmentedRawOption> = (T | SegmentedLabeledOption<T>)[];

export interface SegmentedProps<ValueType = RcSegmentedValue>
extends Omit<RCSegmentedProps<ValueType>, 'size' | 'options'> {
rootClassName?: string;
options: (SegmentedRawOption | SegmentedLabeledOption)[];
options: SegmentedOptions<ValueType>;
/** Option to fit width to its parent's width */
block?: boolean;
/** Option to control the display size */
size?: SizeType;
}

const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>((props, ref) => {
const InternalSegmented = React.forwardRef<HTMLDivElement, SegmentedProps>((props, ref) => {
const {
prefixCls: customizePrefixCls,
className,
Expand Down Expand Up @@ -111,6 +117,11 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>((props, ref)
);
});

const Segmented = InternalSegmented as (<ValueType>(
props: SegmentedProps<ValueType> & React.RefAttributes<HTMLDivElement>,
) => ReturnType<typeof InternalSegmented>) &
Pick<React.FC, 'displayName'>;

if (process.env.NODE_ENV !== 'production') {
Segmented.displayName = 'Segmented';
}
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@
"rc-progress": "~3.5.1",
"rc-rate": "~2.12.0",
"rc-resize-observer": "^1.4.0",
"rc-segmented": "~2.2.2",
"rc-segmented": "~2.3.0",
"rc-select": "~14.11.0",
"rc-slider": "~10.5.0",
"rc-steps": "~6.0.1",
Expand Down