feat(toast): added prop fallbackPlacements (#883)

core-ds · Oct 5, 2023 · a5d7cc0 · a5d7cc0
1 parent 7e50572
commit a5d7cc0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 19 deletions.
diff --git a/packages/toast/src/components/base-toast/component.tsx b/packages/toast/src/components/base-toast/component.tsx
@@ -31,6 +31,7 @@ const CSS_TRANSITION_CLASS_NAMES = {
 export type BaseToastProps = ToastPlateProps &
     Pick<
         PopoverProps,
+        | 'fallbackPlacements'
         | 'position'
         | 'offset'
         | 'open'
@@ -102,6 +103,7 @@ export const BaseToast = forwardRef<HTMLDivElement, BaseToastProps>(
             getPortalContainer,
             useAnchorWidth,
             closeWithClickOutside = true,
+            fallbackPlacements,
             ...restProps
         },
         ref,
@@ -190,6 +192,7 @@ export const BaseToast = forwardRef<HTMLDivElement, BaseToastProps>(
                     getPortalContainer={getPortalContainer}
                     zIndex={zIndex}
                     useAnchorWidth={useAnchorWidth}
+                    fallbackPlacements={fallbackPlacements}
                 >
                     {ToastPlate ? (
                         <ToastPlate {...restProps} style={style} className={className} {...props} />

diff --git a/packages/toast/src/docs/Component.stories.tsx b/packages/toast/src/docs/Component.stories.tsx
@@ -30,14 +30,14 @@ export const toast: Story = {
             'left',
             'left-start',
             'left-end',
-        ];
+        ] as const;
         const [anchorToastOpen, setAnchorToastOpen] = React.useState(false);
         const [fixedToastOpen, setFixedToastOpen] = React.useState(false);
-        const [buttonElement, setButtonElement] = React.useState(null);
-        const handleButtonRef = (node) => {
+        const [buttonElement, setButtonElement] = React.useState<HTMLButtonElement | null>(null);
+        const handleButtonRef = (node: HTMLButtonElement) => {
             setButtonElement(node);
         };
-        const containerRef = React.useRef();
+        const containerRef = React.useRef(null);
         const isMobile = document.body.clientWidth < 450;
         const closeWithClickOutside = boolean('closeWithClickOutside', true);
         return (
@@ -150,14 +150,14 @@ export const toast_mobile: Story = {
             'left',
             'left-start',
             'left-end',
-        ];
+        ] as const;
         const [anchorToastOpen, setAnchorToastOpen] = React.useState(false);
         const [fixedToastOpen, setFixedToastOpen] = React.useState(false);
-        const [buttonElement, setButtonElement] = React.useState(null);
-        const handleButtonRef = (node) => {
+        const [buttonElement, setButtonElement] = React.useState<HTMLButtonElement | null>(null);
+        const handleButtonRef = (node: HTMLButtonElement) => {
             setButtonElement(node);
         };
-        const containerRef = React.useRef();
+        const containerRef = React.useRef(null);
         const closeWithClickOutside = boolean('closeWithClickOutside', true);
         return (
             <div
@@ -269,14 +269,14 @@ export const toast_desktop: Story = {
             'left',
             'left-start',
             'left-end',
-        ];
+        ] as const;
         const [anchorToastOpen, setAnchorToastOpen] = React.useState(false);
         const [fixedToastOpen, setFixedToastOpen] = React.useState(false);
-        const [buttonElement, setButtonElement] = React.useState(null);
-        const handleButtonRef = (node) => {
+        const [buttonElement, setButtonElement] = React.useState<HTMLButtonElement | null>(null);
+        const handleButtonRef = (node: HTMLButtonElement) => {
             setButtonElement(node);
         };
-        const containerRef = React.useRef();
+        const containerRef = React.useRef(null);
         const closeWithClickOutside = boolean('closeWithClickOutside', true);
         return (
             <div

diff --git a/packages/toast/src/docs/description.mdx b/packages/toast/src/docs/description.mdx
@@ -1,4 +1,4 @@
-Компонент `Toast`. Cообщает пользователю о результате выполнения его команды.
+Компонент `Toast`. Сообщает пользователю о результате выполнения его команды.
 
 `Toast` привязан либо к элементу, который спровоцировал его появление, либо появляется снизу экрана.
 
@@ -14,12 +14,10 @@ render(() => {
 
     const [buttonElement, setButtonElement] = React.useState(null);
 
-    const handleButtonRef = node => {
+    const handleButtonRef = (node) => {
         setButtonElement(node);
     };
 
-    const isMobile = document.body.clientWidth < 450;
-
     return (
         <div
             style={{
@@ -33,6 +31,7 @@ render(() => {
             }}
         >
             <Toast
+                breakpoint={BREAKPOINT}
                 open={anchorToastOpen}
                 anchorElement={buttonElement}
                 position='top'
@@ -47,19 +46,21 @@ render(() => {
                 autoCloseDelay={1500}
             />
             <Toast
+                breakpoint={BREAKPOINT}
                 open={fixedToastOpen}
                 badge='positive'
                 title='Ваша карта удалена'
                 hasCloser={true}
                 block={true}
-                bottomButtonPosition={isMobile}
+                bottomButtonPosition={isMobile()}
                 onClose={() => {
                     setFixedToastOpen(false);
                 }}
                 autoCloseDelay={3000}
                 actionButton={
                     <Button
-                        size={isMobile ? 'xs' : 's'}
+                        breakpoint={BREAKPOINT}
+                        size={isMobile() ? 'xs' : 's'}
                         view='ghost'
                         colors='inverted'
                         onClick={() => {
@@ -69,9 +70,10 @@ render(() => {
                         Восстановить
                     </Button>
                 }
-                style={{ ...(!isMobile && {maxWidth: 'calc(100vw - 150px)'} )}}
+                style={{ ...(!isMobile() && { maxWidth: 'calc(100vw - 150px)' }) }}
             />
             <Button
+                breakpoint={BREAKPOINT}
                 ref={handleButtonRef}
                 onClick={() => {
                     setAnchorToastOpen(true);
@@ -80,6 +82,7 @@ render(() => {
                 Скопировать
             </Button>
             <Button
+                breakpoint={BREAKPOINT}
                 onClick={() => {
                     setFixedToastOpen(true);
                 }}
@@ -128,6 +131,7 @@ render(() => {
                 }}
             >
                 <Toast
+                    breakpoint={BREAKPOINT}
                     open={anchorToastOpen}
                     anchorElement={containerRef.current}
                     position='bottom-start'
@@ -146,6 +150,7 @@ render(() => {
                     Скопировано
                 </Toast>
                 <Button
+                    breakpoint={BREAKPOINT}
                     onClick={() => {
                         setAnchorToastOpen(true);
                     }}