editor scrollbars

src/components/containers/CellGrid/index.tsx

@@ -0,0 +1,25 @@
+import React, { FC, HTMLAttributes, ReactChild, ReactChildren } from 'react';
+import * as styles from './styles.scss';
+import classNames = require("classnames");
+
+type IProps = HTMLAttributes<HTMLDivElement> & {
+  children: any;
+  size: number;
+}
+
+const CellGrid: FC<IProps> = ({
+  children,
+  size,
+  className,
+  ...props
+}) => (
+    <div
+      className={classNames(styles.grid, className)}
+      style={{ gridTemplateColumns: `repeat(auto-fit, minmax(${size}px, 1fr))` }}
+      {...props}
+    >
+      {children}
+    </div>
+);
+
+export { CellGrid };

src/components/containers/CellGrid/styles.scss

@@ -0,0 +1,6 @@
+.grid {
+  display: grid;
+  grid-auto-rows: 1fr;
+  grid-column-gap: $gap;
+  grid-row-gap: $gap;
+}

src/components/containers/Group/index.tsx

@@ -7,6 +7,7 @@ type IProps = React.HTMLAttributes<HTMLDivElement> & {
   top?: boolean;
   bottom?: boolean;
   wrap?: boolean;
+  seamless?: boolean;
 };
 
 const Group: FC<IProps> = ({
@@ -16,6 +17,7 @@ const Group: FC<IProps> = ({
   top = false,
   bottom = false,
   wrap = false,
+  seamless = false,
  ...props
 }) => (
   <div
@@ -27,6 +29,7 @@ const Group: FC<IProps> = ({
         [styles.top]: top,
         [styles.bottom]: bottom,
         [styles.wrap]: wrap,
+        [styles.seamless]: seamless,
       },
       className,
     )}

src/components/containers/Group/styles.scss

@@ -39,4 +39,8 @@
   &.wrap {
     flex-wrap: wrap;
   }
+
+  &.seamless > * {
+    margin: 0;
+  }
 }

src/components/containers/Panel/index.tsx

@@ -0,0 +1,19 @@
+import React, { FC, HTMLAttributes } from 'react';
+import * as styles from './styles.scss';
+import classNames = require("classnames");
+
+type IProps = HTMLAttributes<HTMLDivElement> & {
+
+}
+
+const Panel: FC<IProps> = ({
+  className,
+  children,
+  ...props
+}) => (
+    <div className={classNames(styles.panel, className)} {...props}>
+      {children}
+    </div>
+);
+
+export { Panel };

src/components/containers/Panel/styles.scss

@@ -0,0 +1,3 @@
+.panel {
+  @include outer_shadow();
+}

src/components/containers/Scroll/index.tsx

@@ -0,0 +1,45 @@
+import React, { MouseEventHandler, useEffect, useState } from 'react';
+import * as styles from './styles.scss';
+import { Scrollbars } from 'tt-react-custom-scrollbars';
+import classNames from 'classnames';
+
+interface IProps {
+  children: Element | React.ReactChild;
+  style?: React.CSSProperties;
+  className?: string;
+  autoHeight?: boolean;
+  autoHeightMax?: number;
+  onRef?: (el: any) => void;
+  onScroll?: MouseEventHandler;
+  onScrollStop?: MouseEventHandler;
+}
+
+export const Scroll = ({
+  children,
+  className = '',
+  onRef = null,
+  ...props
+}: IProps) => {
+  const [ref, setRef] = useState(null);
+
+  useEffect(() => {
+    if (onRef && ref) return onRef(ref);
+  }, [ref, onRef]);
+
+  return (
+    <Scrollbars
+      className={classNames(styles.container, className)}
+      renderTrackHorizontal={data => <div className={styles.track_horizontal} {...data} />}
+      renderTrackVertical={data => <div className={styles.track_vertical} {...data} />}
+      renderThumbHorizontal={data => <div className={styles.thumb_horizontal} {...data} />}
+      renderThumbVertical={data => <div className={styles.thumb_vertical} {...data} />}
+      renderView = {data => <div className={styles.view} {...data} />}
+      hideTracksWhenNotNeeded
+      universal
+      ref={setRef}
+      { ...props }
+    >
+      {children}
+    </Scrollbars>
+  );
+};

src/components/containers/Scroll/styles.scss

@@ -0,0 +1,107 @@
+.container {
+  min-height: 50px;
+}
+
+.track_vertical {
+  height: 100%;
+  width: 20px !important;
+  position: absolute;
+  right: 0;
+  top: 0;
+  opacity: $scroll_inactive_opacity;
+  transition: opacity 0.25s;
+  padding: $gap 0;
+  box-sizing: border-box;
+  z-index: 1;
+
+  &:hover, &:active {
+    opacity: 0.7;
+  }
+
+  &::after {
+    content: ' ';
+    width: 1px;
+    background: $scroll_color;
+    position: absolute;
+    left: 12px;
+    top: 0;
+    height: 100%;
+    opacity: 0.5;
+    z-index: 1;
+  }
+}
+
+.thumb_vertical {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  cursor: grab;
+
+  &::after {
+    position: absolute;
+    content: ' ';
+    width: 5px;
+    top: 0;
+    left: 10px;
+    height: 100%;
+    border-radius: 3px;
+    background: $scroll_color;
+    z-index: 2;
+  }
+}
+
+.track_horizontal {
+  height: 20px !important;
+  width: 100% !important;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  opacity: 0.3;
+  transition: opacity 0.25s;
+  padding: 0 $gap;
+  box-sizing: border-box;
+  z-index: 10;
+
+  &:hover, &:active {
+    opacity: 0.7;
+  }
+
+  &::after {
+    content: ' ';
+    height: 1px;
+    background: $scroll_color;
+    position: absolute;
+    top: 12px;
+    left: 0;
+    width: 100%;
+    opacity: 0.5;
+    z-index: 1;
+  }
+}
+
+.thumb_horizontal {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  cursor: grab;
+
+  &::after {
+    position: absolute;
+    content: ' ';
+    height: 5px;
+    top: 10px;
+    left: 0;
+    width: 100%;
+    border-radius: 3px;
+    background: $scroll_color;
+    z-index: 2;
+  }
+}