better scroll dialog

src/containers/dialogs/BetterScrollDialog/index.tsx

@@ -0,0 +1,64 @@
+import React, {
+  FC,
+  MouseEventHandler,
+  ReactChild,
+  useCallback,
+  useEffect,
+  useState,
+  useRef,
+} from 'react';
+// import { DialogPanel } from '~/components/panels/DialogPanel';
+import classNames from 'classnames';
+import { Scroll } from '~/components/containers/Scroll';
+import * as styles from './styles.scss';
+import { enableBodyScroll, disableBodyScroll } from 'body-scroll-lock';
+import { Icon } from '~/components/input/Icon';
+
+interface IProps {
+  children: React.ReactChild;
+  header?: JSX.Element;
+  footer?: JSX.Element;
+  size?: 'medium' | 'big';
+  width?: number;
+  error?: string;
+
+  onOverlayClick?: MouseEventHandler<HTMLDivElement>;
+  onRefCapture?: (ref: any) => void;
+  onClose?: () => void;
+}
+
+const BetterScrollDialog: FC<IProps> = ({
+  children,
+  header,
+  footer,
+  width = 600,
+  error,
+  onOverlayClick,
+  onRefCapture,
+  onClose,
+}) => {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    disableBodyScroll(ref.current);
+
+    return () => enableBodyScroll(ref.current);
+  }, [ref]);
+
+  return (
+    <div className={styles.wrap} ref={ref}>
+      <div className={styles.container} style={{ maxWidth: width }}>
+        {onClose && (
+          <div className={styles.close} onClick={onClose}>
+            <Icon icon="close" />
+          </div>
+        )}
+        {header && <div className={styles.header}>{header}</div>}
+        <div className={styles.body}>{children}</div>
+        {footer && <div className={styles.header}>{footer}</div>}
+      </div>
+    </div>
+  );
+};
+
+export { BetterScrollDialog };

src/containers/dialogs/BetterScrollDialog/styles.scss

@@ -0,0 +1,84 @@
+.wrap {
+  width: 100vw;
+  height: 100vh;
+  background: transparentize(darken($content_bg, 4%), 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  box-sizing: border-box;
+}
+
+.container {
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  flex-direction: column;
+  min-width: $cell;
+  max-width: 400px;
+  max-height: 100%;
+  width: 100%;
+  position: relative;
+
+  & > div:nth-child(2) {
+    border-top-left-radius: $dialog_radius;
+    border-top-right-radius: $dialog_radius;
+  }
+
+  & > div:last-child {
+    border-bottom-left-radius: $dialog_radius;
+    border-bottom-right-radius: $dialog_radius;
+  }
+}
+
+.header,
+.footer {
+  @include outer_shadow();
+
+  padding: 10px;
+  background: darken($content_bg, 2%);
+}
+
+.body {
+  @include outer_shadow();
+
+  overflow: auto;
+  flex: 1;
+  background: $content_bg;
+}
+
+@keyframes appear {
+  0% {
+    top: -48px;
+  }
+  100% {
+    top: -58px;
+  }
+}
+
+.close {
+  background: darken($content_bg, 2%);
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  top: -58px;
+  right: 50%;
+  transform: translate(50%, 0);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  cursor: pointer;
+  transition: transform 0.25s, background-color 0.25s;
+  animation: appear 0.5s forwards;
+
+  &:hover {
+    background-color: $red;
+    transform: translate(50%, -5px);
+  }
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+}