feat(page3): add field label.

Author: jaywcjlove

core/src/store.tsx

@@ -15,6 +15,7 @@ export interface RenderStateProps<T extends BlockTagType = 'div'> {
   buttons?: Record<string, Buttons | null>;
   blocks?: Record<string, Blocks<T> | null>;
   extra?: Record<string, React.ReactNode>;
+  [keyname: string]: any;
 }
 
 interface Control<T> {

pages/page3/README.md

@@ -51,7 +51,7 @@ const Demo = () => (
     <LoginPage>
       <Banner style={{ backgroundImage: `url(${defaultBannerImage})` }} />
       <Email name="userUserName" />
-      <Password placeholder="请输入密码" name="userPassword" />
+      <Password placeholder="请输入密码" label="密码" name="userPassword" />
       <Submit>提交</Submit>
       <Reset>重置</Reset>
       <Welcome>欢迎回来！ 登录您的帐户以查看今天的客户：</Welcome>
@@ -103,11 +103,11 @@ const Demo = () => (
     <Logo>
       <LoginLogo />
     </Logo>
-    <Email index={3} type="text" placeholder="Username" />
+    <Email index={3} type="text" placeholder="Email" />
     <Password index={2} />
-    <Input name="phone" index={1} placeholder="Phone number">
+    <Email rename="phone" label="Phone:" type="tel" index={1} placeholder="Phone number">
       <div>xx</div>
-    </Input>
+    </Email>
     <Banner style={{ backgroundImage: `url(${defaultBannerImage})` }} />
     <ButtonAfter>
       Forgot <a href="#">Username / Password?</a>
@@ -223,7 +223,7 @@ Custom CSS style overrides
 Components be provided to modify control properties and perform other related functions.
 
 ```jsx
-import LoginPage from '@react-login-page/page3';
+import Login from '@react-login-page/page3';
 // buttons
 import { Reset, Submit } from '@react-login-page/page3';
 // blocks
@@ -234,24 +234,24 @@ import { Email, Password } from '@react-login-page/page3';
 import defaultBannerImage from '@react-login-page/page3/banner-image';
 
 // Basic Components
-import { Button, Input } from '@react-login-page/page3';
+import { Button } from '@react-login-page/page3';
 // or
-import { Button, Input } from 'react-login-page';
+import { Button } from 'react-login-page';
 
-<LoginPage>
+<Login>
   <Password index={2} />
-</LoginPage>
+</Login>
 
 // Define the order of `Password` controls
 <Password index={2} />
 
 // Hiding the `Password` control
 <Password visible={false} />
 
-// Add input control
-<Input name="phone" index={1} placeholder="Phone number">
-  <svg>...</svg>
-</Input>
+// Add new input control
+<Email rename="phone" label="Phone:" type="tel" index={1} placeholder="Phone number">
+  <div>xx</div>
+</Email>
 
 // Add content after the button
 <ButtonAfter>

pages/page3/src/control/Email.tsx

@@ -1,12 +1,23 @@
-import { FC } from 'react';
-import { Input, InputProps } from 'react-login-page';
+import { FC, memo, useEffect } from 'react';
+import { Input, InputProps, useStore } from 'react-login-page';
 import { EmailIcon } from '../icons/email';
 
-export interface EmailProps extends InputProps {};
-export const Email: FC<EmailProps> = (props) => {
-  const { name,  ...elmProps } = props;
+export interface EmailProps extends InputProps {
+  label?: React.ReactNode;
+};
+export const Email: FC<EmailProps> = memo((props) => {
+  const { name, rename, label = 'Email:', ...elmProps } = props;
+  const { dispatch } = useStore();
   if (!elmProps.children) {
     elmProps.children = EmailIcon
   }
-  return <Input placeholder="Email" spellCheck={false} {...elmProps} type="email" name="email" rename={name} />;
-};
+
+  const nameProps = { name: 'email', rename: name };
+  if (rename) {
+    nameProps.name = rename;
+  }
+
+  useEffect(() => dispatch({ [`$${nameProps.name}`]: label }), [label]);
+
+  return <Input type="email" placeholder="Email" spellCheck={false} {...elmProps} {...nameProps} />;
+});

pages/page3/src/control/Password.tsx

@@ -1,12 +1,23 @@
-import { FC } from 'react';
-import { Input, InputProps } from 'react-login-page';
+import { FC, memo, useEffect } from 'react';
+import { Input, InputProps, useStore } from 'react-login-page';
 import { LockIcon } from '../icons/lock';
 
-export interface PasswordProps extends InputProps {};
-export const Password: FC<PasswordProps> = (props) => {
-  const { name, ...elmProps } = props;
+export interface PasswordProps extends InputProps {
+  label?: React.ReactNode;
+};
+export const Password: FC<PasswordProps> = memo((props) => {
+  const { name, rename, label = 'Password:', ...elmProps } = props;
+  const { dispatch } = useStore();
   if (!elmProps.children) {
     elmProps.children = LockIcon
   }
-  return <Input type="password" placeholder="Password" {...elmProps} name="password" rename={name} />;
-};
+
+  const nameProps = { name: 'password', rename: name };
+  if (rename) {
+    nameProps.name = rename;
+  }
+
+  useEffect(() => dispatch({ [`$${nameProps.name}`]: label }), [label]);
+
+  return <Input type="password" placeholder="Password" {...elmProps} {...nameProps} />;
+});

pages/page3/src/control/Reset.tsx

@@ -6,5 +6,5 @@ export const Reset: FC<Omit<ButtonProps, 'name'>> = (props) => {
   if (!elmProps.children) {
     elmProps.children = 'Reset';
   }
-  return <Button {...elmProps} name="reset" />;
+  return <Button type="reset" {...elmProps} name="reset" />;
 };

pages/page3/src/index.css

@@ -44,23 +44,22 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  height: 100%;
+  min-height: 100%;
 }
 
 .login-page3-inner {
   background: var(--login-inner-bg);
   border-radius: 10px;
-  overflow: hidden;
   --gap: 0.37rem;
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
+  align-items: stretch;
   justify-content: space-between;
   box-shadow: 0px 2px 6px -1px rgba(0, 0, 0, 0.12);
 }
 
 .login-page3-inner > aside {
-  height: 100%;
+  height: auto;
   overflow: hidden;
 }
 
@@ -148,6 +147,23 @@
   outline: 0;
 }
 
+.login-page3-label {
+  position: absolute;
+  padding: 0 0 0 43px;
+  transition: all 0.3s ease;
+  opacity: 0;
+  font-size: 14px;
+}
+
+.login-page3-inner label > input:not(:placeholder-shown) {
+  padding: 28px 0px 12px 0px;
+}
+.login-page3-inner label > input:not(:placeholder-shown) + .login-page3-label,
+.login-page3-inner label > input:-webkit-autofill:not(:placeholder-shown) + .login-page3-label {
+  transform: translateY(-12px);
+  opacity: 0.7;
+}
+
 .login-page3-inner input::placeholder {
   color: var(--login-input-placeholder);
 }

pages/page3/src/index.tsx

@@ -24,7 +24,7 @@ export * from './control/Logo';
 export * from './control/Banner';
 
 const RenderLogin = () => {
-  const { blocks = {}, extra = {}, data } = useStore();
+  const { blocks = {}, extra = {}, data, ...label } = useStore();
   const { fields, buttons } = data || { fields: [] };
   return (
     <Render>
@@ -40,7 +40,14 @@ const RenderLogin = () => {
           </header>
           {fields.sort((a, b) => a.index - b.index).map((item, idx) => {
             if (!item.children) return null;
-            return <label key={item.name + idx}>{item.children}{extra[item.name]}</label>
+            const labelElement = label[`$${item.name}`];
+            return (
+              <label key={item.name + idx}>
+                {item.children}
+                {labelElement && <span className={`login-page3-label`}>{labelElement}</span>}
+                {extra[item.name]}
+              </label>
+            )
           })}
           <section>
             {buttons.sort((a, b) => a.index - b.index).map((item, idx) => {

website/src/comps/NavMenu.tsx

@@ -3,6 +3,7 @@ import { mediaStyle } from './DocsLayout';
 import { ReactComponent as LogoIcon } from '../svg/logo-large.svg';
 import { NavLink } from "react-router-dom";
 import { Nav } from "./Nav";
+import { FC, PropsWithChildren } from "react";
 
 const Header = styled.header`
   border-top: 1px solid var(--color-border-muted);
@@ -16,6 +17,9 @@ const Header = styled.header`
   top: 0;
   right: 0;
   display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 `;
 
 const Inner = styled.div`
@@ -31,9 +35,10 @@ const Logo = styled(LogoIcon)`
   display: block;
 `;
 
-export const NavMenu = () =>{
+export const NavMenu: FC<PropsWithChildren> = ({ children }) =>{
   return (
   <Header>
+    {children}
     <Inner>
       <NavLink to="/">
         <Logo height={32} />

website/src/comps/Preview.tsx

@@ -50,6 +50,7 @@ const Example = styled.div`
   right: 0;
   z-index: 9;
   height: 100vh;
+  overflow: auto;
 `;
 
 
@@ -76,28 +77,34 @@ const PageArrow = styled.div`
   height: 28px;
   background-color: rgb(255 255 255 / 57%);
   margin: 0px auto;
-  position: relative;
+  position: absolute;
   top: -3rem;
   border-radius: 0.51rem;
 `;
 
 export const Preview: FC<PropsWithChildren<PreviewProps>> = (props) => {
-  const { mdData } = useMdData(props.path);
+  const { mdData, loading } = useMdData(props.path);
   return (
     <Fragment>
       <ScrollRestoration />
       {!props.disableNav && <DocsNav />}
       {props.disableNav && (
         <Example>
           {props.children}
+        </Example>
+      )}
+      {props.disableNav && (
+        <NavMenu>
           <PageArrow>
             <Arrow />
           </PageArrow>
-        </Example>
+        </NavMenu>
       )}
-      {props.disableNav && <NavMenu />}
       <Wrapper isShowExample={props.disableNav}>
-        {mdData && (
+        {loading && (
+          <div>Loading...</div>
+        )}
+        {mdData && !loading && (
           <Markdown
             source={mdData.source}
             rehypeRewrite={(node: Root | RootContent, index: number, parent: Root | Element) => {

website/src/comps/useMdData.tsx

@@ -11,11 +11,6 @@ export const useMdData = (path: MdDataHandle) => {
   });
   const [loading, setLoading] = useState(false);
 
-  useEffect(() => {
-    const $main = document.getElementsByTagName('main') as HTMLCollectionOf<HTMLDivElement>;
-    $main[0] && $main[0].scrollTo(0, 0);
-  }, [path]);
-
   useEffect(() => {
     setLoading(() => true);
     const getMd = async () => {