ant-design/components/segmented/index.tsx
章鱼怪 7e4bca346d
feat: Segmented value type support generics ()
* feat: Segmented value type support generics

* fix: type

* docs: update demo

* test: update snapshots

* Update components/segmented/demo/basic.tsx

Signed-off-by: afc163 <afc163@gmail.com>

* Revert "test: update snapshots"

This reverts commit 6f95cd674d.

---------

Signed-off-by: afc163 <afc163@gmail.com>
Co-authored-by: afc163 <afc163@gmail.com>
2024-01-27 20:19:10 +08:00

130 lines
3.8 KiB
TypeScript

import classNames from 'classnames';
import type {
SegmentedLabeledOption as RcSegmentedLabeledOption,
SegmentedProps as RCSegmentedProps,
SegmentedValue as RcSegmentedValue,
SegmentedRawOption,
} from 'rc-segmented';
import RcSegmented from 'rc-segmented';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import useSize from '../config-provider/hooks/useSize';
import type { SizeType } from '../config-provider/SizeContext';
import useStyle from './style';
export type { SegmentedValue } from 'rc-segmented';
interface SegmentedLabeledOptionWithoutIcon<ValueType = RcSegmentedValue>
extends RcSegmentedLabeledOption<ValueType> {
label: RcSegmentedLabeledOption['label'];
}
interface SegmentedLabeledOptionWithIcon<ValueType = RcSegmentedValue>
extends Omit<RcSegmentedLabeledOption<ValueType>, 'label'> {
label?: RcSegmentedLabeledOption['label'];
/** Set icon for Segmented item */
icon: React.ReactNode;
}
function isSegmentedLabeledOptionWithIcon(
option: SegmentedRawOption | SegmentedLabeledOptionWithIcon | SegmentedLabeledOptionWithoutIcon,
): option is SegmentedLabeledOptionWithIcon {
return typeof option === 'object' && !!(option as SegmentedLabeledOptionWithIcon)?.icon;
}
export type SegmentedLabeledOption<ValueType = RcSegmentedValue> =
| SegmentedLabeledOptionWithIcon<ValueType>
| SegmentedLabeledOptionWithoutIcon<ValueType>;
export type SegmentedOptions<T = SegmentedRawOption> = (T | SegmentedLabeledOption<T>)[];
export interface SegmentedProps<ValueType = RcSegmentedValue>
extends Omit<RCSegmentedProps<ValueType>, 'size' | 'options'> {
rootClassName?: string;
options: SegmentedOptions<ValueType>;
/** Option to fit width to its parent's width */
block?: boolean;
/** Option to control the display size */
size?: SizeType;
}
const InternalSegmented = React.forwardRef<HTMLDivElement, SegmentedProps>((props, ref) => {
const {
prefixCls: customizePrefixCls,
className,
rootClassName,
block,
options = [],
size: customSize = 'middle',
style,
...restProps
} = props;
const { getPrefixCls, direction, segmented } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('segmented', customizePrefixCls);
// Style
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
// ===================== Size =====================
const mergedSize = useSize(customSize);
// syntactic sugar to support `icon` for Segmented Item
const extendedOptions = React.useMemo<RCSegmentedProps['options']>(
() =>
options.map((option) => {
if (isSegmentedLabeledOptionWithIcon(option)) {
const { icon, label, ...restOption } = option;
return {
...restOption,
label: (
<>
<span className={`${prefixCls}-item-icon`}>{icon}</span>
{label && <span>{label}</span>}
</>
),
};
}
return option;
}),
[options, prefixCls],
);
const cls = classNames(
className,
rootClassName,
segmented?.className,
{
[`${prefixCls}-block`]: block,
[`${prefixCls}-sm`]: mergedSize === 'small',
[`${prefixCls}-lg`]: mergedSize === 'large',
},
hashId,
cssVarCls,
);
const mergedStyle: React.CSSProperties = { ...segmented?.style, ...style };
return wrapCSSVar(
<RcSegmented
{...restProps}
className={cls}
style={mergedStyle}
options={extendedOptions}
ref={ref}
prefixCls={prefixCls}
direction={direction}
/>,
);
});
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';
}
export default Segmented;