From 2a9538c119b6d20dd13d2893ad3d7d8716efddca Mon Sep 17 00:00:00 2001 From: SeyyedMahdi Date: Fri, 20 Oct 2023 23:37:30 +0330 Subject: [PATCH] [Snackbar][Material You] convert .js files to .ts --- packages/mui-base/src/Snackbar/Snackbar.tsx | 2 +- .../src/useSnackbar/useSnackbar.types.ts | 2 +- .../Snackbar/{Snackbar.js => Snackbar.tsx} | 49 +++++++++++-------- .../{Snackbar.d.ts => Snackbar.types.ts} | 21 +++----- .../mui-material-next/src/Snackbar/index.d.ts | 5 -- .../src/Snackbar/{index.js => index.ts} | 0 packages/mui-material-next/src/index.ts | 3 ++ 7 files changed, 40 insertions(+), 42 deletions(-) rename packages/mui-material-next/src/Snackbar/{Snackbar.js => Snackbar.tsx} (89%) rename packages/mui-material-next/src/Snackbar/{Snackbar.d.ts => Snackbar.types.ts} (91%) delete mode 100644 packages/mui-material-next/src/Snackbar/index.d.ts rename packages/mui-material-next/src/Snackbar/{index.js => index.ts} (100%) diff --git a/packages/mui-base/src/Snackbar/Snackbar.tsx b/packages/mui-base/src/Snackbar/Snackbar.tsx index 1ba54db99b2045..830c5755f96a5e 100644 --- a/packages/mui-base/src/Snackbar/Snackbar.tsx +++ b/packages/mui-base/src/Snackbar/Snackbar.tsx @@ -142,7 +142,7 @@ Snackbar.propTypes /* remove-proptypes */ = { * The `reason` parameter can optionally be used to control the response to `onClose`, * for example ignoring `clickaway`. * - * @param {React.SyntheticEvent | Event} event The event source of the callback. + * @param {React.SyntheticEvent | Event | null} event The event source of the callback. * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`. */ onClose: PropTypes.func, diff --git a/packages/mui-base/src/useSnackbar/useSnackbar.types.ts b/packages/mui-base/src/useSnackbar/useSnackbar.types.ts index 845fb51760bbfe..8d3c01e39befef 100644 --- a/packages/mui-base/src/useSnackbar/useSnackbar.types.ts +++ b/packages/mui-base/src/useSnackbar/useSnackbar.types.ts @@ -21,7 +21,7 @@ export interface UseSnackbarParameters { * The `reason` parameter can optionally be used to control the response to `onClose`, * for example ignoring `clickaway`. * - * @param {React.SyntheticEvent | Event} event The event source of the callback. + * @param {React.SyntheticEvent | Event | null} event The event source of the callback. * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`. */ onClose?: (event: React.SyntheticEvent | Event | null, reason: SnackbarCloseReason) => void; diff --git a/packages/mui-material-next/src/Snackbar/Snackbar.js b/packages/mui-material-next/src/Snackbar/Snackbar.tsx similarity index 89% rename from packages/mui-material-next/src/Snackbar/Snackbar.js rename to packages/mui-material-next/src/Snackbar/Snackbar.tsx index b730fdf04c0fb7..6c8d3dab9baae0 100644 --- a/packages/mui-material-next/src/Snackbar/Snackbar.js +++ b/packages/mui-material-next/src/Snackbar/Snackbar.tsx @@ -11,8 +11,9 @@ import styled from '../styles/styled'; import useTheme from '../styles/useTheme'; import useThemeProps from '../styles/useThemeProps'; import { getSnackbarUtilityClass } from './snackbarClasses'; +import { SnackbarOwnerState, SnackbarProps } from './Snackbar.types'; -const useUtilityClasses = (ownerState) => { +const useUtilityClasses = (ownerState: SnackbarOwnerState) => { const { classes, anchorOrigin } = ownerState; const slots = { @@ -40,7 +41,7 @@ const SnackbarRoot = styled('div', { ], ]; }, -})(({ theme, ownerState }) => { +})<{ ownerState: SnackbarOwnerState }>(({ theme, ownerState }) => { const center = { left: '50%', right: 'auto', @@ -73,7 +74,21 @@ const SnackbarRoot = styled('div', { }; }); -const Snackbar = React.forwardRef(function Snackbar(inProps, ref) { +/** + * Snackbars provide brief notifications. The component is also known as a toast. + * + * Demos: + * + * - [Snackbar](https://mui.com/material-ui/react-snackbar/) + * + * API: + * + * - [Snackbar API](https://mui.com/material-ui/api/snackbar/) + */ +const Snackbar = React.forwardRef(function Snackbar( + inProps: SnackbarProps, + ref: React.ForwardedRef, +) { const props = useThemeProps({ props: inProps, name: 'MuiSnackbar' }); const theme = useTheme(); const defaultTransitionDuration = { @@ -111,7 +126,7 @@ const Snackbar = React.forwardRef(function Snackbar(inProps, ref) { disableWindowBlurListener, TransitionComponent, transitionDuration, - }; + } as SnackbarOwnerState; const classes = useUtilityClasses(ownerState); @@ -124,26 +139,19 @@ const Snackbar = React.forwardRef(function Snackbar(inProps, ref) { getSlotProps: getRootProps, externalForwardedProps: other, ownerState, - additionalProps: { - ref, - }, + additionalProps: { ref }, className: [classes.root, className], + externalSlotProps: {}, }); - const handleExited = (node) => { + const handleExited = (node: HTMLElement) => { setExited(true); - - if (onExited) { - onExited(node); - } + onExited?.(node); }; - const handleEnter = (node, isAppearing) => { + const handleEnter = (node: HTMLElement, isAppearing: boolean) => { setExited(false); - - if (onEnter) { - onEnter(node, isAppearing); - } + onEnter?.(node, isAppearing); }; // So we only render active snackbars. @@ -158,7 +166,6 @@ const Snackbar = React.forwardRef(function Snackbar(inProps, ref) { appear in={open} timeout={transitionDuration} - direction={vertical === 'top' ? 'down' : 'up'} onEnter={handleEnter} onExited={handleExited} {...TransitionProps} @@ -173,7 +180,7 @@ const Snackbar = React.forwardRef(function Snackbar(inProps, ref) { Snackbar.propTypes /* remove-proptypes */ = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the d.ts file and run "yarn proptypes" | + // | To update them edit TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- /** * The action to display. It renders after the message, at the end of the snackbar. @@ -244,7 +251,7 @@ Snackbar.propTypes /* remove-proptypes */ = { * The `reason` parameter can optionally be used to control the response to `onClose`, * for example ignoring `clickaway`. * - * @param {React.SyntheticEvent | Event} event The event source of the callback. + * @param {React.SyntheticEvent | Event | null} event The event source of the callback. * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`. */ onClose: PropTypes.func, @@ -307,6 +314,6 @@ Snackbar.propTypes /* remove-proptypes */ = { * @default {} */ TransitionProps: PropTypes.object, -}; +} as any; export default Snackbar; diff --git a/packages/mui-material-next/src/Snackbar/Snackbar.d.ts b/packages/mui-material-next/src/Snackbar/Snackbar.types.ts similarity index 91% rename from packages/mui-material-next/src/Snackbar/Snackbar.d.ts rename to packages/mui-material-next/src/Snackbar/Snackbar.types.ts index 15180260abd96e..66a3c85242e34c 100644 --- a/packages/mui-material-next/src/Snackbar/Snackbar.d.ts +++ b/packages/mui-material-next/src/Snackbar/Snackbar.types.ts @@ -1,12 +1,17 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { ClickAwayListenerProps } from '@mui/base/ClickAwayListener'; +// eslint-disable-next-line no-restricted-imports import { InternalStandardProps as StandardProps } from '@mui/material'; import { SnackbarContentProps } from '@mui/material/SnackbarContent'; import { TransitionProps } from '@mui/material/transitions'; import { Theme } from '../styles'; import { SnackbarClasses } from './snackbarClasses'; +export interface SnackbarOwnerState extends SnackbarProps { + anchorOrigin: NonNullable; +} + export interface SnackbarOrigin { vertical: 'top' | 'bottom'; horizontal: 'left' | 'center' | 'right'; @@ -73,10 +78,10 @@ export interface SnackbarProps extends StandardProps | Event} event The event source of the callback. + * @param {React.SyntheticEvent | Event | null} event The event source of the callback. * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`. */ - onClose?: (event: React.SyntheticEvent | Event, reason: SnackbarCloseReason) => void; + onClose?: (event: React.SyntheticEvent | Event | null, reason: SnackbarCloseReason) => void; /** * If `true`, the component is shown. */ @@ -116,15 +121,3 @@ export interface SnackbarProps extends StandardProps