ant-design/components/typography/Typography.tsx
afc163 ef09eefb85
refactor: Typography move to cssinjs ()
* refactor: move to css in js

* add some style

* update code style

* update

* update

* update

* update

* add reset styles

* use token.errorColors

* remove less files

* add operationUnit

* getEditableStyles

* fix overflow

* fix ediable/copy

* fix ediable/copy

* refactor: move to css in js

* add some style

* update code style

* update

* update

* update

* update

* add reset styles

* use token.errorColors

* remove less files

* add operationUnit

* getEditableStyles

* fix overflow

* fix ediable/copy

* fix ediable/copy

* rtl style

* rtl style

* add TypographyToken

* fix ts

* use GenerateStyle<TypographyToken>

* fix ts errors

* fix ediable

* remove comment

* fix ediable

* fix ediable

* revert less files

* comment less

* fix review issues

* fix review issues

* fix review issues

* fix missing style
2022-03-16 19:10:36 +08:00

72 lines
1.8 KiB
TypeScript

import * as React from 'react';
import classNames from 'classnames';
import { composeRef } from 'rc-util/lib/ref';
import { ConfigContext } from '../config-provider';
import devWarning from '../_util/devWarning';
import useStyle from './style';
export interface TypographyProps {
id?: string;
prefixCls?: string;
className?: string;
style?: React.CSSProperties;
children?: React.ReactNode;
['aria-label']?: string;
}
interface InternalTypographyProps extends TypographyProps {
component?: string;
/** @deprecated Use `ref` directly if using React 16 */
setContentRef?: (node: HTMLElement) => void;
}
const Typography: React.ForwardRefRenderFunction<{}, InternalTypographyProps> = (
{
prefixCls: customizePrefixCls,
component = 'article',
className,
'aria-label': ariaLabel,
setContentRef,
children,
...restProps
},
ref,
) => {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
let mergedRef = ref;
if (setContentRef) {
devWarning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.');
mergedRef = composeRef(ref, setContentRef);
}
const Component = component as any;
const prefixCls = getPrefixCls('typography', customizePrefixCls);
// Style
const [wrapSSR, hashId] = useStyle(prefixCls);
const componentClassName = classNames(
prefixCls,
{
[`${prefixCls}-rtl`]: direction === 'rtl',
},
className,
hashId,
);
return wrapSSR(
<Component className={componentClassName} aria-label={ariaLabel} ref={mergedRef} {...restProps}>
{children}
</Component>,
);
};
const RefTypography = React.forwardRef(Typography);
RefTypography.displayName = 'Typography';
// es default export should use const instead of let
const ExportTypography = RefTypography as unknown as React.FC<TypographyProps>;
export default ExportTypography;