2022-04-11 11:13:16 +08:00
|
|
|
import classNames from 'classnames';
|
|
|
|
import type {
|
2022-06-21 10:24:52 +08:00
|
|
|
SegmentedLabeledOption as RcSegmentedLabeledOption,
|
2022-04-11 11:13:16 +08:00
|
|
|
SegmentedProps as RCSegmentedProps,
|
|
|
|
SegmentedRawOption,
|
|
|
|
} from 'rc-segmented';
|
2022-06-21 10:24:52 +08:00
|
|
|
import RcSegmented from 'rc-segmented';
|
2023-05-05 20:52:44 +08:00
|
|
|
import React from 'react';
|
2022-04-11 11:13:16 +08:00
|
|
|
|
|
|
|
import { ConfigContext } from '../config-provider';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type { SizeType } from '../config-provider/SizeContext';
|
|
|
|
import SizeContext from '../config-provider/SizeContext';
|
2022-04-11 11:13:16 +08:00
|
|
|
|
2022-05-11 19:35:00 +08:00
|
|
|
import useStyle from './style';
|
|
|
|
|
2022-04-11 11:13:16 +08:00
|
|
|
export type { SegmentedValue } from 'rc-segmented';
|
|
|
|
|
2022-04-28 19:39:52 +08:00
|
|
|
interface SegmentedLabeledOptionWithoutIcon extends RcSegmentedLabeledOption {
|
|
|
|
label: RcSegmentedLabeledOption['label'];
|
|
|
|
}
|
|
|
|
|
|
|
|
interface SegmentedLabeledOptionWithIcon extends Omit<RcSegmentedLabeledOption, 'label'> {
|
|
|
|
label?: RcSegmentedLabeledOption['label'];
|
2022-04-11 11:13:16 +08:00
|
|
|
/** Set icon for Segmented item */
|
2022-04-28 19:39:52 +08:00
|
|
|
icon: React.ReactNode;
|
2022-04-11 11:13:16 +08:00
|
|
|
}
|
|
|
|
|
2022-04-28 19:39:52 +08:00
|
|
|
function isSegmentedLabeledOptionWithIcon(
|
|
|
|
option: SegmentedRawOption | SegmentedLabeledOptionWithIcon | SegmentedLabeledOptionWithoutIcon,
|
|
|
|
): option is SegmentedLabeledOptionWithIcon {
|
|
|
|
return typeof option === 'object' && !!(option as SegmentedLabeledOptionWithIcon)?.icon;
|
|
|
|
}
|
|
|
|
|
|
|
|
export type SegmentedLabeledOption =
|
|
|
|
| SegmentedLabeledOptionWithIcon
|
|
|
|
| SegmentedLabeledOptionWithoutIcon;
|
|
|
|
|
|
|
|
export interface SegmentedProps extends Omit<RCSegmentedProps, 'size' | 'options'> {
|
2023-01-20 11:03:50 +08:00
|
|
|
rootClassName?: string;
|
2022-04-11 11:13:16 +08:00
|
|
|
options: (SegmentedRawOption | SegmentedLabeledOption)[];
|
|
|
|
/** 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 {
|
|
|
|
prefixCls: customizePrefixCls,
|
|
|
|
className,
|
2023-01-20 11:03:50 +08:00
|
|
|
rootClassName,
|
2022-04-11 11:13:16 +08:00
|
|
|
block,
|
2022-09-30 17:44:24 +08:00
|
|
|
options = [],
|
2022-04-11 11:13:16 +08:00
|
|
|
size: customSize = 'middle',
|
|
|
|
...restProps
|
|
|
|
} = props;
|
|
|
|
|
|
|
|
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
|
|
|
const prefixCls = getPrefixCls('segmented', customizePrefixCls);
|
2022-05-11 19:35:00 +08:00
|
|
|
// Style
|
|
|
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
2022-04-11 11:13:16 +08:00
|
|
|
|
|
|
|
// ===================== Size =====================
|
|
|
|
const size = React.useContext(SizeContext);
|
|
|
|
const mergedSize = customSize || size;
|
|
|
|
|
|
|
|
// syntactic sugar to support `icon` for Segmented Item
|
2022-09-30 17:44:24 +08:00
|
|
|
const extendedOptions = React.useMemo<RCSegmentedProps['options']>(
|
2022-04-11 11:13:16 +08:00
|
|
|
() =>
|
2022-11-19 13:47:33 +08:00
|
|
|
options.map((option) => {
|
2022-04-28 19:39:52 +08:00
|
|
|
if (isSegmentedLabeledOptionWithIcon(option)) {
|
2022-04-11 11:13:16 +08:00
|
|
|
const { icon, label, ...restOption } = option;
|
|
|
|
return {
|
|
|
|
...restOption,
|
|
|
|
label: (
|
|
|
|
<>
|
|
|
|
<span className={`${prefixCls}-item-icon`}>{icon}</span>
|
2022-04-28 19:39:52 +08:00
|
|
|
{label && <span>{label}</span>}
|
2022-04-11 11:13:16 +08:00
|
|
|
</>
|
|
|
|
),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
return option;
|
|
|
|
}),
|
|
|
|
[options, prefixCls],
|
|
|
|
);
|
|
|
|
|
2022-05-11 19:35:00 +08:00
|
|
|
return wrapSSR(
|
2022-04-11 11:13:16 +08:00
|
|
|
<RcSegmented
|
|
|
|
{...restProps}
|
2022-05-11 19:35:00 +08:00
|
|
|
className={classNames(
|
|
|
|
className,
|
2023-01-20 11:03:50 +08:00
|
|
|
rootClassName,
|
2022-05-11 19:35:00 +08:00
|
|
|
{
|
|
|
|
[`${prefixCls}-block`]: block,
|
|
|
|
[`${prefixCls}-sm`]: mergedSize === 'small',
|
|
|
|
[`${prefixCls}-lg`]: mergedSize === 'large',
|
|
|
|
},
|
|
|
|
hashId,
|
|
|
|
)}
|
2022-04-11 11:13:16 +08:00
|
|
|
options={extendedOptions}
|
|
|
|
ref={ref}
|
|
|
|
prefixCls={prefixCls}
|
|
|
|
direction={direction}
|
2022-05-11 19:35:00 +08:00
|
|
|
/>,
|
2022-04-11 11:13:16 +08:00
|
|
|
);
|
|
|
|
});
|
|
|
|
|
2022-06-21 10:24:52 +08:00
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
Segmented.displayName = 'Segmented';
|
|
|
|
}
|
|
|
|
|
2022-04-11 11:13:16 +08:00
|
|
|
export default Segmented;
|