Tạo Dropbox với Nextjs 14 Typescript

**Tôi định nghĩa dropbox là 1 cái hộp được thả ra với phương hướng bất kì là cơ sở cho dropdown, autocomplete. phương hướng bất kì là nó tự động dựa vạo vị trí mà nó đang ở để xác định thả box ra ngoài trong phạm vị xem được hợp lý ví dụ như: box nó ở gần cuối trang thì nó phải xuất hiển quay ngược lên trên , nó ở bên phải , thì nó phải lệch box sang trái **

1. Component

• dropbox content thì tạo bằng createPortal
• keyId thì dùng mặt định useId React 19
• impact là lớp thao tác vs UI dev tự code, content cũng vậy
• position là lớp css hiển thị box nó nằm trong logic

L.Master chỉ là cái tag div bình thường thui.

'use client';
import { $Master } from '@/libs';
import { L } from '@/libs/es';
import cx from 'classnames';
import { isEmpty } from 'lodash';
import React, { cloneElement, memo, useId } from 'react';
import { createPortal } from 'react-dom';
import useLogic from './logic';
import styles from './styles.module.scss'; type P = ReturnType<typeof useLogic>;
interface $Props { keyId?: string; // không truyền củng được || default dùng useId React 19 impact?(args: Pick<P, 'show' | 'onToggle'>): JSX.Element; contents?(args: Pick<P, 'show' | 'onToggle' | 'dropBoxRect'>): JSX.Element; // dropBoxRect trả về Rect clsDropbox?: string; // class css clsContent?: string; // class css isOutlet?: boolean; // nhấn ra ngoài để tắt setting?: $Master; // css
} function Dropdown(props: $Props) { const { clsDropbox, clsContent, impact, contents, keyId = useId(), isOutlet, setting, } = props; const args = useLogic({ keyId }); const { onToggle, position, show } = args; return cloneElement( <L.Master id={keyId} className={cx(styles.Dropbox, clsDropbox)} ></L.Master>, { ...setting }, <> {impact && cloneElement(impact?.(args), { id: `DropImpact_${keyId}`, })} {React.useMemo( () => show && !isEmpty(position) && createPortal( <L.Master id={`DropContent_${keyId}`} onMouseLeave={isOutlet ? onToggle : undefined} style={{ ...position, }} className={cx(styles.DropContent, clsContent)} > {contents?.(args)} </L.Master>, document.body ), [show, position, keyId, isOutlet] )} </> );
} export default memo(Dropdown); 

2. Logic Tạo cái use hook xử lý logic

• tính nó gần bottom hông , nó gần trái hông
• dùng transform

'use client';
import { $listenEvent } from '@/libs';
import { debounce } from 'lodash';
import React, { CSSProperties, useEffect, useState } from 'react'; type $Args = { keyId: string;
}; export default function useLogic({ keyId }: $Args) { const [show, setShow] = useState({ [keyId]: false, }); const [position, setPosition] = useState({ [keyId]: {} as CSSProperties, }); const [dropBoxRect, setDropBoxRect] = useState<DOMRect>(); const onPosition = React.useCallback( debounce(() => { const DropImpact = document.getElementById(`DropImpact_${keyId}`); const DropContent = document.getElementById(`DropContent_${keyId}`); const DropImpactRect = DropImpact?.getBoundingClientRect(); const DropContentRect = DropContent?.getBoundingClientRect(); const { innerHeight, innerWidth } = window; if (DropImpactRect) { const isNearBottom = innerHeight / 2 - DropImpactRect.y < 0; const isNearLeft = innerWidth / 2 - DropImpactRect.x < -200; setPosition((prev) => ({ ...prev, [keyId]: { transform: `translate(${ isNearLeft ? Number(DropImpactRect?.x) + Number(DropImpactRect?.width) - Number(DropContentRect?.width) : Number(DropImpactRect.left) }px, ${ isNearBottom ? Number(DropImpactRect.y) - Number(DropContentRect?.height) : Number(DropImpactRect.bottom) }px)`, top: -1, left: -1, }, })); } }, 300), [] ); useEffect(() => { if (!show[keyId]) { onPosition(); $listenEvent.add(onPosition); } return () => { onPosition(); setPosition({}); $listenEvent.remove(onPosition); }; }, []); const onGetRect = React.useCallback(() => { if (!dropBoxRect) { const Dropbox = document.getElementById(`${keyId}`); const DropboxRect = Dropbox?.getBoundingClientRect(); setDropBoxRect(DropboxRect); } }, [dropBoxRect]); useEffect(() => { if (!dropBoxRect) { onGetRect(); $listenEvent.add(onGetRect); } return () => { onGetRect(); $listenEvent.remove(onGetRect); }; }, [dropBoxRect]); const onToggle = () => { setShow((prev) => ({ ...prev, [keyId]: !prev[keyId] })); }; const onSetShow = (status: boolean) => { setShow((prev) => ({ ...prev, [keyId]: status })); }; return { onSetShow, // set status cho key thay cho onOpen, onClose onToggle, position: position[keyId], // vị trí box được mở show: show[keyId], // trạng thái mở box dropBoxRect, // rect của dropbox };
} 

Mình đặt nhân tử chung ra ngoài làm thừa số chung:

export const $listenEvent = { add(fnc: () => void) { document.addEventListener('wheel', fnc); document.addEventListener('resize', fnc); document.addEventListener('orientationchange', fnc); document.addEventListener('load', fnc); document.addEventListener('reload', fnc); }, remove(fnc: () => void) { document.removeEventListener('wheel', fnc); document.removeEventListener('resize', fnc); document.removeEventListener('orientationchange', fnc); document.removeEventListener('load', fnc); document.removeEventListener('reload', fnc); },
}; 

4. SCSS Đơn giản vầy thui, muốn thêm hiệu transform , transition, visiable , tự thêm vô

.Dropbox { display: flex;
} .DropContent { position: fixed; z-index: 999; min-height: 250px; display: flex; content: ''; padding: 0.5rem 0; flex: 1;
} 

5. Cách dùng :

<L.Dropbox {...{ setting: { width: '100%', }, clsDropbox: styles.clsDropbox, impact(args) { return ( <L.Magic hover width={'fit-content'} shadow padding={'1rem'} onClick={args.onToggle} className={styles.impact} > Toggle dropdown </L.Magic> ); }, contents({ dropBoxRect }) { return ( <L.Section background={'white'} shadow minWidth={dropBoxRect?.width} minHeight={'100%'} padding={'1rem'} > <L.Txt> contents contents contents contents contents contents </L.Txt> </L.Section> ); }, }} />