Gestionnaire de fichiers

ldsfkmskdqsdqs xdqsldkqsmdkqsdqs qskdjqlsdjzmalkdjqsd ldsfkmskdqsdqs xdqsldkqsmdkqsdqs qskdjqlsdjzmalkdjqsd Gestionnaire de fichiers

Gestionnaire de fichiers - Editer - /home/genremedia08/musicjukebox.overlookedtracks.com/common/resources/client/ui/overlays/dialog/dialog.tsx

Arrière
import React, { Children, cloneElement, ComponentPropsWithoutRef, CSSProperties, isValidElement, ReactElement, ReactNode, useContext, } from 'react'; import clsx from 'clsx'; import {mergeProps} from '@react-aria/utils'; import {DialogContext} from './dialog-context'; import {InputSize} from '../../forms/input-field/input-size'; import {DismissButton} from './dismiss-button'; export type DialogSize = \| InputSize \| '2xl' \| 'auto' \| 'fullscreen' \| 'fullscreenTakeover' \| string; export interface DialogProps extends Omit<ComponentPropsWithoutRef<'div'>, 'size'> { children: ReactNode; size?: DialogSize; background?: string; className?: string; radius?: string; maxWidth?: string; } export function Dialog(props: DialogProps) { const { type = 'modal', dialogProps, ...contextProps } = useContext(DialogContext); const { children, className, size = 'md', background, radius = 'rounded', maxWidth = 'max-w-dialog', ...domProps } = props; // If rendered in a popover or tray there won't be a visible dismiss button, // so we render a hidden one for screen readers. let dismissButton: ReactElement \| null = null; if (type === 'popover' \|\| type === 'tray') { dismissButton = <DismissButton onDismiss={contextProps.close} />; } const isTrayOrFullScreen = size === 'fullscreenTakeover' \|\| type === 'tray'; const mergedClassName = clsx( 'mx-auto pointer-events-auto outline-none flex flex-col overflow-hidden', background \|\| 'bg-paper', type !== 'tray' && sizeStyle(size), type === 'tray' && 'rounded-t', size !== 'fullscreenTakeover' && `shadow-2xl border max-h-dialog`, !isTrayOrFullScreen && `${radius} ${maxWidth}`, className ); return ( <div {...mergeProps({role: 'dialog', tabIndex: -1}, dialogProps, domProps)} style={{...props.style, '--be-dialog-padding': '24px'} as CSSProperties} aria-modal className={mergedClassName} > {Children.toArray(children).map(child => { if (isValidElement<DialogProps>(child)) { return cloneElement<DialogProps>(child, { size: child.props.size ?? size, }); } return child; })} {dismissButton} </div> ); } function sizeStyle(dialogSize?: DialogSize) { switch (dialogSize) { case '2xs': return 'w-256'; case 'xs': return 'w-320'; case 'sm': return 'w-384'; case 'md': return 'w-440'; case 'lg': return 'w-620'; case 'xl': return 'w-780'; case '2xl': return 'w-850'; case 'fullscreen': return 'w-1280'; case 'fullscreenTakeover': return 'w-full h-full'; default: return dialogSize; } }