Slate JS: как выделить соседние компоненты с одинаковой меткой при наведении курсора? - PullRequest
Новая
       20

Slate JS: как выделить соседние компоненты с одинаковой меткой при наведении курсора?

1 голос
/ 28 июня 2019 
// utility hook
function useMouseOver() {
  const [mouseOver, setMouseOver] = useState(false);
  return {
    mouseOver,
    triggers: {
      onMouseEnter: () => setMouseOver(true),
      onMouseLeave: () => setMouseOver(false),
    },
  };
}

// mark component
function CommentHighlight({ attributes, children, ...props }) {
  const { mouseOver, triggers } = useMouseOver();
  return (
    <span
      {...attributes}
      {...triggers}
      style={{
        background: mouseOver ? yellow[600] : yellow[200],
        cursor: 'pointer',
      }}
    >
      {children}
    </span>
  );
}

Представьте себе 2 перекрывающихся комментария, они имеют разные отметки, но отображаются с одним и тем же компонентом CommentHighlight: 

-----
   ---------
aaaccbbbbbbb
  • a - имеет отметку из комментария 1
  • b - имеет оценку из комментария 2
  • c - имеет оценку из комментариев 1 и 2

Когда я наведите курсор мыши на aaa Мне нужно cc изменить цвет тоже.Но как?

Единственное, что я могу предположить, - это отслеживать состояние выделения в редуксе (или аналогичном) и обновлять каждый компонент комментария при изменении состояния.Но это похоже на излишество.

1 Ответ

0 голосов
/ 28 июня 2019 

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [back, setback] = React.useState(false);
  const changeback = value => {
    setback(value);
  };
  return (
    <React.Fragment>
      <CommentHighlight change={back} changeit={e => changeback(e)}>
        aaa
      </CommentHighlight>
      <CommentHighlight change={back} changeit={e => changeback(e)}>
        aaa
      </CommentHighlight>
    </React.Fragment>
  );
}
function useMouseOver(changeit) {
  const [mouseOver, setMouseOver] = React.useState(false);
  return {
    mouseOver,
    triggers: {
      onMouseEnter: () => {
        setMouseOver(true);
        changeit(true);
      },
      onMouseLeave: () => {
        setMouseOver(false);
        changeit(false);
      }
    }
  };
}

// mark component
function CommentHighlight({ attributes, children, ...props }) {
  const { mouseOver, triggers } = useMouseOver(props.changeit);
  return (
    <span
      {...attributes}
      {...triggers}
      style={{
        background: props.change ? "yellow" : "blue",
        cursor: "pointer"
      }}
    >
      {children}
    </span>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Я не знаю, ищите ли вы этот подход, но здесь, когда вы наводите курсор на первый комментарий, выделите второй, изменит цвет на и наоборот

...