fix: fix ref issue.

core/README-zh.md

@@ -21,10 +21,11 @@ import Layout from '@uiw/react-layout';
 const { Header, Footer, Sider, Content } = Layout;
 // or
 import Layout, { LayoutHeader, LayoutContent, LayoutSider, LayoutFooter } from '@uiw/react-layout';
-Layout.Header = LayoutHeader
-Layout.Content = LayoutContent
-Layout.Sider = LayoutSider
-Layout.Footer = LayoutFooter
+
+Layout.Header === LayoutHeader
+Layout.Content === LayoutContent
+Layout.Sider === LayoutSider
+Layout.Footer === LayoutFooter
 ```
 
 ## 基本用法
@@ -148,6 +149,54 @@ export default Demo;
 | hasSider | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - |
 <!-- | theme | 主题颜色 | `light`、`dark` | `dark` | -->
 
+## Header
+
+```ts
+import Layout, { LayoutHeader } from '@uiw/react-layout';
+Layout.Header === LayoutHeader
+```
+
+```ts
+import React from 'react';
+export interface LayoutHeaderProps extends React.HTMLAttributes<HTMLElement> {
+  prefixCls?: string;
+  children?: React.ReactNode;
+}
+export declare const LayoutHeader: React.ForwardRefExoticComponent<LayoutHeaderProps & React.RefAttributes<HTMLElement>>;
+```
+
+## Content
+
+```ts
+import Layout, { LayoutContent } from '@uiw/react-layout';
+Layout.Content === LayoutContent
+```
+
+```ts
+import React from 'react';
+export interface LayoutContentProps extends React.HTMLAttributes<HTMLElement> {
+  prefixCls?: string;
+  children?: React.ReactNode;
+}
+export declare const LayoutContent: React.ForwardRefExoticComponent<LayoutContentProps & React.RefAttributes<HTMLElement>>;
+```
+
+## Footer
+
+```ts
+import Layout, { LayoutFooter } from '@uiw/react-layout';
+Layout.Footer === LayoutFooter
+```
+
+```ts
+import React from 'react';
+export interface LayoutFooterProps extends React.HTMLAttributes<HTMLElement> {
+  prefixCls?: string;
+  children?: React.ReactNode;
+}
+export declare const LayoutFooter: React.ForwardRefExoticComponent<LayoutFooterProps & React.RefAttributes<HTMLElement>>;
+```
+
 ## Layout.Sider
 
 | 参数 | 说明 | 类型 | 默认值 |
@@ -158,16 +207,23 @@ export default Demo;
 | collapsedWidth | 收缩宽度，设置为 `0` | boolean | `80` |
 | width | 宽度 | number/string | 200 |
 
-## Contributors
-
-As always, thanks to our amazing contributors!
-
-<a href="https://github.com/jaywcjlove/github-action-contributors/graphs/contributors">
-  <img src="https://jaywcjlove.github.io/github-action-contributors/CONTRIBUTORS.svg" />
-</a>
-
-Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
-
-### License
+```ts
+import Layout, { LayoutSider } from '@uiw/react-layout';
+Layout.Sider === LayoutSider
+```
 
-Licensed under the MIT License.
+```ts
+import React from 'react';
+export declare function randomid(): string;
+export interface LayoutSiderProps extends React.HTMLAttributes<HTMLElement> {
+  prefixCls?: string;
+  children?: React.ReactNode;
+  /** Width of the sidebar */
+  width?: number | string;
+  /** Width of the collapsed sidebar, by setting to 0 a special trigger will appear */
+  collapsedWidth?: number;
+  /** To set the current status */
+  collapsed?: boolean;
+}
+export declare const LayoutSider: React.ForwardRefExoticComponent<LayoutSiderProps & React.RefAttributes<HTMLDivElement>>;
+```

core/README.md

@@ -23,10 +23,11 @@ import Layout from '@uiw/react-layout';
 const { Header, Footer, Sider, Content } = Layout;
 // or
 import Layout, { LayoutHeader, LayoutContent, LayoutSider, LayoutFooter } from '@uiw/react-layout';
-Layout.Header = LayoutHeader
-Layout.Content = LayoutContent
-Layout.Sider = LayoutSider
-Layout.Footer = LayoutFooter
+
+Layout.Header === LayoutHeader
+Layout.Content === LayoutContent
+Layout.Sider === LayoutSider
+Layout.Footer === LayoutFooter
 ```
 
 ## Basic Usage
@@ -150,7 +151,55 @@ The layout wrapper, in which `Header` `Sider` `Content` `Footer` or `Layout` its
 | hasSider | hasSider	Whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering | boolean | - |
 <!-- | theme | Color theme of the sidebar | `light`、`dark` | `dark` | -->
 
-## Layout.Sider
+## Header
+
+```ts
+import Layout, { LayoutHeader } from '@uiw/react-layout';
+Layout.Header === LayoutHeader
+```
+
+```ts
+import React from 'react';
+export interface LayoutHeaderProps extends React.HTMLAttributes<HTMLElement> {
+  prefixCls?: string;
+  children?: React.ReactNode;
+}
+export declare const LayoutHeader: React.ForwardRefExoticComponent<LayoutHeaderProps & React.RefAttributes<HTMLElement>>;
+```
+
+## Content
+
+```ts
+import Layout, { LayoutContent } from '@uiw/react-layout';
+Layout.Content === LayoutContent
+```
+
+```ts
+import React from 'react';
+export interface LayoutContentProps extends React.HTMLAttributes<HTMLElement> {
+  prefixCls?: string;
+  children?: React.ReactNode;
+}
+export declare const LayoutContent: React.ForwardRefExoticComponent<LayoutContentProps & React.RefAttributes<HTMLElement>>;
+```
+
+## Footer
+
+```ts
+import Layout, { LayoutFooter } from '@uiw/react-layout';
+Layout.Footer === LayoutFooter
+```
+
+```ts
+import React from 'react';
+export interface LayoutFooterProps extends React.HTMLAttributes<HTMLElement> {
+  prefixCls?: string;
+  children?: React.ReactNode;
+}
+export declare const LayoutFooter: React.ForwardRefExoticComponent<LayoutFooterProps & React.RefAttributes<HTMLElement>>;
+```
+
+## Sider
 
 | Property | Description | Type | Default |
 |--------- |-------- |--------- |-------- |
@@ -160,6 +209,27 @@ The layout wrapper, in which `Header` `Sider` `Content` `Footer` or `Layout` its
 | collapsedWidth | Width of the collapsed sidebar, by setting to 0 a special trigger will appear | boolean | `80` |
 | width | Width of the sidebar | number/string | 200 |
 
+```ts
+import Layout, { LayoutSider } from '@uiw/react-layout';
+Layout.Sider === LayoutSider
+```
+
+```ts
+import React from 'react';
+export declare function randomid(): string;
+export interface LayoutSiderProps extends React.HTMLAttributes<HTMLElement> {
+  prefixCls?: string;
+  children?: React.ReactNode;
+  /** Width of the sidebar */
+  width?: number | string;
+  /** Width of the collapsed sidebar, by setting to 0 a special trigger will appear */
+  collapsedWidth?: number;
+  /** To set the current status */
+  collapsed?: boolean;
+}
+export declare const LayoutSider: React.ForwardRefExoticComponent<LayoutSiderProps & React.RefAttributes<HTMLDivElement>>;
+```
+
 ## Contributors
 
 As always, thanks to our amazing contributors!

core/src/Content.tsx

@@ -5,11 +5,12 @@ export interface LayoutContentProps extends React.HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;
 }
 
-export function LayoutContent(props: LayoutContentProps) {
+export const LayoutContent = React.forwardRef<HTMLElement, LayoutContentProps>((props, ref) => {
   const { prefixCls = 'w-layout-content', className, children, ...other } = props;
+  const cls = [prefixCls, className].filter(Boolean).join(' ').trim();
   return (
-    <main className={[prefixCls, className].filter(Boolean).join(' ').trim()} {...other}>
+    <main ref={ref} className={cls} {...other}>
       {children}
     </main>
   );
-}
+});

core/src/Footer.tsx

@@ -5,11 +5,12 @@ export interface LayoutFooterProps extends React.HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;
 }
 
-export function LayoutFooter(props: LayoutFooterProps) {
+export const LayoutFooter = React.forwardRef<HTMLElement, LayoutFooterProps>((props, ref) => {
   const { prefixCls = 'w-layout-footer', className, children, ...other } = props;
+  const cls = [prefixCls, className].filter(Boolean).join(' ').trim();
   return (
-    <footer className={[prefixCls, className].filter(Boolean).join(' ').trim()} {...other}>
+    <footer ref={ref} className={cls} {...other}>
       {children}
     </footer>
   );
-}
+});

core/src/Header.tsx

@@ -5,11 +5,12 @@ export interface LayoutHeaderProps extends React.HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;
 }
 
-export function LayoutHeader(props: LayoutHeaderProps) {
+export const LayoutHeader = React.forwardRef<HTMLElement, LayoutHeaderProps>((props, ref) => {
   const { prefixCls = 'w-layout-header', className, children, ...other } = props || {};
+  const cls = [prefixCls, className].filter(Boolean).join(' ').trim();
   return (
-    <header className={[prefixCls, className].filter(Boolean).join(' ').trim()} {...other}>
+    <header ref={ref} className={cls} {...other}>
       {children}
     </header>
   );
-}
+});

core/src/Layout.tsx

@@ -1,20 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { LayoutHeader } from './Header';
 import { LayoutSider } from './Sider';
 import { LayoutFooter } from './Footer';
 import { LayoutContent } from './Content';
 
 export interface LayoutContextProps {
-  siderHook: {
-    addSider: (id: string) => void;
-    removeSider: (id: string) => void;
-  };
+  addSider: (id: string) => void;
+  removeSider: (id: string) => void;
 }
+
 export const LayoutContext = React.createContext<LayoutContextProps>({
-  siderHook: {
-    addSider: () => null,
-    removeSider: () => null,
-  },
+  addSider: () => null,
+  removeSider: () => null,
 });
 
 export interface LayoutProps extends React.HTMLAttributes<HTMLElement> {
@@ -25,49 +22,38 @@ export interface LayoutState {
   siders: string[];
 }
 
-export default class Layout extends React.Component<LayoutProps, LayoutState> {
-  static Header: typeof LayoutHeader;
-  static Footer: typeof LayoutFooter;
-  static Sider: typeof LayoutSider;
-  static Content: typeof LayoutContent;
-  public static defaultProps: LayoutProps = {
-    prefixCls: 'w-layout',
+const Layout = React.forwardRef<HTMLElement, LayoutProps>((props, ref) => {
+  const { prefixCls = 'w-layout', className, hasSider, children, ...other } = props;
+  const [siders, setSiders] = useState<string[]>([]);
+  const addSider = (id: string) => {
+    setSiders((state) => [...state, id]);
   };
-  state = { siders: [] };
-  getSiderHook() {
-    return {
-      addSider: (id: string) => {
-        this.setState((state) => ({
-          siders: [...state.siders, id],
-        }));
-      },
-      removeSider: (id: string) => {
-        this.setState((state) => ({
-          siders: state.siders.filter((currentId) => currentId !== id),
-        }));
-      },
-    };
-  }
-  render() {
-    const { prefixCls, className, hasSider, children, ...other } = this.props;
-    return (
-      <LayoutContext.Provider value={{ siderHook: this.getSiderHook() }}>
-        <section
-          className={[
-            prefixCls,
-            className,
-            (typeof hasSider === 'boolean' && hasSider) || this.state.siders.length > 0
-              ? `${prefixCls}-has-sider`
-              : null,
-          ]
-            .filter(Boolean)
-            .join(' ')
-            .trim()}
-          {...other}
-        >
-          {children}
-        </section>
-      </LayoutContext.Provider>
-    );
-  }
-}
+  const removeSider = (id: string) => {
+    setSiders((state) => [...state.filter((currentId) => currentId !== id)]);
+  };
+  const cls = [
+    prefixCls,
+    className,
+    (typeof hasSider === 'boolean' && hasSider) || siders.length > 0 ? `${prefixCls}-has-sider` : null,
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .trim();
+  return (
+    <LayoutContext.Provider value={{ addSider, removeSider }}>
+      <section ref={ref} className={cls} {...other}>
+        {children}
+      </section>
+    </LayoutContext.Provider>
+  );
+});
+
+type LoginComponent = typeof Layout & {
+  Header: typeof LayoutHeader;
+  Footer: typeof LayoutFooter;
+  Sider: typeof LayoutSider;
+  Content: typeof LayoutContent;
+};
+Layout.displayName = 'Layout';
+
+export default Layout as LoginComponent;