mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

Fix: TypeScript <Layout> requires a tagName property (#15181)

Browse Source 
* fix #15162

* force safe type casting

* get rid of non-null assertion

* get rid of non-null assertion
This commit is contained in:
ngolin 2019-03-05 14:39:43 +08:00 committed by 偏右
parent 7724fee91a
commit cb5fe6cbf8
1 changed files with 10 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
components/layout/layout.tsx
View File

@ -11,11 +11,14 @@ export interface GeneratorProps {
export interface BasicProps extends React.HTMLAttributes<HTMLDivElement> { export interface BasicProps extends React.HTMLAttributes<HTMLDivElement> {
prefixCls?: string; prefixCls?: string;
hasSider?: boolean; hasSider?: boolean;
}
interface BasicPropsWithTagName extends BasicProps {
tagName: 'header' | 'footer' | 'main' | 'section'; tagName: 'header' | 'footer' | 'main' | 'section';
} }
function generator({ suffixCls, tagName }: GeneratorProps) { function generator({ suffixCls, tagName }: GeneratorProps) {
return (BasicComponent: React.ComponentClass<BasicProps>): any => { return (BasicComponent: React.ComponentClass<BasicPropsWithTagName>): any => {
return class Adapter extends React.Component<BasicProps, any> { return class Adapter extends React.Component<BasicProps, any> {
static Header: any; static Header: any;
static Footer: any; static Footer: any;
@ -36,15 +39,11 @@ function generator({ suffixCls, tagName }: GeneratorProps) {
}; };
} }
class Basic extends React.Component<BasicProps, any> { class Basic extends React.Component<BasicPropsWithTagName, any> {
render() { render() {
const { prefixCls, className, children, tagName: CustomElement, ...others } = this.props; const { prefixCls, className, children, tagName, ...others } = this.props;
const classString = classNames(className, prefixCls); const classString = classNames(className, prefixCls);
return ( return React.createElement(tagName, { className: classString, ...others }, children);
<CustomElement className={classString} {...others}>
{children}
</CustomElement>
);
} }
} }
@ -52,7 +51,7 @@ interface BasicLayoutState {
siders: string[]; siders: string[];
} }
class BasicLayout extends React.Component<BasicProps, BasicLayoutState> { class BasicLayout extends React.Component<BasicPropsWithTagName, BasicLayoutState> {
static childContextTypes = { static childContextTypes = {
siderHook: PropTypes.object, siderHook: PropTypes.object,
}; };
@ -76,15 +75,11 @@ class BasicLayout extends React.Component<BasicProps, BasicLayoutState> {
} }
render() { render() {
const { prefixCls, className, children, hasSider, tagName: CustomElement, ...others } = this.props; const { prefixCls, className, children, hasSider, tagName, ...others } = this.props;
const classString = classNames(className, prefixCls, { const classString = classNames(className, prefixCls, {
[`${prefixCls}-has-sider`]: hasSider || this.state.siders.length > 0, [`${prefixCls}-has-sider`]: hasSider || this.state.siders.length > 0,
}); });
return ( return React.createElement(tagName, { className: classString, ...others }, children);
<CustomElement className={classString} {...others}>
{children}
</CustomElement>
);
} }
} }