Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | 9x 6x 6x 6x 3x 3x 3x 3x 3x 6x 9x | import { PropsWithChildren, useEffect, createElement, AllHTMLAttributes, memo } from 'react';
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;
/** "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?: T;
}
export const Block = memo(<Tag extends BlockTagType = 'div'>(props: PropsWithChildren<Partial<BlockProps<Tag>>>) => {
const { blocks = {}, dispatch } = useStore();
const { name, keyname, visible = true, tagName = 'div', ...elmProps } = props;
useEffect(() => {
Eif (name || keyname) {
const key = (keyname || name) as string;
const div = visible ? createElement(tagName, { ...elmProps }, elmProps.children) : null;
delete blocks[key];
dispatch({
blocks: { ...blocks, [key]: div as unknown as Blocks<'div'> },
});
}
}, [props]);
return null;
});
Block.displayName = 'Login.Block';
|