Skip to content

Commit 0077073

Browse files
jaywcjlovejaywcjlove
committed
fix: fix container ref issue.
1 parent 8532b33 commit 0077073

File tree

14 files changed

+98
-143
lines changed

14 files changed

+98
-143
lines changed

‎core/src/Container.tsx

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,12 @@
1-
import React, { useImperativeHandle, useRef } from 'react';
1+
import React from 'react';
22
import { LoginProps } from '.';
33

4-
export interface ContainerRef {
5-
container?: HTMLDivElement | null;
6-
}
7-
84
export interface ContainerProps extends LoginProps {}
9-
export const Container = React.forwardRef<ContainerRef, ContainerProps>((props, ref) => {
5+
export const Container = React.forwardRef<HTMLDivElement, ContainerProps>((props, ref) => {
106
const { className = '', children, ...elmProps } = props;
11-
const container = useRef<HTMLDivElement>(null);
12-
useImperativeHandle(ref, () => ({ container: container.current }), [container]);
137
const defaultClassNames = `login-page ${className}`;
148
return (
15-
<div ref={container} className={defaultClassNames} {...elmProps}>
9+
<div ref={ref} className={defaultClassNames} {...elmProps}>
1610
{children}
1711
</div>
1812
);

‎core/src/index.tsx

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { Provider } from './store';
3-
import { Container, ContainerRef } from './Container';
3+
import { Container, ContainerProps } from './Container';
44
import { Block } from './Block';
55
import { Textarea } from './Textarea';
66
import { Select } from './Select';
@@ -18,14 +18,6 @@ export * from './store';
1818
export interface LoginRef {}
1919
export interface LoginProps extends React.HTMLAttributes<HTMLDivElement> {}
2020

21-
const InternalLogin = (props: LoginProps, ref?: React.ForwardedRef<ContainerRef>) => {
22-
return (
23-
<Provider>
24-
<Container {...props} ref={ref} />
25-
</Provider>
26-
);
27-
};
28-
2921
type LoginComponent = React.FC<React.PropsWithRef<LoginProps>> & {
3022
Block: typeof Block;
3123
Button: typeof Button;
@@ -34,7 +26,13 @@ type LoginComponent = React.FC<React.PropsWithRef<LoginProps>> & {
3426
Select: typeof Select;
3527
};
3628

37-
const Login: LoginComponent = React.forwardRef<ContainerRef>(InternalLogin) as unknown as LoginComponent;
29+
const Login: LoginComponent = React.forwardRef<HTMLDivElement, ContainerProps>((props, ref) => {
30+
return (
31+
<Provider>
32+
<Container {...props} ref={ref} />
33+
</Provider>
34+
);
35+
}) as unknown as LoginComponent;
3836

3937
Login.Block = Block;
4038
Login.Button = Button;

‎pages/base/src/index.tsx

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { FC, PropsWithChildren, cloneElement, isValidElement } from 'react';
2-
import { Render, Provider, Container, useStore } from 'react-login-page';
1+
import { cloneElement, forwardRef, isValidElement } from 'react';
2+
import { Render, Provider, Container, ContainerProps, useStore } from 'react-login-page';
33
import { Username } from './control/Username';
44
import { Password } from './control/Password';
55
import { Submit } from './control/Submit';
@@ -59,27 +59,24 @@ const RenderLogin = () => {
5959
);
6060
};
6161

62-
const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = ({
63-
children,
64-
className,
65-
...divProps
66-
}) => {
62+
const LoginPage = forwardRef<HTMLDivElement, ContainerProps>((props, ref) => {
63+
const { children, className, ...divProps } = props;
6764
return (
6865
<Provider>
6966
<Username />
7067
<Password />
7168
<Logo />
7269
<Title />
7370
<Submit />
74-
<Container {...divProps} className={`login-page-base ${className || ''}`}>
71+
<Container {...divProps} ref={ref} className={`login-page-base ${className || ''}`}>
7572
<RenderLogin />
7673
{children}
7774
</Container>
7875
</Provider>
7976
);
80-
};
77+
});
8178

82-
type LoginComponent = FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> & {
79+
type LoginComponent = typeof LoginPage & {
8380
Username: typeof Username;
8481
Password: typeof Password;
8582
Submit: typeof Submit;

‎pages/page1/src/index.tsx

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { FC, PropsWithChildren, cloneElement, isValidElement } from 'react';
2-
import { Render, Provider, Container, useStore } from 'react-login-page';
1+
import { cloneElement, forwardRef, isValidElement } from 'react';
2+
import { Render, Provider, Container, useStore, ContainerProps } from 'react-login-page';
33
import { Username } from './control/Username';
44
import { Password } from './control/Password';
55
import { Submit } from './control/Submit';
@@ -58,27 +58,24 @@ const RenderLogin = () => {
5858
);
5959
};
6060

61-
const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = ({
62-
children,
63-
className,
64-
...divProps
65-
}) => {
61+
const LoginPage = forwardRef<HTMLDivElement, ContainerProps>((props, ref) => {
62+
const { children, className, ...divProps } = props;
6663
return (
6764
<Provider>
6865
<Username />
6966
<Password />
7067
<Logo />
7168
<Title />
7269
<Submit />
73-
<Container {...divProps} className={`login-page-1 ${className || ''}`}>
70+
<Container {...divProps} ref={ref} className={`login-page-1 ${className || ''}`}>
7471
<RenderLogin />
72+
{children}
7573
</Container>
76-
{children}
7774
</Provider>
7875
);
79-
};
76+
});
8077

81-
type LoginComponent = FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> & {
78+
type LoginComponent = typeof LoginPage & {
8279
Username: typeof Username;
8380
Password: typeof Password;
8481
Submit: typeof Submit;

‎pages/page10/src/index.tsx

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { FC, Fragment, PropsWithChildren, cloneElement, isValidElement, useState } from 'react';
2-
import { Render, Provider, Container, useStore } from 'react-login-page';
1+
import { FC, PropsWithChildren, cloneElement, forwardRef, isValidElement, useState } from 'react';
2+
import { Render, Provider, Container, useStore, ContainerProps } from 'react-login-page';
33
import { Email } from './control/login/Email';
44
import { Password } from './control/login/Password';
55
import { Submit } from './control/login/Submit';
@@ -139,11 +139,8 @@ const RenderLogin = () => {
139139
);
140140
};
141141

142-
const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = ({
143-
children,
144-
className,
145-
...divProps
146-
}) => {
142+
const LoginPage = forwardRef<HTMLDivElement, ContainerProps>((props, ref) => {
143+
const { children, className, ...divProps } = props;
147144
return (
148145
<Provider>
149146
<InnerBox />
@@ -163,15 +160,15 @@ const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = (
163160
Signup
164161
</Submit>
165162

166-
<Container {...divProps} className={`login-page10 ${className || ''}`}>
163+
<Container {...divProps} ref={ref} className={`login-page10 ${className || ''}`}>
167164
<RenderLogin />
168165
{children}
169166
</Container>
170167
</Provider>
171168
);
172-
};
169+
});
173170

174-
type LoginComponent = FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> & {
171+
type LoginComponent = typeof LoginPage & {
175172
Email: typeof Email;
176173
Password: typeof Password;
177174
Submit: typeof Submit;

‎pages/page11/src/index.tsx

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { FC, PropsWithChildren, cloneElement, isValidElement } from 'react';
2-
import { Render, Provider, Container, useStore } from 'react-login-page';
1+
import { cloneElement, forwardRef, isValidElement } from 'react';
2+
import { Render, Provider, Container, useStore, ContainerProps } from 'react-login-page';
33
import { Username } from './control/Username';
44
import { Password } from './control/Password';
55
import { Submit } from './control/Submit';
@@ -64,11 +64,8 @@ const RenderLogin = () => {
6464
);
6565
};
6666

67-
const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = ({
68-
children,
69-
className,
70-
...divProps
71-
}) => {
67+
const LoginPage = forwardRef<HTMLDivElement, ContainerProps>((props, ref) => {
68+
const { children, className, ...divProps } = props;
7269
return (
7370
<Provider>
7471
<Username label="Username" />
@@ -77,15 +74,15 @@ const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = (
7774
<Logo />
7875
<Title />
7976
<Banner />
80-
<Container {...divProps} className={`login-page11 ${className || ''}`}>
77+
<Container {...divProps} ref={ref} className={`login-page11 ${className || ''}`}>
8178
<RenderLogin />
8279
{children}
8380
</Container>
8481
</Provider>
8582
);
86-
};
83+
});
8784

88-
type LoginComponent = FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> & {
85+
type LoginComponent = typeof LoginPage & {
8986
Username: typeof Username;
9087
Password: typeof Password;
9188
Submit: typeof Submit;

‎pages/page2/src/index.tsx

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { FC, PropsWithChildren, cloneElement, isValidElement } from 'react';
2-
import { Render, Provider, Container, useStore } from 'react-login-page';
1+
import { cloneElement, forwardRef, isValidElement } from 'react';
2+
import { Render, Provider, Container, useStore, ContainerProps } from 'react-login-page';
33
import { Email } from './control/Email';
44
import { Password } from './control/Password';
55
import { Submit } from './control/Submit';
@@ -61,11 +61,8 @@ const RenderLogin = () => {
6161
);
6262
};
6363

64-
const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = ({
65-
children,
66-
className,
67-
...divProps
68-
}) => {
64+
const LoginPage = forwardRef<HTMLDivElement, ContainerProps>((props, ref) => {
65+
const { children, className, ...divProps } = props;
6966
return (
7067
<Provider>
7168
<Banner />
@@ -74,15 +71,15 @@ const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = (
7471
<Logo />
7572
<Title />
7673
<Submit />
77-
<Container {...divProps} className={`login-page2 ${className || ''}`}>
74+
<Container {...divProps} ref={ref} className={`login-page2 ${className || ''}`}>
7875
<RenderLogin />
7976
</Container>
8077
{children}
8178
</Provider>
8279
);
83-
};
80+
});
8481

85-
type LoginComponent = FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> & {
82+
type LoginComponent = typeof LoginPage & {
8683
Email: typeof Email;
8784
Password: typeof Password;
8885
Submit: typeof Submit;

‎pages/page3/src/index.tsx

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { FC, PropsWithChildren, cloneElement, isValidElement } from 'react';
2-
import { Render, Provider, Container, useStore } from 'react-login-page';
1+
import { cloneElement, forwardRef, isValidElement } from 'react';
2+
import { Render, Provider, Container, useStore, ContainerProps } from 'react-login-page';
33
import { Email } from './control/Email';
44
import { Password } from './control/Password';
55
import { Submit } from './control/Submit';
@@ -70,11 +70,8 @@ const RenderLogin = () => {
7070
);
7171
};
7272

73-
const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = ({
74-
children,
75-
className,
76-
...divProps
77-
}) => {
73+
const LoginPage = forwardRef<HTMLDivElement, ContainerProps>((props, ref) => {
74+
const { children, className, ...divProps } = props;
7875
return (
7976
<Provider>
8077
<Banner />
@@ -85,15 +82,15 @@ const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = (
8582
<Welcome />
8683
<Submit />
8784
<ButtonAfter />
88-
<Container {...divProps} className={`login-page3 ${className || ''}`}>
85+
<Container {...divProps} ref={ref} className={`login-page3 ${className || ''}`}>
8986
<RenderLogin />
87+
{children}
9088
</Container>
91-
{children}
9289
</Provider>
9390
);
94-
};
91+
});
9592

96-
type LoginComponent = FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> & {
93+
type LoginComponent = typeof LoginPage & {
9794
Email: typeof Email;
9895
Password: typeof Password;
9996
Submit: typeof Submit;

‎pages/page4/src/index.tsx

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { FC, PropsWithChildren, cloneElement, isValidElement } from 'react';
2-
import { Render, Provider, Container, useStore } from 'react-login-page';
1+
import { cloneElement, forwardRef, isValidElement } from 'react';
2+
import { Render, Provider, Container, useStore, ContainerProps } from 'react-login-page';
33
import { Email } from './control/Email';
44
import { Password } from './control/Password';
55
import { Submit } from './control/Submit';
@@ -68,11 +68,8 @@ const RenderLogin = () => {
6868
);
6969
};
7070

71-
const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = ({
72-
children,
73-
className,
74-
...divProps
75-
}) => {
71+
const LoginPage = forwardRef<HTMLDivElement, ContainerProps>((props, ref) => {
72+
const { children, className, ...divProps } = props;
7673
return (
7774
<Provider>
7875
<Email />
@@ -81,15 +78,15 @@ const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = (
8178
<Title />
8279
<Title />
8380
<Submit />
84-
<Container {...divProps} className={`login-page4 ${className || ''}`}>
81+
<Container {...divProps} ref={ref} className={`login-page4 ${className || ''}`}>
8582
<RenderLogin />
8683
</Container>
8784
{children}
8885
</Provider>
8986
);
90-
};
87+
});
9188

92-
type LoginComponent = FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> & {
89+
type LoginComponent = typeof LoginPage & {
9390
Email: typeof Email;
9491
Password: typeof Password;
9592
Submit: typeof Submit;

‎pages/page5/src/index.tsx

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { FC, PropsWithChildren, cloneElement, isValidElement } from 'react';
2-
import { Render, Provider, Container, useStore } from 'react-login-page';
1+
import { cloneElement, forwardRef, isValidElement } from 'react';
2+
import { Render, Provider, Container, useStore, ContainerProps } from 'react-login-page';
33
import { Username } from './control/Username';
44
import { Password } from './control/Password';
55
import { Submit } from './control/Submit';
@@ -58,27 +58,24 @@ const RenderLogin = () => {
5858
);
5959
};
6060

61-
const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = ({
62-
children,
63-
className,
64-
...divProps
65-
}) => {
61+
const LoginPage = forwardRef<HTMLDivElement, ContainerProps>((props, ref) => {
62+
const { children, className, ...divProps } = props;
6663
return (
6764
<Provider>
6865
<Username />
6966
<Password />
7067
<Logo />
7168
<Title />
7269
<Submit />
73-
<Container {...divProps} className={`login-page5 ${className || ''}`}>
70+
<Container {...divProps} ref={ref} className={`login-page5 ${className || ''}`}>
7471
<RenderLogin />
72+
{children}
7573
</Container>
76-
{children}
7774
</Provider>
7875
);
79-
};
76+
});
8077

81-
type LoginComponent = FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> & {
78+
type LoginComponent = typeof LoginPage & {
8279
Username: typeof Username;
8380
Password: typeof Password;
8481
Submit: typeof Submit;

0 commit comments

Comments
 (0)