added promoted switch button

src/components/editors/EditorImageUploadButton/index.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 import { EditorUploadButton } from '~/components/editors/EditorUploadButton';
-import { INode } from '~/redux/types';
 import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 import { IEditorComponentProps } from '~/redux/node/types';
 

src/components/editors/EditorPanel/styles.module.scss

@@ -13,11 +13,12 @@
   flex-direction: row;
 
   & > * {
-    margin: 0 $gap;
+    margin: 0 $gap / 2;
 
     &:first-child {
       margin-left: 0;
     }
+
     &:last-child {
       margin-right: 0;
     }

src/components/editors/EditorPublicSwitch/index.tsx

@@ -0,0 +1,49 @@
+import React, { FC, useCallback, useEffect, useRef } from 'react';
+import styles from './styles.module.scss';
+import { Icon } from '~/components/input/Icon';
+import { IEditorComponentProps } from '~/redux/node/types';
+import classNames from 'classnames';
+import { usePopper } from 'react-popper';
+
+interface IProps extends IEditorComponentProps {}
+
+const EditorPublicSwitch: FC<IProps> = ({ data, setData }) => {
+  const tooltip = useRef<HTMLDivElement>(null);
+  const onChange = useCallback(() => setData({ ...data, is_promoted: !data.is_promoted }), [
+    data,
+    setData,
+  ]);
+
+  const pop = usePopper(tooltip?.current?.parentElement, tooltip.current, {
+    placement: 'bottom',
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 4],
+        },
+      },
+    ],
+  });
+
+  useEffect(() => console.log(pop), [pop]);
+
+  return (
+    <div
+      className={classNames(styles.wrap, { [styles.promoted]: data.is_promoted })}
+      onClick={onChange}
+    >
+      <div className={styles.tooltip} ref={tooltip}>
+        {data.is_promoted
+          ? 'Доступно всем на главной странице'
+          : 'Видно только сотрудникам в лаборатории'}
+      </div>
+
+      <div className={styles.icon}>
+        {data.is_promoted ? <Icon size={24} icon="waves" /> : <Icon size={24} icon="lab" />}
+      </div>
+    </div>
+  );
+};
+
+export { EditorPublicSwitch };

src/components/editors/EditorPublicSwitch/styles.module.scss

@@ -0,0 +1,63 @@
+@import "src/styles/variables";
+
+.wrap {
+  @include outer_shadow();
+  @include editor_round_button();
+
+  transition: all 0.5s;
+  fill: $content_bg;
+  background-color: $olive;
+
+  &.promoted {
+    background-color: lighten($content_bg, 4%);
+    fill: $red;
+  }
+
+  &:hover {
+    opacity: 1;
+
+    .tooltip {
+      opacity: 1;
+    }
+  }
+
+  input {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    z-index: 1;
+    cursor: pointer;
+  }
+}
+
+.icon {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tooltip {
+  border-radius: 2px;
+  background: darken($content_bg, 6%);
+  padding: $gap;
+  position: absolute;
+  font: $font_12_semibold;
+  bottom: 100%;
+  right: 0;
+  transform: translate(0, -$gap);
+  text-align: center;
+  touch-action: none;
+  pointer-events: none;
+  opacity: 0;
+  width: 100px;
+  user-select: none;
+  transition: all 0.1s;
+}

src/components/editors/EditorUploadButton/index.tsx

@@ -1,15 +1,15 @@
 import React, { FC, useCallback, useEffect } from 'react';
 import styles from './styles.module.scss';
 import { Icon } from '~/components/input/Icon';
-import { IFileWithUUID, INode, IFile } from '~/redux/types';
+import { IFile, IFileWithUUID } from '~/redux/types';
 import uuid from 'uuid4';
 import { UPLOAD_SUBJECTS, UPLOAD_TARGETS, UPLOAD_TYPES } from '~/redux/uploads/constants';
 import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
-import { assocPath } from 'ramda';
-import { append } from 'ramda';
+import { append, assocPath } from 'ramda';
 import { selectUploads } from '~/redux/uploads/selectors';
 import { connect } from 'react-redux';
 import { NODE_SETTINGS } from '~/redux/node/constants';
+import { IEditorComponentProps } from '~/redux/node/types';
 
 const mapStateToProps = state => {
   const { statuses, files } = selectUploads(state);
@@ -22,12 +22,7 @@ const mapDispatchToProps = {
 };
 
 type IProps = ReturnType<typeof mapStateToProps> &
-  typeof mapDispatchToProps & {
-    data: INode;
-    setData: (val: INode) => void;
-    temp: string[];
-    setTemp: (val: string[]) => void;
-
+  typeof mapDispatchToProps & IEditorComponentProps & {
     accept?: string;
     icon?: string;
     type?: typeof UPLOAD_TYPES[keyof typeof UPLOAD_TYPES];
@@ -79,18 +74,6 @@ const EditorUploadButtonUnconnected: FC<IProps> = ({
     [data, setData]
   );
 
-  // const onDrop = useCallback(
-  //   (event: React.DragEvent<HTMLDivElement>) => {
-  //     event.preventDefault();
-
-  //     if (!event.dataTransfer || !event.dataTransfer.files || !event.dataTransfer.files.length)
-  //       return;
-
-  //     onUpload(Array.from(event.dataTransfer.files));
-  //   },
-  //   [onUpload]
-  // );
-
   useEffect(() => {
     window.addEventListener('dragover', eventPreventer, false);
     window.addEventListener('drop', eventPreventer, false);

src/components/editors/EditorUploadButton/styles.module.scss

@@ -2,17 +2,10 @@
 
 .wrap {
   @include outer_shadow();
+  @include editor_round_button();
 
-  width: $upload_button_height;
-  height: $upload_button_height;
-  border-radius: ($upload_button_height / 2) !important;
-  position: relative;
-  border-radius: $radius;
-  cursor: pointer;
-  // opacity: 0.7;
   transition: opacity 0.5s;
   background: $red_gradient;
-  // box-shadow: $content_bg 0 0 5px 10px;
 
   &:hover {
     opacity: 1;