All files / src/components/world/entities/scenes SceneTitle.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { useMemo } from "react";
import styled from "styled-components";
import { SceneMetadata } from "components/world/entities/scenes/SceneMetadata";
import { useAppSelectorPick } from "store/hooks";
import { sceneSelectors } from "store/features/entities/entitiesSelectors";
import { TILE_SIZE } from "consts";
import { LabelSpan } from "ui/buttons/LabelButton";
import { sceneName } from "shared/lib/entities/entitiesHelpers";
 
interface SceneTitleProps {
  sceneId: string;
  sceneIndex: number;
}
 
const SceneName = styled.div`
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`;
 
export const SceneTitle = ({ sceneId, sceneIndex }: SceneTitleProps) => {
  const scene = useAppSelectorPick(
    (state) => sceneSelectors.selectById(state, sceneId),
    ["notes", "width", "labelColor", "name"],
  );
 
  const name = useMemo(
    () => (scene ? sceneName(scene, sceneIndex) : ""),
    [sceneIndex, scene],
  );
 
  const lastNamePart = useMemo(() => name.replace(/.*[/\\]/, ""), [name]);
 
  Iif (!scene) {
    return null;
  }
 
  return (
    <SceneMetadata sceneId={sceneId}>
      <SceneName
        title={scene.notes}
        style={{
          maxWidth: scene.width * TILE_SIZE,
        }}
      >
        <LabelSpan color={scene.labelColor}>{lastNamePart}</LabelSpan>
      </SceneName>
    </SceneMetadata>
  );
};