added flow context

src/components/flow/FlowStamp/index.tsx

@@ -1,124 +0,0 @@
-import React, { FC, FormEvent, useCallback, useMemo } from 'react';
-import { InputText } from '~/components/input/InputText';
-import { FlowRecent } from '../FlowRecent';
-
-import styles from './styles.module.scss';
-import { FlowSearchResults } from '../FlowSearchResults';
-import { Icon } from '~/components/input/Icon';
-import { Group } from '~/components/containers/Group';
-import { Toggle } from '~/components/input/Toggle';
-import classNames from 'classnames';
-import { Superpower } from '~/components/boris/Superpower';
-import { experimentalFeatures } from '~/constants/features';
-import { IFlowNode, INode } from '~/redux/types';
-
-interface IProps {
-  searchText: string;
-  searchTotal: number;
-  searchIsLoading: boolean;
-  searchResults: INode[];
-  onSearchChange: (text: string) => void;
-  onSearchLoadMore: () => void;
-
-  recent: IFlowNode[];
-  updated: IFlowNode[];
-  isFluid: boolean;
-  onToggleLayout: () => void;
-}
-
-const FlowStamp: FC<IProps> = ({
-  searchText,
-  searchIsLoading,
-  searchTotal,
-  searchResults,
-  onSearchChange,
-  onSearchLoadMore,
-
-  recent,
-  updated,
-  isFluid,
-  onToggleLayout,
-}) => {
-  const onSearchSubmit = useCallback((event: FormEvent) => {
-    event.preventDefault();
-  }, []);
-
-  const onClearSearch = useCallback(() => onSearchChange(''), [onSearchChange]);
-
-  const onKeyUp = useCallback(
-    event => {
-      if (event.key !== 'Escape') return;
-      onClearSearch();
-      event.target.blur();
-    },
-    [onClearSearch]
-  );
-
-  const after = useMemo(
-    () =>
-      searchText ? (
-        <Icon icon="close" size={24} className={styles.close_icon} onClick={onClearSearch} />
-      ) : (
-        <Icon icon="search" size={24} className={styles.search_icon} />
-      ),
-    [onClearSearch, searchText]
-  );
-
-  return (
-    <div className={styles.wrap}>
-      <form className={styles.search} onSubmit={onSearchSubmit}>
-        <InputText
-          title="Поиск"
-          value={searchText}
-          handler={onSearchChange}
-          after={after}
-          onKeyUp={onKeyUp}
-        />
-      </form>
-
-      {searchText ? (
-        <div className={styles.search_results}>
-          <div className={styles.grid}>
-            <div className={styles.label}>
-              <span className={styles.label_text}>Результаты поиска</span>
-              <span className="line" />
-              <span>{!searchIsLoading && searchTotal}</span>
-            </div>
-
-            <div className={styles.items}>
-              <FlowSearchResults
-                isLoading={searchIsLoading}
-                results={searchResults}
-                onLoadMore={onSearchLoadMore}
-              />
-            </div>
-          </div>
-        </div>
-      ) : (
-        <div className={styles.grid}>
-          <div className={classNames(styles.label, styles.whatsnew)}>
-            <span className={styles.label_text}>Что нового?</span>
-            <span className="line" />
-          </div>
-
-          <div className={styles.items}>
-            <FlowRecent updated={updated} recent={recent} />
-          </div>
-        </div>
-      )}
-
-      {experimentalFeatures.liquidFlow && (
-        <Superpower>
-          <div className={styles.toggles}>
-            <Group horizontal onClick={onToggleLayout} className={styles.fluid_toggle}>
-              <Toggle value={isFluid} />
-              <div className={styles.toggles__label}>Жидкое течение</div>
-            </Group>
-          </div>
-        </Superpower>
-      )}
-    </div>
-  );
-};
-
-export { FlowStamp };

src/components/flow/FlowStamp/styles.module.scss

@@ -1,129 +0,0 @@
-@import "src/styles/variables";
-
-.wrap {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  border-radius: $radius;
-}
-
-.grid {
-  @include outer_shadow();
-  display: flex;
-  justify-content: stretch;
-  flex-direction: column;
-  flex: 1;
-  border-radius: $radius;
-  position: relative;
-  background: $content_bg;
-  overflow: hidden;
-
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 60px;
-    width: 100%;
-    background: linear-gradient(transparentize($content_bg, 1), $content_bg 90%);
-    pointer-events: none;
-    touch-action: none;
-
-    @include tablet {
-      display: none;
-    }
-  }
-}
-
-.items {
-  padding: 0 $gap 0 $gap;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.label {
-  display: flex;
-  flex-direction: row;
-  min-width: 0;
-  padding: $gap;
-  border-radius: $radius;
-
-  @include title_with_line();
-
-  color: transparentize(white, $amount: 0.8);
-
-  &_search {
-    color: white;
-    padding-left: $gap * 1.2;
-  }
-
-  & > :global(.line) {
-    margin-right: $gap;
-  }
-}
-
-.label_text {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.search {
-  @include outer_shadow();
-
-  background: lighten($content_bg, 3%);
-  padding: $gap;
-  border-radius: $radius;
-}
-
-.search_icon {
-  fill: lighten($content_bg, 8%);
-  stroke: lighten($content_bg, 8%);
-  stroke-width: 0.5;
-  pointer-events: none;
-  touch-action: none;
-}
-
-.close_icon {
-  cursor: pointer;
-  stroke: white;
-  stroke-width: 0.5;
-  opacity: 0.5;
-  transition: opacity 0.25s;
-
-  &:hover {
-    opacity: 0.7;
-  }
-}
-
-.toggles {
-
-  & > div {
-    padding: $gap;
-    font: $font_14_semibold;
-  }
-
-  &__label {
-    cursor: pointer;
-  }
-}
-
-.fluid_toggle {
-  @include desktop {
-    display: none;
-  }
-}
-
-.whatsnew {
-  @media (max-width: $flow_hide_recents) {
-    display: none;
-  }
-}
-
-.search_results {
-  @include tablet {
-    margin-top: $gap;
-  }
-}