Skip to content

Commit

Permalink
doc(login-page): update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaywcjlove
jaywcjlove committed Apr 24, 2023
1 parent 910df67 commit 48e18b1
Showing 1 changed file with 128 additions and 73 deletions.
201 changes: 128 additions & 73 deletions core/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,7 @@

<!--rehype:ignore:end-->

Getting Started
===
# Getting Started

Encapsulated login page components based on `react-login-page` basic components are provided for quick installation and use. These components help streamline the process of creating login pages and offer flexible APIs for modifying and packaging these components. Welcome to choose from our encapsulated [login pages](https://uiwjs.github.io/react-login-page). We also welcome [recommendations](https://github.com/uiwjs/react-login-page/issues/new/choose) for more cool login pages, which we will turn into React components.

Expand All @@ -66,10 +65,12 @@ const Demo = () => {
return (
<Login>
<Render>
{({ fields, buttons, blocks }) => {
{({ fields, buttons, blocks, $$index }) => {
return (
<div>
<header>{blocks.logo} {blocks.title}</header>
<header>
{blocks.logo} {blocks.title}
</header>
<div>
<label>{fields.username}</label>
</div>
Expand All @@ -87,14 +88,20 @@ const Demo = () => {
<Login.Block name="logo" tagName="span">
<Logo />
</Login.Block>
<Login.Block name="title" tagName="span">Login</Login.Block>
<Login.Block name="title" tagName="span">
Login
</Login.Block>
<Login.Input name="username" placeholder="Please input Username" />
<Login.Input name="password" placeholder="please enter password" />
<Login.Button name="submit" type="submit">Submit</Login.Button>
<Login.Button name="reset" type="reset">Reset</Login.Button>
<Login.Button name="submit" type="submit">
Submit
</Login.Button>
<Login.Button name="reset" type="reset">
Reset
</Login.Button>
</Login>
);
}
};
export default Demo;
```

Expand All @@ -109,24 +116,32 @@ const Demo = () => {
return (
<Login>
<Render>
{({ blocks, extra }, { fields, buttons }) => {
{({ blocks, extra, $$index }, { fields, buttons }) => {
return (
<div>
<header>{blocks.logo} {blocks.title}</header>
{fields.sort((a, b) => a.index - b.index).map((item, idx) => {
return (
<div key={item.name + idx}>
<label>{item.children} {extra[item.name]}</label>
</div>
);
})}
<div>
{buttons.sort((a, b) => a.index - b.index).map((item, idx) => {
return React.cloneElement(item.children, {
...item.props,
key: item.name + idx,
})
<header>
{blocks.logo} {blocks.title}
</header>
{fields
.sort((a, b) => a.index - b.index)
.map((item, idx) => {
return (
<div key={item.name + idx}>
<label>
{item.children} {extra[item.name]}
</label>
</div>
);
})}
<div>
{buttons
.sort((a, b) => a.index - b.index)
.map((item, idx) => {
return React.cloneElement(item.children, {
...item.props,
key: item.name + idx,
});
})}
</div>
</div>
);
Expand All @@ -135,9 +150,11 @@ const Demo = () => {
<Login.Block name="logo" tagName="span">
<Logo />
</Login.Block>
<Login.Block name="title" tagName="span">Login</Login.Block>
<Login.Block name="title" tagName="span">
Login
</Login.Block>
<Login.Textarea name="note"></Login.Textarea>
<Login.Select name="select" defaultValue="1" >
<Login.Select name="select" defaultValue="1">
<option value="w">Choose an item...</option>
<option value="1">One</option>
<option value="2">Two</option>
Expand All @@ -149,11 +166,15 @@ const Demo = () => {
</Login.Input>
<Login.Input name="username" index={1} placeholder="Please input Username" />
<Login.Input name="password" index={0} placeholder="please enter password" />
<Login.Button name="submit" index={1} type="submit">Submit</Login.Button>
<Login.Button name="reset" index={0} type="reset">Reset</Login.Button>
<Login.Button name="submit" index={1} type="submit">
Submit
</Login.Button>
<Login.Button name="reset" index={0} type="reset">
Reset
</Login.Button>
</Login>
);
}
};
export default Demo;
```

Expand Down Expand Up @@ -236,7 +257,7 @@ const Demo = () => {
return (
<Login>
<Render>
{({ blocks, fields, extra }, data) => {
{({ blocks, fields, $$index, extra }, data) => {
return (
<label>
{fields.checkbox} {extra.checkbox}
Expand All @@ -249,7 +270,7 @@ const Demo = () => {
</Login.Input>
</Login>
);
}
};
export default Demo;
```

Expand Down Expand Up @@ -333,13 +354,15 @@ export declare const Button: FC<PropsWithChildren<ButtonProps>>;
import { Render } from 'react-login-page';

<Render>
{({ fields, buttons, blocks, extra }, data) => {
{({ fields, buttons, blocks, extra, $$index }, data) => {
// data.blocks => Array
// data.buttons => Array
// data.fields => Array
return (
<div>
<header>{blocks.logo} {blocks.title}</header>
<header>
{blocks.logo} {blocks.title}
</header>
<label>{fields.username}</label>
<label>{fields.password}</label>
<div>
Expand All @@ -349,40 +372,48 @@ import { Render } from 'react-login-page';
</div>
);
}}
</Render>
</Render>;
```

```tsx
import { FC } from 'react';
import { RenderStateProps, InitialState } from 'react-login-page';
export type RenderChildren = {
children?: (props: Required<RenderStateProps>, data: InitialState['data']) => React.ReactNode;
} | {
children?: React.ReactNode;
};
export type RenderChildren =
| {
children?: (props: Required<RenderStateProps>, data: InitialState['data']) => React.ReactNode;
}
| {
children?: React.ReactNode;
};
export declare const Render: FC<RenderChildren>;
```

**`index`** refers to the use of indexes to control the order of controls

```tsx
<Render>
{({ blocks, extra }, { fields, buttons }) => {
{({ blocks, extra, $$index }, { fields, buttons }) => {
return (
<div>
<header>{blocks.logo} {blocks.title}</header>
{fields.sort((a, b) => a.index - b.index).map((item, idx) => {
return <label key={item.name + idx}>{item.children}</label>
})}
<div>
{buttons.sort((a, b) => a.index - b.index).map((item, idx) => {
const child = item.children;
if (!isValidElement(child)) return null;
return cloneElement(child, {
...child.props,
key: item.name + idx,
})
<header>
{blocks.logo} {blocks.title}
</header>
{fields
.sort((a, b) => a.index - b.index)
.map((item, idx) => {
return <label key={item.name + idx}>{item.children}</label>;
})}
<div>
{buttons
.sort((a, b) => a.index - b.index)
.map((item, idx) => {
const child = item.children;
if (!isValidElement(child)) return null;
return cloneElement(child, {
...child.props,
key: item.name + idx,
});
})}
</div>
</div>
);
Expand All @@ -397,10 +428,12 @@ import React from 'react';
import Login, { Render, Provider, Container, useStore } from 'react-login-page';

const RenderLoginPage = () => {
const { fields, extra, buttons, blocks, data } = useStore();
const { fields, extra, $$index, buttons, blocks, data } = useStore();
return (
<Render>
<header>{blocks.logo} {blocks.title}</header>
<header>
{blocks.logo} {blocks.title}
</header>
<label>{fields.username}</label>
<label>{fields.password}</label>
<div>
Expand All @@ -409,23 +442,31 @@ const RenderLoginPage = () => {
</div>
</Render>
);
}
};

const Demo = () => {
return (
<Provider>
<Container>
<RenderLoginPage />
</Container>
<Login.Block name="logo" tagName="span">⚛️</Login.Block>
<Login.Block name="title" tagName="span">Login</Login.Block>
<Login.Block name="logo" tagName="span">
⚛️
</Login.Block>
<Login.Block name="title" tagName="span">
Login
</Login.Block>
<Login.Input name="username" placeholder="Please input Username" />
<Login.Input name="password" placeholder="please enter password" />
<Login.Button name="submit" type="submit">Submit</Login.Button>
<Login.Button name="reset" type="reset">Reset</Login.Button>
<Login.Button name="submit" type="submit">
Submit
</Login.Button>
<Login.Button name="reset" type="reset">
Reset
</Login.Button>
</Provider>
);
}
};

export default Demo;
```
Expand All @@ -437,43 +478,57 @@ import React, { isValidElement, cloneElement } from 'react';
import Login, { Render, Provider, Container, useStore } from 'react-login-page';

const RenderLoginPage = () => {
const { blocks, data, extra } = useStore();
const { blocks, data, $$index, extra } = useStore();
const { fields, buttons } = data;
return (
<Render>
<header>{blocks.logo} {blocks.title}</header>
{fields.sort((a, b) => a.index - b.index).map((item, idx) => {
return <label key={item.name + idx}>{item.children}</label>
})}
<header>
{blocks.logo} {blocks.title}
</header>
{fields
.sort((a, b) => a.index - b.index)
.map((item, idx) => {
return <label key={item.name + idx}>{item.children}</label>;
})}
<div>
{buttons.sort((a, b) => a.index - b.index).map((item, idx) => {
{buttons
.sort((a, b) => a.index - b.index)
.map((item, idx) => {
const child = item.children;
if (!isValidElement(child)) return null;
return cloneElement(child, {
...child.props,
key: item.name + idx,
})
})}
});
})}
</div>
</Render>
);
}
};

const Demo = () => {
return (
<Provider>
<Container>
<RenderLoginPage />
</Container>
<Login.Block name="logo" tagName="span">⚛️</Login.Block>
<Login.Block name="title" tagName="span">Login</Login.Block>
<Login.Block name="logo" tagName="span">
⚛️
</Login.Block>
<Login.Block name="title" tagName="span">
Login
</Login.Block>
<Login.Input name="username" index={1} placeholder="Please input Username" />
<Login.Input name="password" placeholder="please enter password" />
<Login.Button name="submit" index={1} type="submit">Submit</Login.Button>
<Login.Button name="reset" type="reset">Reset</Login.Button>
<Login.Button name="submit" index={1} type="submit">
Submit
</Login.Button>
<Login.Button name="reset" type="reset">
Reset
</Login.Button>
</Provider>
);
}
};

export default Demo;
```
Expand Down

0 comments on commit 48e18b1

Please sign in to comment.