fix: fix container ref issue.

uiwjs · May 19, 2023 · 0077073 · 0077073
1 parent 8532b33
commit 0077073
Show file tree

Hide file tree

Showing 14 changed files with 98 additions and 143 deletions.
diff --git a/core/src/Container.tsx b/core/src/Container.tsx
@@ -1,18 +1,12 @@
-import React, { useImperativeHandle, useRef } from 'react';
+import React from 'react';
 import { LoginProps } from '.';
 
-export interface ContainerRef {
-  container?: HTMLDivElement | null;
-}
-
 export interface ContainerProps extends LoginProps {}
-export const Container = React.forwardRef<ContainerRef, ContainerProps>((props, ref) => {
+export const Container = React.forwardRef<HTMLDivElement, ContainerProps>((props, ref) => {
   const { className = '', children, ...elmProps } = props;
-  const container = useRef<HTMLDivElement>(null);
-  useImperativeHandle(ref, () => ({ container: container.current }), [container]);
   const defaultClassNames = `login-page ${className}`;
   return (
-    <div ref={container} className={defaultClassNames} {...elmProps}>
+    <div ref={ref} className={defaultClassNames} {...elmProps}>
       {children}
     </div>
   );

diff --git a/core/src/index.tsx b/core/src/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Provider } from './store';
-import { Container, ContainerRef } from './Container';
+import { Container, ContainerProps } from './Container';
 import { Block } from './Block';
 import { Textarea } from './Textarea';
 import { Select } from './Select';
@@ -18,14 +18,6 @@ export * from './store';
 export interface LoginRef {}
 export interface LoginProps extends React.HTMLAttributes<HTMLDivElement> {}
 
-const InternalLogin = (props: LoginProps, ref?: React.ForwardedRef<ContainerRef>) => {
-  return (
-    <Provider>
-      <Container {...props} ref={ref} />
-    </Provider>
-  );
-};
-
 type LoginComponent = React.FC<React.PropsWithRef<LoginProps>> & {
   Block: typeof Block;
   Button: typeof Button;
@@ -34,7 +26,13 @@ type LoginComponent = React.FC<React.PropsWithRef<LoginProps>> & {
   Select: typeof Select;
 };
 
-const Login: LoginComponent = React.forwardRef<ContainerRef>(InternalLogin) as unknown as LoginComponent;
+const Login: LoginComponent = React.forwardRef<HTMLDivElement, ContainerProps>((props, ref) => {
+  return (
+    <Provider>
+      <Container {...props} ref={ref} />
+    </Provider>
+  );
+}) as unknown as LoginComponent;
 
 Login.Block = Block;
 Login.Button = Button;

diff --git a/pages/base/src/index.tsx b/pages/base/src/index.tsx
@@ -1,5 +1,5 @@
-import { FC, PropsWithChildren, cloneElement, isValidElement } from 'react';
-import { Render, Provider, Container, useStore } from 'react-login-page';
+import { cloneElement, forwardRef, isValidElement } from 'react';
+import { Render, Provider, Container, ContainerProps, useStore } from 'react-login-page';
 import { Username } from './control/Username';
 import { Password } from './control/Password';
 import { Submit } from './control/Submit';
@@ -59,27 +59,24 @@ const RenderLogin = () => {
   );
 };
 
-const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = ({
-  children,
-  className,
-  ...divProps
-}) => {
+const LoginPage = forwardRef<HTMLDivElement, ContainerProps>((props, ref) => {
+  const { children, className, ...divProps } = props;
   return (
     <Provider>
       <Username />
       <Password />
       <Logo />
       <Title />
       <Submit />
-      <Container {...divProps} className={`login-page-base ${className || ''}`}>
+      <Container {...divProps} ref={ref} className={`login-page-base ${className || ''}`}>
         <RenderLogin />
         {children}
       </Container>
     </Provider>
   );
-};
+});
 
-type LoginComponent = FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> & {
+type LoginComponent = typeof LoginPage & {
   Username: typeof Username;
   Password: typeof Password;
   Submit: typeof Submit;

diff --git a/pages/page1/src/index.tsx b/pages/page1/src/index.tsx
@@ -1,5 +1,5 @@
-import { FC, PropsWithChildren, cloneElement, isValidElement } from 'react';
-import { Render, Provider, Container, useStore } from 'react-login-page';
+import { cloneElement, forwardRef, isValidElement } from 'react';
+import { Render, Provider, Container, useStore, ContainerProps } from 'react-login-page';
 import { Username } from './control/Username';
 import { Password } from './control/Password';
 import { Submit } from './control/Submit';
@@ -58,27 +58,24 @@ const RenderLogin = () => {
   );
 };
 
-const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = ({
-  children,
-  className,
-  ...divProps
-}) => {
+const LoginPage = forwardRef<HTMLDivElement, ContainerProps>((props, ref) => {
+  const { children, className, ...divProps } = props;
   return (
     <Provider>
       <Username />
       <Password />
       <Logo />
       <Title />
       <Submit />
-      <Container {...divProps} className={`login-page-1 ${className || ''}`}>
+      <Container {...divProps} ref={ref} className={`login-page-1 ${className || ''}`}>
         <RenderLogin />
+        {children}
       </Container>
-      {children}
     </Provider>
   );
-};
+});
 
-type LoginComponent = FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> & {
+type LoginComponent = typeof LoginPage & {
   Username: typeof Username;
   Password: typeof Password;
   Submit: typeof Submit;

diff --git a/pages/page10/src/index.tsx b/pages/page10/src/index.tsx
@@ -1,5 +1,5 @@
-import { FC, Fragment, PropsWithChildren, cloneElement, isValidElement, useState } from 'react';
-import { Render, Provider, Container, useStore } from 'react-login-page';
+import { FC, PropsWithChildren, cloneElement, forwardRef, isValidElement, useState } from 'react';
+import { Render, Provider, Container, useStore, ContainerProps } from 'react-login-page';
 import { Email } from './control/login/Email';
 import { Password } from './control/login/Password';
 import { Submit } from './control/login/Submit';
@@ -139,11 +139,8 @@ const RenderLogin = () => {
   );
 };
 
-const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = ({
-  children,
-  className,
-  ...divProps
-}) => {
+const LoginPage = forwardRef<HTMLDivElement, ContainerProps>((props, ref) => {
+  const { children, className, ...divProps } = props;
   return (
     <Provider>
       <InnerBox />
@@ -163,15 +160,15 @@ const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = (
         Signup
       </Submit>
 
-      <Container {...divProps} className={`login-page10 ${className || ''}`}>
+      <Container {...divProps} ref={ref} className={`login-page10 ${className || ''}`}>
         <RenderLogin />
         {children}
       </Container>
     </Provider>
   );
-};
+});
 
-type LoginComponent = FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> & {
+type LoginComponent = typeof LoginPage & {
   Email: typeof Email;
   Password: typeof Password;
   Submit: typeof Submit;

diff --git a/pages/page11/src/index.tsx b/pages/page11/src/index.tsx
@@ -1,5 +1,5 @@
-import { FC, PropsWithChildren, cloneElement, isValidElement } from 'react';
-import { Render, Provider, Container, useStore } from 'react-login-page';
+import { cloneElement, forwardRef, isValidElement } from 'react';
+import { Render, Provider, Container, useStore, ContainerProps } from 'react-login-page';
 import { Username } from './control/Username';
 import { Password } from './control/Password';
 import { Submit } from './control/Submit';
@@ -64,11 +64,8 @@ const RenderLogin = () => {
   );
 };
 
-const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = ({
-  children,
-  className,
-  ...divProps
-}) => {
+const LoginPage = forwardRef<HTMLDivElement, ContainerProps>((props, ref) => {
+  const { children, className, ...divProps } = props;
   return (
     <Provider>
       <Username label="Username" />
@@ -77,15 +74,15 @@ const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = (
       <Logo />
       <Title />
       <Banner />
-      <Container {...divProps} className={`login-page11 ${className || ''}`}>
+      <Container {...divProps} ref={ref} className={`login-page11 ${className || ''}`}>
         <RenderLogin />
         {children}
       </Container>
     </Provider>
   );
-};
+});
 
-type LoginComponent = FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> & {
+type LoginComponent = typeof LoginPage & {
   Username: typeof Username;
   Password: typeof Password;
   Submit: typeof Submit;

diff --git a/pages/page2/src/index.tsx b/pages/page2/src/index.tsx
@@ -1,5 +1,5 @@
-import { FC, PropsWithChildren, cloneElement, isValidElement } from 'react';
-import { Render, Provider, Container, useStore } from 'react-login-page';
+import { cloneElement, forwardRef, isValidElement } from 'react';
+import { Render, Provider, Container, useStore, ContainerProps } from 'react-login-page';
 import { Email } from './control/Email';
 import { Password } from './control/Password';
 import { Submit } from './control/Submit';
@@ -61,11 +61,8 @@ const RenderLogin = () => {
   );
 };
 
-const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = ({
-  children,
-  className,
-  ...divProps
-}) => {
+const LoginPage = forwardRef<HTMLDivElement, ContainerProps>((props, ref) => {
+  const { children, className, ...divProps } = props;
   return (
     <Provider>
       <Banner />
@@ -74,15 +71,15 @@ const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = (
       <Logo />
       <Title />
       <Submit />
-      <Container {...divProps} className={`login-page2 ${className || ''}`}>
+      <Container {...divProps} ref={ref} className={`login-page2 ${className || ''}`}>
         <RenderLogin />
       </Container>
       {children}
     </Provider>
   );
-};
+});
 
-type LoginComponent = FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> & {
+type LoginComponent = typeof LoginPage & {
   Email: typeof Email;
   Password: typeof Password;
   Submit: typeof Submit;

diff --git a/pages/page3/src/index.tsx b/pages/page3/src/index.tsx
@@ -1,5 +1,5 @@
-import { FC, PropsWithChildren, cloneElement, isValidElement } from 'react';
-import { Render, Provider, Container, useStore } from 'react-login-page';
+import { cloneElement, forwardRef, isValidElement } from 'react';
+import { Render, Provider, Container, useStore, ContainerProps } from 'react-login-page';
 import { Email } from './control/Email';
 import { Password } from './control/Password';
 import { Submit } from './control/Submit';
@@ -70,11 +70,8 @@ const RenderLogin = () => {
   );
 };
 
-const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = ({
-  children,
-  className,
-  ...divProps
-}) => {
+const LoginPage = forwardRef<HTMLDivElement, ContainerProps>((props, ref) => {
+  const { children, className, ...divProps } = props;
   return (
     <Provider>
       <Banner />
@@ -85,15 +82,15 @@ const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = (
       <Welcome />
       <Submit />
       <ButtonAfter />
-      <Container {...divProps} className={`login-page3 ${className || ''}`}>
+      <Container {...divProps} ref={ref} className={`login-page3 ${className || ''}`}>
         <RenderLogin />
+        {children}
       </Container>
-      {children}
     </Provider>
   );
-};
+});
 
-type LoginComponent = FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> & {
+type LoginComponent = typeof LoginPage & {
   Email: typeof Email;
   Password: typeof Password;
   Submit: typeof Submit;

diff --git a/pages/page4/src/index.tsx b/pages/page4/src/index.tsx
@@ -1,5 +1,5 @@
-import { FC, PropsWithChildren, cloneElement, isValidElement } from 'react';
-import { Render, Provider, Container, useStore } from 'react-login-page';
+import { cloneElement, forwardRef, isValidElement } from 'react';
+import { Render, Provider, Container, useStore, ContainerProps } from 'react-login-page';
 import { Email } from './control/Email';
 import { Password } from './control/Password';
 import { Submit } from './control/Submit';
@@ -68,11 +68,8 @@ const RenderLogin = () => {
   );
 };
 
-const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = ({
-  children,
-  className,
-  ...divProps
-}) => {
+const LoginPage = forwardRef<HTMLDivElement, ContainerProps>((props, ref) => {
+  const { children, className, ...divProps } = props;
   return (
     <Provider>
       <Email />
@@ -81,15 +78,15 @@ const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = (
       <Title />
       <Title />
       <Submit />
-      <Container {...divProps} className={`login-page4 ${className || ''}`}>
+      <Container {...divProps} ref={ref} className={`login-page4 ${className || ''}`}>
         <RenderLogin />
       </Container>
       {children}
     </Provider>
   );
-};
+});
 
-type LoginComponent = FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> & {
+type LoginComponent = typeof LoginPage & {
   Email: typeof Email;
   Password: typeof Password;
   Submit: typeof Submit;

diff --git a/pages/page5/src/index.tsx b/pages/page5/src/index.tsx
@@ -1,5 +1,5 @@
-import { FC, PropsWithChildren, cloneElement, isValidElement } from 'react';
-import { Render, Provider, Container, useStore } from 'react-login-page';
+import { cloneElement, forwardRef, isValidElement } from 'react';
+import { Render, Provider, Container, useStore, ContainerProps } from 'react-login-page';
 import { Username } from './control/Username';
 import { Password } from './control/Password';
 import { Submit } from './control/Submit';
@@ -58,27 +58,24 @@ const RenderLogin = () => {
   );
 };
 
-const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = ({
-  children,
-  className,
-  ...divProps
-}) => {
+const LoginPage = forwardRef<HTMLDivElement, ContainerProps>((props, ref) => {
+  const { children, className, ...divProps } = props;
   return (
     <Provider>
       <Username />
       <Password />
       <Logo />
       <Title />
       <Submit />
-      <Container {...divProps} className={`login-page5 ${className || ''}`}>
+      <Container {...divProps} ref={ref} className={`login-page5 ${className || ''}`}>
         <RenderLogin />
+        {children}
       </Container>
-      {children}
     </Provider>
   );
-};
+});
 
-type LoginComponent = FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> & {
+type LoginComponent = typeof LoginPage & {
   Username: typeof Username;
   Password: typeof Password;
   Submit: typeof Submit;