2019-02-19 11:42:05 +08:00
|
|
|
import * as React from 'react';
|
2022-06-22 14:57:09 +08:00
|
|
|
import { tupleNum } from '../_util/type';
|
2022-05-10 15:43:29 +08:00
|
|
|
import warning from '../_util/warning';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type { BlockProps } from './Base';
|
|
|
|
import Base from './Base';
|
2019-02-19 11:42:05 +08:00
|
|
|
|
2020-07-28 20:39:43 +08:00
|
|
|
const TITLE_ELE_LIST = tupleNum(1, 2, 3, 4, 5);
|
2019-02-19 11:42:05 +08:00
|
|
|
|
2022-10-18 11:45:43 +08:00
|
|
|
export interface TitleProps
|
|
|
|
extends Omit<BlockProps<'h1' | 'h2' | 'h3' | 'h4' | 'h5'>, 'strong'>,
|
|
|
|
Omit<
|
|
|
|
React.HTMLAttributes<HTMLHeadElement>,
|
|
|
|
'type' | keyof BlockProps<'h1' | 'h2' | 'h3' | 'h4' | 'h5'>
|
|
|
|
> {
|
|
|
|
level?: typeof TITLE_ELE_LIST[number];
|
|
|
|
}
|
2019-02-19 11:42:05 +08:00
|
|
|
|
2022-10-18 11:45:43 +08:00
|
|
|
const Title = React.forwardRef<HTMLElement, TitleProps>((props, ref) => {
|
2019-02-19 11:42:05 +08:00
|
|
|
const { level = 1, ...restProps } = props;
|
2022-10-18 11:45:43 +08:00
|
|
|
let component: keyof JSX.IntrinsicElements;
|
2019-02-19 11:42:05 +08:00
|
|
|
|
2022-10-21 11:45:55 +08:00
|
|
|
if (TITLE_ELE_LIST.includes(level)) {
|
2019-02-19 11:42:05 +08:00
|
|
|
component = `h${level}`;
|
|
|
|
} else {
|
2022-05-10 15:43:29 +08:00
|
|
|
warning(
|
2020-07-28 20:39:43 +08:00
|
|
|
false,
|
|
|
|
'Typography.Title',
|
|
|
|
'Title only accept `1 | 2 | 3 | 4 | 5` as `level` value. And `5` need 4.6.0+ version.',
|
|
|
|
);
|
2019-02-19 11:42:05 +08:00
|
|
|
component = 'h1';
|
|
|
|
}
|
|
|
|
|
2022-04-05 13:02:32 +08:00
|
|
|
return <Base ref={ref} {...restProps} component={component} />;
|
2022-10-18 11:45:43 +08:00
|
|
|
});
|
2019-02-19 11:42:05 +08:00
|
|
|
|
2022-10-18 11:45:43 +08:00
|
|
|
export default Title;
|