feat(toast): remove extra prop

core-ds · Feb 8, 2021 · 6a8167a · 6a8167a
1 parent 1117e78
commit 6a8167a
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 69 deletions.
diff --git a/packages/toast/src/component.stories.mdx b/packages/toast/src/component.stories.mdx
@@ -36,49 +36,62 @@ import { name, version } from '../package.json';
         const handleButtonRef = node => {
             setButtonElement(node);
         };
+        const containerRef = React.useRef();
         return (
             <div
                 style={{
-                    width: '100%',
-                    height: '150vh',
+                    width: '100vw',
+                    height: '100vh',
                     display: 'flex',
                     justifyContent: 'center',
-                    alignItems: 'flex-start',
-                    padding: '200px',
+                    alignItems: 'center',
                     boxSizing: 'border-box'
                 }}
             >
-                <Toast
-                    open={anchorToastOpen}
-                    anchorElement={buttonElement}
-                    position={select('position', POSITION_OPTIONS, 'left')}
-                    offset={[number('offset[0]', 0), number('offset[1]', 8)]}
-                    badge={select('badge', ['negative', 'positive', 'attention', undefined], 'positive')}
-                    title={text('title', 'Скопировано')}
-                    hasCloser={boolean('hasCloser', true)}
-                    block={boolean('block', false)}
-                    onClose={() => { setAnchorToastOpen(false); }}
-                    autoCloseDelay={number('autoCloseDelay', 3000)}
-                />
-                <Toast
-                    open={fixedToastOpen}
-                    badge={select('badge', ['negative', 'positive', 'attention', undefined], 'positive')}
-                    title="Ваша карта удалена"
-                    hasCloser={boolean('hasCloser', true)}
-                    block={boolean('block', false)}
-                    onClose={() => { setFixedToastOpen(false); }}
-                    autoCloseDelay={number('autoCloseDelay', 3000)}
-                    actionButton={<Button size="s" view="ghost" onClick={() => { setFixedToastOpen(false) }}>Восстановить</Button>}
-                    style={{maxWidth: 'calc(100vw - 150px)'}}
-                    centeredPosition={boolean('centeredPosition', true)}
-                    bottomOffset={number('bottomOffset', 32)}
-                />
-                <Button ref={handleButtonRef} onClick={() => { setAnchorToastOpen(true); }}>
-                    Скопировать
-                </Button>
-                <Button onClick={() => { setFixedToastOpen(true) }} style={{marginLeft: '20px'}}>
-                    Удалить
-                </Button>
+                <div
+                    ref={containerRef}
+                    style={{
+                        position: 'relative',
+                        padding: '100px',
+                        border: '1px dashed black'
+                    }}
+                >
+                    <Toast
+                        open={anchorToastOpen}
+                        anchorElement={buttonElement}
+                        position={select('position', POSITION_OPTIONS, 'left')}
+                        offset={[number('offset[0]', 0), number('offset[1]', 8)]}
+                        badge={select('badge', ['negative', 'positive', 'attention', undefined], 'positive')}
+                        title={text('title', 'Скопировано')}
+                        hasCloser={boolean('hasCloser', true)}
+                        block={boolean('block', false)}
+                        onClose={() => { setAnchorToastOpen(false); }}
+                        autoCloseDelay={number('autoCloseDelay', 3000)}
+                    />
+                    <Toast
+                        open={fixedToastOpen}
+                        badge={select('badge', ['negative', 'positive', 'attention', undefined], 'positive')}
+                        title="Ваша карта удалена"
+                        hasCloser={boolean('hasCloser', true)}
+                        block={boolean('block', false)}
+                        onClose={() => { setFixedToastOpen(false); }}
+                        autoCloseDelay={number('autoCloseDelay', 3000)}
+                        actionButton={<Button size="s" view="ghost" onClick={() => { setFixedToastOpen(false) }}>Восстановить</Button>}
+                        centeredPosition={boolean('centeredPosition', true)}
+                        bottomOffset={number('bottomOffset', 32)}
+                        anchorElement={containerRef.current}
+                        position="bottom-start"
+                        offset={[0, 16]}
+                        block={true}
+                        getPortalContainer={() => containerRef.current}
+                    />
+                    <Button ref={handleButtonRef} onClick={() => { setAnchorToastOpen(true); }}>
+                        Скопировать
+                    </Button>
+                    <Button onClick={() => { setFixedToastOpen(true) }} style={{marginLeft: '20px'}}>
+                        Удалить
+                    </Button>
+                </div>
             </div>
         );
     })}

diff --git a/packages/toast/src/component.tsx b/packages/toast/src/component.tsx
@@ -30,7 +30,7 @@ export type ToastProps = ToastPlateProps &
     > & {
         /**
          * Элемент, относительного которого появляется тост.
-         * Если не передавать, тост будет позиционирован снизу экрана, по центру (position: fixed).
+         * Если не передавать, тост будет позиционирован снизу экрана (position: fixed).
          */
         anchorElement?: HTMLElement;
 
@@ -48,11 +48,6 @@ export type ToastProps = ToastPlateProps &
          * Отступ снизу (при fixed-позиционировании).
          */
         bottomOffset?: number;
-
-        /**
-         * Будет позиционирован снизу по центру (при fixed-позиционировании)
-         */
-        centeredPosition?: boolean;
     };
 
 export const Toast = forwardRef<HTMLDivElement, ToastProps>(
@@ -72,7 +67,6 @@ export const Toast = forwardRef<HTMLDivElement, ToastProps>(
             onTouchStart,
             onClose,
             getPortalContainer,
-            centeredPosition = true,
             ...restProps
         },
         ref,
@@ -176,12 +170,7 @@ export const Toast = forwardRef<HTMLDivElement, ToastProps>(
                 >
                     <ToastPlate
                         {...restProps}
-                        className={cn(
-                            styles.fixed,
-                            styles.toastPlate,
-                            { [styles.centered]: centeredPosition },
-                            className,
-                        )}
+                        className={cn(styles.fixed, styles.toastPlate, className)}
                         style={{
                             ...style,
                             bottom: bottomOffset && `${bottomOffset}px`,

diff --git a/packages/toast/src/index.module.css b/packages/toast/src/index.module.css
@@ -45,24 +45,3 @@
         transform: scale(0.98);
     }
 }
-
-.centered {
-    left: 50%;
-    transform: translateX(-50%) scale(1);
-
-    &.enter {
-        transform: translateX(-50%) scale(0.98);
-    }
-
-    &.enterActive {
-        transform: translateX(-50%) scale(1);
-    }
-
-    &.exit {
-        transform: translateX(-50%) scale(1);
-    }
-
-    &.exitActive {
-        transform: translateX(-50%) scale(0.98);
-    }
-}