Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d21beac

Browse files
authored
feat: support htmlTitle for label (#19)
1 parent 7f9939f commit d21beac

File tree

5 files changed

+221
-6
lines changed

5 files changed

+221
-6
lines changed

‎docs/demo/html-title.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## html-title
2+
3+
<code src="../examples/html-title.tsx">

‎docs/examples/html-title.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import '../../assets/style.less';
2+
import React from 'react';
3+
import Segmented from 'rc-segmented';
4+
5+
export default function App() {
6+
return (
7+
<div>
8+
<div className="wrapper">
9+
<Segmented options={['iOS', 'Android', 'Web']} />
10+
</div>
11+
<div className="wrapper">
12+
<Segmented
13+
options={[
14+
{
15+
label: 'iOS',
16+
value: 'iOS',
17+
},
18+
{
19+
label: 'Android',
20+
value: 'Android',
21+
title: 'Android12',
22+
},
23+
{
24+
label: <h3>Web</h3>,
25+
value: 'Web',
26+
},
27+
]}
28+
/>
29+
</div>
30+
<div className="wrapper">
31+
<Segmented
32+
options={[
33+
{ label: 'iOS', value: 'iOS', title: 'IOS' },
34+
{ label: 'Android', value: 'Android', title: '' },
35+
{ label: <h1>Web</h1>, value: 'Web', title: 'WEB' },
36+
]}
37+
/>
38+
</div>
39+
</div>
40+
);
41+
}

‎src/index.tsx‎

Lines changed: 38 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ export interface SegmentedLabeledOption {
1414
disabled?: boolean;
1515
label: React.ReactNode;
1616
value: SegmentedRawOption;
17+
/**
18+
* html `title` property for label
19+
*/
20+
title?: string;
1721
}
1822

1923
type SegmentedOptions = (SegmentedRawOption | SegmentedLabeledOption)[];
@@ -33,13 +37,31 @@ export interface SegmentedProps extends React.HTMLProps<HTMLDivElement> {
3337
motionName?: string;
3438
}
3539

40+
function getValidTitle(option: SegmentedLabeledOption) {
41+
if (typeof option.title !== 'undefined') {
42+
return option.title;
43+
}
44+
45+
// read `label` when title is `undefined`
46+
if (typeof option.label !== 'object') {
47+
return option.label?.toString();
48+
}
49+
}
50+
3651
function normalizeOptions(options: SegmentedOptions): SegmentedLabeledOption[] {
3752
return options.map((option) => {
38-
if (typeof option === 'object') {
39-
return option || {};
53+
if (typeof option === 'object' && option !== null) {
54+
const validTitle = getValidTitle(option);
55+
56+
return {
57+
...option,
58+
title: validTitle,
59+
};
4060
}
61+
4162
return {
4263
label: option?.toString(),
64+
title: option?.toString(),
4365
value: option,
4466
};
4567
});
@@ -56,12 +78,22 @@ const InternalSegmentedOption: React.FC<{
5678
disabled?: boolean;
5779
checked: boolean;
5880
label: React.ReactNode;
81+
title?: string;
5982
value: SegmentedRawOption;
6083
onChange: (
6184
e: React.ChangeEvent<HTMLInputElement>,
6285
value: SegmentedRawOption,
6386
) => void;
64-
}> = ({ prefixCls, className, disabled, checked, label, value, onChange }) => {
87+
}> = ({
88+
prefixCls,
89+
className,
90+
disabled,
91+
checked,
92+
label,
93+
title,
94+
value,
95+
onChange,
96+
}) => {
6597
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
6698
if (disabled) {
6799
return;
@@ -83,7 +115,9 @@ const InternalSegmentedOption: React.FC<{
83115
checked={checked}
84116
onChange={handleChange}
85117
/>
86-
<div className={`${prefixCls}-item-label`}>{label}</div>
118+
<div className={`${prefixCls}-item-label`} title={title}>
119+
{label}
120+
</div>
87121
</label>
88122
);
89123
};

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /