Skip to content

Commit be68ad4

Browse files
jaywcjlovejaywcjlove
committed
feat(page10): add InnerBox component.
1 parent c3c1945 commit be68ad4

File tree

5 files changed

+127
-77
lines changed

5 files changed

+127
-77
lines changed

‎pages/page10/README.md

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,10 @@ import LoginImg from '@react-login-page/page10/bg.png';
2525
import LoginInnerBgImg from '@react-login-page/page10/inner-bg.jpg';
2626

2727
const Demo = () => (
28-
<Login
29-
style={{ height: 690, backgroundImage: `url(${LoginImg})`, '--login-inner-image': `url("${LoginInnerBgImg}")` }}
30-
/>
28+
<Login style={{ height: 690, backgroundImage: `url(${LoginImg})` }}>
29+
<Login.InnerBox style={{ backgroundImage: `url(${LoginInnerBgImg})` }} />
30+
<Login.InnerBox panel="signup" style={{ backgroundImage: `url(${LoginInnerBgImg})` }} />
31+
</Login>
3132
);
3233

3334
export default Demo;
@@ -37,7 +38,16 @@ export default Demo;
3738

3839
```jsx mdx:preview
3940
import React from 'react';
40-
import LoginPage, { Email, Password, TitleSignup, TitleLogin, Submit, Title, Logo } from '@react-login-page/page10';
41+
import LoginPage, {
42+
Email,
43+
Password,
44+
InnerBox,
45+
TitleSignup,
46+
TitleLogin,
47+
Submit,
48+
Title,
49+
Logo,
50+
} from '@react-login-page/page10';
4151
import LoginLogo from 'react-login-page/logo';
4252
import LoginImg from '@react-login-page/page10/bg.png';
4353
import LoginInnerBgImg from '@react-login-page/page10/inner-bg.jpg';
@@ -46,6 +56,8 @@ const Demo = () => (
4656
<LoginPage
4757
style={{ height: 690, backgroundImage: `url(${LoginImg})`, '--login-inner-image': `url("${LoginInnerBgImg}")` }}
4858
>
59+
<InnerBox style={{ backgroundImage: `url(${LoginInnerBgImg})` }} />
60+
<InnerBox panel="signup" style={{ backgroundImage: `url(${LoginInnerBgImg})` }} />
4961
<Title />
5062
<TitleSignup>注册</TitleSignup>
5163
<TitleLogin>登录</TitleLogin>
@@ -306,7 +318,7 @@ import LoginPage from '@react-login-page/page10';
306318
// buttons
307319
import { Reset, Submit } from '@react-login-page/page10';
308320
// blocks
309-
import { Logo, Title, TitleLogin, TitleSignup, Footer } from '@react-login-page/page10';
321+
import { Logo, InnerBox, Title, TitleLogin, TitleSignup, Footer } from '@react-login-page/page10';
310322
// fields
311323
import { Email, Password } from '@react-login-page/page10';
312324

@@ -331,6 +343,9 @@ import LoginInnerBgImg from '@react-login-page/page9/inner-bg.jpg';
331343
// Modify logo image
332344
<Logo>⚛️</Logo>
333345

346+
<InnerBox style={{ backgroundImage: `url(${LoginInnerBgImg})` }} />
347+
<InnerBox panel="signup" style={{ backgroundImage: `url(${LoginInnerBgImg})` }} />
348+
334349
// Signup Fields
335350
<Email panel="signup" keyname="e-mail" />
336351
<Password panel="signup" placeholder="Your Password" keyname="password" />
@@ -352,6 +367,9 @@ import Login from '@react-login-page/page10';
352367
// Define the order of `Password` controls
353368
<Login.Password index={2} />
354369

370+
<Login.InnerBox style={{ backgroundImage: `url(${LoginInnerBgImg})` }} />
371+
<Login.InnerBox panel="signup" style={{ backgroundImage: `url(${LoginInnerBgImg})` }} />
372+
355373
// Hiding the `Password` control
356374
<Login.Password visible={false} />
357375

‎pages/page10/src/control/InnerBox.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Block, BlockProps, BlockTagType } from 'react-login-page';
2+
3+
export interface InnerBoxProps<Tag extends BlockTagType> extends BlockProps<Tag> {
4+
panel?: 'login' | 'signup';
5+
}
6+
7+
export const InnerBox = <Tag extends BlockTagType = 'article'>(props: InnerBoxProps<Tag | 'article'>) => {
8+
const { keyname = 'article', panel = 'login', ...elmProps } = props;
9+
return <Block {...elmProps} keyname={`$$${panel}${keyname}`} tagName="article" />;
10+
};
11+
12+
InnerBox.displayName = 'Login.InnerBox';

‎pages/page10/src/index.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,6 @@
145145
background-position: bottom center;
146146
background-repeat: no-repeat;
147147
background-size: 300%;
148-
background-image: var(--login-inner-image);
149148
position: absolute;
150149
border-radius: 6px;
151150
left: 0;

‎pages/page10/src/index.tsx

Lines changed: 86 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { FC, PropsWithChildren, cloneElement, isValidElement, useState } from 'react';
1+
import { FC, Fragment, PropsWithChildren, cloneElement, isValidElement, useState } from 'react';
22
import { Render, Provider, Container, useStore } 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';
66
import { Footer } from './control/Footer';
77
import { Logo } from './control/Logo';
88
import { Title } from './control/Title';
9+
import { InnerBox } from './control/InnerBox';
910
import { TitleLogin } from './control/TitleLogin';
1011
import { TitleSignup } from './control/TitleSignup';
1112
import { IconUser } from './icons/user';
@@ -17,6 +18,7 @@ export * from 'react-login-page';
1718
export * from './control/login/Email';
1819
export * from './control/login/Password';
1920
export * from './control/login/Submit';
21+
export * from './control/InnerBox';
2022
export * from './control/Title';
2123
export * from './control/TitleLogin';
2224
export * from './control/TitleSignup';
@@ -32,6 +34,10 @@ const RenderLogin = () => {
3234
const signupButtons = buttons.filter((m) => m.name.indexOf(`$$signup`) > -1).sort((a, b) => a.index - b.index);
3335
const signupFields = fields.filter((m) => m.name.indexOf(`$$signup`) > -1).sort((a, b) => a.index - b.index);
3436
const switchButton = () => setPanel(panel === 'login' ? 'signup' : 'login');
37+
const loginarticle = blocks[`$$loginarticle`];
38+
const loginArticleProps = loginarticle?.props || {};
39+
const signuparticle = blocks[`$$signuparticle`];
40+
const signupArticleProps = signuparticle?.props || {};
3541
return (
3642
<Render>
3743
<section className={`login-page10-toggle ${panel === 'login' ? 'active-login' : 'active-signup'}`}>
@@ -49,78 +55,84 @@ const RenderLogin = () => {
4955
</header>
5056
)}
5157
<main className={panel === 'login' ? 'active-login' : 'active-signup'}>
52-
<article className={panel === 'login' ? 'active' : ''}>
53-
<section className="login-page10-fields login-page10-login">
54-
<h4>{blocks['title-login']}</h4>
55-
{loginFields.map((item, idx) => {
56-
const extraLabel = extra[item.name as keyof typeof extra];
57-
if (!item.children && !extraLabel) return null;
58-
if (!item.children && extraLabel) return <div key={idx}>{extraLabel}</div>;
59-
if (!item.children) return null;
60-
const htmlFor = item.name.replace('$$login', '');
61-
const { name, ...props } = item.children.props;
62-
const labelElement = label[item.name];
63-
return (
64-
<label htmlFor={htmlFor} key={item.name + idx}>
65-
{cloneElement(item.children, {
66-
...props,
67-
name: panel === 'login' ? name : '',
68-
key: item.name + idx,
69-
})}
70-
{extraLabel && <div>{extraLabel}</div>}
71-
{labelElement && <span className={`login-page10-label`}>{labelElement}</span>}
72-
</label>
73-
);
74-
})}
75-
<section className="login-page10-button">
76-
{loginButtons.map((item, idx) => {
77-
const child = item.children;
78-
if (!isValidElement(child)) return null;
79-
return cloneElement(child, {
80-
...child.props,
81-
key: item.name + idx,
82-
});
58+
{loginarticle &&
59+
cloneElement(
60+
loginarticle,
61+
Object.assign({ ...loginArticleProps, className: panel === 'login' ? 'active' : '' }),
62+
<section className="login-page10-fields login-page10-login">
63+
<h4>{blocks['title-login']}</h4>
64+
{loginFields.map((item, idx) => {
65+
const extraLabel = extra[item.name as keyof typeof extra];
66+
if (!item.children && !extraLabel) return null;
67+
if (!item.children && extraLabel) return <div key={idx}>{extraLabel}</div>;
68+
if (!item.children) return null;
69+
const htmlFor = item.name.replace('$$login', '');
70+
const { name, ...props } = item.children.props;
71+
const labelElement = label[item.name];
72+
return (
73+
<label htmlFor={htmlFor} key={item.name + idx}>
74+
{cloneElement(item.children, {
75+
...props,
76+
name: panel === 'login' ? name : '',
77+
key: item.name + idx,
78+
})}
79+
{extraLabel && <div>{extraLabel}</div>}
80+
{labelElement && <span className={`login-page10-label`}>{labelElement}</span>}
81+
</label>
82+
);
8383
})}
84-
</section>
85-
{blocks[`$$loginfooter`]}
86-
</section>
87-
</article>
88-
<article className={panel === 'signup' ? 'active' : ''}>
89-
<section className="login-page10-fields login-page10-signup">
90-
<h4>{blocks['title-signup']}</h4>
91-
{signupFields.map((item, idx) => {
92-
const extraLabel = extra[item.name as keyof typeof extra];
93-
if (!item.children && !extraLabel) return null;
94-
if (!item.children && extraLabel) return <div key={idx}>{extraLabel}</div>;
95-
if (!item.children) return null;
96-
const htmlFor = item.name.replace('$$signup', '');
97-
const { name, ...props } = item.children.props;
98-
const labelElement = label[item.name];
99-
return (
100-
<label htmlFor={htmlFor} key={item.name + idx}>
101-
{cloneElement(item.children, {
102-
...props,
103-
name: panel === 'signup' ? name : '',
84+
<section className="login-page10-button">
85+
{loginButtons.map((item, idx) => {
86+
const child = item.children;
87+
if (!isValidElement(child)) return null;
88+
return cloneElement(child, {
89+
...child.props,
10490
key: item.name + idx,
105-
})}
106-
{extraLabel && <div>{extraLabel}</div>}
107-
{labelElement && <span className={`login-page10-label`}>{labelElement}</span>}
108-
</label>
109-
);
110-
})}
111-
<section className="login-page10-button">
112-
{signupButtons.map((item, idx) => {
113-
const child = item.children;
114-
if (!isValidElement(child)) return null;
115-
return cloneElement(child, {
116-
...child.props,
117-
key: item.name + idx,
118-
});
91+
});
92+
})}
93+
</section>
94+
{blocks[`$$loginfooter`]}
95+
</section>,
96+
)}
97+
{signuparticle &&
98+
cloneElement(
99+
signuparticle,
100+
Object.assign({ ...signupArticleProps, className: panel === 'signup' ? 'active' : '' }),
101+
<section className="login-page10-fields login-page10-signup">
102+
<h4>{blocks['title-signup']}</h4>
103+
{signupFields.map((item, idx) => {
104+
const extraLabel = extra[item.name as keyof typeof extra];
105+
if (!item.children && !extraLabel) return null;
106+
if (!item.children && extraLabel) return <div key={idx}>{extraLabel}</div>;
107+
if (!item.children) return null;
108+
const htmlFor = item.name.replace('$$signup', '');
109+
const { name, ...props } = item.children.props;
110+
const labelElement = label[item.name];
111+
return (
112+
<label htmlFor={htmlFor} key={item.name + idx}>
113+
{cloneElement(item.children, {
114+
...props,
115+
name: panel === 'signup' ? name : '',
116+
key: item.name + idx,
117+
})}
118+
{extraLabel && <div>{extraLabel}</div>}
119+
{labelElement && <span className={`login-page10-label`}>{labelElement}</span>}
120+
</label>
121+
);
119122
})}
120-
</section>
121-
{blocks[`$$signupfooter`]}
122-
</section>
123-
</article>
123+
<section className="login-page10-button">
124+
{signupButtons.map((item, idx) => {
125+
const child = item.children;
126+
if (!isValidElement(child)) return null;
127+
return cloneElement(child, {
128+
...child.props,
129+
key: item.name + idx,
130+
});
131+
})}
132+
</section>
133+
{blocks[`$$signupfooter`]}
134+
</section>,
135+
)}
124136
</main>
125137
</div>
126138
</Render>
@@ -134,6 +146,8 @@ const LoginPage: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = (
134146
}) => {
135147
return (
136148
<Provider>
149+
<InnerBox />
150+
<InnerBox panel="signup" />
137151
<TitleSignup />
138152
<TitleLogin />
139153
<Email />
@@ -163,6 +177,7 @@ type LoginComponent = FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>
163177
Submit: typeof Submit;
164178
Footer: typeof Footer;
165179
Logo: typeof Logo;
180+
InnerBox: typeof InnerBox;
166181
Title: typeof Title;
167182
TitleLogin: typeof TitleLogin;
168183
TitleSignup: typeof TitleSignup;
@@ -175,6 +190,7 @@ Login.Password = Password;
175190
Login.Submit = Submit;
176191
Login.Footer = Footer;
177192
Login.Logo = Logo;
193+
Login.InnerBox = InnerBox;
178194
Login.Title = Title;
179195
Login.TitleLogin = TitleLogin;
180196
Login.TitleSignup = TitleSignup;

‎website/src/pages/Examples.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,5 +140,10 @@ const page10Style = {
140140
} as CSSProperties;
141141
export const page10: Example = {
142142
magnify: 2.5,
143-
children: <Login10 style={page10Style} />,
143+
children: (
144+
<Login10 style={page10Style}>
145+
<Login10.InnerBox style={{ backgroundImage: `url(${Login10InnerBgImg})` }} />
146+
<Login10.InnerBox panel="signup" style={{ backgroundImage: `url(${Login10InnerBgImg})` }} />
147+
</Login10>
148+
),
144149
};

0 commit comments

Comments
 (0)