2016-12-30 21:41:28 +08:00
|
|
|
import classNames from 'classnames';
|
2022-06-21 10:24:52 +08:00
|
|
|
import * as React from 'react';
|
2020-11-06 10:26:45 +08:00
|
|
|
import { ConfigContext } from '../config-provider';
|
2022-04-22 15:00:18 +08:00
|
|
|
import useStyle from './style';
|
2016-12-30 21:41:28 +08:00
|
|
|
|
2018-12-05 19:12:18 +08:00
|
|
|
export interface GeneratorProps {
|
|
|
|
suffixCls: string;
|
2019-02-14 17:51:52 +08:00
|
|
|
tagName: 'header' | 'footer' | 'main' | 'section';
|
2020-01-28 15:03:04 +08:00
|
|
|
displayName: string;
|
2018-12-05 19:12:18 +08:00
|
|
|
}
|
2018-03-06 15:51:06 +08:00
|
|
|
export interface BasicProps extends React.HTMLAttributes<HTMLDivElement> {
|
2016-12-30 21:41:28 +08:00
|
|
|
prefixCls?: string;
|
2018-01-12 20:44:35 +08:00
|
|
|
hasSider?: boolean;
|
2019-03-05 14:39:43 +08:00
|
|
|
}
|
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
export interface LayoutContextProps {
|
|
|
|
siderHook: {
|
|
|
|
addSider: (id: string) => void;
|
|
|
|
removeSider: (id: string) => void;
|
|
|
|
};
|
|
|
|
}
|
2019-12-23 18:33:08 +08:00
|
|
|
export const LayoutContext = React.createContext<LayoutContextProps>({
|
2019-04-05 16:15:01 +08:00
|
|
|
siderHook: {
|
|
|
|
addSider: () => null,
|
|
|
|
removeSider: () => null,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2019-03-05 14:39:43 +08:00
|
|
|
interface BasicPropsWithTagName extends BasicProps {
|
2019-02-14 17:51:52 +08:00
|
|
|
tagName: 'header' | 'footer' | 'main' | 'section';
|
2016-12-30 21:41:28 +08:00
|
|
|
}
|
|
|
|
|
2020-01-28 15:03:04 +08:00
|
|
|
function generator({ suffixCls, tagName, displayName }: GeneratorProps) {
|
2019-08-06 14:40:17 +08:00
|
|
|
return (BasicComponent: any) => {
|
2022-03-22 16:52:20 +08:00
|
|
|
const Adapter = React.forwardRef<HTMLElement, BasicProps>((props, ref) => {
|
2020-11-06 10:26:45 +08:00
|
|
|
const { getPrefixCls } = React.useContext(ConfigContext);
|
|
|
|
const { prefixCls: customizePrefixCls } = props;
|
|
|
|
const prefixCls = getPrefixCls(suffixCls, customizePrefixCls);
|
2020-01-28 15:03:04 +08:00
|
|
|
|
2022-03-22 16:52:20 +08:00
|
|
|
return <BasicComponent ref={ref} prefixCls={prefixCls} tagName={tagName} {...props} />;
|
|
|
|
});
|
2022-06-21 10:24:52 +08:00
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
Adapter.displayName = displayName;
|
|
|
|
}
|
2020-11-06 10:26:45 +08:00
|
|
|
return Adapter;
|
2016-12-30 21:41:28 +08:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2022-03-22 16:52:20 +08:00
|
|
|
const Basic = React.forwardRef<HTMLElement, BasicPropsWithTagName>((props, ref) => {
|
2019-08-06 14:40:17 +08:00
|
|
|
const { prefixCls, className, children, tagName, ...others } = props;
|
2020-01-25 00:27:56 +08:00
|
|
|
const classString = classNames(prefixCls, className);
|
2022-04-22 15:00:18 +08:00
|
|
|
|
2022-03-22 16:52:20 +08:00
|
|
|
return React.createElement(tagName, { className: classString, ...others, ref }, children);
|
|
|
|
});
|
2017-11-09 20:04:34 +08:00
|
|
|
|
2022-03-22 16:52:20 +08:00
|
|
|
const BasicLayout = React.forwardRef<HTMLElement, BasicPropsWithTagName>((props, ref) => {
|
2020-11-06 10:26:45 +08:00
|
|
|
const { direction } = React.useContext(ConfigContext);
|
2018-12-12 03:40:36 +08:00
|
|
|
|
2020-11-06 10:26:45 +08:00
|
|
|
const [siders, setSiders] = React.useState<string[]>([]);
|
2017-11-09 20:04:34 +08:00
|
|
|
|
2020-11-06 10:26:45 +08:00
|
|
|
const { prefixCls, className, children, hasSider, tagName: Tag, ...others } = props;
|
2022-04-22 15:00:18 +08:00
|
|
|
const [wrapSSR, hashId] = useStyle(prefixCls as string);
|
2020-11-06 10:26:45 +08:00
|
|
|
const classString = classNames(
|
|
|
|
prefixCls,
|
|
|
|
{
|
|
|
|
[`${prefixCls}-has-sider`]: typeof hasSider === 'boolean' ? hasSider : siders.length > 0,
|
|
|
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
|
|
|
},
|
|
|
|
className,
|
2022-04-22 15:00:18 +08:00
|
|
|
hashId,
|
2020-11-06 10:26:45 +08:00
|
|
|
);
|
|
|
|
|
2021-11-26 12:18:21 +08:00
|
|
|
const contextValue = React.useMemo(
|
|
|
|
() => ({
|
|
|
|
siderHook: {
|
|
|
|
addSider: (id: string) => {
|
2022-11-19 13:47:33 +08:00
|
|
|
setSiders((prev) => [...prev, id]);
|
2021-11-26 12:18:21 +08:00
|
|
|
},
|
|
|
|
removeSider: (id: string) => {
|
2022-11-19 13:47:33 +08:00
|
|
|
setSiders((prev) => prev.filter((currentId) => currentId !== id));
|
2020-11-20 08:56:12 +08:00
|
|
|
},
|
2021-11-26 12:18:21 +08:00
|
|
|
},
|
|
|
|
}),
|
|
|
|
[],
|
|
|
|
);
|
|
|
|
|
2022-04-22 15:00:18 +08:00
|
|
|
return wrapSSR(
|
2021-11-26 12:18:21 +08:00
|
|
|
<LayoutContext.Provider value={contextValue}>
|
2022-03-22 16:52:20 +08:00
|
|
|
<Tag ref={ref} className={classString} {...others}>
|
2020-11-06 10:26:45 +08:00
|
|
|
{children}
|
|
|
|
</Tag>
|
2022-04-22 15:00:18 +08:00
|
|
|
</LayoutContext.Provider>,
|
2020-11-06 10:26:45 +08:00
|
|
|
);
|
2022-03-22 16:52:20 +08:00
|
|
|
});
|
2016-12-30 21:41:28 +08:00
|
|
|
|
2020-11-06 10:26:45 +08:00
|
|
|
const Layout = generator({
|
2018-12-05 19:12:18 +08:00
|
|
|
suffixCls: 'layout',
|
2019-02-14 17:51:52 +08:00
|
|
|
tagName: 'section',
|
2020-01-28 15:03:04 +08:00
|
|
|
displayName: 'Layout',
|
2017-11-09 20:04:34 +08:00
|
|
|
})(BasicLayout);
|
2016-12-30 21:41:28 +08:00
|
|
|
|
|
|
|
const Header = generator({
|
2018-12-05 19:12:18 +08:00
|
|
|
suffixCls: 'layout-header',
|
2019-02-14 17:51:52 +08:00
|
|
|
tagName: 'header',
|
2020-01-28 15:03:04 +08:00
|
|
|
displayName: 'Header',
|
2016-12-30 21:41:28 +08:00
|
|
|
})(Basic);
|
|
|
|
|
|
|
|
const Footer = generator({
|
2018-12-05 19:12:18 +08:00
|
|
|
suffixCls: 'layout-footer',
|
2019-02-14 17:51:52 +08:00
|
|
|
tagName: 'footer',
|
2020-01-28 15:03:04 +08:00
|
|
|
displayName: 'Footer',
|
2016-12-30 21:41:28 +08:00
|
|
|
})(Basic);
|
|
|
|
|
|
|
|
const Content = generator({
|
2018-12-05 19:12:18 +08:00
|
|
|
suffixCls: 'layout-content',
|
2019-02-14 17:51:52 +08:00
|
|
|
tagName: 'main',
|
2020-01-28 15:03:04 +08:00
|
|
|
displayName: 'Content',
|
2016-12-30 21:41:28 +08:00
|
|
|
})(Basic);
|
|
|
|
|
2020-11-06 10:26:45 +08:00
|
|
|
export { Header, Footer, Content };
|
2016-12-30 21:41:28 +08:00
|
|
|
|
|
|
|
export default Layout;
|