added flow menus

src/utils/hooks/flow/useFlowCellControls.ts

@@ -0,0 +1,46 @@
+import { useCallback } from 'react';
+import { FlowDisplay, INode } from '~/redux/types';
+
+export const useFlowCellControls = (
+  id: INode['id'],
+  description: string | undefined,
+  flow: FlowDisplay,
+  onChangeCellView: (id: INode['id'], flow: FlowDisplay) => void
+) => {
+  const onChange = useCallback(
+    (value: Partial<FlowDisplay>) => onChangeCellView(id, { ...flow, ...value }),
+    []
+  );
+
+  const hasDescription = !!description && description.length > 32;
+
+  const toggleViewDescription = useCallback(() => {
+    const show_description = !(flow && flow.show_description);
+    onChange({ show_description });
+  }, [id, flow, onChange]);
+
+  const setViewSingle = useCallback(() => {
+    onChange({ display: 'single' });
+  }, [id, flow, onChange]);
+
+  const setViewHorizontal = useCallback(() => {
+    onChange({ display: 'horizontal' });
+  }, [id, flow, onChange]);
+
+  const setViewVertical = useCallback(() => {
+    onChange({ display: 'vertical' });
+  }, [id, flow]);
+
+  const setViewQuadro = useCallback(() => {
+    onChange({ display: 'quadro' });
+  }, [id, flow, onChange]);
+
+  return {
+    hasDescription,
+    setViewHorizontal,
+    setViewVertical,
+    setViewQuadro,
+    setViewSingle,
+    toggleViewDescription,
+  };
+};

src/utils/hooks/useFocusEvent.ts

@@ -0,0 +1,18 @@
+import { useCallback, useState } from 'react';
+
+export const useFocusEvent = (initialState = false) => {
+  const [focused, setFocused] = useState(initialState);
+
+  const onFocus = useCallback(
+    event => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      setFocused(true);
+    },
+    [setFocused]
+  );
+  const onBlur = useCallback(() => setTimeout(() => setFocused(false), 300), [setFocused]);
+
+  return { focused, onBlur, onFocus };
+};

src/utils/hooks/usePopperModifiers.ts

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import { Modifier } from 'react-popper';
+
+const sameWidth = {
+  name: 'sameWidth',
+  enabled: true,
+  phase: 'beforeWrite',
+  requires: ['computeStyles'],
+  fn: ({ state }: { state: any }) => {
+    // eslint-disable-next-line no-param-reassign
+    state.styles.popper.width = `${state.rects.reference.width}px`;
+  },
+  effect: ({ state }: { state: any }) => {
+    // eslint-disable-next-line no-param-reassign
+    state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
+  },
+};
+
+export const usePopperModifiers = (offsetX = 0, offsetY = 10, justify?: boolean): Modifier<any>[] =>
+  useMemo(
+    () =>
+      [
+        {
+          name: 'offset',
+          options: {
+            offset: [offsetX, offsetY],
+          },
+        },
+        {
+          name: 'preventOverflow',
+          options: {
+            padding: 10,
+          },
+        },
+        ...(justify ? [sameWidth] : []),
+      ] as Modifier<any>[],
+    [offsetX, offsetY, justify]
+  );