Skip to content

Commit

Permalink
feat: add keyname props.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaywcjlove
jaywcjlove committed Apr 29, 2023
1 parent f33f202 commit f60f3e2
Show file tree
Hide file tree
Showing 72 changed files with 449 additions and 302 deletions.
192 changes: 159 additions & 33 deletions core/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,18 +97,18 @@ const Demo = () => {
);
}}
</Render>
<Login.Block name="logo" tagName="span">
<Login.Block keyname="logo" tagName="span">
<Logo />
</Login.Block>
<Login.Block name="title" tagName="span">
<Login.Block keyname="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">
<Login.Input keyname="username" placeholder="Please input Username" />
<Login.Input keyname="password" placeholder="please enter password" />
<Login.Button keyname="submit" type="submit">
Submit
</Login.Button>
<Login.Button name="reset" type="reset">
<Login.Button keyname="reset" type="reset">
Reset
</Login.Button>
</Login>
Expand Down Expand Up @@ -159,10 +159,10 @@ const Demo = () => {
);
}}
</Render>
<Login.Block name="logo" tagName="span">
<Login.Block keyname="logo" tagName="span">
<Logo />
</Login.Block>
<Login.Block name="title" tagName="span">
<Login.Block keyname="title" tagName="span">
Login
</Login.Block>
<Login.Textarea name="note"></Login.Textarea>
Expand All @@ -178,10 +178,10 @@ 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">
<Login.Button keyname="submit" index={1} type="submit">
Submit
</Login.Button>
<Login.Button name="reset" index={0} type="reset">
<Login.Button keyname="reset" index={0} type="reset">
Reset
</Login.Button>
</Login>
Expand All @@ -201,27 +201,63 @@ import Logo from 'react-login-page/logo-rect';

⚠️ If you don't use them, they won't be packaged.

```jsx mdx:preview
import React from 'react';
import Logo from 'react-login-page/logo';
import LogoRect from 'react-login-page/logo-rect';

const Demo = () => {
return (
<div>
<Logo />
<br />
<LogoRect />
</div>
);
};
export default Demo;
```

### `Login.Block`

```jsx
import Login, { Block } from 'react-login-page';

<Login.Block name="title">Login</Login.Block>
<Block name="title">Login</Block>
<Login.Block keyname="title">Login</Login.Block>
<Block keyname="title">Login</Block>
```

```jsx mdx:preview
import React from 'react';
import Login, { Render } from 'react-login-page';

const Demo = () => {
return (
<Login>
<Render>{({ blocks, fields, $$index, extra }, data) => <label>{blocks.title}</label>}</Render>
<Login.Block keyname="title">Login</Login.Block>
</Login>
);
};
export default Demo;
```

```jsx
import { PropsWithChildren, AllHTMLAttributes } from 'react';
import { BlockTagType } from 'react-login-page';

export interface BlockProps<Tag extends BlockTagType> extends AllHTMLAttributes<Tag> {
keyname?: string;
/**
* @deprecated use `keyname`
*/
name?: string;
/** Can be shown or hidden with controls */
visible?: boolean;
/** "index" refers to the use of indexes to control the order of controls, which can provide more flexible API encapsulation. */
index?: number;
/** custom created element */
tagName?: Tag;
tagName?: T;
}
export declare const Block: {
<Tag extends keyof JSX.IntrinsicElements = "div">(props: PropsWithChildren<Partial<BlockProps<Tag>>>): null;
Expand All @@ -234,15 +270,41 @@ export declare const Block: {
```jsx
import Login, { Input } from 'react-login-page';

<Login.Input type="password" placeholder="Password" />
<Input type="password" placeholder="Password" />
<Login.Input name="password" type="password" placeholder="Password" />
<Input name="password" type="password" placeholder="Password" />
```

```jsx mdx:preview
import React from 'react';
import Login, { Render } from 'react-login-page';

const Demo = () => {
return (
<Login>
<Render>
{({ blocks, fields, $$index, extra }, data) => (
<label>
{fields.password} {extra.password}
</label>
)}
</Render>
<Login.Input name="password" type="password" placeholder="Password">
<span> extra content </span>
</Login.Input>
</Login>
);
};
export default Demo;
```

```tsx
import React, { FC, PropsWithChildren } from 'react';
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
name?: string;
/** Used to define the name of form controls */
keyname?: string;
/**
* Used to define the name of form controls
* @deprecated use `name`
*/
rename?: string;
/** Can be shown or hidden with controls */
visible?: boolean;
Expand Down Expand Up @@ -277,7 +339,7 @@ const Demo = () => {
);
}}
</Render>
<Login.Input name="checkbox" type="checkbox">
<Login.Input keyname="checkbox" type="checkbox">
<span> Remember me </span>
</Login.Input>
</Login>
Expand All @@ -295,11 +357,37 @@ import Login, { Textarea } from 'react-login-page';
<Textarea name="note" />
```

```jsx mdx:preview
import React from 'react';
import Login, { Render } from 'react-login-page';

const Demo = () => {
return (
<Login>
<Render>
{({ blocks, fields, $$index, extra }, data) => (
<label>
{fields.textarea} {extra.textarea}
</label>
)}
</Render>
<Login.Textarea keyname="textarea" defaultValue="default">
extra content
</Login.Textarea>
</Login>
);
};
export default Demo;
```

```ts
import React, { FC, PropsWithChildren } from 'react';
export interface TextareaProps extends React.InputHTMLAttributes<HTMLTextAreaElement> {
name?: string;
/** Used to define the name of form controls */
keyname?: string;
/**
* Used to define the name of form controls
* @deprecated use `name`
*/
rename?: string;
/** Can be shown or hidden with controls */
visible?: boolean;
Expand All @@ -325,11 +413,32 @@ import Login, { Select } from 'react-login-page';
</Select>
```

```jsx mdx:preview
import React from 'react';
import Login, { Render } from 'react-login-page';

const Demo = () => {
return (
<Login>
<Render>{({ blocks, fields, $$index, extra }, data) => <label>{fields.selectname}</label>}</Render>
<Login.Select name="selectname">
<option value="1">One</option>
<option value="2">Two</option>
</Login.Select>
</Login>
);
};
export default Demo;
```

```ts
import React, { FC, PropsWithChildren } from 'react';
export interface SelectProps extends React.InputHTMLAttributes<HTMLSelectElement> {
name?: string;
/** Used to define the name of form controls */
keyname?: string;
/**
* Used to define the name of form controls
* @deprecated use `name`
*/
rename?: string;
/** Can be shown or hidden with controls */
visible?: boolean;
Expand All @@ -344,14 +453,31 @@ export declare const Select: FC<PropsWithChildren<SelectProps>>;
```jsx
import Login, { Button } from 'react-login-page';

<Login.Button name="submit" type="submit" />
<Button name="submit" type="submit" />
<Login.Button keyname="submit" type="submit">Login</Login.Button>
<Button keyname="submit" type="submit" />Login</Button>
```

```jsx mdx:preview
import React from 'react';
import Login, { Render } from 'react-login-page';

const Demo = () => {
return (
<Login>
<Render>{({ blocks, buttons, fields, $$index, extra }, data) => <label>{buttons.submit}</label>}</Render>
<Login.Button keyname="submit" type="submit">
Login
</Login.Button>
</Login>
);
};
export default Demo;
```

```jsx
import { FC, PropsWithChildren } from 'react';
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
name?: string;
keyname?: string;
/** Can be shown or hidden with controls */
visible?: boolean;
/** "index" refers to the use of indexes to control the order of controls, which can provide more flexible API encapsulation. */
Expand Down Expand Up @@ -462,18 +588,18 @@ const Demo = () => {
<Container>
<RenderLoginPage />
</Container>
<Login.Block name="logo" tagName="span">
<Login.Block keyname="logo" tagName="span">
⚛️
</Login.Block>
<Login.Block name="title" tagName="span">
<Login.Block keyname="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">
<Login.Button keyname="submit" type="submit">
Submit
</Login.Button>
<Login.Button name="reset" type="reset">
<Login.Button keyname="reset" type="reset">
Reset
</Login.Button>
</Provider>
Expand Down Expand Up @@ -524,18 +650,18 @@ const Demo = () => {
<Container>
<RenderLoginPage />
</Container>
<Login.Block name="logo" tagName="span">
<Login.Block keyname="logo" tagName="span">
⚛️
</Login.Block>
<Login.Block name="title" tagName="span">
<Login.Block keyname="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">
<Login.Button keyname="submit" index={1} type="submit">
Submit
</Login.Button>
<Login.Button name="reset" type="reset">
<Login.Button keyname="reset" type="reset">
Reset
</Login.Button>
</Provider>
Expand Down
11 changes: 8 additions & 3 deletions core/src/Block.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ import { PropsWithChildren, useRef, useEffect, createElement, AllHTMLAttributes
import { useStore, BlockTagType, Blocks } from './store';

export interface BlockProps<T extends BlockTagType> extends AllHTMLAttributes<T> {
keyname?: string;
/**
* @deprecated use `keyname`
*/
name?: string;
/** Can be shown or hidden with controls */
visible?: boolean;
Expand All @@ -15,12 +19,13 @@ export const Block = <Tag extends BlockTagType = 'div'>(props: PropsWithChildren
const ref = useRef<Partial<BlockProps<Tag>>>();
const { blocks = {}, dispatch } = useStore();
useEffect(() => {
const { name, visible = true, tagName = 'div', ...elmProps } = props;
if (ref.current !== elmProps && name) {
const { name, keyname, visible = true, tagName = 'div', ...elmProps } = props;
if (ref.current !== elmProps && (name || keyname)) {
const key = (keyname || name) as string;
ref.current = { ...elmProps };
const div = visible ? createElement(tagName, { ...elmProps }, elmProps.children) : null;
dispatch({
blocks: { ...blocks, [name]: div as unknown as Blocks<'div'> },
blocks: { ...blocks, [key]: div as unknown as Blocks<'div'> },
});
}
}, [props, ref]);
Expand Down
9 changes: 5 additions & 4 deletions core/src/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { FC, PropsWithChildren, useRef, useEffect } from 'react';
import { useStore } from './store';

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
name?: string;
keyname?: string;
/** Can be shown or hidden with controls */
visible?: boolean;
/** "index" refers to the use of indexes to control the order of controls, which can provide more flexible API encapsulation. */
Expand All @@ -13,11 +13,12 @@ export const Button: FC<PropsWithChildren<ButtonProps>> = (props) => {
const ref = useRef<ButtonProps>();
const { buttons = {}, dispatch } = useStore();
useEffect(() => {
const { name, visible = true, ...elmProps } = props;
if (ref.current !== elmProps && name) {
const { keyname, visible = true, ...elmProps } = props;
if (ref.current !== elmProps && (keyname || elmProps.name)) {
ref.current = { ...elmProps };
const key = (keyname || elmProps.name) as string;
dispatch({
buttons: { ...buttons, [name]: visible ? <button type="submit" {...elmProps} /> : null },
buttons: { ...buttons, [key]: visible ? <button type="submit" {...elmProps} /> : null },
});
}
}, [props, ref]);
Expand Down
Loading

0 comments on commit f60f3e2

Please sign in to comment.